/* ============================================================
   OLYROOT — DESIGN SYSTEM
   Shared across every page. Linked once from header.html.
   ============================================================ */
:root{
  --ivory:#ffffff;
  --paper:#FFFFFF;
  --forest:#1b7a43;
  --forest-soft:#4b7749;
  --sage:#8A9482;
  --charcoal:#211F1B;
  --stone:#fff;
  --stone-deep:#fff;
  --clay:#fff;
  --clay-deep:#fff;
  --brass:#A6873F;
  --line:rgba(33,31,27,0.14);
  --line-soft:rgba(33,31,27,0.08);

  --serif:'Fraunces', Georgia, serif;
  --sans:'Inter', -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  color:var(--charcoal);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  font-size:15px;
  line-height:1.6;
}
h1,h2,h3,h4{ font-family:var(--serif); color:var(--forest); margin:0; font-weight:500; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container-xl{ max-width:1320px; }

.eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(#78693f); display:block; margin-bottom:14px;
}
.rule{ width:36px; height:1px; background:var(--brass); display:inline-block; margin-right:10px; vertical-align:middle; }

/* fade-up reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---- buttons ---- */
.btn-brand{
  font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:14px 30px; border-radius:2px; border:1px solid transparent; display:inline-flex; align-items:center; gap:10px;
  transition:background .2s, color .2s, border-color .2s;
}
.btn-brand-primary{ background:var(--forest); color:var(--ivory); }
.btn-brand-primary:hover{ background:var(--forest); color:#fff; }
.btn-brand-outline{ background:transparent; color:var(--forest); border-color:var(--forest); }
.btn-brand-outline:hover{ background:var(--forest); color:var(--ivory); }
.link-arrow{ font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--forest); display:inline-flex; align-items:center; gap:8px; }
.link-arrow svg{ transition:transform .2s; }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---- image panel placeholder (stands in for photography) ---- */
.photo-panel{
  position:relative; background:linear-gradient(135deg, var(--stone) 0%, var(--stone-deep) 60%, var(--clay) 130%);
  overflow:hidden; border:1px solid var(--line);
}
.photo-panel::after{
  content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
}
.photo-caption{
  position:absolute; left:18px; bottom:16px; z-index:2;
  font-size:11px; letter-spacing:.06em; color:var(--forest); font-weight:600;
  background:rgba(246,243,236,.88); padding:5px 10px;
}

/* ============================================================
   TOPBAR + NAV
   ============================================================ */
.topbar{
  background:var(--forest); color:var(--stone); text-align:center; font-size:11px;
  font-weight:600; letter-spacing:.1em; padding:8px 16px; text-transform:uppercase;
}
header.main-nav{
  background:var(--ivory); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:80;
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding-block:18px; }
.nav-links{ display:flex; gap:34px; }
.nav-links a{ font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--charcoal); position:relative; padding-bottom:4px; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--clay); transform:scaleX(0); transition:transform .2s; }
.nav-links a:hover::after{ transform:scaleX(1); }

.brand-word{ display:flex; align-items:center; gap:10px; }
.brand-word img{ height:30px; width:auto; }
.brand-word span{ font-family:var(--serif); font-size:22px; letter-spacing:.02em; color:var(--forest); }

.nav-icons{ display:flex; align-items:center; gap:22px; }
.nav-icons button, .nav-icons a{ background:none; border:none; color:var(--forest); cursor:pointer; position:relative; padding:4px; display:inline-flex; }
.nav-icons .count{
  position:absolute; top:-4px; right:-6px; background:var(--clay); color:#141414; font-size:9.5px; font-weight:700;
  width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.mobile-toggle{ display:none; }

@media (max-width: 991px){
  .nav-links{ display:none; }
  .mobile-toggle{ display:block; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-block:0; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; min-height:74vh; }
.hero-copy{ display:flex; flex-direction:column; justify-content:center; padding:64px 72px; }
.hero-copy h1{
  font-size:clamp(40px, 4.6vw, 62px); line-height:1.06; letter-spacing:-.01em; max-width:640px;
}
.hero-copy p.lead{ font-size:16px; color:var(--sage); max-width:420px; margin:22px 0 34px; line-height:1.7; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-media{ position:relative; }
.hero-media .photo-panel{ height:100%; width:100%; position:absolute; inset:0; }

@media (max-width: 991px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-copy{ padding:48px 24px; }
  .hero-media{ height:340px; position:relative; }
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); }
.trust-strip .row{ margin:0; }
.trust-item{
  padding:16px 22px; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--forest); text-align:center; border-left:1px solid var(--line);
}
.trust-item:first-child{ border-left:none; }
@media (max-width: 767px){ .trust-item{ border-left:none; border-top:1px solid var(--line); } .trust-item:first-child{ border-top:none; } }

/* ============================================================
   SECTION SPACING
   ============================================================ */
.section{ padding-block:104px; }
.section-tight{ padding-block:80px; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(28px, 3vw, 38px); line-height:1.15; }

/* ============================================================
   SHOP BY CONCERN — asymmetric
   ============================================================ */
.concern-grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:14px; }
.concern-card{
  position:relative; overflow:hidden; min-height:260px; display:flex; align-items:flex-end; padding:26px;
}
.concern-card .photo-panel{ position:absolute; inset:0; }
/* Specifically for Concern Cards */
.concern-card .photo-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This makes the image fill the area perfectly */
  object-position: center; /* This ensures the middle of the product/photo is the focal point */
}
.concern-card {
  position: relative; 
  overflow: hidden; 
  min-height: 260px; 
  display: flex; 
  align-items: flex-end; 
  padding: 26px;
}

/* This makes the image sit behind the label but fully visible */
.concern-card .photo-panel { 
  position: absolute; 
  inset: 0; 
  z-index: 1; 
}

.concern-card .photo-panel img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* This prevents the bottle from being cropped */
  padding: 20px;       /* Adds breathing room so the bottle isn't touching the edges */
}

/* Ensure the label sits on top of the image */

.concern-card .label{ position:relative; z-index:2; font-family:var(--serif); font-size:22px; color:var(--forest); }
.concern-card .label small{ display:block; font-family:var(--sans); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--clay-deep); font-weight:700; margin-bottom:6px; }
.concern-card.c-lg{ grid-column:span 6; min-height:420px; }
.concern-card.c-md{ grid-column:span 3; }
@media (max-width: 991px){
  .concern-card.c-lg{ grid-column:span 12; }
  .concern-card.c-md{ grid-column:span 6; }
}

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.prod-card{ position:relative; }
.prod-media{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.prod-media .photo-panel{ position:absolute; inset:0; }
.prod-badge{
  position:absolute; top:12px; left:12px; z-index:3; background:var(--forest); color:var(--ivory);
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px;
}
.prod-quick{
  position:absolute; left:0; right:0; bottom:0; z-index:3; background:var(--paper);
  padding:11px; text-align:center; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  transform:translateY(100%); transition:transform .25s ease; cursor:pointer; border-top:1px solid var(--line);
}
.prod-card:hover .prod-quick{ transform:translateY(0); }
.prod-body{ padding-top:16px; }
.prod-cat{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sage); font-weight:600; margin-bottom:6px; }
.prod-name{ font-family:var(--serif); font-size:17px; color:var(--forest); margin-bottom:8px; line-height:1.3; }
.prod-rating{ font-size:12px; color:var(--charcoal); margin-bottom:10px; }
.prod-rating .stars{ color:var(--clay); letter-spacing:1px; }
.prod-rating .count{ color:var(--sage); margin-left:6px; }
.prod-price{ display:flex; align-items:baseline; gap:9px; }
.prod-price .now{ font-weight:700; font-size:15px; }
.prod-price .mrp{ font-size:12.5px; color:var(--sage); text-decoration:line-through; }
.prod-price .off{ font-size:11px; color:var(#daad26); font-weight:700; }

/* ============================================================
   INGREDIENT STORY
   ============================================================ */
.ing-row{ display:flex; align-items:baseline; gap:22px; padding:26px 0; border-top:1px solid var(--line); }
.ing-row:last-child{ border-bottom:1px solid var(--line); }
.ing-num{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--brass); width:32px; flex:none; }
.ing-name{ font-family:var(--serif); font-size:21px; color:var(--forest); width:190px; flex:none; }
.ing-desc{ font-size:14px; color:var(--sage); line-height:1.7; }
@media (max-width: 767px){ .ing-row{ flex-wrap:wrap; } .ing-name{ width:100%; } }

/* ============================================================
   WHY AYURVEDA — editorial split
   ============================================================ */
.why-band{ background:var(--forest); color:var(--ivory); }
.why-band h2{ color:var(--ivory); font-size:clamp(30px, 4vw, 46px); line-height:1.15; }
.why-band p{ color:#C7D2C4; font-size:15px; line-height:1.8; max-width:440px; }
.why-band .link-arrow{ color:var(--ivory); }
.why-band .eyebrow{ color:var(--brass); }

/* ============================================================
   ROUTINES
   ============================================================ */
.routine-card{ background:var(--paper); border:1px solid var(--line); padding:40px; display:flex; gap:48px; align-items:center; flex-wrap:wrap; }
.routine-thumbs{ display:flex; gap:-10px; }
.routine-thumbs .photo-panel{ width:88px; height:88px; margin-left:-16px; border:3px solid var(--paper); }
.routine-thumbs .photo-panel:first-child{ margin-left:0; }
.routine-price{ display:flex; align-items:baseline; gap:12px; margin:16px 0 20px; }
.routine-price .now{ font-family:var(--serif); font-size:26px; color:var(--forest); }
.routine-price .was{ font-size:13px; color:var(--sage); text-decoration:line-through; }

/* ============================================================
   EXPERT / CONSULT
   ============================================================ */
.consult-grid{ display:grid; grid-template-columns:1fr 1fr; min-height:420px; }
.consult-copy{ display:flex; flex-direction:column; justify-content:center; padding:56px; background:var(--stone); }
.consult-copy h3{ font-size:30px; margin-bottom:14px; }
.consult-copy p{ color:var(--sage); max-width:420px; margin-bottom:26px; }
@media (max-width: 900px){ .consult-grid{ grid-template-columns:1fr; } .consult-copy{ padding:40px 24px; } }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-card{ padding:30px 0 0; border-top:1px solid var(--line); }
.testi-stars{ color:var(--brass); font-size:13px; margin-bottom:14px; letter-spacing:1px; }
.testi-card p.quote{ font-family:var(--serif); font-size:18px; color:var(--forest); line-height:1.5; margin-bottom:18px; }
.testi-meta{ font-size:12px; color:var(--sage); }
.testi-meta strong{ color:var(--charcoal); }
.verified{ color:var(--brass); font-weight:700; }

/* ============================================================
   JOURNAL
   ============================================================ */
.journal-card .photo-panel{ aspect-ratio:16/10; margin-bottom:18px; }
.journal-meta{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--clay-deep); font-weight:700; margin-bottom:10px; }
.journal-card h4{ font-size:19px; margin-bottom:10px; line-height:1.35; }
.journal-card p{ font-size:13.5px; color:var(--sage); line-height:1.7; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter-band{ border-top:1px solid var(--line); }
.newsletter-form{ display:flex; max-width:420px; margin-inline:auto; border-bottom:1px solid var(--forest); }
.newsletter-form input{ flex:1; border:none; background:none; padding:12px 4px; font-size:14px; outline:none; }
.newsletter-form button{ background:none; border:none; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--forest); cursor:pointer; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--forest); color:#B9C6B5; padding-top:64px; }
footer .brand-word span{ color:var(--ivory); }
footer h6{ color:var(--ivory); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; margin-bottom:16px; }
footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
footer a{ font-size:13.5px; color:#B9C6B5; }
footer a:hover{ color:#fff; }
.footer-disclaimer{ border-top:1px solid rgba(255,255,255,.12); margin-top:48px; padding:22px 0; font-size:11.5px; color:#8AA085; line-height:1.7; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:16px 0; font-size:11.5px; color:#8AA085; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ============================================================
   PAGE HEAD — used by cart, wishlist, and other non-marketing pages
   ============================================================ */
.page-head{ padding:56px 0 40px; border-bottom:1px solid var(--line); }
.page-head h1{ font-size:clamp(28px, 3.4vw, 40px); }
.page-head .meta-count{ font-size:13px; color:var(--sage); margin-top:10px; }

/* ============================================================
   CART — line-item rows (same hairline language as .ing-row / .trust-item,
   not a card-with-shadow pattern)
   ============================================================ */
.cart-list{ padding-top:8px; }
.cart-row{ display:flex; gap:24px; padding:28px 0; border-top:1px solid var(--line); align-items:flex-start; }
.cart-row:last-child{ border-bottom:1px solid var(--line); }
.cart-thumb{ width:96px; height:96px; flex:none; }
.cart-thumb .photo-panel{ width:100%; height:100%; }
.cart-info{ flex:1; min-width:0; }
.cart-cat{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sage); font-weight:600; margin-bottom:6px; }
.cart-name{ font-family:var(--serif); font-size:17px; color:var(--forest); margin-bottom:6px; line-height:1.3; }
.cart-variant{ font-size:12.5px; color:var(--sage); margin-bottom:16px; }
.cart-row-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }

.qty-stepper{ display:flex; align-items:center; border:1px solid var(--line); flex:none; }
.qty-stepper button{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--forest); cursor:pointer; }
.qty-stepper button:hover{ background:var(--stone); }
.qty-stepper span{ width:30px; text-align:center; font-size:13px; font-weight:600; }

.remove-link{ font-size:12px; font-weight:600; color:var(--sage); cursor:pointer; border:none; background:none; padding:0; border-bottom:1px solid transparent; }
.remove-link:hover{ color:var(--sage); border-bottom-color:var(--sage); }

.cart-row-price{ text-align:right; flex:none; margin-left:auto; }
.cart-row-price .now{ font-weight:700; font-size:15px; display:block; }
.cart-row-price .mrp{ font-size:12px; color:var(--sage); text-decoration:line-through; }

/* ---- order summary panel ---- */
.cart-summary{ background:var(--stone); border:1px solid var(--line); padding:32px; position:sticky; top:96px; }
.cart-summary h3{ font-size:19px; margin-bottom:22px; }
.summary-line{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--charcoal); padding:11px 0; border-top:1px solid var(--line-soft); }
.summary-line:first-of-type{ border-top:none; padding-top:0; }
.summary-line .value{ font-weight:600; }
.summary-line.total{ border-top:1px solid var(--line); margin-top:6px; padding-top:18px; }
.summary-line.total .label{ font-family:var(--serif); font-size:17px; color:var(--forest); font-weight:500; }
.summary-line.total .value{ font-family:var(--serif); font-size:22px; color:var(--forest); }

.promo-form{ display:flex; border-bottom:1px solid var(--forest); margin:22px 0 28px; }
.promo-form input{ flex:1; border:none; background:none; padding:10px 2px; font-size:13px; outline:none; }
.promo-form button{ background:none; border:none; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--forest); cursor:pointer; }

.cart-summary .btn-brand{ width:100%; justify-content:center; }
.summary-note{ font-size:11.5px; color:var(--sage); margin-top:18px; line-height:1.6; text-align:center; }

/* ============================================================
   WISHLIST — reuses .prod-card / .prod-media / .prod-badge as-is;
   adds a remove control and a "move to bag" quick action
   ============================================================ */
.wish-remove{
  position:absolute; top:10px; right:10px; z-index:3; background:none; border:none; padding:4px; cursor:pointer; line-height:0;
}
.wish-remove svg{ fill:var(--clay); stroke:var(--clay); }
.wish-remove:hover svg{ fill:var(--clay-deep); stroke:var(--clay-deep); }

/* ============================================================
   EMPTY STATE — shared by cart and wishlist when there's nothing to show
   ============================================================ */
.empty-state{ text-align:center; padding:100px 24px; max-width:420px; margin-inline:auto; }
.empty-state h2{ font-size:26px; margin-bottom:12px; }
.empty-state p{ color:var(--sage); font-size:14px; margin-bottom:30px; line-height:1.7; }

@media (max-width: 991px){
  .cart-summary{ position:static; margin-top:8px; }
}
@media (max-width: 575px){
  .cart-row{ flex-wrap:wrap; }
  .cart-row-price{ margin-left:0; width:100%; text-align:left; margin-top:8px; }
}

/* ============================================================
   FORM FIELDS — bordered inputs for auth & checkout forms.
   Newsletter/promo inputs stay underline-style on purpose (they're
   inline, low-commitment actions); these are for pages where the
   form IS the page.
   Append this block to style.css.
   ============================================================ */
.form-field{ margin-bottom:20px; }
.form-field label{
  display:block; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--charcoal); margin-bottom:8px;
}
.form-field .hint{ font-size:11.5px; color:var(--sage); font-weight:400; text-transform:none; letter-spacing:0; margin-left:4px; }
.form-input{
  width:100%; border:1px solid var(--line); background:var(--paper); border-radius:2px;
  padding:13px 14px; font-family:var(--sans); font-size:14px; color:var(--charcoal);
  outline:none; transition:border-color .15s ease;
}
.form-input:focus{ border-color:var(--forest); }
.form-input::placeholder{ color:var(--sage); }
textarea.form-input{ resize:vertical; min-height:90px; }
.form-row{ display:flex; gap:16px; }
.form-row .form-field{ flex:1; }
@media (max-width:575px){ .form-row{ flex-direction:column; gap:0; } }

.form-error{ font-size:12px; color:var(--clay-deep); margin-top:6px; }
.form-check{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--charcoal); margin-bottom:22px; }
.form-check input{ accent-color:var(--forest); }

/* ---- auth card (Login / Register) ---- */
.auth-wrap{ max-width:440px; margin-inline:auto; padding-block:56px; }
.auth-card{ background:var(--paper); border:1px solid var(--line); padding:44px; }
.auth-card h1{ font-size:28px; margin-bottom:8px; }
.auth-card .sub{ color:var(--sage); font-size:13.5px; margin-bottom:32px; }
.auth-card .btn-brand{ width:100%; justify-content:center; margin-bottom:18px; }
.auth-switch{ text-align:center; font-size:13px; color:var(--sage); }
.auth-switch a{ color:var(--forest); font-weight:600; }
.auth-divider{ display:flex; align-items:center; gap:14px; margin:26px 0; color:var(--sage); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ---- pincode check row (checkout) ---- */
.pincode-check{ display:flex; gap:10px; margin-top:-8px; margin-bottom:20px; }
.pincode-check .form-input{ flex:1; }
.pincode-check button{ white-space:nowrap; }
.pincode-result{ font-size:12.5px; margin-top:-14px; margin-bottom:20px; }
.pincode-result.ok{ color:var(--forest); }
.pincode-result.fail{ color:var(--forest); }

/* ---- payment method radio cards (checkout) ---- */
.pay-option{
  display:flex; align-items:center; gap:12px; border:1px solid var(--line); padding:16px; margin-bottom:12px;
  cursor:pointer; transition:border-color .15s ease;
}
.pay-option.is-selected{ border-color:var(--forest); background:var(--stone); }
.pay-option input{ accent-color:var(--forest); }
.pay-option .name{ font-weight:600; font-size:13.5px; }
.pay-option .desc{ font-size:12px; color:var(--sage); margin-top:2px; }

/* ---- mini line item (checkout summary) ---- */
.mini-line-item{ display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line-soft); align-items:center; }
.mini-line-item:first-child{ border-top:none; padding-top:0; }
.mini-line-item .thumb{ width:52px; height:52px; flex:none; }
.mini-line-item .info{ flex:1; min-width:0; }
.mini-line-item .name{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-line-item .meta{ font-size:11px; color:var(--sage); }
.mini-line-item .price{ font-size:12.5px; font-weight:600; flex:none; }

/* ---- order confirmation ---- */
.confirm-wrap{ max-width:560px; margin-inline:auto; padding-block:88px; text-align:center; }
.confirm-icon{ width:64px; height:64px; margin-inline:auto 24px; color:var(--forest); }
.confirm-wrap h1{ font-size:30px; margin-bottom:10px; }
.confirm-wrap .sub{ color:var(--sage); font-size:14px; margin-bottom:8px; }
.confirm-orderid{ font-family:var(--serif); font-size:19px; color:var(--forest); margin:22px 0 36px; }
.confirm-details{ background:var(--stone); border:1px solid var(--line); padding:28px; text-align:left; margin-bottom:32px; }

.concern-icon-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:28px 20px;
}
.concern-icon-item{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:88px; text-align:center;
}
.concern-icon-photo{
  width:74px; height:74px;
  border-radius:50%;                 /* circular, matching the reference — use 12px for a rounded-square look instead */
  overflow:hidden;
  background:var(--stone);
  border:1px solid var(--line);
  flex:none;
  transition:border-color .2s ease, transform .2s ease;
}
.concern-icon-photo img{
  width:74px; height:74px;           /* fixed render size regardless of the source file's intrinsic dimensions */
  object-fit:cover;
  object-position:center;
  display:block;
}
.concern-icon-item:hover .concern-icon-photo{
  border-color:var(--clay);
  transform:translateY(-2px);
}
.concern-icon-label{
  font-size:11.5px; font-weight:600; letter-spacing:.04em; color:var(--charcoal);
  line-height:1.3;
}
/* Append to static/css/style.css  account dropdown */

.account-dropdown-wrap {
  position: relative;
}

.account-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.account-btn .account-name {
  font-size: 13px;
  font-weight: 500;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-dropdown-menu {
  min-width: 180px;
  border: 1px solid var(--line, #e5e5e0);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 6px;
  margin-top: 10px;
}

.account-dropdown-menu .dropdown-item {
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13.5px;
}

.account-dropdown-menu .dropdown-item:hover {
  background: var(--paper, #f7f5f0);
}

/* Hide the name label on small screens, keep just the icon */
@media (max-width: 576px) {
  .account-btn .account-name {
    display: none;
  }
}
/* dashboard css */
/* ============================================================
   OLYROOT ADMIN: DASHBOARD
   */

.dash{
  max-width:1320px; margin:0 auto;
  --up:#4C7A52; --blue:#3D6E8A;
}

/* ---- status colour map (used by dots, split bar and status labels) ---- */
.dash .is-pending, .dash .is-processing, .dash .is-confirmed{ --c:var(--brass); }
.dash .is-paid, .dash .is-delivered, .dash .is-completed, .dash .is-active{ --c:var(--up); }
.dash .is-shipped, .dash .is-out-for-delivery{ --c:var(--blue); }
.dash .is-cancelled, .dash .is-failed, .dash .is-refunded, .dash .is-returned{ --c:var(--clay-deep); }

/* ---- page head ---- */
.dash-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:18px; margin-bottom:28px; }
.dash-head h1{ font-family:var(--serif); font-size:30px; font-weight:500; color:var(--forest); line-height:1.15; margin:0; }
.dash-sub{ font-size:13px; color:var(--sage); margin:8px 0 0; }
.dash-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.dash-btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px;
  font-family:var(--sans); font-size:12.5px; font-weight:600; line-height:1;
  border:1px solid var(--forest); text-decoration:none; cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.dash-btn-solid{ background:var(--forest); color:var(--ivory); }
.dash-btn-solid:hover{ background:var(--forest); border-color:var(--clay-deep); color:#fff; }
.dash-btn-outline{ background:transparent; color:var(--forest); }
.dash-btn-outline:hover{ background:var(--forest); color:var(--ivory); }
.dash-btn:focus-visible, .dash-kpi:focus-visible, .dash-link:focus-visible,
.dash-alert a:focus-visible, .dash-bar:focus-visible{ outline:2px solid var(--clay); outline-offset:2px; }

/* ---- needs attention ---- */
.dash-alerts{ display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.dash-alert{
  display:flex; align-items:center; gap:14px; padding:12px 18px;
  background:var(--paper); border:1px solid var(--line); border-left:2px solid var(--clay);
}
.dash-alert-dot{
  width:8px; height:8px; flex:none; border-radius:50%; background:var(--clay);
  animation:dash-pulse 2.2s ease-out infinite;
}
.dash-alert-text{ flex:1; min-width:0; font-size:13.5px; color:var(--charcoal); }
.dash-alert a{
  flex:none; font-size:12.5px; font-weight:600; color:var(--clay-deep);
  border-bottom:1px solid transparent; transition:border-color .2s ease;
}
.dash-alert a:hover{ border-bottom-color:var(--clay-deep); }

/* ---- KPI strip: one joined block, hairline dividers ---- */
.dash-kpis{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:24px;
}
.dash-kpi{
  position:relative; display:block; padding:22px 24px 20px;
  background:var(--paper); color:inherit; text-decoration:none; overflow:hidden;
  transition:background-color .2s ease;
}
.dash-kpi::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--forest);
  transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.dash-kpi:hover{ background:var(--ivory); }
.dash-kpi:hover::after{ transform:scaleX(1); }
.dash-kpi.is-attention::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--clay); }

.dash-kpi-label{ font-size:12px; font-weight:500; color:var(--sage); margin-bottom:14px; }
.dash-kpi-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.dash-kpi-value{
  font-family:var(--serif); font-size:31px; line-height:1; color:var(--forest);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.dash-spark{ width:92px; height:28px; flex:none; overflow:visible; }
.dash-spark polyline{
  stroke:var(--sage);
  animation:dash-draw 1.1s cubic-bezier(.3,.6,.2,1) calc(.25s + var(--i, 0) * 70ms) both;
}
.dash-spark.up polyline{ stroke:var(--up); }
.dash-spark.down polyline{ stroke:var(--clay-deep); }

.dash-kpi-delta{ display:flex; align-items:center; gap:5px; margin-top:12px; font-size:12px; font-weight:500; color:var(--sage); }
.dash-kpi-delta.up{ color:var(--up); }
.dash-kpi-delta.down{ color:var(--clay-deep); }

/* ---- panels and grids ---- */
.dash-grid{ display:grid; gap:24px; margin-bottom:24px; align-items:start; }
.dash-grid-main{ grid-template-columns:minmax(0, 1.75fr) minmax(0, 1fr); }
.dash-grid-lists{ grid-template-columns:minmax(0, 1.75fr) minmax(0, 1fr); margin-bottom:0; }
.dash-stack{ display:flex; flex-direction:column; gap:24px; min-width:0; }

.dash-panel{ background:var(--paper); border:1px solid var(--line); padding:22px 24px 24px; min-width:0; }
.dash-panel-flush{ padding:0; }
.dash-panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.dash-panel-head-pad{ padding:20px 24px 16px; margin-bottom:0; align-items:baseline; }
.dash-panel h2{ font-family:var(--sans); font-size:15px; font-weight:600; color:var(--charcoal); margin:0; }
.dash-muted{ font-size:12.5px; color:var(--sage); margin:4px 0 0; }
.dash-panel-head + * .dash-muted, td.dash-muted{ margin:0; }
.dash-total{ text-align:right; flex:none; }
.dash-total strong{ display:block; font-family:var(--serif); font-size:26px; font-weight:500; color:var(--forest); line-height:1; font-variant-numeric:tabular-nums; }
.dash-total span{ display:block; font-size:12px; color:var(--sage); margin-top:6px; }

.dash-link{
  font-size:12.5px; font-weight:600; color:var(--forest); text-decoration:none;
  background:linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition:background-size .3s ease;
}
.dash-link:hover{ background-size:100% 1px; }

/* ---- revenue bars ---- */
.dash-bars{ position:relative; display:flex; gap:14px; padding-top:28px; }
.dash-bars::before{
  content:""; position:absolute; left:0; right:0; top:28px; height:200px; pointer-events:none;
  background:repeating-linear-gradient(to bottom, var(--line-soft) 0 1px, transparent 1px 50px);
  border-bottom:1px solid var(--line);
}
.dash-bar{ position:relative; z-index:1; flex:1; min-width:0; cursor:default; }
.dash-bar-track{ position:relative; height:200px; }
.dash-bar-fill{
  position:absolute; left:0; right:0; bottom:0; margin:0 auto;
  width:min(100%, 56px); height:var(--h); min-height:2px;
  background:var(--sage); opacity:.35; transform-origin:bottom;
  transition:opacity .2s ease, background-color .2s ease;
  animation:dash-grow-y .8s cubic-bezier(.2,.7,.2,1) calc(.15s + var(--i, 0) * 60ms) both;
}
.dash-bar:hover .dash-bar-fill, .dash-bar:focus-visible .dash-bar-fill{ background:var(--forest); opacity:.75; }
.dash-bar.is-today .dash-bar-fill{ background:var(--forest); opacity:1; }
.dash-bar-amount{
  position:absolute; left:50%; bottom:calc(var(--h) + 8px); transform:translateX(-50%);
  font-size:11.5px; font-weight:600; color:var(--charcoal); white-space:nowrap;
  font-variant-numeric:tabular-nums; opacity:0; transition:opacity .2s ease;
}
.dash-bar:hover .dash-bar-amount, .dash-bar:focus-visible .dash-bar-amount, .dash-bar.is-today .dash-bar-amount{ opacity:1; }
.dash-bar-label{ display:block; height:28px; line-height:28px; text-align:center; font-size:12px; color:var(--sage); white-space:nowrap; }
.dash-bar.is-today .dash-bar-label{ color:var(--forest); font-weight:600; }

/* ---- orders by status ---- */
.dash-split{ display:flex; gap:2px; height:10px; margin:2px 0 20px; }
.dash-split span{ background:var(--c, var(--sage)); transform-origin:left; animation:dash-grow-x .8s cubic-bezier(.2,.7,.2,1) .2s both; }
.dash-legend{ list-style:none; margin:0; padding:0; }
.dash-legend li{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.dash-legend li:last-child{ border-bottom:none; padding-bottom:0; }
.dash-dot{ width:8px; height:8px; flex:none; background:var(--c, var(--sage)); }
.dash-legend-name{ flex:1; color:var(--charcoal); }
.dash-legend-count{ font-weight:600; color:var(--charcoal); font-variant-numeric:tabular-nums; }
.dash-legend-pct{ width:44px; text-align:right; color:var(--sage); font-size:12.5px; font-variant-numeric:tabular-nums; }

/* ---- recent orders table ---- */
.dash-table-wrap{ overflow-x:auto; }
.dash-table{ width:100%; min-width:620px; border-collapse:collapse; }
.dash-table th{
  text-align:left; font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--sage);
  padding:11px 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); white-space:nowrap;
}
.dash-table td{ padding:14px 24px; font-size:13.5px; color:var(--charcoal); border-bottom:1px solid var(--line-soft); vertical-align:middle; white-space:nowrap; }
.dash-table tbody tr{ transition:background-color .15s ease; }
.dash-table tbody tr:hover{ background:var(--ivory); }
.dash-table tbody tr:last-child td{ border-bottom:none; }
.dash-table .num{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600;  }
.dash-order{ font-weight:600; color:var(--forest); font-variant-numeric:tabular-nums; }
.dash-avatar{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; margin-right:10px;
  border-radius:50%; background:var(--stone); color:var(--forest); font-size:11px; font-weight:700; text-transform:uppercase; vertical-align:middle;
}
.dash-status{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; }
.dash-status::before{ content:""; width:7px; height:7px; flex:none; background:var(--c, var(--sage)); }
.dash-empty{ padding:40px 20px; text-align:center; color:var(--sage); font-size:13.5px; list-style:none; }

/* ---- stock movements ---- */
.dash-move{ list-style:none; margin:0; padding:0; }
.dash-move li{
  display:grid; grid-template-columns:minmax(0, 1fr) auto 104px 84px; align-items:center; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.dash-move li:last-child{ border-bottom:none; padding-bottom:0; }
.dash-move-main{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.dash-move-main .dash-muted{ margin:0; }
.dash-move-name{ font-size:13.5px; font-weight:600; color:var(--charcoal); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-move-change{ font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.dash-move-change.is-in{ color:var(--up); }
.dash-move-change.is-out{ color:var(--clay-deep); }
.dash-move-balance{ font-size:12.5px; color:var(--charcoal); font-variant-numeric:tabular-nums; }
.dash-move-when{ margin:0; text-align:right; }

/* ---- low stock ---- */
.dash-stock{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.dash-stock-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px; }
.dash-stock-name{ font-size:13.5px; font-weight:600; color:var(--charcoal); min-width:0; }
.dash-sku{ margin-left:8px; font-size:11.5px; font-weight:500; color:var(--sage); }
.dash-stock-count{ flex:none; font-size:12.5px; font-weight:600; color:var(--charcoal); font-variant-numeric:tabular-nums; }
.dash-stock-count.is-critical{ color:var(--clay-deep); }
.dash-meter{ height:4px; background:var(--line-soft); }
.dash-meter span{ display:block; height:100%; background:var(--forest); transform-origin:left; animation:dash-grow-x .8s cubic-bezier(.2,.7,.2,1) .35s both; }
.dash-meter span.is-critical{ background:var(--clay-deep); }
.dash-stock .dash-empty{ padding:16px 0; }

/* ---- store snapshot ---- */
.dash-snap{ list-style:none; margin:0; padding:0; }
.dash-snap li{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:13px; color:var(--sage); }
.dash-snap li:first-child{ padding-top:0; }
.dash-snap li:last-child{ border-bottom:none; padding-bottom:0; }
.dash-snap strong{ color:var(--charcoal); font-weight:600; font-size:13.5px; font-variant-numeric:tabular-nums; }

/* ---- top products (a real ranking, so numbered) ---- */
.dash-top{ list-style:none; margin:0; padding:0; counter-reset:rank; }
.dash-top li{
  counter-increment:rank; display:grid; grid-template-columns:20px minmax(0, 1fr) auto auto; align-items:baseline; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--line-soft);
}
.dash-top li:first-child{ padding-top:0; }
.dash-top li:last-child{ border-bottom:none; padding-bottom:0; }
.dash-top li::before{ content:counter(rank); font-size:12px; font-weight:600; color:var(--sage); font-variant-numeric:tabular-nums; }
.dash-top-name{ font-size:13.5px; font-weight:600; color:var(--charcoal); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-top .dash-muted{ margin:0; }
.dash-top-rev{ font-size:13.5px; font-weight:600; color:var(--forest); font-variant-numeric:tabular-nums; }

/* Table Data Alignment Utilities */
.td-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 600 !important;
    color: var(--charcoal) !important;
}

.td-muted {
    color: var(--sage) !important;
    font-weight: 400 !important;
}
/* ---- motion: the page-load sequence ---- */
@keyframes dash-draw{ from{ stroke-dasharray:1; stroke-dashoffset:1; } to{ stroke-dasharray:1; stroke-dashoffset:0; } }
@keyframes dash-grow-y{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes dash-grow-x{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes dash-pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--clay) 45%, transparent); }
  70%, 100%{ box-shadow:0 0 0 7px transparent; }
}

/* ---- responsive ---- */
@media (max-width: 1100px){
  .dash-grid-main, .dash-grid-lists{ grid-template-columns:minmax(0, 1fr); }
  .dash-grid-lists{ gap:24px; }
}
@media (max-width: 700px){
  .dash-head h1{ font-size:25px; }
  .dash-actions{ width:100%; }
  .dash-actions .dash-btn{ flex:1; justify-content:center; }
  .dash-kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .dash-kpi{ padding:18px 16px 16px; }
  .dash-kpi-value{ font-size:25px; }
  .dash-panel{ padding:18px 16px 20px; }
  .dash-panel-head-pad{ padding:18px 16px 14px; }
  .dash-table th, .dash-table td{ padding-left:16px; padding-right:16px; }
  .dash-bars{ gap:8px; }
  .dash-bar:not(.is-today) .dash-bar-amount{ display:none; }
  .dash-move li{ grid-template-columns:minmax(0, 1fr) auto; row-gap:6px; }
  .dash-move-balance{ grid-column:1; }
  .dash-move-when{ grid-column:2; grid-row:2; }
  .dash-alert{ flex-wrap:wrap; gap:8px 12px; }
}
@media (max-width: 420px){
  .dash-spark{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .dash *, .dash *::before, .dash *::after{ animation:none !important; transition:none !important; }
}


/* resgister css */
/* Olyroot register page: append to your storefront stylesheet.
   Uses the design-system tokens (fallbacks included). Classes are prefixed .reg- */

.reg {
  --reg-forest: var(--forest, #1B2E24);
  --reg-ivory: var(--ivory, #F6F3EC);
  --reg-sage: var(--sage, #6F7868);       /* darkened slightly for text contrast */
  --reg-charcoal: var(--charcoal, #211F1B);
  --reg-stone: var(--stone, #E7E0CE);
  --reg-stone-deep: var(--stone-deep, #DCD3B9);
  --reg-clay: var(--clay, #B4633C);
  --reg-clay-deep: var(--clay-deep, #9A4F2E);
  --reg-brass: var(--brass, #A6873F);
  --reg-line: #D9D2BF;

  padding-top: 48px;
  padding-bottom: 96px;
}

.reg-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  min-height: 700px;
  border: 1px solid var(--reg-line);
}

/* Editorial side ---------------------------------------------------- */
.reg-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 44px 44px 36px;
  color: var(--reg-forest);
  background: linear-gradient(165deg, var(--reg-stone) 0%, var(--reg-stone-deep) 55%, #CE9672 130%);
  overflow: hidden;
}
/* grain overlay, same idea as .photo-panel */
.reg-aside::before {
  content: "";
  position: absolute; inset: 0;
  opacity: .22;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.reg-aside > * { position: relative; }

.reg-aside-brand {
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px; font-weight: 500; letter-spacing: -.01em;
  margin: 0;
}
.reg-aside h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 28px;
  max-width: 13ch;
}
.reg-benefits { list-style: none; margin: 0; padding: 0; max-width: 340px; }
.reg-benefits li {
  padding: 14px 0;
  border-top: 1px solid rgba(27, 46, 36, .28);
  font-size: 14.5px; line-height: 1.5;
}
.reg-benefits li:last-child { border-bottom: 1px solid rgba(27, 46, 36, .28); }

.reg-caption {
  align-self: flex-start;
  background: var(--reg-forest); color: var(--reg-ivory);
  font-size: 11.5px; letter-spacing: .04em;
  padding: 6px 10px;
}

/* Form side -------------------------------------------------------- */
.reg-main {
  padding: 56px 64px 48px;
  align-self: center;
  max-width: 720px;
}
.reg-main h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(30px, 3.2vw, 40px);
  letter-spacing: -.015em;
  color: var(--reg-forest);
  margin: 14px 0 10px;
}
.reg-sub { color: var(--reg-sage); font-size: 15px; margin: 0 0 30px; max-width: 46ch; }

.reg-error {
  margin: 0 0 22px; padding: 12px 14px;
  background: #F3E6DC; border-left: 3px solid var(--reg-clay);
  color: var(--reg-clay-deep); font-size: 14px;
}

.reg-form { display: block; }
.reg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.reg-field { margin-bottom: 20px; min-width: 0; }
.reg-field label { display: block; font-size: 13px; font-weight: 500; color: var(--reg-charcoal); margin-bottom: 7px; }

.reg-input {
  width: 100%; height: 48px; padding: 0 14px;
  font: 400 15px/1 "Inter", system-ui, sans-serif;
  color: var(--reg-charcoal);
  background: #fff;
  border: 1px solid var(--reg-line);
  border-radius: 2px;
  transition: border-color .2s;
}
.reg-input:hover { border-color: #BDB59D; }
.reg-input:focus { outline: 2px solid var(--reg-clay); outline-offset: 1px; border-color: var(--reg-forest); }
.reg-input:user-invalid { border-color: rgb(182, 4, 4)  }

/* Phone with +91 prefix */
.reg-phone { display: flex; }
.reg-phone-code {
  display: grid; place-items: center; padding: 0 12px;
  background: var(--reg-stone); color: var(--reg-forest);
  border: 1px solid var(--reg-line); border-right: 0; border-radius: 2px 0 0 2px;
  font-size: 14px; font-weight: 500;
}
.reg-phone .reg-input { border-radius: 0 2px 2px 0; }

/* Password toggle */
.reg-pass { position: relative; }
.reg-pass .reg-input { padding-right: 62px; }
.reg-toggle {
  position: absolute; top: 0; right: 0; height: 48px; padding: 0 14px;
  background: none; border: 0; cursor: pointer;
  font: 500 12.5px "Inter", system-ui, sans-serif; color: var(--reg-forest);
}
.reg-toggle:hover { color: var(--forest-soft); }
.reg-toggle:focus-visible { outline: 2px solid var(--reg-clay); outline-offset: -2px; }

/* Strength meter */
.reg-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; }
.reg-strength span { height: 3px; background: var(--reg-stone-deep); transition: background .2s; }
.reg-strength[data-score="1"] span:nth-child(-n+1) { background: var(--reg-clay); }
.reg-strength[data-score="2"] span:nth-child(-n+2) { background: var(--reg-brass); }
.reg-strength[data-score="3"] span:nth-child(-n+3) { background: var(--reg-forest); }
.reg-strength[data-score="4"] span { background: var(--reg-forest); }

.reg-hint { margin: 7px 0 0; font-size: 12.5px; color: var(--reg-sage); min-height: 18px; }
.reg-hint.is-ok { color: var(--reg-forest); }
.reg-hint.is-bad { color: var(--reg-clay-deep); }

/* Terms */
.reg-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 26px; font-size: 14px; color: var(--reg-charcoal); }
.reg-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--reg-forest); flex: none; }
.reg-check a { color: var(--reg-forest); text-decoration: underline; text-underline-offset: 3px; }
.reg-check a:hover { color: var(--reg-clay-deep); }

/* Submit + switch */
.reg-submit { width: 100%; padding: 16px 24px; }
.reg-submit:disabled { opacity: .7; cursor: progress; }
.reg-switch { margin: 22px 0 0; text-align: center; font-size: 14px; color: var(--reg-sage); }
.reg-switch a { color: var(--reg-forest); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.reg-switch a:hover { color: var(--reg-forest); }

/* Responsive ------------------------------------------------------- */
@media (max-width: 991px) {
  .reg { padding-top: 24px; }
  .reg-grid { grid-template-columns: 1fr; min-height: 0; border: 0; }
  .reg-aside { padding: 28px 24px; gap: 20px; }
  .reg-aside h2 { margin-bottom: 0; max-width: none; }
  .reg-benefits, .reg-caption { display: none; }
  .reg-main { padding: 32px 4px 0; max-width: none; }
}
@media (max-width: 575px) {
  .reg-row { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reg * { transition: none !important; }
}


/* login  css */
/* Olyroot login page: append AFTER register.css (it reuses the .reg-* layout and fields). */

/* Tabs: underline style, no pills */
.login-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--reg-line, #D9D2BF); margin: 0 0 28px; }
.login-tab {
  position: relative; padding: 0 0 12px; margin-bottom: -1px;
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font: 500 14.5px "Inter", system-ui, sans-serif;
  color: var(--reg-sage, #6F7868);
  transition: color .2s, border-color .2s;
}
.login-tab:hover { color: var(--reg-forest, #1B2E24); }
.login-tab.is-active { color: var(--reg-forest, #1B2E24); border-bottom-color: var(--reg-forest, #1B2E24); }
.login-tab:focus-visible { outline: 2px solid var(--reg-clay, #B4633C); outline-offset: 4px; }

.login-panel[hidden], #otpStep1[hidden], #otpStep2[hidden], .reg-error[hidden] { display: none; }

/* Error under a button */
.login-panel .reg-submit + .reg-error { margin: 14px 0 0; }

/* OTP */
.login-sent { margin: 0 0 20px; font-size: 14.5px; color: var(--reg-charcoal, #211F1B); line-height: 1.55; }
.login-code {
  max-width: 240px; height: 54px;
  font-size: 24px; letter-spacing: .5em; text-indent: .15em;
  font-variant-numeric: tabular-nums;
}
.login-code::placeholder { letter-spacing: .5em; color: #C9C2AE; }
.login-resend { margin: 18px 0 0; font-size: 14px; color: var(--reg-sage, #6F7868); }

/* Text button that looks like a link */
.login-linkbtn {
  padding: 0; margin-left: 4px; background: none; border: 0; cursor: pointer;
  font: 600 14px "Inter", system-ui, sans-serif;
  color: var(--reg-forest, #1B2E24);
  border-bottom: 1px solid currentColor;
}
.login-linkbtn:hover:not(:disabled) { color: var(--forest, #9A4F2E); }
.login-linkbtn:disabled { color: var(--reg-sage, #6F7868); border-bottom-color: transparent; cursor: default; font-weight: 500; }
.login-linkbtn:focus-visible { outline: 2px solid var(--reg-clay, #B4633C); outline-offset: 3px; }

@media (max-width: 575px) {
  .login-tabs { gap: 20px; }
  .login-code { max-width: none; }
}


/* footer css */
/* ============================================================
   SITE FOOTER — append to static/css/style.css (AFTER the old `footer{...}` rules,
   which it deliberately overrides via the .site-footer class).
   Light, hairline-based, same language as the header.
   ============================================================ */
   /* ============================================================
   SITE FOOTER (dark, four columns) — append to static/css/style.css,
   AFTER the old `footer{...}` rules. If you pasted the earlier light
   footer CSS, delete that block first.
   ============================================================ */
.site-footer{
  background:#000; color:#fff; padding:72px 0 0;
  font-family:var(--sans);
}
.site-footer a{ color:rgba(255,255,255,.82); font-size:14px; transition:color .15s ease; }
.site-footer a:hover{ color:#fff; }
.site-footer a:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.footer-logo{ display:inline-block; margin-bottom:22px; }
.footer-logo img{ height:44px; width:auto; }
.footer-tagline{ font-family:var(--sans); font-size:18px; font-weight:500; line-height:1.35; color:#fff; margin:0 0 14px; }
.footer-bio{ font-size:14px; line-height:1.9; color:rgba(255,255,255,.82); max-width:320px; margin:0 0 22px; }

.footer-social{ display:flex; gap:14px; }
.site-footer .footer-social a{
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:17px; border-radius:50%; transition:background-color .2s ease;
}
.site-footer .footer-social a:hover{ background:rgba(255,255,255,.14); }

/* headings: bold sans, optional icon on the left */
.footer-head{
  display:flex; align-items:center; gap:12px;
  font-family:var(--sans); font-size:17px; font-weight:700; line-height:1.3;
  letter-spacing:0; text-transform:none; color:#fff; margin:0 0 12px;
}
.footer-head i{ width:20px; text-align:center; font-size:16px; color:#fff; opacity:.9; }
.footer-head-plain{ margin-bottom:22px; }

.footer-block{ margin-bottom:26px; }
.footer-block:last-child{ margin-bottom:0; }
.footer-text{ margin:0; padding-left:32px; font-size:14px; line-height:1.9; font-style:normal; color:rgba(255,255,255,.82); }

.site-footer .footer-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.site-footer .footer-list a{ overflow-wrap:anywhere; }

.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px;
  margin-top:56px; padding:20px 0 24px; border-top:1px solid rgba(255,255,255,.14);
  font-size:12.5px; color:rgba(255,255,255,.6);
}
.site-footer .footer-bottom a{ font-size:12.5px; color:#fff; font-weight:600; }

@media (max-width: 991px){
  .site-footer{ padding-top:56px; }
}
@media (max-width: 575px){
  .footer-bottom{ margin-top:40px; flex-direction:column; }
}

/* legal and privacy policy  */
/* ============================================================
   LEGAL PAGES (privacy, terms, returns, shipping)
   Append to static/css/style.css. Mirrors the register page: same split
   card, grain panel, hairline rows. Self-contained (does not need register.css).
   ============================================================ */
.legal {
  --l-forest: var(--forest, #1B2E24);
  --l-sage: var(--sage, #6F7868);
  --l-charcoal: var(--charcoal, #211F1B);
  --l-stone: var(--stone, #E7E0CE);
  --l-stone-deep: var(--stone-deep, #DCD3B9);
  --l-clay: var(--clay, #B4633C);
  --l-brass: var(--brass, #A6873F);
  --l-line: #D9D2BF;
  padding-top: 48px;
  padding-bottom: 96px;
}

.legal-shell {
  display: grid;
  grid-template-columns: 4fr 8fr;
  border: 1px solid var(--l-line);
  align-items: stretch;
}

/* ---- side panel ---- */
.legal-aside {
  position: relative;
  padding: 44px 36px;
  color: var(--l-forest);
  background: linear-gradient(165deg, var(--l-stone) 0%, var(--l-stone-deep) 55%, #CE9672 130%);
}
/* grain overlay, same as the register panel */
.legal-aside::before {
  content: "";
  position: absolute; inset: 0;
  opacity: .22; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.legal-aside-inner {
  position: sticky; top: 96px;
  display: flex; flex-direction: column; gap: 32px;
  max-height: calc(100vh - 128px); overflow-y: auto;
}
.legal-aside-inner > * { position: relative; }

.legal-aside-brand {
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px; font-weight: 500; letter-spacing: -.01em; margin: 0;
}
.legal-aside-label {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 12px; opacity: .8;
}
.legal-toc { display: flex; flex-direction: column; }
.legal-toc a {
  padding: 11px 0;
  border-top: 1px solid rgba(27, 46, 36, .28);
  font-size: 13.5px; line-height: 1.4;
  color: var(--l-forest); opacity: .75;
  transition: opacity .15s ease;
}
.legal-toc a:last-child { border-bottom: 1px solid rgba(27, 46, 36, .28); }
.legal-toc a:hover { opacity: 1; }
.legal-toc a.is-active { opacity: 1; font-weight: 600; }
.legal-toc a:focus-visible { outline: 2px solid var(--l-clay); outline-offset: 2px; }

.legal-caption {
  align-self: flex-start;
  background: var(--l-forest); color: var(--ivory, #fff);
  font-size: 11.5px; letter-spacing: .04em; padding: 6px 10px;
}

/* ---- content ---- */
.legal-main { padding: 56px 64px 56px; min-width: 0; }
.legal-main h1 {
  font-family: "Fraunces", Georgia, serif; font-weight: 500;
  font-size: clamp(30px, 3.2vw, 40px); letter-spacing: -.015em;
  color: var(--l-forest); margin: 14px 0 10px;
}
.legal-updated { color: var(--l-sage); font-size: 14px; margin: 0 0 40px; }

.legal-body { max-width: 680px; }
.legal-body h2 {
  font-size: clamp(20px, 2vw, 24px); line-height: 1.25; letter-spacing: -.005em;
  margin: 52px 0 16px; padding-top: 30px; border-top: 1px solid var(--l-line);
  scroll-margin-top: 100px;
}
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-body h3 { font-size: 17px; margin: 28px 0 12px; color: var(--l-forest); }
.legal-body p { margin: 0 0 16px; font-size: 15px; line-height: 1.85; color: var(--l-charcoal); }
.legal-body ul { margin: 0 0 20px; padding-left: 20px; }
.legal-body li { font-size: 15px; line-height: 1.75; color: var(--l-charcoal); padding-left: 4px; margin-bottom: 8px; }
.legal-body li::marker { color: var(--l-brass); }
.legal-body a { color: var(--l-forest); font-weight: 500; border-bottom: 1px solid var(--l-line); transition: border-color .15s ease; }
.legal-body a:hover { border-bottom-color: var(--l-forest); }
.legal-body a:focus-visible { outline: 2px solid var(--l-clay); outline-offset: 2px; }

/* contact block */
.legal-contact { margin: 8px 0 24px; border: 1px solid var(--l-line); background: #fff; }
.legal-contact > div {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px;
  padding: 14px 22px; border-top: 1px solid var(--line-soft, rgba(33,31,27,.08));
}
.legal-contact > div:first-child { border-top: none; }
.legal-contact dt { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--l-sage); padding-top: 2px; }
.legal-contact dd { margin: 0; font-size: 14.5px; color: var(--l-charcoal); overflow-wrap: anywhere; }

.legal-fineprint { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--l-line); font-size: 13px !important; color: var(--l-sage) !important; }

/* ---- responsive ---- */
@media (max-width: 991px) {
  .legal { padding-top: 24px; }
  .legal-shell { grid-template-columns: 1fr; border: 0; }
  .legal-aside { display: none; }          /* the page title and scroll are enough on mobile */
  .legal-main { padding: 24px 4px 0; }
}
@media (max-width: 575px) {
  .legal-contact > div { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }
}

/* ---- print ---- */
@media print {
  .topbar, header.main-nav, footer, .legal-aside { display: none !important; }
  .legal-shell { display: block; border: 0; }
  .legal-main { padding: 0; }
  .legal-body { max-width: none; }
  .legal-body a { border-bottom: none; }
}

#bestsellers .prod-media .photo-panel {
  aspect-ratio: 1 / 1;      /* matches your 1000x1000 images */
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
}
#bestsellers .prod-media .photo-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fills the square with no distortion */
  display: block;
}
/* ---------- card ---------- */
#bestsellers .pc {
  position: relative; height: 100%; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line, #e5e5e0); border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 40, 28, .04);
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
@media (hover: hover) {
  #bestsellers .pc:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--forest, #2f5d3a) 30%, var(--line, #e5e5e0));
    box-shadow: 0 14px 32px rgba(20, 40, 28, .10);
  }
  #bestsellers .pc:hover .pc-media img { transform: scale(1.04); }
}

#bestsellers .pc-media {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: #fff; border-bottom: 1px solid var(--line, #eee);
}
#bestsellers .pc-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
#bestsellers .pc-view { display: none !important; }   /* hover pill removed: it covered the product */

#bestsellers .pc-badge {
  position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 999px;
  background: var(--forest, #2f5d3a); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.2;
}

/* text block: price is pushed to the bottom so every card ends on the same line */
#bestsellers .pc-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 18px; flex: 1; text-decoration: none; color: inherit; }
#bestsellers .pc-cat { font-size: 12.5px; color: var(--sage); }
#bestsellers .pc-name {
  margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.3; font-weight: 500; color: var(--forest);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em;
}
#bestsellers .pc-body:hover .pc-name { text-decoration: underline; text-underline-offset: 3px; }
#bestsellers .pc-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line, #e5e5e0);
  font-variant-numeric: tabular-nums;
}
#bestsellers .pc-now { font-size: 19px; font-weight: 700; color: var(--charcoal); }
#bestsellers .pc-mrp { font-size: 14px; color: var(--sage); text-decoration: line-through; }
@media (max-width: 575.98px) {
  #bestsellers .pc { border-radius: 14px; }
  #bestsellers .pc-body { padding: 12px 12px 14px; }
  }
   

#home-combos .prod-media .photo-panel {
    aspect-ratio: 1 / 1;  
    width: 100%;
    height: auto;            
    overflow: hidden;
  }
#home-combos .prod-media .photo-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;       
    display: block;
  }

  /* circle + icon base */
  .concern-icon-grid .concern-icon-photo {
    border-radius: 50%;
    overflow: hidden;
    isolation: isolate;               
    transition: background-color .25s ease, transform .25s ease;
  }
  .concern-icon-grid .concern-icon-photo img { border-radius: 50%; }
  .concern-icon-grid .concern-icon-label { transition: color .2s ease; }
  
  /* HOVER / keyboard focus: green circle, white icon */
  @media (hover: hover) {
    .concern-icon-grid .concern-icon-item:hover .concern-icon-photo {
      background-color: var(--forest, #1e7a40);
    }
    .concern-icon-grid .concern-icon-item:hover .concern-icon-photo img {
      filter: grayscale(1) invert(1) brightness(1.8);
      mix-blend-mode: screen;
    }
    .concern-icon-grid .concern-icon-item:hover .concern-icon-label {
      color: var(--forest, #1e7a40);
    }
  }
  .concern-icon-grid .concern-icon-item:focus-visible { outline: none; }
  .concern-icon-grid .concern-icon-item:focus-visible .concern-icon-photo { background-color: var(--forest, #1e7a40); }
  .concern-icon-grid .concern-icon-item:focus-visible .concern-icon-photo img { filter: grayscale(1) invert(1) brightness(1.8); mix-blend-mode: screen; }
  
  /* CLICK: small press-in */
  .concern-icon-grid .concern-icon-item:active .concern-icon-photo { transform: scale(.96); }
  
  @media (prefers-reduced-motion: reduce) {
    .concern-icon-grid .concern-icon-photo, .concern-icon-grid .concern-icon-label { transition: none; }
  }

  .rt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sage); }
  .rt-stars { position: relative; display: inline-block; font-size: 15px; letter-spacing: 2px; line-height: 1; color: var(--line, #d9d9d9); }
  .rt-stars::before {            /* filled layer, clipped to the average */
    content: "★★★★★"; position: absolute; inset: 0; width: var(--pct);
    overflow: hidden; white-space: nowrap; color: #e0a526;
  }
  .rt-count { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- dark button, green on hover / press ---- */
/* ---- dark button: base state (white text) ---- */
#bestsellers .bc .bc-btn, #bestsellers .pc .pc-btn,
#home-combos .cb .cb-btn, #combos-page .cb .cb-btn,
.pc .pc-btn {
  background: #1b2a22;
  border-color: #1b2a22;
  color: #fff;                 /* white text, not green */
  font-weight: 600;
  letter-spacing: .01em;
  transition: background-color .2s ease, border-color .2s ease, transform .1s ease;
}

/* HOVER over the card or the button: green */
@media (hover: hover) {
  #bestsellers .bc:hover .bc-btn, #bestsellers .pc:hover .pc-btn,
  #home-combos .cb:hover .cb-btn, #combos-page .cb:hover .cb-btn,
  .pc:hover .pc-btn {
    background: var(--forest, #1e7a40);
    border-color: var(--forest, #1e7a40);
    color: #fff;
  }
}

/* CLICK / TAP (while pressed) and keyboard focus: green, slightly deeper */
#bestsellers .bc:active .bc-btn, #bestsellers .pc:active .pc-btn,
#home-combos .cb:active .cb-btn, #combos-page .cb:active .cb-btn,
.pc:active .pc-btn,
#bestsellers .bc:focus-within .bc-btn, #home-combos .cb:focus-within .cb-btn,
#combos-page .cb:focus-within .cb-btn, .pc:focus-within .pc-btn {
  background: #17683a;
  border-color: #17683a;
  color: #fff;
}
#bestsellers .bc:active .bc-btn, #home-combos .cb:active .cb-btn,
#combos-page .cb:active .cb-btn, .pc:active .pc-btn { transform: scale(.98); }

/* doc data */
.dr-head { margin-bottom: 28px; }
.dr { background: #fff; border: 1px solid var(--line, rgba(0,0,0,.08)); border-radius: 14px; overflow: hidden; height: 100%; text-align: center; transition: box-shadow .25s ease, transform .25s ease; }
.dr:hover { box-shadow: 0 14px 30px rgba(0,0,0,.08); transform: translateY(-3px); }
.dr-photo { aspect-ratio: 4 / 5; background: var(--stone, #efece3); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dr-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.dr-initials { font-family: "Fraunces", serif; font-size: 3.5rem; color: var(--forest, #2f5d3a); opacity: .5; }
.dr-body { padding: 16px 14px 20px; }
.dr-name { font-size: 1.05rem; margin: 0 0 4px; color: var(--forest, #2f5d3a); }
.dr-degree { margin: 0; font-size: .86rem; font-weight: 600; }
.dr-role { margin: 4px 0 0; font-size: .82rem; opacity: .7; }
.dr-chip { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(47,93,58,.08); color: var(--forest, #2f5d3a); font-size: .75rem; font-weight: 600; }

.section-divided { border-top: 1px solid var(--line, rgba(0, 0, 0, .1)); }
.section-divided > .container-xl::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 0 auto 44px;
  border-radius: 3px;
  background: var(--forest, #2f5d3a);
  opacity: .35;
}

/* search bar */
/* ---- Site search ---- */
.site-search { position: absolute; left: 0; right: 0; top: 100%; background: #fff;
  border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); box-shadow: 0 18px 30px rgba(0,0,0,.08);
  padding: 18px 0 22px; z-index: 1035; }
.site-search[hidden] { display: none; }
.ss-form { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--brand, #2f5d3a); padding-bottom: 10px; }
.ss-form input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1.1rem; min-width: 0; }
.ss-close { border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: inherit; opacity: .6; }
.ss-close:hover { opacity: 1; }
.ss-results { max-height: 60vh; overflow-y: auto; margin-top: 14px; }
.ss-label { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .55; margin: 12px 0 8px; }
.ss-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-cats a { padding: 6px 14px; border-radius: 999px; background: rgba(47,93,58,.08); color: var(--brand, #2f5d3a);
  font-size: .86rem; font-weight: 500; text-decoration: none; }
.ss-cats a:hover { background: rgba(47,93,58,.16); }
.ss-item { display: flex; align-items: center; gap: 14px; padding: 8px 6px; border-radius: 8px; color: inherit; text-decoration: none; }
.ss-item:hover, .ss-item:focus-visible { background: rgba(0,0,0,.04); }
.ss-thumb { flex: 0 0 52px; height: 52px; border-radius: 6px; background: #f1eee6; overflow: hidden; }
.ss-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-name { font-size: .95rem; font-weight: 500; }
.ss-meta { font-size: .8rem; opacity: .65; }
.ss-price { margin-left: auto; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.ss-all { display: block; margin-top: 12px; padding: 12px; text-align: center; font-weight: 600; font-size: .9rem;
  color: var(--brand, #2f5d3a); text-decoration: none; border-top: 1px solid var(--line, rgba(0,0,0,.08)); }
.ss-empty { padding: 18px 4px; opacity: .7; font-size: .92rem; }


#bestsellers .bc-media .bc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#bestsellers .bc-media.has-hover .bc-img {
  opacity: 0;
  transition: opacity .35s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
#bestsellers .bc-media.has-hover .bc-img.is-active { opacity: 1; }
#bestsellers .bc-badge { z-index: 2; }