/*
Theme Name: KashishHenna
Theme URI: https://kashishhenna.com
Description: Lightweight custom WooCommerce theme for KashishHenna — premium mehndi products. Visually matched to Kashish Skill Academy. No page builder.
Author: Gaurav Sharma
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: kashishhenna
*/

/* ============================================================
   ⚠️ AFTER EVERY UPLOAD:
   1. LiteSpeed Cache -> Toolbox -> Purge All
   2. Ctrl+Shift+R in the browser
   3. Bump the Version: number above so browsers fetch fresh CSS
   Skipping this means debugging a site that no longer exists.
   ============================================================

   🔴 LIGHT-MOTION RULE — permanently banned in this stylesheet:
     filter: blur()          repaints a huge area every scroll frame
     backdrop-filter         re-blurs everything behind, every frame
     animated box-shadow     cannot be GPU-accelerated
     mask-image              expensive
     scroll event listeners  use IntersectionObserver instead
     infinite marquees / bobbing elements
   Only `opacity` and `transform` may be animated. Always pair with
   will-change, always honour prefers-reduced-motion.
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  --white:#FFFFFF;
  --sand:#FBF8F3;        /* page alt background */
  --sand-2:#F4EFE6;
  --line:#E9E2D6;        /* borders */
  --line-2:#D9D0C0;

  --brand:#0E6F5C;       /* deep green — primary */
  --brand-dk:#0A5245;    /* hover */
  --brand-bg:#E4F4F0;    /* tint */

  --accent:#9A7B18;      /* gold — discounts, ticks, highlights */
  --accent-bg:#FBF3DC;
  --gold:#C9A227;        /* brighter gold, for dark backgrounds */

  /* stain scale — how a henna stain deepens over three days.
     KashishHenna's signature device. Not used on the Academy. */
  --stain-1:#D9A93A;     /* day 1 — fresh, orange-gold */
  --stain-2:#A85B2A;     /* day 2 */
  --stain-3:#5C2317;     /* day 3 — deep maroon */

  --rose:#E11D48;   --rose-bg:#FEECF0;
  --violet:#6D3BEE; --violet-bg:#F0EBFE;

  --ink:#191418;         /* body text */
  --ink-2:#3D3540;
  --muted:#726A75;
  --muted-2:#9A9299;

  --display:'Outfit',system-ui,sans-serif;
  --body:'Plus Jakarta Sans',system-ui,sans-serif;

  --wrap:1180px;         /* max content width */
  --pad:96px;            /* section vertical padding */
  --r:16px;              /* card radius */
  --r-lg:22px;           /* large card radius */
  --sh:0 1px 2px rgba(25,20,24,.05);
  --sh-2:0 2px 8px rgba(25,20,24,.06);
}
/* ⚠️ The old orange #EE6C1F is retired. Deep green + gold is the locked palette. */

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--sand); color:var(--ink);
  font-family:var(--body); font-size:16px; font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-dk)}
button{font:inherit; cursor:pointer}
h1,h2,h3,h4{
  font-family:var(--display); font-weight:800;
  letter-spacing:-.03em; line-height:1.1;
  margin:0 0 .5em; color:var(--ink);
}
h1{font-size:clamp(2.35rem,5.2vw,4rem)}
h2{font-size:clamp(1.85rem,3.9vw,2.9rem)}
h3{font-size:1.24rem; font-weight:700; line-height:1.3}
h4{font-size:1rem; font-weight:700}
p{margin:0 0 1em}
ul{margin:0; padding:0; list-style:none}

/* visible keyboard focus — never remove this */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--brand); outline-offset:2px; border-radius:4px;
}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.sec{padding:var(--pad) 0; position:relative}
.sec-sm{padding:calc(var(--pad) * .6) 0}
.center{text-align:center}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* section heading block */
.eyebrow{
  display:inline-block; font-family:var(--body); font-size:.78rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin-bottom:12px;
}
.lede{font-size:1.06rem; color:var(--muted); max-width:620px}
.sec-head{margin-bottom:46px; max-width:680px}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
.sec-head.center .lede{margin-left:auto; margin-right:auto}
.sec-head h2{margin-bottom:14px}

/* ============================================================
   3. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-size:.94rem; font-weight:700;
  padding:15px 28px; border-radius:12px; cursor:pointer;
  border:2px solid var(--brand); background:var(--brand); color:#fff;
  transition:background-color .2s, transform .2s, box-shadow .2s;
}
.btn:hover{
  background:var(--brand-dk); color:#fff;
  transform:translate3d(0,-2px,0);
  box-shadow:0 6px 16px rgba(14,111,92,.25);
}
.btn-ghost{background:var(--white); border-color:var(--line-2); color:var(--ink)}
.btn-ghost:hover{background:var(--white); border-color:var(--brand); color:var(--brand); box-shadow:0 6px 16px rgba(25,20,24,.08)}
.btn-gold{background:var(--gold); border-color:var(--gold); color:#2A2100}
.btn-gold:hover{background:#B89120; border-color:#B89120; color:#2A2100; box-shadow:0 6px 16px rgba(201,162,39,.3)}
.btn-sm{padding:10px 20px; font-size:.86rem; border-radius:10px}
.btn-lg{padding:17px 34px; font-size:1rem; border-radius:14px}
.btn-block{width:100%}

/* ============================================================
   4. ANNOUNCE BAR
   ============================================================ */
.announce{background:var(--brand-dk); color:#fff; font-size:.86rem; padding:9px 0}
.announce .wrap{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap}
.ann-txt{color:#E4F4F0}
.ann-txt b{color:#fff}
.ann-cta{color:var(--gold); font-weight:700; white-space:nowrap}
.ann-cta:hover{color:#fff}

/* ============================================================
   5. HEADER / NAV / BURGER
   ============================================================ */
header{
  position:sticky; top:0; z-index:60;
  background:var(--white);              /* solid — NO backdrop-filter */
  border-bottom:1px solid var(--line);
}
header > .wrap{display:flex; align-items:center; gap:20px; height:74px}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0}
.brand-img{width:auto; height:46px; object-fit:contain}
.brand-txt{display:flex; flex-direction:column; line-height:1}
.brand-txt b{font-family:var(--display); font-weight:900; font-size:1.32rem; letter-spacing:-.03em; color:var(--brand)}
.brand-txt small{font-size:.66rem; color:var(--muted); letter-spacing:.02em; margin-top:3px}

header nav{display:flex; gap:4px; margin-left:auto}
header nav a{
  padding:9px 14px; border-radius:9px; font-size:.93rem; font-weight:600;
  color:var(--ink-2); transition:background-color .2s, color .2s;
}
header nav a:hover{background:var(--sand-2); color:var(--ink)}
header nav a.on{color:var(--brand); background:var(--brand-bg)}

.hdr-r{display:flex; align-items:center; gap:10px; margin-left:8px}

/* cart pill */
.cart-link{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:10px; border:1px solid var(--line-2);
  font-size:.88rem; font-weight:700; color:var(--ink);
  transition:border-color .2s, color .2s;
}
.cart-link:hover{border-color:var(--brand); color:var(--brand)}
.cart-link svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.cart-count{
  min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  background:var(--brand); color:#fff; font-size:.7rem; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}

/* burger */
.burger{
  display:none; width:42px; height:42px; border:1px solid var(--line-2);
  background:var(--white); border-radius:10px; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{
  display:block; width:18px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .2s, opacity .2s;
}
.burger.x span:nth-child(1){transform:translate3d(0,7px,0) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translate3d(0,-7px,0) rotate(-45deg)}

/* mobile dropdown */
.mobile-nav{
  display:none; border-top:1px solid var(--line); background:var(--white);
  padding:14px 22px 20px;
}
.mobile-nav.open{display:block}
.mobile-nav a{
  display:block; padding:13px 4px; font-size:1rem; font-weight:600;
  color:var(--ink-2); border-bottom:1px solid var(--line);
}
.mobile-nav a.on{color:var(--brand)}
.mobile-nav a:last-child{border-bottom:0}
.mobile-cta{margin-top:16px; width:100%; color:#fff}
.mobile-cta:hover{color:#fff}

/* ============================================================
   6. MEHNDI DECORATIVE LAYER
   Static SVG + CSS gradients. No filters. Only transform animation.
   ============================================================ */

/* --- white product surface (was .alt = sand on the Academy) --- */
.alt{background:var(--white)}

/* --- jaal (net) texture — now used on ONE band, not every other section --- */
.jaal{
  background-color:var(--sand-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='.7' opacity='.22'%3E%3Cpath d='M30 0c0 8-8 12-8 18s8 10 8 18-8 12-8 18 8 6 8 6'/%3E%3Cpath d='M0 30c8 0 12-8 18-8s10 8 18 8 12-8 18-8 6 8 6 8'/%3E%3Ccircle cx='30' cy='30' r='2.5'/%3E%3Ccircle cx='0' cy='0' r='1.6'/%3E%3Ccircle cx='60' cy='60' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- henna vine divider between sections --- */
.vine{display:block; width:100%; max-width:520px; margin:0 auto; height:34px; opacity:.85}
.vine path,.vine circle{fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round}
.vine .leaf{fill:var(--gold); opacity:.35; stroke:none}
.vine-wrap{padding:8px 0}

/* --- mandala watermark --- */
.mandala{
  position:absolute; width:420px; height:420px; pointer-events:none;
  opacity:.13; z-index:0; will-change:transform;
  transform-origin:50% 50%; backface-visibility:hidden;
}
.mandala path,.mandala circle{fill:none; stroke:var(--brand); stroke-width:1}
.mandala-cw { animation:mandalaCW  150s linear infinite; }
.mandala-ccw{ animation:mandalaCCW 190s linear infinite; }
/* any mandala without a direction class still turns clockwise */
.mandala:not(.mandala-cw):not(.mandala-ccw){ animation:mandalaCW 150s linear infinite; }
@keyframes mandalaCW { from{transform:rotate(0deg)}   to{transform:rotate(360deg)} }
@keyframes mandalaCCW{ from{transform:rotate(360deg)} to{transform:rotate(0deg)} }

.hero{position:relative; overflow:hidden}
.hero .m-tr{right:-130px; top:-120px}
.hero .m-bl{left:-170px; bottom:-190px; width:340px; height:340px; opacity:.09}
.final{position:relative; overflow:hidden}
.final .mandala{left:-140px; bottom:-150px; opacity:.16}
.final .mandala path,.final .mandala circle{stroke:#8FD6C4}
.band{position:relative; overflow:hidden}
.band .mandala{right:-150px; top:-160px; opacity:.14}
.band .mandala path,.band .mandala circle{stroke:#8FD6C4}

/* --- paisley corner ornament on cards --- */
.paisley{position:absolute; right:14px; top:14px; width:46px; height:46px; opacity:.14; pointer-events:none}
.paisley path{fill:none; stroke:var(--ic,var(--brand)); stroke-width:1.6}
.paisley circle{fill:var(--ic,var(--brand)); stroke:none}
.wcard,.gcard,.pcard{position:relative; overflow:hidden}

/* ============================================================
   7. HERO
   ============================================================ */

.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent-bg); color:#6E5810; border:1px solid #EFE0B8;
  border-radius:999px; padding:7px 15px; font-size:.83rem; font-weight:600;
  margin-bottom:20px;
}
.pill .dot{width:7px; height:7px; border-radius:50%; background:var(--accent)}
.hero h1{margin-bottom:18px}
.hero h1 .hl{color:var(--brand)}
.hero-sub{font-size:1.1rem; color:var(--muted); max-width:520px; margin-bottom:28px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px}
.hero-pts{display:flex; gap:20px; flex-wrap:wrap; font-size:.9rem; color:var(--ink-2)}
.hero-pts li{display:flex; align-items:center; gap:7px}
.tick{width:17px; height:17px; flex-shrink:0; fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

.hero-art{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--sand); box-shadow:var(--sh-2);
  aspect-ratio:4/3;
}
.hero-art img{width:100%; height:100%; object-fit:cover}
.hero-art .ph{
  display:flex; align-items:center; justify-content:center; height:100%;
  color:var(--muted-2); font-size:.9rem; text-align:center; padding:24px;
}

/* ============================================================
   8. TRUST STRIP
   ============================================================ */
.strip{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0}
.strip ul{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.strip li{display:flex; align-items:center; gap:11px; font-size:.9rem; font-weight:600; color:var(--ink-2)}
.strip .ico{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--ibg,var(--brand-bg));
}
.strip .ico svg{width:19px; height:19px; fill:none; stroke:var(--ic,var(--brand)); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}

/* ============================================================
   9. CATEGORY GRID
   ============================================================ */
.gcards{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.gcard{
  display:block; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:26px 22px 24px; box-shadow:var(--sh);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.gcard:hover{transform:translate3d(0,-3px,0); box-shadow:0 8px 22px rgba(25,20,24,.09); border-color:var(--line-2)}
.gcard .ico{
  width:46px; height:46px; border-radius:12px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--ibg,var(--brand-bg));
}
.gcard .ico svg{width:23px; height:23px; fill:none; stroke:var(--ic,var(--brand)); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.gcard h3{margin-bottom:6px; color:var(--ink)}
.gcard p{font-size:.9rem; color:var(--muted); margin:0}
.gcard .more{display:inline-block; margin-top:14px; font-size:.86rem; font-weight:700; color:var(--brand)}

/* ============================================================
   10. PRODUCT CARDS
   ============================================================ */
.pcards{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.pcard{
  display:flex; flex-direction:column; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--sh); transition:transform .2s, box-shadow .2s;
}
.pcard:hover{transform:translate3d(0,-3px,0); box-shadow:0 8px 22px rgba(25,20,24,.09)}
.pcard-img{position:relative; aspect-ratio:1/1; background:var(--sand-2); overflow:hidden}
.pcard-img img{width:100%; height:100%; object-fit:cover}
.pcard-img .ph{display:flex; align-items:center; justify-content:center; height:100%; color:var(--muted-2); font-size:.82rem}
.pcard-body{padding:16px 16px 18px; display:flex; flex-direction:column; flex:1}
.pcard-cat{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:6px}
.pcard h3{font-size:1rem; margin-bottom:8px}
.pcard h3 a{color:var(--ink)}
.pcard h3 a:hover{color:var(--brand)}
.pcard-price{margin-top:auto; padding-top:10px; display:flex; align-items:baseline; gap:9px}
.price{font-family:var(--display); font-weight:800; font-size:1.22rem; color:var(--ink); letter-spacing:-.02em}
.price-was{font-size:.88rem; color:var(--muted-2); text-decoration:line-through}
.price-off{font-size:.76rem; font-weight:700; color:var(--accent); background:var(--accent-bg); border-radius:6px; padding:2px 7px}
.pcard .btn{margin-top:14px}

/* stock states */
.badge{
  position:absolute; left:12px; top:12px; z-index:2;
  font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  border-radius:7px; padding:4px 9px;
}
.badge-out{background:var(--muted); color:#fff}
.badge-low{background:var(--rose-bg); color:var(--rose)}
.badge-new{background:var(--brand-bg); color:var(--brand)}

/* empty catalog state */
.empty{
  border:1px dashed var(--line-2); border-radius:var(--r); background:var(--sand);
  padding:44px 24px; text-align:center; color:var(--muted);
}
.empty h3{color:var(--ink-2); margin-bottom:8px}

/* ============================================================
   11. WHY-US CARDS
   ============================================================ */
.wcards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.wcard{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 24px 26px; box-shadow:var(--sh);
}
.wcard .ico{
  width:44px; height:44px; border-radius:12px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--ibg,var(--brand-bg));
}
.wcard .ico svg{width:22px; height:22px; fill:none; stroke:var(--ic,var(--brand)); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.wcard h3{margin-bottom:8px}
.wcard p{font-size:.93rem; color:var(--muted); margin:0}
.wcard.span2{grid-column:span 2}

/* ============================================================
   12. ACADEMY CROSS-LINK BAND
   ============================================================ */
.band{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dk) 100%);
  color:#fff; padding:56px 0;
}
.band .wrap{position:relative; z-index:1}
.band-grid{display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center}
.band h2{color:#fff; margin-bottom:10px; font-size:clamp(1.5rem,3vw,2.1rem)}
.band p{color:#C7E8DF; margin:0; max-width:620px}
.band .eyebrow{color:var(--gold)}

/* ============================================================
   13. FINAL CTA
   ============================================================ */
.final{background:#0B4B40; color:#fff; padding:84px 0; text-align:center}
.final .wrap{position:relative; z-index:1}
.final h2{color:#fff}
.final p{color:#C7E8DF; max-width:560px; margin:0 auto 30px}
.final .btn-ghost{background:transparent; border-color:rgba(255,255,255,.45); color:#fff}
.final .btn-ghost:hover{background:rgba(255,255,255,.1); border-color:#fff; color:#fff}
.final-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ============================================================
   14. FOOTER
   ============================================================ */
footer{background:var(--sand); border-top:1px solid var(--line); padding:60px 0 0}
.fgrid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px}
.fabout p{font-size:.92rem; color:var(--muted); margin:14px 0 18px; max-width:320px}
footer h4{font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-bottom:16px}
footer li{margin-bottom:10px}
footer li a{font-size:.92rem; color:var(--muted)}
footer li a:hover{color:var(--brand)}
.fcontact li{font-size:.92rem; color:var(--muted); line-height:1.55}
.f-academy{
  display:inline-flex; align-items:center; gap:7px; margin-top:6px;
  font-size:.9rem; font-weight:700; color:var(--brand);
}
.socials{display:flex; gap:10px}
.socials a{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; background:var(--white);
  transition:border-color .2s, transform .2s;
}
.socials a:hover{border-color:var(--brand); transform:translate3d(0,-2px,0)}
.socials svg{width:18px; height:18px; fill:none; stroke:var(--ink-2); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.socials a:hover svg{stroke:var(--brand)}
.fbottom{border-top:1px solid var(--line); margin-top:48px; padding:20px 0}
.fbottom .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.fbottom span,.fbottom a{font-size:.85rem; color:var(--muted)}
.fbottom nav{display:flex; gap:18px; flex-wrap:wrap}
.fbottom a:hover{color:var(--brand)}
.legal-ids{font-size:.82rem; color:var(--muted-2); margin-top:6px}

/* ============================================================
   15. WHATSAPP + STICKY MOBILE BAR
   ============================================================ */
.wa{
  position:fixed; right:18px; bottom:18px; z-index:70;
  width:54px; height:54px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
  transition:transform .2s;
}
.wa:hover{transform:translate3d(0,-3px,0)}
.wa svg{width:29px; height:29px; fill:#fff}

.mobar{display:none}

/* ============================================================
   16. WOOCOMMERCE OVERRIDES
   ============================================================ */
.woocommerce-page .wrap-woo{padding:48px 0 var(--pad)}
.woocommerce .woocommerce-breadcrumb{font-size:.85rem; color:var(--muted); margin-bottom:20px}
.woocommerce ul.products{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin:0}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none}
.woocommerce ul.products li.product{
  width:auto !important; margin:0 !important; float:none !important;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--sh); padding:0;
  transition:transform .2s, box-shadow .2s;
}
.woocommerce ul.products li.product:hover{transform:translate3d(0,-3px,0); box-shadow:0 8px 22px rgba(25,20,24,.09)}
.woocommerce ul.products li.product a img{margin:0; border-radius:0; aspect-ratio:1/1; object-fit:cover}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--display); font-size:1rem !important; font-weight:700;
  padding:14px 16px 4px; color:var(--ink);
}
.woocommerce ul.products li.product .price{
  font-family:var(--display); font-weight:800; font-size:1.1rem; color:var(--ink);
  padding:0 16px; display:block;
}
.woocommerce ul.products li.product .price del{color:var(--muted-2); font-weight:400; font-size:.86rem}
.woocommerce ul.products li.product .price ins{text-decoration:none; color:var(--ink)}
.woocommerce ul.products li.product .button{
  display:inline-flex !important; align-items:center; justify-content:center;
  margin:12px 16px 16px !important; padding:11px 18px !important;
  background:var(--brand) !important; color:#fff !important;
  border:2px solid var(--brand) !important; border-radius:10px !important;
  font-family:var(--body) !important; font-weight:700 !important; font-size:.86rem !important;
  transition:background-color .2s, transform .2s !important;
}
.woocommerce ul.products li.product .button:hover{background:var(--brand-dk) !important; transform:translate3d(0,-2px,0)}
.woocommerce span.onsale{
  background:var(--accent) !important; color:#fff !important;
  border-radius:7px !important; font-family:var(--body) !important;
  font-weight:700 !important; font-size:.72rem !important;
  min-height:0 !important; min-width:0 !important; line-height:1 !important;
  padding:6px 10px !important; top:12px !important; left:12px !important; right:auto !important;
  margin:0 !important;
}
.woocommerce .quantity input.qty,
.woocommerce input[type=text],.woocommerce input[type=email],
.woocommerce input[type=tel],.woocommerce textarea,.woocommerce select{
  border:1px solid var(--line-2); border-radius:10px; padding:11px 13px;
  font-family:var(--body); font-size:.94rem; color:var(--ink); background:var(--white);
}
.woocommerce #respond input#submit,.woocommerce a.button,
.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt{
  background:var(--brand); color:#fff; border-radius:12px;
  font-family:var(--body); font-weight:700; padding:14px 26px;
  transition:background-color .2s, transform .2s;
}
.woocommerce #respond input#submit:hover,.woocommerce a.button:hover,
.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  background:var(--brand-dk); color:#fff; transform:translate3d(0,-2px,0);
}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info{
  border-top-color:var(--brand); background:var(--brand-bg); color:var(--ink-2);
}
.woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before{color:var(--brand)}
.woocommerce .woocommerce-error{border-top-color:var(--rose); background:var(--rose-bg); color:var(--ink-2)}
.woocommerce div.product .product_title{font-family:var(--display); font-weight:800; letter-spacing:-.03em}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-family:var(--display); font-weight:800; color:var(--ink); font-size:1.6rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{border-radius:10px 10px 0 0; background:var(--sand-2); border-color:var(--line)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--white); border-bottom-color:var(--white)}
.woocommerce div.product .stock{color:var(--brand); font-weight:600}
.woocommerce div.product .out-of-stock{color:var(--rose); font-weight:700}

/* ============================================================
   17. ONE-TIME REVEAL (IntersectionObserver, opacity+transform only)
   No scroll listeners. Elements are visible by default if JS fails.
   ============================================================ */
.js-reveal .reveal{opacity:0; transform:translate3d(0,14px,0); will-change:opacity,transform}
.js-reveal .reveal.in{
  opacity:1; transform:translate3d(0,0,0);
  transition:opacity .5s ease, transform .5s ease;
}

/* ============================================================
   18. DEV PLACEHOLDER HIGHLIGHTER
   Toggle in Appearance > Customize > KashishHenna. Off = invisible.
   Anything still outlined is unreplaced placeholder content.
   ============================================================ */
.kh-dev .kh-todo{
  outline:2px dashed var(--rose); outline-offset:2px;
  background:var(--rose-bg); position:relative;
}
.kh-dev .kh-todo::after{
  content:'PLACEHOLDER'; position:absolute; right:0; top:0; z-index:5;
  background:var(--rose); color:#fff; font-size:.6rem; font-weight:700;
  letter-spacing:.08em; padding:2px 6px; border-radius:0 0 0 5px;
}

/* ============================================================
   18b. PROSE PAGES — legal pages, posts, 404
   ============================================================ */
.entry-wrap{padding:56px 0 var(--pad); max-width:820px}
.entry-wrap h1{margin-bottom:24px}
.entry h2{font-size:1.5rem; margin:36px 0 12px}
.entry h3{margin:28px 0 10px}
.entry p,.entry li{color:var(--ink-2)}
.entry ul,.entry ol{margin:0 0 1.2em 1.2em; list-style:disc}
.entry ol{list-style:decimal}
.entry li{margin-bottom:8px}
.entry a{text-decoration:underline}
.entry table{width:100%; border-collapse:collapse; margin:0 0 1.4em}
.entry th,.entry td{border:1px solid var(--line); padding:10px 12px; text-align:left; font-size:.94rem}
.entry th{background:var(--sand-2); font-weight:700}
.entry-meta{font-size:.86rem; color:var(--muted); margin-top:-12px; margin-bottom:24px}
.entry-teaser{padding:22px 0; border-bottom:1px solid var(--line)}
.entry-teaser h2{font-size:1.3rem; margin-bottom:6px}
.entry-teaser p{color:var(--muted); margin:0}
.entry-nav{padding-top:28px}
.entry-wrap .btn{margin:0 6px 10px}

/* ============================================================
   19. RESPONSIVE — 1020 / 720 / 640 / 380
   ============================================================ */
@media (max-width:1020px){
  :root{--pad:72px}
  header nav{display:none}
  .burger{display:flex}
  .hdr-cta{display:none}
  .hero-grid{grid-template-columns:1fr; gap:38px}
  .hero-sub{max-width:none}
  .strip ul{grid-template-columns:repeat(2,1fr)}
  .gcards{grid-template-columns:repeat(2,1fr)}
  .pcards,.woocommerce ul.products{grid-template-columns:repeat(3,1fr)}
  .wcards{grid-template-columns:repeat(2,1fr)}
  .wcard.span2{grid-column:span 2}
  .band-grid{grid-template-columns:1fr; gap:22px}
  .fgrid{grid-template-columns:1fr 1fr; gap:32px}
  .mandala{width:320px; height:320px}
}

@media (max-width:720px){
  :root{--pad:56px}
  header > .wrap{height:64px}
  .brand-img{height:38px}
  .sec-head{margin-bottom:36px}
  .hero{padding:48px 0 56px}
  .pcards,.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}
  .wcards{grid-template-columns:1fr}
  .wcard.span2{grid-column:span 1}
  .fgrid{grid-template-columns:1fr; gap:28px}
  .fbottom .wrap{justify-content:center; text-align:center}
  .announce{font-size:.78rem}
  .ann-cta{display:none}
  .final{padding:60px 0}

  /* sticky mobile bar + move WhatsApp above it */
  .mobar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:65;
    align-items:center; justify-content:space-between; gap:12px;
    background:var(--white); border-top:1px solid var(--line);
    padding:10px 16px; box-shadow:0 -2px 10px rgba(25,20,24,.07);
  }
  .mobar b{display:block; font-family:var(--display); font-size:.92rem; color:var(--ink)}
  .mobar small{font-size:.74rem; color:var(--muted)}
  .wa{bottom:80px; width:48px; height:48px}
  .wa svg{width:26px; height:26px}
  body{padding-bottom:66px}
}

@media (max-width:640px){
  .strip ul{grid-template-columns:1fr}
  .gcards{grid-template-columns:1fr}
  .hero-cta .btn{width:100%}
  .final-cta .btn{width:100%}
  .mandala{width:260px; height:260px}
}

@media (max-width:380px){
  .pcards,.woocommerce ul.products{grid-template-columns:1fr}
  .hero-pts{gap:10px}
  .mobar small{display:none}
}

/* ============================================================
   20. REDUCED MOTION — always honoured
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .mandala,.mandala-cw,.mandala-ccw{animation:none !important}
  .js-reveal .reveal{opacity:1 !important; transform:none !important}
}

/* ============================================================
   21. PRINT
   ============================================================ */
@media print{
  .announce,header,.wa,.mobar,footer,.mandala,.vine{display:none !important}
  body{padding-bottom:0}
}

/* ============================================================
   22. KASHISHHENNA LAYOUT LANGUAGE
   Deliberately NOT the Academy's shape. The Academy argues you
   into a decision, so it is text-first: centred headings and
   uniform card grids. This is a store, so objects lead:
   sand page / white product surface, asymmetric mosaic, product
   tiles above the fold, headings left-aligned.
   ============================================================ */

/* --- 22a. STAIN SCALE — the signature device -------------------
   A henna stain darkens for two to three days after application.
   Nothing else in this niche is built around that. Used as the
   section divider, and again on product pages. */
.stain{max-width:560px; margin:0 auto; padding:6px 0}
.stain-bar{
  height:9px; border-radius:999px;
  background:linear-gradient(90deg,var(--stain-1) 0%,var(--stain-2) 55%,var(--stain-3) 100%);
}
.stain-labels{
  display:flex; justify-content:space-between; margin-top:9px;
  font-family:var(--body); font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
}
.stain-note{text-align:center; font-size:.82rem; color:var(--muted); margin:12px 0 0}
.stain-wrap{padding:14px 0}
.stain-dark .stain-labels{color:rgba(255,255,255,.55)}
.stain-dark .stain-note{color:#C7E8DF}

/* --- 22b. HERO — copy left, live product mosaic right ---------- */
.hero{position:relative; overflow:hidden; padding:70px 0 64px; background:var(--sand)}
.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:1fr 1.02fr; gap:56px; align-items:center}
.hero h1{margin-bottom:18px}
.hero h1 .hl{color:var(--brand)}
.hero-sub{font-size:1.08rem; color:var(--muted); max-width:480px; margin-bottom:26px}

/* three-tile product mosaic — one tall, two stacked */
.hero-mosaic{display:grid; grid-template-columns:1.25fr 1fr; grid-template-rows:1fr 1fr; gap:14px; aspect-ratio:1/.92}
.hm-tile{
  position:relative; display:block; overflow:hidden; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2);
  transition:transform .2s, box-shadow .2s;
}
.hm-tile:hover{transform:translate3d(0,-3px,0); box-shadow:0 10px 26px rgba(25,20,24,.11)}
.hm-tile:first-child{grid-row:span 2}
.hm-tile img{width:100%; height:100%; object-fit:cover}
.hm-tile .ph{display:flex; align-items:center; justify-content:center; height:100%; min-height:130px; color:var(--muted-2); font-size:.8rem; text-align:center; padding:16px}
.hm-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:var(--white); border-top:1px solid var(--line);
  padding:9px 12px; font-size:.78rem; font-weight:700; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.hm-cap span{color:var(--brand); font-family:var(--display); font-weight:800}

/* --- 22c. CATEGORY RAIL — sits under the hero, no big heading -- */
.rail{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0}
.rail-list{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.rail-item{
  display:flex; align-items:center; gap:12px; padding:13px 15px;
  border:1px solid var(--line); border-radius:12px; background:var(--white);
  transition:border-color .2s, transform .2s;
}
.rail-item:hover{border-color:var(--brand); transform:translate3d(0,-2px,0)}
.rail-item .ico{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:var(--ibg,var(--brand-bg));
}
.rail-item .ico svg{width:19px; height:19px; fill:none; stroke:var(--ic,var(--brand)); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rail-item b{display:block; font-family:var(--display); font-size:.94rem; font-weight:700; color:var(--ink); line-height:1.2}
.rail-item small{font-size:.75rem; color:var(--muted)}

/* --- 22d. PRODUCT MOSAIC — asymmetric, not a uniform grid ------ */
.mosaic{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.mosaic .pcard:first-child{grid-column:span 2; grid-row:span 2}
.mosaic .pcard:first-child .pcard-img{aspect-ratio:auto; height:100%; min-height:300px}
.mosaic .pcard:first-child h3{font-size:1.4rem}
.mosaic .pcard:first-child .price{font-size:1.5rem}
.sec-head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; flex-wrap:wrap}
.sec-head-row .sec-head{margin-bottom:0}

/* --- 22e. HOW WE WORK — a thin row, not a five-card grid ------- */
.howrow{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--white)}
.howrow > div{padding:26px 24px; border-right:1px solid var(--line)}
.howrow > div:last-child{border-right:0}
.howrow .n{
  font-family:var(--display); font-size:.74rem; font-weight:800; letter-spacing:.14em;
  color:var(--accent); display:block; margin-bottom:10px;
}
.howrow h3{font-size:1.05rem; margin-bottom:7px}
.howrow p{font-size:.88rem; color:var(--muted); margin:0}

/* --- 22f. ACADEMY BAND — quieter, textured, not a hero repeat -- */
.band{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dk) 100%); color:#fff; padding:56px 0}

/* --- 22g. ABOUT PAGE ------------------------------------------- */
.page-hero{position:relative; overflow:hidden; background:var(--sand); padding:64px 0 56px}
.page-hero .wrap{position:relative; z-index:1}
.page-hero h1{max-width:760px}
.page-hero .lede{font-size:1.12rem; margin-top:6px}
.prose{max-width:720px}
.prose h2{font-size:1.7rem; margin:0 0 14px}
.prose p{color:var(--ink-2); margin-bottom:1.1em}
.split{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:start}
.founders{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.founder{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px; box-shadow:var(--sh)}
.founder .role{font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; display:block}
.founder h3{font-size:1.25rem; margin-bottom:8px}
.founder p{font-size:.93rem; color:var(--muted); margin:0}
.factlist{border-top:1px solid var(--line)}
.factlist div{display:flex; gap:20px; padding:16px 0; border-bottom:1px solid var(--line)}
.factlist dt,.factlist b{flex:0 0 170px; font-family:var(--display); font-weight:700; font-size:.94rem; color:var(--ink)}
.factlist span{color:var(--muted); font-size:.94rem}

/* --- 22h. CONTACT PAGE — CSS-only tabs, zero JavaScript --------
   Radio inputs drive the panels. Nothing here can break. */
.contact-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:start}
.tabs input[type=radio]{position:absolute; opacity:0; width:0; height:0}
.tablist{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px}
.tablist label{
  padding:10px 18px; border-radius:999px; border:1px solid var(--line-2);
  background:var(--white); font-size:.88rem; font-weight:700; color:var(--ink-2); cursor:pointer;
  transition:border-color .2s, background-color .2s, color .2s;
}
.tablist label:hover{border-color:var(--brand); color:var(--brand)}
.tabs input[type=radio]:focus-visible + label{outline:3px solid var(--brand); outline-offset:2px}
.panel{display:none}
#tab-order:checked   ~ .tablist label[for=tab-order],
#tab-product:checked ~ .tablist label[for=tab-product],
#tab-bulk:checked    ~ .tablist label[for=tab-bulk]{background:var(--brand); border-color:var(--brand); color:#fff}
#tab-order:checked   ~ .panels #panel-order,
#tab-product:checked ~ .panels #panel-product,
#tab-bulk:checked    ~ .panels #panel-bulk{display:block}

.field{margin-bottom:16px}
.field label{display:block; font-size:.85rem; font-weight:700; color:var(--ink-2); margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%; border:1px solid var(--line-2); border-radius:11px; padding:13px 14px;
  font-family:var(--body); font-size:.95rem; color:var(--ink); background:var(--white);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand); outline:none; box-shadow:0 0 0 3px var(--brand-bg)}
.field textarea{min-height:130px; resize:vertical}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.hp{position:absolute!important; left:-9999px!important}
.formnote{font-size:.82rem; color:var(--muted); margin-top:12px}
.alertbox{border-radius:12px; padding:16px 18px; margin-bottom:24px; font-size:.94rem}
.alert-ok{background:var(--brand-bg); border:1px solid #B9E2D8; color:#0A5245}
.alert-bad{background:var(--rose-bg); border:1px solid #F7C9D4; color:#9F1239}
.cbox{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; box-shadow:var(--sh); margin-bottom:18px}
.cbox h3{font-size:1.05rem; margin-bottom:12px}
.cbox li{display:flex; gap:12px; padding:9px 0; font-size:.93rem; color:var(--ink-2)}
.cbox li svg{width:18px; height:18px; flex-shrink:0; margin-top:3px; fill:none; stroke:var(--brand); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.cbox a{color:var(--ink-2)}
.cbox a:hover{color:var(--brand)}

/* --- 22i. SHOP ARCHIVE ----------------------------------------- */
.shop-head{background:var(--sand); padding:46px 0 34px; border-bottom:1px solid var(--line)}
.filters{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:22px}
.chip{
  padding:9px 16px; border-radius:999px; border:1px solid var(--line-2); background:var(--white);
  font-size:.86rem; font-weight:700; color:var(--ink-2);
  transition:border-color .2s, background-color .2s, color .2s;
}
.chip:hover{border-color:var(--brand); color:var(--brand)}
.chip.on{background:var(--brand); border-color:var(--brand); color:#fff}
.chip .c{opacity:.6; font-weight:400; margin-left:5px}
.shop-body{padding:44px 0 var(--pad)}
.shop-bar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap}
.shop-count{font-size:.9rem; color:var(--muted)}
.shop-bar select{border:1px solid var(--line-2); border-radius:10px; padding:9px 13px; font-family:var(--body); font-size:.88rem; background:var(--white); color:var(--ink)}
.pager{display:flex; gap:8px; justify-content:center; margin-top:44px; flex-wrap:wrap}
.pager .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 12px;
  border:1px solid var(--line-2); border-radius:11px; background:var(--white);
  font-weight:700; font-size:.9rem; color:var(--ink-2);
}
.pager .page-numbers.current{background:var(--brand); border-color:var(--brand); color:#fff}
.pager a.page-numbers:hover{border-color:var(--brand); color:var(--brand)}

/* --- 22j. RESPONSIVE for the new layout ------------------------ */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr; gap:36px}
  .hero-sub{max-width:none}
  .hero-mosaic{aspect-ratio:1/.7}
  .rail-list{grid-template-columns:repeat(2,1fr)}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .mosaic .pcard:first-child{grid-column:span 2; grid-row:span 1}
  .mosaic .pcard:first-child .pcard-img{min-height:240px}
  .howrow{grid-template-columns:repeat(2,1fr)}
  .howrow > div:nth-child(2){border-right:0}
  .howrow > div:nth-child(1),.howrow > div:nth-child(2){border-bottom:1px solid var(--line)}
  .split,.contact-grid{grid-template-columns:1fr; gap:34px}
}
@media (max-width:720px){
  .hero{padding:44px 0 48px}
  .hero-mosaic{grid-template-columns:1fr 1fr; grid-template-rows:auto auto; aspect-ratio:auto}
  .hm-tile:first-child{grid-row:span 1; grid-column:span 2}
  .rail{padding:14px 0}
  .rail-list{grid-template-columns:1fr}
  .howrow{grid-template-columns:1fr}
  .howrow > div{border-right:0; border-bottom:1px solid var(--line)}
  .howrow > div:last-child{border-bottom:0}
  .founders{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .stain-labels{font-size:.62rem}
}
@media (max-width:640px){
  .mosaic{grid-template-columns:1fr}
  .mosaic .pcard:first-child{grid-column:span 1}
}