/* Điện Máy Thu Hiền storefront styles — imported from Claude Design */
/* ============================================================
   ĐIỆN MÁY THU HIỀN — electronics/appliance storefront
   Red + yellow palette, Vietnamese big-box retail aesthetic

   The --pink-* variable names are kept as the brand scale so every
   component in this file (and Theme.php's overrides) keeps working;
   they now hold the red ramp rather than pink.
   ============================================================ */
:root {
  /* Brand ramp — red. Names kept for compatibility with Theme.php. */
  --pink-50:  #FEF2F2;
  --pink-100: #FEE2E2;
  --pink-200: #FECACA;
  --pink-300: #FCA5A5;
  --pink-400: #EF4444;
  --pink-500: #DC2626;
  --pink-600: #B91C1C;
  --pink-700: #7F1D1D;
  --blush:    #FEE2E2;
  --cream:    #FFFFFF;
  --ink-900:  #0F172A;
  --ink-800:  #1E293B;
  --ink-700:  #334155;
  --ink-600:  #475569;
  --ink-500:  #64748B;
  --ink-400:  #94A3B8;
  --ink-300:  #CBD5E1;
  --ink-200:  #E2E8F0;
  --ink-100:  #F1F5F9;
  --ink-50:   #F8FAFC;
  --white:    #FFFFFF;
  --gold:     #FDE047;

  /* Retail accents from the design */
  --yellow:      #FDE047;
  --yellow-deep: #FACC15;
  --yellow-ink:  #7C2D12;
  --bg-soft:     #F8FAFC;
  --border-1:    #E2E8F0;
  --border-2:    #CBD5E1;

  --font-display: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.2, .9, .3, 1.3);

  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
  --shadow-pink: 0 12px 30px rgba(220, 38, 38, 0.28);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--cream);color:var(--ink-900);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce{background:linear-gradient(90deg,var(--pink-600),var(--pink-400),var(--pink-600));background-size:200% 100%;animation:slide-bg 14s linear infinite;color:#fff;font-size:13px;font-weight:500;letter-spacing:0.04em;overflow:hidden;position:relative;z-index:60}
.announce .marquee{display:flex;gap:60px;padding:10px 0;white-space:nowrap;animation:marquee 30s linear infinite}
.announce .marquee span{display:inline-flex;align-items:center;gap:10px}
.announce .dot{width:4px;height:4px;border-radius:50%;background:#fff;opacity:0.6}
@keyframes slide-bg{from{background-position:0 0}to{background-position:200% 0}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   NAVBAR — the showpiece with multiple effects
   ============================================================ */
.nav{position:sticky;top:0;z-index:50;transition:all 450ms var(--ease-out)}
.nav.scrolled{padding-top:10px}
.nav-inner{background:rgba(255,249,245,0.78);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid rgba(244,194,194,0.4);transition:all 450ms var(--ease-out)}
.nav.scrolled .nav-inner{margin:0 auto;max-width:1180px;border-radius:var(--r-full);border:1px solid rgba(244,194,194,0.5);box-shadow:var(--shadow-md);background:rgba(255,255,255,0.88)}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:76px;padding:0 28px}
.nav.scrolled .nav-row{height:66px;padding:0 22px}

/* Logo */
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:500;font-size:24px;letter-spacing:-0.01em;color:var(--ink-900)}
.logo-mark{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#FFE4EC,var(--pink-400) 70%);position:relative;box-shadow:inset 0 -4px 10px rgba(184,63,114,0.25),0 6px 18px rgba(236,127,169,0.4)}
.logo-mark::after{content:"";position:absolute;top:6px;left:8px;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.7);filter:blur(1px)}
.logo em{font-style:italic;color:var(--pink-600)}

/* Primary links */
.nav-links{display:flex;gap:4px;position:relative}
.nav-link{position:relative;padding:10px 18px;border-radius:var(--r-full);font-size:14px;font-weight:500;color:var(--ink-700);letter-spacing:0.01em;transition:color 220ms var(--ease-out);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav-link svg{transition:transform 260ms var(--ease-out)}
.nav-link:hover{color:var(--pink-700)}
.nav-link.has-mega:hover svg{transform:rotate(180deg)}
.nav-link .dot{width:5px;height:5px;border-radius:50%;background:var(--pink-500);opacity:0;transform:scale(0);transition:all 260ms var(--ease-spring);margin-right:2px}
.nav-link.active .dot,.nav-link:hover .dot{opacity:1;transform:scale(1)}

/* Highlight pill that glides behind hovered item */
.nav-pill{position:absolute;top:0;left:0;height:100%;border-radius:var(--r-full);background:var(--pink-100);opacity:0;pointer-events:none;transition:opacity 220ms var(--ease-out),transform 420ms var(--ease-spring),width 420ms var(--ease-spring)}
.nav-links:hover .nav-pill{opacity:1}

/* Magnetic text effect (inner span that wiggles) */
.nav-link .label{display:inline-block;transition:transform 220ms var(--ease-spring)}
.nav-link:hover .label{transform:translateY(-1px)}

/* Animated underline variant */
[data-menu-effect="underline"] .nav-pill{display:none}
[data-menu-effect="underline"] .nav-link::after{content:"";position:absolute;left:20%;right:20%;bottom:4px;height:2px;background:linear-gradient(90deg,var(--pink-400),var(--pink-600));transform:scaleX(0);transform-origin:center;transition:transform 320ms var(--ease-out);border-radius:2px}
[data-menu-effect="underline"] .nav-link:hover::after,[data-menu-effect="underline"] .nav-link.active::after{transform:scaleX(1)}

/* Pill only (no underline — default) */
[data-menu-effect="pill"] .nav-link::after{display:none}

/* Spotlight — radial glow follows cursor */
[data-menu-effect="spotlight"] .nav-pill{display:none}
[data-menu-effect="spotlight"] .nav-links{--mx:50%;--my:50%}
[data-menu-effect="spotlight"] .nav-links::before{content:"";position:absolute;inset:0;background:radial-gradient(180px 60px at var(--mx) var(--my),rgba(244,143,177,0.28),transparent 70%);border-radius:var(--r-full);opacity:0;transition:opacity 280ms;pointer-events:none}
[data-menu-effect="spotlight"] .nav-links:hover::before{opacity:1}

/* Cell highlight (spreadsheet DNA reinterpreted) */
[data-menu-effect="cell"] .nav-pill{background:transparent;border:1.5px solid var(--pink-500);border-radius:8px}
[data-menu-effect="cell"] .nav-link{border-radius:8px}

/* Mega panel */
.mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:760px;background:rgba(255,255,255,0.92);backdrop-filter:blur(20px);border:1px solid rgba(244,194,194,0.5);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:28px;opacity:0;pointer-events:none;transition:opacity 280ms var(--ease-out),transform 320ms var(--ease-out);z-index:40}
.nav-link.has-mega:hover .mega,.mega:hover{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:22px}
.mega-col h5{font-family:var(--font-display);font-weight:500;font-size:14px;color:var(--pink-700);letter-spacing:0.08em;text-transform:uppercase;margin:0 0 12px}
.mega-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.mega-col li a{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:10px;font-size:14px;color:var(--ink-700);transition:all 200ms var(--ease-out);opacity:0;transform:translateX(-6px);animation:mega-in 360ms var(--ease-spring) forwards}
.mega-col li:nth-child(1) a{animation-delay:40ms}
.mega-col li:nth-child(2) a{animation-delay:80ms}
.mega-col li:nth-child(3) a{animation-delay:120ms}
.mega-col li:nth-child(4) a{animation-delay:160ms}
.mega-col li:nth-child(5) a{animation-delay:200ms}
.mega-col li:nth-child(6) a{animation-delay:240ms}
.nav-link:not(:hover) .mega .mega-col li a{animation:none;opacity:0;transform:translateX(-6px)}
@keyframes mega-in{to{opacity:1;transform:translateX(0)}}
.mega-col li a:hover{background:var(--pink-50);color:var(--pink-700);padding-left:14px}
.mega-col li a .cnt{font-size:11px;color:var(--ink-500);font-variant-numeric:tabular-nums}
.mega-feat{background:linear-gradient(135deg,var(--pink-100),var(--pink-200));border-radius:var(--r-md);padding:20px;display:flex;flex-direction:column;justify-content:flex-end;min-height:200px;position:relative;overflow:hidden}
.mega-feat::before{content:"";position:absolute;top:-30px;right:-30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,var(--pink-300),transparent 70%);filter:blur(10px)}
.mega-feat .tag{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--pink-700);position:relative}
.mega-feat h6{font-family:var(--font-display);font-weight:500;font-size:22px;margin:6px 0 4px;color:var(--ink-900);position:relative;line-height:1.1}
.mega-feat p{font-size:13px;color:var(--ink-700);margin:0 0 10px;position:relative}
.mega-feat a{font-size:13px;font-weight:600;color:var(--pink-700);position:relative;display:inline-flex;align-items:center;gap:4px}

/* Right side of nav */
.nav-tools{display:flex;align-items:center;gap:2px}
.ntool{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-700);transition:all 220ms var(--ease-out);position:relative}
.ntool:hover{background:var(--pink-100);color:var(--pink-700);transform:scale(1.05)}
.ntool .badge{position:absolute;top:4px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--pink-600);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--cream)}

/* Mobile menu trigger */
.burger{display:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:60px 0 90px;overflow:hidden}
.hero::before{content:"";position:absolute;top:-200px;left:-100px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(244,194,194,0.4),transparent 65%);filter:blur(30px);pointer-events:none}
.hero::after{content:"";position:absolute;bottom:-180px;right:-80px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(251,182,206,0.35),transparent 65%);filter:blur(40px);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;position:relative;z-index:2}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border-radius:var(--r-full);background:#fff;border:1px solid var(--pink-200);font-size:12.5px;font-weight:600;color:var(--pink-700);box-shadow:var(--shadow-sm);letter-spacing:0.02em}
.hero-eyebrow .e-dot{width:6px;height:6px;border-radius:50%;background:var(--pink-500);animation:blink 2.2s infinite}
@keyframes blink{0%,100%{box-shadow:0 0 0 0 rgba(236,127,169,0.6)}50%{box-shadow:0 0 0 6px rgba(236,127,169,0)}}
.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(48px,6vw,92px);line-height:0.98;letter-spacing:-0.025em;margin:20px 0 22px;color:var(--ink-900)}
.hero h1 .italic{font-style:italic;font-weight:400;color:var(--pink-600);position:relative;display:inline-block}
.hero h1 .italic::after{content:"";position:absolute;left:-4%;right:-4%;bottom:6%;height:14px;background:var(--pink-100);z-index:-1;border-radius:4px;transform:skew(-8deg)}
.hero p.lead{font-size:18px;line-height:1.6;color:var(--ink-700);max-width:520px;margin:0 0 32px}
.hero-ctas{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;padding:14px 26px;border-radius:var(--r-full);transition:all 260ms var(--ease-out);white-space:nowrap;letter-spacing:0.01em}
.btn.primary{background:linear-gradient(135deg,var(--pink-500),var(--pink-600));color:#fff;box-shadow:var(--shadow-pink)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(236,127,169,0.48)}
.btn.primary:active{transform:scale(0.98)}
.btn.ghost{background:transparent;color:var(--ink-900);border:1px solid var(--ink-300)}
.btn.ghost:hover{border-color:var(--pink-500);color:var(--pink-700);background:#fff}
.btn.light{background:#fff;color:var(--ink-900);border:1px solid var(--pink-200);box-shadow:var(--shadow-sm)}
.btn.light:hover{border-color:var(--pink-400);color:var(--pink-700);transform:translateY(-2px)}
.btn.lg{padding:16px 30px;font-size:16px}

.hero-meta{display:flex;gap:36px;align-items:center;margin-top:44px}
.hero-meta .stars{color:var(--gold);font-size:13px;letter-spacing:2px;margin-bottom:4px}
.hero-meta .m-label{font-size:13px;color:var(--ink-500);font-weight:500}
.hero-meta .m-num{font-size:18px;color:var(--ink-900);font-weight:700;font-family:var(--font-display)}
.hero-avatars{display:flex}
.hero-avatars div{width:32px;height:32px;border-radius:50%;border:2px solid var(--cream);margin-left:-10px;background:linear-gradient(135deg,#FFD1DF,#F48FB1);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.hero-avatars div:first-child{margin-left:0;background:linear-gradient(135deg,#FCE7F3,#EC7FA9)}
.hero-avatars div:nth-child(2){background:linear-gradient(135deg,#FFE4EC,#D65D8C)}
.hero-avatars div:nth-child(3){background:linear-gradient(135deg,#FFD1DF,#B83F72)}
.hero-avatars div:nth-child(4){background:linear-gradient(135deg,#F4C2C2,#EC7FA9)}

/* Hero stage with product bottles */
.hero-stage{position:relative;height:560px}
.petal{position:absolute;border-radius:50%;opacity:0.5;pointer-events:none;animation:float-up 14s ease-in-out infinite}
.petal.p1{width:14px;height:14px;background:var(--pink-300);top:10%;left:20%;animation-delay:0s}
.petal.p2{width:10px;height:10px;background:var(--pink-400);top:70%;left:10%;animation-delay:3s}
.petal.p3{width:18px;height:18px;background:var(--pink-200);top:30%;right:15%;animation-delay:6s}
.petal.p4{width:8px;height:8px;background:var(--pink-500);bottom:20%;right:30%;animation-delay:9s}
@keyframes float-up{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-24px) rotate(180deg)}}

.product-hero{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ph-bg{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,var(--pink-200),var(--pink-300) 60%,var(--pink-400));filter:blur(2px);animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.ph-bg::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,0.7),transparent 50%)}
/* Bottle mock */
.bottle{position:relative;z-index:2;width:240px;height:360px;animation:sway 5s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-6px)}}
.bottle-cap{position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:60px;background:linear-gradient(180deg,#2A1B25 0%,#1A0E14 100%);border-radius:10px 10px 4px 4px;z-index:3;box-shadow:0 8px 20px rgba(0,0,0,0.2)}
.bottle-cap::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:40px;height:2px;background:var(--gold)}
.bottle-cap::after{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);width:56px;height:24px;background:linear-gradient(180deg,#C9A96E,#8B7040);border-radius:2px}
.bottle-body{position:absolute;top:56px;left:50%;transform:translateX(-50%);width:200px;height:300px;border-radius:30px 30px 40px 40px;background:linear-gradient(135deg,rgba(255,255,255,0.85) 0%,rgba(255,209,223,0.9) 60%,rgba(248,143,177,0.85) 100%);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.5);box-shadow:inset 6px -10px 24px rgba(184,63,114,0.2),inset -8px 10px 30px rgba(255,255,255,0.6),0 30px 70px rgba(184,63,114,0.25)}
.bottle-body::before{content:"";position:absolute;top:10%;left:12%;width:30%;height:60%;background:linear-gradient(135deg,rgba(255,255,255,0.7),transparent);border-radius:50%;filter:blur(2px)}
.bottle-label{position:absolute;top:38%;left:50%;transform:translateX(-50%);text-align:center;width:90%}
.bottle-label .brand{font-family:var(--font-display);font-weight:500;font-size:16px;color:var(--ink-900);letter-spacing:0.1em}
.bottle-label .line{width:30px;height:1px;background:var(--ink-900);margin:6px auto}
.bottle-label .name{font-family:var(--font-display);font-style:italic;font-size:22px;color:var(--ink-900);line-height:1.1}
.bottle-label .sub{font-size:9px;letter-spacing:0.25em;text-transform:uppercase;color:var(--ink-700);margin-top:8px;font-weight:600}
.bottle-label .vol{font-size:10px;color:var(--ink-500);margin-top:20px;letter-spacing:0.15em}

/* Floating cards around the bottle */
.float-card{position:absolute;background:#fff;border-radius:var(--r-md);padding:14px 18px;box-shadow:var(--shadow-md);z-index:4;border:1px solid var(--pink-100)}
.fc-1{top:8%;right:4%;animation:float-a 7s ease-in-out infinite}
.fc-2{bottom:14%;left:-2%;animation:float-b 8s ease-in-out infinite 1s}
.fc-3{bottom:36%;right:-4%;animation:float-c 6s ease-in-out infinite 0.5s}
@keyframes float-a{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes float-b{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(-3deg)}}
@keyframes float-c{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.fc-1 .val{font-family:var(--font-display);font-size:22px;font-weight:500;color:var(--ink-900)}
.fc-1 .lbl{font-size:10px;color:var(--ink-500);letter-spacing:0.1em;text-transform:uppercase;margin-top:2px}
.fc-2{display:flex;align-items:center;gap:10px;transform:rotate(-3deg)}
.fc-2 .swatches{display:flex;gap:-4px}
.fc-2 .sw{width:24px;height:24px;border-radius:50%;border:2px solid #fff;margin-left:-6px}
.fc-2 .sw:first-child{margin-left:0}
.fc-2 .txt{font-size:12px;font-weight:600;color:var(--ink-900)}
.fc-2 .txt em{font-style:normal;color:var(--pink-600);font-family:var(--font-display)}
.fc-3{display:flex;align-items:center;gap:10px;transform:rotate(2deg)}
.fc-3 .ic{width:36px;height:36px;border-radius:50%;background:var(--pink-100);display:flex;align-items:center;justify-content:center;font-size:18px}
.fc-3 .t{font-size:12px;color:var(--ink-500)}
.fc-3 .b{font-size:13px;font-weight:700;color:var(--ink-900)}

/* ============================================================
   MARQUEE BRAND STRIP
   ============================================================ */
.brand-strip{padding:20px 0;border-top:1px solid var(--pink-100);border-bottom:1px solid var(--pink-100);background:#fff;overflow:hidden}
.brand-track{display:flex;gap:80px;animation:marquee 40s linear infinite;white-space:nowrap}
.brand-track span{font-family:var(--font-display);font-weight:400;font-style:italic;font-size:22px;color:var(--ink-500);display:inline-flex;align-items:center;gap:80px}
.brand-track span::after{content:"✦";color:var(--pink-400);font-size:14px}

/* ============================================================
   CATEGORIES
   ============================================================ */
.section{padding:90px 0;position:relative}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:50px;gap:40px}
.section-head .eyebrow{font-size:12px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--pink-600);margin-bottom:10px}
.section-head h2{font-family:var(--font-display);font-weight:400;font-size:clamp(36px,4.2vw,56px);line-height:1.05;letter-spacing:-0.02em;margin:0;color:var(--ink-900);max-width:620px}
.section-head h2 em{font-style:italic;color:var(--pink-600)}
.section-head .sub{font-size:15px;color:var(--ink-500);max-width:340px;line-height:1.55}

.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.cat{background:#fff;border-radius:var(--r-lg);padding:22px 18px 20px;cursor:pointer;position:relative;overflow:hidden;transition:all 360ms var(--ease-out);border:1px solid var(--ink-100)}
.cat::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--pink-50),transparent 60%);opacity:0;transition:opacity 300ms}
.cat:hover{transform:translateY(-8px);border-color:var(--pink-200);box-shadow:var(--shadow-md)}
.cat:hover::before{opacity:1}
.cat-circ{width:80px;height:80px;margin:0 auto 14px;border-radius:50%;background:linear-gradient(135deg,var(--pink-100),var(--pink-200));display:flex;align-items:center;justify-content:center;position:relative;transition:transform 360ms var(--ease-spring)}
.cat:hover .cat-circ{transform:scale(1.08) rotate(-6deg)}
.cat-circ .bottle-mini{width:28px;height:44px;border-radius:6px 6px 10px 10px;position:relative;box-shadow:inset 3px -3px 8px rgba(184,63,114,0.2),inset -3px 3px 6px rgba(255,255,255,0.6)}
.cat-circ .bottle-mini::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:12px;height:8px;background:var(--ink-900);border-radius:2px}
.cat-name{text-align:center;font-family:var(--font-display);font-size:18px;font-weight:500;color:var(--ink-900);margin:0 0 4px}
.cat-count{text-align:center;font-size:12px;color:var(--ink-500);font-weight:500}
.cat .arr{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;background:var(--pink-100);display:flex;align-items:center;justify-content:center;color:var(--pink-700);opacity:0;transform:translate(6px,-6px);transition:all 300ms var(--ease-out)}
.cat:hover .arr{opacity:1;transform:translate(0,0)}

/* ============================================================
   BESTSELLERS PRODUCT GRID
   ============================================================ */
.tabs{display:flex;gap:6px;padding:6px;background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-full);align-self:flex-start}
.tab{padding:10px 20px;border-radius:var(--r-full);font-size:14px;font-weight:500;color:var(--ink-500);cursor:pointer;transition:all 260ms var(--ease-out)}
.tab.active{background:var(--ink-900);color:#fff}
.tab:hover:not(.active){color:var(--ink-900)}

.products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.product{background:#fff;border-radius:var(--r-lg);overflow:hidden;position:relative;transition:all 360ms var(--ease-out);border:1px solid var(--ink-100);cursor:pointer}
.product:hover{transform:translateY(-6px);border-color:var(--pink-200);box-shadow:var(--shadow-md)}
.product .media{aspect-ratio:4/5;background:linear-gradient(135deg,var(--pink-50),var(--pink-100));position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.product .media::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(255,255,255,0.6),transparent 60%)}
.product.v2 .media{background:linear-gradient(135deg,#FFE4EC,#FBB6CE)}
.product.v3 .media{background:linear-gradient(135deg,#FFF5F8,#F4C2C2)}
.product.v4 .media{background:linear-gradient(135deg,#FFD1DF,#F48FB1)}
.product.v5 .media{background:linear-gradient(135deg,#FFF9F5,#FFE4EC)}
.product.v6 .media{background:linear-gradient(135deg,#FCE7F3,#F9A8C4)}
.product.v7 .media{background:linear-gradient(135deg,#FFE4EC,#FFBAC7)}
.product.v8 .media{background:linear-gradient(135deg,#FFF5F8,#FFD1DF)}

/* Little bottle illustrations */
.mini-bottle{position:relative;width:100px;height:160px;transition:transform 500ms var(--ease-spring)}
.product:hover .mini-bottle{transform:translateY(-10px) scale(1.05)}
.mini-bottle .cap{position:absolute;top:0;left:50%;transform:translateX(-50%);width:36px;height:26px;background:linear-gradient(180deg,#2A1B25,#1A0E14);border-radius:5px 5px 2px 2px}
.mini-bottle .body{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:84px;height:130px;border-radius:14px 14px 20px 20px;border:1px solid rgba(255,255,255,0.6);box-shadow:inset 3px -4px 10px rgba(184,63,114,0.15),inset -3px 4px 10px rgba(255,255,255,0.6);background:linear-gradient(135deg,rgba(255,255,255,0.7),rgba(255,209,223,0.8))}
.mini-bottle .body::before{content:"";position:absolute;top:8%;left:10%;width:25%;height:40%;border-radius:50%;background:rgba(255,255,255,0.6);filter:blur(1px)}
.mini-bottle .body-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:11px;font-style:italic;color:var(--ink-900);text-align:center;width:80%;line-height:1.1}

/* Alt shapes */
.jar{width:110px;height:110px;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,0.8),rgba(255,209,223,0.9));border:1px solid rgba(255,255,255,0.6);box-shadow:inset 4px -5px 14px rgba(184,63,114,0.15),inset -4px 5px 14px rgba(255,255,255,0.7);position:relative;transition:transform 500ms var(--ease-spring)}
.product:hover .jar{transform:scale(1.08) rotate(8deg)}
.jar::before{content:"";position:absolute;top:-14px;left:20%;right:20%;height:20px;background:linear-gradient(180deg,#2A1B25,#1A0E14);border-radius:6px}
.jar-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:11px;font-style:italic;color:var(--ink-900);text-align:center}

.tube{width:70px;height:180px;border-radius:40px 40px 8px 8px;background:linear-gradient(135deg,rgba(255,255,255,0.8),rgba(244,143,177,0.9));border:1px solid rgba(255,255,255,0.6);box-shadow:inset 3px -4px 10px rgba(184,63,114,0.18),inset -3px 4px 10px rgba(255,255,255,0.6);position:relative;transition:transform 500ms var(--ease-spring)}
.product:hover .tube{transform:translateY(-8px) rotate(-4deg)}
.tube::after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:12px;background:#2A1B25;border-radius:0 0 4px 4px}
.tube-label{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:11px;font-style:italic;color:var(--ink-900);text-align:center;width:80%}

.badge-ribbon{position:absolute;top:14px;left:14px;padding:4px 10px;border-radius:var(--r-full);font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;z-index:3}
.badge-ribbon.new{background:var(--ink-900);color:#fff}
.badge-ribbon.sale{background:var(--pink-600);color:#fff}
.badge-ribbon.best{background:#fff;color:var(--pink-700);border:1px solid var(--pink-200)}

/* Quick add button — slides up on hover */
.quick-add{position:absolute;left:14px;right:14px;bottom:14px;padding:12px;border-radius:var(--r-full);background:var(--ink-900);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;transform:translateY(calc(100% + 20px));opacity:0;transition:all 380ms var(--ease-spring);z-index:4}
.product:hover .quick-add{transform:translateY(0);opacity:1}
.quick-add:hover{background:var(--pink-600)}

/* Heart (wishlist) — top right */
.wish{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.85);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:var(--ink-700);cursor:pointer;transition:all 260ms var(--ease-out);z-index:3;border:0}
.wish:hover{background:#fff;color:var(--pink-600);transform:scale(1.1)}
.wish.active{color:var(--pink-600)}
.wish.active svg{fill:var(--pink-600)}

.p-info{padding:18px 18px 22px}
.p-cat{font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--pink-600)}
.p-name{font-family:var(--font-display);font-size:18px;font-weight:500;color:var(--ink-900);margin:6px 0 4px;line-height:1.2}
.p-row{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.p-price{display:flex;align-items:baseline;gap:8px}
.p-price .now{font-size:16px;font-weight:700;color:var(--ink-900)}
.p-price .was{font-size:13px;color:var(--ink-400);text-decoration:line-through}
.p-rating{font-size:12px;color:var(--ink-500);display:flex;align-items:center;gap:4px}
.p-rating .stars{color:var(--gold)}
.swatches-row{display:flex;gap:6px;margin-top:10px}
.swatches-row .sw{width:14px;height:14px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px var(--ink-300);cursor:pointer;transition:transform 220ms}
.swatches-row .sw:hover{transform:scale(1.2)}

/* ============================================================
   EDITORIAL BANNER
   ============================================================ */
.editorial{background:linear-gradient(135deg,var(--pink-100) 0%,var(--blush) 100%);border-radius:var(--r-xl);padding:80px 60px;position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.editorial::before{content:"";position:absolute;top:-80px;right:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.8),transparent 60%)}
.editorial::after{content:"";position:absolute;bottom:-120px;left:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(236,127,169,0.2),transparent 60%)}
.editorial .eyebrow{font-size:12px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--pink-700);position:relative}
.editorial h3{font-family:var(--font-display);font-weight:400;font-size:clamp(36px,4.2vw,52px);line-height:1.05;letter-spacing:-0.02em;margin:14px 0 20px;color:var(--ink-900);position:relative}
.editorial h3 em{font-style:italic;color:var(--pink-700)}
.editorial p{font-size:16px;line-height:1.6;color:var(--ink-700);max-width:480px;margin:0 0 30px;position:relative}
.editorial-ctas{display:flex;gap:12px;position:relative}
.editorial-visual{position:relative;height:380px}
.ev-card{position:absolute;background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-lg);overflow:hidden;padding:6px}
.ev-1{width:240px;height:300px;top:20px;left:30px;transform:rotate(-4deg);transition:transform 400ms var(--ease-out)}
.ev-2{width:200px;height:260px;bottom:20px;right:20px;transform:rotate(5deg);transition:transform 400ms var(--ease-out)}
.editorial:hover .ev-1{transform:rotate(-6deg) translateY(-6px)}
.editorial:hover .ev-2{transform:rotate(7deg) translateY(-4px)}
.ev-card .inner{width:100%;height:100%;border-radius:10px;display:flex;align-items:center;justify-content:center;position:relative}
.ev-1 .inner{background:linear-gradient(135deg,#FFF5F8,#FFD1DF)}
.ev-2 .inner{background:linear-gradient(135deg,#F4C2C2,#EC7FA9)}
.ev-card .tag{position:absolute;top:14px;left:14px;padding:4px 10px;background:#fff;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--pink-700)}

/* ============================================================
   INGREDIENTS / FEATURES
   ============================================================ */
.ingreds-sec{background:var(--white);border-top:1px solid var(--pink-100);border-bottom:1px solid var(--pink-100)}
.ingreds{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.ingred{text-align:center}
.ingred .ic{width:68px;height:68px;margin:0 auto 18px;border-radius:50%;background:var(--pink-50);border:1px solid var(--pink-100);display:flex;align-items:center;justify-content:center;font-size:28px;transition:all 360ms var(--ease-spring)}
.ingred:hover .ic{transform:scale(1.1) rotate(-8deg);background:var(--pink-100)}
.ingred h4{font-family:var(--font-display);font-size:20px;font-weight:500;margin:0 0 8px;color:var(--ink-900)}
.ingred p{font-size:14px;color:var(--ink-500);line-height:1.55;margin:0}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testi{background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-lg);padding:32px 28px;position:relative;transition:all 360ms var(--ease-out)}
.testi:hover{border-color:var(--pink-200);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.testi::before{content:"\201C";position:absolute;top:18px;right:28px;font-family:var(--font-display);font-size:80px;color:var(--pink-200);line-height:0.8}
.testi .stars{color:var(--gold);font-size:14px;letter-spacing:2px;margin-bottom:14px}
.testi .q{font-family:var(--font-display);font-size:18px;font-weight:400;line-height:1.5;color:var(--ink-900);margin:0 0 24px;position:relative}
.testi .who{display:flex;align-items:center;gap:12px}
.testi .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--pink-300),var(--pink-500));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.testi .who .nm{font-weight:600;font-size:14px;color:var(--ink-900)}
.testi .who .rl{font-size:12px;color:var(--ink-500)}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.news{background:linear-gradient(135deg,#2A1B25 0%,#1A0E14 100%);border-radius:var(--r-xl);padding:70px 56px;color:#fff;position:relative;overflow:hidden}
.news::before{content:"";position:absolute;top:-120px;right:-60px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(236,127,169,0.35),transparent 70%);filter:blur(20px)}
.news::after{content:"";position:absolute;bottom:-80px;left:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(244,194,194,0.2),transparent 70%);filter:blur(20px)}
.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;z-index:2}
.news .eyebrow{font-size:12px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--pink-300)}
.news h3{font-family:var(--font-display);font-weight:400;font-size:clamp(32px,3.8vw,48px);line-height:1.05;margin:14px 0 14px;letter-spacing:-0.01em}
.news h3 em{font-style:italic;color:var(--pink-300)}
.news p{color:rgba(255,255,255,0.7);margin:0;font-size:15px;line-height:1.6}
.news-form{display:flex;gap:8px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);padding:6px;border-radius:var(--r-full);backdrop-filter:blur(10px)}
.news-form input{flex:1;background:transparent;border:0;color:#fff;padding:14px 20px;font-size:14px;outline:0;font-family:var(--font-sans)}
.news-form input::placeholder{color:rgba(255,255,255,0.5)}
.news-form button{background:#fff;color:var(--ink-900);padding:12px 22px;border-radius:var(--r-full);font-weight:600;font-size:14px;transition:all 260ms var(--ease-out)}
.news-form button:hover{background:var(--pink-300);color:var(--ink-900)}
.news-perks{display:flex;gap:20px;margin-top:24px;color:rgba(255,255,255,0.6);font-size:13px}
.news-perks span{display:flex;align-items:center;gap:6px}

/* ============================================================
   FOOTER
   ============================================================ */
footer{padding:70px 0 28px;background:var(--cream)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px}
.foot h5{font-family:var(--font-display);font-size:15px;font-weight:500;color:var(--ink-900);margin:0 0 16px}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.foot ul a{font-size:13.5px;color:var(--ink-500);transition:color 200ms}
.foot ul a:hover{color:var(--pink-600)}
.foot p.desc{font-size:13.5px;color:var(--ink-500);line-height:1.6;margin:14px 0 18px;max-width:260px}
.socials{display:flex;gap:10px}
.social{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--ink-100);display:flex;align-items:center;justify-content:center;color:var(--ink-700);transition:all 260ms var(--ease-out)}
.social:hover{background:var(--pink-600);color:#fff;border-color:var(--pink-600);transform:translateY(-2px)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;margin-top:48px;padding-top:24px;border-top:1px solid var(--ink-100);font-size:12.5px;color:var(--ink-500)}
.pays{display:flex;gap:8px}
.pay{padding:5px 12px;background:#fff;border:1px solid var(--ink-100);border-radius:6px;font-size:11px;font-weight:700;color:var(--ink-700);letter-spacing:0.04em}

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.tweaks-panel{position:fixed;bottom:20px;right:20px;width:300px;background:rgba(255,255,255,0.96);backdrop-filter:blur(18px);border:1px solid var(--pink-200);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);z-index:100;overflow:hidden;display:none}
.tweaks-panel.on{display:block;animation:pop 300ms var(--ease-spring)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.tweaks-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--ink-100);background:var(--pink-50)}
.tweaks-head h4{margin:0;font-family:var(--font-display);font-size:16px;font-weight:500;color:var(--ink-900)}
.tweaks-close{width:24px;height:24px;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink-700);border:1px solid var(--ink-100)}
.tweaks-body{padding:16px 18px;max-height:70vh;overflow-y:auto}
.tweak-group{margin-bottom:18px}
.tweak-group:last-child{margin-bottom:0}
.tweak-label{font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-500);margin-bottom:8px;display:block}
.tweak-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px}
.tweak-btns button{padding:8px 10px;border-radius:8px;background:#fff;border:1px solid var(--ink-100);font-size:12px;font-weight:500;color:var(--ink-700);transition:all 200ms}
.tweak-btns button:hover{border-color:var(--pink-300)}
.tweak-btns button.active{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}
.tone-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.tone-sw{width:100%;aspect-ratio:1;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all 200ms}
.tone-sw.active{border-color:var(--ink-900);transform:scale(1.08)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .hero-grid,.editorial,.news-grid{grid-template-columns:1fr;gap:40px}
  .cats,.products{grid-template-columns:repeat(3,1fr)}
  .ingreds{grid-template-columns:repeat(2,1fr)}
  .testis{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr 1fr}
  .nav-links{display:none}
  .burger{display:flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:10px;background:var(--pink-100)}
}
@media (max-width: 640px){
  .wrap{padding:0 20px}
  .cats,.products{grid-template-columns:repeat(2,1fr)}
  .section{padding:60px 0}
  .section-head{flex-direction:column;align-items:flex-start}
  .editorial,.news{padding:44px 28px}
  .foot{grid-template-columns:1fr 1fr}
  .hero{padding:32px 0 60px}
  .hero-stage{height:440px}
  .bottle{width:200px;height:300px}
  .bottle-body{width:170px;height:250px}
}
/* ============================================================
   STOREFRONT EXTRAS (cart, checkout, product detail, flash)
   ============================================================ */
.flash{padding:12px 0;font-size:14px;font-weight:500}
.flash-success{background:#E9F9EF;color:#1B7A43;border-bottom:1px solid #BFE8CD}
.flash-error{background:#FDECEF;color:#B83F72;border-bottom:1px solid #F6C9D6}

.breadcrumb{font-size:13px;color:var(--ink-500);margin-bottom:28px}
.breadcrumb a:hover{color:var(--pink-600)}
.breadcrumb span{color:var(--ink-900)}

/* Quantity control */
.qty-control{display:inline-flex;align-items:center;border:1px solid var(--ink-300);border-radius:var(--r-full);overflow:hidden;background:#fff}
.qty-control button{width:38px;height:42px;font-size:18px;color:var(--ink-700);transition:background 200ms}
.qty-control button:hover{background:var(--pink-50);color:var(--pink-700)}
.qty-control input{width:46px;height:42px;border:0;text-align:center;font-size:15px;font-weight:600;color:var(--ink-900);font-family:var(--font-sans);-moz-appearance:textfield}
.qty-control input::-webkit-outer-spin-button,.qty-control input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Product detail */
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.pd-visual{background:linear-gradient(135deg,var(--pink-50),var(--pink-100));border-radius:var(--r-xl);padding:60px;display:flex;align-items:center;justify-content:center;min-height:480px}
.pd-stage{position:relative;display:flex;align-items:center;justify-content:center}
.pd-stage .ph-bg{position:absolute}
.pd-stage>:not(.ph-bg){position:relative;z-index:2}
.pd-title{font-family:var(--font-display);font-weight:400;font-size:clamp(32px,4vw,46px);line-height:1.05;margin:6px 0 10px;color:var(--ink-900)}
.pd-subtitle{font-size:16px;color:var(--ink-500);margin:0 0 18px}
.pd-rating{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-500);margin-bottom:22px}
.pd-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.pd-price .now{font-family:var(--font-display);font-size:34px;font-weight:500;color:var(--ink-900)}
.pd-price .was{font-size:18px;color:var(--ink-500);text-decoration:line-through}
.pd-save{padding:4px 12px;border-radius:var(--r-full);background:var(--pink-100);color:var(--pink-700);font-size:12px;font-weight:700}
.pd-desc{font-size:15px;line-height:1.7;color:var(--ink-700);margin-bottom:24px}
.pd-swatches{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.pd-swatch-label{font-size:13px;font-weight:600;color:var(--ink-700)}
.pd-swatches .sw{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--ink-300);cursor:pointer;transition:transform 200ms}
.pd-swatches .sw:hover{transform:scale(1.15)}
.pd-add-form{display:flex;gap:14px;align-items:stretch;margin-bottom:26px}
.pd-perks{display:flex;flex-direction:column;gap:10px;padding-top:24px;border-top:1px solid var(--ink-100);font-size:14px;color:var(--ink-700)}

/* Cart + checkout layout */
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:36px;align-items:start}
.cart-items{display:flex;flex-direction:column;gap:14px}
.cart-item{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-lg);padding:16px 20px}
.cart-thumb{background:linear-gradient(135deg,var(--pink-50),var(--pink-100));border-radius:var(--r-md);padding:8px;display:flex;align-items:center;justify-content:center}
.cart-name{font-family:var(--font-display);font-size:17px;color:var(--ink-900)}
.cart-sub{font-size:12px;color:var(--ink-500);margin:2px 0 4px}
.cart-unit{font-size:13px;color:var(--ink-700);font-weight:600}
.cart-line-total{font-weight:700;color:var(--ink-900);white-space:nowrap}
.cart-remove{width:30px;height:30px;border-radius:50%;background:var(--pink-50);color:var(--pink-700);font-size:18px;line-height:1;transition:all 200ms}
.cart-remove:hover{background:var(--pink-600);color:#fff}

.cart-summary{background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-lg);padding:28px;position:sticky;top:100px}
.cart-summary h3{font-family:var(--font-display);font-weight:500;font-size:20px;margin:0 0 18px;color:var(--ink-900)}
.sum-row{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-700);padding:8px 0}
.sum-total{font-size:18px;font-weight:700;color:var(--ink-900);border-top:1px solid var(--ink-100);margin-top:8px;padding-top:14px}
.sum-hint{font-size:12px;color:var(--pink-600);background:var(--pink-50);padding:8px 12px;border-radius:8px;margin:4px 0}
.cart-continue{display:block;text-align:center;margin-top:14px;font-size:13px;color:var(--ink-500)}
.cart-continue:hover{color:var(--pink-600)}
.co-line{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ink-700);padding:6px 0}
.co-sep{border:0;border-top:1px solid var(--ink-100);margin:12px 0}
.co-note{font-size:12px;color:var(--ink-500);margin-top:12px;line-height:1.5}

/* Checkout form */
.checkout-form{background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-lg);padding:32px}
.checkout-form h3{font-family:var(--font-display);font-weight:500;font-size:20px;margin:0 0 22px;color:var(--ink-900)}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-700);margin-bottom:8px}
.field input,.field textarea{width:100%;padding:13px 16px;border:1px solid var(--ink-300);border-radius:var(--r-md);font-family:var(--font-sans);font-size:14px;color:var(--ink-900);outline:0;transition:border-color 200ms;background:var(--cream)}
.field input:focus,.field textarea:focus{border-color:var(--pink-400);background:#fff}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-error{background:#FDECEF;color:#B83F72;padding:12px 18px;border-radius:var(--r-md);margin-bottom:22px;font-size:14px}

/* Empty + success states */
.empty-state{text-align:center;padding:80px 0}
.empty-ic{font-size:56px;margin-bottom:16px}
.empty-state p{color:var(--ink-500);margin-bottom:22px}
.success-card{background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-xl);padding:56px 40px;text-align:center;box-shadow:var(--shadow-md)}
.success-ic{width:72px;height:72px;margin:0 auto 22px;border-radius:50%;background:linear-gradient(135deg,#34D399,#10B981);color:#fff;font-size:36px;display:flex;align-items:center;justify-content:center}
.success-card h2{font-family:var(--font-display);font-weight:500;margin:0 0 12px}
.success-card p{color:var(--ink-700);margin:0 0 8px}
.order-code{display:inline-block;font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--pink-700);background:var(--pink-50);padding:12px 28px;border-radius:var(--r-md);margin:14px 0;letter-spacing:0.05em}
.success-note{font-size:14px;color:var(--ink-500)!important}
.success-items{max-width:420px;margin:28px auto 0;text-align:left;background:var(--cream);border-radius:var(--r-md);padding:20px}

@media (max-width:980px){
  .pd-grid,.cart-layout{grid-template-columns:1fr}
  .cart-summary{position:static}
}
@media (max-width:640px){
  .cart-item{grid-template-columns:auto 1fr;gap:12px}
  .field-row{grid-template-columns:1fr}
}

/* ============================================================
   FEATURES: search, filter toolbar, pagination, product images, reviews
   ============================================================ */
/* Nav search popover */
.nav-search{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--pink-200);border-radius:var(--r-full);box-shadow:var(--shadow-md);padding:6px;opacity:0;pointer-events:none;transform:translateY(-8px);transition:all 240ms var(--ease-out);z-index:60}
.nav-search.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.nav-search input{width:280px;border:0;outline:0;padding:10px 18px;font-size:14px;font-family:var(--font-sans);background:transparent;color:var(--ink-900)}
.nav-tools{position:relative}

/* Shop search bar (on listing pages) */
.shop-search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-full);padding:8px 8px 8px 20px;margin-bottom:24px;box-shadow:var(--shadow-sm);max-width:560px}
.shop-search svg{color:var(--ink-500);flex-shrink:0}
.shop-search input{flex:1;border:0;outline:0;font-size:15px;font-family:var(--font-sans);background:transparent;color:var(--ink-900)}
.shop-search .btn{padding:10px 22px;font-size:14px}

/* Filter toolbar */
.shop-toolbar{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-lg);padding:16px 20px;margin-bottom:18px}
.tb-group{display:flex;flex-direction:column;gap:6px}
.tb-group label{font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-500)}
.tb-group select,.tb-group input{padding:9px 12px;border:1px solid var(--ink-300);border-radius:var(--r-md);font-size:14px;font-family:var(--font-sans);color:var(--ink-900);outline:0;background:#fff;transition:border-color 200ms}
.tb-group select:focus,.tb-group input:focus{border-color:var(--pink-400)}
.tb-group input[type=number]{width:110px}
.shop-toolbar .btn{height:38px}
.tb-reset{font-size:13px;color:var(--ink-500);align-self:center;padding-bottom:8px}
.tb-reset:hover{color:var(--pink-600)}
.shop-count{font-size:14px;color:var(--ink-500);margin-bottom:22px}

/* Pagination */
.pagination{display:flex;justify-content:center;gap:8px;margin-top:48px;flex-wrap:wrap}
.page-btn{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:var(--r-md);background:#fff;border:1px solid var(--ink-300);font-size:14px;font-weight:600;color:var(--ink-700);transition:all 200ms}
.page-btn:hover{border-color:var(--pink-400);color:var(--pink-700)}
.page-btn.active{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}

/* Real product images on cards */
.product .media img.p-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.pd-photo-main{width:100%;border-radius:var(--r-lg);object-fit:cover;aspect-ratio:1;background:var(--pink-50)}
.pd-gallery{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pd-gallery img{width:72px;height:72px;border-radius:var(--r-md);object-fit:cover;cursor:pointer;border:2px solid transparent;transition:border-color 200ms}
.pd-gallery img:hover,.pd-gallery img.active{border-color:var(--pink-400)}

/* Reviews */
.reviews-sec{margin-top:64px}
.reviews-head{display:flex;align-items:baseline;gap:16px;margin-bottom:28px}
.reviews-head h2{font-family:var(--font-display);font-weight:500;font-size:28px;margin:0;color:var(--ink-900)}
.reviews-avg{font-size:14px;color:var(--ink-500)}
.reviews-avg .stars{color:var(--gold)}
.review-list{display:flex;flex-direction:column;gap:16px;margin-bottom:36px}
.review-item{background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-lg);padding:22px 24px}
.review-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.review-author{display:flex;align-items:center;gap:10px}
.review-author .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--pink-300),var(--pink-600));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.review-author .nm{font-weight:600;font-size:14px;color:var(--ink-900)}
.review-author .dt{font-size:12px;color:var(--ink-500)}
.review-item .stars{color:var(--gold);font-size:14px;letter-spacing:1px}
.review-item p{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-700)}
.review-form{background:var(--pink-50);border:1px solid var(--pink-100);border-radius:var(--r-lg);padding:28px}
.review-form h3{font-family:var(--font-display);font-weight:500;font-size:20px;margin:0 0 18px}
.star-input{display:inline-flex;flex-direction:row-reverse;gap:4px}
.star-input input{display:none}
.star-input label{font-size:28px;color:var(--ink-300);cursor:pointer;transition:color 150ms}
.star-input input:checked ~ label,.star-input label:hover,.star-input label:hover ~ label{color:var(--gold)}
.review-thanks{background:#E9F9EF;color:#1B7A43;border:1px solid #BFE8CD;border-radius:var(--r-md);padding:14px 18px;font-size:14px;margin-bottom:18px}

/* Coupon box (cart/checkout) */
.coupon-box{display:flex;gap:8px;margin:14px 0}
.coupon-box input{flex:1;padding:11px 14px;border:1px solid var(--ink-300);border-radius:var(--r-md);font-size:14px;font-family:var(--font-sans);text-transform:uppercase;outline:0}
.coupon-box input:focus{border-color:var(--pink-400)}
.coupon-box button{padding:11px 18px;font-size:13px}
.coupon-applied{display:flex;justify-content:space-between;align-items:center;background:#E9F9EF;border:1px solid #BFE8CD;border-radius:var(--r-md);padding:10px 14px;font-size:13px;color:#1B7A43;margin:12px 0}
.coupon-applied a{color:#B83F72;font-weight:600}
.coupon-error{font-size:12.5px;color:#B83F72;margin:4px 0}
.sum-discount{color:#1B7A43}

@media (max-width:640px){
  .nav-search input{width:200px}
  .shop-toolbar{gap:10px}
  .tb-group input[type=number]{width:90px}
}

/* ============================================================
   ACCOUNTS, WISHLIST, ORDER TRACKING, PAYMENT
   ============================================================ */
.auth-card{background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-xl);padding:40px 36px;box-shadow:var(--shadow-md)}

/* Account dashboard */
.account-grid{display:grid;grid-template-columns:320px 1fr;gap:32px;align-items:start}
.account-profile{background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-lg);padding:28px;position:sticky;top:100px}
.account-profile h3,.account-orders h3{font-family:var(--font-display);font-weight:500;font-size:19px;margin:0 0 18px;color:var(--ink-900)}
.account-orders{background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-lg);padding:28px}
.order-history{display:flex;flex-direction:column;gap:10px}
.order-row{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border:1px solid var(--ink-100);border-radius:var(--r-md);transition:all 200ms}
.order-row:hover{border-color:var(--pink-300);box-shadow:var(--shadow-sm)}
.order-code-sm{font-weight:700;color:var(--ink-900);letter-spacing:0.03em}
.order-date{font-size:12.5px;color:var(--ink-500);margin-top:2px}
.order-meta{display:flex;align-items:center;gap:14px}
.order-total{font-weight:700;color:var(--ink-900)}

/* Order status badges (reuse admin palette on storefront) */
.status{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-full);font-size:12.5px;font-weight:600}
.status.pending{background:#FEF3E2;color:#B7791F}
.status.confirmed{background:#E0F2FE;color:#0369A1}
.status.shipping{background:#EDE9FE;color:#6D28D9}
.status.completed{background:#E9F9EF;color:#1B7A43}
.status.cancelled{background:#FDECEF;color:#B83F72}

/* Shared order summary card */
.order-detail-card{background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-lg);padding:28px}
.order-detail-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--ink-100)}
.order-items-table{width:100%;border-collapse:collapse;margin-bottom:16px}
.order-items-table td{padding:8px 0;font-size:14px;color:var(--ink-700);border-bottom:1px solid var(--ink-100)}
.order-totals{padding:14px 0;border-bottom:1px solid var(--ink-100);margin-bottom:16px}
.order-totals .sum-row{display:flex;justify-content:space-between;padding:5px 0;font-size:14px;color:var(--ink-700)}
.order-totals .sum-total{font-size:17px;font-weight:700;color:var(--ink-900);margin-top:6px;padding-top:10px;border-top:1px solid var(--ink-100)}
.order-totals .sum-discount{color:#1B7A43}
.order-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.oi-label{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-500);margin-bottom:6px}
.order-info-grid .muted{font-size:13px;color:var(--ink-500);margin-top:2px}

/* Track-order form */
.track-form{background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-lg);padding:30px}

/* Payment method options */
.pay-option{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid var(--ink-300);border-radius:var(--r-md);margin-bottom:10px;cursor:pointer;transition:all 200ms;font-size:14px}
.pay-option:hover{border-color:var(--pink-400)}
.pay-option input{width:auto;accent-color:var(--pink-600)}
.pay-option strong{color:var(--ink-900)}

/* QR payment page */
.qr-pay{background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-xl);padding:40px;text-align:center;box-shadow:var(--shadow-md);max-width:560px;margin:0 auto}
.qr-pay h2{font-family:var(--font-display);font-weight:500;margin:0 0 6px}
.qr-img{width:280px;height:280px;margin:18px auto;border:1px solid var(--ink-100);border-radius:var(--r-md);padding:10px;background:#fff}
.qr-details{text-align:left;background:var(--cream);border-radius:var(--r-md);padding:18px 20px;margin:18px 0}
.qr-details .row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
.qr-details .row span:first-child{color:var(--ink-500)}
.qr-details .row strong{color:var(--ink-900)}
.qr-status{padding:12px 18px;border-radius:var(--r-md);font-size:14px;font-weight:500;margin-top:8px}
.qr-status.waiting{background:#FEF3E2;color:#B7791F}
.qr-status.paid{background:#E9F9EF;color:#1B7A43}

@media (max-width:860px){
  .account-grid{grid-template-columns:1fr}
  .account-profile{position:static}
  .order-info-grid{grid-template-columns:1fr}
}

/* ============================================================
   FLASH SALE, STOCK, REVIEW PHOTOS (feature set 3)
   ============================================================ */
.flash-countdown{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#FFF0F5,#FFE4EC);border:1px solid var(--pink-200);border-radius:var(--r-md);padding:12px 18px;margin-bottom:22px}
.flash-countdown .fc-label{font-size:13px;font-weight:600;color:var(--pink-700)}
.flash-countdown .fc-timer{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--pink-700);letter-spacing:0.04em;font-variant-numeric:tabular-nums}

.stock-warn{font-size:13.5px;color:var(--pink-700);font-weight:600;margin:12px 0 0}

.out-of-stock-box{background:var(--ink-100);border-radius:var(--r-md);padding:22px 24px;margin-bottom:24px}
.oos-label{font-size:16px;font-weight:700;color:var(--ink-900);margin:0 0 4px}
.oos-sub{font-size:13.5px;color:var(--ink-500);margin:0 0 14px}
.oos-form{display:flex;gap:8px}
.oos-form input{flex:1;padding:12px 16px;border:1px solid var(--ink-300);border-radius:var(--r-md);font-size:14px;font-family:var(--font-sans);outline:0}
.oos-form input:focus{border-color:var(--pink-400)}

.review-photo{max-width:140px;border-radius:var(--r-md);margin-top:10px;border:1px solid var(--ink-100)}

@media (max-width:640px){
  .oos-form{flex-direction:column}
  .flash-countdown{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ============================================================
   PRODUCT DETAIL — variants, tabs, share, trust, FOMO, sticky, zoom
   ============================================================ */
/* Viewers (FOMO) */
.pd-viewers{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--pink-700);background:var(--pink-50);padding:6px 14px;border-radius:var(--r-full);margin:0 0 18px}

/* Variants */
.pd-variants{margin-bottom:18px}
.pd-variant-label{display:block;font-size:13px;font-weight:600;color:var(--ink-700);margin-bottom:8px}
.variant-opts{display:flex;flex-wrap:wrap;gap:8px}
.variant-opt{padding:9px 18px;border:1.5px solid var(--ink-300);border-radius:var(--r-md);background:#fff;font-size:14px;font-weight:600;color:var(--ink-700);cursor:pointer;transition:all 200ms}
.variant-opt:hover:not(.disabled){border-color:var(--pink-400)}
.variant-opt.active{border-color:var(--pink-600);background:var(--pink-50);color:var(--pink-700)}
.variant-opt.disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}

/* Stock indicator */
.pd-stock{font-size:14px;color:#1B7A43;font-weight:600;margin-bottom:14px}
.pd-stock.low{color:var(--pink-700)}
.pd-stock .oos{color:var(--ink-500)}

/* Delivery estimate */
.pd-delivery{font-size:13.5px;color:var(--ink-700);margin:14px 0;padding:10px 14px;background:var(--cream);border-radius:var(--r-md);border:1px solid var(--ink-100)}

/* Share */
.pd-share{display:flex;align-items:center;gap:10px;margin:16px 0}
.pd-share-label{font-size:13px;font-weight:600;color:var(--ink-700)}
.share-btn{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;border:1px solid var(--ink-100);background:#fff;color:var(--ink-700);cursor:pointer;transition:all 200ms;text-decoration:none}
.share-btn:hover{transform:translateY(-2px)}
.share-btn.fb{color:#1877F2}
.share-btn.zl{color:#0068FF;font-size:13px}
.share-btn.cp:hover{background:var(--pink-100);color:var(--pink-700)}

/* Trust badges */
.pd-trust{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;padding-top:16px;border-top:1px solid var(--ink-100)}
.trust-badge{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink-700);background:var(--pink-50);border:1px solid var(--pink-100);padding:6px 12px;border-radius:var(--r-full)}

/* Tabs */
.pd-tabs{margin-top:56px}
.pd-tab-nav{display:flex;gap:4px;border-bottom:1px solid var(--ink-100);margin-bottom:22px;flex-wrap:wrap}
.pd-tab-btn{padding:12px 22px;font-size:15px;font-weight:600;color:var(--ink-500);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 200ms;cursor:pointer}
.pd-tab-btn:hover{color:var(--ink-900)}
.pd-tab-btn.active{color:var(--pink-700);border-bottom-color:var(--pink-600)}
.pd-tab-panel{display:none;font-size:15px;line-height:1.7;color:var(--ink-700);max-width:760px}
.pd-tab-panel.active{display:block}
.pd-tab-panel p{margin:0 0 10px}

/* Font/size choices made in the admin Quill editor (mo ta, FAQ, bao quan,
   thong so ky thuat) are saved as ql-font-x / ql-size-x classes, not inline
   styles. This storefront page never loads quill.snow.css, so without these
   rules the classes are inert and every description renders identically
   regardless of what the admin picked. */
.pd-tab-panel .ql-font-serif{font-family:Georgia,'Times New Roman',serif}
.pd-tab-panel .ql-font-monospace{font-family:'Courier New',monospace}
.pd-tab-panel .ql-size-small{font-size:0.75em}
.pd-tab-panel .ql-size-large{font-size:1.5em}
.pd-tab-panel .ql-size-huge{font-size:2.5em}

/* Rating distribution */
.rating-dist{max-width:420px;margin:0 0 32px;display:flex;flex-direction:column;gap:6px}
.dist-row{display:flex;align-items:center;gap:10px;font-size:13px}
.dist-star{width:34px;color:var(--ink-700);white-space:nowrap}
.dist-bar{flex:1;height:8px;background:var(--ink-100);border-radius:999px;overflow:hidden}
.dist-fill{height:100%;background:var(--gold);border-radius:999px;transition:width 600ms var(--ease-out)}
.dist-pct{width:38px;text-align:right;color:var(--ink-500)}

/* Sticky add-to-cart */
.sticky-cart{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,0.97);backdrop-filter:blur(12px);border-top:1px solid var(--pink-100);box-shadow:0 -8px 30px rgba(180,80,120,0.1);z-index:55;transform:translateY(100%);transition:transform 300ms var(--ease-out)}
.sticky-cart.show{transform:translateY(0)}
.sticky-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 28px}
.sticky-info{display:flex;flex-direction:column}
.sticky-name{font-family:var(--font-display);font-size:16px;color:var(--ink-900)}
.sticky-price{font-weight:700;color:var(--pink-700)}

/* Image zoom lightbox */
.pd-photo-main{cursor:zoom-in}
.lightbox{position:fixed;inset:0;background:rgba(42,27,37,0.92);display:flex;align-items:center;justify-content:center;z-index:200;opacity:0;pointer-events:none;transition:opacity 250ms;cursor:zoom-out;padding:40px}
.lightbox.show{opacity:1;pointer-events:auto}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:var(--r-md);box-shadow:0 30px 80px rgba(0,0,0,0.4);cursor:default}
.lightbox-close{position:absolute;top:24px;right:30px;color:#fff;font-size:34px;line-height:1;cursor:pointer;background:none;border:0;z-index:2}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink-900);display:flex;align-items:center;justify-content:center;
  font-size:24px;line-height:1;border:0;cursor:pointer;z-index:2;transition:background 150ms}
.lightbox-nav:hover{background:#fff}
.lightbox-nav.prev{left:20px}
.lightbox-nav.next{right:20px}
.lightbox-counter{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;
  font-weight:600;background:rgba(0,0,0,.45);padding:5px 14px;border-radius:999px}
@media (max-width:640px){
  .lightbox-nav{width:38px;height:38px;font-size:19px}
  .lightbox-nav.prev{left:8px}
  .lightbox-nav.next{right:8px}
}

@media (max-width:860px){
  .pd-tab-btn{padding:10px 16px;font-size:14px}
  .sticky-inner{padding:10px 20px}
}

/* ============================================================
   HOMEPAGE REDESIGN — CONVERSION UI (Phases 01-07)
   All new selectors prefixed: fs- bp- p-sig bun- ba- disc- toast-
   ============================================================ */

/* ---- Phase 01: Flash Sale section ---- */
.fs-section{background:linear-gradient(135deg,#FF3B6B 0%,#C9134E 60%,#8B0037 100%);padding:56px 0;margin:0 0 8px}
.fs-head{display:flex;align-items:center;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.fs-title{display:flex;align-items:center;gap:16px}
.fs-icon{font-size:40px;line-height:1}
.fs-eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:600}
.fs-h2{font-family:var(--font-display);font-size:clamp(24px,3vw,36px);color:#fff;margin:0;font-style:italic}
.fs-timer{font-size:15px;color:rgba(255,255,255,.9);background:rgba(0,0,0,.25);border-radius:var(--r-full);padding:8px 20px;white-space:nowrap}
.fs-timer strong{font-size:20px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.fs-head .btn.ghost{margin-left:auto;border-color:rgba(255,255,255,.4);color:#fff}
.fs-head .btn.ghost:hover{background:rgba(255,255,255,.15)}
.fs-grid{gap:16px}
.fs-section .product{background:#fff;border-radius:var(--r-lg)}

/* ---- Phase 02: Benefit pills ---- */
.bp-section{padding-top:60px;padding-bottom:0}
.bp-header{margin-bottom:28px}
.bp-header h2{margin:6px 0 0;font-size:clamp(22px,2.8vw,32px)}
.bp-pills-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;mask-image:linear-gradient(to right,transparent 0,black 24px,black calc(100% - 24px),transparent 100%)}
.bp-pills{display:flex;gap:10px;padding:4px 24px 12px;min-width:max-content}
.bp-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--r-full);border:2px solid var(--ink-200);background:#fff;font-size:14px;font-weight:600;color:var(--ink-700);cursor:pointer;transition:all 200ms var(--ease-out);white-space:nowrap}
.bp-pill:hover{border-color:var(--pink-400);color:var(--pink-700);background:var(--pink-50)}
.bp-pill.active{border-color:var(--pink-600);background:var(--pink-600);color:#fff}
.bp-pill.active .bp-pill-count{background:rgba(255,255,255,.25);color:#fff}
.bp-pill-count{font-size:11px;background:var(--ink-100);color:var(--ink-500);border-radius:var(--r-full);padding:2px 8px;font-weight:500}
.product.bp-hidden{display:none}

/* ---- Phase 03: Product card social signals ---- */
.p-signals{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 4px;min-height:22px}
.p-sig{font-size:11px;font-weight:600;border-radius:var(--r-full);padding:3px 10px}
.p-sig.low-stock{background:#FFF3CD;color:#856404}
.p-sig.sold-count{background:#D1FAE5;color:#065F46}

/* ---- Phase 04: Quick-add AJAX toast ---- */
.toast-wrap{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:300;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.toast{background:var(--ink-900);color:#fff;font-size:14px;font-weight:500;padding:12px 24px;border-radius:var(--r-full);box-shadow:0 8px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(10px);transition:opacity 250ms,transform 250ms;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateY(0)}

/* ---- Phase 05: Bundle highlight ---- */
.bun-section{background:linear-gradient(135deg,var(--pink-50) 0%,#FFF5F8 100%)}
.bun-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.bun-card{display:flex;gap:24px;background:#fff;border-radius:var(--r-xl);padding:28px;box-shadow:var(--shadow-sm);transition:box-shadow 250ms,transform 250ms;align-items:center}
.bun-card:hover{box-shadow:var(--shadow-pink);transform:translateY(-3px)}
.bun-img{width:110px;height:110px;border-radius:var(--r-lg);overflow:hidden;flex-shrink:0;background:var(--pink-50);display:flex;align-items:center;justify-content:center}
.bun-img img{width:100%;height:100%;object-fit:cover}
.bun-placeholder{font-size:48px}
.bun-body{flex:1;display:flex;flex-direction:column;gap:8px}
.bun-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--pink-600);background:var(--pink-50);border-radius:var(--r-full);padding:3px 12px;display:inline-block;width:fit-content}
.bun-name{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--ink-900);margin:0}
.bun-items-list{list-style:none;margin:0;padding:0;font-size:13px;color:var(--ink-500);display:flex;flex-direction:column;gap:2px}
.bun-pricing{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bun-price{font-size:22px;font-weight:800;color:var(--pink-700)}
.bun-retail{font-size:14px;color:var(--ink-400);text-decoration:line-through}
.bun-save{font-size:12px;font-weight:700;color:#065F46;background:#D1FAE5;border-radius:var(--r-full);padding:2px 10px}
.bun-body .btn{margin-top:4px}

/* ---- Phase 06: Before/After testimonials ---- */
.ba-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.ba-visual{background:linear-gradient(135deg,#FFF5F8,#FFE4EC);border-radius:var(--r-xl);padding:32px;display:flex;flex-direction:column;gap:20px}
.ba-card-before,.ba-card-after{background:#fff;border-radius:var(--r-lg);padding:20px;text-align:center;box-shadow:var(--shadow-sm)}
.ba-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-500)}
.ba-skin{width:100%;height:80px;border-radius:var(--r-md);margin:10px 0}
.ba-skin-before{background:linear-gradient(135deg,#C4956A,#A0714F)}
.ba-skin-after{background:linear-gradient(135deg,#F5D5C3,#FACFBA)}
.ba-desc{font-size:13px;color:var(--ink-600);margin:0}
.ba-arrow{text-align:center;font-size:28px;color:var(--pink-400)}
.ba-stat-row{display:flex;gap:16px;justify-content:space-around;padding-top:12px;border-top:1px solid var(--pink-100)}
.ba-num{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--pink-700)}
.ba-lbl{font-size:12px;color:var(--ink-500);margin-top:2px}
.ba-quotes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ba-quote{background:var(--ink-50,#FAFAFA);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:10px}
.ba-q{font-size:14px;color:var(--ink-700);line-height:1.6;margin:0;font-style:italic;flex:1}
.ba-who{display:flex;align-items:center;gap:10px;margin-top:auto}

/* ---- Phase 07: Sticky discount bar ---- */
.disc-bar{position:fixed;bottom:0;left:0;right:0;z-index:60;background:linear-gradient(90deg,var(--pink-700),var(--pink-600));box-shadow:0 -4px 24px rgba(180,63,114,.25);transform:translateY(100%);transition:transform 350ms var(--ease-out)}
.disc-bar.show{transform:translateY(0)}
.disc-bar-inner{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 20px;flex-wrap:wrap}
.disc-bar-text{color:#fff;font-size:14px;font-weight:500;white-space:nowrap}
.disc-bar-form{display:flex;gap:8px;align-items:center}
.disc-bar-input{height:38px;padding:0 14px;border-radius:var(--r-full);border:0;font-size:14px;width:220px;outline:none}
.disc-bar-btn{height:38px;padding:0 18px;border-radius:var(--r-full);border:0;background:#fff;color:var(--pink-700);font-size:14px;font-weight:700;cursor:pointer;transition:opacity 180ms}
.disc-bar-btn:hover{opacity:.9}
.disc-bar-close{margin-left:8px;background:none;border:0;color:rgba(255,255,255,.7);font-size:22px;line-height:1;cursor:pointer;padding:4px 8px}
.disc-bar-close:hover{color:#fff}

/* ---- Responsive mobile ---- */
@media(max-width:768px){
  .fs-head{gap:12px}
  .fs-head .btn.ghost{display:none}
  .ba-layout{grid-template-columns:1fr}
  .ba-quotes{grid-template-columns:1fr}
  .bun-card{flex-direction:column;text-align:center}
  .bun-items-list{display:none}
  .disc-bar-input{width:150px}
  .disc-bar-text{font-size:12px}
  .bp-pills{padding:4px 8px 12px}
}
@media(max-width:480px){
  .disc-bar-form{display:none}
  .disc-bar-inner{justify-content:space-between}
}

/* ---- Product detail extras (Phase 5) ---- */
.p-brand{font-size:13px;color:var(--ink-500);margin-bottom:6px}
.pd-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.pd-tag{font-size:12px;font-weight:600;color:var(--pink-700);background:var(--pink-50);border:1px solid var(--pink-200);border-radius:var(--r-full);padding:3px 12px;text-decoration:none;transition:background 180ms}
.pd-tag:hover{background:var(--pink-100)}

/* ---- A1: Free ship progress bar ---- */
.freeship-bar{margin:10px 0 4px;padding:10px 14px;background:var(--pink-50);border-radius:var(--r-md);border:1px solid var(--pink-100)}
.freeship-msg{font-size:13px;color:var(--ink-700);margin-bottom:7px}
.freeship-track{height:6px;background:var(--pink-100);border-radius:var(--r-full);overflow:hidden}
.freeship-fill{height:100%;background:linear-gradient(90deg,var(--pink-400),var(--pink-600));border-radius:var(--r-full);transition:width .4s var(--ease-out);min-width:4px}

/* ---- A2: Toast notification ---- */
.toast-wrap{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:var(--ink-900);color:#fff;font-size:14px;font-weight:500;padding:10px 20px;border-radius:var(--r-full);box-shadow:0 4px 16px rgba(0,0,0,.18);opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s var(--ease-out);white-space:nowrap;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}

/* ============================================================
   ĐIỆN MÁY THU HIỀN — layout imported from Claude Design
   "Thu Hien Store v2.dc.html". Sections below carry the retail
   treatment: red header, category tiles, flash-sale block,
   filter sidebar, spec table and the deep-red footer.
   ============================================================ */

/* ---- Top sale strip ---- */
.dm-sale-strip{background:var(--yellow);padding:9px 24px;text-align:center;font-size:15px;font-weight:800;color:var(--yellow-ink);letter-spacing:0.01em}

/* ---- Red header (row 1: brand + search + tools, row 2: category nav) ---- */
.dm-head{background:var(--pink-500);position:sticky;top:0;z-index:50}
.dm-head-row{max-width:1200px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.dm-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;color:#fff}
.dm-brand-mark{background:#fff;border-radius:var(--r-md);padding:4px 7px;display:grid;place-items:center}
.dm-brand-mark img{height:36px;width:auto;display:block}
/* A brand logo that already carries its own wordmark gets more room and no
   text block beside it (see the header markup). The TH mark is two lines
   deep, so it needs real height to stay legible. */
.dm-brand-mark.has-logo{padding:6px 12px}
.dm-brand-mark.has-logo img{height:56px}
@media(max-width:820px){.dm-brand-mark.has-logo img{height:44px}}
.dm-brand-mark .dm-logo-fallback{font-size:24px;line-height:1.4}
.dm-brand-text{line-height:1.05}
.dm-brand-name{font-weight:800;font-size:19px;letter-spacing:-0.03em}
.dm-brand-sub{font-size:10px;font-weight:700;letter-spacing:0.16em;opacity:0.85}

.dm-search{flex:1 1 320px;min-width:0;display:flex;align-items:stretch;background:#fff;border-radius:var(--r-md);height:44px;position:relative}
.dm-search-cats{display:flex;align-items:center;gap:9px;padding:0 16px;border-right:1px solid var(--border-1);cursor:pointer;flex-shrink:0;border-radius:var(--r-md) 0 0 var(--r-md)}
.dm-search-cats:hover{background:var(--bg-soft)}
.dm-search-cats>span{font-size:14.5px;font-weight:600;color:var(--ink-900);white-space:nowrap}
.dm-search input{flex:1;min-width:0;border:none;outline:none;padding:0 16px;font-size:14.5px;color:var(--ink-900);font-family:var(--font-sans);background:transparent}
.dm-search button{width:52px;display:grid;place-items:center;flex-shrink:0;background:none;border:0;border-radius:0 var(--r-md) var(--r-md) 0}
.dm-search button:hover{background:var(--bg-soft)}

/* Category dropdown hanging off the search bar */
.dm-cat-menu{position:absolute;top:100%;left:0;margin-top:6px;min-width:250px;background:#fff;border:1px solid var(--border-1);border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:6px;display:none;z-index:60}
.dm-search-cats:hover .dm-cat-menu,.dm-cat-menu:hover{display:block}
.dm-cat-menu a{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:500;color:var(--ink-900)}
.dm-cat-menu a:hover{background:var(--pink-50);color:var(--pink-600)}
.dm-cat-menu .cnt{color:var(--ink-500);font-size:12px}

.dm-tools{display:flex;align-items:center;gap:22px;flex-shrink:0;color:#fff}
.dm-tool{display:flex;align-items:center;gap:9px;color:#fff}
.dm-tool:hover{opacity:0.85}
.dm-tool>span{font-size:14.5px;font-weight:600}
.dm-tool-ic{position:relative;display:grid;place-items:center}
.dm-badge{position:absolute;top:-6px;right:-8px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--yellow);color:var(--yellow-ink);font-size:11px;font-weight:800;display:grid;place-items:center}
.dm-hotline{display:flex;align-items:center;gap:9px;height:40px;padding:0 16px;border:1px solid rgba(255,255,255,0.55);border-radius:var(--r-md);color:#fff}
.dm-hotline:hover{background:rgba(255,255,255,0.14)}
.dm-hotline span{font-size:14.5px;font-weight:700}

/* Row 2: category links scroll horizontally on narrow screens while the CTA
   stays pinned to the right edge (a scrolling flex row cannot hold it there). */
.dm-nav{max-width:1200px;margin:0 auto;padding:0 24px 12px;display:flex;align-items:center;gap:12px}
.dm-nav-scroll{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.dm-nav-scroll::-webkit-scrollbar{display:none}
.dm-nav a{padding:7px 12px;border-radius:var(--r-md);font-size:14.5px;font-weight:600;color:#fff;white-space:nowrap}
.dm-nav a:hover{background:rgba(0,0,0,0.16)}
/* Sits outside the scrolling strip; the left shadow masks links sliding under it. */
.dm-nav-cta{margin-left:auto;flex-shrink:0;display:flex;align-items:center;gap:9px;padding:8px 16px;border-radius:var(--r-md);background:var(--pink-600);color:#fff;font-size:14.5px;font-weight:700;white-space:nowrap;box-shadow:-14px 0 14px -4px var(--pink-500)}
.dm-nav-cta:hover{background:#991B1B}

/* ---- Hero banner ---- */
.dm-banner{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--pink-700);aspect-ratio:1200/300;min-width:0}
.dm-banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dm-banner-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:0 44px;background:linear-gradient(90deg,rgba(127,29,29,0.92) 0%,rgba(127,29,29,0.6) 46%,rgba(127,29,29,0.05) 78%)}
.dm-banner-eyebrow{font-size:13px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:var(--yellow)}
.dm-banner-title{font-size:40px;font-weight:800;line-height:1.05;letter-spacing:-0.03em;color:#fff;max-width:520px;text-wrap:pretty;margin:0}
.dm-banner-sub{font-size:15px;color:rgba(255,255,255,0.86);max-width:420px}
.dm-banner-cta{align-self:flex-start;margin-top:8px;display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:999px;background:var(--yellow);color:var(--yellow-ink);font-weight:800;font-size:15px}
.dm-banner-cta:hover{background:var(--yellow-deep)}
@media(max-width:760px){
  .dm-banner{aspect-ratio:auto;min-height:300px}
  .dm-banner-in{padding:0 22px;background:linear-gradient(180deg,rgba(127,29,29,0.86),rgba(127,29,29,0.94))}
  .dm-banner-title{font-size:28px}
}

/* ---- Category tiles ---- */
.dm-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:20px 14px}
.dm-tile{display:flex;flex-direction:column;gap:10px;min-width:0}
.dm-tile-ic{position:relative;aspect-ratio:1/1;border-radius:var(--r-md);background:var(--bg-soft);display:grid;place-items:center;font-size:32px;transition:all 250ms var(--ease-out);overflow:hidden}
.dm-tile:hover .dm-tile-ic{background:var(--ink-100);transform:translateY(-3px)}
.dm-tile-ic img{width:100%;height:100%;object-fit:cover}
.dm-tile-badge{position:absolute;top:5px;right:7px;font-size:11.5px;font-weight:800;color:var(--pink-500)}
.dm-tile-label{font-size:13px;font-weight:500;color:var(--ink-900);text-align:center;line-height:1.35;text-wrap:pretty}

/* ---- Flash sale block ("Giờ vàng giá sốc") ---- */
.dm-flash{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--pink-300)}
.dm-flash-head{background:var(--pink-500);padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.dm-flash-title{font-size:18px;font-weight:800;color:#fff;letter-spacing:-0.01em}
.dm-flash-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dm-flash-clock{display:flex;gap:5px}
.dm-flash-clock b{background:var(--yellow);color:var(--yellow-ink);font-size:13px;font-weight:800;padding:4px 8px;border-radius:5px;min-width:26px;text-align:center}
.dm-flash-all{font-size:14px;font-weight:700;color:#fff}
/* auto-fit so a short rail fills the row, but cap each cell so 2–3 items don't
   stretch into oversized tiles (the square image would blow up the row height). */
.dm-flash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,220px));justify-content:start;background:#fff}
.dm-flash-item{padding:18px;border-right:1px solid var(--border-1);display:flex;flex-direction:column;gap:10px}
.dm-flash-item:hover{background:var(--bg-soft)}
.dm-flash-img{aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;background:var(--bg-soft);display:grid;place-items:center;font-size:30px}
.dm-flash-img img{width:100%;height:100%;object-fit:contain}
.dm-flash-name{font-size:13.5px;font-weight:500;color:var(--ink-900);line-height:1.4;min-height:38px;text-wrap:pretty}
.dm-flash-price{font-size:18px;font-weight:800;color:var(--pink-500);letter-spacing:-0.03em}
.dm-flash-track{height:7px;border-radius:999px;background:var(--pink-100);overflow:hidden}
.dm-flash-fill{height:100%;background:var(--pink-500)}
.dm-flash-sold{font-size:12px;color:var(--ink-500)}

/* ---- Trust badges ---- */
.dm-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.dm-trust-item{display:flex;align-items:center;gap:13px;padding:18px 20px;border-radius:var(--r-lg);background:var(--pink-50);border:1px solid var(--pink-200)}
.dm-trust-item svg{flex-shrink:0}
.dm-trust-t{font-weight:700;font-size:14.5px;color:var(--pink-600)}
.dm-trust-d{font-size:12.5px;color:var(--ink-500);margin-top:2px}

/* ---- Retail section shell ---- */
.dm-sec{max-width:1440px;margin:0 auto;padding:40px 24px 0}
.dm-sec-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;flex-wrap:wrap}
.dm-sec-head h2{margin:0;font-size:20px;font-weight:700;color:var(--ink-900);letter-spacing:-0.01em}
.dm-sec-more{font-weight:700;font-size:14px;color:var(--pink-500)}

/* ---- Product grid + card ---- */
.dm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}
.dm-card{position:relative;border:1px solid var(--border-1);border-radius:var(--r-lg);background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:all 250ms var(--ease-out)}
.dm-card-wish{position:absolute;top:10px;left:10px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.92);border:1px solid var(--border-1);display:grid;place-items:center;color:var(--ink-500);z-index:2;transition:all 180ms}
.dm-card-wish:hover{color:var(--pink-500);border-color:var(--pink-300)}
.dm-card-wish.active{color:var(--pink-500)}
.dm-card-wish.active svg{fill:var(--pink-500)}
.dm-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:var(--pink-300)}
.dm-card-img{position:relative;aspect-ratio:1/1;background:#fff;border-bottom:1px solid var(--border-1);display:block}
.dm-card-img img{width:100%;height:100%;object-fit:contain}
.dm-card-ph{width:100%;height:100%;display:grid;place-items:center;font-size:34px;background:var(--bg-soft)}
.dm-card-off{position:absolute;top:10px;right:10px;background:var(--pink-500);color:#fff;font-size:11px;font-weight:800;padding:4px 8px;border-radius:999px}
.dm-card-body{padding:14px 15px 17px;display:flex;flex-direction:column;gap:6px;flex:1}
.dm-card-brand{font-size:10.5px;font-weight:700;color:var(--ink-500);text-transform:uppercase;letter-spacing:0.08em}
.dm-card-name{font-weight:500;font-size:14px;color:var(--ink-900);line-height:1.4;min-height:39px;text-wrap:pretty}
.dm-card-meta{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-500)}
.dm-card-old{font-size:12px;color:var(--ink-500);text-decoration:line-through;min-height:17px}
.dm-card-price{font-size:17.5px;font-weight:800;color:var(--pink-500);letter-spacing:-0.03em}
.dm-card-foot{margin-top:auto;padding-top:10px}
.dm-card-add{margin-top:8px;text-align:center;padding:10px;border-radius:var(--r-md);border:1px solid var(--border-2);color:var(--ink-900);font-weight:700;font-size:14px;width:100%;background:#fff;transition:all 180ms;display:block}
.dm-card-add:hover{background:var(--pink-500);border-color:var(--pink-500);color:#fff}
.dm-card-add[disabled]{opacity:.5;cursor:not-allowed}
.dm-card-add[disabled]:hover{background:#fff;border-color:var(--border-2);color:var(--ink-900)}

/* ---- Catalog: sidebar filters + sort pills ---- */
.dm-cat-layout{display:grid;grid-template-columns:minmax(220px,250px) minmax(0,1fr);gap:32px;align-items:start}
@media(max-width:900px){.dm-cat-layout{grid-template-columns:1fr}}
.dm-aside{border:1px solid var(--border-1);border-radius:var(--r-lg);background:#fff;padding:22px;display:flex;flex-direction:column;gap:26px;min-width:0}
.dm-aside-t{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-500);margin-bottom:14px}
.dm-aside-list{display:flex;flex-direction:column;gap:3px}
.dm-aside-list a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-radius:var(--r-md);font-size:14px;font-weight:600;color:var(--ink-900)}
.dm-aside-list a:hover{background:var(--bg-soft)}
.dm-aside-list a.on{background:var(--pink-50);color:var(--pink-600)}
.dm-aside-list .cnt{font-size:12px;color:var(--ink-500);font-weight:500}
.dm-bands{display:flex;flex-wrap:wrap;gap:8px}
.dm-band{padding:7px 13px;border-radius:var(--r-full);border:1px solid var(--border-2);background:#fff;color:var(--ink-900);font-size:13px;font-weight:600}
.dm-band.on{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.dm-sorts{display:flex;gap:8px;flex-wrap:wrap}
.dm-sort{padding:8px 15px;border-radius:var(--r-md);border:1px solid var(--border-2);background:#fff;color:var(--ink-900);font-size:13.5px;font-weight:600}
.dm-sort.on{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.dm-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.dm-count{font-size:13.5px;color:var(--ink-500)}
.dm-crumb{font-size:13px;color:var(--ink-500);margin-bottom:14px}
.dm-h1{margin:0 0 10px;font-size:clamp(28px,3.2vw,44px);font-weight:800;letter-spacing:-0.015em;color:var(--ink-900);line-height:1.1}
.dm-brandbox{display:flex;flex-direction:column;gap:10px}
.dm-brandbox label{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-900);font-weight:500;cursor:pointer}
.dm-brandbox input{width:16px;height:16px;accent-color:var(--pink-500)}

/* ---- Product detail ---- */
.dm-pd{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:48px;align-items:start}
.dm-pd-main{border:1px solid var(--border-1);border-radius:var(--r-xl);background:#fff;aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center;font-size:56px}
.dm-pd-main img{width:100%;height:100%;object-fit:contain}
.dm-pd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.dm-pd-thumb{border:1px solid var(--border-1);border-radius:var(--r-md);aspect-ratio:1/1;overflow:hidden;background:#fff;padding:0}
.dm-pd-thumb.on{border:2px solid var(--pink-500)}
.dm-pd-thumb img{width:100%;height:100%;object-fit:cover}
.dm-pd-eyebrow{font-size:11px;font-weight:700;color:var(--ink-500);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:12px}
.dm-pd-title{margin:0 0 14px;font-size:clamp(22px,2.2vw,32px);font-weight:700;line-height:1.2;color:var(--ink-900);text-wrap:pretty}
.dm-pd-meta{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--ink-500);margin-bottom:26px;flex-wrap:wrap}
.dm-pd-price-box{padding:22px 0;border-top:1px solid var(--border-1);border-bottom:1px solid var(--border-1);margin-bottom:24px}
.dm-pd-prices{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.dm-pd-price{font-size:38px;font-weight:800;color:var(--pink-500);letter-spacing:-0.035em}
.dm-pd-old{font-size:16px;color:var(--ink-500);text-decoration:line-through}
.dm-pd-off{background:var(--pink-100);color:var(--pink-600);font-size:12.5px;font-weight:800;padding:4px 10px;border-radius:var(--r-full)}
.dm-pd-note{font-size:14px;color:var(--ink-500)}
.dm-perks{display:flex;flex-direction:column;gap:11px;margin-bottom:28px}
.dm-perk{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-700)}
.dm-perk svg{flex-shrink:0;margin-top:2px}
.dm-qty-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.dm-qty-row>span{font-size:13.5px;font-weight:600;color:var(--ink-500)}
.dm-qty{display:flex;align-items:center;border:1px solid var(--border-2);border-radius:var(--r-md);overflow:hidden}
.dm-qty button{width:40px;height:42px;display:grid;place-items:center;color:var(--ink-700);font-size:17px;background:#fff}
.dm-qty button:hover{background:var(--bg-soft)}
.dm-qty input{width:50px;text-align:center;font-weight:700;font-size:15.5px;color:var(--ink-900);border:0;outline:none;font-family:var(--font-sans)}
.dm-buy{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:12px}
.dm-btn-out{text-align:center;padding:16px;border-radius:var(--r-md);border:1px solid var(--border-2);background:#fff;color:var(--ink-900);font-weight:700;font-size:15.5px;width:100%}
.dm-btn-out:hover{border-color:var(--pink-400);color:var(--pink-600)}
.dm-btn-solid{text-align:center;padding:16px;border-radius:var(--r-md);background:var(--pink-500);color:#fff;font-weight:700;font-size:15.5px;box-shadow:var(--shadow-pink);border:0;width:100%;display:block}
.dm-btn-solid:hover{background:var(--pink-600)}
.dm-btn-solid:active{transform:scale(0.98)}
.dm-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.dm-contact a{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;border-radius:var(--r-md);border:1px solid var(--border-1);background:var(--bg-soft);font-weight:600;font-size:14px;color:var(--ink-900)}
.dm-contact a:hover{border-color:var(--pink-300)}
.dm-specs{border:1px solid var(--border-1);border-radius:var(--r-lg);overflow:hidden}
.dm-spec{display:grid;grid-template-columns:minmax(140px,190px) minmax(0,1fr);gap:16px;padding:14px 18px;border-bottom:1px solid var(--ink-100);background:#fff}
.dm-spec-k{font-size:13.5px;color:var(--ink-500)}
.dm-spec-v{font-size:13.5px;color:var(--ink-900);font-weight:500}
.dm-service{border:1px solid var(--border-1);border-radius:var(--r-lg);background:var(--bg-soft);padding:26px}
.dm-service-row{display:flex;justify-content:space-between;gap:16px;font-size:14px;margin-top:12px}
.dm-two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px;margin-top:64px;align-items:start}

/* ---- Cart / checkout ---- */
/* Form column gets the extra room; the summary only needs enough for figures.
   Falls back to one column below 900px. */
.dm-cart-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:28px;align-items:start}
@media(max-width:900px){.dm-cart-layout{grid-template-columns:1fr}}
.dm-panel{border:1px solid var(--border-1);border-radius:var(--r-lg);background:#fff;padding:26px}
.dm-panel h2{margin:0 0 20px;font-size:20px;font-weight:700;color:var(--ink-900)}
.dm-lines{border:1px solid var(--border-1);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.dm-line{display:flex;flex-wrap:wrap;gap:18px;align-items:center;padding:18px;border-bottom:1px solid var(--ink-100)}
.dm-line-img{width:82px;height:82px;flex-shrink:0;border-radius:var(--r-md);border:1px solid var(--border-1);overflow:hidden;background:#fff;display:grid;place-items:center;font-size:28px}
.dm-line-img img{width:100%;height:100%;object-fit:contain}
.dm-line-main{flex:1 1 180px;min-width:180px}
.dm-line-name{font-weight:600;font-size:14.5px;color:var(--ink-900);margin-bottom:5px;text-wrap:pretty}
.dm-line-sub{font-size:12.5px;color:var(--ink-500)}
.dm-line-rm{font-size:12.5px;color:var(--ink-500);margin-top:7px;text-decoration:underline;background:none;padding:0}
.dm-line-rm:hover{color:var(--pink-500)}
.dm-line-total{min-width:125px;margin-left:auto;text-align:right;font-weight:800;font-size:16.5px;color:var(--ink-900);letter-spacing:-0.02em}
.dm-field{min-width:0;display:flex;flex-direction:column;gap:6px}
.dm-field>span{font-size:13px;font-weight:600;color:var(--ink-900)}
.dm-field input,.dm-field textarea,.dm-field select{width:100%;min-width:0;padding:12px 14px;border:1px solid var(--border-2);border-radius:var(--r-md);font-size:14.5px;color:var(--ink-900);outline:none;font-family:var(--font-sans);background:#fff}
.dm-field textarea{min-height:88px;resize:vertical}
.dm-field input:focus,.dm-field textarea:focus,.dm-field select:focus{border-color:var(--pink-500);box-shadow:0 0 0 3px rgba(220,38,38,0.18)}
/* Fixed 2-up: auto-fit would spawn 4-5 skinny columns once the form column
   gets wide, leaving name/phone inputs far narrower than their content. */
.dm-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:560px){.dm-form-grid{grid-template-columns:1fr}}
.dm-form-grid .full{grid-column:1/-1}
.dm-pay{display:flex;flex-direction:column;gap:10px}
.dm-pay-opt{display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid var(--border-2);background:#fff;border-radius:var(--r-md);cursor:pointer}
.dm-pay-opt.on{border-color:var(--pink-500);background:var(--pink-50)}
.dm-pay-dot{width:19px;height:19px;flex-shrink:0;border-radius:50%;border:2px solid var(--border-2);display:grid;place-items:center}
.dm-pay-opt.on .dm-pay-dot{border-color:var(--pink-500)}
.dm-pay-dot i{width:9px;height:9px;border-radius:50%;background:transparent;display:block}
.dm-pay-opt.on .dm-pay-dot i{background:var(--pink-500)}
.dm-pay-l{font-weight:600;font-size:14.5px;color:var(--ink-900)}
.dm-pay-n{font-size:12.5px;color:var(--ink-500);margin-top:2px}
.dm-sum-rows{display:flex;flex-direction:column;gap:13px;padding-bottom:18px;border-bottom:1px solid var(--border-1)}
.dm-sum-row{display:flex;justify-content:space-between;gap:16px;font-size:14.5px}
.dm-sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 0 22px}
.dm-sum-total b{font-size:26px;font-weight:800;color:var(--ink-900);letter-spacing:-0.035em}
.dm-empty{border:1px solid var(--border-1);border-radius:var(--r-xl);padding:80px 32px;text-align:center;background:var(--bg-soft)}

/* ---- Deep-red footer ---- */
.dm-foot{background:var(--pink-700);color:var(--pink-200)}
.dm-foot-grid{max-width:1200px;margin:0 auto;padding:60px 24px 32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:44px}
.dm-foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.dm-foot-brand img{width:40px;height:40px;object-fit:contain;flex-shrink:0}
.dm-foot-brand .nm{font-weight:800;font-size:16px;color:#fff;letter-spacing:-0.02em}
.dm-foot p{font-size:14px;line-height:1.7;margin:0 0 18px;max-width:300px}
.dm-foot-t{font-size:11px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:16px}
.dm-foot-links{display:flex;flex-direction:column;gap:11px;font-size:14px}
.dm-foot-links a:hover{color:#fff}
.dm-foot-sub{display:flex;gap:8px}
.dm-foot-sub input{flex:1;min-width:0;padding:11px 13px;border-radius:var(--r-md);border:1px solid var(--pink-600);background:#991B1B;color:#fff;font-size:14px;outline:none;font-family:var(--font-sans)}
.dm-foot-sub input::placeholder{color:var(--pink-300)}
.dm-foot-sub button{padding:11px 18px;border-radius:var(--r-md);background:var(--pink-500);color:#fff;font-weight:700;font-size:14px;white-space:nowrap}
.dm-foot-sub button:hover{background:var(--pink-400)}
.dm-foot-bot{border-top:1px solid var(--pink-600)}
.dm-foot-bot-in{max-width:1200px;margin:0 auto;padding:20px 24px;display:flex;justify-content:space-between;gap:20px;font-size:13px;color:var(--pink-300);flex-wrap:wrap}

@media(max-width:820px){
  .dm-tools .dm-tool>span,.dm-hotline span{display:none}
  .dm-tools{gap:16px}
  .dm-search{order:3;flex-basis:100%}
  .dm-search-cats>span{display:none}
}


/* ---- Hero carousel (replaces the single static banner) ---- */
.dm-slider{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1200/300;min-width:0;background:var(--pink-700)}
.dm-slides{position:absolute;inset:0}
.dm-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 550ms var(--ease-out),visibility 550ms}
.dm-slide.on{opacity:1;visibility:visible}
.dm-slider .dm-banner-title{font-size:40px;font-weight:800;line-height:1.05;letter-spacing:-0.03em;color:#fff;max-width:520px;text-wrap:pretty;margin:0}

.dm-slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.86);color:var(--ink-900);display:grid;place-items:center;box-shadow:var(--shadow-sm);opacity:0;transition:opacity 220ms var(--ease-out),background 180ms}
.dm-slider:hover .dm-slider-arrow,.dm-slider-arrow:focus-visible{opacity:1}
.dm-slider-arrow:hover{background:#fff}
.dm-slider-arrow.prev{left:14px}
.dm-slider-arrow.next{right:14px}

.dm-slider-dots{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;justify-content:center;gap:8px}
.dm-dot{width:9px;height:9px;padding:0;border-radius:999px;background:rgba(255,255,255,0.45);transition:all 220ms var(--ease-out)}
.dm-dot:hover{background:rgba(255,255,255,0.7)}
.dm-dot.on{width:26px;background:var(--yellow)}

@media(max-width:760px){
  .dm-slider{aspect-ratio:auto;min-height:300px}
  .dm-slider .dm-banner-title{font-size:28px}
  .dm-slider-arrow{opacity:1;width:36px;height:36px}
  .dm-slider-arrow.prev{left:8px}
  .dm-slider-arrow.next{right:8px}
}

/* Respect users who ask for reduced motion: no auto-advance fade. */
@media(prefers-reduced-motion:reduce){
  .dm-slide{transition:none}
}

/* NOTE: the hero-slide manager styles live in admin.css — the admin layout
   does not load this stylesheet. */


/* ============================================================
   Product detail — retail buy-box layout
   ============================================================ */

/* ---- Breadcrumb ---- */
.dm-crumb .sep{margin:0 7px;color:var(--ink-300)}
.dm-crumb a:hover{color:var(--pink-600)}

/* ---- Gallery: stage, arrows, counter, zoom ---- */
.dm-gal{min-width:0}
.dm-gal-stage{position:relative}
.dm-gal-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.92);color:var(--ink-900);display:grid;place-items:center;box-shadow:var(--shadow-sm);opacity:0;transition:opacity 200ms var(--ease-out)}
.dm-gal-stage:hover .dm-gal-arrow,.dm-gal-arrow:focus-visible{opacity:1}
.dm-gal-arrow:hover{background:#fff}
.dm-gal-arrow.prev{left:12px}
.dm-gal-arrow.next{right:12px}
.dm-gal-zoom{position:absolute;right:56px;bottom:12px;z-index:3;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.92);color:var(--ink-700);display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.dm-gal-zoom:hover{background:#fff;color:var(--pink-500)}
.dm-gal-count{position:absolute;right:12px;bottom:12px;z-index:3;background:rgba(255,255,255,0.92);color:var(--ink-700);font-size:12px;font-weight:600;padding:5px 10px;border-radius:var(--r-full);box-shadow:var(--shadow-sm)}
.dm-gal-stage iframe{width:100%;height:100%;border:0;display:block}

/* ---- Gallery tab strip ---- */
.dm-gal-tabs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.dm-gal-tab{display:flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid var(--border-1);border-radius:var(--r-md);background:#fff;text-align:left;color:var(--ink-900);transition:all 180ms}
.dm-gal-tab:hover{border-color:var(--pink-300)}
.dm-gal-tab.on{border-color:var(--pink-500);background:var(--pink-50)}
.dm-gal-tab .thumb{width:42px;height:34px;border-radius:5px;overflow:hidden;background:var(--bg-soft);display:grid;place-items:center;flex-shrink:0}
.dm-gal-tab .thumb img{width:100%;height:100%;object-fit:cover}
.dm-gal-tab .thumb.vid{background:var(--pink-500);color:#fff;font-size:13px}
.dm-gal-tab .thumb.spec{color:var(--ink-500)}
.dm-gal-tab .lb{font-size:12.5px;font-weight:600;line-height:1.25;white-space:nowrap}
.dm-gal-tab.on .lb{color:var(--pink-600)}

/* ---- Assurance strip under the gallery ---- */
.dm-assure{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:20px}
.dm-assure-item{display:flex;align-items:flex-start;gap:11px;padding:14px 16px;border:1px solid var(--border-1);border-radius:var(--r-md);background:#fff}
.dm-assure-item svg{flex-shrink:0;margin-top:1px}
/* Brand red on the headline: bold alone did not separate it from the grey
   description line below. A shade darker than the icon keeps it readable. */
.dm-assure-item .t{font-size:13.5px;font-weight:700;color:var(--pink-600);line-height:1.35}
.dm-assure-item .d{font-size:12.5px;color:var(--ink-500);margin-top:2px;line-height:1.4}

/* ---- Flash-sale bar ---- */
.dm-flashbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:linear-gradient(90deg,var(--pink-600),var(--pink-500));border-radius:var(--r-md);
  padding:10px 14px;margin-bottom:18px;color:#fff}
.dm-flashbar-l{display:flex;align-items:center;gap:12px;flex:1 1 240px;min-width:0;flex-wrap:wrap}
.dm-flashbar-tag{font-size:14px;font-weight:800;letter-spacing:0.02em;white-space:nowrap}
.dm-flashbar-stock{font-size:12.5px;opacity:0.95;white-space:nowrap}
.dm-flashbar-track{flex:1 1 90px;min-width:70px;height:7px;border-radius:999px;background:rgba(255,255,255,0.3);overflow:hidden}
.dm-flashbar-fill{display:block;height:100%;background:var(--yellow);border-radius:999px}
.dm-flashbar-r{text-align:right;flex-shrink:0}
.dm-flashbar-lb{display:block;font-size:11px;opacity:0.9}
.dm-flashbar-clock{font-size:15px;font-weight:800;letter-spacing:0.04em;font-variant-numeric:tabular-nums}

/* ---- Price block ---- */
.dm-pd-prices{align-items:center}
.dm-price-label{font-size:14.5px;color:var(--ink-500);font-weight:500}
.dm-price-unit{font-size:14px;color:var(--ink-500)}
.dm-vat{background:var(--pink-100);color:var(--pink-600);font-size:12px;font-weight:700;padding:3px 9px;border-radius:var(--r-sm)}
.dm-price-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--ink-500);margin-top:4px}
.dm-off-text{color:var(--pink-500);font-weight:700}
.dm-save{color:var(--ink-700)}

/* ---- Spec strip (warranty / return / brand / origin) ---- */
.dm-specstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;
  background:var(--border-1);border:1px solid var(--border-1);border-radius:var(--r-md);
  overflow:hidden;margin-bottom:20px}
.dm-specstrip-i{background:#F0FDF4;padding:11px 12px;text-align:center}
.dm-specstrip-i .k{font-size:11.5px;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-specstrip-i .v{font-size:13.5px;font-weight:700;color:var(--ink-900);margin-top:3px;line-height:1.3}

/* ---- Promotions box ---- */
.dm-promo{position:relative;border:1px solid #93C5FD;border-radius:var(--r-md);padding:18px 16px 14px;margin-bottom:20px}
.dm-promo-t{position:absolute;top:-9px;left:14px;background:#fff;padding:0 8px;
  font-size:11.5px;font-weight:800;letter-spacing:0.06em;color:#1D4ED8}
.dm-promo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.dm-promo-list li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--ink-700)}
.dm-promo-list .n{flex-shrink:0;width:19px;height:19px;border-radius:50%;background:#DBEAFE;color:#1D4ED8;
  font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:1px}

/* ---- Primary CTA row ---- */
.dm-cta-row{display:flex;gap:10px;align-items:stretch;margin-bottom:12px}
.dm-cta-buy{width:100%;height:100%;min-height:64px;padding:10px 16px;border:0;border-radius:var(--r-md);
  background:var(--pink-500);color:#fff;box-shadow:var(--shadow-pink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.dm-cta-buy:hover{background:var(--pink-600)}
.dm-cta-buy:active{transform:scale(0.99)}
.dm-cta-buy .l1{font-size:17px;font-weight:800;letter-spacing:0.02em}
.dm-cta-buy .l2{font-size:11.5px;opacity:0.9;font-weight:500}
.dm-cta-cart{flex-shrink:0;width:64px;min-height:64px;border-radius:var(--r-md);
  border:1px solid var(--pink-300);background:var(--pink-50);color:var(--pink-600);
  display:grid;place-items:center}
.dm-cta-cart:hover{background:var(--pink-100);border-color:var(--pink-400)}

@media(max-width:600px){
  .dm-gal-tab .lb{display:none}
  .dm-gal-tab{padding:8px}
  .dm-cta-buy .l1{font-size:15.5px}
}


/* ============================================================
   Secondary storefront pages — account, auth, wishlist,
   order lookup, bundles. Same retail language as the rest.
   ============================================================ */

/* ---- Page header ---- */
.dm-page-head{margin-bottom:28px}
.dm-page-head h1{margin:0 0 8px;font-size:clamp(24px,3vw,36px);font-weight:800;letter-spacing:-0.015em;color:var(--ink-900);line-height:1.15}
/* Cap the measure: past ~75ch a line of prose gets hard to track back to. */
.dm-page-head p{margin:0;font-size:15px;color:var(--ink-500);line-height:1.6;max-width:70ch}

/* ---- Narrow card (login / register / lookup) ---- */
.dm-auth{max-width:460px;margin:0 auto}
.dm-auth-card{border:1px solid var(--border-1);border-radius:var(--r-lg);background:#fff;padding:32px 28px;box-shadow:var(--shadow-sm)}
.dm-auth-card h1{margin:0 0 6px;font-size:24px;font-weight:800;color:var(--ink-900);text-align:center}
.dm-auth-card .sub{text-align:center;color:var(--ink-500);font-size:14px;margin:0 0 24px}
.dm-auth-foot{text-align:center;font-size:14px;color:var(--ink-500);margin-top:18px}
.dm-auth-foot a{color:var(--pink-600);font-weight:600}
.dm-auth-alt{text-align:center;font-size:13px;margin-top:8px}
.dm-auth-alt a{color:var(--ink-500)}
.dm-auth-alt a:hover{color:var(--pink-600)}

/* ---- Account layout: sidebar + panel ---- */
.dm-acc{display:grid;grid-template-columns:minmax(200px,240px) minmax(0,1fr);gap:26px;align-items:start}
@media(max-width:820px){.dm-acc{grid-template-columns:1fr}}
.dm-acc-side{border:1px solid var(--border-1);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.dm-acc-user{padding:20px;border-bottom:1px solid var(--border-1);background:var(--pink-50)}
.dm-acc-av{width:44px;height:44px;border-radius:50%;background:var(--pink-500);color:#fff;display:grid;place-items:center;font-weight:800;font-size:17px;margin-bottom:10px}
.dm-acc-name{font-weight:700;font-size:15px;color:var(--ink-900)}
.dm-acc-mail{font-size:12.5px;color:var(--ink-500);margin-top:2px;word-break:break-all}
.dm-acc-nav{display:flex;flex-direction:column;padding:8px}
.dm-acc-nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--r-md);font-size:14px;font-weight:600;color:var(--ink-700)}
.dm-acc-nav a:hover{background:var(--bg-soft);color:var(--pink-600)}
.dm-acc-nav a.on{background:var(--pink-50);color:var(--pink-600)}
.dm-acc-nav a.danger:hover{color:var(--pink-600)}

/* ---- Stat tiles ---- */
.dm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:22px}
.dm-stat{border:1px solid var(--border-1);border-radius:var(--r-md);background:#fff;padding:16px 18px}
.dm-stat .n{font-size:24px;font-weight:800;color:var(--ink-900);letter-spacing:-0.02em;line-height:1.1}
.dm-stat .l{font-size:12.5px;color:var(--ink-500);margin-top:4px}

/* ---- Order list rows ---- */
.dm-orders{border:1px solid var(--border-1);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.dm-order{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--ink-100)}
.dm-order:last-child{border-bottom:0}
.dm-order-code{font-weight:700;font-size:14.5px;color:var(--ink-900);font-variant-numeric:tabular-nums}
.dm-order-date{font-size:12.5px;color:var(--ink-500);margin-top:2px}
.dm-order-total{margin-left:auto;font-weight:800;font-size:15.5px;color:var(--ink-900);white-space:nowrap}
/* Order-status pill. Deliberately NOT named .dm-badge — that class is the
   absolutely-positioned cart counter in the header and would drag this pill
   into the page corner. */
.dm-status{display:inline-block;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:var(--r-full);white-space:nowrap}
.dm-status.pending{background:#FEF3C7;color:#92400E}
.dm-status.confirmed{background:#DBEAFE;color:#1D4ED8}
.dm-status.shipping{background:#E0E7FF;color:#4338CA}
.dm-status.completed{background:#DCFCE7;color:#15803D}
.dm-status.cancelled{background:var(--ink-100);color:var(--ink-500)}
.dm-status.paid{background:#DCFCE7;color:#15803D}
.dm-status.unpaid{background:#FEE2E2;color:#B91C1C}

/* ---- Order tracking timeline ---- */
.dm-track{display:flex;flex-direction:column;gap:0;padding:4px 0}
.dm-track-step{display:flex;gap:14px;position:relative;padding-bottom:22px}
.dm-track-step:last-child{padding-bottom:0}
.dm-track-step::before{content:"";position:absolute;left:11px;top:26px;bottom:0;width:2px;background:var(--border-1)}
.dm-track-step:last-child::before{display:none}
.dm-track-step.done::before{background:var(--pink-400)}
.dm-track-dot{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:var(--ink-100);color:var(--ink-400);font-size:12px;font-weight:800;z-index:1}
.dm-track-step.done .dm-track-dot{background:var(--pink-500);color:#fff}
.dm-track-step.now .dm-track-dot{background:var(--pink-500);color:#fff;box-shadow:0 0 0 4px var(--pink-100)}
.dm-track-t{font-size:14.5px;font-weight:700;color:var(--ink-900);line-height:1.35}
.dm-track-step:not(.done) .dm-track-t{color:var(--ink-400);font-weight:600}
.dm-track-d{font-size:12.5px;color:var(--ink-500);margin-top:2px}

/* ---- Empty state ---- */
.dm-empty-ic{font-size:44px;margin-bottom:14px;line-height:1}
.dm-empty h2{margin:0 0 8px;font-size:19px;font-weight:700;color:var(--ink-900)}
.dm-empty p{margin:0 0 22px;color:var(--ink-500);font-size:14.5px}

/* ---- Bundle card ---- */
.dm-bundle-items{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:5px}
.dm-bundle-items li{font-size:12.5px;color:var(--ink-500);line-height:1.45}
.dm-save-tag{display:inline-block;background:var(--pink-100);color:var(--pink-600);font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:var(--r-full)}


/* ============================================================
   Checkout flow — cart → thanh toán → đặt thành công
   ============================================================ */

/* ---- Step indicator ---- */
.co-steps{display:flex;align-items:center;gap:0;margin:0 auto 32px;max-width:620px}
.co-step{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.co-step-n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font-size:13.5px;font-weight:800;background:var(--ink-100);color:var(--ink-400);transition:all 220ms var(--ease-out)}
.co-step-l{font-size:13.5px;font-weight:600;color:var(--ink-400);white-space:nowrap}
.co-step.done .co-step-n{background:var(--pink-100);color:var(--pink-600)}
.co-step.done .co-step-l{color:var(--ink-700)}
.co-step.on .co-step-n{background:var(--pink-500);color:#fff;box-shadow:0 0 0 4px var(--pink-100)}
.co-step.on .co-step-l{color:var(--ink-900);font-weight:700}
.co-line{flex:1;height:2px;background:var(--border-1);margin:0 12px;min-width:20px}
.co-line.done{background:var(--pink-300)}
@media(max-width:640px){
  .co-step-l{display:none}
  .co-line{margin:0 8px}
  .co-steps{max-width:280px}
}

/* ---- Line items with thumbnails in the summary ---- */
.co-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--ink-100)}
.co-item:last-of-type{border-bottom:0}
/* Both the thumbnail and the name are entity links back to the product/combo
   page — reset anchor defaults and add a visible hover so it reads as
   clickable, not just styled text. */
.co-item-img{width:52px;height:52px;flex-shrink:0;border-radius:var(--r-md);border:1px solid var(--border-1);
  background:#fff;overflow:hidden;display:grid;place-items:center;font-size:22px;position:relative;
  text-decoration:none;transition:border-color 150ms}
.co-item-img:hover{border-color:var(--pink-400)}
.co-item-img img{width:100%;height:100%;object-fit:contain}
.co-item-qty{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--ink-700);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.co-item-main{flex:1;min-width:0}
.co-item-name{font-size:13.5px;font-weight:600;color:var(--ink-900);line-height:1.4;text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.co-item-name:hover{color:var(--pink-600);text-decoration:underline}
.co-item-sub{font-size:12px;color:var(--ink-500);margin-top:2px}
.co-item-price{font-size:13.5px;font-weight:700;color:var(--ink-900);white-space:nowrap;text-align:right}

/* ---- Trust strip under the CTA ---- */
.co-trust{display:flex;flex-direction:column;gap:9px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border-1)}
.co-trust-i{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--ink-500);line-height:1.45}
.co-trust-i svg{flex-shrink:0;margin-top:1px}
.co-trust-i strong{color:var(--ink-700);font-weight:600}

/* ---- Free-shipping highlight row ---- */
.co-free{color:var(--pink-600);font-weight:700}
.co-free-tag{display:inline-flex;align-items:center;gap:5px;background:#DCFCE7;color:#15803D;
  font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:var(--r-full);margin-left:6px}

/* ---- Payment option: disabled / coming soon ---- */
.dm-pay-opt.off{opacity:.55;cursor:not-allowed;background:var(--bg-soft)}
.dm-pay-opt.off:hover{border-color:var(--border-2)}
.co-soon{display:inline-block;background:var(--ink-100);color:var(--ink-500);font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:var(--r-full);margin-left:8px;vertical-align:middle}

/* ---- Inline field validation ---- */
.dm-field.bad input,.dm-field.bad textarea{border-color:var(--pink-500);box-shadow:0 0 0 3px rgba(220,38,38,0.12)}
.dm-field.ok input{border-color:#86EFAC}
.co-err{display:none;font-size:12px;color:var(--pink-600);margin-top:5px;font-weight:500}
.dm-field.bad .co-err{display:block}
.dm-field .hint{font-size:12px;color:var(--ink-500);margin-top:5px}

/* ---- Sticky summary on desktop, sticky CTA bar on mobile ---- */
@media(min-width:901px){
  .co-sticky{position:sticky;top:96px}
}
.co-mobile-cta{display:none}
@media(max-width:900px){
  .co-mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;gap:12px;padding:12px 16px;background:#fff;
    border-top:1px solid var(--border-1);box-shadow:0 -4px 20px rgba(15,23,42,0.10)}
  .co-mobile-cta .amt{flex:1;min-width:0}
  .co-mobile-cta .amt small{display:block;font-size:11.5px;color:var(--ink-500)}
  .co-mobile-cta .amt b{font-size:18px;font-weight:800;color:var(--ink-900);letter-spacing:-0.02em}
  .co-mobile-cta button{flex:0 0 auto;width:auto;padding:14px 26px}
  /* Keep the last panel clear of the fixed bar. */
  body.has-cocta{padding-bottom:82px}
}

/* ---- Empty-cart / success polish ---- */
.co-note{text-align:center;font-size:12.5px;color:var(--ink-500);margin-top:14px;line-height:1.55}