/* =====================================================================
   TOMAY SAJABO JOTONE — Minimal theme
   Loaded LAST on every page, so it restyles the earlier sheets without
   them being rewritten.

   The brief: fewer colours, calmer surfaces, hairline rules instead of
   coloured blocks. The palette is deliberately small —

     paper   #faf7f3   warm off-white page (not pure white)
     surface #ffffff   cards, sitting one step brighter than the page
     ink     #1a0610   text and hairlines
     pink    #b01a49   one accent: prices, the italic word in a heading
     gold    #8a5d00   one accent: small uppercase labels, stars

   Everything else — the black heading slabs with gold borders, the
   diamond glyphs, the text shadows and strokes, the maroon strips, the
   alternating pink bands, the drop shadows on every card — is switched
   off below. Sections are separated by a single hairline instead.
   ===================================================================== */

:root{
  --paper:       #faf7f3;
  --paper-warm:  #f4efe9;
  --band-alt:    #f5efe6;   /* warm sand, for alternating sections */
  --edge:        rgba(201,138,0,.7);    /* gold card edge */
  --edge-strong: rgba(201,138,0,.9);
  --surface:     #ffffff;
  --line:        rgba(26,6,16,.13);
  --line-mid:    rgba(26,6,16,.22);
  --line-ink:    rgba(26,6,16,.85);
  --pink-text:   #b01a49;
  --pink-solid:  #b01a49;
  --gold-ink:    #8a5d00;
  /* Body copy was a plum (#7a4058) which read as a third pink. Neutral
     warm greys keep the page calm and leave pink as a true accent. */
  --ink-mid:     #3f3038;
  --ink-soft:    #6b5a62;
  --text:        #3f3038;
  --text-light:  #6b5a62;
  --shadow-card: none;
  --shadow-lift: 0 6px 20px rgba(26,6,16,.08);
  --shadow-soft: none;
}

body{ background:var(--paper); color:var(--ink); }

/* ── One surface for the whole page ──────────────────────────────────
   No alternating colour bands. Sections are told apart by a hairline
   and by generous space, not by changing the background. */
body .products-section, body .categories-section, body .testimonials, body .why-us, body .budget-section, body .lux-products-section, body .cart-page, body .checkout-page, body .mem-page, body .pay-wrap, body .account-section, body .auth-section, body .product-detail, body .related-section, body .contact-section, body .order-success-section{
  background:var(--paper);
  border-top:1px solid var(--line);
  padding-top:44px;
  padding-bottom:44px;
}
body .products-section + .products-section{ border-top:1px solid var(--line); }

/* ── Section headings: the biggest source of noise ───────────────────
   Was a black slab with 4px gold borders, a glow, a text stroke, two ◆
   glyphs and a maroon strip. Now: a small gold label, a large serif
   line, a short rule. */
body .section-head{ margin-bottom:26px; }

body .section-badge-label{
  display:inline-block;
  background:none; border:none; border-radius:0; padding:0;
  color:var(--gold-ink);
  font-size:.72rem; font-weight:700; letter-spacing:.26em;
  margin-bottom:14px;
}
body .section-badge-label::before, body .section-badge-label::after{ display:none; }

body .section-badge-title{
  background:none; border:none; border-radius:0;
  padding:0 0 16px; margin:0 auto;
  color:var(--ink);
  font-weight:700;
  letter-spacing:0;
  text-shadow:none;
  -webkit-text-stroke:0;
  position:relative;
}
body .section-badge-title::before{ display:none; }
body .section-badge-title::after{
  content:''; display:block;
  width:54px; height:1px; background:var(--line-ink);
  margin:18px auto 0;
  font-size:0;
}
body .section-badge-title em{
  font-style:italic; color:var(--pink-text);
  text-shadow:none; -webkit-text-stroke:0; font-weight:700;
}

body .section-badge-desc{
  background:none; border:none; padding:0;
  color:var(--ink-soft);
  font-weight:400; font-size:.96rem;
  max-width:560px; margin:0 auto;
}
body .section-head-badge{ display:block; }

/* ── Cards: hairline instead of shadow ───────────────────────────── */
body .product-card, body .lux-card, body .budget-card, body .testimonial-card, body .feature-item, body #homeFeaturesStrip .feature-item, body .cc-panel, body .cart-summary, body .mem-card, body .pay-card, body .auth-card{
  background:var(--surface);
  border:2px solid var(--edge);
  border-radius:12px;
  box-shadow:none;
}
body .product-card:hover, body .lux-card:hover, body .budget-card:hover, body .feature-item:hover, body .testimonial-card:hover{
  transform:none;
  box-shadow:var(--shadow-lift);
  border-color:var(--edge-strong);
}
body .product-img-wrap, body .lux-card__img{ background:var(--paper-warm); }

/* ── Round icon wells: drop the pink fills ───────────────────────── */
body .feature-icon, body #homeFeaturesStrip .feature-icon, body .budget-icon{
  background:var(--paper-warm);
  border:1px solid var(--line);
  color:var(--gold-ink);
  box-shadow:none;
}
body .feature-item:hover .feature-icon, body .budget-card:hover .budget-icon{
  background:var(--ink); color:var(--surface); border-color:var(--ink);
  box-shadow:none;
}
body .cat-img-wrap{ background:var(--paper-warm); border:1px solid var(--line); box-shadow:none; }
body .category-card:hover .cat-img-wrap{ border-color:var(--line-ink); }
body .cat-img-wrap .cat-placeholder{ color:var(--gold-ink); opacity:.35; }

/* ── The pink features strip becomes part of the page ────────────── */
body #homeFeaturesStrip{
  background:var(--paper);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* ── Text ────────────────────────────────────────────────────────── */
body .cat-name, body .feature-title, body .testimonial-author, body .testimonial-name, body .section-title, body .empty-state h3, body .mem-intro h2{ color:var(--ink); }

body .feature-desc, body .testimonial-text, body .testimonial-role, body .section-subtitle, body .section-desc, body .budget-sub, body .empty-state p, body .mem-intro p, body .field-hint{ color:var(--ink-soft); }

body .category-card:hover .cat-name{ color:var(--pink-text); }
body .testimonial-stars{ color:var(--gold-ink); }
body .empty-state i{ color:var(--gold-ink); opacity:.4; }

/* ── The single pink accent: prices and category labels ──────────── */
body .product-category, body .lux-card__cat, body .price-current, body .lux-price-now, body .budget-price, body .detail-price-now, body .cart-line-total, body .summary-row.total span:last-child, body .qr-amount, body .pay-amount__value, body .mem-card__price, body .featured-banner .price-current, body .lux-card--special .lux-card__cat, body .lux-card--special .lux-price-now, body .lux-card--srb .lux-card__cat, body .lux-card--srb .lux-price-now{ color:var(--pink-text); }

body .price-original, body .lux-price-was, body .detail-price-was{ color:var(--ink-soft); }

body .budget-label{ color:var(--gold-ink); }
body .logo-sub{ color:var(--pink-text); }

/* ── Badges: outline, not filled blocks ──────────────────────────── */
body .product-badge, body .lux-badge{
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line-ink);
  box-shadow:none;
  font-weight:700;
}
body .product-badge.sale, body .lux-badge--sale{ background:var(--pink-solid); color:#fff; border-color:var(--pink-solid); }
body .product-badge.new, body .lux-badge--new{ background:var(--ink); color:#fff; border-color:var(--ink); }
body .lux-badge--srb, body .lux-badge--special{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ── Buttons: solid ink, or a hairline outline. No third style. ──── */
body .btn-gold, body .add-to-cart-btn, body .lux-add-btn, body .btn-primary, body .btn-submit, body .btn-dark, body .quick-add-btn, body .lux-filter__search button, body .btn-loc{
  background:var(--ink); color:var(--surface);
  border:1px solid var(--ink);
  box-shadow:none;
}
body .btn-gold:hover, body .add-to-cart-btn:hover, body .lux-add-btn:hover, body .btn-primary:hover, body .btn-submit:hover, body .btn-dark:hover{
  background:var(--pink-solid); border-color:var(--pink-solid); color:var(--surface);
  transform:none; box-shadow:none;
}

body .btn-outline, body .btn-quiet, body .view-all-link, body .lux-view-btn{
  background:transparent; color:var(--ink);
  border:1px solid var(--line-ink);
  box-shadow:none;
}
body .btn-outline:hover, body .btn-quiet:hover, body .view-all-link:hover, body .lux-view-btn:hover{
  background:var(--ink); color:var(--surface); border-color:var(--ink);
  box-shadow:none;
}

/* Dark bands keep light buttons */
body .hero-slider .btn-outline, body .hero-btns .btn-outline, body .srb-section .btn-outline, body .page-hero .btn-outline, body .lux-hero .btn-outline, body .sp-hero .btn-outline{ color:#fff; border-color:rgba(255,255,255,.55); background:transparent; }
body .hero-slider .btn-outline:hover, body .hero-btns .btn-outline:hover, body .srb-section .btn-outline:hover{ background:#fff; color:var(--ink); border-color:#fff; }
body .srb-section .view-all-link{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
body .srb-section .view-all-link:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* ── Pagination & chips ──────────────────────────────────────────── */
body .lux-page-btn, body .pagination a, body .pagination span, body .budget-chip{
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-mid); box-shadow:none;
}
body .lux-page-btn:hover, body .lux-page-btn.active, body .pagination a:hover, body .pagination span.active, body .budget-chip:hover, body .budget-chip.active{
  background:var(--ink); color:var(--surface); border-color:var(--ink);
}

/* ── Filter bar ──────────────────────────────────────────────────── */
body .lux-filter-wrap{
  background:var(--paper); border-bottom:1px solid var(--line);
  box-shadow:none;
}
body .lux-filter__count{ background:none; border:1px solid var(--line); color:var(--ink-mid); }
body .lux-filter__count span{ color:var(--pink-text); }
body .lux-select-wrap select, body .lux-filter__search{ background:var(--surface); border:1px solid var(--line-mid); }

/* ── Product detail ──────────────────────────────────────────────── */
body .product-detail-price{ background:var(--paper-warm); border-left:2px solid var(--ink); }
body .detail-price-save{ background:var(--pink-solid); color:#fff; }
body .meta-val{ color:var(--ink); }
body .meta-label{ color:var(--ink-soft); }
body .qty-selector{ border:1px solid var(--line-mid); }
body .qty-btn{ color:var(--ink); }

/* ── Membership ──────────────────────────────────────────────────── */
body .mem-note{ background:var(--surface); border:1px solid var(--line); color:var(--ink-mid); }
body .mem-note i{ color:var(--gold-ink); }
body .mem-card.is-popular{ border-color:var(--ink); }
body .mem-card__tag{ background:var(--ink); color:var(--surface); box-shadow:none; }

/* ── Forms ───────────────────────────────────────────────────────── */
body .form-control{ background:var(--surface); border:1px solid var(--line-mid); }
body .form-control:focus{ border-color:var(--ink); box-shadow:none; background:var(--surface); }

/* ── Footer stays dark: it closes the page ───────────────────────── */
body .footer-about, body .footer-col ul li a, body .footer-contact p{ color:rgba(255,255,255,.72); }
body .footer-bottom p{ color:rgba(255,255,255,.6); }

/* ── Sale strip & popup keep their accents but lose the gloss ────── */
body .sale-strip{ border-bottom:1px solid var(--line-ink); }
body .member-cta{ background:var(--ink); color:var(--surface); box-shadow:none; }
body .member-cta:hover{ background:var(--pink-solid); color:var(--surface); transform:none; box-shadow:none; }

@media (max-width: 600px){
  .products-section,.categories-section,.testimonials,.why-us,.budget-section,
  body .lux-products-section, body .product-detail, body .related-section, body .contact-section{
    padding-top:40px; padding-bottom:40px;
  }
  body .section-head{ margin-bottom:26px; }
}

/* ── Fixes from the contrast audit ─────────────────────────────────── */

/* .featured-banner is a LIGHT band, not a dark one — it just looked dark
   because the heading sat in a black slab. It joins the paper surface. */
body .featured-banner{
  background:var(--band-alt); border-top:1px solid var(--line);
  padding-top:44px; padding-bottom:44px;
}
body .featured-banner::before{ display:none; }
body .featured-banner .section-badge-title{ color:var(--ink); }
body .featured-banner .section-badge-title em{ color:var(--pink-text); }
body .featured-banner .section-badge-label{ color:var(--gold-ink); }
body .featured-banner .section-badge-desc{ color:var(--ink-soft); background:none; }
body .featured-banner .product-card{ background:var(--surface); border:2px solid var(--edge); }
body .featured-banner .product-category,
body .featured-banner .price-current{ color:var(--pink-text); }
body .featured-banner .add-to-cart-btn{ background:var(--ink); border-color:var(--ink); color:var(--surface); }
body .featured-banner .add-to-cart-btn:hover{ background:var(--pink-solid); border-color:var(--pink-solid); }
body .featured-banner .product-action-btn{ background:var(--surface); color:var(--ink); }

/* Same for the dark hero-style bands that carry a section heading */
body .srb-section .section-badge-title,
body .lux-hero .section-badge-title{ color:#fff; }

/* The top budget tier had a dark fill; it is a plain card now, so its
   text has to come back to ink. */
body .budget-card--gold{ background:var(--surface); border-color:var(--ink); }
body .budget-card--gold .budget-label{ color:var(--gold-ink); }
body .budget-card--gold .budget-price{ color:var(--pink-text); }
body .budget-card--gold .budget-sub{ color:var(--ink-soft); }
body .budget-card--gold .budget-icon{ background:var(--paper-warm); color:var(--gold-ink); border-color:var(--line); }

/* Links that still used the light pink */
body .product-detail-cat a,
body .auth-link a,
body .breadcrumb a,
body .meta-val a,
body .budget-product-count span{ color:var(--pink-text); }
body .product-badge.special{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* The "--light" heading variant re-declares the black slab at a higher
   specificity, so it has to be switched off explicitly too. */
body .section-head-badge--light .section-badge-title{
  background:none; border:none; color:var(--ink);
  text-shadow:none; -webkit-text-stroke:0; padding:0 0 16px;
}
body .section-head-badge--light .section-badge-title em{ color:var(--pink-text); }

/* ── Solid buttons on the dark bands ───────────────────────────────
   The rule above makes solid buttons ink-on-light. On the dark hero,
   page heroes and the Srabanti band that would be ink-on-dark, so they
   invert to white-on-dark. Same idea, opposite surface. */
body .hero-slider .btn-gold,
body .hero-btns .btn-gold,
body .hero-slider .btn-primary,
body .hero-btns .btn-primary,
body .page-hero .btn-gold,
body .lux-hero .btn-gold,
body .sp-hero .btn-gold,
body .srb-section .btn-gold{
  background:var(--surface); color:var(--ink); border-color:var(--surface);
}
body .hero-slider .btn-gold:hover,
body .hero-btns .btn-gold:hover,
body .srb-section .btn-gold:hover{
  background:var(--gold); color:var(--ink); border-color:var(--gold);
}

/* The special / Srabanti card variants restate the button text colour at
   a higher specificity, so they need it set here too. */
body .lux-card--special .lux-add-btn,
body .lux-card--srb .lux-add-btn{ color:var(--surface); border-color:var(--ink); }

/* ── Section separation ────────────────────────────────────────────
   Consecutive sections shared one surface, so the joins were invisible.
   Alternating between the paper and a warm sand tone — plus a slightly
   stronger rule on top — makes each change of section read clearly
   without reintroducing colour blocks. */
body .budget-section,
body .why-us,
body .featured-banner{ background:var(--band-alt); }

body .products-section,
body .categories-section,
body .testimonials{ background:var(--paper); }

body .products-section,
body .categories-section,
body .testimonials,
body .why-us,
body .budget-section,
body .featured-banner,
body .lux-products-section{ border-top:1px solid rgba(26,6,16,.16); }

@media (max-width:600px){
  body .products-section,body .categories-section,body .testimonials,body .why-us,
  body .budget-section,body .featured-banner,body .lux-products-section,
  body .product-detail,body .related-section,body .contact-section{
    padding-top:32px; padding-bottom:32px;
  }
  body .section-head{ margin-bottom:20px; }
}

/* ── Tighten the space around the section footer button ────────────
   Was: 20px track padding + 12px + arrows + 12px + dots + 48px margin
   before the button, then the section's own bottom padding. That read as
   a large empty gap on mobile. */
body .section-footer{ margin-top:24px; }
body .products-slider-track{ padding-bottom:10px; }
body .product-slider-btns{ margin-top:8px; }
body .product-slider-dots{ margin-top:10px; }
body .categories-grid + .section-footer{ margin-top:26px; }

@media (max-width:600px){
  body .section-footer{ margin-top:18px; }
  body .products-slider-track{ padding-bottom:6px; }
  body .product-slider-btns{ margin-top:6px; }
  body .product-slider-dots{ margin-top:8px; }
}

/* ── Round of fixes ───────────────────────────────────────────────── */

/* 1. Features strip headings in pink.
      Needs the #id in the selector because index.php styles them as
      "#homeFeaturesStrip .feature-title", which outranks a class rule. */
body #homeFeaturesStrip .feature-title,
body #homeFeaturesStrip .feature-title h3{ color:var(--pink-text); }

/* 2. The top budget tier reads as a dark card so it stands apart from
      the "Under" tiers. */
body .budget-card--gold{
  background:var(--ink); border-color:var(--ink);
}
body .budget-card--gold .budget-label{ color:var(--gold); }
body .budget-card--gold .budget-price,
body .budget-card--gold .budget-price h3{ color:#fff; }
body .budget-card--gold .budget-sub{ color:rgba(255,255,255,.7); }
body .budget-card--gold .budget-icon{
  background:rgba(255,255,255,.1); border-color:rgba(240,180,41,.5); color:var(--gold);
}
body .budget-card--gold:hover{ border-color:var(--gold); }
body .budget-card--gold:hover .budget-icon{ background:var(--gold); color:var(--ink); }

/* 3. Budget price.
      The <h3> inside .budget-price was picking up the base heading rules
      (Cormorant at 37px, its own margins) instead of the price styling,
      so it rendered larger than intended and out of step with the prices
      on the product cards. It now inherits from its wrapper, and the
      wrapper matches the card prices: Jost, tabular figures. */
body .budget-price h3,
body .feature-title h3,
body .budget-price > *{
  font:inherit; color:inherit; margin:0; padding:0;
  line-height:inherit; letter-spacing:inherit;
}
body .budget-price{
  font-family:'Jost', sans-serif;
  font-weight:500;
  font-size:1.85rem;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
@media (max-width:600px){
  body .budget-price{ font-size:1.3rem; }
}

/* Features strip headings a step larger.
   The size has to be set on the <h3> with the #id in the selector: the
   wrapper div carries an inline font-size, and the h3 inherits from it,
   so only an ID-level rule on the h3 itself can raise it. */
body #homeFeaturesStrip .feature-title,
body #homeFeaturesStrip .feature-title h3{
  font-size:1.2rem; font-weight:700; line-height:1.3;
}
@media (max-width:600px){
  body #homeFeaturesStrip .feature-title,
  body #homeFeaturesStrip .feature-title h3{ font-size:1.2rem; }
}

/* ── Search results page ──────────────────────────────────────────── */
body .search-section{ background:var(--paper); }
body .search-summary{
  color:var(--ink-mid); font-size:.95rem; margin-bottom:26px; text-align:center;
}
body .search-summary strong{ color:var(--pink-text); }
body .search-box-wrap{
  display:flex; align-items:center; gap:8px; max-width:560px; margin:0 auto 34px;
  background:var(--surface); border:2px solid var(--edge);
  border-radius:var(--r-pill); padding:5px 6px 5px 18px;
}
body .search-box-input{
  flex:1; border:none; outline:none; background:transparent;
  font-family:inherit; font-size:.95rem; color:var(--ink); padding:9px 0;
}
body .search-box-input::placeholder{ color:var(--ink-soft); }
body .search-box-btn{
  background:var(--ink); color:#fff; border:none; cursor:pointer;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
body .search-box-btn:hover{ background:var(--pink-solid); }
body .search-empty{
  max-width:520px; margin:0 auto; text-align:center;
  background:var(--surface); border:2px solid var(--edge);
  border-radius:12px; padding:48px 28px;
}
body .search-empty i{ font-size:2.2rem; color:var(--gold-ink); opacity:.5; display:block; margin-bottom:16px; }
body .search-empty h3{
  font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:700;
  color:var(--ink); margin-bottom:10px;
}
body .search-empty p{ color:var(--ink-soft); font-size:.95rem; margin-bottom:22px; line-height:1.6; }
/* ── Email OTP screens (register / forgot password) ───────────────── */
body .label-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
body .forgot-link{
  font-size:.78rem; font-weight:700; color:var(--pink-text);
  text-decoration:none; white-space:nowrap;
}
body .forgot-link:hover{ text-decoration:underline; }

body .otp-head{ text-align:center; margin-bottom:6px; }
body .otp-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:58px; height:58px; border-radius:50%; margin-bottom:14px;
  background:var(--paper-warm); border:2px solid var(--edge);
  color:var(--gold-ink); font-size:1.3rem;
}
body .otp-input{
  text-align:center;
  font-size:1.75rem; font-weight:700;
  letter-spacing:.38em; text-indent:.38em;
  font-variant-numeric:tabular-nums;
  padding:14px 10px;
}
body .otp-input::placeholder{ color:rgba(26,6,16,.2); letter-spacing:.38em; }
body .otp-resend{
  background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:.84rem; font-weight:700; color:var(--pink-text); text-decoration:underline;
}
body .otp-resend:disabled{ color:var(--ink-soft); text-decoration:none; cursor:default; }
body .otp-hint{
  font-size:.8rem; color:var(--ink-soft); line-height:1.55; margin-top:8px;
}

/* ── Product size picker (product.php) ───────────────────────────── */
body .size-picker{ margin: 4px 0 18px; }
body .size-picker-label{
  display:block; font-size:.78rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); margin-bottom:9px;
}
body .size-picker-required{ color:var(--pink-text); }
body .size-pill-row{ display:flex; flex-wrap:wrap; gap:9px; }
body .size-pill{
  min-width:46px; height:42px; padding:0 14px;
  border:1.5px solid var(--edge); border-radius:8px;
  background:var(--surface); color:var(--ink);
  font-family:inherit; font-size:.9rem; font-weight:600; cursor:pointer;
  transition:all .15s ease;
}
body .size-pill:hover{ border-color:var(--edge-strong); }
body .size-pill.active{
  background:var(--ink); border-color:var(--ink); color:#fff;
}
body .size-picker-error{
  color:var(--pink-solid); font-size:.82rem; font-weight:600; margin-top:8px;
}
@keyframes tsjSizeShake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}
body .size-picker-shake .size-pill-row{ animation: tsjSizeShake .35s ease; }