/* ============================================================
   PLANET AYURVEDA, REDESIGN CONCEPT
   Design system: deep forest / rich green / cream / gold accent
   ============================================================ */

:root{
  --forest:#14532D;
  --green:#15803D;
  --green-dark:#0F5C29;
  --cream:#FAF7F2;
  --white:#FFFFFF;
  --gold:#B8863B;
  --gold-light:#D9B570;
  --ink:#1C1917;
  --stone:#57534E;
  --stone-light:#8A8580;
  --line:#E7E0D4;

  --radius-sm:12px;
  --radius-lg:16px;
  --radius-full:999px;

  --shadow-sm:0 2px 10px rgba(20,83,45,0.08);
  --shadow-md:0 10px 30px rgba(20,83,45,0.14);
  --shadow-lg:0 20px 50px rgba(20,83,45,0.18);

  --ease:200ms ease;
  --header-h:64px;
  --announce-h:40px;

  --font-head:'Lora', Georgia, serif;
  --font-body:'Raleway', -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; overflow-x:clip; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:600; margin:0; color:var(--forest); }
p{ margin:0; }

.cursor-pointer, button, a, [role="button"], .product-card, input[type="text"]{ cursor:pointer; }
input[type="text"]{ cursor:text; }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

.wrap{ max-width:1280px; margin:0 auto; padding:0 16px; }
@media (min-width:480px){ .wrap{ padding:0 24px; } }
.eyebrow{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-block;
  margin-bottom:12px;
}
.section-head{ text-align:center; max-width:640px; margin:0 auto 44px; }
.section-head h2{ font-size:clamp(28px,4vw,40px); margin-bottom:12px; }
.section-head p{ color:var(--stone); font-size:16px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  letter-spacing:0.02em;
  padding:14px 30px;
  border-radius:var(--radius-full);
  border:1.5px solid transparent;
  transition:transform var(--ease), background var(--ease), color var(--ease), border-color var(--ease), box-shadow var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:scale(0.97); }
.btn-gold{ background:var(--gold); color:var(--white); }
.btn-gold:hover{ background:var(--gold-light); box-shadow:var(--shadow-md); }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,0.55); color:var(--white); }
.btn-outline:hover{ background:rgba(255,255,255,0.12); border-color:var(--white); }
.btn-solid-green{ background:var(--green); color:var(--white); }
.btn-solid-green:hover{ background:var(--forest); box-shadow:var(--shadow-md); }
.btn-outline-green{ background:transparent; border-color:var(--green); color:var(--green); }
.btn-outline-green:hover{ background:rgba(21,128,55,0.08); }
.btn-sm{ padding:10px 20px; font-size:13px; }
.btn-full{ width:100%; }
.btn:disabled{ opacity:0.6; cursor:default; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:var(--radius-full);
}
.badge-gold{ background:var(--gold); color:var(--white); }

/* icons */
.icon{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.icon-sm{ width:18px; height:18px; }
.icon-lg{ width:36px; height:36px; }

/* ============ ANNOUNCEMENT BAR ============ */
.announce{
  background:var(--forest);
  color:var(--cream);
  font-size:12.5px;
  letter-spacing:0.03em;
  text-align:center;
  padding:9px 16px;
  min-height:var(--announce-h);
  display:flex;
  align-items:center;
  justify-content:center;
}
.announce .wrap{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.announce .dot{ opacity:0.5; }

/* ============ HEADER ============ */
header.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(250,247,242,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--ease), border-color var(--ease);
}
header.site-header.is-scrolled{
  box-shadow:0 4px 20px rgba(20,83,45,0.10);
  border-bottom-color:var(--line);
}
.header-inner{
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.wordmark{ display:flex; align-items:center; gap:8px; flex-shrink:1; min-width:0; }
.wordmark .leaf-mark{ color:var(--green); width:26px; height:26px; flex-shrink:0; }
.wordmark-text{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.wordmark-text .name{ font-family:var(--font-head); font-size:16px; font-weight:700; color:var(--forest); white-space:nowrap; }
.wordmark-text .tag{ font-size:7px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
@media (min-width:480px){
  .wordmark{ gap:10px; }
  .wordmark .leaf-mark{ width:30px; height:30px; }
  .wordmark-text .name{ font-size:20px; }
  .wordmark-text .tag{ font-size:8.5px; letter-spacing:0.16em; }
}

/* real wordmark logo (logo.png) */
.site-logo{ display:block; height:36px; width:auto; max-width:100%; }
@media (min-width:480px){ .site-logo{ height:44px; } }
.footer-logo-wrap{
  background:var(--cream);
  padding:10px 16px;
  border-radius:12px;
  display:inline-flex;
}

nav.main-nav{ display:none; }
nav.main-nav ul{ display:flex; gap:32px; }
nav.main-nav a{
  font-size:13.5px;
  font-weight:600;
  letter-spacing:0.03em;
  color:var(--ink);
  padding:8px 0;
  position:relative;
  transition:color var(--ease);
}
nav.main-nav a:hover{ color:var(--green); }
nav.main-nav a::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transition:transform var(--ease);
}
nav.main-nav a:hover::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:0; flex-shrink:0; }
.icon-btn{
  background:none; border:none; color:var(--forest);
  width:36px; height:36px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--ease);
  position:relative;
  flex-shrink:0;
}
@media (min-width:480px){
  .header-actions{ gap:4px; }
  .icon-btn{ width:40px; height:40px; }
}
.icon-btn:hover{ background:rgba(21,128,55,0.08); }

.search-wrap{ position:relative; }
.search-box{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:min(360px, 90vw);
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  border:1px solid var(--line);
  padding:14px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity var(--ease), transform var(--ease), visibility var(--ease);
  z-index:80;
}
.search-box.open{ opacity:1; visibility:visible; transform:translateY(0); }
.search-input-row{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:var(--radius-full); padding:8px 14px; }
.search-input-row .icon{ color:var(--stone-light); width:18px; height:18px; }
.search-input-row input{
  border:none; outline:none; flex:1; font-family:var(--font-body); font-size:14px; background:transparent; color:var(--ink);
}
.search-results{ margin-top:10px; max-height:340px; overflow-y:auto; }
.search-result-item{
  display:flex; align-items:center; gap:12px; padding:9px 6px; border-radius:10px; transition:background var(--ease);
}
.search-result-item:hover{ background:var(--cream); }
.search-result-item img{ width:44px; height:44px; object-fit:cover; border-radius:8px; background:var(--cream); flex-shrink:0; }
.search-result-item .sr-title{ font-size:13.5px; font-weight:600; color:var(--ink); }
.search-result-item .sr-price{ font-size:12.5px; color:var(--gold); font-weight:700; }
.search-empty{ padding:16px 6px; font-size:13px; color:var(--stone); text-align:center; }

.cart-btn{ position:relative; }
.cart-count{
  position:absolute; top:2px; right:2px;
  background:var(--gold); color:var(--white);
  font-size:10px; font-weight:700;
  min-width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  padding:0 3px;
  transition:transform 220ms ease;
}
.cart-count.hidden-badge{ display:none; }
.cart-count.pulse{ animation:badgePulse 420ms ease; }
@keyframes badgePulse{ 0%{ transform:scale(1);} 40%{ transform:scale(1.45);} 100%{ transform:scale(1);} }

.menu-toggle{ display:flex; }
@media (min-width:1024px){
  nav.main-nav{ display:block; }
  .menu-toggle{ display:none; }
}

.mobile-nav{
  position:fixed; inset:0; top:calc(var(--announce-h) + var(--header-h));
  background:var(--cream);
  z-index:55;
  padding:24px;
  transform:translateY(-12px);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.mobile-nav.open{ opacity:1; transform:translateY(0); visibility:visible; }
.mobile-nav ul{ display:flex; flex-direction:column; gap:4px; }
.mobile-nav a{
  display:block; padding:16px 6px; font-size:18px; font-family:var(--font-head); font-weight:600; color:var(--forest);
  border-bottom:1px solid var(--line);
}
@media (min-width:1024px){ .mobile-nav{ display:none; } }

/* ============ HERO ============ */
.hero{
  position:relative;
  background:var(--forest);
  color:var(--cream);
  overflow:hidden;
  padding:72px 0 88px;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:var(--leaf-pattern);
  background-size:340px;
  opacity:0.9;
  pointer-events:none;
}
.hero-inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:56px;
  align-items:center;
}
.hero-copy{ max-width:560px; }
.hero-copy .eyebrow{ color:var(--gold-light); }
.hero-copy h1{
  color:var(--white);
  font-size:clamp(36px,6vw,58px);
  line-height:1.08;
  margin-bottom:20px;
}
.hero-copy p{ color:rgba(250,247,242,0.85); font-size:17px; max-width:480px; margin-bottom:32px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-visual{
  position:relative;
  height:340px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-orb{
  position:absolute;
  border-radius:50%;
  background:var(--cream);
  box-shadow:var(--shadow-lg);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-orb img{ width:70%; height:70%; object-fit:contain; mix-blend-mode:multiply; }
.hero-orb.o1{ width:220px; height:220px; top:0; left:8%; }
.hero-orb.o2{ width:170px; height:170px; bottom:0; right:6%; background:var(--gold-light); }
.hero-orb.o3{ width:130px; height:130px; top:38%; right:32%; z-index:2; }

@media (min-width:1024px){
  .hero{ padding:110px 0 130px; }
  .hero-inner{ grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:40px; }
  .hero-visual{ height:440px; }
  .hero-orb.o1{ width:270px; height:270px; }
  .hero-orb.o2{ width:210px; height:210px; }
  .hero-orb.o3{ width:160px; height:160px; }
}

/* ============ TRUST STRIP ============ */
.trust-strip{
  background:var(--white);
  border-bottom:1px solid var(--line);
  padding:36px 0;
}
.trust-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
}
.trust-item{ display:flex; align-items:center; gap:12px; min-width:0; }
.trust-item .icon{ color:var(--green); }
.trust-item strong{ display:block; font-size:14px; color:var(--forest); font-weight:700; }
.trust-item span{ font-size:12.5px; color:var(--stone); }
@media (min-width:768px){ .trust-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ============ GENERIC SECTION ============ */
section{ padding:72px 0; scroll-margin-top:96px; }
.section-alt{ background:var(--white); position:relative; }
.section-cream{ background:var(--cream); }

/* botanical divider backgrounds */
.botanical-bg{ position:relative; }
.botanical-bg::before{
  content:'';
  position:absolute; inset:0;
  background-image:var(--leaf-pattern-light);
  background-size:300px;
  opacity:1;
  pointer-events:none;
}
.botanical-bg > .wrap{ position:relative; z-index:1; }

/* ============ CONCERN GRID ============ */
.concern-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.concern-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:20px;
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
  transition:transform var(--ease), box-shadow var(--ease);
}
.concern-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.concern-card img{ width:56px; height:56px; object-fit:cover; border-radius:50%; background:var(--cream); flex-shrink:0; }
.concern-card > div{ min-width:0; }
.concern-card h3{ font-size:16px; margin-bottom:3px; }
.concern-card p{ font-size:12.5px; color:var(--stone); overflow-wrap:break-word; }
@media (min-width:1024px){
  .concern-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
  .concern-card{ flex-direction:column; text-align:center; padding:28px 20px; }
  .concern-card img{ width:88px; height:88px; }
}

/* ============ PRODUCT GRID / CARD ============ */
.product-row-scroll{
  display:flex;
  gap:20px;
  overflow-x:auto;
  padding:6px 4px 18px;
  scroll-snap-type:x proximity;
}
.product-row-scroll::-webkit-scrollbar{ height:6px; }
.product-row-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.product-row-scroll .product-card{ min-width:240px; scroll-snap-align:start; }

.product-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
@media (min-width:768px){ .product-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .product-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px; } }

.product-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:transform var(--ease), box-shadow var(--ease);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.product-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.product-card-media{
  position:relative;
  background:var(--cream);
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  padding:14px;
}
.product-card-media img{ width:100%; height:100%; object-fit:contain; }
.product-card-media .badge-gold{ position:absolute; top:10px; left:10px; }
.product-card-body{ padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-tag{
  font-size:10.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold);
}
.product-title{
  font-size:15px; font-weight:600; color:var(--forest); line-height:1.3;
  min-height:2.6em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-price{ display:flex; align-items:baseline; gap:8px; }
.price-now{ font-size:15px; font-weight:700; color:var(--ink); }
.price-was{ font-size:13px; color:var(--stone-light); text-decoration:line-through; }
.btn-add{
  margin-top:auto;
  background:var(--forest); color:var(--white);
  border:none; border-radius:var(--radius-full);
  padding:11px 16px; font-size:12.5px; font-weight:700; letter-spacing:0.03em;
  text-transform:uppercase;
  transition:background var(--ease), transform 120ms ease;
}
.btn-add:hover{ background:var(--green); }
.btn-add.added{ background:var(--gold); }

/* ============ FEATURED ============ */
.featured-note{ text-align:center; color:var(--stone); font-size:13px; margin-top:-8px; margin-bottom:26px; }

/* ============ CATEGORY SECTIONS ============ */
.category-section .section-head{ margin-bottom:36px; }

/* ============ CONSULT BAND ============ */
.consult{
  background:var(--forest);
  color:var(--white);
  padding:64px 0;
  position:relative;
  overflow:hidden;
}
.consult::before{
  content:''; position:absolute; inset:0;
  background-image:var(--leaf-pattern);
  background-size:340px;
}
.consult-inner{ position:relative; z-index:1; text-align:center; max-width:640px; margin:0 auto; }
.consult h2{ color:var(--white); font-size:clamp(26px,4vw,36px); margin-bottom:14px; }
.consult p{ color:rgba(250,247,242,0.85); margin-bottom:28px; font-size:16px; }
.consult-contacts{ display:flex; flex-wrap:wrap; justify-content:center; gap:26px; margin-top:30px; font-size:14px; }
.consult-contacts a{ display:flex; align-items:center; gap:8px; color:var(--gold-light); font-weight:600; }

/* ============ TESTIMONIALS ============ */
.testi-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:22px; }
@media (min-width:768px){ .testi-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.testi-card{
  background:var(--white); border-radius:var(--radius-lg); padding:28px;
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.testi-stars{ display:flex; gap:2px; color:var(--gold); margin-bottom:14px; }
.testi-stars .icon{ width:16px; height:16px; fill:var(--gold); stroke:var(--gold); }
.testi-quote{ font-family:var(--font-head); font-style:italic; font-size:16px; color:var(--ink); line-height:1.55; margin-bottom:18px; }
.testi-name{ font-size:13.5px; font-weight:700; color:var(--forest); }
.testi-loc{ font-size:12px; color:var(--stone); }

/* ============ STORY ============ */
.story-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:44px; align-items:center; }
@media (min-width:1024px){ .story-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:60px; } }
.story-collage{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.story-collage img{
  width:100%; height:100%; object-fit:cover; border-radius:var(--radius-lg);
  background:var(--white);
  box-shadow:var(--shadow-sm);
}
.story-collage .tall{ grid-row:span 2; aspect-ratio:1/2.05; }
.story-collage .sq{ aspect-ratio:1/1; }
.story-copy h2{ font-size:clamp(26px,4vw,34px); margin-bottom:16px; }
.story-copy p{ color:var(--stone); margin-bottom:14px; font-size:15.5px; }
.story-stats{ display:flex; gap:32px; margin-top:26px; }
.story-stats div strong{ display:block; font-family:var(--font-head); font-size:26px; color:var(--forest); }
.story-stats div span{ font-size:12px; color:var(--stone); letter-spacing:0.03em; }

/* ============ FOOTER ============ */
footer, #site-footer-root{ background:#0F3B20; color:rgba(250,247,242,0.82); padding:56px 0 26px; }
.footer-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:36px; margin-bottom:40px; }
@media (min-width:768px){ .footer-grid{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); } }
.footer-brand .wordmark .leaf-mark{ color:var(--gold-light); }
.footer-brand .wordmark-text .name{ color:var(--white); }
.footer-brand p{ margin-top:14px; font-size:13.5px; line-height:1.6; max-width:280px; color:rgba(250,247,242,0.65); }
.footer-col h4{ color:var(--white); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:16px; font-family:var(--font-body); font-weight:700; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:13.5px; color:rgba(250,247,242,0.72); transition:color var(--ease); }
.footer-col a:hover{ color:var(--gold-light); }
.footer-col .contact-line{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:rgba(250,247,242,0.72); }
.footer-social{ display:flex; gap:10px; margin-top:6px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(250,247,242,0.25);
  display:flex; align-items:center; justify-content:center; transition:background var(--ease), border-color var(--ease);
}
.footer-social a:hover{ background:rgba(250,247,242,0.1); border-color:var(--gold-light); }
.footer-bottom{
  border-top:1px solid rgba(250,247,242,0.15);
  padding-top:22px;
  display:flex; flex-direction:column; gap:8px;
  font-size:12px; color:rgba(250,247,242,0.5);
  text-align:center;
}
@media (min-width:768px){ .footer-bottom{ flex-direction:row; justify-content:space-between; text-align:left; } }

/* ============ CART DRAWER ============ */
.overlay{
  position:fixed; inset:0; background:rgba(20,30,20,0.45);
  opacity:0; visibility:hidden; transition:opacity var(--ease), visibility var(--ease);
  z-index:90;
}
.overlay.open{ opacity:1; visibility:visible; }

.cart-drawer{
  position:fixed; top:0; right:0; bottom:0;
  width:min(420px,100vw);
  background:var(--cream);
  z-index:95;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform 260ms ease;
  box-shadow:-10px 0 40px rgba(0,0,0,0.15);
}
.cart-drawer.open{ transform:translateX(0); }
.cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; border-bottom:1px solid var(--line); background:var(--white);
}
.cart-head h3{ font-size:19px; }
.cart-items{ flex:1; overflow-y:auto; padding:16px 22px; display:flex; flex-direction:column; gap:16px; }
.cart-empty{ text-align:center; padding:60px 20px; color:var(--stone); }
.cart-empty .icon-lg{ color:var(--stone-light); margin:0 auto 14px; }
.cart-item{ display:flex; gap:14px; background:var(--white); border-radius:var(--radius-sm); padding:12px; border:1px solid var(--line); }
.cart-item img{ width:64px; height:64px; object-fit:contain; background:var(--cream); border-radius:8px; flex-shrink:0; }
.cart-item-body{ flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; }
.cart-item-title{ font-size:13.5px; font-weight:600; color:var(--forest); }
.cart-item-row{ display:flex; align-items:center; justify-content:space-between; }
.qty-stepper{ display:flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:var(--radius-full); overflow:hidden; }
.qty-stepper button{ width:26px; height:26px; background:var(--white); border:none; display:flex; align-items:center; justify-content:center; color:var(--forest); }
.qty-stepper button:hover{ background:var(--cream); }
.qty-stepper span{ min-width:26px; text-align:center; font-size:13px; font-weight:600; }
.cart-item-price{ font-size:13.5px; font-weight:700; color:var(--ink); }
.cart-remove{ background:none; border:none; color:var(--stone-light); display:flex; align-items:center; gap:4px; font-size:11.5px; }
.cart-remove:hover{ color:#B3261E; }
.cart-foot{ border-top:1px solid var(--line); padding:20px 22px 24px; background:var(--white); }
.cart-subtotal{ display:flex; justify-content:space-between; font-size:15px; font-weight:700; color:var(--forest); margin-bottom:14px; }
.cart-note{ font-size:12px; color:var(--stone); background:var(--cream); border:1px dashed var(--line); border-radius:10px; padding:10px 12px; margin-top:12px; line-height:1.5; }

/* ============ QUICK VIEW MODAL ============ */
.modal{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden;
  transition:opacity var(--ease), visibility var(--ease);
}
.modal.open{ opacity:1; visibility:visible; }
.modal-card{
  background:var(--white); border-radius:var(--radius-lg);
  max-width:880px; width:100%; max-height:88vh; overflow-y:auto;
  display:grid; grid-template-columns:minmax(0,1fr);
  transform:translateY(16px) scale(0.98);
  transition:transform var(--ease);
  position:relative;
}
.modal.open .modal-card{ transform:translateY(0) scale(1); }
@media (min-width:768px){ .modal-card{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.modal-close{
  position:absolute; top:14px; right:14px; z-index:2;
  background:var(--white); border:1px solid var(--line); border-radius:50%;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center; color:var(--forest);
  box-shadow:var(--shadow-sm);
}
.modal-media{ background:var(--cream); display:flex; align-items:center; justify-content:center; padding:36px; position:relative; }
.modal-media img{ max-height:340px; object-fit:contain; }
.modal-thumbs{ position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:8px; }
.modal-thumbs button{ width:10px; height:10px; border-radius:50%; background:var(--line); border:none; }
.modal-thumbs button.active{ background:var(--green); }
.modal-body{ padding:32px; display:flex; flex-direction:column; }
.modal-body .product-tag{ margin-bottom:8px; }
.modal-body h3{ font-size:24px; margin-bottom:10px; }
.modal-price{ display:flex; align-items:baseline; gap:10px; margin-bottom:18px; }
.modal-price .price-now{ font-size:20px; }
.modal-desc{ font-size:14px; color:var(--stone); line-height:1.7; margin-bottom:8px; }
.modal-desc strong{ color:var(--forest); }
.modal-desc-block{ margin-bottom:16px; }
.modal-desc-block h5{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--gold); margin-bottom:6px; font-weight:700; }
.modal-actions{ margin-top:auto; padding-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.modal-cta-row{ display:flex; gap:10px; flex:1; min-width:220px; }
.modal-cta-row .btn{ flex:1; }
.modal-qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius-full); overflow:hidden; }
.modal-qty button{ width:38px; height:44px; background:var(--white); border:none; color:var(--forest); display:flex; align-items:center; justify-content:center; }
.modal-qty button:hover{ background:var(--cream); }
.modal-qty span{ min-width:32px; text-align:center; font-weight:700; }

/* utility */
.hidden{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ============================================================
   SHARED INNER PAGE HEADER (shop / product / consult)
   ============================================================ */
.page-header{
  background:var(--forest);
  color:var(--white);
  padding:48px 0 40px;
  position:relative;
  overflow:hidden;
}
.page-header::before{
  content:''; position:absolute; inset:0;
  background-image:var(--leaf-pattern);
  background-size:340px;
  opacity:0.9;
  pointer-events:none;
}
.page-header .wrap{ position:relative; z-index:1; }
.page-header .eyebrow{ color:var(--gold-light); }
.page-header h1{ color:var(--white); font-size:clamp(30px,5vw,44px); margin-bottom:8px; }
.page-header p{ color:rgba(250,247,242,0.8); font-size:15px; }

.breadcrumb{ font-size:12.5px; color:var(--stone); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.breadcrumb a{ color:var(--stone); transition:color var(--ease); }
.breadcrumb a:hover{ color:var(--green); }
.breadcrumb .crumb-sep{ opacity:0.5; }
.breadcrumb .crumb-current{ color:var(--forest); font-weight:600; }
.page-header .breadcrumb{ color:rgba(250,247,242,0.75); margin-bottom:18px; }
.page-header .breadcrumb a{ color:rgba(250,247,242,0.75); }
.page-header .breadcrumb a:hover{ color:var(--white); }
.page-header .breadcrumb .crumb-current{ color:var(--white); }

/* ============================================================
   SHOP ALL PAGE
   ============================================================ */
.shop-toolbar{ padding:32px 0 8px; }
.shop-toolbar-row{ display:flex; flex-direction:column; gap:18px; margin-bottom:28px; }
.filter-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.filter-chip{
  background:var(--white);
  border:1.5px solid var(--line);
  color:var(--stone);
  font-size:13px;
  font-weight:600;
  padding:9px 18px;
  border-radius:var(--radius-full);
  transition:background var(--ease), color var(--ease), border-color var(--ease);
}
.filter-chip:hover{ border-color:var(--green); color:var(--green); }
.filter-chip.active{ background:var(--forest); border-color:var(--forest); color:var(--white); }

.shop-search-row{ max-width:420px; }
.shop-search-box{
  display:flex; align-items:center; gap:10px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-full);
  padding:12px 18px;
}
.shop-search-box .icon{ color:var(--stone-light); width:18px; height:18px; }
.shop-search-box input{
  border:none; outline:none; flex:1; background:transparent; font-family:var(--font-body); font-size:14px; color:var(--ink);
}
.shop-count{ font-size:13px; color:var(--stone); margin-bottom:20px; }
.shop-empty{ text-align:center; padding:70px 20px; color:var(--stone); }
.shop-empty .icon-lg{ color:var(--stone-light); margin:0 auto 16px; }

/* ============================================================
   PRODUCT DETAIL PAGE (PDP)
   ============================================================ */
.pdp-section{ padding:40px 0 80px; }
.pdp-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:40px; }
@media (min-width:900px){ .pdp-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; } }

.pdp-gallery-main{
  background:var(--cream);
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  padding:40px;
  overflow:hidden;
}
.pdp-gallery-main img{ max-width:100%; max-height:100%; object-fit:contain; }
.pdp-thumbs{ display:flex; gap:12px; margin-top:14px; }
.pdp-thumb{
  width:72px; height:72px; border-radius:10px; border:2px solid var(--line);
  background:var(--cream); padding:8px; display:flex; align-items:center; justify-content:center;
  transition:border-color var(--ease);
}
.pdp-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.pdp-thumb.active{ border-color:var(--green); }

.pdp-info .product-tag{ font-size:12px; margin-bottom:10px; display:inline-block; }
.pdp-info h1{ font-size:clamp(26px,4vw,36px); margin-bottom:14px; }
.pdp-price{ display:flex; align-items:baseline; gap:12px; margin-bottom:24px; }
.pdp-price .price-now{ font-size:24px; }
.pdp-price .price-was{ font-size:16px; }

.pdp-qty-row{ display:flex; align-items:center; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.pdp-qty-row .qty-stepper button{ width:38px; height:44px; }
.pdp-qty-row .qty-stepper span{ min-width:36px; font-size:15px; }
.pdp-added-note{ font-size:13px; color:var(--green); font-weight:600; opacity:0; transition:opacity var(--ease); }
.pdp-added-note.show{ opacity:1; }

.pdp-trust-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:32px; }
.pdp-trust-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.pdp-trust-item .icon{ color:var(--green); }
.pdp-trust-item span{ font-size:11.5px; color:var(--stone); font-weight:600; line-height:1.3; }

.pdp-body h2{ font-size:19px; margin-bottom:14px; }
.pdp-body p{ color:var(--stone); font-size:15px; line-height:1.75; margin-bottom:14px; }
.pdp-pack-contents{ margin-top:26px; background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px 20px; }
.pdp-pack-contents h3{ font-size:13px; text-transform:uppercase; letter-spacing:0.06em; color:var(--gold); margin-bottom:10px; font-weight:700; }
.pdp-pack-contents p{ font-size:13.5px; color:var(--stone); line-height:1.7; margin-bottom:6px; }
.pdp-pack-contents p:last-child{ margin-bottom:0; }

.pdp-related{ margin-top:64px; }
.pdp-related h2{ font-size:22px; margin-bottom:24px; }

.pdp-not-found{ text-align:center; padding:100px 20px; }
.pdp-not-found .icon-lg{ color:var(--stone-light); margin:0 auto 18px; width:48px; height:48px; }
.pdp-not-found h1{ font-size:26px; margin-bottom:10px; }
.pdp-not-found p{ color:var(--stone); margin-bottom:26px; }

/* ============================================================
   CONSULT PAGE
   ============================================================ */
.consult-hero{
  background:var(--forest); color:var(--white); padding:64px 0 72px; position:relative; overflow:hidden;
}
.consult-hero::before{
  content:''; position:absolute; inset:0; background-image:var(--leaf-pattern); background-size:340px;
}
.consult-hero .wrap{ position:relative; z-index:1; max-width:680px; text-align:center; margin:0 auto; }
.consult-hero .eyebrow{ color:var(--gold-light); }
.consult-hero h1{ color:var(--white); font-size:clamp(30px,5vw,44px); margin-bottom:16px; }
.consult-hero p{ color:rgba(250,247,242,0.85); font-size:16.5px; }

.steps-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:22px; }
@media (min-width:768px){ .steps-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.steps-grid.cols-4{ grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .steps-grid.cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .steps-grid.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.step-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-sm); text-align:center; }
.step-num{
  width:42px; height:42px; border-radius:50%; background:var(--forest); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:17px;
  margin:0 auto 16px;
}
.step-card .icon{ color:var(--green); margin:0 auto 14px; }
.step-card h3{ font-size:17px; margin-bottom:8px; }
.step-card p{ color:var(--stone); font-size:14px; }

.consult-form-wrap{ max-width:640px; margin:0 auto; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:36px; }
.form-row{ margin-bottom:20px; }
.form-row label{ display:block; font-size:13px; font-weight:700; color:var(--forest); margin-bottom:7px; letter-spacing:0.02em; }
.form-row .required-mark{ color:var(--gold); }
.form-control{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  font-family:var(--font-body); font-size:14.5px; color:var(--ink); background:var(--cream);
  transition:border-color var(--ease);
}
.form-control:focus{ outline:none; border-color:var(--green); background:var(--white); }
textarea.form-control{ resize:vertical; min-height:110px; }
.form-two-col{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
@media (min-width:560px){ .form-two-col{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.form-two-col .form-row{ margin-bottom:0; }

.form-success{ text-align:center; padding:20px 0; }
.form-success .icon-lg{ color:var(--green); margin:0 auto 16px; }
.form-success h3{ font-size:20px; margin-bottom:10px; }
.form-success p{ color:var(--stone); font-size:14.5px; }

.contact-strip{ background:var(--white); border-top:1px solid var(--line); padding:40px 0; }
.contact-strip-inner{ display:flex; flex-wrap:wrap; justify-content:center; gap:32px; text-align:center; }
.contact-strip-item{ display:flex; align-items:center; gap:10px; }
.contact-strip-item .icon{ color:var(--green); }
.contact-strip-item a, .contact-strip-item span.static{ font-size:15px; font-weight:600; color:var(--forest); }
.contact-strip-item a:hover{ color:var(--green); }

/* fee highlight chip in the consult hero */
.fee-chip{
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;
  background:var(--gold); color:var(--white); font-size:13.5px;
  padding:10px 20px; border-radius:var(--radius-full); margin-top:6px;
}
.fee-chip strong{ font-weight:700; }

/* doctors grid */
.doctor-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
@media (min-width:768px){ .doctor-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.doctor-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px 18px; text-align:center; box-shadow:var(--shadow-sm);
  transition:transform var(--ease), box-shadow var(--ease);
}
.doctor-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.doctor-photo-wrap{
  width:100px; height:100px; border-radius:50%; background:var(--cream);
  margin:0 auto 16px; overflow:hidden; border:2px solid var(--line); position:relative;
}
.doctor-photo-wrap img{ width:100%; height:100%; object-fit:cover; }
.doctor-badge{
  display:inline-block; background:var(--gold); color:var(--white);
  font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--radius-full); margin-bottom:8px;
}
.doctor-name{ font-size:16px; margin-bottom:4px; }
.doctor-credentials{ font-size:12px; color:var(--gold); font-weight:600; margin-bottom:6px; line-height:1.4; }
.doctor-specialty{ font-size:12.5px; color:var(--stone); line-height:1.5; }

/* ============================================================
   BRANCHES / GLOBAL PRESENCE PAGE
   ============================================================ */
.centre-band{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px; align-items:center; }
@media (min-width:900px){ .centre-band{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; } }
.centre-image{
  border-radius:var(--radius-lg); overflow:hidden; background:var(--cream); box-shadow:var(--shadow-sm);
  aspect-ratio:4/3;
}
.centre-image img{ width:100%; height:100%; object-fit:cover; }
.centre-copy h2{ font-size:clamp(24px,4vw,32px); margin-bottom:14px; }
.centre-copy p{ color:var(--stone); font-size:15px; line-height:1.75; margin-bottom:18px; }
.location-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--forest); color:var(--white); font-size:13px; font-weight:600;
  padding:9px 18px; border-radius:var(--radius-full);
}
.location-chip .icon{ width:16px; height:16px; }

.branch-tabs{ display:flex; justify-content:center; gap:10px; margin-bottom:36px; flex-wrap:wrap; }
.branch-tab{
  background:var(--white); border:1.5px solid var(--line); color:var(--stone);
  font-size:14px; font-weight:700; letter-spacing:0.02em;
  padding:11px 26px; border-radius:var(--radius-full); transition:background var(--ease), color var(--ease), border-color var(--ease);
}
.branch-tab:hover{ border-color:var(--green); color:var(--green); }
.branch-tab.active{ background:var(--forest); border-color:var(--forest); color:var(--white); }

.branch-region-heading{ font-size:19px; color:var(--forest); margin:36px 0 16px; }
.branch-region-heading:first-child{ margin-top:0; }

.branch-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
@media (min-width:768px){ .branch-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .branch-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.branch-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  box-shadow:var(--shadow-sm); transition:transform var(--ease), box-shadow var(--ease);
}
.branch-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.branch-photo-wrap{
  width:76px; height:76px; border-radius:50%; background:var(--cream); overflow:hidden;
  border:2px solid var(--line); margin-bottom:10px; flex-shrink:0;
}
.branch-photo-wrap img{ width:100%; height:100%; object-fit:cover; }
.branch-name{ font-size:14px; font-weight:700; color:var(--forest); line-height:1.35; }
.branch-city{ font-size:12.5px; color:var(--stone); }
.branch-org{ font-size:11.5px; color:var(--gold); font-weight:600; }
.branch-phone{ font-size:12.5px; color:var(--green); font-weight:600; margin-top:2px; }
.branch-phone:hover{ color:var(--forest); }

.closing-cta{
  background:var(--forest); color:var(--white); padding:56px 0; text-align:center;
  position:relative; overflow:hidden;
}
.closing-cta::before{ content:''; position:absolute; inset:0; background-image:var(--leaf-pattern); background-size:340px; }
.closing-cta .wrap{ position:relative; z-index:1; max-width:600px; margin:0 auto; }
.closing-cta h2{ color:var(--white); font-size:clamp(24px,4vw,32px); margin-bottom:14px; }
.closing-cta p{ color:rgba(250,247,242,0.85); font-size:15.5px; margin-bottom:24px; }