/* ================================================================
   H'ISY FRIPERIE — Design System v1.0
   Caramel #C8956A | Brown #2D1505 | Cream #F5ECD7
   ================================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}

:root{
  --caramel:    #C8956A;
  --car-lt:     #D9A87C;
  --car-dk:     #A8734E;
  --brown:      #2D1505;
  --br-mid:     #4A2510;
  --br-lt:      #6B3A1F;
  --cream:      #F5ECD7;
  --cream-dk:   #E8D4B4;
  --cream-lt:   #FDF8F2;
  --border:     #E8D4B4;
  --text:       #2D1505;
  --muted:      #7A5C3E;
  --light:      #A8906E;
  --white:      #ffffff;
  --green:      #2E7D32;
  --green-bg:   #E8F5E9;

  --f-display: 'Playfair Display',Georgia,serif;
  --f-body:    'DM Sans',system-ui,sans-serif;
  --f-script:  'Satisfy',cursive;

  --r-sm:  6px; --r:12px; --r-lg:20px; --r-pill:9999px;
  --sh-sm: 0 2px 8px rgba(45,21,5,.07);
  --sh:    0 6px 24px rgba(45,21,5,.11);
  --sh-lg: 0 16px 48px rgba(45,21,5,.16);

  --nav-h: 68px;
  --max-w: 1240px;
}

body{font-family:var(--f-body);background:var(--cream-lt);color:var(--text);line-height:1.65;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:var(--f-body);font-size:inherit}

/* Layout */
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 32px}
.wrap-sm{max-width:820px;margin:0 auto;padding:0 32px}
.wrap-md{max-width:1000px;margin:0 auto;padding:0 32px}

/* Typography */
h1,h2,h3,h4{font-family:var(--f-display);color:var(--brown);line-height:1.15;font-weight:800}
h1{font-size:clamp(2rem,5vw,3.6rem)}
h2{font-size:clamp(1.5rem,3vw,2.3rem)}
h3{font-size:1.2rem}
h4{font-size:1rem;font-family:var(--f-body);font-weight:600}
p{color:var(--muted);line-height:1.7}
.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--car-dk);display:block;margin-bottom:8px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--r-pill);font-size:.875rem;font-weight:500;cursor:pointer;border:2px solid transparent;transition:all .22s ease;white-space:nowrap}
.btn-primary{background:var(--brown);color:var(--cream)}
.btn-primary:hover{background:var(--br-mid);transform:translateY(-2px);box-shadow:var(--sh)}
.btn-caramel{background:var(--caramel);color:var(--white)}
.btn-caramel:hover{background:var(--car-dk);transform:translateY(-2px);box-shadow:var(--sh)}
.btn-outline{background:transparent;color:var(--brown);border-color:var(--brown)}
.btn-outline:hover{background:var(--brown);color:var(--cream)}
.btn-outline-cream{background:transparent;color:var(--cream);border-color:rgba(245,236,215,.5)}
.btn-outline-cream:hover{background:var(--cream);color:var(--brown)}
.btn-ghost{background:transparent;color:var(--car-dk)}
.btn-ghost:hover{background:var(--cream)}
.btn-sm{padding:8px 18px;font-size:.8rem}
.btn-lg{padding:15px 34px;font-size:.95rem}
.btn-full{width:100%}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 11px;border-radius:var(--r-pill);font-size:.7rem;font-weight:600}
.badge-car{background:var(--caramel);color:white}
.badge-brown{background:var(--brown);color:var(--cream)}
.badge-cream{background:var(--cream);color:var(--brown);border:1px solid var(--border)}
.badge-success{background:var(--green-bg);color:var(--green)}
.badge-new{background:var(--car-lt);color:var(--brown)}

/* Forms */
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:.82rem;font-weight:500;color:var(--brown)}
.form-control{width:100%;padding:12px 15px;border:1.5px solid var(--border);border-radius:var(--r);background:white;color:var(--text);font-size:.9rem;transition:border-color .2s,box-shadow .2s;outline:none}
.form-control:focus{border-color:var(--caramel);box-shadow:0 0 0 3px rgba(200,149,106,.12)}
.form-control::placeholder{color:var(--light)}
.form-hint{font-size:.75rem;color:var(--muted)}
.form-error{font-size:.75rem;color:#c62828}
.input-wrap{position:relative}
.input-wrap .form-control{padding-left:42px}
.input-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:flex}

/* Cards */
.card{background:white;border-radius:var(--r-lg);border:1px solid var(--border);overflow:hidden}
.card-body{padding:24px}
.card-hover{transition:all .3s;cursor:pointer}
.card-hover:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--caramel)}

/* Section header */
.sec-head{text-align:center;margin-bottom:52px}
.sec-head h2{margin-bottom:10px}
.sec-head>p{max-width:480px;margin:0 auto;font-size:.95rem}
.sec-line{width:44px;height:3px;background:var(--caramel);border-radius:99px;margin:12px auto 0}

/* Page hero */
.page-hero{background:var(--cream);padding:48px 0 36px;border-bottom:1px solid var(--border)}
.page-hero h1{font-size:clamp(1.7rem,3.5vw,2.6rem);margin-bottom:8px}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);padding-bottom:16px}
.breadcrumb a:hover{color:var(--caramel)}
.breadcrumb .sep{opacity:.4}
.breadcrumb .cur{color:var(--brown);font-weight:500}

/* Header */
.site-header{position:sticky;top:0;z-index:200;background:var(--cream-lt);border-bottom:1px solid var(--border);padding: 20px 0; }
.header-inner{display:flex;align-items:center;justify-content:space-between;height:100%;gap:16px;}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-mark{width:36px;height:36px;background:var(--brown);border-radius:50%;display:grid;place-items:center}
.logo-mark span{font-family:var(--f-script);color:var(--caramel);font-size:.95rem;line-height:1}
.logo-name{font-family:var(--f-script);font-size:1.35rem;color:var(--brown);line-height:1}
.logo-tag{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block}
.main-nav{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.main-nav a{padding:7px 13px;border-radius:var(--r-pill);font-size:.83rem;color:var(--muted);transition:all .2s}
.main-nav a:hover,.main-nav a.active{background:var(--cream);color:var(--brown);font-weight:500}
.header-act{display:flex;align-items:center;gap:7px;flex-shrink:0}
.ico-btn{width:36px;height:36px;border-radius:50%;border:none;background:var(--cream);cursor:pointer;display:grid;place-items:center;transition:background .2s;position:relative;color:var(--brown)}
.ico-btn:hover{background:var(--cream-dk)}
.ico-btn .dot{position:absolute;top:1px;right:1px;width:15px;height:15px;background:var(--caramel);border-radius:50%;border:2px solid var(--cream-lt);font-size:.58rem;font-weight:700;color:white;display:grid;place-items:center}

/* Trust bar */
.trust-bar{background:var(--brown);padding:18px 0}
.trust-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.trust-it{display:flex;align-items:center;gap:10px;color:var(--cream);font-size:.88rem}
.trust-it strong{font-weight:600;display:block;font-size:.88rem}
.trust-it small{opacity:.65;font-size:.76rem}
.trust-ico{width:34px;height:34px;background:rgba(200,149,106,.2);border-radius:50%;display:grid;place-items:center;font-size:1rem;flex-shrink:0}

/* Product card */
.p-card{background:white;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);transition:all .3s;position:relative}
.p-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--caramel)}
.p-thumb{aspect-ratio:3/4;background:linear-gradient(145deg,var(--cream-dk),var(--car-lt));position:relative;overflow:hidden}
.p-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.p-card:hover .p-thumb img{transform:scale(1.05)}
.p-thumb-ph{width:100%;height:100%;display:grid;place-items:center;color:rgba(45,21,5,.22)}
.p-bads{position:absolute;top:9px;left:9px;display:flex;flex-direction:column;gap:5px}
.p-acts{position:absolute;top:9px;right:9px;display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateX(6px);transition:all .25s}
.p-card:hover .p-acts{opacity:1;transform:none}
.p-act-btn{width:32px;height:32px;border-radius:50%;background:white;border:none;cursor:pointer;display:grid;place-items:center;box-shadow:var(--sh-sm);transition:all .2s;font-size:.9rem}
.p-act-btn:hover{background:var(--caramel);color:white}
.p-info{padding:13px 15px 15px}
.p-stars{font-size:.72rem;color:var(--caramel);margin-bottom:3px}
.p-name{font-size:.88rem;font-weight:600;color:var(--brown);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-meta{font-size:.73rem;color:var(--muted);margin-bottom:7px}
.p-price{display:flex;align-items:baseline;gap:7px}
.p-now{font-family:var(--f-display);font-size:1.05rem;font-weight:700;color:var(--brown)}
.p-was{font-size:.76rem;text-decoration:line-through;color:var(--light)}

/* Footer — styles moved to hisy.css (.ft-* classes) */

/* Pagination */
.pagination{display:flex;align-items:center;gap:5px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.pg-btn{width:36px;height:36px;border-radius:var(--r);border:1.5px solid var(--border);background:white;font-size:.83rem;cursor:pointer;display:grid;place-items:center;transition:all .2s;color:var(--muted)}
.pg-btn:hover,.pg-btn.active{background:var(--brown);border-color:var(--brown);color:white}

/* Chips / filters */
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{padding:7px 15px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:white;font-size:.81rem;cursor:pointer;color:var(--muted);transition:all .2s}
.chip:hover,.chip.active{background:var(--brown);border-color:var(--brown);color:white}

/* Accordion */
.acc-item{border-bottom:1px solid var(--border)}
.acc-btn{width:100%;padding:17px 0;background:none;border:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:.93rem;font-weight:600;color:var(--brown);gap:14px;text-align:left}
.acc-ico{width:26px;height:26px;border-radius:50%;background:var(--cream);display:grid;place-items:center;font-size:.72rem;flex-shrink:0;transition:all .25s}
.acc-item.open .acc-ico{background:var(--caramel);color:white;transform:rotate(45deg)}
.acc-body{display:none;padding-bottom:17px;font-size:.88rem;color:var(--muted);line-height:1.75}
.acc-item.open .acc-body{display:block}

/* Steps row */
.steps-row{display:flex;align-items:flex-start;position:relative}
.steps-row::before{content:'';position:absolute;top:27px;left:8%;right:8%;height:2px;background:repeating-linear-gradient(90deg,var(--caramel) 0,var(--caramel) 7px,transparent 7px,transparent 15px)}
.step-it{flex:1;text-align:center;position:relative;z-index:1}
.step-num{width:54px;height:54px;border-radius:50%;background:white;border:2.5px solid var(--caramel);margin:0 auto 12px;display:grid;place-items:center;font-family:var(--f-display);font-size:1.15rem;font-weight:800;color:var(--brown);transition:all .3s}
.step-it:hover .step-num{background:var(--caramel);color:white;transform:scale(1.1)}
.step-title{font-size:.88rem;font-weight:600;color:var(--brown);margin-bottom:4px}
.step-desc{font-size:.78rem;color:var(--muted)}

/* Flash */
.flash{padding:12px 18px;border-radius:var(--r);font-size:.875rem;font-weight:500;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.flash-ok{background:var(--green-bg);color:var(--green)}
.flash-err{background:#FFEBEE;color:#B71C1C}
.flash-info{background:var(--cream);color:var(--brown);border:1px solid var(--border)}

/* Divider */
hr.sep{border:none;border-top:1px solid var(--border)}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}

/* (footer responsive moved to hisy.css) */
@keyframes slideInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.25,.46,.45,.94),transform .6s cubic-bezier(.25,.46,.45,.94)}
.reveal.in{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-24px);transition:opacity .6s cubic-bezier(.25,.46,.45,.94),transform .6s cubic-bezier(.25,.46,.45,.94)}
.reveal-left.in{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(24px);transition:opacity .6s cubic-bezier(.25,.46,.45,.94),transform .6s cubic-bezier(.25,.46,.45,.94)}
.reveal-right.in{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .5s cubic-bezier(.25,.46,.45,.94),transform .5s cubic-bezier(.25,.46,.45,.94)}
.reveal-scale.in{opacity:1;transform:none}

/* Stagger delays */
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
.d5{transition-delay:.40s}.d6{transition-delay:.48s}.d7{transition-delay:.56s}.d8{transition-delay:.64s}

/* Responsive */
@media(max-width:1024px){
  .main-nav{display:none}
}
@media(max-width:768px){
  .wrap,.wrap-sm,.wrap-md{padding:0 16px}
  .card-body{padding:16px}
  .steps-row{flex-wrap:wrap;gap:20px}
  .steps-row::before{display:none}
  .step-it{min-width:45%}
  .trust-row{justify-content:center}
  .trust-it{flex-direction:column;text-align:center;gap:6px}
  .btn-lg{padding:13px 24px;font-size:.88rem}
}
@media(max-width:480px){
  :root{--nav-h:60px}
  .step-it{min-width:100%}
  .trust-it{min-width:40%}
}/* ================================================================
   H'isy Friperie — Unified Design System (hisy.css)
   Merged: app.css + store.css + admin-unified.css + new components
   Brand: brun (#2D1505) + caramel (#C8956A) + crème (#F5ECD7)
   Context themes: ctx-admin, ctx-client, ctx-cashier, ctx-affiliate
   ================================================================ */

/* ═══ 1. DESIGN TOKENS ═══ */
:root {
  /* ── Brand (overridden by PHP — aligned with style.css) ── */
  --c1: #C8956A;          /* caramel doré — primary accent (= --caramel) */
  --c2: #2D1505;          /* brun foncé — text / headers (= --brown) */
  --c-accent: #7A5C3E;    /* brun moyen — muted text (= --muted) */
  --c-vintage: #F5ECD7;   /* crème chaud — surface container (= --cream) */
  --c-bg: #FDF8F2;        /* fond de page — background (= --cream-lt) */
  --c-text: #2D1505;      /* texte principal (= --text) */
  --c-success: #5D8C3E;   /* vert olive */
  --c-danger: #C75C3A;    /* terracotta */
  --c-warning: #D4A017;   /* or chaud */

  /* ── Surfaces ── */
  --card-bg: #ffffff;
  --card-border: rgba(45,21,5,0.03);
  --card-shadow: 0 0 2px rgba(45,21,5,0.08), 0 12px 24px -4px rgba(45,21,5,0.06);
  --card-radius: 12px;
  --input-bg: #ffffff;
  --input-border: rgba(45,21,5,0.12);
  --hover-bg: rgba(200,149,106,0.08);

  /* ── Elevation ── */
  --elevation-1: 0 1px 2px rgba(45,21,5,0.06), 0 1px 3px rgba(45,21,5,0.04);
  --elevation-2: 0 0 2px rgba(45,21,5,0.08), 0 12px 24px -4px rgba(45,21,5,0.06);
  --elevation-3: 0 4px 16px rgba(45,21,5,0.08), 0 2px 8px rgba(45,21,5,0.04);
  --surface-container: #F5ECD7;
  --outline: rgba(45,21,5,0.12);
  --outline-variant: rgba(45,21,5,0.06);

  /* ── Radius ── */
  --br-sm: 6px; --br-md: 12px; --br-lg: 20px; --br-xl: 20px; --br-pill: 9999px;

  /* ── Typography ── */
  --font-main: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-sec: 'Playfair Display', Georgia, serif;

  /* ── Misc ── */
  --shadow-color: 15 30% 20%;
  --surface: var(--card-bg);
  --surface-alt: #E8D4B4;
  --border-c: var(--card-border);
  --border-soft: rgba(45,21,5,0.04);
  --transition-default: 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── New Design System Aliases (style.css compat) ── */
  --caramel: var(--c1);
  --car-lt: #D9A87C;
  --car-dk: #A8734E;
  --brown: var(--c2);
  --br-mid: #4A2510;
  --br-lt: #6B3A1F;
  --cream: var(--c-vintage);
  --cream-dk: var(--surface-alt);
  --cream-lt: var(--c-bg);
  --border: var(--outline);
  --text: var(--c-text);
  --muted: var(--c-accent);
  --light: #A8906E;
  --white: #ffffff;
  --green: #2E7D32;
  --green-bg: #E8F5E9;
  --danger: var(--c-danger);
  --success: var(--c-success);
  --warning: var(--c-warning);

  /* ── Semantic colors ── */
  --star-filled: #f59e0b;
  --star-empty: #e2e8f0;
  --whatsapp: #25D366;
  --whatsapp-dk: #1DA851;
  --google-blue: #4285f4;
  --google-dk: #3367c4;
  --flash-red: #dc2626;

  /* ── Harmonized spacing ── */
  --section-py: clamp(48px, 6vw, 72px);
  --wrap-px: clamp(16px, 3vw, 32px);
  --card-gap: clamp(12px, 2vw, 20px);

  --f-display: var(--font-sec);
  --f-body: var(--font-main);
  --f-script: 'Satisfy', cursive;

  --r-sm: var(--br-sm);
  --r: var(--br-md);
  --r-lg: var(--br-lg);
  --r-pill: var(--br-pill);
  --sh-sm: var(--elevation-1);
  --sh: var(--elevation-2);
  --sh-lg: var(--elevation-3);

  --nav-h: 68px;
  --max-w: 1240px;

  /* ── Semantic Spacing ── */
  --space-page: 24px;
  --space-section: 32px;
  --space-card: 20px;
  --space-card-gap: 16px;
  --space-form-gap: 12px;
  --space-inline: 8px;
  --max-w-page: 1400px;
  --max-w-form: 640px;
  --max-w-text: 720px;
}

/* ═══ 2. RESET ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-main); background: var(--c-bg); color: var(--c-text); line-height: 1.6; transition: background 0.3s, color 0.3s; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
[x-cloak] { display: none !important; }
::selection { background: color-mix(in srgb, var(--c1), transparent 50%); color: var(--c2); }

/* ═══ 3. DISPLAY ═══ */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }

/* ═══ 4. POSITION ═══ */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { inset: 0; } .inset-y-0 { top: 0; bottom: 0; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.top-1 { top: 4px; } .top-1\/2 { top: 50%; } .top-4 { top: 16px; } .top-24 { top: 96px; } .top-full { top: 100%; }
.bottom-1 { bottom: 4px; } .bottom-6 { bottom: 24px; }
.left-1 { left: 4px; } .left-3 { left: 12px; } .left-4 { left: 16px; } .left-full { left: 100%; }
.right-1 { right: 4px; } .right-3 { right: 12px; } .right-4 { right: 16px; } .right-6 { right: 24px; }
.-top-1 { top: -4px; } .-top-1\.5 { top: -6px; } .-top-10 { top: -40px; }
.-bottom-2 { bottom: -8px; } .-bottom-4 { bottom: -16px; }
.-right-1 { right: -4px; } .-right-1\.5 { right: -6px; } .-right-2 { right: -8px; } .-right-4 { right: -16px; } .-right-10 { right: -40px; }
.-translate-y-1\/2 { transform: translateY(-50%); }

/* ═══ 5. FLEXBOX ═══ */
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1 1 0%; } .shrink-0 { flex-shrink: 0; } .grow { flex-grow: 1; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.content-start { align-content: flex-start; }

/* ═══ 6. GRID ═══ */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2; } .col-span-full { grid-column: 1 / -1; }

/* ═══ 7. SPACING ═══ */
.p-0 { padding: 0; }
.px-0 { padding-left: 0; padding-right: 0; }
.py-0 { padding-top: 0; padding-bottom: 0; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }
.pr-0 { padding-right: 0; }
.m-0 { margin: 0; }
.mx-0 { margin-left: 0; margin-right: 0; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }
.gap-0 { gap: 0; }
.w-0 { width: 0; }
.h-0 { height: 0; }
.p-0\.5 { padding: 2px; }
.px-0\.5 { padding-left: 2px; padding-right: 2px; }
.py-0\.5 { padding-top: 2px; padding-bottom: 2px; }
.pt-0\.5 { padding-top: 2px; }
.pb-0\.5 { padding-bottom: 2px; }
.pl-0\.5 { padding-left: 2px; }
.pr-0\.5 { padding-right: 2px; }
.m-0\.5 { margin: 2px; }
.mx-0\.5 { margin-left: 2px; margin-right: 2px; }
.my-0\.5 { margin-top: 2px; margin-bottom: 2px; }
.mt-0\.5 { margin-top: 2px; }
.mb-0\.5 { margin-bottom: 2px; }
.ml-0\.5 { margin-left: 2px; }
.mr-0\.5 { margin-right: 2px; }
.gap-0\.5 { gap: 2px; }
.w-0\.5 { width: 2px; }
.h-0\.5 { height: 2px; }
.p-1 { padding: 4px; }
.px-1 { padding-left: 4px; padding-right: 4px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.pt-1 { padding-top: 4px; }
.pb-1 { padding-bottom: 4px; }
.pl-1 { padding-left: 4px; }
.pr-1 { padding-right: 4px; }
.m-1 { margin: 4px; }
.mx-1 { margin-left: 4px; margin-right: 4px; }
.my-1 { margin-top: 4px; margin-bottom: 4px; }
.mt-1 { margin-top: 4px; }
.mb-1 { margin-bottom: 4px; }
.ml-1 { margin-left: 4px; }
.mr-1 { margin-right: 4px; }
.gap-1 { gap: 4px; }
.w-1 { width: 4px; }
.h-1 { height: 4px; }
.p-1\.5 { padding: 6px; }
.px-1\.5 { padding-left: 6px; padding-right: 6px; }
.py-1\.5 { padding-top: 6px; padding-bottom: 6px; }
.pt-1\.5 { padding-top: 6px; }
.pb-1\.5 { padding-bottom: 6px; }
.pl-1\.5 { padding-left: 6px; }
.pr-1\.5 { padding-right: 6px; }
.m-1\.5 { margin: 6px; }
.mx-1\.5 { margin-left: 6px; margin-right: 6px; }
.my-1\.5 { margin-top: 6px; margin-bottom: 6px; }
.mt-1\.5 { margin-top: 6px; }
.mb-1\.5 { margin-bottom: 6px; }
.ml-1\.5 { margin-left: 6px; }
.mr-1\.5 { margin-right: 6px; }
.gap-1\.5 { gap: 6px; }
.w-1\.5 { width: 6px; }
.h-1\.5 { height: 6px; }
.p-2 { padding: 8px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.pt-2 { padding-top: 8px; }
.pb-2 { padding-bottom: 8px; }
.pl-2 { padding-left: 8px; }
.pr-2 { padding-right: 8px; }
.m-2 { margin: 8px; }
.mx-2 { margin-left: 8px; margin-right: 8px; }
.my-2 { margin-top: 8px; margin-bottom: 8px; }
.mt-2 { margin-top: 8px; }
.mb-2 { margin-bottom: 8px; }
.ml-2 { margin-left: 8px; }
.mr-2 { margin-right: 8px; }
.gap-2 { gap: 8px; }
.w-2 { width: 8px; }
.h-2 { height: 8px; }
.p-2\.5 { padding: 10px; }
.px-2\.5 { padding-left: 10px; padding-right: 10px; }
.py-2\.5 { padding-top: 10px; padding-bottom: 10px; }
.pt-2\.5 { padding-top: 10px; }
.pb-2\.5 { padding-bottom: 10px; }
.pl-2\.5 { padding-left: 10px; }
.pr-2\.5 { padding-right: 10px; }
.m-2\.5 { margin: 10px; }
.mx-2\.5 { margin-left: 10px; margin-right: 10px; }
.my-2\.5 { margin-top: 10px; margin-bottom: 10px; }
.mt-2\.5 { margin-top: 10px; }
.mb-2\.5 { margin-bottom: 10px; }
.ml-2\.5 { margin-left: 10px; }
.mr-2\.5 { margin-right: 10px; }
.gap-2\.5 { gap: 10px; }
.w-2\.5 { width: 10px; }
.h-2\.5 { height: 10px; }
.p-3 { padding: 12px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.pt-3 { padding-top: 12px; }
.pb-3 { padding-bottom: 12px; }
.pl-3 { padding-left: 12px; }
.pr-3 { padding-right: 12px; }
.m-3 { margin: 12px; }
.mx-3 { margin-left: 12px; margin-right: 12px; }
.my-3 { margin-top: 12px; margin-bottom: 12px; }
.mt-3 { margin-top: 12px; }
.mb-3 { margin-bottom: 12px; }
.ml-3 { margin-left: 12px; }
.mr-3 { margin-right: 12px; }
.gap-3 { gap: 12px; }
.w-3 { width: 12px; }
.h-3 { height: 12px; }
.p-3\.5 { padding: 14px; }
.px-3\.5 { padding-left: 14px; padding-right: 14px; }
.py-3\.5 { padding-top: 14px; padding-bottom: 14px; }
.pt-3\.5 { padding-top: 14px; }
.pb-3\.5 { padding-bottom: 14px; }
.pl-3\.5 { padding-left: 14px; }
.pr-3\.5 { padding-right: 14px; }
.m-3\.5 { margin: 14px; }
.mx-3\.5 { margin-left: 14px; margin-right: 14px; }
.my-3\.5 { margin-top: 14px; margin-bottom: 14px; }
.mt-3\.5 { margin-top: 14px; }
.mb-3\.5 { margin-bottom: 14px; }
.ml-3\.5 { margin-left: 14px; }
.mr-3\.5 { margin-right: 14px; }
.gap-3\.5 { gap: 14px; }
.w-3\.5 { width: 14px; }
.h-3\.5 { height: 14px; }
.p-4 { padding: 16px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.pt-4 { padding-top: 16px; }
.pb-4 { padding-bottom: 16px; }
.pl-4 { padding-left: 16px; }
.pr-4 { padding-right: 16px; }
.m-4 { margin: 16px; }
.mx-4 { margin-left: 16px; margin-right: 16px; }
.my-4 { margin-top: 16px; margin-bottom: 16px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.ml-4 { margin-left: 16px; }
.mr-4 { margin-right: 16px; }
.gap-4 { gap: 16px; }
.w-4 { width: 16px; }
.h-4 { height: 16px; }
.p-5 { padding: 20px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.py-5 { padding-top: 20px; padding-bottom: 20px; }
.pt-5 { padding-top: 20px; }
.pb-5 { padding-bottom: 20px; }
.pl-5 { padding-left: 20px; }
.pr-5 { padding-right: 20px; }
.m-5 { margin: 20px; }
.mx-5 { margin-left: 20px; margin-right: 20px; }
.my-5 { margin-top: 20px; margin-bottom: 20px; }
.mt-5 { margin-top: 20px; }
.mb-5 { margin-bottom: 20px; }
.ml-5 { margin-left: 20px; }
.mr-5 { margin-right: 20px; }
.gap-5 { gap: 20px; }
.w-5 { width: 20px; }
.h-5 { height: 20px; }
.p-6 { padding: 24px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.pt-6 { padding-top: 24px; }
.pb-6 { padding-bottom: 24px; }
.pl-6 { padding-left: 24px; }
.pr-6 { padding-right: 24px; }
.m-6 { margin: 24px; }
.mx-6 { margin-left: 24px; margin-right: 24px; }
.my-6 { margin-top: 24px; margin-bottom: 24px; }
.mt-6 { margin-top: 24px; }
.mb-6 { margin-bottom: 24px; }
.ml-6 { margin-left: 24px; }
.mr-6 { margin-right: 24px; }
.gap-6 { gap: 24px; }
.w-6 { width: 24px; }
.h-6 { height: 24px; }
.p-7 { padding: 28px; }
.px-7 { padding-left: 28px; padding-right: 28px; }
.py-7 { padding-top: 28px; padding-bottom: 28px; }
.pt-7 { padding-top: 28px; }
.pb-7 { padding-bottom: 28px; }
.pl-7 { padding-left: 28px; }
.pr-7 { padding-right: 28px; }
.m-7 { margin: 28px; }
.mx-7 { margin-left: 28px; margin-right: 28px; }
.my-7 { margin-top: 28px; margin-bottom: 28px; }
.mt-7 { margin-top: 28px; }
.mb-7 { margin-bottom: 28px; }
.ml-7 { margin-left: 28px; }
.mr-7 { margin-right: 28px; }
.gap-7 { gap: 28px; }
.w-7 { width: 28px; }
.h-7 { height: 28px; }
.p-8 { padding: 32px; }
.px-8 { padding-left: 32px; padding-right: 32px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }
.pt-8 { padding-top: 32px; }
.pb-8 { padding-bottom: 32px; }
.pl-8 { padding-left: 32px; }
.pr-8 { padding-right: 32px; }
.m-8 { margin: 32px; }
.mx-8 { margin-left: 32px; margin-right: 32px; }
.my-8 { margin-top: 32px; margin-bottom: 32px; }
.mt-8 { margin-top: 32px; }
.mb-8 { margin-bottom: 32px; }
.ml-8 { margin-left: 32px; }
.mr-8 { margin-right: 32px; }
.gap-8 { gap: 32px; }
.w-8 { width: 32px; }
.h-8 { height: 32px; }
.p-9 { padding: 36px; }
.px-9 { padding-left: 36px; padding-right: 36px; }
.py-9 { padding-top: 36px; padding-bottom: 36px; }
.pt-9 { padding-top: 36px; }
.pb-9 { padding-bottom: 36px; }
.pl-9 { padding-left: 36px; }
.pr-9 { padding-right: 36px; }
.m-9 { margin: 36px; }
.mx-9 { margin-left: 36px; margin-right: 36px; }
.my-9 { margin-top: 36px; margin-bottom: 36px; }
.mt-9 { margin-top: 36px; }
.mb-9 { margin-bottom: 36px; }
.ml-9 { margin-left: 36px; }
.mr-9 { margin-right: 36px; }
.gap-9 { gap: 36px; }
.w-9 { width: 36px; }
.h-9 { height: 36px; }
.p-10 { padding: 40px; }
.px-10 { padding-left: 40px; padding-right: 40px; }
.py-10 { padding-top: 40px; padding-bottom: 40px; }
.pt-10 { padding-top: 40px; }
.pb-10 { padding-bottom: 40px; }
.pl-10 { padding-left: 40px; }
.pr-10 { padding-right: 40px; }
.m-10 { margin: 40px; }
.mx-10 { margin-left: 40px; margin-right: 40px; }
.my-10 { margin-top: 40px; margin-bottom: 40px; }
.mt-10 { margin-top: 40px; }
.mb-10 { margin-bottom: 40px; }
.ml-10 { margin-left: 40px; }
.mr-10 { margin-right: 40px; }
.gap-10 { gap: 40px; }
.w-10 { width: 40px; }
.h-10 { height: 40px; }
.p-11 { padding: 44px; }
.px-11 { padding-left: 44px; padding-right: 44px; }
.py-11 { padding-top: 44px; padding-bottom: 44px; }
.pt-11 { padding-top: 44px; }
.pb-11 { padding-bottom: 44px; }
.pl-11 { padding-left: 44px; }
.pr-11 { padding-right: 44px; }
.m-11 { margin: 44px; }
.mx-11 { margin-left: 44px; margin-right: 44px; }
.my-11 { margin-top: 44px; margin-bottom: 44px; }
.mt-11 { margin-top: 44px; }
.mb-11 { margin-bottom: 44px; }
.ml-11 { margin-left: 44px; }
.mr-11 { margin-right: 44px; }
.gap-11 { gap: 44px; }
.w-11 { width: 44px; }
.h-11 { height: 44px; }
.p-12 { padding: 48px; }
.px-12 { padding-left: 48px; padding-right: 48px; }
.py-12 { padding-top: 48px; padding-bottom: 48px; }
.pt-12 { padding-top: 48px; }
.pb-12 { padding-bottom: 48px; }
.pl-12 { padding-left: 48px; }
.pr-12 { padding-right: 48px; }
.m-12 { margin: 48px; }
.mx-12 { margin-left: 48px; margin-right: 48px; }
.my-12 { margin-top: 48px; margin-bottom: 48px; }
.mt-12 { margin-top: 48px; }
.mb-12 { margin-bottom: 48px; }
.ml-12 { margin-left: 48px; }
.mr-12 { margin-right: 48px; }
.gap-12 { gap: 48px; }
.w-12 { width: 48px; }
.h-12 { height: 48px; }
.p-14 { padding: 56px; }
.px-14 { padding-left: 56px; padding-right: 56px; }
.py-14 { padding-top: 56px; padding-bottom: 56px; }
.pt-14 { padding-top: 56px; }
.pb-14 { padding-bottom: 56px; }
.pl-14 { padding-left: 56px; }
.pr-14 { padding-right: 56px; }
.m-14 { margin: 56px; }
.mx-14 { margin-left: 56px; margin-right: 56px; }
.my-14 { margin-top: 56px; margin-bottom: 56px; }
.mt-14 { margin-top: 56px; }
.mb-14 { margin-bottom: 56px; }
.ml-14 { margin-left: 56px; }
.mr-14 { margin-right: 56px; }
.gap-14 { gap: 56px; }
.w-14 { width: 56px; }
.h-14 { height: 56px; }
.p-16 { padding: 64px; }
.px-16 { padding-left: 64px; padding-right: 64px; }
.py-16 { padding-top: 64px; padding-bottom: 64px; }
.pt-16 { padding-top: 64px; }
.pb-16 { padding-bottom: 64px; }
.pl-16 { padding-left: 64px; }
.pr-16 { padding-right: 64px; }
.m-16 { margin: 64px; }
.mx-16 { margin-left: 64px; margin-right: 64px; }
.my-16 { margin-top: 64px; margin-bottom: 64px; }
.mt-16 { margin-top: 64px; }
.mb-16 { margin-bottom: 64px; }
.ml-16 { margin-left: 64px; }
.mr-16 { margin-right: 64px; }
.gap-16 { gap: 64px; }
.w-16 { width: 64px; }
.h-16 { height: 64px; }
.p-20 { padding: 80px; }
.px-20 { padding-left: 80px; padding-right: 80px; }
.py-20 { padding-top: 80px; padding-bottom: 80px; }
.pt-20 { padding-top: 80px; }
.pb-20 { padding-bottom: 80px; }
.pl-20 { padding-left: 80px; }
.pr-20 { padding-right: 80px; }
.m-20 { margin: 80px; }
.mx-20 { margin-left: 80px; margin-right: 80px; }
.my-20 { margin-top: 80px; margin-bottom: 80px; }
.mt-20 { margin-top: 80px; }
.mb-20 { margin-bottom: 80px; }
.ml-20 { margin-left: 80px; }
.mr-20 { margin-right: 80px; }
.gap-20 { gap: 80px; }
.w-20 { width: 80px; }
.h-20 { height: 80px; }
.p-24 { padding: 96px; }
.px-24 { padding-left: 96px; padding-right: 96px; }
.py-24 { padding-top: 96px; padding-bottom: 96px; }
.pt-24 { padding-top: 96px; }
.pb-24 { padding-bottom: 96px; }
.pl-24 { padding-left: 96px; }
.pr-24 { padding-right: 96px; }
.m-24 { margin: 96px; }
.mx-24 { margin-left: 96px; margin-right: 96px; }
.my-24 { margin-top: 96px; margin-bottom: 96px; }
.mt-24 { margin-top: 96px; }
.mb-24 { margin-bottom: 96px; }
.ml-24 { margin-left: 96px; }
.mr-24 { margin-right: 96px; }
.gap-24 { gap: 96px; }
.w-24 { width: 96px; }
.h-24 { height: 96px; }
.p-32 { padding: 128px; }
.px-32 { padding-left: 128px; padding-right: 128px; }
.py-32 { padding-top: 128px; padding-bottom: 128px; }
.pt-32 { padding-top: 128px; }
.pb-32 { padding-bottom: 128px; }
.pl-32 { padding-left: 128px; }
.pr-32 { padding-right: 128px; }
.m-32 { margin: 128px; }
.mx-32 { margin-left: 128px; margin-right: 128px; }
.my-32 { margin-top: 128px; margin-bottom: 128px; }
.mt-32 { margin-top: 128px; }
.mb-32 { margin-bottom: 128px; }
.ml-32 { margin-left: 128px; }
.mr-32 { margin-right: 128px; }
.gap-32 { gap: 128px; }
.w-32 { width: 128px; }
.h-32 { height: 128px; }
.pl-\[3\.25rem\] { padding-left: 3.25rem; }
.ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; } .mt-auto { margin-top: auto; }

/* ═══ 8. SIZING ═══ */
.w-full { width: 100%; } .w-px { width: 1px; } .h-full { height: 100%; } .h-screen { height: 100vh; }
.w-52 { width: 13rem; }
.w-56 { width: 14rem; }
.w-64 { width: 16rem; }
.w-72 { width: 18rem; }
.w-80 { width: 20rem; }
.w-96 { width: 24rem; }
.w-\[380px\] { width: 380px; }
.min-w-0 { min-width: 0; } .min-w-\[200px\] { min-width: 200px; }
.min-h-0 { min-height: 0; } .min-h-screen { min-height: 100vh; }
.min-h-\[300px\] { min-height: 300px; }
.min-h-\[500px\] { min-height: 500px; }
.min-h-\[60vh\] { min-height: 60vh; }
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-\[200px\] { max-width: 200px; }
.max-h-32 { max-height: 8rem; }
.max-h-36 { max-height: 9rem; }
.max-h-64 { max-height: 16rem; }
.max-h-72 { max-height: 18rem; }
.max-h-\[400px\] { max-height: 400px; }
.max-h-\[500px\] { max-height: 500px; }
.max-h-80 { max-height: 20rem; }
.max-h-\[85vh\] { max-height: 85vh; }
.max-h-\[90vh\] { max-height: 90vh; }
.max-h-\[92vh\] { max-height: 92vh; }
.max-h-\[95vh\] { max-height: 95vh; }
.min-h-\[100px\] { min-height: 100px; }
.aspect-square { aspect-ratio: 1 / 1; }

/* ═══ 9. TYPOGRAPHY ═══ */
.text-xs { font-size: 12px; line-height: 16px; }
.text-sm { font-size: 14px; line-height: 20px; }
.text-base { font-size: 16px; line-height: 24px; }
.text-lg { font-size: 18px; line-height: 28px; }
.text-xl { font-size: 20px; line-height: 28px; }
.text-2xl { font-size: 24px; line-height: 32px; }
.text-3xl { font-size: 30px; line-height: 36px; }
.text-4xl { font-size: 36px; line-height: 40px; }
.text-5xl { font-size: 48px; line-height: 1; }
.text-6xl { font-size: 60px; line-height: 1; }
.text-9xl { font-size: 128px; line-height: 1; }
.text-\[6px\] { font-size: 6px; }
.text-\[7px\] { font-size: 7px; }
.text-\[8px\] { font-size: 8px; }
.text-\[9px\] { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[15rem\] { font-size: 15rem; } .text-\[7rem\] { font-size: 7rem; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }
.font-mono { font-family: ui-monospace, 'Fira Code', monospace; }
.italic { font-style: italic; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.tracking-tight { letter-spacing: -0.025em; } .tracking-tighter { letter-spacing: -0.05em; } .tracking-wider { letter-spacing: 0.05em; } .tracking-widest { letter-spacing: 0.1em; }
.tracking-\[0\.12em\] { letter-spacing: 0.12em; } .tracking-\[0\.2em\] { letter-spacing: 0.2em; } .tracking-\[0\.3em\] { letter-spacing: 0.3em; }
.whitespace-nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uppercase { text-transform: uppercase; } .normal-case { text-transform: none; } .underline { text-decoration: underline; } .break-all { word-break: break-all; }
.tracking-wide { letter-spacing: 0.025em; }

/* ═══ 10. BACKGROUNDS — NiceDash 2-Color Palette ═══ */
/* Solid */
.bg-white { background-color: var(--card-bg); }
.bg-transparent { background-color: transparent; }
.bg-primary { background-color: var(--c1); }
.bg-secondary { background-color: var(--c2); }
.bg-vintage { background-color: var(--surface-alt); }
.bg-danger { background-color: var(--c-danger); }
.bg-success { background-color: var(--c-success); }
.bg-page { background-color: var(--c-bg); }
.bg-warning { background-color: var(--c-warning); }
.bg-w { background-color: var(--card-bg); }

/* White/Black opacity */
.bg-white\/4 { background-color: rgba(255,255,255,0.04); }
.bg-white\/5 { background-color: rgba(255,255,255,0.05); }
.bg-white\/10 { background-color: rgba(255,255,255,0.1); }
.bg-white\/20 { background-color: rgba(255,255,255,0.2); }
.bg-white\/40 { background-color: rgba(255,255,255,0.4); }
.bg-white\/50 { background-color: rgba(255,255,255,0.5); }
.bg-black\/5 { background-color: rgba(0,0,0,0.05); }
.bg-black\/50 { background-color: rgba(0,0,0,0.5); }
.bg-black\/70 { background-color: rgba(0,0,0,0.7); }
.bg-black\/80 { background-color: rgba(0,0,0,0.8); }
.bg-black\/90 { background-color: rgba(0,0,0,0.9); }

/* Theme colors — opacity variants mapped to 2-color system */
.bg-primary\/5 { background-color: color-mix(in srgb, var(--c1), transparent 95%); }
.bg-primary\/10 { background-color: color-mix(in srgb, var(--c1), transparent 90%); }
.bg-primary\/20 { background-color: color-mix(in srgb, var(--c1), transparent 80%); }
.bg-secondary\/5 { background-color: color-mix(in srgb, var(--c2), transparent 95%); }
.bg-secondary\/10 { background-color: color-mix(in srgb, var(--c2), transparent 90%); }
.bg-secondary\/40 { background-color: color-mix(in srgb, var(--c2), transparent 60%); }
.bg-secondary\/80 { background-color: color-mix(in srgb, var(--c2), transparent 20%); }
.bg-secondary\/90 { background-color: color-mix(in srgb, var(--c2), transparent 10%); }
.bg-accent\/5  { background-color: color-mix(in srgb, var(--c-accent), transparent 95%); }
.bg-accent\/10 { background-color: color-mix(in srgb, var(--c-accent), transparent 90%); }
.bg-accent\/20 { background-color: color-mix(in srgb, var(--c-accent), transparent 80%); }
.bg-accent\/30 { background-color: color-mix(in srgb, var(--c-accent), transparent 70%); }
.bg-vintage\/10 { background-color: var(--hover-bg); }
.bg-vintage\/20 { background-color: var(--hover-bg); }
.bg-vintage\/30 { background-color: var(--surface-alt); }
.bg-vintage\/50 { background-color: var(--surface-alt); }
.bg-danger\/5  { background-color: color-mix(in srgb, var(--c-danger), transparent 92%); }
.bg-danger\/10 { background-color: color-mix(in srgb, var(--c-danger), transparent 88%); }
.bg-danger\/20 { background-color: color-mix(in srgb, var(--c-danger), transparent 80%); }
.bg-success\/5  { background-color: color-mix(in srgb, var(--c-success), transparent 92%); }
.bg-success\/10 { background-color: color-mix(in srgb, var(--c-success), transparent 88%); }
.bg-warning\/5  { background-color: color-mix(in srgb, var(--c-warning), transparent 92%); }
.bg-warning\/10 { background-color: color-mix(in srgb, var(--c-warning), transparent 88%); }
.bg-warning\/20 { background-color: color-mix(in srgb, var(--c-warning), transparent 80%); }
.bg-white\/95 { background-color: rgba(255,255,255,0.95); }

/* ── Named colors → mapped to 2-color system ── */
/* Greens → success tint */
.bg-green-50, .bg-green-500\/10, .bg-green-500\/20 { background-color: color-mix(in srgb, var(--c-success), transparent 90%); }
.bg-green-500, .bg-green-600 { background-color: var(--c-success); }
.bg-green-900\/30 { background-color: color-mix(in srgb, var(--c-success), transparent 75%); }
.bg-green-900\/40 { background-color: color-mix(in srgb, var(--c-success), transparent 70%); }
/* Reds → danger tint */
.bg-red-50, .bg-red-500\/10, .bg-red-500\/20 { background-color: color-mix(in srgb, var(--c-danger), transparent 90%); }
.bg-red-500 { background-color: var(--c-danger); }
.bg-red-900\/30 { background-color: color-mix(in srgb, var(--c-danger), transparent 75%); }
.bg-red-900\/40 { background-color: color-mix(in srgb, var(--c-danger), transparent 70%); }
/* Orange/Amber → warning (mapped to softer danger) */
.bg-orange-50, .bg-orange-500\/10, .bg-amber-50 { background-color: color-mix(in srgb, #ffb74d, transparent 90%); }
.bg-orange-500, .bg-amber-500 { background-color: #ffb74d; }
/* Blue/Purple/Pink → primary tint */
.bg-blue-50, .bg-purple-50 { background-color: color-mix(in srgb, var(--c2), transparent 94%); }
.bg-blue-500, .bg-pink-500 { background-color: var(--c2); }
/* Gray → surface */
.bg-gray-50 { background-color: var(--surface-alt); }
.bg-gray-100 { background-color: var(--surface-alt); }

/* Arbitrary colors (social) */
.bg-\[\#0088cc\]\/10 { background-color: rgba(0,136,204,0.1); }
.bg-\[\#1877F2\]\/10 { background-color: rgba(24,119,242,0.1); }
.bg-\[\#25D366\] { background-color: #25D366; }
.bg-\[\#25D366\]\/10 { background-color: rgba(37,211,102,0.1); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops, transparent)); }
.from-purple-50 { --tw-gradient-from: color-mix(in srgb, var(--c2), transparent 94%); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-yellow-50 { --tw-gradient-to: color-mix(in srgb, var(--c1), transparent 90%); }

/* ═══ 11. TEXT COLORS — Simplified ═══ */
.text-white { color: white; } .text-black { color: #000; }
.text-primary { color: var(--c1); }
.text-secondary { color: var(--c2); }
.text-accent { color: var(--c-accent); }
.text-danger { color: var(--c-danger); }
.text-success { color: var(--c-success); }
.text-dark { color: var(--c-text); }
.text-sub { color: var(--c-accent); }

/* White opacity */
.text-white\/10 { color: rgba(255,255,255,0.1); }
.text-white\/15 { color: rgba(255,255,255,0.15); }
.text-white\/20 { color: rgba(255,255,255,0.2); }
.text-white\/30 { color: rgba(255,255,255,0.3); }
.text-white\/40 { color: rgba(255,255,255,0.4); }
.text-white\/50 { color: rgba(255,255,255,0.5); }
.text-white\/60 { color: rgba(255,255,255,0.6); }

/* Theme opacity */
.text-accent\/5 { color: color-mix(in srgb, var(--c-accent), transparent 95%); }
.text-accent\/10 { color: color-mix(in srgb, var(--c-accent), transparent 90%); }
.text-accent\/20 { color: color-mix(in srgb, var(--c-accent), transparent 80%); }
.text-accent\/30 { color: color-mix(in srgb, var(--c-accent), transparent 70%); }
.text-accent\/40 { color: color-mix(in srgb, var(--c-accent), transparent 60%); }
.text-accent\/50 { color: color-mix(in srgb, var(--c-accent), transparent 50%); }
.text-accent\/60 { color: color-mix(in srgb, var(--c-accent), transparent 40%); }
.text-secondary\/5 { color: color-mix(in srgb, var(--c2), transparent 95%); }
.text-secondary\/40 { color: color-mix(in srgb, var(--c2), transparent 60%); }
.text-secondary\/60 { color: color-mix(in srgb, var(--c2), transparent 40%); }
.text-danger\/50 { color: color-mix(in srgb, var(--c-danger), transparent 50%); }
.text-danger\/60 { color: color-mix(in srgb, var(--c-danger), transparent 40%); }
.text-success\/40 { color: color-mix(in srgb, var(--c-success), transparent 60%); }
.text-success\/60 { color: color-mix(in srgb, var(--c-success), transparent 40%); }
.text-warning { color: var(--c-warning); }
.text-warning\/60 { color: color-mix(in srgb, var(--c-warning), transparent 40%); }
.text-accent\/25 { color: color-mix(in srgb, var(--c-accent), transparent 75%); }

/* ── Named → mapped to palette ── */
/* Greens → success */
.text-green-300, .text-green-400 { color: var(--c-success); opacity: 0.8; }
.text-green-500, .text-green-600, .text-green-700 { color: var(--c-success); }
.text-green-400\/60 { color: color-mix(in srgb, var(--c-success), transparent 40%); }
/* Reds → danger */
.text-red-300, .text-red-400 { color: var(--c-danger); opacity: 0.8; }
.text-red-500, .text-red-600, .text-red-700, .text-red-800 { color: var(--c-danger); }
.text-red-400\/60, .text-red-700\/60 { color: color-mix(in srgb, var(--c-danger), transparent 40%); }
/* Orange → warning */
.text-orange-400, .text-orange-500, .text-orange-600 { color: #ffb74d; }
.text-orange-400\/60 { color: rgba(255,183,77,0.6); }
.text-amber-600, .text-amber-800 { color: #ffb74d; }
/* Blues/Purple/Pink → primary */
.text-blue-400, .text-blue-500 { color: var(--c2); }
.text-purple-500 { color: var(--c2); }
.text-pink-400 { color: var(--c-danger); }
/* Gray → accent */
.text-gray-400 { color: var(--c-accent); }
.text-gray-700, .text-gray-800, .text-gray-900 { color: var(--c-text); }

/* Arbitrary (social) */
.text-\[\#0088cc\] { color: #0088cc; }
.text-\[\#1877F2\] { color: #1877F2; }
.text-\[\#25D366\] { color: #25D366; }

/* ═══ 12. BORDERS ═══ */
.border { border: 1px solid var(--card-border); }
.border-2 { border-width: 2px; }
.border-t { border-top: 1px solid var(--card-border); }
.border-b { border-bottom: 1px solid var(--card-border); }
.border-l { border-left: 1px solid var(--card-border); }
.border-r { border-right: 1px solid var(--card-border); }
.border-none { border: none; } .border-dashed { border-style: dashed; }

.border-white { border-color: white; }
.border-primary { border-color: var(--c1); }
.border-secondary { border-color: var(--c2); }
.border-white\/5 { border-color: rgba(255,255,255,0.05); }
.border-white\/10 { border-color: rgba(255,255,255,0.1); }
.border-white\/60 { border-color: rgba(255,255,255,0.6); }
.border-accent\/5 { border-color: var(--card-border); }
.border-accent\/10 { border-color: var(--card-border); }
.border-accent\/15 { border-color: color-mix(in srgb, var(--c-accent), transparent 85%); }
.border-accent\/20 { border-color: color-mix(in srgb, var(--c-accent), transparent 80%); }
.border-primary\/10 { border-color: color-mix(in srgb, var(--c1), transparent 90%); }
.border-primary\/20 { border-color: color-mix(in srgb, var(--c1), transparent 80%); }
.border-primary\/30 { border-color: color-mix(in srgb, var(--c1), transparent 70%); }
.border-primary\/40 { border-color: color-mix(in srgb, var(--c1), transparent 60%); }
.border-secondary\/10 { border-color: color-mix(in srgb, var(--c2), transparent 90%); }
.border-danger\/10 { border-color: color-mix(in srgb, var(--c-danger), transparent 90%); }
.border-danger\/20 { border-color: color-mix(in srgb, var(--c-danger), transparent 80%); }
.border-success\/20 { border-color: color-mix(in srgb, var(--c-success), transparent 80%); }
/* Named → mapped */
.border-gray-200 { border-color: var(--card-border); }
.border-red-100, .border-red-200, .border-red-500\/20 { border-color: color-mix(in srgb, var(--c-danger), transparent 80%); }
.border-green-500\/20 { border-color: color-mix(in srgb, var(--c-success), transparent 80%); }
.border-orange-200, .border-orange-500\/20 { border-color: rgba(255,183,77,0.2); }
.border-amber-200 { border-color: rgba(255,183,77,0.2); }

/* ═══ 13. BORDER RADIUS (NiceDash: softer, 12-20px) ═══ */
.rounded { border-radius: var(--br-sm); }
.rounded-md { border-radius: 6px; }
.rounded-lg { border-radius: var(--br-md); }
.rounded-xl { border-radius: var(--br-lg); }
.rounded-2xl { border-radius: var(--br-xl); }
.rounded-3xl { border-radius: 24px; }
.rounded-full { border-radius: 9999px; }
.rounded-t-lg { border-top-left-radius: var(--br-md); border-top-right-radius: var(--br-md); }
.rounded-t-2xl { border-top-left-radius: var(--br-xl); border-top-right-radius: var(--br-xl); }
.rounded-t-3xl { border-top-left-radius: 24px; border-top-right-radius: 24px; }
.rounded-\[2rem\] { border-radius: 2rem; }
.rounded-\[2\.5rem\] { border-radius: 2.5rem; }
.rounded-\[3rem\] { border-radius: 3rem; }
.rounded-\[3\.5rem\] { border-radius: 3.5rem; }

/* ═══ 14. SHADOWS — NiceDash clean ═══ */
.shadow-sm { box-shadow: var(--elevation-1); }
.shadow-md { box-shadow: var(--card-shadow); }
.shadow-lg { box-shadow: 0 0 2px rgba(45,21,5,0.1), 0 12px 24px -4px rgba(45,21,5,0.08); }
.shadow-xl { box-shadow: 0 0 2px rgba(45,21,5,0.12), 0 20px 40px -4px rgba(45,21,5,0.1); }
.shadow-2xl { box-shadow: 0 0 2px rgba(45,21,5,0.14), 0 24px 48px rgba(45,21,5,0.12); }
.shadow-inner { box-shadow: inset 0 2px 4px rgba(0,0,0,0.04); }
.shadow-secondary\/10 { box-shadow: 0 4px 12px color-mix(in srgb, var(--c2), transparent 90%); }
.shadow-secondary\/20 { box-shadow: 0 4px 12px color-mix(in srgb, var(--c2), transparent 80%); }
.ring-2 { box-shadow: 0 0 0 2px var(--card-border); }
.ring-primary { box-shadow: 0 0 0 2px var(--c1); }
.ring-primary\/30 { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c1), transparent 70%); }

/* ═══ 15. EFFECTS ═══ */
.opacity-0 { opacity: 0.0; }
.opacity-5 { opacity: 0.05; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-75 { opacity: 0.75; }
.opacity-\[0\.08\] { opacity: 0.08; }
.transition { transition: color,background-color,border-color,box-shadow,transform,opacity 150ms cubic-bezier(0.4,0,0.2,1); }
.transition-all { transition: all 150ms cubic-bezier(0.4,0,0.2,1); }
.transition-colors { transition: color,background-color,border-color 150ms ease; }
.transition-opacity { transition: opacity 150ms ease; }
.transition-shadow { transition: box-shadow 150ms ease; }
.transition-transform { transition: transform 150ms ease; }
.ease-out { transition-timing-function: cubic-bezier(0,0,0.2,1); }
.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.duration-700 { transition-duration: 700ms; }
.duration-1000 { transition-duration: 1000ms; }

/* ═══ 16. MISC ═══ */
.overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .overscroll-contain { overscroll-behavior: contain; }
.cursor-pointer { cursor: pointer; } .object-cover { object-fit: cover; } .object-contain { object-fit: contain; }
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
.resize-none { resize: none; } .float-right { float: right; } .pointer-events-none { pointer-events: none; }
.rotate-12 { transform: rotate(12deg); }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-\[60\] { z-index: 60; } .z-\[70\] { z-index: 70; }
.backdrop-blur { backdrop-filter: blur(8px); } .backdrop-blur-sm { backdrop-filter: blur(4px); } .backdrop-blur-md { backdrop-filter: blur(12px); }
.drop-shadow-lg { filter: drop-shadow(0 10px 8px rgba(0,0,0,0.04)) drop-shadow(0 4px 3px rgba(0,0,0,0.1)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* ═══ 17. SPACE & DIVIDE ═══ */
.space-y-0 > * + * { margin-top: 0; }
.space-y-0\.5 > * + * { margin-top: 2px; }
.space-y-1 > * + * { margin-top: 4px; }
.space-y-1\.5 > * + * { margin-top: 6px; }
.space-y-2 > * + * { margin-top: 8px; }
.space-y-2\.5 > * + * { margin-top: 10px; }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-3\.5 > * + * { margin-top: 14px; }
.space-y-4 > * + * { margin-top: 16px; }
.space-y-5 > * + * { margin-top: 20px; }
.space-y-6 > * + * { margin-top: 24px; }
.space-y-7 > * + * { margin-top: 28px; }
.space-y-8 > * + * { margin-top: 32px; }
.space-y-9 > * + * { margin-top: 36px; }
.space-y-10 > * + * { margin-top: 40px; }
.space-y-11 > * + * { margin-top: 44px; }
.space-y-12 > * + * { margin-top: 48px; }
.space-y-14 > * + * { margin-top: 56px; }
.space-y-16 > * + * { margin-top: 64px; }
.space-y-20 > * + * { margin-top: 80px; }
.space-y-24 > * + * { margin-top: 96px; }
.space-y-32 > * + * { margin-top: 128px; }
.divide-y > * + * { border-top: 1px solid var(--card-border); }
.divide-accent\/5 > * + * { border-color: var(--card-border); }
.divide-white\/5 > * + * { border-color: rgba(255,255,255,0.05); }

/* ═══ 18. HOVER STATES ═══ */
.hover\:bg-vintage:hover { background-color: var(--hover-bg); }
.hover\:bg-vintage\/20:hover { background-color: var(--hover-bg); }
.hover\:bg-vintage\/30:hover { background-color: var(--surface-alt); }
.hover\:bg-vintage\/50:hover { background-color: var(--surface-alt); }
.hover\:bg-primary:hover { background-color: var(--c1); }
.hover\:bg-primary\/5:hover { background-color: color-mix(in srgb,var(--c1),transparent 95%); }
.hover\:bg-primary\/20:hover { background-color: color-mix(in srgb,var(--c1),transparent 80%); }
.hover\:bg-primary\/80:hover { background-color: color-mix(in srgb,var(--c1),transparent 20%); }
.hover\:bg-secondary\/90:hover { background-color: color-mix(in srgb,var(--c2),transparent 10%); }
.hover\:bg-danger:hover { background-color: var(--c-danger); }
.hover\:bg-danger\/10:hover { background-color: color-mix(in srgb,var(--c-danger),transparent 90%); }
.hover\:bg-success:hover { background-color: var(--c-success); }
.hover\:bg-success\/20:hover { background-color: color-mix(in srgb,var(--c-success),transparent 80%); }
.hover\:bg-accent\/10:hover { background-color: color-mix(in srgb,var(--c-accent),transparent 90%); }
.hover\:bg-gray-50\/50:hover { background-color: color-mix(in srgb, var(--surface-alt), transparent 50%); }
.hover\:bg-black\/10:hover { background-color: rgba(0,0,0,0.06); }
.hover\:bg-white\/5:hover { background-color: rgba(255,255,255,0.05); }
.hover\:bg-white\/10:hover { background-color: rgba(255,255,255,0.1); }
.hover\:bg-white\/20:hover { background-color: rgba(255,255,255,0.15); }
.hover\:bg-red-50:hover { background-color: color-mix(in srgb,var(--c-danger),transparent 92%); }
.hover\:bg-green-600:hover { background-color: var(--c-success); }
.hover\:bg-orange-500:hover { background-color: #ffb74d; }
.hover\:bg-\[\#0088cc\]\/20:hover { background-color: rgba(0,136,204,0.2); }
.hover\:bg-\[\#1877F2\]\/20:hover { background-color: rgba(24,119,242,0.2); }
.hover\:bg-\[\#25D366\]\/20:hover { background-color: rgba(37,211,102,0.2); }

.hover\:text-primary:hover { color: var(--c1); }
.hover\:text-secondary:hover { color: var(--c2); }
.hover\:text-danger:hover { color: var(--c-danger); }
.hover\:text-white:hover { color: white; }
.hover\:text-red-400:hover { color: var(--c-danger); }
.hover\:text-red-700:hover { color: var(--c-danger); }
.hover\:text-green-700:hover { color: var(--c-success); }
.hover\:underline:hover { text-decoration: underline; }
.hover\:border-primary:hover { border-color: var(--c1); }
.hover\:border-primary\/30:hover { border-color: color-mix(in srgb, var(--c1), transparent 70%); }
.hover\:border-primary\/40:hover { border-color: color-mix(in srgb, var(--c1), transparent 60%); }
.hover\:opacity-80:hover { opacity: 0.8; } .hover\:opacity-90:hover { opacity: 0.9; }
.hover\:shadow-md:hover { box-shadow: var(--card-shadow); }
.hover\:shadow-lg:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04); }
.hover\:shadow-xl:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04); }
.hover\:shadow-secondary\/25:hover { box-shadow: 0 4px 16px color-mix(in srgb, var(--c2), transparent 75%); }
.hover\:scale-105:hover { transform: scale(1.05); } .hover\:scale-110:hover { transform: scale(1.1); }
.hover\:scale-\[1\.01\]:hover { transform: scale(1.01); } .hover\:scale-\[1\.02\]:hover { transform: scale(1.02); }
.hover\:-translate-y-0\.5:hover { transform: translateY(-2px); }

/* ═══ 19. FOCUS / ACTIVE / DISABLED ═══ */
.focus\:bg-white:focus { background-color: var(--card-bg); }
.focus\:border-primary:focus { border-color: var(--c1); }
.focus\:border-secondary:focus { border-color: var(--c2); }
.focus\:ring-1:focus { box-shadow: 0 0 0 1px var(--c1); }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--c1); }
.focus\:ring-4:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c1), transparent 70%); }
.focus\:ring-primary:focus { box-shadow: 0 0 0 2px var(--c1); }
.focus\:ring-primary\/10:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c1), transparent 90%); }
.focus\:ring-primary\/20:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c1), transparent 80%); }
.focus\:border-primary\/30:focus { border-color: color-mix(in srgb, var(--c1), transparent 70%); }
.focus\:ring-secondary:focus { box-shadow: 0 0 0 2px var(--c2); }
.focus\:ring-secondary\/10:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c2), transparent 90%); }
.active\:scale-95:active { transform: scale(0.95); }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.disabled\:grayscale:disabled { filter: grayscale(100%); }
.disabled\:hover\:scale-100:disabled:hover { transform: scale(1); }
.disabled\:opacity-30:disabled { opacity: 0.3; }
.disabled\:opacity-50:disabled { opacity: 0.5; }
.last\:border-0:last-child { border-width: 0; }

/* ═══ 20. FILE INPUT ═══ */
.file\:bg-primary::file-selector-button { background-color: var(--c1); }
.file\:bg-secondary::file-selector-button { background-color: var(--c2); }
.file\:border-0::file-selector-button { border: 0; }
.file\:cursor-pointer::file-selector-button { cursor: pointer; }
.file\:font-black::file-selector-button { font-weight: 700; }
.file\:mr-2::file-selector-button { margin-right: 8px; }
.file\:mr-3::file-selector-button { margin-right: 12px; }
.file\:mr-4::file-selector-button { margin-right: 16px; }
.file\:px-2::file-selector-button { padding-left:8px;padding-right:8px; }
.file\:px-3::file-selector-button { padding-left:12px;padding-right:12px; }
.file\:px-4::file-selector-button { padding-left:16px;padding-right:16px; }
.file\:py-1::file-selector-button { padding-top:4px;padding-bottom:4px; }
.file\:py-1\.5::file-selector-button { padding-top:6px;padding-bottom:6px; }
.file\:py-2::file-selector-button { padding-top:8px;padding-bottom:8px; }
.file\:rounded-lg::file-selector-button { border-radius: var(--br-md); }
.file\:rounded-md::file-selector-button { border-radius: var(--br-sm); }
.file\:rounded-xl::file-selector-button { border-radius: var(--br-lg); }
.file\:text-\[8px\]::file-selector-button { font-size:8px; }
.file\:text-\[9px\]::file-selector-button { font-size:9px; }
.file\:text-\[10px\]::file-selector-button { font-size:10px; }
.file\:text-primary::file-selector-button { color: var(--c1); }
.file\:text-secondary::file-selector-button { color: var(--c2); }
.file\:uppercase::file-selector-button { text-transform: uppercase; }

/* ═══ 21. GROUP / PEER / PLACEHOLDER ═══ */
.group-hover\:block { display: none; }
.group:hover .group-hover\:block { display: block; }
.group-hover\:opacity-100 { opacity: 0; transition: opacity 200ms; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group-hover\:rotate-2 { transform: rotate(0); }
.group:hover .group-hover\:rotate-2 { transform: rotate(2deg); }
.peer:checked ~ .peer-checked\:bg-primary\/5 { background-color: color-mix(in srgb, var(--c1), transparent 95%); }
.peer:checked ~ .peer-checked\:bg-secondary { background-color: var(--c2); }
.peer:checked ~ .peer-checked\:bg-success { background-color: var(--c-success); }
.peer:checked ~ .peer-checked\:border-primary { border-color: var(--c1); }
.peer:checked ~ .peer-checked\:text-primary { color: var(--c1); }
.peer:focus ~ .peer-focus\:ring-2 { box-shadow: 0 0 0 2px var(--c1); }
.peer:focus ~ .peer-focus\:ring-primary\/20 { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c1), transparent 80%); }
/* Toggle switch pseudo-elements */
.after\:content-\[\'\'\]::after { content: ''; }
.after\:absolute::after { position: absolute; }
.after\:top-\[2px\]::after { top: 2px; }
.after\:left-\[2px\]::after { left: 2px; }
.after\:bg-white::after { background-color: white; }
.after\:rounded-full::after { border-radius: 9999px; }
.after\:h-5::after { height: 20px; }
.after\:w-5::after { width: 20px; }
.after\:transition-all::after { transition: all 150ms ease; }
.peer:checked ~ .peer-checked\:after\:translate-x-full::after { transform: translateX(100%); }
.peer:checked ~ .peer-checked\:after\:border-white::after { border-color: white; }
.placeholder-accent\/30::placeholder { color: color-mix(in srgb, var(--c-accent), transparent 70%); }
.placeholder-accent\/40::placeholder { color: color-mix(in srgb, var(--c-accent), transparent 60%); }
.placeholder-accent\/50::placeholder { color: color-mix(in srgb, var(--c-accent), transparent 50%); }
.placeholder-white\/15::placeholder { color: rgba(255,255,255,0.15); }
.placeholder-white\/20::placeholder { color: rgba(255,255,255,0.2); }
.placeholder-white\/30::placeholder { color: rgba(255,255,255,0.3); }


/* ═══ 22b. MATERIAL DESIGN 3 HELPERS ═══ */
.m3-card {
  background: var(--card-bg);
  border-radius: var(--br-lg);
  box-shadow: var(--elevation-2);
  border: 1px solid var(--outline-variant);
}
.m3-card-elevated {
  background: var(--card-bg);
  border-radius: var(--br-lg);
  box-shadow: var(--elevation-3);
}
.m3-card-outlined {
  background: var(--card-bg);
  border-radius: var(--br-lg);
  border: 1px solid var(--outline);
}
.m3-surface { background: var(--surface-container); }
.m3-outline { border-color: var(--outline); }
.m3-outline-variant { border-color: var(--outline-variant); }

/* ═══ 23. ANIMATIONS & SCROLLBAR ═══ */
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.5 } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }

/* ═══ 24. RESPONSIVE: sm (640px+) ═══ */
@media (min-width: 640px) {
  .sm\:block { display: block; }
  .sm\:hidden { display: none; }
  .sm\:inline { display: inline; }
  .sm\:flex { display: flex; }
  .sm\:grid { display: grid; }
  .sm\:items-center { align-items: center; }
  .sm\:items-end { align-items: flex-end; }
  .sm\:table-cell { display: table-cell; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:col-span-1 { grid-column: span 1; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .sm\:p-0 { padding: 0; }
  .sm\:px-0 { padding-left: 0; padding-right: 0; }
  .sm\:py-0 { padding-top: 0; padding-bottom: 0; }
  .sm\:gap-0 { gap: 0; }
  .sm\:mt-0 { margin-top: 0; }
  .sm\:mb-0 { margin-bottom: 0; }
  .sm\:mr-0 { margin-right: 0; }
  .sm\:mx-0 { margin-left: 0; margin-right: 0; }
  .sm\:w-0 { width: 0; }
  .sm\:h-0 { height: 0; }
  .sm\:p-0\.5 { padding: 2px; }
  .sm\:px-0\.5 { padding-left: 2px; padding-right: 2px; }
  .sm\:py-0\.5 { padding-top: 2px; padding-bottom: 2px; }
  .sm\:gap-0\.5 { gap: 2px; }
  .sm\:mt-0\.5 { margin-top: 2px; }
  .sm\:mb-0\.5 { margin-bottom: 2px; }
  .sm\:mr-0\.5 { margin-right: 2px; }
  .sm\:mx-0\.5 { margin-left: 2px; margin-right: 2px; }
  .sm\:w-0\.5 { width: 2px; }
  .sm\:h-0\.5 { height: 2px; }
  .sm\:p-1 { padding: 4px; }
  .sm\:px-1 { padding-left: 4px; padding-right: 4px; }
  .sm\:py-1 { padding-top: 4px; padding-bottom: 4px; }
  .sm\:gap-1 { gap: 4px; }
  .sm\:mt-1 { margin-top: 4px; }
  .sm\:mb-1 { margin-bottom: 4px; }
  .sm\:mr-1 { margin-right: 4px; }
  .sm\:mx-1 { margin-left: 4px; margin-right: 4px; }
  .sm\:w-1 { width: 4px; }
  .sm\:h-1 { height: 4px; }
  .sm\:p-1\.5 { padding: 6px; }
  .sm\:px-1\.5 { padding-left: 6px; padding-right: 6px; }
  .sm\:py-1\.5 { padding-top: 6px; padding-bottom: 6px; }
  .sm\:gap-1\.5 { gap: 6px; }
  .sm\:mt-1\.5 { margin-top: 6px; }
  .sm\:mb-1\.5 { margin-bottom: 6px; }
  .sm\:mr-1\.5 { margin-right: 6px; }
  .sm\:mx-1\.5 { margin-left: 6px; margin-right: 6px; }
  .sm\:w-1\.5 { width: 6px; }
  .sm\:h-1\.5 { height: 6px; }
  .sm\:p-2 { padding: 8px; }
  .sm\:px-2 { padding-left: 8px; padding-right: 8px; }
  .sm\:py-2 { padding-top: 8px; padding-bottom: 8px; }
  .sm\:gap-2 { gap: 8px; }
  .sm\:mt-2 { margin-top: 8px; }
  .sm\:mb-2 { margin-bottom: 8px; }
  .sm\:mr-2 { margin-right: 8px; }
  .sm\:mx-2 { margin-left: 8px; margin-right: 8px; }
  .sm\:w-2 { width: 8px; }
  .sm\:h-2 { height: 8px; }
  .sm\:p-2\.5 { padding: 10px; }
  .sm\:px-2\.5 { padding-left: 10px; padding-right: 10px; }
  .sm\:py-2\.5 { padding-top: 10px; padding-bottom: 10px; }
  .sm\:gap-2\.5 { gap: 10px; }
  .sm\:mt-2\.5 { margin-top: 10px; }
  .sm\:mb-2\.5 { margin-bottom: 10px; }
  .sm\:mr-2\.5 { margin-right: 10px; }
  .sm\:mx-2\.5 { margin-left: 10px; margin-right: 10px; }
  .sm\:w-2\.5 { width: 10px; }
  .sm\:h-2\.5 { height: 10px; }
  .sm\:p-3 { padding: 12px; }
  .sm\:px-3 { padding-left: 12px; padding-right: 12px; }
  .sm\:py-3 { padding-top: 12px; padding-bottom: 12px; }
  .sm\:gap-3 { gap: 12px; }
  .sm\:mt-3 { margin-top: 12px; }
  .sm\:mb-3 { margin-bottom: 12px; }
  .sm\:mr-3 { margin-right: 12px; }
  .sm\:mx-3 { margin-left: 12px; margin-right: 12px; }
  .sm\:w-3 { width: 12px; }
  .sm\:h-3 { height: 12px; }
  .sm\:p-3\.5 { padding: 14px; }
  .sm\:px-3\.5 { padding-left: 14px; padding-right: 14px; }
  .sm\:py-3\.5 { padding-top: 14px; padding-bottom: 14px; }
  .sm\:gap-3\.5 { gap: 14px; }
  .sm\:mt-3\.5 { margin-top: 14px; }
  .sm\:mb-3\.5 { margin-bottom: 14px; }
  .sm\:mr-3\.5 { margin-right: 14px; }
  .sm\:mx-3\.5 { margin-left: 14px; margin-right: 14px; }
  .sm\:w-3\.5 { width: 14px; }
  .sm\:h-3\.5 { height: 14px; }
  .sm\:p-4 { padding: 16px; }
  .sm\:px-4 { padding-left: 16px; padding-right: 16px; }
  .sm\:py-4 { padding-top: 16px; padding-bottom: 16px; }
  .sm\:gap-4 { gap: 16px; }
  .sm\:mt-4 { margin-top: 16px; }
  .sm\:mb-4 { margin-bottom: 16px; }
  .sm\:mr-4 { margin-right: 16px; }
  .sm\:mx-4 { margin-left: 16px; margin-right: 16px; }
  .sm\:w-4 { width: 16px; }
  .sm\:h-4 { height: 16px; }
  .sm\:p-5 { padding: 20px; }
  .sm\:px-5 { padding-left: 20px; padding-right: 20px; }
  .sm\:py-5 { padding-top: 20px; padding-bottom: 20px; }
  .sm\:gap-5 { gap: 20px; }
  .sm\:mt-5 { margin-top: 20px; }
  .sm\:mb-5 { margin-bottom: 20px; }
  .sm\:mr-5 { margin-right: 20px; }
  .sm\:mx-5 { margin-left: 20px; margin-right: 20px; }
  .sm\:w-5 { width: 20px; }
  .sm\:h-5 { height: 20px; }
  .sm\:p-6 { padding: 24px; }
  .sm\:px-6 { padding-left: 24px; padding-right: 24px; }
  .sm\:py-6 { padding-top: 24px; padding-bottom: 24px; }
  .sm\:gap-6 { gap: 24px; }
  .sm\:mt-6 { margin-top: 24px; }
  .sm\:mb-6 { margin-bottom: 24px; }
  .sm\:mr-6 { margin-right: 24px; }
  .sm\:mx-6 { margin-left: 24px; margin-right: 24px; }
  .sm\:w-6 { width: 24px; }
  .sm\:h-6 { height: 24px; }
  .sm\:p-7 { padding: 28px; }
  .sm\:px-7 { padding-left: 28px; padding-right: 28px; }
  .sm\:py-7 { padding-top: 28px; padding-bottom: 28px; }
  .sm\:gap-7 { gap: 28px; }
  .sm\:mt-7 { margin-top: 28px; }
  .sm\:mb-7 { margin-bottom: 28px; }
  .sm\:mr-7 { margin-right: 28px; }
  .sm\:mx-7 { margin-left: 28px; margin-right: 28px; }
  .sm\:w-7 { width: 28px; }
  .sm\:h-7 { height: 28px; }
  .sm\:p-8 { padding: 32px; }
  .sm\:px-8 { padding-left: 32px; padding-right: 32px; }
  .sm\:py-8 { padding-top: 32px; padding-bottom: 32px; }
  .sm\:gap-8 { gap: 32px; }
  .sm\:mt-8 { margin-top: 32px; }
  .sm\:mb-8 { margin-bottom: 32px; }
  .sm\:mr-8 { margin-right: 32px; }
  .sm\:mx-8 { margin-left: 32px; margin-right: 32px; }
  .sm\:w-8 { width: 32px; }
  .sm\:h-8 { height: 32px; }
  .sm\:p-9 { padding: 36px; }
  .sm\:px-9 { padding-left: 36px; padding-right: 36px; }
  .sm\:py-9 { padding-top: 36px; padding-bottom: 36px; }
  .sm\:gap-9 { gap: 36px; }
  .sm\:mt-9 { margin-top: 36px; }
  .sm\:mb-9 { margin-bottom: 36px; }
  .sm\:mr-9 { margin-right: 36px; }
  .sm\:mx-9 { margin-left: 36px; margin-right: 36px; }
  .sm\:w-9 { width: 36px; }
  .sm\:h-9 { height: 36px; }
  .sm\:p-10 { padding: 40px; }
  .sm\:px-10 { padding-left: 40px; padding-right: 40px; }
  .sm\:py-10 { padding-top: 40px; padding-bottom: 40px; }
  .sm\:gap-10 { gap: 40px; }
  .sm\:mt-10 { margin-top: 40px; }
  .sm\:mb-10 { margin-bottom: 40px; }
  .sm\:mr-10 { margin-right: 40px; }
  .sm\:mx-10 { margin-left: 40px; margin-right: 40px; }
  .sm\:w-10 { width: 40px; }
  .sm\:h-10 { height: 40px; }
  .sm\:p-11 { padding: 44px; }
  .sm\:px-11 { padding-left: 44px; padding-right: 44px; }
  .sm\:py-11 { padding-top: 44px; padding-bottom: 44px; }
  .sm\:gap-11 { gap: 44px; }
  .sm\:mt-11 { margin-top: 44px; }
  .sm\:mb-11 { margin-bottom: 44px; }
  .sm\:mr-11 { margin-right: 44px; }
  .sm\:mx-11 { margin-left: 44px; margin-right: 44px; }
  .sm\:w-11 { width: 44px; }
  .sm\:h-11 { height: 44px; }
  .sm\:p-12 { padding: 48px; }
  .sm\:px-12 { padding-left: 48px; padding-right: 48px; }
  .sm\:py-12 { padding-top: 48px; padding-bottom: 48px; }
  .sm\:gap-12 { gap: 48px; }
  .sm\:mt-12 { margin-top: 48px; }
  .sm\:mb-12 { margin-bottom: 48px; }
  .sm\:mr-12 { margin-right: 48px; }
  .sm\:mx-12 { margin-left: 48px; margin-right: 48px; }
  .sm\:w-12 { width: 48px; }
  .sm\:h-12 { height: 48px; }
  .sm\:p-14 { padding: 56px; }
  .sm\:px-14 { padding-left: 56px; padding-right: 56px; }
  .sm\:py-14 { padding-top: 56px; padding-bottom: 56px; }
  .sm\:gap-14 { gap: 56px; }
  .sm\:mt-14 { margin-top: 56px; }
  .sm\:mb-14 { margin-bottom: 56px; }
  .sm\:mr-14 { margin-right: 56px; }
  .sm\:mx-14 { margin-left: 56px; margin-right: 56px; }
  .sm\:w-14 { width: 56px; }
  .sm\:h-14 { height: 56px; }
  .sm\:p-16 { padding: 64px; }
  .sm\:px-16 { padding-left: 64px; padding-right: 64px; }
  .sm\:py-16 { padding-top: 64px; padding-bottom: 64px; }
  .sm\:gap-16 { gap: 64px; }
  .sm\:mt-16 { margin-top: 64px; }
  .sm\:mb-16 { margin-bottom: 64px; }
  .sm\:mr-16 { margin-right: 64px; }
  .sm\:mx-16 { margin-left: 64px; margin-right: 64px; }
  .sm\:w-16 { width: 64px; }
  .sm\:h-16 { height: 64px; }
  .sm\:p-20 { padding: 80px; }
  .sm\:px-20 { padding-left: 80px; padding-right: 80px; }
  .sm\:py-20 { padding-top: 80px; padding-bottom: 80px; }
  .sm\:gap-20 { gap: 80px; }
  .sm\:mt-20 { margin-top: 80px; }
  .sm\:mb-20 { margin-bottom: 80px; }
  .sm\:mr-20 { margin-right: 80px; }
  .sm\:mx-20 { margin-left: 80px; margin-right: 80px; }
  .sm\:w-20 { width: 80px; }
  .sm\:h-20 { height: 80px; }
  .sm\:p-24 { padding: 96px; }
  .sm\:px-24 { padding-left: 96px; padding-right: 96px; }
  .sm\:py-24 { padding-top: 96px; padding-bottom: 96px; }
  .sm\:gap-24 { gap: 96px; }
  .sm\:mt-24 { margin-top: 96px; }
  .sm\:mb-24 { margin-bottom: 96px; }
  .sm\:mr-24 { margin-right: 96px; }
  .sm\:mx-24 { margin-left: 96px; margin-right: 96px; }
  .sm\:w-24 { width: 96px; }
  .sm\:h-24 { height: 96px; }
  .sm\:p-32 { padding: 128px; }
  .sm\:px-32 { padding-left: 128px; padding-right: 128px; }
  .sm\:py-32 { padding-top: 128px; padding-bottom: 128px; }
  .sm\:gap-32 { gap: 128px; }
  .sm\:mt-32 { margin-top: 128px; }
  .sm\:mb-32 { margin-bottom: 128px; }
  .sm\:mr-32 { margin-right: 128px; }
  .sm\:mx-32 { margin-left: 128px; margin-right: 128px; }
  .sm\:w-32 { width: 128px; }
  .sm\:h-32 { height: 128px; }
  .sm\:max-h-40 { max-height: 10rem; }
  .sm\:space-y-5 > * + * { margin-top: 20px; }
  .sm\:space-y-8 > * + * { margin-top: 32px; }
  .sm\:text-right { text-align: right; }
  .sm\:text-xs { font-size: 12px; }
  .sm\:text-sm { font-size: 14px; }
  .sm\:text-base { font-size: 16px; }
  .sm\:text-lg { font-size: 18px; }
  .sm\:text-xl { font-size: 20px; }
  .sm\:text-2xl { font-size: 24px; }
  .sm\:text-3xl { font-size: 30px; }
  .sm\:text-4xl { font-size: 36px; }
  .sm\:text-\[7px\] { font-size: 7px; }
  .sm\:text-\[8px\] { font-size: 8px; }
  .sm\:text-\[9px\] { font-size: 9px; }
  .sm\:rounded-3xl { border-radius: 24px; }
  .sm\:rounded-lg { border-radius: var(--br-md); }
  .sm\:rounded-xl { border-radius: var(--br-lg); }
  .sm\:rounded-2xl { border-radius: var(--br-xl); }
  .sm\:rounded-\[2\.5rem\] { border-radius: 2.5rem; }
  .sm\:rounded-\[3rem\] { border-radius: 3rem; }
  .sm\:max-w-lg { max-width: 32rem; }
  .sm\:max-w-xl { max-width: 36rem; }
  .sm\:pt-8 { padding-top: 32px; }
  .sm\:h-40 { height: 10rem; }
}

/* ═══ 25. RESPONSIVE: md (768px+) ═══ */
@media (min-width: 768px) {
  .md\:block { display: block; } .md\:hidden { display: none; } .md\:flex { display: flex; } .md\:flex-row { flex-direction: row; }
  .md\:grid { display: grid; } .md\:items-end { align-items: flex-end; } .md\:table-cell { display: table-cell; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .md\:p-0 { padding: 0; } .md\:px-0 { padding-left: 0; padding-right: 0; } .md\:gap-0 { gap: 0; }
  .md\:p-0\.5 { padding: 2px; } .md\:px-0\.5 { padding-left: 2px; padding-right: 2px; } .md\:gap-0\.5 { gap: 2px; }
  .md\:p-1 { padding: 4px; } .md\:px-1 { padding-left: 4px; padding-right: 4px; } .md\:gap-1 { gap: 4px; }
  .md\:p-1\.5 { padding: 6px; } .md\:px-1\.5 { padding-left: 6px; padding-right: 6px; } .md\:gap-1\.5 { gap: 6px; }
  .md\:p-2 { padding: 8px; } .md\:px-2 { padding-left: 8px; padding-right: 8px; } .md\:gap-2 { gap: 8px; }
  .md\:p-2\.5 { padding: 10px; } .md\:px-2\.5 { padding-left: 10px; padding-right: 10px; } .md\:gap-2\.5 { gap: 10px; }
  .md\:p-3 { padding: 12px; } .md\:px-3 { padding-left: 12px; padding-right: 12px; } .md\:gap-3 { gap: 12px; }
  .md\:p-3\.5 { padding: 14px; } .md\:px-3\.5 { padding-left: 14px; padding-right: 14px; } .md\:gap-3\.5 { gap: 14px; }
  .md\:p-4 { padding: 16px; } .md\:px-4 { padding-left: 16px; padding-right: 16px; } .md\:gap-4 { gap: 16px; }
  .md\:p-5 { padding: 20px; } .md\:px-5 { padding-left: 20px; padding-right: 20px; } .md\:gap-5 { gap: 20px; }
  .md\:p-6 { padding: 24px; } .md\:px-6 { padding-left: 24px; padding-right: 24px; } .md\:gap-6 { gap: 24px; }
  .md\:p-7 { padding: 28px; } .md\:px-7 { padding-left: 28px; padding-right: 28px; } .md\:gap-7 { gap: 28px; }
  .md\:p-8 { padding: 32px; } .md\:px-8 { padding-left: 32px; padding-right: 32px; } .md\:gap-8 { gap: 32px; }
  .md\:p-9 { padding: 36px; } .md\:px-9 { padding-left: 36px; padding-right: 36px; } .md\:gap-9 { gap: 36px; }
  .md\:p-10 { padding: 40px; } .md\:px-10 { padding-left: 40px; padding-right: 40px; } .md\:gap-10 { gap: 40px; }
  .md\:p-11 { padding: 44px; } .md\:px-11 { padding-left: 44px; padding-right: 44px; } .md\:gap-11 { gap: 44px; }
  .md\:p-12 { padding: 48px; } .md\:px-12 { padding-left: 48px; padding-right: 48px; } .md\:gap-12 { gap: 48px; }
  .md\:p-14 { padding: 56px; } .md\:px-14 { padding-left: 56px; padding-right: 56px; } .md\:gap-14 { gap: 56px; }
  .md\:p-16 { padding: 64px; } .md\:px-16 { padding-left: 64px; padding-right: 64px; } .md\:gap-16 { gap: 64px; }
  .md\:p-20 { padding: 80px; } .md\:px-20 { padding-left: 80px; padding-right: 80px; } .md\:gap-20 { gap: 80px; }
  .md\:p-24 { padding: 96px; } .md\:px-24 { padding-left: 96px; padding-right: 96px; } .md\:gap-24 { gap: 96px; }
  .md\:p-32 { padding: 128px; } .md\:px-32 { padding-left: 128px; padding-right: 128px; } .md\:gap-32 { gap: 128px; }
  .md\:text-3xl { font-size: 30px; line-height: 36px; }
}

/* ═══ 26. RESPONSIVE: lg (1024px+) ═══ */
@media (min-width: 1024px) {
  .lg\:block { display: block; } .lg\:flex { display: flex; } .lg\:flex-row { flex-direction: row; } .lg\:grid { display: grid; }
  .lg\:hidden { display: none; } .lg\:items-center { align-items: center; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12,minmax(0,1fr)); }
  .lg\:col-span-1 { grid-column: span 1; }
  .lg\:col-span-2 { grid-column: span 2; }
  .lg\:col-span-4 { grid-column: span 4; }
  .lg\:col-span-8 { grid-column: span 8; }
  .lg\:p-0 { padding: 0; } .lg\:px-0 { padding-left: 0; padding-right: 0; }
  .lg\:p-0\.5 { padding: 2px; } .lg\:px-0\.5 { padding-left: 2px; padding-right: 2px; }
  .lg\:p-1 { padding: 4px; } .lg\:px-1 { padding-left: 4px; padding-right: 4px; }
  .lg\:p-1\.5 { padding: 6px; } .lg\:px-1\.5 { padding-left: 6px; padding-right: 6px; }
  .lg\:p-2 { padding: 8px; } .lg\:px-2 { padding-left: 8px; padding-right: 8px; }
  .lg\:p-2\.5 { padding: 10px; } .lg\:px-2\.5 { padding-left: 10px; padding-right: 10px; }
  .lg\:p-3 { padding: 12px; } .lg\:px-3 { padding-left: 12px; padding-right: 12px; }
  .lg\:p-3\.5 { padding: 14px; } .lg\:px-3\.5 { padding-left: 14px; padding-right: 14px; }
  .lg\:p-4 { padding: 16px; } .lg\:px-4 { padding-left: 16px; padding-right: 16px; }
  .lg\:p-5 { padding: 20px; } .lg\:px-5 { padding-left: 20px; padding-right: 20px; }
  .lg\:p-6 { padding: 24px; } .lg\:px-6 { padding-left: 24px; padding-right: 24px; }
  .lg\:p-7 { padding: 28px; } .lg\:px-7 { padding-left: 28px; padding-right: 28px; }
  .lg\:p-8 { padding: 32px; } .lg\:px-8 { padding-left: 32px; padding-right: 32px; }
  .lg\:p-9 { padding: 36px; } .lg\:px-9 { padding-left: 36px; padding-right: 36px; }
  .lg\:p-10 { padding: 40px; } .lg\:px-10 { padding-left: 40px; padding-right: 40px; }
  .lg\:p-11 { padding: 44px; } .lg\:px-11 { padding-left: 44px; padding-right: 44px; }
  .lg\:p-12 { padding: 48px; } .lg\:px-12 { padding-left: 48px; padding-right: 48px; }
  .lg\:p-14 { padding: 56px; } .lg\:px-14 { padding-left: 56px; padding-right: 56px; }
  .lg\:p-16 { padding: 64px; } .lg\:px-16 { padding-left: 64px; padding-right: 64px; }
  .lg\:p-20 { padding: 80px; } .lg\:px-20 { padding-left: 80px; padding-right: 80px; }
  .lg\:p-24 { padding: 96px; } .lg\:px-24 { padding-left: 96px; padding-right: 96px; }
  .lg\:p-32 { padding: 128px; } .lg\:px-32 { padding-left: 128px; padding-right: 128px; }
  .lg\:pb-0 { padding-bottom: 0; }
  .lg\:w-1\/3 { width: 33.333333%; } .lg\:w-2\/3 { width: 66.666667%; }
}

/* ═══ 27. RESPONSIVE: xl (1280px+) ═══ */
@media (min-width: 1280px) { .xl\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); } }

@media print { aside, header, footer, .no-print { display: none !important; } main { padding: 0 !important; } }

/* ═══ 28. ADMIN PANEL — Harmonized with Boutique Style ═══ */

/* Admin stat cards */
.stat-card {
  background: var(--card-bg);
  border-radius: var(--br-lg);
  padding: 20px 24px;
  box-shadow: var(--elevation-1);
  transition: all 0.15s;
}
.stat-card:hover { 
  box-shadow: var(--elevation-2); 
  transform: translateY(-2px); 
}
.stat-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--br-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

/* Admin form sections */
.admin-form {
  background: var(--card-bg);
  border-radius: var(--br-lg);
  padding: 28px;
  box-shadow: var(--elevation-1);
}
.admin-form-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(45,21,5,0.06);
}
.admin-form-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c2);
  margin: 0;
}
.admin-form-desc {
  font-size: 11px;
  color: var(--c-accent);
  margin: 2px 0 0;
}

/* Admin labels */
.admin-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--c-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

/* Admin inputs — match boutique */
.admin-input {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: var(--br-md);
  background: var(--c-vintage);
  color: var(--c2);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  outline: none;
  transition: box-shadow 0.15s, background 0.15s;
}
.admin-input:focus {
  box-shadow: inset 0 0 0 2px var(--c1);
  background: #fff;
}
.admin-input::placeholder {
  color: var(--c-accent);
  opacity: 0.5;
}
select.admin-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238B7355'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px;
  padding-right: 36px;
}

/* Admin buttons — clean, no borders */
.admin-btn {
  padding: 12px 24px;
  border-radius: var(--br-md);
  font-size: 11px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 8px rgba(45,21,5,0.08);
}
.admin-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45,21,5,0.12);
}
.admin-btn:active { transform: translateY(0); }

.admin-btn-primary {
  background: var(--c2);
  color: var(--c1);
}
.admin-btn-success {
  background: var(--c-success);
  color: #fff;
}
.admin-btn-danger {
  background: var(--c-danger);
  color: #fff;
}
.admin-btn-secondary {
  background: var(--c-vintage);
  color: var(--c-accent);
  box-shadow: none;
}
.admin-btn-secondary:hover {
  background: rgba(200,149,106,0.15);
  box-shadow: none;
}

/* Admin toggle switch */
.admin-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: var(--br-lg);
  background: var(--c-vintage);
  transition: background 0.15s;
}
.admin-toggle:hover { background: rgba(200,149,106,0.1); }

/* Admin tabs */
.admin-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  padding: 4px;
  background: var(--c-vintage);
  border-radius: var(--br-lg);
}
.admin-tab {
  flex: 1;
  padding: 12px 16px;
  border: none;
  border-radius: var(--br-md);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-accent);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.admin-tab:hover { background: rgba(255,255,255,0.6); }
.admin-tab.active {
  background: #fff;
  color: var(--c2);
  box-shadow: 0 2px 8px rgba(45,21,5,0.06);
}


/* ═══════════════════════════════════════════════════════════════════
   STORE COMPONENTS (merged from store.css)
   ═══════════════════════════════════════════════════════════════════ */


/* ====== NAV CONTAINER ====== */
.site-nav{background:#fff;position:sticky;top:0;z-index:50;transition:background 0.15s;box-shadow:0 1px 2px rgba(45,21,5,0.06),0 1px 3px rgba(45,21,5,0.04)}

/* ROW 1 — Primary bar */
.nav-row1{max-width:1600px;margin:0 auto;padding:0 20px 0 28px;height:72px;display:flex;align-items:center;justify-content:space-between}
.nav-left{display:flex;align-items:center;gap:20px;flex:1;min-width:0}

/* Logo */
.n-logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.n-logo-img{width:120px;height:120px;border-radius:var(--br-md);object-fit:contain}
.n-logo-icon{width:40px;height:40px;border-radius:var(--br-md);display:flex;align-items:center;justify-content:center;background:var(--c1)}
.n-logo-name{font-size:20px;font-weight:700;color:var(--c2);letter-spacing:-0.3px;font-family:var(--font-sec)}

/* Boutique dropdown pill */
.n-boutique-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#F5ECD7;border:1px solid rgba(45,21,5,0.08);border-radius:var(--br-md);font-size:13px;font-weight:600;color:#2D1505;cursor:pointer;transition:all 0.15s;font-family:inherit;white-space:nowrap}
.n-boutique-btn:hover{background:#E8D4B4;border-color:var(--c1)}
.n-boutique-btn .b-icon{color:var(--c1);font-size:17px}
.n-boutique-btn .b-caret{font-size:13px;opacity:0.5;transition:transform 0.2s}
.n-boutique-btn .b-caret.open{transform:rotate(180deg)}

.n-drop{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid rgba(45,21,5,0.06);border-radius:var(--br-lg);padding:8px;min-width:280px;box-shadow:0 0 2px rgba(45,21,5,0.08),0 12px 24px -4px rgba(45,21,5,0.1);z-index:60}
.n-drop-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--br-sm);font-size:14px;font-weight:600;color:#2D1505;text-decoration:none;transition:all 0.12s}
.n-drop-item:hover{background:#F5ECD7}
.n-drop-item .d-icon{width:34px;height:34px;border-radius:var(--br-sm);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.n-drop-item .d-sub{font-size:12px;color:#7A5C3E;font-weight:500}
.n-drop-sep{height:1px;background:#E8D4B4;margin:4px 8px}

/* Search */
.n-search{position:relative;max-width:360px;width:100%}
.n-search input{width:100%;padding:10px 16px 10px 42px;background:#F5ECD7;border:1px solid rgba(45,21,5,0.08);border-radius:var(--br-md);font-size:13px;font-weight:500;color:#2D1505;outline:none;font-family:inherit;transition:border 0.15s,box-shadow 0.15s}
.n-search input:focus{border-color:var(--c1);box-shadow:0 0 0 3px rgba(200,149,106,0.12);background:#fff}
.n-search input::placeholder{color:#7A5C3E}
.n-search .s-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#7A5C3E;font-size:18px}

/* Right actions */
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.n-btn-wa{display:flex;align-items:center;gap:7px;padding:9px 16px;background:#25D366;color:#fff;border-radius:var(--br-md);font-size:13px;font-weight:700;text-decoration:none;border:none;cursor:pointer;font-family:inherit;transition:background 0.15s;box-shadow:0 1px 3px rgba(37,211,102,0.15)}
.n-btn-wa:hover{background:#1fb855}
.n-btn-aff{display:flex;align-items:center;gap:7px;padding:9px 16px;background:transparent;border:1px solid var(--c1);color:var(--c1);border-radius:var(--br-md);font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;font-family:inherit;transition:all 0.15s}
.n-btn-aff:hover{background:var(--c1);color:var(--c2)}

.n-sep{width:1px;height:30px;background:rgba(45,21,5,0.1);margin:0 8px}

.n-icon-btn{width:42px;height:42px;border-radius:50%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#7A5C3E;transition:all 0.15s;font-size:21px;position:relative;text-decoration:none}
.n-icon-btn:hover{background:#F5ECD7;color:#2D1505}
.n-badge{position:absolute;top:1px;right:1px;width:18px;height:18px;border-radius:50%;background:var(--c-danger,#C75C3A);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff}

/* ROW 2 — Secondary nav — chocolat bar */
.nav-row2{background:var(--c2,#2D1505);max-width:100%;margin:0;padding:0 28px;height:48px;display:flex;align-items:center;justify-content:center;gap:6px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.nav-row2::-webkit-scrollbar{display:none}

.r2-link{display:flex;align-items:center;gap:6px;padding:7px 16px;font-size:12px;font-weight:500;color:rgba(245,236,215,0.6);text-decoration:none;white-space:nowrap;position:relative;transition:color 0.15s,background 0.15s;border-radius:var(--br-md)}
.r2-link:hover{color:#F5ECD7;background:rgba(245,236,215,0.1)}
.r2-link.on{color:var(--c2);background:var(--c1);font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,0.2)}
.r2-link .r2-icon{font-size:14px;opacity:0.85}
.r2-sep{width:1px;height:20px;background:rgba(245,236,215,0.1);flex-shrink:0;margin:0 4px}

/* Row 2 dropdown wrappers */
.r2-drop-wrap{position:relative;display:flex;align-items:center}
.r2-drop-trigger{border:none;background:none;cursor:pointer;font-family:inherit}
.r2-caret{font-size:11px;margin-left:2px;opacity:0.5;transition:transform 0.2s}
.r2-caret.open{transform:rotate(180deg)}

/* Row 2 dropdown panel */
.r2-dropdown{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid rgba(45,21,5,0.08);border-radius:var(--br-lg);padding:6px;min-width:220px;box-shadow:0 8px 24px rgba(45,21,5,0.12);z-index:60}
.r2-dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--br-sm);font-size:13px;font-weight:500;color:#2D1505;text-decoration:none;transition:all 0.12s;white-space:nowrap}
.r2-dropdown-item:hover{background:#F5ECD7;color:var(--c1)}
.r2-dropdown-item.on{font-weight:700;color:var(--c1)}
.r2-dropdown-item i{font-size:16px;opacity:0.7}
.r2-dropdown-sep{height:1px;background:#E8D4B4;margin:4px 6px}

/* Cart bar */
.cart-bar{position:fixed;bottom:0;left:0;right:0;z-index:45;background:#fff;border-top:1px solid rgba(45,21,5,0.06);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 -1px 3px rgba(45,21,5,0.06),0 -4px 16px rgba(45,21,5,0.04);transform:translateY(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1)}
.cart-bar.show{transform:translateY(0)}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:90vw;z-index:220;display:flex;flex-direction:column;box-shadow:0 0 2px rgba(45,21,5,0.1),-8px 0 32px rgba(45,21,5,0.12);border-radius:0}
.cart-header{padding:18px 20px;border-bottom:1px solid rgba(45,21,5,0.08);display:flex;align-items:center;justify-content:space-between}
.cart-close-btn{background:none;border:none;cursor:pointer;width:44px;height:44px;border-radius:var(--br-sm);color:#7A5C3E;display:flex;align-items:center;justify-content:center;transition:all 0.15s;font-size:18px}
.cart-close-btn:hover{background:#F5ECD7;color:#2D1505}
.cart-body{flex:1;overflow-y:auto;padding:14px}
.cart-item{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:var(--br-sm);margin-bottom:6px;border:1px solid #E8D4B4;transition:all 0.15s}
.cart-item:hover{border-color:var(--c1);background:rgba(200,149,106,0.05)}
.cart-item-img{width:48px;height:48px;border-radius:var(--br-sm);overflow:hidden;background:#F5ECD7;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.cart-remove-btn{background:none;border:none;cursor:pointer;color:#7A5C3E;width:36px;height:36px;border-radius:var(--br-sm);display:flex;align-items:center;justify-content:center;transition:all 0.15s;flex-shrink:0}
.cart-remove-btn:hover{background:rgba(199,92,58,0.08);color:#C75C3A}
.cart-footer{padding:16px 20px;border-top:1px solid rgba(45,21,5,0.08);background:rgba(245,236,215,0.5)}
.cart-wa-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border-radius:var(--br-md);background:#25D366;color:#fff;font-size:13px;font-weight:700;text-decoration:none;box-shadow:0 1px 3px rgba(37,211,102,0.2);transition:transform 0.15s;width:100%;text-align:center;border:none;cursor:pointer}
.cart-wa-btn:hover{transform:scale(1.02)}
.cart-clear-btn{width:100%;margin-top:8px;padding:10px;border-radius:var(--br-sm);background:none;border:1px solid rgba(45,21,5,0.1);color:#7A5C3E;font-size:10px;font-weight:700;cursor:pointer;transition:all 0.15s;text-transform:uppercase;letter-spacing:0.06em;font-family:inherit}
.cart-clear-btn:hover{border-color:#C75C3A;color:#C75C3A}
.cart-count{background:var(--c1);color:var(--c2);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;position:absolute;top:-6px;right:-6px}
@media (max-width: 480px) {
  .cart-drawer { width: 100vw; max-width: 100vw; }
  .cart-header { padding: 14px 16px; }
  .cart-body { padding: 10px; }
  .cart-footer { padding: 14px 16px; }
  .cart-item { padding: 10px; }
}

/* Sidebar */
.side-card{background:#fff;border-radius:var(--br-lg);padding:16px;border:1px solid rgba(45,21,5,0.06);transition:background 0.15s}
.side-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#7A5C3E;margin:0 0 8px;padding:0 10px;font-family:var(--font-sec)}
.side-divider{height:1px;background:rgba(45,21,5,0.06);margin:12px 0}
.side-link{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--br-md);font-size:13px;font-weight:500;color:#7A5C3E;text-decoration:none;transition:background 0.15s,color 0.15s,border-color 0.15s;cursor:pointer;border-left:2px solid transparent}
.side-link:hover{background:rgba(200,149,106,0.08);color:#2D1505;border-left-color:rgba(200,149,106,0.35)}
.side-link.on{background:rgba(200,149,106,0.14);color:var(--c2);font-weight:700;border-left-color:var(--c1)}
.side-link .cnt{margin-left:auto;font-size:10px;font-weight:700;background:rgba(200,149,106,0.1);color:var(--c1);padding:1px 7px;border-radius:var(--br-pill);line-height:1.6}

/* Product card */
.p-card{background:#fff;border-radius:var(--br-lg);overflow:hidden;border:1px solid rgba(45,21,5,0.06);transition:transform 0.25s cubic-bezier(0.4,0,0.2,1),box-shadow 0.25s cubic-bezier(0.4,0,0.2,1),border-color 0.2s;position:relative;will-change:transform}
.p-card:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(45,21,5,0.04),0 20px 40px -8px rgba(45,21,5,0.14);border-color:rgba(200,149,106,0.28)}
.p-card:hover .p-img img{transform:scale(1.07)}
.p-card:hover .badge-tl{opacity:0}
.p-card.selected{border-color:var(--c1);box-shadow:0 0 0 2px var(--c1),0 8px 20px -4px rgba(200,149,106,0.2)}
.p-img{aspect-ratio:4/5;overflow:hidden;position:relative;background:var(--c-vintage,#F5ECD7)}
.p-img picture{display:block;width:100%;height:100%}
.p-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94),opacity 0.4s ease-out}
/* Lazy loading fade-in effect */
.p-img img.lazy{opacity:0}
.p-img img.lazy.loaded,.p-img img:not(.lazy){opacity:1}
/* Skeleton shimmer placeholder */
.p-img::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(200,149,106,0.08) 50%,transparent 100%);background-size:200% 100%;animation:shimmer 1.5s infinite;z-index:1;pointer-events:none;opacity:1;transition:opacity 0.3s}
.p-img.loaded::before{opacity:0}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.p-body{padding:12px 14px 14px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--br-pill);font-size:9px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;line-height:1;transition:opacity 0.2s}
.badge-tl{position:absolute;top:12px;left:12px;background:rgba(255,255,255,0.92);backdrop-filter:blur(6px);color:#2D1505;box-shadow:0 1px 4px rgba(45,21,5,0.1)}
.badge-tr{position:absolute;top:12px;right:50px;background:rgba(93,140,62,0.9);color:#fff;backdrop-filter:blur(4px)}
.badge-bl{position:absolute;bottom:12px;left:12px;background:rgba(255,255,255,0.88);color:#2D1505;backdrop-filter:blur(6px)}
.p-select{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:var(--br-sm);border:2px solid rgba(255,255,255,0.6);background:rgba(255,255,255,0.2);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;z-index:5;color:transparent}
.p-select.checked{background:var(--c1);border-color:var(--c1);color:var(--c2)}
.p-cat{font-size:10px;font-weight:700;color:#7A5C3E;text-transform:uppercase;letter-spacing:0.5px}
.p-sku{font-size:9px;font-family:'Courier New',monospace;color:var(--c1);margin-top:2px;opacity:0.85}
.p-name{font-size:13px;font-weight:700;color:#2D1505;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;min-height:2.6em;margin-top:4px;transition:color 0.15s}
.p-card:hover .p-name{color:var(--c1)}
.p-price{font-size:16px;font-weight:800;color:#2D1505;letter-spacing:-0.3px}
.p-price-old{font-size:11px;font-weight:600;color:#7A5C3E;text-decoration:line-through;opacity:0.8}
.p-price-aff{font-size:16px;font-weight:800;color:var(--c1);letter-spacing:-0.3px}

/* Footer */
.foot{background:var(--c2,#2D1505);padding:0;border-top:3px solid var(--c1)}

/* Pagination */
.pg{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:var(--br-md);font-size:13px;font-weight:700;text-decoration:none;transition:background 0.15s,color 0.15s,border-color 0.15s}
.pg-on{background:var(--c1);color:var(--c2);box-shadow:0 2px 8px rgba(200,149,106,0.3)}
.pg-off{background:#fff;border:1px solid rgba(45,21,5,0.1);color:#7A5C3E}
.pg-off:hover{border-color:var(--c1);color:var(--c1)}

/* Mobile — aligned with style.css main-nav hide at 1024px */
.mob-only{display:none}
@media(max-width:1024px){
    .mob-only{display:flex!important}
}
@media(max-width:768px){
    .desk-only{display:none!important}
    .nav-row2{display:none}
    .n-search{display:none}
    .nav-row1{padding:0 14px;height:60px}
}
@media(max-width:480px){
    .logo-name{font-size:1.1rem!important}
}

/* Mobile menu drawer — style.css aligned */
.mob-sec-title{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--car-dk,#A8734E);margin:16px 0 6px;padding:0}
.mob-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r,12px);font-size:.88rem;font-weight:500;color:var(--brown,#2D1505);text-decoration:none;transition:all .15s}
.mob-link:hover,.mob-link.active{background:var(--cream,#F5ECD7);color:var(--brown,#2D1505);font-weight:600}
.mob-link.active{color:var(--caramel,#C8956A)}
.mob-link i{font-size:16px;opacity:.6}
.mob-link.active i{opacity:1;color:var(--caramel,#C8956A)}
.mob-divider{height:1px;background:var(--border,#E8D4B4);margin:8px 0}


/* Utilities */
.wa-float{width:38px;height:38px;border-radius:var(--br-md);background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all 0.2s;box-shadow:0 3px 10px rgba(37,211,102,0.2)}
.wa-float:hover{transform:scale(1.08);box-shadow:0 5px 16px rgba(37,211,102,0.3)}

.cart-add-btn{width:36px;height:36px;border-radius:var(--br-md);border:1px solid rgba(200,149,106,0.2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.2s,border-color 0.2s,transform 0.15s;font-size:16px}
.cart-add-btn:hover{border-color:var(--c1);transform:scale(1.08)}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ── style.css tag-level overrides ──
   style.css sets h1-h4{font-family:Playfair Display;color:#2D1505} and p{color:#7A5C3E;line-height:1.7}
   These leak into hisy.css components. The rules below neutralize the leak. */
h1.text-dark,h2.text-dark,h3.text-dark,h4.text-dark{font-family:var(--font-main);color:var(--c-text,#2D1505)}
.cart-drawer h3,.cart-drawer h4{font-family:var(--font-main);color:var(--c-text,#2D1505);font-weight:700;line-height:1.3}
.cart-drawer p{color:var(--c-text,#2D1505);line-height:1.5}
#cartBar h3,#cartBar p{font-family:var(--font-main);line-height:1.4}
.cat-wrap h3,.qv-panel h3{font-family:var(--font-main);color:var(--c-text,#2D1505)}
.prd-main h2,.prd-main h3{font-family:var(--font-main)}
.resa-modal h3{font-family:var(--font-main)}
.side-title{line-height:1.3}
.prd-attr-label{line-height:1.3}
.prd-attr-value{line-height:1.4}
/* Footer override: prevent style.css p/h rules from leaking */
.site-footer h5{font-family:var(--f-body,var(--font-main))}

.trust-it strong{font-size:.88rem;font-weight:600;display:block}
.trust-it small{font-size:.76rem;display:block;opacity:.65;margin-top:2px}


/* Accessibility: focus visible */
:focus-visible{outline:2px solid var(--c1);outline-offset:2px}
button:focus-visible,a:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--c1);outline-offset:2px}


/* ═══════════════════════════════════════════════════════════════════
   ADMIN UNIFIED COMPONENTS (merged from admin-unified.css)
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   TABS - Clean professional style
   ══════════════════════════════════════════════════════════════════ */
.au-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
    padding: 4px;
    background: var(--au-vintage);
    border-radius: var(--au-radius);
    flex-wrap: wrap;
}
.au-tab {
    flex: 1;
    min-width: 100px;
    padding: 12px 16px;
    border: none;
    border-radius: var(--au-radius-sm);
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--au-accent);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}
.au-tab:hover {
    background: rgba(255,255,255,0.6);
    color: var(--au-chocolat);
}
.au-tab.active,
.au-tab[data-active="true"] {
    background: #fff;
    color: var(--au-chocolat);
    box-shadow: 0 2px 8px rgba(45,21,5,0.06);
}
.au-tab i {
    font-size: 16px;
}

/* Tabs variant - minimal (for sub-tabs) */
.au-tabs-minimal {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}
.au-tabs-minimal .au-tab {
    flex: none;
    padding: 8px 14px;
    font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════════════
   CARDS - Clean white cards with subtle borders
   ══════════════════════════════════════════════════════════════════ */
.au-card {
    background: var(--au-fond);
    border-radius: 16px;
    padding: 28px;
    box-shadow: var(--au-shadow-sm);
    margin-bottom: 20px;
}
.au-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(45,21,5,0.06);
}
.au-card-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--au-caramel) 0%, color-mix(in srgb, var(--au-caramel), #fff 20%) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--au-chocolat);
}
.au-card-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--au-chocolat);
    margin: 0;
}
.au-card-header p {
    font-size: 11px;
    color: var(--au-accent);
    margin: 2px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════
   KPI CARDS - Stats display
   ══════════════════════════════════════════════════════════════════ */
.au-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.au-kpi {
    text-align: center;
    padding: 20px 16px;
    border-radius: 14px;
    background: var(--au-fond);
    border: 1px solid rgba(45,21,5,0.08);
    transition: transform 0.15s, box-shadow 0.15s;
}
.au-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--au-shadow-md);
}
.au-kpi-primary {
    background: var(--au-chocolat);
    border: none;
}
.au-kpi-primary .au-kpi-label,
.au-kpi-primary .au-kpi-value {
    color: var(--au-caramel);
}
.au-kpi-accent {
    background: rgba(200,149,106,0.1);
    border-color: rgba(200,149,106,0.2);
}
.au-kpi-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--au-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.au-kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--au-chocolat);
    margin: 4px 0;
    font-style: italic;
}
.au-kpi-sub {
    font-size: 10px;
    color: var(--au-accent);
}

/* ═══════════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ══════════════════════════════════════════════════════════════════ */
.au-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--au-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.au-input {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: var(--au-radius-sm);
    background: var(--au-vintage);
    color: var(--au-chocolat);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    outline: none;
    transition: box-shadow 0.15s;
}
.au-input:focus {
    box-shadow: inset 0 0 0 2px var(--au-caramel);
}
.au-input::placeholder {
    color: var(--au-accent);
    opacity: 0.5;
}
select.au-input,
.au-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238B7355'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px;
    padding-right: 36px;
    cursor: pointer;
}
.au-textarea {
    min-height: 80px;
    resize: vertical;
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════ */
.au-btn {
    padding: 12px 24px;
    border-radius: var(--au-radius-sm);
    font-size: 11px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(45,21,5,0.08);
    text-decoration: none;
}
.au-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45,21,5,0.12);
}
.au-btn:active {
    transform: translateY(0);
}
.au-btn-primary {
    background: var(--au-chocolat);
    color: var(--au-caramel);
}
.au-btn-success {
    background: var(--au-success);
    color: #fff;
}
.au-btn-danger {
    background: var(--au-danger);
    color: #fff;
}
.au-btn-secondary {
    background: var(--au-vintage);
    color: var(--au-accent);
    box-shadow: none;
}
.au-btn-secondary:hover {
    background: rgba(200,149,106,0.12);
    box-shadow: none;
}
.au-btn-sm {
    padding: 8px 14px;
    font-size: 10px;
    border-radius: 8px;
}
.au-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════════════
   TABLE - Clean modern table
   ══════════════════════════════════════════════════════════════════ */
.au-table-wrap {
    background: var(--au-fond);
    border-radius: 16px;
    box-shadow: var(--au-shadow-sm);
    overflow: hidden;
    border: 1px solid rgba(45,21,5,0.06);
}
.au-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.au-table th {
    text-align: left;
    padding: 14px 16px;
    font-size: 10px;
    font-weight: 700;
    color: var(--au-caramel);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--au-chocolat);
}
.au-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(45,21,5,0.04);
    vertical-align: middle;
}
.au-table tbody tr:hover td {
    background: var(--au-vintage);
}
.au-table tbody tr:last-child td {
    border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════════ */
.au-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.au-badge-success {
    background: rgba(93,140,62,0.1);
    color: var(--au-success);
}
.au-badge-danger {
    background: rgba(199,92,58,0.1);
    color: var(--au-danger);
}
.au-badge-warning {
    background: rgba(212,160,23,0.1);
    color: var(--au-warning);
}
.au-badge-info {
    background: rgba(59,130,246,0.1);
    color: var(--au-info);
}
.au-badge-neutral {
    background: var(--au-vintage);
    color: var(--au-accent);
}

/* ═══════════════════════════════════════════════════════════════════
   TOGGLE ROW - Like email enable/disable rows
   ══════════════════════════════════════════════════════════════════ */
.au-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: var(--au-radius);
    background: var(--au-vintage);
    transition: background 0.15s;
    margin-bottom: 8px;
}
.au-toggle-row:hover {
    background: rgba(200,149,106,0.15);
}
.au-toggle-row-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.au-toggle-row-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--au-caramel);
    box-shadow: 0 1px 3px rgba(45,21,5,0.08);
}
.au-toggle-row-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--au-chocolat);
}
.au-toggle-row-sub {
    font-size: 10px;
    color: var(--au-accent);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   FILTERS BAR
   ══════════════════════════════════════════════════════════════════ */
.au-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    padding: 16px;
    background: rgba(255,255,255,0.5);
    border-radius: var(--au-radius);
    border: 1px solid rgba(45,21,5,0.05);
    margin-bottom: 20px;
}
.au-filters .au-input {
    padding: 10px 14px;
    font-size: 11px;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════════ */
.au-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 20px;
}
.au-pagination a,
.au-pagination span {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--au-accent);
    background: var(--au-vintage);
    text-decoration: none;
    transition: all 0.15s;
}
.au-pagination a:hover {
    background: var(--au-caramel);
    color: var(--au-chocolat);
}
.au-pagination .active {
    background: var(--au-chocolat);
    color: var(--au-caramel);
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .au-tabs {
        flex-direction: column;
    }
    .au-tab {
        min-width: auto;
    }
    .au-card {
        padding: 20px;
    }
    .au-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .au-table th,
    .au-table td {
        padding: 10px 12px;
        font-size: 11px;
    }
}
@media (max-width: 480px) {
    .au-card {
        padding: 16px;
    }
    .au-kpi-grid {
        grid-template-columns: 1fr;
    }
    .au-tab {
        padding: 10px 12px;
        font-size: 10px;
    }
}


@media (max-width: 768px) {
  :root {
    --space-page: 16px;
    --space-section: 24px;
    --space-card: 16px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   CONTEXT THEMES — Per-dashboard color system
   ═══════════════════════════════════════════════════════════════════ */
.ctx-admin {
  --ctx-sidebar-bg: #ffffff;
  --ctx-sidebar-text: var(--c-accent);
  --ctx-sidebar-active-bg: rgba(200,149,106,0.12);
  --ctx-sidebar-active-text: var(--c2);
  --ctx-sidebar-active-border: var(--c1);
  --ctx-sidebar-section: var(--c-accent);
  --ctx-topbar-bg: #ffffff;
  --ctx-page-bg: var(--c-bg);
}
.ctx-client {
  --ctx-sidebar-bg: var(--c2);
  --ctx-sidebar-text: rgba(255,255,255,0.55);
  --ctx-sidebar-active-bg: rgba(200,149,106,0.16);
  --ctx-sidebar-active-text: var(--c1);
  --ctx-sidebar-active-border: var(--c1);
  --ctx-sidebar-section: rgba(255,255,255,0.22);
  --ctx-topbar-bg: #ffffff;
  --ctx-page-bg: var(--c-bg);
}
.ctx-cashier {
  --ctx-sidebar-bg: var(--c2);
  --ctx-sidebar-text: rgba(255,255,255,0.7);
  --ctx-sidebar-active-bg: var(--c1);
  --ctx-sidebar-active-text: var(--c2);
  --ctx-sidebar-active-border: var(--c1);
  --ctx-sidebar-section: rgba(255,255,255,0.2);
  --ctx-topbar-bg: var(--c2);
  --ctx-page-bg: #1A1410;
}
.ctx-affiliate {
  --ctx-sidebar-bg: var(--c2);
  --ctx-sidebar-text: rgba(255,255,255,0.7);
  --ctx-sidebar-active-bg: var(--c1);
  --ctx-sidebar-active-text: var(--c2);
  --ctx-sidebar-active-border: var(--c1);
  --ctx-sidebar-section: rgba(255,255,255,0.2);
  --ctx-topbar-bg: #ffffff;
  --ctx-page-bg: var(--c-bg);
}


/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR — Unified navigation classes
   ═══════════════════════════════════════════════════════════════════ */

/* New unified classes (.hy-sb-*) */
.hy-sb-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--br-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--ctx-sidebar-text);
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: all 0.15s;
}
.hy-sb-link:hover {
  background: var(--ctx-sidebar-active-bg);
  color: var(--ctx-sidebar-active-text);
  border-left-color: rgba(200,149,106,0.4);
}
.hy-sb-active {
  background: var(--ctx-sidebar-active-bg);
  color: var(--ctx-sidebar-active-text);
  font-weight: 700;
  border-left-color: var(--ctx-sidebar-active-border);
}
.hy-sb-section {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ctx-sidebar-section);
  padding: 0 14px;
  margin: 20px 0 6px;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.2s;
}

/* Legacy sidebar classes (admin light bg) */
.sb-link {
  color: var(--ctx-sidebar-text, var(--c-accent));
  border-left: 2px solid transparent;
  font-weight: 500;
  transition: all 0.15s;
}
.sb-link:hover {
  background: var(--ctx-sidebar-active-bg, rgba(200,149,106,0.08));
  color: var(--ctx-sidebar-active-text, var(--c2));
  border-left-color: rgba(200,149,106,0.4);
}
.sb-active {
  background: var(--ctx-sidebar-active-bg, rgba(200,149,106,0.12));
  color: var(--ctx-sidebar-active-text, var(--c2));
  font-weight: 700;
  border-left-color: var(--ctx-sidebar-active-border, var(--c1));
}
.sb-section {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ctx-sidebar-section, var(--c-accent));
  opacity: 0.5;
  margin-bottom: 4px;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.2s;
}

.cl-link {
  color: rgba(255,255,255,0.55);
  border-left: 2px solid transparent;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-left-color 0.15s;
}
.cl-link:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
  border-left-color: rgba(200,149,106,0.45);
}
.cl-active {
  background: rgba(200,149,106,0.16);
  color: var(--c1, #C8956A);
  font-weight: 700;
  border-left-color: var(--c1, #C8956A);
}
.cl-section {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.22);
  margin-bottom: 4px;
  overflow: hidden;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════
   BOTTOM NAVBAR — Mobile quick access
   ═══════════════════════════════════════════════════════════════════ */
.hy-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  border-top: 1px solid rgba(45,21,5,0.08);
  box-shadow: 0 -2px 10px rgba(45,21,5,0.06);
  padding: 6px 0 env(safe-area-inset-bottom, 8px);
  justify-content: space-around;
  align-items: center;
}
@media (max-width: 768px) {
  .hy-bottom-nav { display: flex; }
  .hy-has-bottom-nav main { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
.hy-bn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 12px;
  min-width: 44px;
  min-height: 44px;
  color: var(--c-accent, #7A5C3E);
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  transition: color 0.15s;
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.hy-bn-item i { font-size: 22px; }
.hy-bn-active { color: var(--c1, #C8956A); font-weight: 700; }
.hy-bn-active i { color: var(--c1, #C8956A); }
.hy-bn-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-danger, #C75C3A);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.hy-bottom-nav-dark { background: #1A1410; border-color: rgba(200,149,106,0.1); }
.hy-bottom-nav-dark .hy-bn-item { color: rgba(255,255,255,0.5); }
.hy-bottom-nav-dark .hy-bn-active { color: var(--c1); }


/* ═══════════════════════════════════════════════════════════════════
   HY COMPONENTS — Unified design system
   ═══════════════════════════════════════════════════════════════════ */

/* Cards */
.hy-card {
  background: var(--card-bg);
  border-radius: var(--br-lg);
  box-shadow: var(--elevation-1);
  padding: var(--space-card, 20px);
  transition: box-shadow 0.2s, transform 0.2s;
}
.hy-card-hover:hover {
  box-shadow: var(--elevation-2);
  transform: translateY(-2px);
}

/* Buttons */
.hy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--br-md);
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  text-decoration: none;
  font-family: inherit;
}
.hy-btn:hover { transform: translateY(-1px); }
.hy-btn:active { transform: translateY(0); }
.hy-btn-primary { background: var(--c1); color: var(--c2); }
.hy-btn-secondary { background: var(--c2); color: var(--c1); }
.hy-btn-ghost { background: transparent; border: 1px solid var(--outline); color: var(--c-accent); }
.hy-btn-danger { background: var(--c-danger); color: #fff; }
.hy-btn-success { background: var(--c-success); color: #fff; }
.hy-btn-sm { padding: 6px 14px; font-size: 11px; }
.hy-btn-lg { padding: 14px 28px; font-size: 15px; }

/* Forms */
.hy-input, .hy-select, .hy-textarea {
  width: 100%;
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--br-md);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  outline: none;
  transition: border 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.hy-input:focus, .hy-select:focus, .hy-textarea:focus {
  border-color: var(--c1);
  box-shadow: 0 0 0 3px rgba(200,149,106,0.12);
  background: var(--card-bg);
}
.hy-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-accent);
  margin-bottom: 6px;
}

/* Tables */
.hy-table { width: 100%; border-collapse: collapse; }
.hy-table th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-accent);
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--outline-variant);
}
.hy-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.hy-table tr:hover { background: var(--hover-bg); }

/* Badges */
.hy-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--br-pill);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.hy-badge-success { background: rgba(93,140,62,0.1); color: var(--c-success); }
.hy-badge-danger { background: rgba(199,92,58,0.1); color: var(--c-danger); }
.hy-badge-warning { background: rgba(212,160,23,0.1); color: var(--c-warning); }
.hy-badge-info { background: rgba(59,130,246,0.1); color: #3B82F6; }
.hy-badge-neutral { background: var(--surface-container); color: var(--c-accent); }

/* Trust Bar */
.hy-trust-bar {
  background: var(--c2);
  padding: 32px 0;
  border-top: 1px solid rgba(200,149,106,0.15);
}
.hy-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 0 16px;
}
.hy-trust-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(200,149,106,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--c1);
}
.hy-trust-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.hy-trust-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
}

/* Footer */
.hy-footer {
  background: var(--c2, #2D1505);
  padding: 0;
  border-top: 3px solid var(--c1);
}
.hy-foot-col { display: flex; flex-direction: column; gap: 8px; }
.hy-foot-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c1);
  margin-bottom: 4px;
}
.hy-foot-link {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.15s;
  font-weight: 500;
}
.hy-foot-link:hover { color: #fff; }
.hy-foot-social { display: flex; gap: 8px; }
.hy-foot-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
}


/* ═══════════════════════════════════════════════════════════════════
   ADMIN LAYOUT — Inline styles extracted from layout_admin.php
   ═══════════════════════════════════════════════════════════════════ */
.admin-card {
  background: #fff;
  border-radius: var(--br-lg);
  box-shadow: var(--elevation-1);
  padding: 24px;
  transition: box-shadow 0.15s, background 0.15s;
}
.admin-card:hover { box-shadow: var(--elevation-2); }

/* Admin scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--c1); border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--c1), var(--c2) 20%); }


/* ═══════════════════════════════════════════════════════════════════
   HOME PAGE — Hero, Categories, Arrivals, Value Prop, Reviews, Newsletter
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero Section ── */
.hy-hero {
  background: linear-gradient(135deg, var(--c2, #2D1505) 0%, color-mix(in srgb, var(--c2, #2D1505), var(--c1, #C8956A) 25%) 50%, var(--c2, #2D1505) 100%);
  position: relative;
  overflow: hidden;
}
.hy-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(200,149,106,0.15) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 80%, rgba(200,149,106,0.1) 0%, transparent 50%);
  pointer-events: none;
}
.hy-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px 60px;
  position: relative;
  z-index: 1;
}
.hy-hero-content {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.hy-hero-title {
  font-family: var(--font-sec);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: var(--c1, #C8956A);
  margin: 0 0 14px;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.hy-hero-slogan {
  font-size: clamp(.92rem, 1.8vw, 1.1rem);
  font-weight: 500;
  color: rgba(245, 240, 235, 0.7);
  margin: 0 0 32px;
  line-height: 1.65;
}
.hy-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hy-hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--br-md);
  background: var(--c1, #C8956A);
  color: var(--c2, #2D1505);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.hy-hero-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201, 168, 124, 0.35);
}
.hy-hero-btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--br-md);
  background: #25D366;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.hy-hero-btn-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
}
.hy-hero-stats {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.hy-hero-stat { text-align: center; }
.hy-hero-stat-num {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--c1, #C8956A);
  font-family: var(--font-sec);
  letter-spacing: -0.5px;
}
.hy-hero-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(245, 240, 235, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hy-hero-stat-sep {
  width: 1px;
  height: 36px;
  background: rgba(245, 240, 235, 0.15);
}

/* ── Shared Home Section ── */
.hy-home-section { padding: 56px 0; }
.hy-home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.hy-home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
.hy-home-title {
  font-family: var(--font-sec);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--c-text, #2D1505);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.hy-home-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c1, #C8956A);
  text-decoration: none;
  transition: gap 0.2s;
}
.hy-home-more:hover { gap: 10px; }

/* ── Category Grid ── */
.hy-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.hy-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  background: var(--card-bg, #fff);
  border-radius: var(--br-lg);
  border: 1px solid var(--card-border, rgba(45,21,5,0.06));
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  text-align: center;
}
.hy-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--elevation-2);
  border-color: rgba(200,149,106,0.25);
}
.hy-cat-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.hy-cat-card:hover .hy-cat-icon { transform: scale(1.1); }
.hy-cat-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text, #2D1505);
  margin: 0;
}
.hy-cat-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-accent, #7A5C3E);
}

/* ── Arrivals Scroll ── */
.hy-arrivals-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.hy-arrivals-scroll::-webkit-scrollbar { display: none; }
.hy-arrival-card {
  flex: 0 0 calc(25% - 12px);
  scroll-snap-align: start;
  min-width: 200px;
}
.hy-arrival-card .p-card {
  width: 100%;
  min-width: 0;
}

/* ── Value Proposition ── */
.hy-vp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.hy-vp-card {
  text-align: center;
  padding: 32px 20px;
  background: var(--card-bg, #fff);
  border-radius: var(--br-lg);
  border: 1px solid var(--card-border, rgba(45,21,5,0.06));
  transition: transform 0.2s, box-shadow 0.2s;
}
.hy-vp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--elevation-2);
}
.hy-vp-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(200,149,106,0.12);
  color: var(--c1, #C8956A);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.hy-vp-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text, #2D1505);
  margin: 0 0 8px;
}
.hy-vp-desc {
  font-size: 13px;
  color: var(--c-accent, #7A5C3E);
  line-height: 1.7;
  margin: 0;
}

/* ── Review Cards ── */
.hy-reviews-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.hy-reviews-scroll::-webkit-scrollbar { display: none; }
.hy-review-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  background: var(--card-bg, #fff);
  border-radius: var(--br-lg);
  border: 1px solid var(--card-border, rgba(45,21,5,0.06));
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hy-review-stars { display: flex; gap: 2px; }
.hy-review-comment {
  font-size: 13px;
  color: var(--c-text, #2D1505);
  line-height: 1.7;
  flex: 1;
  margin: 0;
}
.hy-review-author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--card-border, rgba(45,21,5,0.06));
}
.hy-review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(200,149,106,0.15);
  color: var(--c1, #C8956A);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.hy-review-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text, #2D1505);
  margin: 0;
}
.hy-review-source {
  font-size: 10px;
  font-weight: 600;
  color: var(--c-accent, #7A5C3E);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Newsletter CTA ── */
.hy-newsletter-cta {
  background: linear-gradient(135deg, rgba(200,149,106,0.15) 0%, rgba(200,149,106,0.08) 100%);
  padding: 56px 20px;
}


/* ── Home Responsive ── */
@media (max-width: 1024px) {
  .hy-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .hy-hero-inner { padding: 56px 16px 40px; }
  .hy-hero-stats { gap: 20px; }
  .hy-hero-stat-num { font-size: 22px; }
  .hy-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hy-arrival-card { flex: 0 0 calc(50% - 8px); min-width: 160px; }
  .hy-review-card { flex: 0 0 260px; }
  .hy-home-section { padding: 40px 0; }
}
@media (max-width: 480px) {
  .hy-hero-actions { flex-direction: column; }
  .hy-hero-btn-primary, .hy-hero-btn-wa { width: 100%; justify-content: center; }
  .hy-hero-stat-sep { display: none; }
  .hy-hero-stats { gap: 16px; }
}


/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM COMPONENTS (merged from style.css)
   Layout, Buttons, Badges, Forms, Cards, Sections, Header/Footer,
   Product cards, Pagination, Chips, Accordion, Steps, Flash, Reveal
   ═══════════════════════════════════════════════════════════════════ */

/* Layout */
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 32px}
.wrap-sm{max-width:820px;margin:0 auto;padding:0 32px}
.wrap-md{max-width:1000px;margin:0 auto;padding:0 32px}

/* Typography helpers */
.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--car-dk);display:block;margin-bottom:8px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--r-pill);font-size:.875rem;font-weight:500;cursor:pointer;border:2px solid transparent;transition:all .22s ease;white-space:nowrap}
.btn-primary{background:var(--brown);color:var(--cream)}
.btn-primary:hover{background:var(--br-mid);transform:translateY(-2px);box-shadow:var(--sh)}
.btn-caramel{background:var(--caramel);color:var(--white)}
.btn-caramel:hover{background:var(--car-dk);transform:translateY(-2px);box-shadow:var(--sh)}
.btn-outline{background:transparent;color:var(--brown);border-color:var(--brown)}
.btn-outline:hover{background:var(--brown);color:var(--cream)}
.btn-outline-cream{background:transparent;color:var(--cream);border-color:rgba(245,236,215,.5)}
.btn-outline-cream:hover{background:var(--cream);color:var(--brown)}
.btn-ghost{background:transparent;color:var(--car-dk)}
.btn-ghost:hover{background:var(--cream)}
.btn-sm{padding:8px 18px;font-size:.8rem}
.btn-lg{padding:15px 34px;font-size:.95rem}
.btn-full{width:100%}

/* Badge color variants */
.badge-car{background:var(--caramel);color:white}
.badge-brown{background:var(--brown);color:var(--cream)}
.badge-cream{background:var(--cream);color:var(--brown);border:1px solid var(--border)}
.badge-success{background:var(--green-bg);color:var(--green)}
.badge-new{background:var(--car-lt);color:var(--brown)}

/* Forms */
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:.82rem;font-weight:500;color:var(--brown)}
.form-control{width:100%;padding:12px 15px;border:1.5px solid var(--border);border-radius:var(--r);background:white;color:var(--text);font-size:.9rem;transition:border-color .2s,box-shadow .2s;outline:none}
.form-control:focus{border-color:var(--caramel);box-shadow:0 0 0 3px rgba(200,149,106,.12)}
.form-control::placeholder{color:var(--light)}
.form-hint{font-size:.75rem;color:var(--muted)}
.form-error{font-size:.75rem;color:#c62828}
.input-wrap{position:relative}
.input-wrap .form-control{padding-left:42px}
.input-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:flex}

/* Cards */
.card{background:white;border-radius:var(--r-lg);border:1px solid var(--border);overflow:hidden}
.card-body{padding:24px}
.card-hover{transition:all .3s;cursor:pointer}
.card-hover:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--caramel)}

/* ═══ STORE PUBLIC COMPONENTS (from style.css) ═══ */

/* Section header */
/* sec-head — see unified definition further down */

/* Page hero */
.page-hero{background:var(--cream);padding:48px 0 36px;border-bottom:1px solid var(--border)}
.page-hero h1{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:10px}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);padding-bottom:16px}
.breadcrumb a:hover{color:var(--caramel)}
.breadcrumb .sep{opacity:.4}
.breadcrumb .cur{color:var(--brown);font-weight:500}

/* Site header */
.site-header{position:sticky;top:0;z-index:200;background:var(--cream-lt);border-bottom:1px solid var(--border);padding:20px 0}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:100%;gap:16px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-mark{width:36px;height:36px;background:var(--brown);border-radius:50%;display:grid;place-items:center}
.logo-mark span{font-family:var(--f-script);color:var(--caramel);font-size:.95rem;line-height:1}
.logo-name{font-family:var(--f-script);font-size:1.35rem;color:var(--brown);line-height:1}
.logo-tag{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block}
.main-nav{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.main-nav a{padding:7px 13px;border-radius:var(--r-pill);font-size:.83rem;color:var(--muted);transition:all .2s}
.main-nav a:hover,.main-nav a.active{background:var(--cream);color:var(--brown);font-weight:500}
.header-act{display:flex;align-items:center;gap:7px;flex-shrink:0}
.ico-btn{width:36px;height:36px;border-radius:50%;border:none;background:var(--cream);cursor:pointer;display:grid;place-items:center;transition:background .2s;position:relative;color:var(--brown)}
.ico-btn:hover{background:var(--cream-dk)}
.ico-btn .dot{position:absolute;top:1px;right:1px;width:15px;height:15px;background:var(--caramel);border-radius:50%;border:2px solid var(--cream-lt);font-size:.58rem;font-weight:700;color:white;display:grid;place-items:center}

/* Trust bar */
.trust-bar{background:var(--brown);padding:18px 0}
.trust-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.trust-it{display:flex;align-items:center;gap:10px;color:var(--cream);font-size:.88rem}
.trust-ico{width:34px;height:34px;background:rgba(200,149,106,.2);border-radius:50%;display:grid;place-items:center;font-size:1rem;flex-shrink:0}

/* (Product card styles in original section ~line 1682) */

/* ═══ FOOTER — Clotya style (light bg) ═══ */
.site-footer{background:#fff;border-top:1px solid var(--border,#E8D4B4);color:var(--brown,#2D1505)}

/* Footer grid — 5 columns */
.ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr;gap:36px;padding:56px 0 44px;border-bottom:1px solid var(--border,#E8D4B4)}
.ft-brand .f-logo .logo-name{color:var(--brown,#2D1505)}
.f-desc{font-size:.88rem;color:var(--muted,#7A5C3E);line-height:1.7;margin:14px 0 16px}
.f-contact-line{font-size:.84rem;color:var(--muted,#7A5C3E);margin:6px 0;display:flex;align-items:center;gap:8px}
.f-contact-line i{width:14px;color:var(--caramel,#C8956A);font-size:.78rem}
.f-soc{display:flex;gap:8px;flex-wrap:wrap}
.soc-btn{width:34px;height:34px;border-radius:50%;background:var(--cream,#F5ECD7);color:var(--brown,#2D1505);display:grid;place-items:center;font-size:.82rem;cursor:pointer;transition:all .2s;border:none}
.soc-btn:hover{background:var(--brown,#2D1505);color:#fff;transform:translateY(-2px)}

/* Footer link columns */
.f-col h5{font-family:var(--f-body);font-size:.82rem;font-weight:700;color:var(--brown,#2D1505);margin-bottom:20px;padding:0;border:none}
.f-col ul{list-style:none;padding:0;margin:0}
.f-col li{margin-bottom:10px}
.f-col a{font-size:.86rem;color:var(--muted,#7A5C3E);transition:color .2s;display:inline-block;text-decoration:none}
.f-col a:hover{color:var(--brown,#2D1505)}

/* (Newsletter now uses .ft-newsletter / .ft-nl-form-inline — see below ft-bottom) */

/* Newsletter band (full-width, below grid) */
.ft-newsletter{padding:32px 0;border-bottom:1px solid var(--border,#E8D4B4)}
.ft-nl-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ft-nl-text{flex:1;min-width:220px}
.ft-nl-text h5{font-family:var(--f-body);font-size:.92rem;font-weight:700;color:var(--brown,#2D1505);margin:0 0 4px}
.ft-nl-text p{font-size:.84rem;color:var(--muted,#7A5C3E);margin:0;line-height:1.5}
.ft-nl-form-inline{display:flex;gap:8px;flex:1;max-width:420px;min-width:260px}
.ft-nl-form-inline input{flex:1;padding:12px 16px;border:1px solid var(--border,#E8D4B4);border-radius:var(--r-sm,6px);font-size:.86rem;font-family:var(--f-body);outline:none;background:#fff;color:var(--brown,#2D1505);transition:border-color .2s}
.ft-nl-form-inline input:focus{border-color:var(--brown,#2D1505)}
.ft-nl-form-inline input::placeholder{color:var(--light,#A8906E)}
.ft-nl-form-inline button{padding:12px 24px;background:var(--brown,#2D1505);color:#fff;border:none;border-radius:var(--r-sm,6px);font-size:.84rem;font-weight:700;font-family:var(--f-body);cursor:pointer;transition:background .2s;white-space:nowrap}
.ft-nl-form-inline button:hover{background:var(--caramel,#C8956A)}
.ft-nl-form-inline button.success{background:#25D366}

/* Footer bottom — copyright + paiement + légal */
.ft-bottom{display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:16px;flex-wrap:wrap}
.ft-bottom>p{font-size:.78rem;color:var(--muted,#7A5C3E);margin:0}
.ft-pay-icons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ft-pay-badge{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;background:var(--cream,#F5ECD7);border-radius:4px;font-size:.7rem;font-weight:600;color:var(--brown,#2D1505)}
.ft-legal-links{display:flex;align-items:center;gap:6px}
.ft-legal-links a{font-size:.78rem;color:var(--muted,#7A5C3E);text-decoration:none;transition:color .2s}
.ft-legal-links a:hover{color:var(--brown,#2D1505)}
.ft-legal-links a+a::before{content:'|';margin-right:6px;color:var(--border,#E8D4B4)}

/* Pagination */
.pagination{display:flex;align-items:center;gap:5px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.pg-btn{width:36px;height:36px;border-radius:var(--r);border:1.5px solid var(--border);background:white;font-size:.83rem;cursor:pointer;display:grid;place-items:center;transition:all .2s;color:var(--muted)}
.pg-btn:hover,.pg-btn.active{background:var(--brown);border-color:var(--brown);color:white}

/* Chips / filters */
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{padding:7px 15px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:white;font-size:.81rem;cursor:pointer;color:var(--muted);transition:all .2s}
.chip:hover,.chip.active{background:var(--brown);border-color:var(--brown);color:white}

/* Accordion */
.acc-item{border-bottom:1px solid var(--border)}
.acc-btn{width:100%;padding:17px 0;background:none;border:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:.93rem;font-weight:600;color:var(--brown);gap:14px;text-align:left}
.acc-ico{width:26px;height:26px;border-radius:50%;background:var(--cream);display:grid;place-items:center;font-size:.72rem;flex-shrink:0;transition:all .25s}
.acc-item.open .acc-ico{background:var(--caramel);color:white;transform:rotate(45deg)}
.acc-body{display:none;padding-bottom:17px;font-size:.88rem;color:var(--muted);line-height:1.75}
.acc-item.open .acc-body{display:block}

/* Steps row */
.steps-row{display:flex;align-items:flex-start;position:relative}
.steps-row::before{content:'';position:absolute;top:27px;left:8%;right:8%;height:2px;background:repeating-linear-gradient(90deg,var(--caramel) 0,var(--caramel) 7px,transparent 7px,transparent 15px)}
.step-it{flex:1;text-align:center;position:relative;z-index:1}
.step-num{width:54px;height:54px;border-radius:50%;background:white;border:2.5px solid var(--caramel);margin:0 auto 12px;display:grid;place-items:center;font-family:var(--f-display);font-size:1.15rem;font-weight:800;color:var(--brown);transition:all .3s}
.step-it:hover .step-num{background:var(--caramel);color:white;transform:scale(1.1)}
.step-title{font-size:.88rem;font-weight:600;color:var(--brown);margin-bottom:4px}
.step-desc{font-size:.78rem;color:var(--muted)}

/* Flash */
.flash{padding:12px 18px;border-radius:var(--r);font-size:.875rem;font-weight:500;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.flash-ok{background:var(--green-bg);color:var(--green)}
.flash-err{background:#FFEBEE;color:#B71C1C}
.flash-info{background:var(--cream);color:var(--brown);border:1px solid var(--border)}

/* Divider */
hr.sep{border:none;border-top:1px solid var(--border)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.25,.46,.45,.94),transform .6s cubic-bezier(.25,.46,.45,.94)}
.reveal.in{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-24px);transition:opacity .6s cubic-bezier(.25,.46,.45,.94),transform .6s cubic-bezier(.25,.46,.45,.94)}
.reveal-left.in{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(24px);transition:opacity .6s cubic-bezier(.25,.46,.45,.94),transform .6s cubic-bezier(.25,.46,.45,.94)}
.reveal-right.in{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .5s cubic-bezier(.25,.46,.45,.94),transform .5s cubic-bezier(.25,.46,.45,.94)}
.reveal-scale.in{opacity:1;transform:none}

/* Stagger delays */
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
.d5{transition-delay:.40s}.d6{transition-delay:.48s}.d7{transition-delay:.56s}.d8{transition-delay:.64s}

/* Store responsive */
@media(max-width:1024px){
  .main-nav{display:none}
  .ft-grid{grid-template-columns:1fr 1fr 1fr;gap:28px}
  .ft-brand{grid-column:1 / -1}
}
@media(max-width:768px){
  .sec-head{margin-bottom:32px}
  .page-hero{padding:32px 0 24px}
  .steps-row{flex-wrap:wrap;gap:20px}
  .steps-row::before{display:none}
  .step-it{min-width:45%}
  .trust-row{flex-wrap:wrap;justify-content:center;gap:12px}
  .trust-it{min-width:44%;flex:1 1 44%;background:rgba(200,149,106,.12);border-radius:var(--r,8px);padding:12px 14px;gap:10px}
  .trust-ico{flex-shrink:0}
  .ft-grid{grid-template-columns:1fr 1fr;gap:24px;padding:36px 0 28px}
  .ft-brand{grid-column:1 / -1}
  .ft-nl-inner{flex-direction:column;text-align:center}
  .ft-nl-form-inline{max-width:100%;justify-content:center}
  .ft-bottom{flex-direction:column;text-align:center;gap:12px}
  .ft-pay-icons{justify-content:center}
  .ft-legal-links{justify-content:center}
  .site-footer{padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 18px)}
}
@media(max-width:480px){
  .sec-head{margin-bottom:24px}
  .sec-head>p{font-size:.88rem}
  .page-hero{padding:24px 0 18px}
  .step-it{min-width:100%}
  .ft-grid{grid-template-columns:1fr;gap:20px;padding:28px 0 20px}
  .ft-brand{grid-column:auto}
  .ft-nl-form-inline{flex-direction:column}
  .ft-nl-form-inline input,.ft-nl-form-inline button{width:100%}
}

/* ═══ SEARCH OVERLAY ═══ */
.search-overlay{position:fixed;inset:0;z-index:210;background:rgba(45,21,5,.55);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding-top:min(15vh,120px)}
.search-panel{background:var(--cream-lt,#FDF8F2);border-radius:var(--r-lg,20px);width:100%;max-width:620px;box-shadow:0 25px 80px rgba(45,21,5,.25);overflow:hidden;margin:0 16px}
.search-input-row{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border,#E8D4B4)}
.search-input-icon{color:var(--muted,#7A5C3E);font-size:16px;flex-shrink:0}
.search-input{flex:1;border:none;outline:none;font-size:1rem;font-weight:500;font-family:var(--f-body,inherit);background:transparent;color:var(--brown,#2D1505)}
.search-input::placeholder{color:var(--light,#A8906E)}
.search-close-btn{flex-shrink:0}
.search-results{max-height:50vh;overflow-y:auto;padding:8px 0}
.search-result-card{display:flex;align-items:center;gap:12px;padding:10px 20px;text-decoration:none;transition:background .12s}
.search-result-card:hover{background:var(--cream,#F5ECD7)}
.search-result-img{width:44px;height:44px;border-radius:var(--r-sm,6px);object-fit:cover;background:var(--cream,#F5ECD7);flex-shrink:0}
.search-result-info{flex:1;min-width:0}
.search-result-name{font-size:.85rem;font-weight:600;color:var(--brown,#2D1505);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-result-meta{font-size:.75rem;color:var(--muted,#7A5C3E);margin:2px 0 0;display:flex;align-items:center;gap:8px}
.search-result-brand{font-weight:600}
.search-result-price{font-weight:700;color:var(--caramel,#C8956A)}
.search-view-all{display:block;text-align:center;padding:12px;font-size:.82rem;font-weight:600;color:var(--caramel,#C8956A);text-decoration:none;border-top:1px solid var(--border,#E8D4B4);transition:background .12s}
.search-view-all:hover{background:var(--cream,#F5ECD7)}
.search-empty{padding:32px 20px;text-align:center}
.search-empty p{font-size:.88rem;color:var(--muted,#7A5C3E)}
.search-browse-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:.82rem;font-weight:600;color:var(--caramel,#C8956A);text-decoration:none}
.search-hint{padding:12px 20px;font-size:.78rem;color:var(--light,#A8906E)}
@media(max-width:600px){
  .search-overlay{padding-top:0;align-items:flex-start}
  .search-panel{max-width:100%;margin:0;border-radius:0 0 var(--r-lg,20px) var(--r-lg,20px)}
}

/* (newsletter styles moved to .ft-newsletter-band in footer section) */

/* ═══ MISC STORE COMPONENTS ═══ */

/* Logo image */
.logo-img{width:36px;height:36px;object-fit:contain;border-radius:8px;flex-shrink:0}

/* Header scrolled state */
.site-header.is-scrolled{box-shadow:0 2px 12px rgba(45,21,5,.08);padding:14px 0}

/* Header account button */
.header-account-btn{font-size:.78rem;gap:6px}
@media(max-width:768px){
  .header-account-label{display:none}
  .header-account-btn{width:36px;height:36px;padding:0;border-radius:50%;justify-content:center}
}

/* Back to top button */
.back-to-top{width:36px;height:36px;border-radius:50%;background:rgba(200,149,106,.15);color:var(--caramel,#C8956A);border:none;cursor:pointer;display:grid;place-items:center;font-size:.8rem;transition:all .2s}
.back-to-top:hover{background:var(--caramel,#C8956A);color:white}

/* ═══ PUBLIC PAGE SHARED COMPONENTS ═══ */

/* ── Page breadcrumb card ── */
.page-breadcrumb{max-width:var(--max-w-page,1400px);margin:0 auto;padding:var(--wrap-px) var(--wrap-px) 0}
.page-breadcrumb .card-s{background:white;border-radius:var(--r-lg);border:1px solid var(--border);padding:18px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.page-breadcrumb h1{font-size:1.25rem;font-weight:700;color:var(--brown);display:flex;align-items:center;gap:8px;margin:0}
.page-breadcrumb h1 i{color:var(--caramel)}
.page-breadcrumb nav{display:flex;align-items:center;gap:8px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.page-breadcrumb nav a{color:var(--muted);text-decoration:none;transition:color .15s}
.page-breadcrumb nav a:hover{color:var(--caramel)}
.page-breadcrumb .bc-active{color:var(--caramel);padding:5px 14px;background:color-mix(in srgb,var(--c-warning),transparent 92%);border-radius:var(--r-lg);font-weight:700}

/* ── Page container ── */
.page-wrap{max-width:var(--max-w-page,1400px);margin:0 auto;padding:var(--wrap-px)}
.page-inner{max-width:960px;margin:0 auto}

/* ── Section header ── */
.sec-head{text-align:center;margin-bottom:clamp(32px,5vw,52px)}
.sec-head .eyebrow{display:block;margin-bottom:8px}
.sec-head h2{font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:800;margin-bottom:10px}
.sec-head p{color:var(--muted);max-width:520px;margin:0 auto;font-size:.92rem;line-height:1.65}
.sec-line{width:44px;height:3px;background:var(--caramel);margin:16px auto 0;border-radius:2px}

/* ── Flash messages ── */
.flash-msg{padding:14px 20px;border-radius:var(--r);font-weight:700;font-size:.82rem;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.flash-msg i{font-size:1.1rem;flex-shrink:0}
.flash-msg--success{background:var(--green-bg);color:var(--green)}
.flash-msg--error{background:#fef2f2;color:var(--danger)}

/* ── Star rating display ── */
.stars{display:flex;gap:2px;align-items:center}
.stars i{font-size:14px}
.stars i.filled{color:var(--star-filled)}
.stars i.empty{color:var(--star-empty)}
.stars-lg i{font-size:24px}

/* ── WhatsApp button ── */
.btn-wa{background:var(--whatsapp);color:#fff;border:none}
.btn-wa:hover{background:var(--whatsapp-dk);color:#fff;transform:translateY(-2px);box-shadow:var(--sh-sm)}
.wa-icon-btn{width:36px;height:36px;border-radius:var(--r-sm);background:var(--whatsapp);color:#fff;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;flex-shrink:0;transition:all .22s;border:none}
.wa-icon-btn:hover{background:var(--whatsapp-dk);transform:scale(1.08)}
.wa-icon-btn i{font-size:16px}

/* ── Google button ── */
.btn-google{background:var(--google-blue);color:#fff;border:none}
.btn-google:hover{background:var(--google-dk);color:#fff;transform:translateY(-2px);box-shadow:var(--sh-sm)}

/* ── Section spacing harmonized ── */
.section{padding:var(--section-py) 0}

/* ── Avatar circle ── */
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;flex-shrink:0}

/* ── Accordion (shared) ── */
.acc-item{border-bottom:1px solid var(--border)}
.acc-btn{width:100%;padding:18px 0;display:flex;align-items:center;justify-content:space-between;background:none;border:none;cursor:pointer;font-family:var(--f-body);font-size:.95rem;font-weight:700;color:var(--brown);text-align:left;transition:color .2s}
.acc-btn:hover{color:var(--caramel)}
.acc-btn i{font-size:.75rem;color:var(--muted);transition:transform .3s}
.acc-item.open .acc-btn i{transform:rotate(180deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.25,.46,.45,.94)}
.acc-item.open .acc-body{max-height:800px}
.acc-body-inner{padding:0 0 20px}

/* ═══ MEDIA LIBRARY ENHANCEMENTS ═══ */

/* Upload progress bar */
.media-progress-track{height:6px;background:rgba(45,21,5,0.05);border-radius:var(--r-full);overflow:hidden}
.media-progress-bar{height:100%;background:var(--caramel);border-radius:var(--r-full);transition:width .2s ease}

/* List view table */
.media-list-table{width:100%;text-align:left;border-collapse:collapse}
.media-list-table th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:rgba(45,21,5,0.5);padding:8px 12px;white-space:nowrap;user-select:none;background:rgba(45,21,5,0.02)}
.media-list-table th.sortable{cursor:pointer}
.media-list-table th.sortable:hover{color:var(--caramel)}
.media-list-table td{padding:8px 12px;vertical-align:middle}
.media-list-table tbody tr{border-bottom:1px solid rgba(45,21,5,0.04);transition:background .15s}
.media-list-table tbody tr:hover{background:rgba(45,21,5,0.02)}

/* Selected card overlay */
.media-card-selected{outline:2px solid var(--caramel);outline-offset:-2px}

/* Checkbox in grid card */
.media-checkbox{width:18px;height:18px;border-radius:4px;border:2px solid rgba(45,21,5,0.2);accent-color:var(--caramel);cursor:pointer}
.media-checkbox:checked{border-color:var(--caramel)}

/* Stats bar mini-cards */
.media-stat-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r);background:rgba(45,21,5,0.03);font-size:10px}

/* Lightbox nav arrows */
.media-nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.85);box-shadow:0 1px 4px rgba(0,0,0,0.1);display:flex;align-items:center;justify-content:center;color:rgba(45,21,5,0.6);cursor:pointer;transition:background .15s,color .15s;z-index:10;border:none}
.media-nav-arrow:hover{background:#fff;color:var(--brown)}
.media-nav-arrow.left{left:8px}
.media-nav-arrow.right{right:8px}

/* Bulk action bar */
.media-bulk-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:rgba(200,149,106,0.06);border:1px solid rgba(200,149,106,0.15);border-radius:var(--r-lg)}

/* XL grid 6 cols (missing utility) */
@media(min-width:1280px){.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}