/* المها للعناية — مستخرج من البروتوتايب */
:root{
  color-scheme: light;
  --rose-900:#6B0E4C;
  --rose-800:#8A1362;
  --rose-700:#B81C74;
  --rose-600:#D6297E;
  --rose-500:#F0429A;
  --rose-400:#FF6FB5;
  --rose-100:#FDE5F1;
  --rose-50:#FFF3F9;
  --lilac-100:#F4ECFB;
  --gold-600:#C79A4B;
  --gold-500:#DDB05C;
  --gold-100:#F8EEDA;
  --cream:#FFF8F6;
  --ink-900:#33212C;
  --ink-700:#634E5C;
  --ink-500:#94808C;
  --ink-300:#D8C4CF;
  --line:#F3DFEA;
  --surface:#FFFFFF;
  --surface-alt:#FDF4F8;
  --success-700:#1E7A4C; --success-100:#E3F4EA;
  --warn-700:#B5691E; --warn-100:#FBEEE3;
  --danger-700:#D6296B; --danger-100:#FCE6EF;
  --whatsapp:#25D366;
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(107,14,76,.08), 0 1px 1px rgba(107,14,76,.05);
  --shadow-md:0 16px 36px rgba(184,28,116,.16);
  --shadow-glow:0 10px 26px rgba(214,41,126,.35);
  --font-head:'El Messiri','Tajawal',sans-serif;
  --font-accent:'Aguafina Script','El Messiri',cursive;
  --font-body:'Tajawal','Segoe UI',sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{overflow-x:clip;}
body{background:linear-gradient(180deg,#FFF6FA 0%, var(--cream) 340px); color:var(--ink-900); font-family:var(--font-body); font-size:14.5px; line-height:1.7; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--font-head); margin:0; text-wrap:balance;}
img{max-width:100%;}
a{color:inherit; text-decoration:none;}
[hidden]{display:none!important;}
.tabular{font-variant-numeric:tabular-nums;}
::selection{background:var(--rose-100); color:var(--rose-900);}
button{font-family:inherit; cursor:pointer;}
.accent-script{font-family:var(--font-accent); font-weight:400; color:var(--rose-500); font-size:1.5em; line-height:1; display:inline-block;}
.sparkle{position:absolute; color:var(--gold-500); opacity:.85; pointer-events:none;}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg));} 50%{transform:translateY(-8px) rotate(var(--r,0deg));}}
.sparkle{animation:floaty 4.5s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){.sparkle{animation:none;} .marquee-track{animation:none!important;}}

/* ---------- Layout helpers ---------- */
.wrap{max-width:1240px; margin:0 auto; padding:0 28px;}
@media (max-width:640px){.wrap{padding:0 18px;}}
.screen{display:none;}
.screen.active{display:block;}
.grid{display:grid; gap:20px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.cat-grid{grid-template-columns:repeat(6,1fr);}
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} .cat-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;} .cat-grid{grid-template-columns:repeat(2,1fr);}}
.section{padding:56px 0;}
.section-tight{padding:34px 0;}
@media (max-width:640px){.section{padding:38px 0;} .section-tight{padding:24px 0;}}
.eyebrow{font-size:11.5px; font-weight:800; letter-spacing:.08em; color:var(--rose-700); text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:8px;}
.eyebrow::before{content:'✿'; font-size:13px; color:var(--gold-600); text-transform:none; letter-spacing:0;}
.section-head{max-width:640px; margin-bottom:30px;}
.section-head h2{font-size:28px; font-weight:700; color:var(--ink-900);}
.section-head p{margin:8px 0 0; color:var(--ink-500); font-size:14px;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 26px; border-radius:999px; font-size:13.5px; font-weight:800; border:1.5px solid transparent; white-space:nowrap; transition:filter .15s ease, transform .05s ease, background .15s ease;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:linear-gradient(135deg,var(--rose-600),var(--rose-700)); color:#fff; box-shadow:var(--shadow-glow);}
.btn-primary:hover{background:linear-gradient(135deg,var(--rose-500),var(--rose-600));}
.btn-outline{background:transparent; color:var(--rose-700); border-color:var(--rose-700);}
.btn-outline:hover{background:var(--rose-50);}
.btn-dark{background:var(--ink-900); color:#fff;}
.btn-gold{background:linear-gradient(135deg,var(--gold-500),var(--gold-600)); color:#fff; box-shadow:0 10px 24px rgba(199,154,75,.35);}
.btn-whatsapp{background:var(--whatsapp); color:#fff;}
.btn-ghost{background:transparent; color:var(--ink-700); border-color:var(--line);}
.btn-sm{padding:9px 16px; font-size:12.5px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}
.icon-btn{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface-alt); border:1px solid var(--line); position:relative; color:var(--ink-700);}
.icon-btn:hover{background:var(--rose-50); color:var(--rose-700);}
.cart-count{position:absolute; top:-3px; left:-3px; width:17px; height:17px; border-radius:50%; background:var(--rose-700); color:#fff; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid var(--surface);}

/* ---------- Top announcement bar ---------- */
.announce{background:linear-gradient(90deg,var(--rose-900),var(--rose-700),var(--rose-900)); color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.01em; overflow:hidden; white-space:nowrap; position:relative;}
.announce b{color:var(--gold-100);}
.marquee-track{display:inline-flex; align-items:center; gap:48px; padding:10px 0; animation:marquee 22s linear infinite;}
.marquee-track span{display:inline-flex; align-items:center; gap:48px;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
[dir="rtl"] .marquee-track{animation-name:marquee-rtl;}
@keyframes marquee-rtl{from{transform:translateX(0);} to{transform:translateX(50%);}}

/* ---------- Header ---------- */
header.site{position:sticky; top:0; z-index:20; background:rgba(251,246,241,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0;}
.logo{display:flex; align-items:center; gap:10px;}
.logo .mark{width:42px; height:42px; border-radius:50%; background:linear-gradient(150deg,var(--rose-600),var(--rose-900)); display:flex; align-items:center; justify-content:center; flex:0 0 42px; box-shadow:var(--shadow-sm);}
.logo .word{font-family:var(--font-head); font-weight:700; font-size:19px; color:var(--rose-900); line-height:1.1;}
.logo .word span{display:block; font-family:var(--font-body); font-weight:600; font-size:10px; letter-spacing:.14em; color:var(--ink-500); text-transform:uppercase; margin-top:2px;}
.main-nav{display:flex; align-items:center; gap:30px;}
.main-nav button{background:none; border:0; font-size:13.5px; font-weight:700; color:var(--ink-700); padding:6px 2px; border-bottom:2px solid transparent;}
.main-nav button:hover, .main-nav button.active{color:var(--rose-700); border-color:var(--gold-600);}
.header-actions{display:flex; align-items:center; gap:10px;}
.hamburger{display:none;}
@media (max-width:900px){.main-nav{display:none;} .hamburger{display:flex;}}

/* ---------- Hero ---------- */
.hero{padding:52px 0 60px; overflow:hidden; position:relative; background:radial-gradient(120% 100% at 85% 0%, var(--rose-100) 0%, transparent 55%), radial-gradient(90% 90% at 5% 100%, var(--lilac-100) 0%, transparent 50%);}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; position:relative; z-index:1;}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.hero-tagline{font-family:var(--font-accent); color:var(--rose-500); font-size:26px; display:block; margin-bottom:2px; transform:rotate(-2deg); transform-origin:center;}
.hero h1{font-size:46px; font-weight:700; line-height:1.22; color:var(--ink-900);}
@media (max-width:640px){.hero h1{font-size:32px;}}
.hero h1 em{font-style:normal; color:var(--rose-700); position:relative;}
.hero h1 em svg{position:absolute; inset-inline-start:0; bottom:-14px; width:100%; height:14px; color:var(--gold-500);}
.hero p.lead{margin:16px 0 26px; color:var(--ink-500); font-size:15.5px; max-width:46ch;}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap;}
.trust-row{display:flex; gap:22px; margin-top:30px; flex-wrap:wrap;}
.trust-row .t{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--ink-700);}
.trust-row .t svg{color:var(--rose-700); flex:0 0 auto;}

.hero-visual{position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.hv-blob{position:absolute; inset:6%; border-radius:44% 56% 60% 40%/50% 45% 55% 50%; background:linear-gradient(150deg,var(--rose-100),var(--gold-100)); }
.hv-jars{position:relative; display:flex; align-items:flex-end; gap:16px; z-index:1;}
.hv-sticker{position:absolute; top:6%; inset-inline-end:2%; background:linear-gradient(135deg,var(--rose-600),var(--rose-500)); color:#fff; width:96px; height:96px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-weight:800; font-size:12px; line-height:1.25; transform:rotate(10deg); box-shadow:var(--shadow-glow); z-index:2; border:3px solid #fff;}
.hv-sticker b{font-size:20px; display:block;}
.jar{border-radius:20px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); position:relative;}
.jar svg{width:46%; height:46%;}
.jar .badge-pct{position:absolute; top:-12px; left:-12px; background:var(--gold-600); color:#fff; font-size:11px; font-weight:800; padding:6px 10px; border-radius:999px; box-shadow:var(--shadow-sm);}

/* ---------- Category tiles ---------- */
.cat-tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; transition:box-shadow .15s ease, transform .15s ease; cursor:pointer;}
.cat-tile:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.cat-tile .ci{width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.cat-tile .cn{font-weight:800; font-size:13.5px;}
.cat-tile .cc{font-size:11px; color:var(--ink-500);}

/* ---------- Product card ---------- */
.pcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .15s ease, transform .15s ease; position:relative;}
.pcard:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.pcard .pv{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; position:relative;}
.pcard .pv svg{width:38%; height:38%;}
.pcard .tag{position:absolute; top:12px; inset-inline-start:12px; font-size:10.5px; font-weight:800; padding:4px 10px; border-radius:999px; z-index:2;}
.tag-best{background:var(--gold-600); color:#fff;}
.tag-new{background:var(--success-700); color:#fff;}
.tag-sale{background:var(--danger-700); color:#fff;}
.pcard .fav{position:absolute; top:10px; inset-inline-end:10px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.85); display:flex; align-items:center; justify-content:center; color:var(--rose-700); z-index:2;}
.pcard .pbody{padding:14px 16px 18px; display:flex; flex-direction:column; gap:6px; flex:1;}
.pcard .pcat{font-size:10.5px; color:var(--ink-500); font-weight:700;}
.pcard .pname{font-size:13.5px; font-weight:800; line-height:1.4; min-height:38px;}
.pcard .stars{display:flex; align-items:center; gap:4px; font-size:11px; color:var(--gold-600); font-weight:700;}
.pcard .stars .n{color:var(--ink-500); font-weight:600;}
.pcard .pfoot{display:flex; align-items:center; justify-content:space-between; margin-top:6px;}
.price{display:flex; align-items:baseline; gap:6px;}
.price .now{font-weight:800; font-size:15.5px; color:var(--rose-900);}
.price .was{font-size:12px; color:var(--ink-300); text-decoration:line-through;}
.add-btn{width:36px; height:36px; border-radius:50%; background:var(--rose-100); color:var(--rose-700); display:flex; align-items:center; justify-content:center; border:0; flex:0 0 36px;}
.add-btn:hover{background:var(--rose-700); color:#fff;}

/* ---------- Filters / breadcrumb ---------- */
.crumb{font-size:12px; color:var(--ink-500); margin-bottom:14px;}
.crumb b{color:var(--ink-900);}
.shop-layout{display:grid; grid-template-columns:230px 1fr; gap:30px; align-items:start;}
@media (max-width:860px){.shop-layout{grid-template-columns:1fr;}}
.filter-box{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px;}
.filter-box h4{font-size:12.5px; font-weight:800; margin-bottom:12px; display:flex; justify-content:space-between;}
.filter-box + .filter-box{margin-top:16px;}
.check-row{display:flex; align-items:center; gap:8px; font-size:12.5px; padding:5px 0; color:var(--ink-700);}
.range-track{height:5px; border-radius:3px; background:var(--line); position:relative; margin:14px 0 6px;}
.range-track .fill{position:absolute; inset-inline-start:15%; inset-inline-end:25%; top:0; bottom:0; background:var(--rose-600); border-radius:3px;}
.range-track .knob{position:absolute; top:50%; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--rose-700); transform:translateY(-50%);}
.sort-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px;}
.chip{padding:7px 15px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:12px; font-weight:700; cursor:pointer;}
.chip.active{background:var(--ink-900); color:#fff; border-color:var(--ink-900);}

/* ---------- Product detail ---------- */
.pd-grid{display:grid; grid-template-columns:.9fr 1fr; gap:44px;}
@media (max-width:860px){.pd-grid{grid-template-columns:1fr;}}
.pd-gallery-main{aspect-ratio:1/1; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.pd-gallery-main svg{width:32%; height:32%;}
.pd-thumbs{display:flex; gap:10px;}
.pd-thumb{width:64px; height:64px; border-radius:12px; border:2px solid transparent; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.pd-thumb.active{border-color:var(--rose-700);}
.pd-thumb svg{width:50%; height:50%;}
.variant-row{display:flex; gap:8px; flex-wrap:wrap;}
.variant-chip{padding:9px 16px; border-radius:10px; border:1.5px solid var(--line); font-size:12.5px; font-weight:700; cursor:pointer; background:var(--surface);}
.variant-chip.active{border-color:var(--rose-700); background:var(--rose-50); color:var(--rose-700);}
.pd-buy-row{display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap;}
.qty-stepper{display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:10px; overflow:hidden;}
.qty-stepper button{width:36px; height:38px; background:var(--surface-alt); border:0; font-size:16px; font-weight:700; color:var(--ink-700);}
.qty-stepper .v{width:42px; text-align:center; font-weight:800;}
.pd-trust{display:flex; flex-direction:column; gap:10px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line);}
.pd-trust .t{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-700); font-weight:600;}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin:44px 0 22px;}
.tab-btn{padding:12px 18px; font-size:13px; font-weight:800; color:var(--ink-500); border-bottom:2.5px solid transparent; background:none; border-top:0; border-inline:0;}
.tab-btn.active{color:var(--rose-700); border-color:var(--rose-700);}
.ingredient-pill{display:inline-flex; align-items:center; gap:6px; background:var(--surface-alt); border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:12px; font-weight:700; margin:0 5px 8px 0;}
.review-card{border-bottom:1px solid var(--line); padding:18px 0;}
.review-card:last-child{border-bottom:0;}
.review-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.reviewer{display:flex; align-items:center; gap:10px;}
.reviewer .av{width:34px; height:34px; border-radius:50%; background:var(--rose-100); color:var(--rose-700); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px;}

/* ---------- Testimonial / story cards ---------- */
.story-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; text-align:center;}
.story-card .ic{width:52px; height:52px; border-radius:50%; background:var(--rose-100); color:var(--rose-700); display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}
.story-card h4{font-size:14.5px; margin-bottom:6px;}
.story-card p{font-size:12.5px; color:var(--ink-500); margin:0;}

.tcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 22px 22px; position:relative; overflow:hidden;}
.tcard::before{content:'"'; position:absolute; top:-18px; inset-inline-end:14px; font-family:Georgia,serif; font-size:90px; color:var(--rose-100); font-weight:800; line-height:1; z-index:0;}
.tcard .stars{color:var(--gold-600); font-size:13px; margin-bottom:10px; position:relative;}
.tcard p{font-size:13.5px; color:var(--ink-700); margin:0 0 14px; position:relative;}
.tcard .who{position:relative;}
.tcard .who{display:flex; align-items:center; gap:10px;}
.tcard .who .av{width:36px; height:36px; border-radius:50%; background:var(--rose-100); color:var(--rose-700); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12.5px;}
.tcard .who .nm{font-size:12.5px; font-weight:800;}
.tcard .who .lo{font-size:11px; color:var(--ink-500);}

/* ---------- Banner ---------- */
.promo-banner{background:linear-gradient(120deg,var(--rose-900),var(--rose-600)); border-radius:var(--radius-lg); padding:40px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; position:relative; overflow:hidden;}
.promo-banner::after{content:''; position:absolute; inset-inline-end:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.1);}
.promo-code{display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.14); border:1.5px dashed rgba(255,255,255,.5); padding:9px 18px; border-radius:999px; font-weight:800; letter-spacing:.06em; margin-top:12px;}
.promo-ribbon{position:absolute; top:16px; inset-inline-end:-38px; background:var(--gold-500); color:var(--rose-900); font-size:11px; font-weight:800; padding:5px 46px; transform:rotate(35deg); box-shadow:0 4px 10px rgba(0,0,0,.15); z-index:2;}
.countdown{display:flex; gap:8px; margin-top:16px;}
.countdown .box{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); border-radius:10px; padding:8px 12px; text-align:center; min-width:52px;}
.countdown .box b{display:block; font-size:18px; font-weight:800;}
.countdown .box span{font-size:9.5px; color:rgba(255,255,255,.75);}

/* ---------- Instagram strip ---------- */
.ig-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:10px;}
@media (max-width:860px){.ig-grid{grid-template-columns:repeat(3,1fr);}}
.ig-tile{aspect-ratio:1/1; border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.ig-tile .icn{position:absolute; bottom:8px; inset-inline-end:8px; color:#fff; opacity:.9;}

/* ---------- Footer ---------- */
footer.site{background:linear-gradient(160deg,var(--rose-900),#4A0A38); color:rgba(255,255,255,.82); margin-top:20px;}
.footer-top{padding:48px 0; border-bottom:1px solid rgba(255,255,255,.12);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px;}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h5{color:#fff; font-size:13px; font-weight:800; margin-bottom:14px;}
.footer-grid a, .footer-grid p{display:block; font-size:12.5px; color:rgba(255,255,255,.7); margin-bottom:9px;}
.footer-bottom{padding:18px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:11.5px; color:rgba(255,255,255,.55);}
.newsletter-box{display:flex; gap:8px; margin-top:12px;}
.newsletter-box input{flex:1; min-width:0; padding:11px 14px; border-radius:10px; border:0; font-family:inherit; font-size:12.5px;}
.pay-icons{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
.pay-chip{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:6px; padding:5px 9px; font-size:10.5px; font-weight:700; color:#fff;}
.credit-badge{display:inline-flex; align-items:center; gap:7px; font-size:11px; color:rgba(255,255,255,.55);}
.credit-badge img{width:16px; height:16px; padding:3px; border-radius:50%; background:#fff;}

/* ---------- Cart drawer / page ---------- */
.cart-row{display:flex; flex-wrap:wrap; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); align-items:center;}
.cart-row-main{display:flex; align-items:center; gap:14px; flex:1 1 200px; min-width:0;}
.cart-row-actions{display:flex; align-items:center; gap:14px; margin-inline-start:auto;}
.cart-row .cv{width:64px; height:64px; border-radius:12px; flex:0 0 64px; display:flex; align-items:center; justify-content:center;}
.cart-row .cv svg{width:50%; height:50%;}
.cart-row .info{flex:1; min-width:0;}
.cart-row .nm{overflow-wrap:break-word; font-weight:800; font-size:13px;}
.cart-row .vr{font-size:11.5px; color:var(--ink-500); margin-top:2px;}
.summary-box{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px;}
.summary-line{display:flex; justify-content:space-between; font-size:13px; color:var(--ink-700); padding:7px 0;}
.summary-line.total{font-weight:800; font-size:16px; color:var(--ink-900); border-top:1px solid var(--line); margin-top:8px; padding-top:14px;}
.summary-line .discount{color:var(--success-700); font-weight:700;}
.promo-input{display:flex; gap:8px; margin:14px 0;}
.promo-input input{flex:1; min-width:0; padding:10px 12px; border-radius:9px; border:1px solid var(--line); font-family:inherit; font-size:12.5px;}

/* ---------- Checkout stepper ---------- */
.co-stepper{display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:34px;}
.co-step{display:flex; align-items:center; gap:8px;}
.co-step .c{width:30px; height:30px; border-radius:50%; background:var(--surface-alt); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; color:var(--ink-500);}
.co-step.done .c{background:var(--success-700); border-color:var(--success-700); color:#fff;}
.co-step.current .c{background:var(--rose-700); border-color:var(--rose-700); color:#fff;}
.co-step .l{font-size:12.5px; font-weight:700; color:var(--ink-500);}
.co-step.current .l, .co-step.done .l{color:var(--ink-900);}
.co-line{width:46px; height:1.5px; background:var(--line); margin:0 8px;}
.pay-option{display:flex; align-items:center; gap:12px; border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px; cursor:pointer;}
.pay-option.active{border-color:var(--rose-700); background:var(--rose-50);}

/* ---------- Note ---------- */
.note{border-radius:var(--radius-md); padding:13px 16px; font-size:12.5px; display:flex; gap:10px; align-items:flex-start; border:1px solid;}
.note-info{background:var(--rose-50); border-color:var(--rose-100); color:var(--rose-700);}

#toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--ink-900); color:#fff; padding:13px 22px; border-radius:12px; font-size:13px; font-weight:700; box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:80; display:flex; align-items:center; gap:8px; max-width:90vw; text-align:center;}
#toast.show{opacity:1;}
#toast .dot{width:8px; height:8px; border-radius:50%; background:var(--success-700); flex:0 0 8px;}

.mobile-drawer{position:fixed; inset:0; z-index:60; display:none;}
.mobile-drawer.open{display:block;}
.md-backdrop{position:absolute; inset:0; background:rgba(43,32,36,.5);}
.md-panel{position:absolute; top:0; bottom:0; inset-inline-start:0; width:78%; max-width:300px; background:var(--surface); padding:22px 18px; overflow-y:auto;}
.md-panel button.item{display:block; width:100%; text-align:right; background:none; border:0; padding:13px 4px; font-size:14.5px; font-weight:700; border-bottom:1px solid var(--line);}

/* ===================== Additions for the production store ===================== */
.skip-link{position:absolute; top:-80px; right:8px; background:var(--ink-900); color:#fff; padding:10px 16px; border-radius:8px; z-index:100;}
.skip-link:focus{top:8px;}
:focus-visible{outline:2px solid var(--rose-600); outline-offset:2px;}
.visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* real product photos */
.pv img, .pd-gallery-main img, .pd-thumb img, .cart-row .cv img, .ig-tile img{width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block;}
.pv-fallback{width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:inherit;}
.pv-fallback.rose{background:linear-gradient(155deg,var(--rose-100),#fff); color:var(--rose-700);}
.pv-fallback.gold{background:linear-gradient(155deg,var(--gold-100),#fff); color:var(--gold-600);}
.pcard .pv{overflow:hidden;}
.pcard.oos .pv{opacity:.55;}
.oos-label{position:absolute; bottom:10px; inset-inline-start:10px; background:var(--ink-900); color:#fff; font-size:10.5px; font-weight:800; padding:4px 10px; border-radius:999px; z-index:2;}
.pd-thumb{overflow:hidden; padding:0;}

/* search */
.search-bar{display:none; padding:0 0 14px;}
.search-bar.open{display:block;}
.search-bar form{display:flex; gap:8px;}
.search-bar input{flex:1; min-width:0; padding:11px 16px; border-radius:999px; border:1.5px solid var(--line); font-family:inherit; font-size:14px; background:#fff;}

/* forms */
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:12.5px; font-weight:800; color:var(--ink-700);}
.field input, .field textarea, .field select{padding:12px 14px; border-radius:10px; border:1px solid var(--line); font-family:inherit; font-size:14px; background:#fff; color:var(--ink-900);}
.field input:focus, .field textarea:focus{border-color:var(--rose-600); outline:none; box-shadow:0 0 0 3px var(--rose-100);}
.field .err{font-size:12px; color:var(--danger-700); font-weight:700;}
.field.has-error input{border-color:var(--danger-700);}
.form-grid{display:grid; gap:12px; grid-template-columns:1fr 1fr;}
.form-grid .full{grid-column:1/-1;}
@media (max-width:560px){.form-grid{grid-template-columns:1fr;}}
.pay-option{position:relative;}
.pay-option small{display:block; color:var(--ink-500); font-size:11.5px; font-weight:600;}

/* alerts */
.alert{border-radius:var(--radius-md); padding:13px 16px; font-size:13px; font-weight:700; margin-bottom:18px; border:1px solid;}
.alert-error{background:var(--danger-100); border-color:#F7C6D8; color:var(--danger-700);}
.alert-success{background:var(--success-100); border-color:#BFE3CE; color:var(--success-700);}
.alert-warn{background:var(--warn-100); border-color:#F2D3B3; color:var(--warn-700);}

/* filters as real links */
.filter-box a.check-row{text-decoration:none;}
.filter-box a.check-row .box{width:15px; height:15px; border-radius:4px; border:1.5px solid var(--ink-300); flex:0 0 15px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; color:#fff;}
.filter-box a.check-row.on .box{background:var(--rose-700); border-color:var(--rose-700);}
.filter-box a.check-row.on{color:var(--rose-700); font-weight:800;}
.price-form{display:flex; gap:8px; align-items:center;}
.price-form input{width:100%; min-width:0; padding:8px 10px; border-radius:8px; border:1px solid var(--line); font-family:inherit; font-size:12.5px;}
a.chip{text-decoration:none; color:inherit;}
.empty-state{text-align:center; padding:60px 20px; color:var(--ink-500);}
.empty-state .ic{font-size:44px; margin-bottom:10px;}

/* pagination */
.pagination{display:flex; gap:6px; justify-content:center; margin-top:30px; flex-wrap:wrap;}
.pagination a, .pagination span{min-width:38px; height:38px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--line); background:#fff; font-weight:800; font-size:13px;}
.pagination .current{background:var(--rose-700); border-color:var(--rose-700); color:#fff;}
.pagination .disabled{opacity:.4;}

/* rich text from admin */
.prose{max-width:68ch; color:var(--ink-700); line-height:2;}
.prose h2,.prose h3{margin:22px 0 8px; color:var(--ink-900);}
.prose ul{padding-inline-start:20px;}

/* order confirmation */
.thanks{max-width:620px; margin:0 auto; text-align:center;}
.thanks .check{width:72px; height:72px; border-radius:50%; background:var(--success-100); color:var(--success-700); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:32px;}
.order-box{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; text-align:start; margin-top:24px;}

/* floating WhatsApp */
.wa-float{position:fixed; bottom:18px; inset-inline-start:18px; width:54px; height:54px; border-radius:50%; background:var(--whatsapp); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(37,211,102,.4); z-index:40;}
.wa-float svg{width:28px; height:28px;}

/* sticky add-to-cart on mobile product page */
@media (max-width:640px){
  .pd-sticky{position:sticky; bottom:0; background:rgba(255,255,255,.96); backdrop-filter:blur(6px); padding:12px; border:1px solid var(--line); border-radius:14px; z-index:15; box-shadow:0 -6px 18px rgba(107,14,76,.08);}
  .wa-float{bottom:84px;}
}
.btn.loading{opacity:.7; pointer-events:none;}
.main-nav a{font-size:13.5px; font-weight:700; color:var(--ink-700); padding:6px 2px; border-bottom:2px solid transparent;}
.main-nav a:hover, .main-nav a.active{color:var(--rose-700); border-color:var(--gold-600);}
.md-panel a.item{display:block; padding:13px 4px; font-size:14.5px; font-weight:700; border-bottom:1px solid var(--line);}
.pcard h3.pname{font-family:var(--font-body); margin:0;}
.pcard .pcat:hover, .pcard .pname a:hover, a.nm:hover{color:var(--rose-700);}
a.cat-tile{color:inherit;}
.qty-stepper .v{display:inline-block; text-align:center;}
.qty-stepper button[disabled]{opacity:.35; cursor:not-allowed;}
.crumb a:hover{color:var(--rose-700);}
.cart-layout{display:grid; grid-template-columns:1fr 340px; gap:30px; align-items:start;}
@media (max-width:860px){.cart-layout{grid-template-columns:1fr;}}
.price .now, .summary-line span, .summary-line b{white-space:nowrap;}