/* ============================================================
   Nigerian Genuine Leather — design system v3 (calm / clean)
   Principles: flat surfaces · hairline borders · 2 soft shadows
   one hover pattern · minimal motion · 8px spacing scale
   Full rules in UI-GUIDELINE.md
   ============================================================ */
:root{
  /* ink & neutrals */
  --ink:#2b2118; --ink-soft:#6b5844; --cream:#faf6ef; --cream-2:#f4ecdf; --card:#ffffff;
  /* accent + dark surface (flat, used sparingly) */
  --saddle:#8b5a2b; --saddle-2:#a9713a; --saddle-dark:#5e3a1a; --deep:#3a2413; --deeper:#241507;
  --tan:#d9b38c; --tan-soft:#f0e2d0; --line:#e7dac8; --line-soft:#efe5d6;
  /* background texture (leather grain + grid) */
  --grid-line:rgba(139,90,43,.04); --grid-dark:rgba(255,255,255,.035);
  /* status */
  --good:#2e7d32; --warn:#b26a00; --bad:#a83318; --info:#1a5f96; --wa:#1aa74d;
  /* dark red (oxblood) — secondary brand accent, used sparingly */
  --red:#8a2331; --red-dark:#5f151f; --red-soft:#f7e4e5;

  /* radii — 3 steps */
  --radius:12px; --radius-sm:8px; --radius-pill:999px;

  /* shadows — 2 soft neutral steps + focus ring */
  --shadow-sm:0 1px 2px rgba(43,33,24,.06);
  --shadow-md:0 6px 16px rgba(43,33,24,.08);
  --ring:0 0 0 3px rgba(139,90,43,.18);

  /* spacing scale (8px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:40px; --s7:64px; --s8:96px;

  /* legacy aliases so existing inline styles keep working */
  --grad:var(--saddle); --grad-deep:var(--deep);
  --shadow-xs:var(--shadow-sm); --shadow:var(--shadow-sm); --shadow-lg:var(--shadow-md);
  --ease:ease;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background-color:var(--cream);
  /* leather-grain tile + faint structural grid — reads through open/cream areas; solid cards sit on top */
  background-image:
    url("../img/leather-grain.svg"),
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:240px 240px, 48px 48px, 48px 48px;
  background-attachment:fixed;
  color:var(--ink);font:400 16px/1.6 "Segoe UI",system-ui,-apple-system,sans-serif;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--saddle);text-decoration:none;transition:color .15s}
a:hover{color:var(--saddle-dark)}
h1,h2,h3,.serif{font-family:Georgia,"Times New Roman",serif;color:var(--saddle-dark);line-height:1.22;letter-spacing:-.01em}
.container{max-width:1280px;margin:0 auto;padding:0 16px}
@media(min-width:768px){.container{padding:0 32px}}
.muted{color:var(--ink-soft)}
.small{font-size:13.5px}
.center{text-align:center}
::selection{background:var(--tan);color:var(--deep)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--cream-2)}
::-webkit-scrollbar-thumb{background:var(--tan);border-radius:6px;border:2.5px solid var(--cream-2)}

/* Loading screen (branded splash, logo centered) */
#preloader{position:fixed;inset:0;z-index:2000;background:radial-gradient(120% 120% at 50% 40%, #fffdf9 0%, var(--cream) 55%, var(--cream-2) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:opacity .6s ease}
#preloader.hide{opacity:0;pointer-events:none}
#preloader .pre-logo{width:min(320px,68vw);height:auto;animation:prefade .6s ease, prepulse 2s ease-in-out .6s infinite}
#preloader .pre-bar{width:min(220px,52vw);height:4px;border-radius:4px;background:var(--tan-soft);overflow:hidden}
#preloader .pre-bar span{display:block;height:100%;width:38%;border-radius:4px;background:var(--red);animation:prebar 1.15s ease-in-out infinite}
@keyframes prefade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes prepulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes prebar{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}
@media (prefers-reduced-motion:reduce){#preloader .pre-logo,#preloader .pre-bar span{animation:none}}

/* Lucide icons */
.lc{flex:0 0 auto;vertical-align:-3px}
.btn .lc,.icon-btn .lc{vertical-align:middle}

/* Reveal-on-scroll — one quiet fade, top-level sections only */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{animation:none!important;transition-duration:.01ms!important}}

/* ---------- Announcement (static, single line) ---------- */
.announce{background:var(--red);color:#f0d8d3;font-size:13px;padding:8px 16px;text-align:center}
.announce b{color:#fff;font-weight:600}
.announce .lc{color:#e6b9ab}
.announce .track{display:flex;gap:26px;justify-content:center;align-items:center;flex-wrap:wrap}
.announce span{display:inline-flex;align-items:center;gap:7px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:70;background:rgba(250,246,239,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;gap:14px;padding:12px 16px;max-width:1280px;margin:0 auto}
@media(min-width:768px){.header-in{padding:12px 32px}}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--radius-sm);border:1px solid var(--line);background:#fff;color:var(--saddle-dark);cursor:pointer;transition:background .15s,border-color .15s}
.icon-btn:hover{background:var(--tan-soft);border-color:var(--tan)}
/* Hamburger is mobile/tablet only — desktop uses .main-nav */
#drawer-open{display:none}
.logo{display:flex;align-items:center;gap:11px;white-space:nowrap}
.logo .mark{width:74px;height:62px;flex:0 0 auto;background:url("../img/favicon.png") center/contain no-repeat;filter:drop-shadow(0 1px 2px rgba(58,36,19,.22))}
.logo .word{font-family:Georgia,serif;font-size:18px;color:var(--deep);font-weight:700;line-height:1.05}
.search-form{flex:1;display:flex;align-items:center;max-width:520px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:0 6px 0 14px;transition:border-color .15s,box-shadow .15s}
.search-form:focus-within{border-color:var(--saddle);box-shadow:var(--ring)}
.search-form .lc{color:var(--ink-soft)}
.search-form input{flex:1;border:0;padding:11px 10px;font:inherit;background:transparent;color:var(--ink);min-width:0}
.search-form input:focus{outline:none}
.search-form button{border:0;background:var(--saddle);color:#fff;width:38px;height:34px;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.search-form button:hover{background:var(--saddle-dark)}
.header-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.icon-link{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 11px;border-radius:var(--radius-sm);color:var(--ink-soft);font-size:10.5px;font-weight:600;transition:background .15s,color .15s}
.icon-link .lc{color:var(--saddle-dark)}
.icon-link:hover{background:var(--tan-soft);color:var(--saddle-dark)}
.icon-link .count{position:absolute;top:1px;right:5px;background:var(--saddle);color:#fff;font-size:10.5px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.main-nav{background:var(--red)}
.main-nav ul{display:flex;gap:2px;list-style:none;max-width:1280px;margin:0 auto;padding:0 14px;overflow-x:auto;scrollbar-width:none}
.main-nav ul::-webkit-scrollbar{display:none}
.main-nav a{display:flex;align-items:center;gap:7px;padding:11px 15px;color:#fff;font-weight:700;font-size:13.8px;border-bottom:2px solid transparent;white-space:nowrap;transition:background .15s,border-color .15s}
.main-nav a .lc{color:var(--tan)}
.main-nav a:hover,.main-nav a.active{color:#fff;border-bottom-color:#fff;background:var(--red-dark)}

/* ---------- Side drawer ---------- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(36,21,7,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:98}
.drawer-backdrop.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(320px,86vw);background:#fff;z-index:99;transform:translateX(-102%);transition:transform .28s ease;display:flex;flex-direction:column;box-shadow:var(--shadow-md)}
.drawer.open{transform:none}
.drawer-head{background:var(--red);color:#f7ecdf;padding:20px 18px;display:flex;justify-content:space-between;align-items:center}
.drawer-head .t{font-family:Georgia,serif;font-size:18px}
.drawer-head button{background:rgba(255,255,255,.12);border:0;color:#f7ecdf;width:36px;height:36px;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center}
.drawer nav{flex:1;overflow-y:auto;padding:14px 12px;background:var(--red)}
.drawer nav .grp{font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:#e6b9ab;font-weight:700;margin:16px 8px 6px}
.drawer nav a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius-sm);color:#fff;font-weight:700;font-size:14.5px;transition:background .15s}
.drawer nav a .lc{color:var(--tan)}
.drawer nav a:hover{background:var(--red-dark);color:#fff}
.drawer nav a .chev{margin-left:auto;color:#e6b9ab}
.drawer-foot{padding:14px;background:var(--red);border-top:1px solid var(--red-dark)}
body.drawer-open{overflow:hidden}

/* ---------- Buttons & badges ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--saddle);color:#fff;border:0;border-radius:var(--radius);padding:12px 24px;font:600 14.5px "Segoe UI",sans-serif;cursor:pointer;transition:background .15s,box-shadow .15s,transform .15s;text-align:center;box-shadow:var(--shadow-sm)}
.btn:hover{background:var(--saddle-dark);color:#fff;box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn:active{transform:none}
.btn-dark{background:var(--deep)}
.btn-dark:hover{background:#2a1a0d}
.btn-outline{background:#fff;color:var(--saddle-dark);border:1px solid var(--saddle);box-shadow:none}
.btn-outline:hover{background:var(--tan-soft);color:var(--saddle-dark)}
.btn-wa{background:var(--wa)}
.btn-wa:hover{background:#158c40}
.btn-sm{padding:8px 15px;font-size:13px;border-radius:var(--radius-sm)}
.btn-lg{padding:14px 28px;font-size:15.5px}
.btn-danger{background:var(--bad)}
.btn-danger:hover{background:#8a2a13}
.btn.size-btn,.btn-red{background:var(--red)}
.btn.size-btn:hover,.btn-red:hover{background:var(--red-dark)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 11px;border-radius:var(--radius-pill);white-space:nowrap}
.st-ok{background:#e8f2e9;color:var(--good);border:1px solid #bcd9bf}
.st-warn{background:#fdf1de;color:var(--warn);border:1px solid #ecd2a4}
.st-info{background:#e3eef8;color:var(--info);border:1px solid #bcd7ec}
.st-ship{background:#eae4f7;color:#5b3ea8;border:1px solid #cfc2ec}
.st-off{background:#f0f0f0;color:#777;border:1px solid #dcdcdc}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--tan-soft);color:var(--saddle-dark);border:1px solid var(--tan);border-radius:var(--radius-pill);padding:4px 13px;font-size:12.5px;font-weight:600;transition:background .15s}
a.chip:hover{background:var(--tan);color:var(--deep)}

/* ---------- Toast flashes ---------- */
.flash-wrap{position:fixed;top:16px;right:16px;z-index:120;display:flex;flex-direction:column;gap:10px;max-width:min(400px,calc(100vw - 32px))}
.flash{border-radius:var(--radius);padding:13px 18px;font-size:14px;font-weight:600;border:1px solid;box-shadow:var(--shadow-md)}
.flash.success{background:#eef7ef;color:#1d5a21;border-color:#bcd9bf}
.flash.error{background:#fdeee9;color:#8e2f1e;border-color:#f0c4b8}
.flash.info{background:#eef4fa;color:#164e7c;border-color:#c4dcf0}

/* ---------- Hero (quiet banner, warm textured wash) ---------- */
.hero{
  background-color:var(--cream-2);
  background-image:
    url("../img/leather-grain.svg"),
    radial-gradient(ellipse 70% 80% at 100% 0%, rgba(138,35,49,.06), transparent 60%),
    radial-gradient(ellipse 80% 90% at 0% 100%, rgba(139,90,43,.08), transparent 62%);
  background-size:240px 240px, 100% 100%, 100% 100%;
  background-repeat:repeat, no-repeat, no-repeat;
  border-bottom:1px solid var(--line)
}
.hero-in{max-width:1280px;margin:0 auto;padding:var(--s7) 16px;position:relative}
@media(min-width:768px){.hero-in{padding:var(--s7) 32px}}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--red);font-weight:700}
.hero h1{color:var(--deep);font-size:clamp(28px,5vw,44px);max-width:640px;margin:14px 0 12px;line-height:1.12}
.hero p{max-width:520px;color:var(--ink-soft);font-size:17px}
.hero .cta-row{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.hero .popular{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;align-items:center}
.hero .popular .lbl{font-size:12px;color:var(--ink-soft);letter-spacing:.4px}
.hero .popular a{font-size:13px;color:var(--saddle-dark);border-bottom:1px solid var(--tan)}
.hero .popular a:hover{border-color:var(--saddle)}

/* ---------- Sections ---------- */
.section{padding:var(--s7) 0 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:var(--s5)}
.section-head h2{font-size:clamp(21px,2.6vw,28px);position:relative;padding-bottom:11px}
.section-head h2::after{content:"";position:absolute;left:0;bottom:0;width:38px;height:3px;border-radius:2px;background:var(--red)}
.section-head .see{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;white-space:nowrap}
.section-head .see .lc{transition:transform .15s}
.section-head .see:hover .lc{transform:translateX(3px)}

/* ---------- Product grid & cards ---------- */
.grid{display:grid;gap:var(--s4)}
@media(min-width:768px){.grid{gap:var(--s5)}}
.grid-products{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.grid-products{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.grid-products{grid-template-columns:repeat(4,1fr)}}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s,border-color .18s}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--tan)}
.pcard .imgbox{aspect-ratio:1/1;background:var(--tan-soft);overflow:hidden;position:relative;display:block}
.pcard .imgbox img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
@media(hover:hover){.pcard:hover .imgbox img{transform:scale(1.03)}}
.pcard .flags{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.flag{font-size:10px;font-weight:700;letter-spacing:.6px;padding:3px 10px;border-radius:var(--radius-sm);color:#fff;text-transform:uppercase}
.flag.sale{background:var(--red)}
.flag.out{background:#8a8a8a}
.pcard .body{padding:14px;display:flex;flex-direction:column;gap:var(--s2);flex:1}
.pcard .cat{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.pcard h3{font-size:15px;line-height:1.35;color:var(--ink);font-family:"Segoe UI",sans-serif;font-weight:600}
.pcard h3 a{color:inherit}
.pcard h3 a:hover{color:var(--saddle-dark)}
.pcard .type{font-size:12.5px;color:var(--ink-soft)}
.pcard .pricerow{margin-top:auto;display:flex;align-items:baseline;gap:7px;padding-top:var(--s2)}
.pcard .from{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-soft);align-self:center}
.pcard .price{font-weight:700;font-size:16.5px;color:var(--ink)}
.pcard .price.sale{color:var(--red)}
.pcard .old{color:#a08a72;text-decoration:line-through;font-size:13px}
.pcard .unit{font-size:12px;color:var(--ink-soft)}
.pcard .buyrow{display:flex;gap:8px;align-items:center;margin-top:10px}
.pcard .buyrow .btn{flex:1;padding:9px;border-radius:var(--radius-sm)}
.pcard .qa{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;border-radius:var(--radius-sm);border:1px solid var(--line);background:#fff;cursor:pointer;transition:background .15s,border-color .15s}
.pcard .qa.wa{color:var(--wa)}
.pcard .qa.wa:hover{background:#eaf7ef;border-color:#bfe6cd}
.pcard .qa.chat{color:var(--saddle-dark)}
.pcard .qa.chat:hover{background:var(--tan-soft);border-color:var(--tan)}

/* ---------- Category cards ---------- */
.grid-cats{grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.grid-cats{grid-template-columns:repeat(4,1fr)}}
.ccard{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--deep);color:#fff;min-height:130px;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:18px;transition:box-shadow .18s,transform .18s;border:1px solid var(--deep)}
.ccard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:#fff}
.ccard .ic{position:absolute;top:15px;left:16px;width:40px;height:40px;border-radius:var(--radius-sm);background:rgba(253,246,234,.14);display:flex;align-items:center;justify-content:center;color:#fdf3e3}
.ccard h3{color:#fdf6ea;font-size:16.5px}
.ccard .go{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tan);font-weight:600}
.ccard .go .lc{transition:transform .15s}
.ccard:hover .go .lc{transform:translateX(3px)}
.ccard .n{position:absolute;top:15px;right:15px;font-size:11.5px;font-weight:700;color:#fff;background:var(--red);border-radius:var(--radius-pill);padding:3px 11px}

/* ---------- Value strip (replaces heavy trust cards) ---------- */
.valuestrip{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);align-items:center;justify-content:center;padding:var(--s5) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:var(--s7)}
.valuestrip .v{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-soft)}
.valuestrip .v .lc{color:var(--saddle)}
.valuestrip .v b{color:var(--ink);font-weight:600}

/* ---------- Trust cards (about page, calm) ---------- */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4);margin:var(--s3) 0}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;gap:14px;align-items:flex-start;transition:box-shadow .18s,transform .18s}
.tcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.tcard .ic{width:44px;height:44px;flex:0 0 auto;border-radius:var(--radius-sm);background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center}
.tcard b{display:block;color:var(--saddle-dark);margin-bottom:4px;font-size:14.5px}
.tcard p{font-size:13px;color:var(--ink-soft)}

/* ---------- CTA banner (oxblood accent card) ---------- */
.cta-banner{background:var(--red);border-radius:var(--radius);color:#f7ecdf;padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:var(--s5) 0}
.cta-banner h3{color:#fff;font-size:clamp(18px,2.4vw,23px);margin-bottom:5px}
.cta-banner p{color:#f0d8d3;font-size:14px;max-width:560px}
.cta-banner .btn{background:#fff;color:var(--red)}
.cta-banner .btn:hover{background:#fff;color:var(--red-dark)}

/* ---------- Shop layout ---------- */
.shop-layout{display:grid;grid-template-columns:250px 1fr;gap:32px;align-items:start;padding:22px 0 48px}
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:sticky;top:132px}
.filters h3{font-size:14.5px;margin-bottom:10px;display:flex;align-items:center;gap:8px;font-family:"Segoe UI",sans-serif;font-weight:700;color:var(--red)}
.filters h3 .lc{color:var(--red)}
.filters ul{list-style:none}
.filters li{margin:2px 0}
.filters li a{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;border-radius:var(--radius-sm);color:var(--ink);font-size:14px;transition:background .15s}
.filters li a span:last-child{font-size:11.5px;font-weight:700;color:var(--saddle);background:var(--tan-soft);border-radius:var(--radius-pill);padding:1px 9px}
.filters li a:hover,.filters li a.active{background:var(--tan-soft);color:var(--saddle-dark);font-weight:600}
.filters li a.active{box-shadow:inset 3px 0 0 var(--red);color:var(--red-dark)}
.filters li a.active span:last-child{background:var(--red);color:#fff}
.filters .fgroup{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.filters .fgroup:last-child{border:0;margin:0;padding:0}
.filters input[type=number]{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 12px;font:inherit;margin-top:7px;transition:border-color .15s,box-shadow .15s}
.filters input[type=number]:focus{outline:none;border-color:var(--saddle);box-shadow:var(--ring)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.toolbar select{border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 13px;font:inherit;background:#fff;color:var(--ink);cursor:pointer}
.pagination{display:flex;gap:7px;margin:28px 0;flex-wrap:wrap}
.pagination a{min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);font-weight:600;font-size:14px;color:var(--ink);transition:border-color .15s}
.pagination a:hover{border-color:var(--saddle)}
.pagination a.current{background:var(--saddle);border-color:var(--saddle);color:#fff}

/* ---------- Product page ---------- */
.breadcrumbs{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft);padding:18px 0 4px;flex-wrap:wrap}
.breadcrumbs .lc{color:var(--tan)}
.product-layout{display:grid;grid-template-columns:minmax(0,1fr) 1fr;gap:var(--s7);padding:18px 0 32px;align-items:start}
@media(min-width:900px){.product-layout{grid-template-columns:minmax(0,55%) 1fr}.pinfo{position:sticky;top:96px}}
.gallery .main{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--tan-soft);aspect-ratio:1/1}
.gallery .main img{width:100%;height:100%;object-fit:cover}
.gallery .thumbs{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.gallery .thumbs img{width:66px;height:66px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line);cursor:pointer;opacity:.8;transition:opacity .15s,border-color .15s}
.gallery .thumbs img.active,.gallery .thumbs img:hover{border-color:var(--saddle);opacity:1}
.pinfo h1{font-size:clamp(22px,3vw,30px);margin:6px 0 10px}
.pinfo .meta-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;align-items:center}
.pinfo .pricebox{display:flex;align-items:baseline;gap:12px;margin:16px 0}
.pinfo .pricebox .price{font-family:Georgia,serif;font-size:30px;font-weight:700;color:var(--ink)}
.pinfo .pricebox .old{text-decoration:line-through;color:#a08a72;font-size:17px}
.pinfo .pricebox .unit{color:var(--ink-soft);font-size:14px}
.stock-ok{display:inline-flex;align-items:center;gap:6px;color:var(--good);font-weight:600;font-size:13.5px}
.stock-out{display:inline-flex;align-items:center;gap:6px;color:var(--bad);font-weight:600;font-size:13.5px}
.sku-line{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);margin:2px 0 6px}
.copy-btn{cursor:pointer;font:inherit;background:none;border:0;color:var(--ink-soft);display:inline-flex;align-items:center;gap:5px;padding:2px 4px;border-radius:4px}
.copy-btn:hover{color:var(--saddle-dark);background:var(--tan-soft)}
.copy-btn b{color:var(--ink)}
.copy-btn.copied{color:var(--good)}
.qty-row{display:flex;gap:12px;align-items:stretch;margin:18px 0;flex-wrap:wrap}
.qty{display:flex;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.qty button{width:40px;border:0;background:var(--tan-soft);cursor:pointer;color:var(--saddle-dark);display:flex;align-items:center;justify-content:center;transition:background .13s}
.qty button:hover{background:var(--tan)}
.qty input{width:56px;border:0;text-align:center;font:600 15px "Segoe UI",sans-serif;color:var(--ink)}
.qty input:focus{outline:none}
.icon-action{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-sm);border:1px solid var(--line);background:#fff;cursor:pointer;transition:background .15s,border-color .15s}
.icon-action.wa{color:var(--wa)}
.icon-action.wa:hover{background:#eaf7ef;border-color:#bfe6cd}
.icon-action.chat{color:var(--saddle-dark)}
.icon-action.chat:hover{background:var(--tan-soft);border-color:var(--tan)}
.wish-link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-soft);background:none;border:0;cursor:pointer;padding:4px 0}
.wish-link:hover{color:var(--saddle-dark)}
.wish-link.saved{color:var(--red);font-weight:600}
.wish-link.saved .lc{fill:var(--red)}
.info-lines{display:grid;gap:9px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}
.info-lines .row{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-soft)}
.info-lines .row .lc{color:var(--saddle);margin-top:1px}
.info-lines b{color:var(--ink);font-weight:600}
.searches{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:14px 0}
.searches .lbl{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.pdesc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:8px 0 28px}
.pdesc h2{font-size:19px;margin-bottom:12px}
.pdesc p{margin:9px 0;color:var(--ink-soft)}

/* ---------- Callout box (payment pending, notices) ---------- */
.authenticity{background:var(--tan-soft);border:1px solid var(--tan);border-left:3px solid var(--saddle);border-radius:var(--radius-sm);padding:16px 18px;margin:14px 0;font-size:14px}
.authenticity b{color:var(--saddle-dark)}

/* ---------- Dimension variants ---------- */
.variant-pick{margin:16px 0 4px}
.variant-pick .lbl{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:var(--saddle-dark);margin-bottom:10px;flex-wrap:wrap}
.variant-list{display:grid;gap:9px;margin-bottom:6px}
.variant-option{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 15px;cursor:pointer;background:#fff;transition:border-color .15s,background .15s}
.variant-option:hover{border-color:var(--tan)}
.variant-option.checked{border-color:var(--saddle);background:var(--tan-soft);box-shadow:var(--ring)}
.variant-option.soldout{opacity:.55;cursor:not-allowed}
.variant-option input{accent-color:var(--saddle);width:16px;height:16px;flex:0 0 auto}
.variant-option .dims{display:flex;flex-direction:column;line-height:1.3}
.variant-option .dims b{color:var(--ink);font-size:14.5px}
.variant-option .dims small{color:var(--ink-soft);font-size:12px}
.variant-option .vprice{margin-left:auto;font-family:Georgia,serif;font-weight:700;font-size:16px;color:var(--ink)}

/* ---------- Guides (blog) ---------- */
.guide-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.guide-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.guide-grid{grid-template-columns:1fr}}
.gcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s,border-color .18s;box-shadow:var(--shadow-sm)}
.gcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--tan)}
.gcard-cover{display:block;aspect-ratio:1200/630;overflow:hidden;background:var(--tan-soft)}
.gcard-cover img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.gcard:hover .gcard-cover img{transform:scale(1.03)}
.gcard-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.gcard-date{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.gcard-date .lc{color:var(--red)}
.gcard h2{font-size:17px;line-height:1.3;color:var(--saddle-dark);font-family:Georgia,serif}
.gcard h2 a{color:inherit}
.gcard p{font-size:13.5px;color:var(--ink-soft);flex:1}
.gcard-read{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:var(--red)}
.gcard-read .lc{transition:transform .15s}
.gcard-read:hover{color:var(--red-dark)}.gcard-read:hover .lc{transform:translateX(3px)}

.guide-article{max-width:820px}
.guide-head{padding:8px 0 4px}
.guide-head h1{font-size:clamp(26px,4vw,40px);line-height:1.15;margin:8px 0 12px}
.guide-excerpt{font-size:18px;color:var(--ink-soft);line-height:1.55}
.guide-cover{width:100%;border-radius:var(--radius);border:1px solid var(--line);margin:18px 0 8px;aspect-ratio:1200/630;object-fit:cover}
.guide-body{font-size:16.5px;line-height:1.75;color:var(--ink);max-width:70ch}
.guide-body h2{font-size:24px;margin:32px 0 10px;color:var(--saddle-dark)}
.guide-body h3{font-size:19px;margin:22px 0 6px;color:var(--saddle-dark);font-family:Georgia,serif}
.guide-body p{margin:12px 0}
.guide-body ul,.guide-body ol{margin:12px 0 12px 24px}
.guide-body li{margin:7px 0}
.guide-body a{color:var(--red);font-weight:600;border-bottom:1px solid var(--tan)}
.guide-body a:hover{color:var(--red-dark);border-color:var(--red)}
.guide-body strong{color:var(--ink)}

/* ---------- Forms & auth ---------- */
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px;max-width:490px;margin:38px auto;box-shadow:var(--shadow-sm)}
.form-card.wide{max-width:780px}
.form-card h1{font-size:24px;margin-bottom:5px}
.form-card .sub{color:var(--ink-soft);font-size:14px;margin-bottom:20px}
.field{margin-bottom:15px}
.field label{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px;color:var(--saddle-dark)}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 14px;font:inherit;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--saddle);box-shadow:var(--ring)}
.field .hint{font-size:12px;color:var(--ink-soft);margin-top:5px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.radio-card{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius-sm);padding:15px 17px;margin-bottom:11px;cursor:pointer;background:#fff;transition:border-color .15s,background .15s}
.radio-card:hover{border-color:var(--tan)}
.radio-card input{margin-top:4px;accent-color:var(--saddle);width:16px;height:16px}
.radio-card b{display:flex;align-items:center;gap:8px;color:var(--saddle-dark);font-size:14.5px}
.radio-card b .lc{color:var(--saddle)}
.radio-card .small{margin-top:3px}
.radio-card.checked{border-color:var(--saddle);background:var(--tan-soft);box-shadow:var(--ring)}

/* ---------- Tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);margin:14px 0}
table.data{border-collapse:collapse;width:100%;min-width:600px;font-size:14px}
table.data th{background:var(--deep);color:#f5e7d0;text-align:left;padding:12px 14px;font-weight:600;white-space:nowrap;font-size:12.5px;letter-spacing:.4px;text-transform:uppercase}
table.data td{padding:11px 14px;border-top:1px solid var(--line-soft);vertical-align:middle}
table.data tbody tr:nth-child(even){background:#fcf9f3}
table.data tbody tr:hover{background:var(--tan-soft)}
.cart-thumb{width:60px;height:60px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line)}
.summary-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.summary-card .row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;font-size:14.5px}
.summary-card .row.total{border-top:1px solid var(--line);margin-top:9px;padding-top:14px;font-size:18px;font-weight:700;color:var(--ink)}
.cart-layout{display:grid;grid-template-columns:1fr 330px;gap:26px;align-items:start;padding:10px 0 44px}
@media(min-width:1021px){.contact-layout{grid-template-columns:1fr 340px}}

/* ---------- Page headers ---------- */
.page-head{background:var(--deep);color:#f7ecdf;padding:36px 0;margin-bottom:10px;border-bottom:3px solid var(--red)}
.page-head h1{color:#fdf6ea;font-size:clamp(24px,3.4vw,34px)}
.page-head p{color:#eedcc4;margin-top:8px;max-width:660px;font-size:15px}

/* ---------- Account ---------- */
.account-layout{display:grid;grid-template-columns:250px 1fr;gap:28px;align-items:start;padding:28px 0 48px}
.acct-nav{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.acct-nav a{display:flex;gap:11px;align-items:center;padding:13px 17px;color:var(--ink);font-weight:600;font-size:14px;border-bottom:1px solid var(--line-soft);transition:background .15s}
.acct-nav a .lc{color:var(--saddle)}
.acct-nav a:last-child{border-bottom:0}
.acct-nav a:hover,.acct-nav a.active{background:var(--tan-soft);color:var(--saddle-dark)}
.acct-nav a.active{box-shadow:inset 3px 0 0 var(--red)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:15px;margin:14px 0}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 19px;transition:box-shadow .18s,transform .18s}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-card .n{font-family:Georgia,serif;font-size:27px;font-weight:700;color:var(--saddle-dark)}
.stat-card .l{font-size:12.5px;color:var(--ink-soft);margin-top:3px}
.timeline{display:flex;gap:0;margin:20px 0;flex-wrap:wrap}
.tstep{flex:1;min-width:92px;text-align:center;position:relative;padding-top:28px;font-size:12.5px;color:var(--ink-soft)}
.tstep::before{content:"";width:18px;height:18px;border-radius:50%;background:#ddd0be;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:1;border:3px solid var(--cream)}
.tstep::after{content:"";position:absolute;top:8px;left:-50%;width:100%;height:3px;background:#ddd0be}
.tstep:first-child::after{display:none}
.tstep.done{color:var(--saddle-dark);font-weight:600}
.tstep.done::before{background:var(--saddle)}
.tstep.done::after{background:var(--saddle)}

/* ---------- Warehouses ---------- */
.wh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin:18px 0}
.wh-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;border-top:3px solid var(--saddle);transition:box-shadow .18s,transform .18s}
.wh-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.wh-card h3{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.wh-card h3 .lc{color:var(--saddle)}
.wh-card .tagvisit{display:inline-flex;align-items:center;gap:6px;background:#e8f2e9;color:var(--good);font-size:11.5px;font-weight:700;padding:3px 11px;border-radius:var(--radius-pill);margin-bottom:11px}

/* ---------- Footer ---------- */
.site-footer{background:var(--deep);color:#d9c6ad;margin-top:var(--s8);border-top:3px solid var(--red)}
.footer-in{max-width:1280px;margin:0 auto;padding:52px 16px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px}
@media(min-width:768px){.footer-in{padding:52px 32px 24px}}
.site-footer h4{color:var(--tan);font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:15px}
.site-footer ul{list-style:none}
.site-footer li{margin:9px 0;font-size:14px}
.site-footer a{color:#d9c6ad}
.site-footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(217,179,140,.2);text-align:center;padding:18px;font-size:12.5px;color:#a68d6f}
.footer-brand{font-family:Georgia,serif;color:#fdf6ea;font-size:20px;margin-bottom:9px}
.footer-pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.footer-pay span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:#e8d5b8}

/* ---------- Floating buttons + chat ---------- */
.float-btns{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:12px;z-index:90}
.fbtn{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);cursor:pointer;border:0;transition:transform .15s;color:#fff}
.fbtn:hover{transform:translateY(-2px)}
.fbtn.wa{background:var(--wa)}
.fbtn.chat{background:var(--deep)}
.fbtn .dot{position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:var(--bad);border:2.5px solid #fff;display:none}
.fbtn .dot.show{display:block}
.chat-panel{position:fixed;right:16px;bottom:82px;width:min(370px,calc(100vw - 32px));height:500px;max-height:calc(100vh - 120px);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-md);display:none;flex-direction:column;overflow:hidden;z-index:95;border:1px solid var(--line)}
.chat-panel.open{display:flex}
.chat-head{background:var(--deep);color:#f7ecdf;padding:16px 18px;display:flex;justify-content:space-between;align-items:center}
.chat-head b{font-family:Georgia,serif;font-size:16px}
.chat-head .sub{font-size:11.5px;color:var(--tan);display:flex;align-items:center;gap:6px;margin-top:2px}
.chat-head .sub::before{content:"";width:8px;height:8px;border-radius:50%;background:#4ade80}
.chat-head button{background:rgba(255,255,255,.12);border:0;color:#f7ecdf;width:34px;height:34px;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-body{flex:1;overflow-y:auto;padding:16px;background:var(--cream);display:flex;flex-direction:column;gap:9px}
.msg{max-width:82%;padding:10px 14px;border-radius:var(--radius);font-size:13.5px;line-height:1.45;word-wrap:break-word}
.msg.customer{align-self:flex-end;background:var(--tan);color:var(--deep);border-bottom-right-radius:4px}
.msg.admin{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.msg .t{display:block;font-size:10px;opacity:.6;margin-top:3px}
.chat-empty{text-align:center;color:var(--ink-soft);font-size:13px;margin:auto;padding:22px}
.chat-input{display:flex;gap:9px;padding:12px;border-top:1px solid var(--line);background:#fff}
.chat-input input{flex:1;border:1px solid var(--line);border-radius:var(--radius-pill);padding:10px 16px;font:inherit;min-width:0;transition:border-color .15s}
.chat-input input:focus{outline:none;border-color:var(--saddle)}
.chat-input button{border:0;background:var(--saddle);color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;flex:0 0 auto;display:flex;align-items:center;justify-content:center;transition:background .15s}
.chat-input button:hover{background:var(--saddle-dark)}
.chat-guest{padding:11px;border-top:1px solid var(--line);background:#fff;display:grid;gap:8px}
.chat-guest input{border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 13px;font:inherit}
.chat-guest input:focus{outline:none;border-color:var(--saddle)}
.msg-product{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--tan);border-radius:var(--radius-sm);padding:8px 10px;margin-top:8px;color:var(--ink)}
.msg-product:hover{border-color:var(--saddle)}
.msg-product img{width:46px;height:46px;object-fit:cover;border-radius:var(--radius-sm);flex:0 0 auto}
.msg-product span{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.msg-product b{font-size:12.5px;color:var(--saddle-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-product i{font-style:normal;font-size:11.5px;color:var(--ink-soft)}

/* ---------- Admin ---------- */
.admin-body{background:#f3ece1}
.admin-layout{display:grid;grid-template-columns:242px 1fr;min-height:100vh}
.admin-side{background:var(--deep);color:#d9c6ad;padding:0 0 30px;position:sticky;top:0;height:100vh;overflow-y:auto}
.admin-side .brand{padding:22px 18px;border-bottom:1px solid rgba(217,179,140,.16);font-family:Georgia,serif;color:#fdf6ea;font-size:17px;line-height:1.2}
.admin-side .brand span{display:block;font-size:10px;letter-spacing:1.8px;color:var(--tan);text-transform:uppercase;font-family:"Segoe UI",sans-serif;margin-top:4px}
.admin-side nav{padding:14px 11px}
.admin-side nav a{display:flex;align-items:center;gap:11px;color:#d9c6ad;padding:11px 13px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;margin:2px 0;transition:background .15s,color .15s}
.admin-side nav a .lc{color:var(--saddle-2)}
.admin-side nav a:hover{background:rgba(217,179,140,.12);color:#fff}
.admin-side nav a:hover .lc{color:var(--tan)}
.admin-side nav a.active{background:var(--red);color:#fff}
.admin-side nav a.active .lc{color:#fdf3e3}
.admin-side nav .sep{margin:14px 13px 6px;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#8a7358}
.admin-side .brand{border-bottom-color:rgba(138,35,49,.5)}
.admin-side .brand .admin-emblem{display:block;width:60px;height:52px;margin-bottom:10px;background:url("../img/favicon.png") center/contain no-repeat}
.admin-side .brand span{color:#e6a0a8}
.admin-side .pill{background:var(--red);color:#fff;font-size:11px;font-weight:700;border-radius:var(--radius-pill);padding:1px 8px;margin-left:auto}
.admin-main{padding:28px 32px 64px;min-width:0}
.admin-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.admin-top h1{font-size:25px}
.admin-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:20px}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:15px;margin-bottom:24px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;border-left:3px solid var(--red);transition:box-shadow .18s,transform .18s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.kpi .n{font-family:Georgia,serif;font-size:27px;font-weight:700;color:var(--saddle-dark)}
.kpi .l{font-size:12.5px;color:var(--ink-soft)}
.kpi.alert{border-left-color:var(--bad)}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.filter-row input,.filter-row select{border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 13px;font:inherit;background:#fff;transition:border-color .15s,box-shadow .15s}
.filter-row input:focus,.filter-row select:focus{outline:none;border-color:var(--saddle);box-shadow:var(--ring)}
.imgman{display:flex;gap:13px;flex-wrap:wrap;margin-top:10px}
.imgman .im{position:relative;width:112px}
.imgman img{width:112px;height:112px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line)}
.imgman .im.primary img{border-color:var(--saddle);box-shadow:var(--ring)}
.imgman .actions{display:flex;gap:4px;margin-top:5px}
.imgman .actions button{flex:1;font-size:10.5px;padding:4px;border-radius:6px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:background .13s}
.imgman .actions button:hover{background:var(--tan-soft)}
.bar-row{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:13.5px}
.bar-row .lbl{width:210px;flex:0 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .bar{height:20px;background:var(--saddle);border-radius:5px;min-width:3px}
.bar-row .val{font-weight:700;color:var(--saddle-dark);white-space:nowrap}
.admin-chat{display:grid;grid-template-columns:1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.admin-chat .chat-body{height:450px;background:var(--cream)}
.thread-item{display:block;padding:14px 18px;border-bottom:1px solid var(--line-soft);color:var(--ink);transition:background .13s}
.thread-item:hover{background:var(--tan-soft)}
.thread-item b{color:var(--saddle-dark)}
.thread-item .preview{font-size:13px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:540px}

/* ---------- Analytics ---------- */
.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#2ecc71}
.colchart{display:flex;align-items:flex-end;gap:4px;height:170px;padding-top:8px}
.colchart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
.colchart .bars{display:flex;align-items:flex-end;gap:2px;width:100%;height:calc(100% - 18px);justify-content:center}
.colchart .pv{width:46%;max-width:22px;background:var(--tan);border-radius:4px 4px 0 0}
.colchart .uv{width:46%;max-width:22px;background:var(--saddle);border-radius:4px 4px 0 0}
.colchart .dl{font-size:9.5px;color:var(--ink-soft);margin-top:4px;white-space:nowrap;overflow:hidden;max-width:100%}
.lg{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:3px}
.lg-pv{background:var(--tan)}
.lg-uv{background:var(--saddle)}

/* ---------- 404 ---------- */
.notfound{text-align:center;padding:90px 20px}
.notfound .code{font-family:Georgia,serif;font-size:96px;color:var(--saddle-dark);font-weight:700;line-height:1}

/* ---------- Texture on dark panels (faint light grid, youngvirtual-style) ---------- */
.page-head,.site-footer,.cta-banner,.ccard,.admin-side{
  background-image:
    linear-gradient(to right, var(--grid-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-dark) 1px, transparent 1px);
  background-size:46px 46px;
}
/* Page-head keeps a soft warm wash on top of its grid for depth */
.page-head{
  background-image:
    radial-gradient(ellipse 60% 100% at 100% 0%, rgba(138,35,49,.18), transparent 60%),
    linear-gradient(to right, var(--grid-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-dark) 1px, transparent 1px);
  background-size:100% 100%, 46px 46px, 46px 46px;
  background-repeat:no-repeat, repeat, repeat;
}

/* ---------- Responsive ---------- */

/* Tablet & below: top nav → drawer, layouts single-column */
@media (max-width:1020px){
  .main-nav{display:none}
  #drawer-open{display:inline-flex}
  .shop-layout,.product-layout,.cart-layout,.account-layout,.admin-layout{grid-template-columns:1fr}
  .filters{position:static}
  .admin-side{position:static;height:auto}
  .admin-main{padding:20px 16px 52px}

  /* Account sidebar → horizontal scroll tab strip */
  .acct-nav{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .acct-nav::-webkit-scrollbar{display:none}
  .acct-nav a{flex:0 0 auto;white-space:nowrap;border-bottom:0;border-right:1px solid var(--line-soft)}
  .acct-nav a:last-child{border-right:0}
  .acct-nav a:hover,.acct-nav a.active{padding-left:17px}
  .acct-nav a.active{box-shadow:inset 0 -3px 0 var(--red)}

  /* Filters collapse into a tap-to-open panel */
  .filters{padding:0;background:none;border:0;box-shadow:none}
  .filters-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;width:100%;
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
    padding:12px 14px;font-weight:700;color:var(--red);font-size:14px}
  .filters-toggle .ft-chev{margin-left:auto;transition:transform .18s}
  .filters.open .filters-toggle .ft-chev{transform:rotate(90deg)}
  .filters .filters-body{display:none;background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);padding:18px;margin-top:12px}
  .filters.open .filters-body{display:block}
}

/* Desktop: filters always visible, no toggle */
@media (min-width:1021px){
  .filters-toggle{display:none}
  .filters .filters-body{display:block}
}

/* Phones: two-row header, actions move to the bottom tab bar */
@media (max-width:760px){
  body{background-attachment:scroll}   /* fixed is janky / ignored on mobile */
  .header-in{flex-wrap:wrap;gap:10px 8px;padding:10px 14px}
  #drawer-open{width:44px;height:44px;order:1;flex:0 0 auto}
  .logo{order:2;gap:8px;margin-right:auto}
  .logo .word{font-size:15px}
  .header-actions{display:none}
  .search-form{order:3;flex-basis:100%;max-width:100%}
  .search-form input{padding:12px 10px}
  .search-form button{width:42px;height:38px}

  .announce{padding:7px 12px;font-size:11.5px}
  .announce .track{gap:14px;flex-wrap:nowrap;overflow:hidden}
  .announce span:nth-child(2){display:none}

  .footer-in{gap:26px;padding:36px 16px 20px}

  /* Product cards: button fills the row, quick-action icons hidden at 2-up */
  .pcard .buyrow .qa{display:none}
  .pcard .buyrow .btn{flex:1;width:100%;padding:11px}
  .pcard .pricerow{flex-wrap:wrap}

  /* PDP icon actions get visible labels */
  .icon-action{width:auto;height:44px;padding:0 16px;gap:7px;font-weight:600;font-size:13.5px}
  .icon-action.wa::after{content:"WhatsApp"}
  .icon-action.chat::after{content:"Chat"}

  .form-row{grid-template-columns:1fr}
}

/* Small phones: tighten vertical rhythm, fix wraps */
@media (max-width:600px){
  .hero-in{padding:var(--s6) 16px}
  .hero h1{font-size:clamp(25px,7vw,34px)}
  .hero p{font-size:15.5px}
  .section{padding-top:var(--s6)}
  .valuestrip{margin-top:var(--s6);gap:12px 18px}
  .site-footer{margin-top:var(--s6)}
  .page-head{padding:24px 0}
  .qty-row{flex-wrap:nowrap;align-items:stretch}
  .qty-row .btn{flex:1;min-width:0}
  .breadcrumbs{flex-wrap:nowrap;overflow:hidden;white-space:nowrap;font-size:12.5px}
  .breadcrumbs > :last-child{overflow:hidden;text-overflow:ellipsis;min-width:0}
}

/* Product name clamp for even card rows */
.pcard h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Mobile bottom tab bar ---------- */
.tabbar{display:none}
@media (max-width:760px){
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;
    z-index:85;background:rgba(250,246,239,.97);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar .tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:8px 0 7px;min-height:54px;color:var(--ink-soft);font-size:10.5px;font-weight:600}
  .tabbar .tab .lc{color:var(--saddle-dark)}
  .tabbar .tab.active,.tabbar .tab.active .lc{color:var(--red)}
  .tabbar .tab.active::before{content:"";position:absolute;top:0;width:30px;height:3px;border-radius:0 0 3px 3px;background:var(--red)}
  .tabbar .tab-count{position:absolute;top:4px;left:calc(50% + 6px);background:var(--red);color:#fff;
    font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;padding:0 4px;
    display:flex;align-items:center;justify-content:center}
  body:has(.tabbar){padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .float-btns{right:12px;gap:10px;bottom:calc(66px + env(safe-area-inset-bottom))}
  .fbtn{width:50px;height:50px}
  .chat-panel{right:12px;left:12px;width:auto;bottom:calc(124px + env(safe-area-inset-bottom));max-height:calc(100vh - 210px)}
}

/* ---------- PDP sticky buy bar (sits above the tab bar) ---------- */
.buybar{display:none}
@media (max-width:900px){
  .buybar{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;
    bottom:calc(56px + env(safe-area-inset-bottom));z-index:84;padding:10px 16px;
    background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line);
    box-shadow:0 -4px 16px rgba(43,33,24,.08)}
  .buybar .bb-price{display:flex;flex-direction:column;line-height:1.15}
  .buybar .bb-price span{font-family:Georgia,serif;font-weight:700;font-size:19px;color:var(--ink)}
  .buybar .bb-price small{font-size:11px;color:var(--ink-soft)}
  .buybar .btn{flex:1;max-width:60%;margin-left:auto}
  body:has(.buybar){padding-bottom:calc(122px + env(safe-area-inset-bottom))}
  body:has(.buybar) .float-btns{bottom:calc(128px + env(safe-area-inset-bottom))}
}
@media (max-width:760px) and (min-width:0){
  body:has(.buybar) .chat-panel{bottom:calc(184px + env(safe-area-inset-bottom));max-height:calc(100vh - 270px)}
}

/* ---------- Commerce tables → stacked cards on phones ---------- */
@media (max-width:680px){
  .tablewrap{overflow:visible;border:0;border-radius:0;background:transparent;margin:14px 0}
  table.data{min-width:0;width:100%;font-size:14.5px;border-collapse:separate;border-spacing:0}
  table.data thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
  table.data tr{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:4px 2px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
  table.data tbody tr:nth-child(even),table.data tbody tr:hover{background:var(--card)}
  table.data td{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 14px;border:0;text-align:right}
  table.data td+td{border-top:1px solid var(--line-soft)}
  table.data td::before{content:attr(data-label);flex:0 0 auto;text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-soft)}
  table.data td:not([data-label])::before{content:none}
  table.data td:not([data-label]){justify-content:flex-end}
  table.data td:first-child{display:block;text-align:left;border-top:0;padding-top:12px}
  table.data td:first-child::before{content:none}
  .tablewrap .qty{margin-left:auto}
  .tablewrap .qty button{min-height:44px;width:44px}
  .tablewrap .qty input{padding:10px 0;width:52px}
  .tablewrap .btn-sm{min-height:44px;padding:11px 16px}
}

/* ---------- Order timeline → vertical on narrow screens ---------- */
@media (max-width:560px){
  .timeline{flex-direction:column;gap:0;margin:6px 0}
  .tstep{flex:none;width:100%;min-width:0;text-align:left;padding:0 0 22px 30px}
  .tstep::before{top:2px;left:0;transform:none}
  .tstep::after{top:18px;left:8px;width:3px;height:calc(100% - 18px)}
  .tstep:first-child::after{display:block}
  .tstep:last-child::after{display:none}
}