/* ============================================================
   ELEMENTESSE — Custom WooCommerce Storefront Styles
   Same palette/typography as the original site for continuity.
   ============================================================ */
:root{
  --ink:#162623; --ink-soft:#5E8884;
  --teal:#1F7A6E; --teal-deep:#175F55; --teal-tint:#C7E5DF;
  --amber:#D4944A; --amber-deep:#B97A38; --amber-tint:#F5DCB4;
  --line:#CBE3DF; --danger:#C4573F; --cream:#F7F3EC;
}

.wc-root{ font-family:'Philosopher', serif; color:var(--ink); background:var(--cream); }
.wc-root *{ box-sizing:border-box; }

/* ---- Header ---- */
.wc-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 32px; background:#fff; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:12px; }
.wc-logo{ font-size:20px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:8px; }
.wc-nav{ display:flex; gap:20px; flex-wrap:wrap; }
.wc-nav-link{ cursor:pointer; font-size:14px; color:var(--ink); text-decoration:none; padding-bottom:2px; border-bottom:2px solid transparent; }
.wc-nav-link.active, .wc-nav-link:hover{ border-bottom-color:var(--teal); color:var(--teal-deep); }
.wc-cart-icon{ position:relative; cursor:pointer; font-size:20px; }
.wc-cart-badge{ position:absolute; top:-8px; right:-10px; background:var(--amber); color:#fff; font-size:10px; font-weight:700; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-family:sans-serif; }

/* ---- Views ---- */
.wc-view{ display:none; padding:32px; max-width:1200px; margin:0 auto; }
.wc-view.active{ display:block; }
.wc-loading{ text-align:center; padding:60px 0; color:var(--ink-soft); font-size:14px; }

/* ---- Hero ---- */
.wc-hero{ background:linear-gradient(160deg,#3FA093 0%,#1F7A6E 45%,#123F38 100%); color:#fff; border-radius:20px; padding:60px 40px; margin-bottom:40px; text-align:center; }
.wc-hero h1{ font-size:38px; margin-bottom:12px; }
.wc-hero p{ opacity:.9; margin-bottom:20px; }
.wc-hero-cta{ display:inline-block; background:var(--amber); color:#fff; padding:12px 28px; border-radius:8px; cursor:pointer; font-weight:700; font-family:sans-serif; font-size:13px; letter-spacing:.03em; }

.wc-section-head{ margin-bottom:24px; }
.wc-section-head h2{ font-size:26px; }

/* ---- Product Grid & Cards ---- */
.wc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:22px; }
.wc-card{ background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; display:flex; flex-direction:column; }
.wc-card:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(23,95,55,.14); }
.wc-card-photo{ aspect-ratio:1; background-size:cover; background-position:center; background-color:var(--teal-tint); position:relative; }
.wc-badge{ position:absolute; top:10px; left:10px; background:var(--danger); color:#fff; font-size:10px; font-weight:700; padding:4px 8px; border-radius:6px; font-family:sans-serif; }
.wc-badge-oos{ background:var(--danger); color:#fff; }
.wc-card-info{ padding:12px 14px 4px; flex:1; }
.wc-card-name{ font-size:14px; font-weight:700; margin-bottom:4px; line-height:1.3; }
.wc-card-price{ font-size:13px; color:var(--teal-deep); font-weight:700; font-family:sans-serif; }
.wc-card-price s{ color:var(--ink-soft); font-weight:400; opacity:.7; margin-left:6px; }
.wc-card-add{ margin:10px 14px 14px; background:var(--teal); color:#fff; border:none; border-radius:8px; padding:10px; font-weight:700; font-size:12.5px; cursor:pointer; font-family:sans-serif; transition:background .15s; }
.wc-card-add:hover{ background:var(--teal-deep); }
.wc-card-add:disabled{ background:#ccc; cursor:not-allowed; }

/* ---- Category pills ---- */
.wc-pills{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.wc-pill{ background:#fff; border:1.5px solid var(--line); border-radius:20px; padding:8px 18px; font-size:13px; cursor:pointer; font-family:sans-serif; }
.wc-pill.active{ background:var(--teal); border-color:var(--teal); color:#fff; }

/* ---- Product detail page ---- */
.wc-pdp{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media (max-width:760px){ .wc-pdp{ grid-template-columns:1fr; } }
.wc-pdp-photo{ aspect-ratio:1; background-size:cover; background-position:center; background-color:var(--teal-tint); border-radius:16px; }
.wc-pdp-info h1{ font-size:28px; margin-bottom:16px; font-family:sans-serif; }
.wc-pdp-price{ font-size:22px; font-weight:700; color:var(--teal-deep); margin-bottom:16px; font-family:sans-serif; }
.wc-pdp-price s{ color:var(--ink-soft); font-weight:400; font-size:16px; margin-left:8px; }
.wc-pdp-desc{ font-size:14px; line-height:1.7; color:var(--ink-soft); margin-bottom:20px; }
.wc-pdp-qty{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.wc-pdp-qty button{ width:34px; height:34px; border:1px solid var(--line); background:#fff; border-radius:8px; cursor:pointer; font-size:16px; }
.wc-btn-primary{ background:var(--teal); color:#fff; border:none; border-radius:8px; padding:14px 32px; font-weight:700; font-size:14px; cursor:pointer; font-family:sans-serif; }
.wc-btn-primary:hover{ background:var(--teal-deep); }
.wc-btn-primary:disabled{ background:#ccc; cursor:not-allowed; }

/* ---- Toast ---- */
.wc-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:12px 22px; border-radius:10px; font-size:13px; font-family:sans-serif; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:400; }
.wc-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }