:root{
  --pine-950:#0d1a0e; --pine-900:#122414; --pine-800:#1a331d; --pine-700:#234327;
  --olive-600:#5b8c2a; --olive-500:#6fa437; --olive-400:#8fc158; --olive-100:#e7f0da;
  --brass-500:#c9a227; --brass-400:#dcbb4c; --brass-100:#f6ecc7;
  --ivory-50:#f7f4ec; --ivory-100:#efe9da; --ivory-200:#e4ddc9;
  --charcoal-900:#1a1a18; --charcoal-600:#5a5850;
  --red-500:#c1503a; --red-100:#fbe4dd;
  --line:rgba(26,26,24,0.1); --line-dark:rgba(247,244,236,0.14);
  --radius:16px;
  --shadow-soft:0 1px 2px rgba(26,26,24,.04), 0 10px 24px -14px rgba(26,26,24,.14);
  --shadow-soft-hover:0 1px 2px rgba(26,26,24,.05), 0 16px 32px -14px rgba(26,26,24,.2);
  --surface:#fff; --page-bg:#f7f4ec; --surface-tint:#efe9da; --surface-tint2:#e4ddc9;
  --badge-new-bg:#e3e8ec; --badge-new-fg:#33475b;
  --badge-shipped-bg:#ece3ea; --badge-shipped-fg:#6b3a56;
  --badge-neg-bg:#f3e1dc; --badge-neg-fg:#7a3226;
  --badge-prod-fg:#8a6d10;
}
body, .panel, .stat-card, .pcard, .cust-card, .order-card, .pos-pcard, input, textarea, select, .payment-alert-card{
  transition: background-color .45s ease, color .45s ease, border-color .45s ease;
}
/* Buttons/links keep a visible ring for keyboard navigation (:focus-visible),
   but don't show the browser's raw default focus outline after a mouse click
   or tap — on touchscreens especially, that outline has no natural way to
   clear itself until something else is tapped, which looks like a stuck
   highlight box on whatever was last pressed. */
button:focus, a:focus, .icon-btn:focus, [role="button"]:focus{ outline:none; }
button:focus-visible, a:focus-visible, .icon-btn:focus-visible, [role="button"]:focus-visible{
  outline:2px solid var(--olive-500); outline-offset:2px;
}
body.theme-green{
  --page-bg:var(--pine-950); --surface-tint:var(--pine-900); --surface-tint2:var(--pine-800);
  --surface:#16241a; --charcoal-900:#f2efe4; --charcoal-600:rgba(242,239,228,.64);
  --line:rgba(242,239,228,.14); --olive-100:rgba(143,193,88,.16); --brass-100:rgba(220,187,76,.16); --red-100:rgba(200,120,100,.16);
  --badge-new-bg:rgba(148,169,190,.16); --badge-new-fg:#a8bdd1;
  --badge-shipped-bg:rgba(180,130,165,.16); --badge-shipped-fg:#d9a9c8;
  --badge-neg-bg:rgba(200,120,100,.16); --badge-neg-fg:#e3a08c;
  --badge-prod-fg:#dcbb4c;
}
body.theme-black{
  --page-bg:#0a0a0a; --surface-tint:#121212; --surface-tint2:#1a1a1a;
  --surface:#161616; --charcoal-900:#efefef; --charcoal-600:#8f8f8f;
  --line:rgba(255,255,255,.1); --olive-100:rgba(143,193,88,.14); --brass-100:rgba(220,187,76,.14); --red-100:rgba(200,100,90,.14);
  --badge-new-bg:rgba(150,165,180,.14); --badge-new-fg:#a3b8c9;
  --badge-shipped-bg:rgba(180,130,165,.14); --badge-shipped-fg:#d1a0bf;
  --badge-neg-bg:rgba(200,100,90,.14); --badge-neg-fg:#dd9a8a;
  --badge-prod-fg:#dcbb4c;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html{-webkit-tap-highlight-color:transparent; scroll-behavior:smooth; background:var(--page-bg);}
body{-webkit-overflow-scrolling:touch; overscroll-behavior-y:none;}
.table-scroll, .modal, .staff-wrap, .modal-overlay{-webkit-overflow-scrolling:touch;}
/* Removes the ~300ms delay mobile browsers use to detect double-tap-zoom on
   buttons/links/inputs, so taps register instantly like a native app. */
button, a, .pcard, .cust-card, .chip, .quiz-option, .cal-day, .gallery-photo,
.blog-card, .attention-item, .stat-card, input[type="checkbox"], input[type="radio"],
.icon-btn, .wish-btn, .card, .craft-step, .cs-trigger, .swatch, .radio-pill{ touch-action:manipulation; }
/* Native-feeling tap feedback everywhere clickable, not just the few places
   that already had it — instant scale-down on press, spring back on release. */
button, .pcard, .cust-card, .chip, .quiz-option, .blog-card, .attention-item,
.icon-btn, .wish-btn, .card, .craft-step, .cal-day, .cs-trigger, .swatch, .radio-pill{
  -webkit-user-select:none; user-select:none;
}
/* Real mouse only: :active behaves correctly here. On touch, browsers don't
   reliably clear :active when the tap itself causes the page to scroll or
   change (e.g. tapping "back to top") — the button looks stuck pressed. So on
   touch we manage the pressed look ourselves via .is-pressed (see app.js),
   which a scroll or screen change always clears. */
@media (hover:hover) and (pointer:fine){
  button:active, .pcard:active, .cust-card:active, .chip:active, .quiz-option:active,
  .blog-card:active, .attention-item:active, .icon-btn:active, .wish-btn:active,
  .card:active, .craft-step:active, .cal-day:active, .cs-trigger:active, .swatch:active, .radio-pill:active{
    transform:scale(.96); transition:transform .1s cubic-bezier(.16,.84,.44,1);
  }
}
button.is-pressed, .pcard.is-pressed, .cust-card.is-pressed, .chip.is-pressed, .quiz-option.is-pressed,
.blog-card.is-pressed, .attention-item.is-pressed, .icon-btn.is-pressed, .wish-btn.is-pressed,
.card.is-pressed, .craft-step.is-pressed, .cal-day.is-pressed, .cs-trigger.is-pressed, .swatch.is-pressed, .radio-pill.is-pressed{
  transform:scale(.96); transition:transform .1s cubic-bezier(.16,.84,.44,1);
}
/* Horizontally-scrolling strips (tabs, tables) get real momentum scrolling
   and don't fight the page's own vertical scroll while swiping. */
.staff-tabs, .table-scroll, .chart-scroll{
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scroll-behavior:smooth;
}
/* The gallery track's scroll position is driven by JS every animation frame
   (auto-drift). scroll-behavior:smooth here would fight that per-frame update
   with the browser's own smooth-scroll animation, causing visible shaking. */
.gallery-track{
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scroll-behavior:auto;
}
/* Containment: tells the browser these components' internal layout/paint
   can't affect anything outside their own box, so animating, hovering, or
   pressing one card doesn't force the browser to re-check the whole page. */
.pcard, .pos-pcard, .cust-card, .blog-card, .stat-card, .attention-item, .rv-card{
  contain:layout style paint;
}
/* Long, mostly off-screen lists: skip layout/paint work for rows that
   aren't visible yet, which speeds up both first render and scrolling.
   contain-intrinsic-size keeps a rough placeholder height so the page
   doesn't jump around as rows come into view. */
#ordersTbody tr{
  content-visibility:auto; contain-intrinsic-size:auto 52px;
}
.landing-foot, .site-footer{
  content-visibility:auto; contain-intrinsic-size:auto 260px;
}
@media (prefers-reduced-motion: reduce){
  button:active, .pcard:active, .cust-card:active, .chip:active, .quiz-option:active,
  .blog-card:active, .attention-item:active, .icon-btn:active, .wish-btn:active,
  .card:active, .craft-step:active, .cal-day:active, .cs-trigger:active, .swatch:active, .radio-pill:active,
  button.is-pressed, .pcard.is-pressed, .cust-card.is-pressed, .chip.is-pressed, .quiz-option.is-pressed,
  .blog-card.is-pressed, .attention-item.is-pressed, .icon-btn.is-pressed, .wish-btn.is-pressed,
  .card.is-pressed, .craft-step.is-pressed, .cal-day.is-pressed, .cs-trigger.is-pressed, .swatch.is-pressed, .radio-pill.is-pressed{ transform:none; }
}
img{animation:tpcImgFadeIn .4s ease;}
@keyframes tpcImgFadeIn{ from{opacity:0;} to{opacity:1;} }
/* Logo images must never replay the fade-in — they re-enter the render tree
   every time showScreen() flips a screen from display:none to display:block,
   which was restarting the animation and causing the visible blink. */
.brand-logo, .splash-logo, .brandmark-logo, .footer-logo-img, .rlogo img{animation:none;}
/* Product photos inside cards that already have their own entrance animation
   (.pcard, .rv-card, .pos-pcard) don't also need the generic img fade-in —
   stacking both caused a visible mismatch: both animations start the instant
   the card is created (via lazy-load), often before the photo has actually
   finished downloading, so the fade-in plays against an empty box and the
   real image then pops in late with no animation left, looking unfinished
   while scrolling through a grid. The card's own fade already covers it. */
.pcard img, .rv-card img, .pos-pcard img{animation:none;}
/* Brief confirmation highlight for a row/card right after an optimistic
   update (status change, stock edit) — see tpcFlash() in app.js. */
.tpc-flash{animation:tpcRowFlash .6s ease;}
@keyframes tpcRowFlash{ 0%{background-color:var(--olive-100);} 100%{background-color:transparent;} }
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  img{animation:none;}
}
button, a, input, select, textarea{-webkit-tap-highlight-color:transparent; -webkit-touch-callout:none;}
/* Without this, pressing and holding on a product photo (or any image) before
   dragging triggers the browser's own long-press behavior — the "save/copy
   image" callout on iOS, or a native drag-ghost on Android/desktop touch —
   at the same time as the custom swipe gesture starts. That's the stray,
   hard-to-name interruption mid-swipe: two different gestures (ours and the
   browser's) racing for the same touch. This shuts the native ones off
   across the screens people actually swipe between. */
#screen-shop img, #screen-preorder img, #screen-track img{
  -webkit-touch-callout:none; -webkit-user-drag:none; user-drag:none; -webkit-user-select:none; user-select:none;
}
html,body{height:100%;}
html{min-height:100dvh;}
body{font-family:'Inter',sans-serif; color:var(--charcoal-900); background:var(--page-bg); min-height:100dvh;}
h1,h2,h3{font-family:'Fraunces',serif;}
a{color:inherit; text-decoration:none;}
button{font-family:'Inter',sans-serif; cursor:pointer;}
input,select,textarea{font-family:'Inter',sans-serif;}
input[type=number]{-moz-appearance:textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none; margin:0;}
::selection{background:var(--olive-400); color:var(--pine-950);}
.mono{font-family:'IBM Plex Mono',monospace;}

/* Screens use display:none/block so scroll reveals, swipe and layout
   all work correctly. Logo fade-in is disabled above (.brand-logo etc.)
   so switching screens doesn't replay the animation. */
.screen{display:none; background:var(--page-bg);}
.screen.active{display:block;}
/* No extra logo rules needed — defined below with the topnav block */
.staff-content-fade{}


@keyframes screenFadeIn{ from{opacity:1; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){
  .screen.active{animation:none;}
  .staff-content-fade{animation:none;}
}

/* ============ LANDING ============ */
#screen-landing.active{
  min-height:100vh; padding:64px 24px; text-align:center;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(143,193,88,0.14), transparent 60%),
    radial-gradient(ellipse 700px 500px at 90% 100%, rgba(201,162,39,0.08), transparent 60%),
    var(--pine-950);
  color:var(--ivory-50);
}
.stage{width:100%; max-width:980px; margin:0 auto; display:flex; flex-direction:column; align-items:center;}
.brandmark{display:flex; flex-direction:column; align-items:center; text-align:center;}
.brandmark-logo{width:min(78vw, 420px); height:auto; margin-bottom:6px;}
.plug-icon{width:44px; height:44px; margin-bottom:16px; color:var(--olive-400);}
.wordmark{font-weight:700; font-size:clamp(2.2rem,6vw,3.4rem); letter-spacing:-0.01em; line-height:1;}
.wordmark .classics{display:block; font-weight:400; font-style:italic; font-size:clamp(1rem,2.6vw,1.4rem); letter-spacing:0.28em; color:var(--olive-400); margin-top:8px; text-transform:uppercase;}
.stitch-wrap{width:100%; max-width:520px; margin:24px 0 6px;}
.stitch-line{width:100%; height:20px; display:block;}
.stitch-path{fill:none; stroke:var(--brass-500); stroke-width:2; stroke-linecap:round; stroke-dasharray:8 9;}
.tagline{font-family:'Fraunces',serif; font-style:italic; font-size:1rem; color:rgba(247,244,236,0.72); text-align:center; max-width:420px; margin-bottom:44px;}
.doorways{display:grid; grid-template-columns:1fr 1fr; gap:20px; width:100%;}
@media (max-width:700px){.doorways{grid-template-columns:1fr;}}
.card{position:relative; border-radius:20px; padding:30px 28px; transition:transform .4s cubic-bezier(.16,.84,.44,1), box-shadow .4s ease; cursor:pointer;}
.card-shop{background:linear-gradient(160deg,var(--ivory-50),var(--ivory-100)); color:#1a1a18; box-shadow:0 26px 50px -22px rgba(0,0,0,.28);}
.card-staff{background:linear-gradient(160deg,var(--pine-800),var(--pine-900)); border:1px solid var(--line-dark); box-shadow:0 26px 50px -22px rgba(0,0,0,.35);}
.card-shop:focus-visible{box-shadow:0 26px 50px -22px rgba(0,0,0,.28), 0 0 0 1px rgba(91,140,42,.3), 0 0 32px rgba(111,164,55,.35);}
.card-staff:focus-visible{box-shadow:0 26px 50px -22px rgba(0,0,0,.4), 0 0 0 1px rgba(201,162,39,.35), 0 0 32px rgba(201,162,39,.28);}
.card-shop:active{box-shadow:0 26px 50px -22px rgba(0,0,0,.28), 0 0 0 1px rgba(91,140,42,.5), 0 0 40px rgba(111,164,55,.5);}
.card-staff:active{box-shadow:0 26px 50px -22px rgba(0,0,0,.4), 0 0 0 1px rgba(201,162,39,.55), 0 0 40px rgba(201,162,39,.42);}
.card{transition:transform .4s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease;}
.card-eyebrow{font-family:'IBM Plex Mono',monospace; font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; opacity:.55; margin-bottom:12px; display:flex; align-items:center; gap:8px;}
.card-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}
.card-shop .card-eyebrow{color:var(--olive-600);}
.card-staff .card-eyebrow{color:var(--brass-400);}
.card h2{font-weight:600; font-size:1.4rem; margin-bottom:8px;}
.card-staff h2{color:var(--ivory-50);}
.card p.desc{font-size:.88rem; line-height:1.5; opacity:.72; margin-bottom:22px;}
.card-staff p.desc{color:var(--ivory-100);}
.card-cta{display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600;}
.card-shop .card-cta{color:var(--olive-600);}
.card-staff .card-cta{color:var(--brass-400);}
.card-cta svg{width:15px; height:15px; transition:transform .3s ease;}
.login-form{max-height:0; opacity:0; overflow:hidden; transition:max-height .5s cubic-bezier(.16,.84,.44,1), opacity .4s ease, margin-top .5s ease;}
.card-staff.expanded .login-form{max-height:320px; opacity:1; margin-top:20px;}
.card-staff.expanded .card-cta, .card-staff.expanded p.desc{display:none;}
.field{margin-bottom:12px;}
.field label{display:block; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; opacity:.6; margin-bottom:5px;}
.field input{width:100%; background:rgba(247,244,236,.06); border:1px solid var(--line-dark); border-radius:10px; padding:10px 12px; color:var(--ivory-50); font-size:.9rem; outline:none;}
.field input:focus{border-color:var(--brass-500);}
.signin-btn{width:100%; background:var(--brass-500); color:var(--pine-950); border:none; border-radius:10px; padding:11px; font-weight:700; font-size:.88rem; margin-top:4px;}
.back-link{display:none; font-size:.72rem; opacity:.5; margin-bottom:14px;}
.card-staff.expanded .back-link{display:inline-block;}
footer.landing-foot{margin-top:48px; text-align:center;}
@keyframes stitch-draw{ to{ stroke-dashoffset:0; } }
@keyframes fadein{ to{ opacity:1; } }
.dev-credit{margin-top:26px; display:flex; flex-direction:column; align-items:center; opacity:0; animation: fadein .8s ease 1.8s forwards;}
.dev-stitch{width:min(36vw,140px); height:10px;}
.dev-stitch-path{fill:none; stroke:var(--brass-500); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:6 7; stroke-dashoffset:240; animation: stitch-draw 1.1s cubic-bezier(.65,0,.35,1) 2s forwards;}
.dev-credit-text{margin-top:8px; display:flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.06em;}
.dev-label{color:rgba(247,244,236,.35); text-transform:uppercase;}
.dev-name{font-family:'Fraunces',serif; font-style:italic; font-weight:600; font-size:.82rem; letter-spacing:.01em; color:var(--brass-400); position:relative; transition:color .25s ease;}
.dev-name::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--brass-400); transition:width .3s ease;}
.dev-sep{color:rgba(247,244,236,.25);}
.dev-contact{color:rgba(247,244,236,.45);}
footer.landing-foot .code{font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.1em; color:rgba(247,244,236,.4); text-transform:uppercase;}
.social-icons-wrap{display:flex; gap:14px; align-items:center; justify-content:center; margin-top:16px;}
.social-icon-link{width:32px; height:32px; border-radius:50%; background:rgba(247,244,236,.08); border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; color:var(--ivory-100); transition:all .2s;}
.fab-stack{position:fixed; bottom:22px; right:22px; z-index:60; display:flex; flex-direction:column; align-items:center; gap:12px;}
.wa-bubble{position:relative; width:56px; height:56px; border-radius:50%; background:#fff; box-shadow:0 10px 26px -6px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; transition:transform .2s ease; animation:waFloat 3s ease-in-out infinite; margin-bottom:8px;}
.scroll-top-btn{width:44px; height:44px; border-radius:50%; background:var(--pine-900); color:var(--ivory-50); border:none; box-shadow:0 10px 24px -6px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .2s ease, background .2s ease; opacity:0; transform:translateY(10px) scale(.85); pointer-events:none;}
.scroll-top-btn.visible{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.scroll-top-btn svg{width:20px; height:20px;}
.wa-bubble svg{width:34px; height:34px;}

.skyscraper-banner{position:fixed; top:120px; width:160px; max-height:600px; border-radius:14px; overflow:hidden; box-shadow:0 14px 30px -10px rgba(0,0,0,.35); z-index:30; display:none;}
.skyscraper-left{left:calc(50% - 800px);}
.skyscraper-right{left:calc(50% + 640px);}
.skyscraper-banner img{width:100%; height:100%; object-fit:cover; display:block;}
.skyscraper-banner .banner-link{display:block; position:relative; width:100%; height:100%;}
@media (min-width:1650px){
  .skyscraper-banner{display:block;}
}
.inline-banner{display:none; width:calc(100% - 48px); max-width:720px; margin:0 auto 20px; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-soft); position:relative;}
.inline-banner img{width:100%; display:block; height:auto;}
@media (max-width:1649px){
  .inline-banner.has-content{display:block;}
}
.banner-confetti{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.confetti-piece{position:absolute; top:-20px; width:8px; height:14px; opacity:.9; animation:confettiFall linear infinite;}
@keyframes confettiFall{
  0%{transform:translateY(-20px) rotate(0deg); opacity:.95;}
  100%{transform:translateY(340px) rotate(540deg); opacity:.7;}
}
@keyframes waFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);} }
@media (max-width:480px){
  #screen-landing.active{padding:32px 20px;}
  .stitch-wrap{margin:14px 0 4px;}
  .tagline{margin-bottom:24px;}
  .doorways{gap:14px;}
  .card{padding:22px 20px;}
}
@media (max-width:480px) and (max-height:760px){
  #screen-landing.active{padding:14px 20px;}
  .stitch-wrap{margin:6px 0 2px;}
  .tagline{margin-bottom:8px;}
  .doorways{gap:10px;}
  .card{padding:16px 18px;}
  .card .desc{font-size:.8rem;}
  footer.landing-foot{margin-top:16px;}
  .brandmark-logo{width:min(60vw, 260px); margin-bottom:2px;}
}
@media (max-width:480px) and (max-height:660px){
  .card .desc{font-size:.72rem; line-height:1.35;}
  .card h2{font-size:1.05rem; margin-bottom:4px;}
  .card{padding:9px 15px;}
  .doorways{gap:6px;}
  .brandmark-logo{width:min(48vw, 200px); margin-bottom:0;}
  .tagline{font-size:.76rem; margin-bottom:16px;}
  .stitch-wrap{margin:0;}
  #screen-landing.active{padding:8px 18px;}
  footer.landing-foot{margin-top:4px;}
  footer.landing-foot .code{font-size:.56rem;}
}
/* Landing page scrolls normally on all devices; splash screen is position:fixed so no scroll needed */
@media (max-width:480px){ .fab-stack{bottom:16px; right:16px; gap:10px;} .wa-bubble{width:50px; height:50px;} .wa-bubble svg{width:30px; height:30px;} .scroll-top-btn{width:44px; height:44px;} }
.celebrate-burst{position:absolute; top:50%; left:50%; width:0; height:0; pointer-events:none;}
.celebrate-particle{position:absolute; top:0; left:0; width:7px; height:7px; border-radius:50%; opacity:0; animation:celebrateOut 1s cubic-bezier(.16,.84,.44,1) forwards;}
@keyframes celebrateOut{
  0%{transform:translate(-50%,-50%) rotate(var(--angle)) translateX(4px) scale(.4); opacity:1;}
  100%{transform:translate(-50%,-50%) rotate(var(--angle)) translateX(var(--dist)) scale(1); opacity:0;}
}
.loyalty-note{display:inline-flex; align-items:center; gap:7px; background:var(--brass-100); color:var(--badge-prod-fg); border-radius:20px; padding:8px 16px; font-size:.8rem; font-weight:600; margin-top:14px;}
.loyalty-note svg{width:14px; height:14px;}
.social-icon-link svg{width:15px; height:15px;}

/* ============ SHARED APP CHROME (shop + staff) ============ */
.kente-ribbon{height:14px; width:100%; overflow:hidden; position:relative; box-shadow:0 2px 8px rgba(0,0,0,.25);}
.kente-strip{
  height:100%; width:200%;
  background: repeating-linear-gradient(90deg,
    #d4a017 0px, #d4a017 16px,
    #17140f 16px, #17140f 20px,
    #2f7d32 20px, #2f7d32 36px,
    #17140f 36px, #17140f 40px,
    #b8272c 40px, #b8272c 56px,
    #17140f 56px, #17140f 60px,
    #d4a017 60px, #d4a017 68px,
    #17140f 68px, #17140f 72px,
    #1e4d8c 72px, #1e4d8c 84px,
    #17140f 84px, #17140f 88px
  );
  animation: kenteWeave 14s linear infinite;
}
@keyframes kenteWeave{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
.topnav{background:linear-gradient(180deg,var(--pine-900),var(--pine-950)); color:var(--ivory-50); padding:18px 32px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:40;}
.topnav .brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; cursor:pointer;}
.topnav .brand-logo{height:26px; width:auto;}
.topnav .brand svg{width:22px; height:22px; color:var(--olive-400);}
.topnav .brand .cl{font-style:italic; font-weight:400; color:var(--olive-400); font-size:.85rem; margin-left:2px;}
.topnav nav{display:flex; gap:26px; font-size:.88rem; position:static; z-index:auto;}
.topnav nav a{opacity:.8; padding:6px 0; border-bottom:2px solid transparent; transition:opacity .2s, border-color .2s;}
.topnav nav a.active{opacity:1; border-color:var(--olive-400);}
.topnav .actions{display:flex; align-items:center; gap:14px;}
.icon-btn{position:relative; width:38px; height:38px; border-radius:50%; background:rgba(247,244,236,.08); border:none; display:flex; align-items:center; justify-content:center; color:var(--ivory-50); transition:background .2s, transform .12s ease;}
.icon-btn:active{transform:scale(.90);}
.theme-switch{position:relative; display:flex; align-items:center; background:rgba(247,244,236,.08); border:1px solid var(--line-dark); border-radius:22px; padding:3px; gap:2px;}
.theme-switch .ts-thumb{position:absolute; top:3px; left:0; width:26px; height:26px; border-radius:50%; background:var(--olive-600); box-shadow:0 2px 8px rgba(91,140,42,.5); transition:left .4s cubic-bezier(.34,1.56,.64,1), top .4s cubic-bezier(.34,1.56,.64,1), width .3s ease, height .3s ease, opacity .5s ease; z-index:0;}
.theme-switch button{position:relative; z-index:1; width:26px; height:26px; border-radius:50%; border:none; background:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:rgba(247,244,236,.5); transition:color .3s ease, transform .3s ease;}
.theme-switch button.active{color:#fff; transform:scale(1.05);}
.theme-switch button svg{width:14px; height:14px;}
.theme-switch-fab{background:var(--pine-900); border:none; box-shadow:0 10px 24px -6px rgba(0,0,0,.4); padding:7px; gap:5px; flex-direction:column; border-radius:26px;}
.theme-switch-fab button{width:34px; height:34px;}
.theme-switch-fab button svg{width:18px; height:18px;}
.theme-switch-fab .ts-thumb{background:var(--olive-500);}
.icon-btn svg{width:17px; height:17px;}
.badge-count{position:absolute; top:-4px; right:-4px; background:var(--brass-500); color:var(--pine-950); font-size:.62rem; font-weight:800; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .15s ease;}
.badge-count.pulse{animation:tpcBadgePulse .38s cubic-bezier(.34,1.56,.64,1);}
@keyframes tpcBadgePulse{ 0%{transform:scale(1);} 40%{transform:scale(1.55);} 100%{transform:scale(1);} }
.staff-tab-badge{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:6px; background:var(--brass-500); color:var(--pine-950); font-size:.68rem; font-weight:800; border-radius:9px; vertical-align:middle;}
@media (max-width:800px){.topnav{flex-wrap:wrap; row-gap:10px;} .topnav nav{order:3; width:100%; justify-content:center; gap:20px;}}

/* Mobile bottom nav */
.mobile-bottom-nav{display:none; position:fixed; bottom:0; left:0; right:0; z-index:50; background:linear-gradient(180deg,var(--pine-900),var(--pine-950)); border-top:1px solid var(--line-dark); padding:6px 0 env(safe-area-inset-bottom, 6px); justify-content:space-around;}
.mobile-bottom-nav a{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:.62rem; font-weight:600; color:rgba(247,244,236,.5); text-decoration:none; padding:6px 12px; transition:color .2s;}
.mobile-bottom-nav a.active{color:var(--olive-400);}
.mobile-bottom-nav a svg{width:20px; height:20px;}
.mobile-bottom-nav .mnav-dot{width:4px; height:4px; border-radius:50%; background:var(--olive-400); opacity:0; transition:opacity .2s;}
.mobile-bottom-nav a.active .mnav-dot{opacity:1;}
@media (max-width:600px){
  .mobile-bottom-nav{display:flex;}
  .topnav nav{display:none !important;}
  .fab-stack{bottom:72px !important;}
  body{padding-bottom:62px;}
}

/* Search clear button */
.search-clear{position:absolute; right:10px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; border:none; background:var(--surface-tint); color:var(--charcoal-600); display:none; align-items:center; justify-content:center; cursor:pointer; font-size:.85rem; transition:background .15s;}
.searchbar.has-query .search-clear{display:flex;}
.searchbar.has-query input{padding-right:38px;}

/* Table button mobile sizing */
@media (max-width:600px){
  .btn-sm{min-height:36px; min-width:36px; padding:8px 12px; font-size:.78rem;}
  .data-table td .btn-sm{padding:6px 10px;}
}

/* ============ SHOP ============ */
.hero{background:linear-gradient(160deg,var(--pine-900),var(--pine-800)); color:var(--ivory-50); padding:64px 32px 56px; text-align:center; position:relative; overflow:hidden;}
.fp-overlay{position:fixed; inset:0; z-index:150; background:linear-gradient(165deg,var(--pine-950),var(--pine-900) 55%,var(--pine-800)); display:none; opacity:0; transition:opacity .4s ease; overflow:hidden;}
.fp-overlay.active{display:block; opacity:1;}
.fp-close{position:fixed; top:26px; right:26px; width:44px; height:44px; border-radius:50%; background:rgba(247,244,236,.1); border:1px solid rgba(247,244,236,.18); color:var(--ivory-50); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; transition:background .2s ease;}
.fp-close svg{width:18px; height:18px;}
.fp-watermark{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:'Fraunces',serif; font-weight:600; font-size:min(22vw,320px); line-height:1; color:rgba(247,244,236,.035); white-space:nowrap; pointer-events:none; user-select:none; letter-spacing:-.02em; animation:fpWatermarkDrift 20s ease-in-out infinite alternate;}
@keyframes fpWatermarkDrift{
  0%{transform:translate(-50%,-50%) scale(1) translateX(0) rotate(0deg);}
  100%{transform:translate(-50%,-50%) scale(1.06) translateX(18px) rotate(.6deg);}
}
.fp-eyebrow{font-family:'IBM Plex Mono',monospace; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-400); margin-bottom:20px; position:relative; display:inline-block;}
.fp-eyebrow::after{content:''; position:absolute; left:0; bottom:-9px; height:1.5px; width:0; background:var(--brass-400); animation:fpUnderline .7s cubic-bezier(.16,.84,.44,1) .5s forwards;}
@keyframes fpUnderline{ to{width:34px;} }
.fp-word{display:inline-block; opacity:0; transform:translateY(22px); animation:fpWordIn .7s cubic-bezier(.16,.84,.44,1) forwards;}
@keyframes fpWordIn{ to{opacity:1; transform:translateY(0);} }
.fp-scroll{position:relative; height:100%; overflow-y:auto; padding:100px 32px 80px;}
.fp-inner{max-width:680px; margin:0 auto; opacity:0; transform:translateY(18px); transition:opacity .6s ease .15s, transform .6s ease .15s;}
.fp-overlay.active .fp-inner{opacity:1; transform:translateY(0);}
.fp-lede{font-family:'Fraunces',serif; font-weight:600; font-size:clamp(1.7rem,4.2vw,2.6rem); line-height:1.28; color:var(--ivory-50); margin-bottom:34px;}
.fp-rest p{font-size:1rem; line-height:1.8; color:rgba(247,244,236,.72); margin-bottom:20px; max-width:560px;}
.fp-faq-list{max-width:600px;}
.fp-faq-item{border-bottom:1px solid rgba(247,244,236,.15); padding:20px 0;}
.fp-faq-q{display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; font-family:'Fraunces',serif; font-size:1.1rem; font-weight:600; color:var(--ivory-50);}
.fp-faq-q svg{width:16px; height:16px; flex-shrink:0; transition:transform .3s ease; color:var(--brass-400);}
.fp-faq-item.open .fp-faq-q svg{transform:rotate(180deg);}
.fp-faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.fp-faq-item.open .fp-faq-a{max-height:200px;}
.fp-faq-a p{font-size:.92rem; line-height:1.7; color:rgba(247,244,236,.68); padding-top:12px; margin:0;}
.fp-stitch{width:100%; max-width:220px; margin:44px 0 34px; color:var(--olive-400); opacity:.6;}
.fp-stitch svg{width:100%; height:16px; display:block;}
.fp-cta{background:none; border:1px solid rgba(247,244,236,.3); color:var(--ivory-50); padding:13px 26px; border-radius:30px; font-size:.86rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:background .2s ease, border-color .2s ease;}
.fp-cta span{transition:transform .2s ease;}
@media (max-width:600px){
  .fp-scroll{padding:88px 22px 60px;}
  .fp-watermark{font-size:min(38vw,220px);}
}
.hero::after{content:''; position:absolute; inset:0; background:radial-gradient(ellipse 600px 300px at 80% 0%, rgba(201,162,39,.12), transparent 60%);}
.hero h1{font-size:clamp(1.8rem,4.4vw,2.8rem); font-weight:600; margin-bottom:12px; position:relative;}
.hero p{font-family:'Fraunces',serif; font-style:italic; color:var(--olive-400); font-size:1rem; position:relative; margin-bottom:26px;}
.hero .btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative;}
.btn-primary{background:var(--brass-500); color:var(--pine-950); border:none; padding:13px 26px; border-radius:30px; font-weight:700; font-size:.88rem; transition:background .2s, transform .15s cubic-bezier(.16,.84,.44,1);}
.btn-primary:active{background:var(--brass-400); transform:scale(.96);}
.btn-secondary{background:transparent; color:var(--ivory-50); border:1px solid var(--line-dark); padding:13px 26px; border-radius:30px; font-weight:600; font-size:.88rem; transition:background .2s;}

.section{padding:44px 32px; max-width:1240px; margin:0 auto;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:10px;}
.shop-toolbar{display:flex; gap:12px; margin-bottom:22px; flex-wrap:wrap;}
.section-head h2{font-size:1.5rem; font-weight:600;}
.chips{display:flex; gap:8px; flex-wrap:wrap;}
.date-picker-wrap{position:relative;}
.orders-date-range{display:flex; align-items:center; gap:10px; padding-bottom:18px; flex-wrap:wrap;}
.date-chip{display:inline-flex; align-items:center; gap:7px;}
.date-chip svg{width:14px; height:14px;}
.date-calendar{position:absolute; top:calc(100% + 10px); left:0; z-index:60; background:var(--surface); border-radius:16px; box-shadow:0 24px 48px -16px rgba(13,26,14,.35); border:1px solid var(--line); padding:16px; width:260px; opacity:0; transform:scale(.94) translateY(-6px); pointer-events:none; transform-origin:top left; transition:opacity .2s ease, transform .2s cubic-bezier(.16,.84,.44,1);}
.date-calendar.open{opacity:1; transform:scale(1) translateY(0); pointer-events:auto;}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.cal-month{font-family:'Fraunces',serif; font-weight:600; font-size:.92rem; color:var(--charcoal-900);}
.cal-nav{width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--charcoal-900); font-size:1.1rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s;}
.cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px;}
.cal-weekdays span{text-align:center; font-size:.62rem; text-transform:uppercase; letter-spacing:.04em; color:var(--charcoal-600); font-weight:600;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
.cal-day{aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:.78rem; border-radius:8px; cursor:pointer; color:var(--charcoal-900); transition:all .15s; position:relative;}
.cal-day.empty{cursor:default;}
.cal-day.is-today{font-weight:700; color:var(--olive-600);}
.cal-day.is-today::after{content:''; position:absolute; bottom:3px; width:4px; height:4px; border-radius:50%; background:var(--brass-500);}
.cal-day.is-selected{background:var(--olive-600); color:#fff; font-weight:700; animation:calSelectPop .3s cubic-bezier(.34,1.56,.64,1);}
@keyframes calSelectPop{ 0%{transform:scale(.7);} 60%{transform:scale(1.15);} 100%{transform:scale(1);} }
.cal-clear{width:100%; margin-top:12px; padding:8px; border-radius:8px; border:1px solid var(--red-100); background:none; color:var(--red-500); font-size:.76rem; font-weight:600; cursor:pointer; transition:background .15s;}
.chip{padding:8px 16px; border-radius:20px; border:1px solid var(--line); background:var(--surface); font-size:.82rem; font-weight:600; color:var(--charcoal-600); transition:all .2s, transform .12s ease;}
.chip:active{transform:scale(.94);}
.chip.active{background:var(--olive-600); color:#fff; border-color:var(--olive-600);}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px;}
.pcard{background:var(--surface); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-soft); transition:transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease; cursor:pointer; opacity:0; animation:tpcCardIn .45s cubic-bezier(.16,.84,.44,1) forwards;}
@keyframes tpcCardIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){ .pcard{animation:none; opacity:1;} }
.pcard:active{transform:scale(.98); box-shadow:var(--shadow-soft);}
.pcard:active{transform:scale(.97); transition:transform .12s ease;}
.pcard .img{height:150px; background:linear-gradient(150deg,var(--olive-100),var(--surface-tint2)); display:flex; align-items:center; justify-content:center; position:relative;}
.wish-btn{position:absolute; top:10px; left:10px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.85); border:none; display:flex; align-items:center; justify-content:center; color:var(--charcoal-900); cursor:pointer; transition:all .2s; z-index:2; backdrop-filter:blur(4px);}
.wish-btn svg{width:16px; height:16px; transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.wish-btn.active{color:var(--red-500);}
.wish-btn.active svg{animation:wishPop .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes wishPop{ 0%{transform:scale(.7);} 50%{transform:scale(1.3);} 100%{transform:scale(1);} }
.wish-btn-inline{background:none; border:none; color:var(--charcoal-600); cursor:pointer; vertical-align:middle; margin-left:6px; padding:4px; display:inline-flex;}
.wish-btn-inline svg{width:19px; height:19px; transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.wish-btn-inline.active{color:var(--red-500);}
.wish-btn-inline.active svg{animation:wishPop .4s cubic-bezier(.34,1.56,.64,1);}
.pcard .img svg{width:52px; height:52px; color:var(--olive-600); opacity:.55;}
.stock-tag{position:absolute; top:10px; right:10px; font-size:.62rem; font-weight:700; padding:4px 9px; border-radius:20px; text-transform:uppercase; letter-spacing:.03em;}
.stock-tag.in{background:var(--olive-100); color:var(--olive-600);}
.stock-tag.low{background:var(--brass-100); color:#8a6d10;}
.stock-tag.out{background:var(--red-100); color:var(--red-500);}
.pcard .img img, .pos-pcard .img img, .modal .mimg img{width:100%; height:100%; object-fit:contain;}
.pcard .img{overflow:hidden;} .pos-pcard .img{overflow:hidden;} .modal .mimg{overflow:hidden;}
.img-upload-row{display:flex; align-items:center; gap:14px;}
.img-upload-preview{width:64px; height:64px; border-radius:10px; background:var(--olive-100); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;}
.img-upload-preview img{width:100%; height:100%; object-fit:cover;}
.img-upload-preview svg{width:26px; height:26px; color:var(--olive-600);}
.inv-thumb{width:36px; height:36px; border-radius:7px; background:var(--olive-100); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;}
.inv-thumb img{width:100%; height:100%; object-fit:contain;}
.inv-thumb svg{width:16px; height:16px; color:var(--olive-600);}
.pcard .body{padding:16px 16px 18px;}
.pcard-reviews{display:flex; align-items:center; gap:6px; margin:4px 0 2px;}
.pcard-stars{display:inline-flex; gap:1px; line-height:1;}
.pcard-review-count{font-size:.7rem; color:var(--charcoal-600); font-weight:500;}
.pcard .sku{font-family:'IBM Plex Mono',monospace; font-size:.65rem; color:var(--charcoal-600); opacity:.6; margin-bottom:4px;}
.pcard h3{font-size:1rem; font-weight:600; margin-bottom:6px;}
.pcard .meta{font-size:.78rem; color:var(--charcoal-600); margin-bottom:10px;}
.pcard .price{font-weight:700; color:var(--olive-600); font-size:1.02rem;}

.craft-section{max-width:1240px; margin:0 auto 56px; padding:0 32px;}
.craft-head{text-align:center; max-width:560px; margin:0 auto 40px;}
.craft-eyebrow{font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--olive-600); display:block; margin-bottom:10px;}
.craft-head h2{font-size:1.6rem; margin-bottom:10px;}
.craft-head p{font-size:.92rem; color:var(--charcoal-600); line-height:1.6;}
.craft-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative;}
.craft-thread{position:absolute; left:12.5%; width:75%; height:4px; z-index:0; pointer-events:none; overflow:visible;}
.craft-thread-track{stroke:var(--line); stroke-width:2; stroke-dasharray:1 9; stroke-linecap:round;}
.craft-thread-fill{stroke:var(--brass-500); stroke-width:2; stroke-dasharray:1000; stroke-dashoffset:1000; stroke-linecap:round;}
@media (max-width:900px){ .craft-thread{display:none;} }
@media (max-width:900px){.craft-steps{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.craft-steps{grid-template-columns:1fr;}}
.craft-step{position:relative; text-align:center; padding:28px 18px; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-soft); transition:transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease;}
.craft-icon{width:56px; height:56px; margin:0 auto 16px; border-radius:50%; background:var(--olive-100); color:var(--olive-600); display:flex; align-items:center; justify-content:center;}
.craft-icon svg{width:26px; height:26px;}
.craft-num{width:32px; height:32px; margin:0 auto 12px; border-radius:50%; border:2px solid var(--brass-500); background:var(--surface); color:var(--brass-500); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:.68rem; font-weight:700; position:relative; z-index:1; transition:background .4s ease, color .4s ease, transform .4s cubic-bezier(.34,1.2,.64,1);}
.craft-num.active{background:var(--brass-500); color:#fff; transform:scale(1.15);}
.craft-step h4{font-size:1rem; margin-bottom:6px;}
.craft-step p{font-size:.8rem; color:var(--charcoal-600); line-height:1.5;}
.preorder-banner{margin:0 32px 0; max-width:1240px; margin-left:auto; margin-right:auto; background:linear-gradient(120deg,var(--pine-900),var(--pine-800)); color:var(--ivory-50); border-radius:22px 22px 0 0; padding:36px 40px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; position:relative; overflow:hidden;}
.testi-section{background:linear-gradient(160deg,var(--pine-950),var(--pine-900)); padding:80px 32px; position:relative; overflow:hidden;}
.testi-section::after{content:''; position:absolute; top:0; left:-40%; width:35%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.09), rgba(255,255,255,.02), transparent); transform:skewX(-20deg); animation:banner-sweep 5s ease-in-out infinite; pointer-events:none;}
@keyframes banner-sweep{ 0%{left:-40%;} 35%{left:130%;} 100%{left:130%;} }
.testi-section > *{position:relative; z-index:1;}
.gallery-section{padding:64px 0; overflow:hidden;}
.gallery-head{text-align:center; margin-bottom:36px; padding:0 32px;}
.gallery-head h3{color:var(--charcoal-900); font-size:clamp(1.5rem,3vw,2rem); margin-top:8px;}
.gallery-track-wrap{overflow:hidden; cursor:grab; position:relative;}
.gallery-track-wrap.dragging{cursor:grabbing;}
.gallery-track-wrap::before, .gallery-track-wrap::after{content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;}
.gallery-track-wrap::before{left:0; background:linear-gradient(90deg, var(--page-bg), transparent);}
.gallery-track-wrap::after{right:0; background:linear-gradient(270deg, var(--page-bg), transparent);}
.gallery-track-wrap.dragging{cursor:grabbing;}
.gallery-track{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none; padding:4px 32px 20px; user-select:none;}
.gallery-track::-webkit-scrollbar{display:none;}
.gallery-photo{flex:0 0 auto; width:260px; height:360px; border-radius:20px; overflow:hidden; scroll-snap-align:center; position:relative; will-change:transform, opacity;}
.gallery-photo.is-hovered{transform:translateY(-18px) scale(1.06) !important; opacity:1 !important; z-index:20 !important; transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;}
.gallery-photo img{width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; background:var(--surface-tint);}
@media (max-width:600px){
  .gallery-photo{width:200px; height:280px;}
  .gallery-track{gap:12px; padding:4px 20px 20px;}
}
.testi-inner{max-width:820px; margin:0 auto; text-align:center; position:relative;}
.testi-quote-mark{position:absolute; top:-56px; left:50%; transform:translateX(-50%); font-family:'Fraunces',serif; font-size:9rem; line-height:1; color:rgba(247,244,236,.08); pointer-events:none; user-select:none;}
.testi-track{position:relative; height:220px; display:flex; align-items:center; justify-content:center;}
.testi-slide{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; pointer-events:none;}
.testi-slide.active{opacity:1; transform:translateY(0); pointer-events:auto;}
.testi-slide p{font-family:'Fraunces',serif; font-style:italic; font-size:1.5rem; line-height:1.55; color:var(--ivory-50); max-width:680px; margin:0 auto 26px;}
.testi-slide .testi-name{font-weight:700; color:var(--brass-400); font-size:.95rem; letter-spacing:.02em;}
.testi-slide .testi-detail{font-family:'IBM Plex Mono',monospace; font-size:.74rem; color:rgba(247,244,236,.55); text-transform:uppercase; letter-spacing:.08em; margin-top:4px;}
.testi-nav{display:flex; align-items:center; justify-content:center; gap:20px; margin-top:38px;}
.testi-arrow{width:40px; height:40px; border-radius:50%; background:rgba(247,244,236,.08); border:1px solid rgba(247,244,236,.18); color:var(--ivory-50); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease; flex-shrink:0;}
.testi-arrow svg{width:16px; height:16px;}
.testi-dots{display:flex; gap:8px;}
.testi-dot{width:7px; height:7px; border-radius:50%; background:rgba(247,244,236,.25); border:none; cursor:pointer; transition:all .2s ease; padding:0;}
.testi-dot.sel{background:var(--brass-400); width:20px; border-radius:4px;}
@media (max-width:600px){
  .testi-section{padding:56px 20px;}
  .testi-slide p{font-size:1.15rem;}
  .testi-quote-mark{font-size:6rem; top:-38px;}
}
.site-footer{background:var(--pine-950); color:rgba(247,244,236,.75); padding:0 0 24px;}

/* Blog section */
.blog-section{padding:64px 32px; max-width:1240px; margin:0 auto;}
.blog-section .section-head h2{font-size:1.5rem;}
.blog-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:24px;}
.blog-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .3s ease, box-shadow .3s ease; cursor:pointer;}
.blog-card-body{padding:20px 22px;}
.blog-card-date{font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--charcoal-600); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;}
.blog-card h3{font-size:1.05rem; font-weight:600; margin-bottom:8px; color:var(--charcoal-900);}
.blog-card p{font-size:.85rem; color:var(--charcoal-600); line-height:1.6;}
.blog-empty{text-align:center; padding:40px 20px; color:var(--charcoal-600); font-size:.9rem;}

/* Size quiz modal */
.quiz-overlay{position:fixed; inset:0; background:rgba(13,26,14,.6); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:120; padding:20px;}
.quiz-overlay.active{display:flex;}
.quiz-modal{background:var(--surface); border-radius:22px; max-width:480px; width:100%; max-height:85vh; overflow-y:auto; position:relative; padding:30px 28px;}
.quiz-close{position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; background:var(--surface-tint); border:none; color:var(--charcoal-900); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; font-size:1rem;}
.quiz-step{display:none;}
.quiz-step.active{display:block;}
.quiz-progress{height:4px; background:var(--surface-tint2); border-radius:2px; margin-bottom:24px; overflow:hidden;}
.quiz-progress-fill{height:100%; background:var(--olive-600); border-radius:2px; transition:width .4s ease;}
.quiz-option{display:block; width:100%; text-align:left; padding:14px 18px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--charcoal-900); font-size:.9rem; font-weight:500; margin-bottom:10px; cursor:pointer; transition:all .2s;}
.quiz-option.selected{border-color:var(--olive-600); background:var(--olive-100); color:var(--olive-600); font-weight:600;}
.quiz-result{text-align:center; padding:20px 0;}
.quiz-result-size{font-size:3rem; font-weight:700; color:var(--olive-600); font-family:'Fraunces',serif;}
.quiz-result p{font-size:.9rem; color:var(--charcoal-600); margin-top:12px; line-height:1.6;}

/* Loyalty points */
.loyalty-badge{display:inline-flex; align-items:center; gap:6px; background:var(--brass-100); color:var(--badge-prod-fg); border-radius:20px; padding:8px 14px; font-size:.82rem; font-weight:600;}
.loyalty-badge svg{width:16px; height:16px;}
.points-display{font-family:'IBM Plex Mono',monospace; font-size:1.1rem; font-weight:700; color:var(--brass-500);}
.footer-inner{max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; padding:40px 32px 0;}
.footer-col h5{color:var(--ivory-50); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px;}
.footer-col{display:flex; flex-direction:column; gap:9px;}
.footer-col a{color:rgba(247,244,236,.72); text-decoration:none; font-size:.85rem; transition:color .2s;}
.footer-wordmark{font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem; color:var(--ivory-50); letter-spacing:.03em;}
.footer-logo-img{height:32px; width:auto; display:block; align-self:flex-start;}
.footer-wordmark span{color:var(--olive-400);}
.footer-tagline{font-size:.82rem; font-style:italic; color:rgba(247,244,236,.6); margin:8px 0 14px; max-width:280px;}
.footer-social{gap:8px !important; justify-content:flex-start !important; margin-top:0 !important;}
.footer-address{font-size:.85rem; color:rgba(247,244,236,.72); line-height:1.5;}
.footer-pay-badges{display:flex; flex-direction:column; gap:8px;}
.footer-pay-badges span{font-size:.76rem; background:rgba(247,244,236,.08); border:1px solid rgba(247,244,236,.14); border-radius:8px; padding:6px 10px; width:fit-content;}
.footer-bottom{max-width:1240px; margin:36px auto 0; padding:20px 32px 0; border-top:1px solid rgba(247,244,236,.1); font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(247,244,236,.4); text-align:center; line-height:2; box-sizing:border-box;}
@media (max-width:800px){
  .footer-inner{grid-template-columns:1fr 1fr; gap:28px 20px;}
  .footer-brand-col{grid-column:1 / -1;}
}
@media (max-width:480px){
  .site-footer{padding:36px 20px 80px; display:block;}
  .footer-inner{grid-template-columns:1fr 1fr;}
}
.preorder-banner > *{position:relative; z-index:1;}
.preorder-banner h3{font-size:1.35rem; font-weight:600; margin-bottom:6px;}
.preorder-banner p{opacity:.75; font-size:.88rem; max-width:440px;}

/* Product modal */
.modal-overlay{position:fixed; inset:0; background:rgba(13,26,14,.6); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal-overlay.active{display:flex; animation: tpcOverlayFadeIn .22s ease;}
.modal-overlay.active .modal{animation: tpcModalPopIn .28s cubic-bezier(.16,.84,.44,1);}
@keyframes tpcOverlayFadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes tpcModalPopIn{ from{opacity:0; transform:translateY(14px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);} }
@media (prefers-reduced-motion: reduce){
  .modal-overlay.active, .modal-overlay.active .modal{animation:none;}
}
.modal{background:var(--surface); border-radius:22px; max-width:640px; width:100%; max-height:88vh; overflow:hidden; position:relative; display:flex; flex-direction:column;}
.mbody{overflow-y:auto; flex:1; min-height:0;}
.modal-close{position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; background:var(--surface-tint); border:none; color:var(--charcoal-900); display:flex; align-items:center; justify-content:center; z-index:2;}
.modal .mimg{height:200px; background:linear-gradient(150deg,var(--olive-100),var(--surface-tint2)); display:flex; align-items:center; justify-content:center; border-radius:22px 22px 0 0; position:relative;}
.mimg-arrow{position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.35); backdrop-filter:blur(4px); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s, transform .2s; z-index:2;}
.mimg-arrow svg{width:18px; height:18px;}
.mimg-arrow-left{left:12px;}
.mimg-arrow-right{right:12px;}
.mimg-zoom-btn{position:absolute; top:12px; left:12px; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.35); backdrop-filter:blur(4px); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; z-index:2;}
.mimg-zoom-btn svg{width:16px; height:16px;}
.lightbox-overlay{display:none; position:fixed; inset:0; background:rgba(10,14,10,.95); z-index:250; align-items:center; justify-content:center;}
.lightbox-overlay.active{display:flex;}
.lightbox-img-wrap{max-width:90vw; max-height:85vh; display:flex; align-items:center; justify-content:center;}
.lightbox-img-wrap img{max-width:90vw; max-height:85vh; object-fit:contain; border-radius:8px;}
.lightbox-close{position:fixed; top:20px; right:20px; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.12); border:none; color:#fff; font-size:1.1rem; cursor:pointer; z-index:251; transition:background .2s;}
.lightbox-counter{position:fixed; top:28px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.8); font-size:.82rem; font-family:'IBM Plex Mono',monospace; letter-spacing:.05em; z-index:251;}
.lightbox-arrows button{position:fixed; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.1); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; z-index:251;}
.lightbox-arrows button:first-child{left:20px;}
.lightbox-arrows button:last-child{right:20px;}
.lightbox-arrows svg{width:22px; height:22px;}
@media (max-width:600px){
  .lightbox-arrows button{width:40px; height:40px;}
  .lightbox-arrows button:first-child{left:8px;}
  .lightbox-arrows button:last-child{right:8px;}
}
.mimg-thumbs{position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:7px;}
.mimg-thumb{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; transition:all .2s; box-shadow:0 1px 2px rgba(0,0,0,.2);}
.mimg-thumb.sel{background:#fff; transform:scale(1.3);}
.modal .mimg svg{width:70px; height:70px; color:var(--olive-600); opacity:.5;}
.modal .mbody{padding:26px 28px 30px;}
.modal .msku{font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--charcoal-600); opacity:.65; margin-bottom:6px;}
.modal h2{font-size:1.4rem; margin-bottom:8px;}
.modal .mdesc{font-size:.88rem; color:var(--charcoal-600); line-height:1.6; margin-bottom:18px;}
.opt-group{margin-bottom:16px;}
.opt-group label{display:flex; align-items:center; justify-content:space-between; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--charcoal-600); margin-bottom:8px;}
.opt-pills{display:flex; gap:8px; flex-wrap:wrap;}
.opt-pill{padding:8px 14px; border-radius:10px; border:1px solid var(--line); font-size:.82rem; font-weight:600; background:var(--surface); color:var(--charcoal-900); transition:all .15s;}
.opt-pill.sel{border-color:var(--olive-600); background:var(--olive-100); color:var(--olive-600);}
.mfoot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--surface); padding:16px 24px; border-top:1px solid var(--line); box-shadow:0 -8px 16px -4px rgba(0,0,0,.06);}
.mprice{font-size:1.3rem; font-weight:700; color:var(--olive-600);}

/* Cart drawer */
.drawer-overlay{position:fixed; inset:0; background:rgba(13,26,14,.5); display:none; z-index:105;}
.drawer-overlay.active{display:block;}
.drawer{position:fixed; top:0; right:-100vw; width:400px; max-width:92vw; height:100%; background:var(--surface); z-index:110; transition:right .4s cubic-bezier(.16,.84,.44,1); display:flex; flex-direction:column; overflow-y:auto;}
.drawer.active{right:0;}
.drawer-head{padding:22px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;}
.drawer-head h3{font-size:1.15rem;}
.drawer-body{flex:0 0 auto; padding:20px 24px;}
.cart-item{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); align-items:center; flex-shrink:0;}
.cart-item-v2{padding:16px 0; border-bottom:1px solid var(--line); flex-shrink:0;}
.ci-row-top{display:flex; gap:12px; align-items:center;}
.ci-row-top .ci-img{width:56px; height:56px; border-radius:10px; background:var(--olive-100); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.ci-row-top .ci-info{flex:1; min-width:0;}
.ci-row-top .ci-info .nm{font-size:.9rem; font-weight:600; overflow-wrap:break-word;}
.ci-row-top .ci-info .mt{font-size:.75rem; color:var(--charcoal-600); margin-top:2px;}
.ci-row-top .ci-price{font-weight:700; font-size:.88rem; flex-shrink:0; white-space:nowrap;}
.ci-row-bottom{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:12px; padding-left:68px;}
.ci-size-pills{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.ci-row-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--charcoal-600); margin-right:2px;}
.ci-size-pill{padding:4px 9px; font-size:.76rem; font-weight:600; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--charcoal-900); cursor:pointer; flex-shrink:0;}
.ci-size-pill.sel{border-color:var(--olive-600); background:var(--olive-100); color:var(--olive-600);}
@media (max-width:420px){
  .ci-row-bottom{padding-left:0;}
}
.ci-remove{background:none; border:none; color:var(--charcoal-600); opacity:.5; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; flex-shrink:0; transition:all .15s;}
.ci-remove svg{width:14px; height:14px;}
.cart-item .ci-img{width:56px; height:56px; border-radius:10px; background:var(--olive-100); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.cart-item .ci-img svg{width:26px; height:26px; color:var(--olive-600);}
.cart-item .ci-info{flex:1;}
.cart-item .ci-info .nm{font-size:.9rem; font-weight:600;}
.cart-item .ci-info .mt{font-size:.75rem; color:var(--charcoal-600); margin-top:2px;}
.cart-item .ci-price{font-weight:700; font-size:.88rem;}
.continue-shopping-link{display:block; font-size:.82rem; font-weight:600; color:var(--olive-600); text-decoration:none; margin-bottom:16px;}
.ci-size-row{font-size:.76rem; color:var(--charcoal-600); margin-top:6px; display:flex; align-items:center; gap:6px;}
.cs-mini{display:inline-block;}
.cs-mini .cs-trigger{padding:3px 8px; font-size:.76rem; border:1px solid var(--line); border-radius:6px; min-width:44px;}
.cs-mini .cs-trigger svg{width:11px; height:11px;}
.cs-mini .cs-menu{min-width:60px;}
.ci-qty-row{display:flex; align-items:center; gap:8px; margin-top:8px;}
.qty-btn-sm{width:22px; height:22px; border-radius:6px; border:1px solid var(--line); background:var(--surface); color:var(--charcoal-900); font-size:.9rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s;}
.qty-val-sm{font-size:.85rem; font-weight:600; min-width:16px; text-align:center;}
.drawer-foot{padding:20px 24px; border-top:1px solid var(--line); flex-shrink:0;}
.row-between{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:.9rem;}
.row-between.total{font-weight:700; font-size:1.05rem; margin-top:10px;}
.empty-note{text-align:center; padding:50px 10px; color:var(--charcoal-600); font-size:.9rem;}

/* Forms (checkout / preorder) */
.form-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}
.f-field{margin-bottom:16px;}
.store-toggle-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; background:var(--page-bg); border-radius:12px;}
.store-toggle-title{font-size:.9rem; font-weight:600;}
.store-toggle-sub{font-size:.78rem; color:var(--charcoal-600); margin-top:2px;}
.switch{position:relative; display:inline-block; width:46px; height:26px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0;}
.switch-track{position:absolute; cursor:pointer; inset:0; background:var(--line); border-radius:26px; transition:background .25s ease;}
.switch-track::before{content:''; position:absolute; height:20px; width:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .25s cubic-bezier(.34,1.56,.64,1); box-shadow:0 1px 3px rgba(0,0,0,.3);}
.switch input:checked + .switch-track{background:var(--red-500);}
.switch input:checked + .switch-track::before{transform:translateX(20px);}
.pause-banner{background:var(--badge-neg-bg); color:var(--badge-neg-fg); border:1px solid var(--red-100); border-radius:14px; padding:16px 20px; margin:0 32px 24px; max-width:1240px; margin-left:auto; margin-right:auto; display:none;}
.pause-banner strong{display:block; margin-bottom:3px;}
.pay-details-box{background:var(--olive-100); border:1px solid var(--olive-400); border-radius:10px; padding:12px 14px;}
.pay-details-box .pd-row{display:flex; justify-content:space-between; align-items:center; font-size:.82rem; padding:4px 0;}
.pay-details-box .pd-k{color:var(--charcoal-600);}
.pay-details-box .pd-v{font-weight:700; color:var(--charcoal-900);}
.pay-details-box .pd-note{font-size:.74rem; color:var(--charcoal-600); margin-top:8px; line-height:1.4;}
.f-field.full{grid-column:1/-1;}
.f-field label{display:block; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--charcoal-600); margin-bottom:7px;}
.f-field input, .f-field select, .f-field textarea{width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 13px; font-size:.9rem; outline:none; transition:border-color .2s; background:var(--page-bg); color:var(--charcoal-900);}
.f-field input::placeholder, .f-field textarea::placeholder{color:var(--charcoal-600); opacity:.65;}
.f-field input:focus, .f-field select:focus, .f-field textarea:focus{border-color:var(--olive-600); background:var(--surface);}
.f-field textarea{resize:vertical; min-height:80px;}
.upload-box{border:1.5px dashed var(--line); border-radius:12px; padding:22px; text-align:center; color:var(--charcoal-600); font-size:.82rem; background:var(--page-bg); cursor:pointer; transition:border-color .2s, background .2s;}
.ref-photo-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;}
.img-mode-preview{position:relative; height:160px; border-radius:12px; overflow:hidden; background:linear-gradient(150deg,var(--olive-100),var(--surface-tint2)); cursor:crosshair;}
.img-mode-preview img{width:100%; height:100%; display:block;}
.img-mode-focal-dot{position:absolute; width:22px; height:22px; border-radius:50%; border:2.5px solid #fff; box-shadow:0 0 0 1.5px var(--olive-600), 0 2px 6px rgba(0,0,0,.4); transform:translate(-50%,-50%); pointer-events:none;}
.ref-photo-slot{position:relative; aspect-ratio:1; border:1.5px dashed var(--line); border-radius:12px; background:var(--page-bg); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; transition:border-color .2s, background .2s; overflow:hidden;}
.ref-photo-slot .rps-plus{font-size:1.4rem; color:var(--charcoal-600); line-height:1;}
.ref-photo-slot .rps-loading{font-size:.68rem; color:var(--charcoal-600); text-align:center; padding:0 6px;}
.ref-photo-slot .rps-label{font-size:.68rem; color:var(--charcoal-600);}
.ref-photo-slot.has-image{border-style:solid; padding:0;}
.ref-photo-slot.has-image img{width:100%; height:100%; object-fit:cover;}
.ref-photo-slot .rps-remove{position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%; background:rgba(13,26,14,.65); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.9rem; cursor:pointer; line-height:1;}
.upload-box.has-image{padding:12px; border-style:solid;}
.upload-box img{max-width:100%; max-height:140px; border-radius:8px; display:block; margin:0 auto 8px;}
.upload-box .ub-filename{font-size:.76rem; color:var(--charcoal-900); font-weight:600;}
.upload-box .ub-remove{display:inline-block; margin-top:6px; font-size:.74rem; color:var(--red-500); font-weight:600; text-decoration:underline;}

.confirm-box{text-align:center; padding:50px 30px; max-width:520px; margin:0 auto;}
.confirm-icon{width:64px; height:64px; border-radius:50%; background:var(--olive-100); display:flex; align-items:center; justify-content:center; margin:0 auto 20px;}
.confirm-icon svg{width:30px; height:30px; color:var(--olive-600);}
.order-num{font-family:'IBM Plex Mono',monospace; font-size:1.3rem; font-weight:700; color:var(--olive-600); background:var(--olive-100); display:inline-block; padding:10px 20px; border-radius:12px; margin:14px 0;}
.eta-box{background:var(--surface-tint); border-radius:12px; padding:16px 20px; margin-top:16px; font-size:.86rem; text-align:left;}
.eta-countdown-box{display:flex; justify-content:space-between; align-items:center; background:var(--olive-100); border-radius:12px; padding:14px 18px; margin-bottom:18px;}
.eta-countdown-label{font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--charcoal-600);}
.eta-countdown-date{font-size:.95rem; font-weight:700; margin-top:2px;}
.eta-countdown-days{font-size:.85rem; font-weight:700; text-align:right;}
.track-message-box{margin-top:24px; padding-top:20px; border-top:1px solid var(--line);}
.msg-thread{padding:16px 0; border-bottom:1px solid var(--line);}
.msg-thread-head{font-size:.85rem; margin-bottom:10px; overflow:hidden;}
.msg-bubble{padding:10px 14px; border-radius:10px; font-size:.85rem; margin-bottom:8px; max-width:85%;}
.msg-from-customer{background:var(--page-bg);}
.msg-from-staff{background:var(--olive-100); margin-left:auto;}
.msg-reply-meta{font-size:.7rem; color:var(--charcoal-600); margin-top:4px;}
.msg-reply-box textarea{width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 13px; font-size:.85rem; font-family:inherit; background:var(--surface); color:var(--charcoal-900); margin-bottom:8px;}
.track-msg-sent{display:flex; justify-content:space-between; gap:10px; background:var(--page-bg); border-radius:10px; padding:10px 13px; margin-bottom:8px; font-size:.83rem;}
.track-msg-date{color:var(--charcoal-600); font-size:.74rem; white-space:nowrap;}

/* Track order */
.track-input-row{display:flex; gap:10px; max-width:440px; margin:0 auto 40px;}
.track-input-row input{flex:1; border:1px solid var(--line); border-radius:12px; padding:12px 16px; font-size:.9rem; background:var(--page-bg); color:var(--charcoal-900); outline:none;}
.track-input-row input:focus{border-color:var(--olive-600); background:var(--surface);}
.stepper{position:relative; padding-left:34px;}
.stepper::before{content:''; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:var(--line);}
.step{position:relative; padding-bottom:26px;}
.step:last-child{padding-bottom:0;}
.step .dot{position:absolute; left:-34px; top:2px; width:24px; height:24px; border-radius:50%; background:var(--surface-tint); border:2px solid var(--line); display:flex; align-items:center; justify-content:center;}
.step.done .dot{background:var(--olive-600); border-color:var(--olive-600);}
.step.done .dot::after{content:'✓'; color:#fff; font-size:.7rem; font-weight:800;}
.step.current .dot{background:var(--brass-500); border-color:var(--brass-500); animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.4);} 50%{box-shadow:0 0 0 7px rgba(201,162,39,0);}}
.step .stitle{font-weight:600; font-size:.92rem;}
.step.current .stitle{color:var(--brass-500);}
.step .ssub{font-size:.76rem; color:var(--charcoal-600); margin-top:2px;}

/* ============ STAFF DASHBOARD ============ */
.staff-tabs{background:var(--pine-900); padding:0 32px; display:flex; gap:4px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:rgba(247,244,236,.25) transparent; position:relative;}
.staff-tabs-wrap{position:relative;}
.staff-tabs-wrap::before, .staff-tabs-wrap::after{content:''; position:absolute; top:0; bottom:0; width:32px; z-index:2; pointer-events:none; transition:opacity .2s;}
.staff-tabs-wrap::before{left:0; background:linear-gradient(90deg, var(--pine-900), transparent);}
.staff-tabs-wrap::after{right:0; background:linear-gradient(270deg, var(--pine-900), transparent);}
.staff-tabs-wrap.scroll-start::before{opacity:0;}
.staff-tabs-wrap.scroll-end::after{opacity:0;}
.staff-tabs::-webkit-scrollbar{height:5px;}
.staff-tabs::-webkit-scrollbar-track{background:transparent;}
.staff-tabs::-webkit-scrollbar-thumb{background:rgba(247,244,236,.25); border-radius:10px;}

/* Modern page-wide scrollbar */
html{scrollbar-width:thin; scrollbar-color:var(--olive-600) transparent;}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--olive-500); border-radius:10px; border:2px solid var(--page-bg);}
.drawer::-webkit-scrollbar-thumb, .notif-panel::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb, .receipt-modal::-webkit-scrollbar-thumb{border-color:#fff;}
.staff-tab{padding:14px 18px; color:var(--ivory-100); opacity:.65; font-size:.86rem; font-weight:600; border-bottom:2px solid transparent; white-space:nowrap;}
.staff-tab.active{opacity:1; color:var(--olive-400); border-color:var(--olive-400);}
.staff-wrap{padding:30px 32px; max-width:1760px; margin:0 auto; width:100%;}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:30px;}
.stat-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow-soft); transition:transform .25s cubic-bezier(.16,.84,.44,1), box-shadow .25s ease; position:relative; overflow:hidden;}
.stat-card .sparkline{position:absolute; right:14px; bottom:14px; width:60px; height:22px; opacity:.85;}
.stat-icon{position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.attention-panel{border-color:var(--brass-100); background:linear-gradient(160deg, var(--surface), var(--brass-100) 400%);}
.attention-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:12px; margin-top:6px;}
.attention-item{display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; cursor:pointer; transition:all .2s; border-left:3px solid var(--line);}
.attention-item.sev-urgent{border-left-color:var(--red-500); background:linear-gradient(90deg, var(--red-100), var(--surface) 40%);}
.attention-item.sev-urgent .attention-icon{background:var(--red-100); color:var(--red-500);}
.attention-item.sev-warning{border-left-color:var(--brass-500);}
.attention-icon{width:34px; height:34px; border-radius:50%; background:var(--brass-100); color:var(--badge-prod-fg); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.attention-icon svg{width:16px; height:16px;}
.attention-label{font-size:.82rem; font-weight:600; color:var(--charcoal-900);}
.attention-detail{font-size:.76rem; color:var(--charcoal-600); margin-top:1px;}
.stat-icon svg{width:16px; height:16px;}
.stat-card .lbl{font-size:.75rem; color:var(--charcoal-600); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; padding-right:40px;}
.stat-card .val{font-size:1.5rem; font-weight:700;}
.stat-card .delta{font-size:.76rem; font-weight:600; margin-top:4px;}
.delta.up{color:var(--olive-600);} .delta.down{color:var(--red-500);}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-bottom:24px; box-shadow:var(--shadow-soft); transition:box-shadow .25s ease;}
.empty-state{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:36px 20px;}
.empty-state .es-icon{width:52px; height:52px; border-radius:50%; background:var(--surface-tint); display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--charcoal-600); opacity:.75;}
.empty-state .es-icon svg{width:24px; height:24px;}
.empty-state .es-title{font-size:.92rem; font-weight:700; color:var(--charcoal-900); margin-bottom:4px;}
.empty-state .es-sub{font-size:.8rem; color:var(--charcoal-600); max-width:320px; line-height:1.4;}
body.density-compact .panel{padding:14px; margin-bottom:14px;}
body.density-compact .stat-card{padding:12px 14px;}
body.density-compact .stat-grid{gap:10px; margin-bottom:16px;}
body.density-compact .data-table th, body.density-compact .data-table td{padding:8px 10px;}
body.density-compact .staff-wrap{padding:16px 24px;}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px;}
.panel-head h3{font-size:1.1rem; font-weight:600;}

.barchart{display:flex; align-items:flex-end; gap:14px; height:130px; padding-top:10px;}

/* ============ MODERN CHARTS ============ */
.chart-donut-wrap{display:flex; align-items:center; gap:36px; flex-wrap:wrap;}
.chart-donut-svg{width:210px; height:210px; flex-shrink:0;}
.chart-donut-svg circle.donut-seg{transition: stroke-dasharray 1.3s cubic-bezier(.16,.84,.44,1), filter .25s ease; cursor:pointer;}
.chart-donut-total-label{font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; fill:var(--charcoal-600);}
.chart-donut-total-val{font-family:'Fraunces',serif; font-weight:700; font-size:1.15rem; fill:var(--charcoal-900);}
.chart-legend{display:flex; flex-direction:column; gap:11px; min-width:170px;}
.chart-legend-item{display:flex; align-items:center; gap:10px; font-size:.85rem; opacity:0; transform:translateX(10px); animation: legendIn .45s ease forwards; cursor:default;}
@keyframes legendIn{ to{opacity:1; transform:translateX(0);} }
.chart-legend-dot{width:11px; height:11px; border-radius:3px; flex-shrink:0;}
.chart-legend-label{flex:1; color:var(--charcoal-900); font-weight:600;}
.chart-legend-pct{color:var(--charcoal-600); font-family:'IBM Plex Mono',monospace; font-size:.74rem;}

.modern-bar-chart{display:flex; align-items:flex-end; gap:22px; height:190px; padding:30px 8px 0; background-image:repeating-linear-gradient(to top, var(--line) 0, var(--line) 1px, transparent 1px, transparent 25%); background-size:100% calc(100% - 30px); background-repeat:no-repeat; background-position:0 0;}
.modern-bar-wrap{display:flex; flex-direction:column; align-items:center; flex:1; min-width:0; height:100%; justify-content:flex-end; position:relative;}
.modern-bar{width:100%; max-width:70px; border-radius:10px 10px 4px 4px; background:linear-gradient(180deg, var(--olive-400), var(--olive-600)); position:relative; transition:height .9s cubic-bezier(.16,.84,.44,1), filter .2s ease, transform .2s ease; cursor:pointer; height:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -8px rgba(26,26,24,.35);}
.modern-bar-value{position:absolute; top:-26px; left:50%; transform:translateX(-50%); font-size:.76rem; font-weight:700; color:var(--charcoal-900); opacity:0; white-space:nowrap; transition:opacity .4s ease;}
@media (max-width:900px){
  .modern-bar-value{display:none;}
}
.modern-bar-label{margin-top:12px; font-size:.76rem; color:var(--charcoal-600); text-align:center;}

.chart-tooltip{position:fixed; background:var(--pine-950); color:var(--ivory-50); padding:8px 13px; border-radius:9px; font-size:.78rem; pointer-events:none; z-index:500; opacity:0; transition:opacity .15s ease; box-shadow:0 14px 28px -10px rgba(0,0,0,.45); white-space:nowrap;}
.chart-tooltip.show{opacity:1;}
.chart-tooltip strong{color:var(--brass-400);}

.charts-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.charts-grid > .panel{min-width:0;}
@media (max-width:900px){.charts-grid{grid-template-columns:1fr;}}
.barchart .bar{flex:1; background:linear-gradient(180deg,var(--olive-400),var(--olive-600)); border-radius:6px 6px 0 0; position:relative; min-height:6px;}
.barchart .bwrap{display:flex; flex-direction:column; align-items:center; flex:1; height:100%; justify-content:flex-end;}
.barchart .blabel{font-size:.68rem; color:var(--charcoal-600); margin-top:6px;}

.data-table{width:100%; border-collapse:collapse; font-size:.85rem;}
.chart-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px;}
.table-scroll .data-table{min-width:640px;}
.orders-cards{display:none; flex-direction:column; gap:12px;}
.order-card{border:1px solid var(--line); border-radius:14px; padding:16px 17px; background:var(--page-bg); box-shadow:var(--shadow-soft);}
.payment-alert-card{display:flex; align-items:flex-start; gap:14px; padding:16px; border-radius:12px; background:var(--surface); border:1px solid var(--brass-100); margin-bottom:12px; box-shadow:var(--shadow-soft);}
.payment-alert-card .pac-dot{width:10px; height:10px; border-radius:50%; background:var(--brass-500); margin-top:5px; flex-shrink:0; animation:pac-pulse 1.8s ease-in-out infinite;}
@keyframes pac-pulse{ 0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(201,162,39,.4);} 50%{opacity:.7; box-shadow:0 0 0 6px rgba(201,162,39,0);} }
.payment-alert-card .pac-body{flex:1; min-width:0;}
.payment-alert-card .pac-top{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.payment-alert-card .pac-id{font-size:.85rem; font-weight:700;}
.payment-alert-card .pac-amount{font-size:.95rem; font-weight:700; color:var(--olive-600);}
.payment-alert-card .pac-cust{font-size:.85rem; color:var(--charcoal-900); margin-top:3px;}
.payment-alert-card .pac-meta{font-size:.74rem; color:var(--charcoal-600); margin-top:2px;}
.order-card .oc-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:10px;}
.order-card .oc-id{font-size:.85rem; font-weight:700;}
.order-card .oc-customer{font-size:.92rem; font-weight:600; margin-bottom:2px;}
.order-card .oc-type{font-weight:400; color:var(--charcoal-600); font-size:.8rem;}
.order-card .oc-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
.order-card .oc-field .k{font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:var(--charcoal-600); margin-bottom:3px;}
.order-card .oc-field .v{font-size:.84rem; font-weight:600;}
@media (max-width:800px){
  .orders-table-wrap{display:none;}
  .orders-cards{display:flex;}
}
.data-table th{text-align:left; padding:10px 12px; color:var(--charcoal-600); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--line);}
.data-table td{padding:12px; border-bottom:1px solid var(--line); vertical-align:middle;}
.badge{display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:20px;}
.badge::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor;}
.eta-flag{display:inline-block; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:8px; margin-left:4px; white-space:nowrap;}
.eta-overdue{background:var(--badge-neg-bg); color:var(--badge-neg-fg);}
.eta-soon{background:var(--brass-100); color:var(--badge-prod-fg);}
.repeat-badge{display:inline-block; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:8px; margin-left:6px; background:var(--olive-100); color:var(--olive-600); vertical-align:middle;}
.badge.b-new{background:var(--badge-new-bg); color:var(--badge-new-fg);}
.badge.b-prod{background:var(--brass-100); color:var(--badge-prod-fg);}
.badge.b-ready{background:var(--olive-100); color:var(--olive-600);}
.badge.b-shipped{background:var(--badge-shipped-bg); color:var(--badge-shipped-fg);}
.badge.b-delivered{background:var(--olive-100); color:var(--olive-600);}
.badge.b-cancelled{background:var(--badge-neg-bg); color:var(--badge-neg-fg);}
.badge.b-paid{background:var(--olive-100); color:var(--olive-600);}
.badge.b-partial{background:var(--brass-100); color:var(--badge-prod-fg);}
.badge.b-unpaid{background:var(--badge-neg-bg); color:var(--badge-neg-fg);}

.stocklevel{display:flex; gap:2px; align-items:flex-end; height:16px; width:44px;}
.stage-progress-wrap{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.stage-progress-track{flex:1; height:8px; border-radius:6px; background:var(--surface-tint); overflow:hidden;}
.stage-progress-fill{height:100%; border-radius:6px; background:linear-gradient(90deg, var(--brass-400), var(--olive-500)); transition:width 1.1s cubic-bezier(.16,.84,.44,1);}
.stage-progress-label{font-size:.74rem; font-weight:700; color:var(--olive-600); min-width:34px; text-align:right;}
.prod-detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; background:var(--page-bg); border-radius:10px; padding:14px 16px;}
.prod-detail-grid .pd-item.full{grid-column:1/-1;}
.prod-detail-grid .pd-k{font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:var(--charcoal-600); margin-bottom:2px;}
.prod-detail-grid .pd-v{font-size:.85rem; color:var(--charcoal-900); font-weight:500;}
.order-actions-wrap{display:flex; flex-direction:column; gap:8px; align-items:flex-start;}
.action-chip-row{display:flex; gap:6px;}
.action-chip{display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600; padding:6px 11px; border-radius:20px; border:1px solid var(--line); background:var(--surface); color:var(--charcoal-600); cursor:pointer; transition:all .15s;}
.action-chip svg{width:12px; height:12px;}
.action-chip.danger{color:var(--red-500); border-color:var(--red-100);}
.stocklevel span{flex:1; border-radius:2px;}

.searchbar{display:flex; align-items:center; gap:8px; background:var(--page-bg); border:1px solid var(--line); border-radius:10px; padding:9px 13px; min-width:0; flex:1 1 220px; max-width:320px; position:relative;}
.global-search-wrap{position:relative;}
.global-search-mobile-btn{display:none;}
@media (max-width:900px){
  .global-search-mobile-btn{display:flex;}
  .global-search-wrap{display:none;}
  .global-search-wrap.mobile-open{display:block; position:fixed; top:64px; left:12px; right:12px; z-index:90;}
  .global-search-wrap.mobile-open .searchbar{max-width:none; background:var(--surface); border-color:var(--line);}
  .global-search-wrap.mobile-open .searchbar input{color:var(--charcoal-900);}
  .global-search-wrap.mobile-open .searchbar input::placeholder{color:var(--charcoal-600);}
  .global-search-wrap.mobile-open .searchbar svg{color:var(--charcoal-600);}
  .global-search-results{width:100%; left:0; right:0;}
}
.global-search-wrap .searchbar{background:rgba(247,244,236,.08); border-color:var(--line-dark); color:var(--ivory-50);}
.global-search-wrap .searchbar input{background:none; border:none; outline:none; color:var(--ivory-50); font-size:.85rem; width:100%;}
.global-search-wrap .searchbar input::placeholder{color:rgba(247,244,236,.45);}
.global-search-wrap .searchbar svg{color:rgba(247,244,236,.55); flex-shrink:0;}
.global-search-results{position:absolute; top:calc(100% + 8px); left:0; width:320px; max-height:400px; overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 48px -16px rgba(13,26,14,.35); z-index:80; opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .2s ease, transform .2s cubic-bezier(.16,.84,.44,1); padding:6px;}
.global-search-results.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.gsr-group{font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--charcoal-600); padding:8px 10px 4px;}
.gsr-item{padding:8px 10px; border-radius:8px; cursor:pointer; transition:background .15s;}
.gsr-title{font-size:.85rem; font-weight:600; color:var(--charcoal-900); display:flex; align-items:center;}
.gsr-sub{font-size:.76rem; color:var(--charcoal-600); margin-top:1px;}
.gsr-empty{padding:16px; font-size:.82rem; color:var(--charcoal-600); text-align:center;}
.cust-search-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.searchbar input{border:none; background:transparent; outline:none; font-size:.85rem; flex:1; color:var(--charcoal-900);}
.searchbar input::placeholder{color:var(--charcoal-600); opacity:.7;}
.searchbar svg{width:15px; height:15px; color:var(--charcoal-600);}

.btn-sm{background:var(--olive-600); color:#fff; border:none; padding:9px 16px; border-radius:10px; font-size:.82rem; font-weight:600; white-space:nowrap; transition:background .2s, transform .12s ease;}
.btn-sm:active{transform:scale(.94);}
.btn-sm.ghost{background:transparent; color:var(--olive-600); border:1px solid var(--olive-600);}

.pos-grid{display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start;}
@media (max-width:900px){.pos-grid{grid-template-columns:1fr;}}
.pos-products{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px;}
.pos-pcard{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; box-shadow:var(--shadow-soft); transition:all .15s;}
.pos-pcard .img{height:60px; background:var(--olive-100); border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:8px;}
.pos-pcard .img svg{width:26px; height:26px; color:var(--olive-600);}
.pos-pcard .nm{font-size:.78rem; font-weight:600;}
.pos-pcard .pr{font-size:.76rem; color:var(--olive-600); font-weight:700; margin-top:2px;}
.pos-cart{background:var(--pine-900); color:var(--ivory-50); border-radius:16px; padding:20px; position:sticky; top:90px;}
.pos-cart h4{font-size:1rem; margin-bottom:14px;}
.pos-ci{display:flex; justify-content:space-between; font-size:.82rem; padding:8px 0; border-bottom:1px solid var(--line-dark);}
.pos-ci-row{flex-wrap:wrap; align-items:center; gap:8px; padding:12px 0;}
.pos-ci-info{display:flex; flex-direction:column; flex:1; min-width:110px;}
.pos-ci-name{font-weight:600; font-size:.85rem;}
.pos-ci-unit{font-size:.7rem; color:var(--ivory-100); opacity:.6; margin-top:2px;}
.pos-ci-controls{display:flex; align-items:center; gap:6px;}
.qty-btn{width:24px; height:24px; border-radius:6px; border:1px solid var(--line-dark); background:rgba(247,244,236,.08); color:var(--ivory-50); font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .15s;}
.qty-val{min-width:18px; text-align:center; font-weight:700; font-size:.85rem;}
.qty-del{width:24px; height:24px; border-radius:6px; border:none; background:none; color:var(--ivory-100); opacity:.55; display:flex; align-items:center; justify-content:center; margin-left:4px; transition:all .15s;}
.qty-del svg{width:13px; height:13px;}
.pos-ci-linetotal{width:100%; text-align:right; font-size:.78rem; font-weight:700; color:var(--olive-400);}

.cust-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px;}
.cust-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow-soft); transition:transform .25s cubic-bezier(.16,.84,.44,1), box-shadow .25s ease;}
.cust-card .top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px;}
.cust-card .avatar{width:38px; height:38px; border-radius:50%; background:var(--olive-100); color:var(--olive-600); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;}
.cust-card h4{font-size:.95rem; margin-bottom:2px;}
.cust-card .ph{font-size:.78rem; color:var(--charcoal-600);}
.cust-actions{display:flex; flex-direction:column; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
.recently-viewed-row{display:flex; gap:14px; padding-bottom:6px; width:max-content; min-width:100%;}
.chart-scroll::-webkit-scrollbar{display:none;}
.chart-scroll{scrollbar-width:none;}
.rv-card{flex:0 0 auto; width:140px; cursor:pointer; transition:transform .12s ease;}
.rv-card:active{transform:scale(.96);}
.skeleton-card{background:var(--surface); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); height:280px; position:relative;}
.skeleton-card::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--surface-tint) 0%, var(--surface-tint2) 50%, var(--surface-tint) 100%); background-size:200% 100%; animation:skeletonShimmer 1.3s ease-in-out infinite;}
@keyframes skeletonShimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
.rv-card .rv-thumb{width:140px; height:140px; border-radius:12px; background:var(--surface-tint); display:flex; align-items:center; justify-content:center; color:var(--olive-500); margin-bottom:8px; overflow:hidden;}
.rv-card .rv-thumb img{width:100%; height:100%; object-fit:cover;}
@media (max-width:900px){
  #recentlyViewedRow{display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:12px; width:auto; min-width:0;}
  #recentlyViewedRow .rv-card{width:auto;}
  #recentlyViewedRow .rv-thumb{width:100%; height:auto; aspect-ratio:1/1;}
}
.rv-card .rv-name{font-size:.8rem; font-weight:600; color:var(--charcoal-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rv-card .rv-price{font-size:.78rem; color:var(--olive-600); font-weight:700;}
.cust-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; align-items:center;}
.cust-tag-pill{display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600; padding:4px 6px 4px 10px; border-radius:12px; background:var(--brass-100); color:var(--badge-prod-fg);}
.cust-tag-pill button{background:none; border:none; color:inherit; opacity:.6; cursor:pointer; font-size:.9rem; line-height:1; padding:0 2px;}
.cust-tag-add{font-size:.72rem; font-weight:600; padding:4px 10px; border-radius:12px; background:none; border:1px dashed var(--line); color:var(--charcoal-600); cursor:pointer;}
.tag-popover{position:absolute; z-index:200; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 40px -14px rgba(0,0,0,.3); padding:12px; width:220px;}
.tag-popover-title{font-size:.76rem; font-weight:700; margin-bottom:8px; color:var(--charcoal-900);}
.tag-popover-chips{display:flex; flex-wrap:wrap; gap:6px;}
.tag-popover-chips button{font-size:.72rem; padding:4px 9px; border-radius:10px; border:1px solid var(--line); background:var(--page-bg); color:var(--charcoal-900); cursor:pointer;}
.tag-popover input{flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; padding:6px 9px; font-size:.78rem; background:var(--surface); color:var(--charcoal-900);}
.share-popover{position:absolute; z-index:200; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 40px -14px rgba(0,0,0,.3); padding:6px; width:220px; display:flex; flex-direction:column;}
.share-popover button{display:flex; align-items:center; gap:10px; background:none; border:none; text-align:left; padding:10px 12px; border-radius:8px; font-size:.82rem; color:var(--charcoal-900); cursor:pointer;}
.order-overflow-menu{position:absolute; z-index:200; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 40px -14px rgba(0,0,0,.3); padding:6px; width:170px; display:flex; flex-direction:column;}
.order-overflow-menu button{display:flex; align-items:center; gap:10px; background:none; border:none; text-align:left; padding:10px 12px; border-radius:8px; font-size:.82rem; color:var(--charcoal-900); cursor:pointer;}
.order-overflow-menu button.danger{color:var(--red-500);}
.cust-actions .btn-sm{flex:1; text-align:center;}
.btn-sm.danger{background:transparent; color:var(--red-500); border:1px solid var(--red-100);}
.cust-meta{display:flex; justify-content:space-between; font-size:.78rem; margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
.cust-meta div span{display:block;}
.cust-meta .k{color:var(--charcoal-600); font-size:.68rem; text-transform:uppercase;}
.cust-meta .v{font-weight:700; margin-top:2px;}

/* Settings */
.subtabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px; border-bottom:1px solid var(--line); padding-bottom:0;}
.subtab{padding:10px 4px; margin-right:22px; font-size:.85rem; font-weight:600; color:var(--charcoal-600); border-bottom:2px solid transparent; transition:all .2s;}
.subtab.active{color:var(--olive-600); border-color:var(--olive-600);}
.pw-cell{display:flex; align-items:center; gap:8px;}
.pw-cell .pwval{font-size:.8rem; letter-spacing:.03em; min-width:70px; display:inline-block;}
.eye-btn{background:none; border:none; color:var(--charcoal-600); width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:6px; cursor:pointer; flex-shrink:0;}
.eye-btn svg{width:15px; height:15px;}

/* Custom dropdown (replaces native select for dark-theme menus) */
.cs{position:relative;}
.cs-trigger{display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; user-select:none;}
.cs-trigger svg{width:15px; height:15px; flex-shrink:0; transition:transform .2s ease;}
.cs.open .cs-trigger svg{transform:rotate(180deg);}
.cs-menu{position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--pine-800); border:1px solid var(--line-dark); border-radius:10px; box-shadow:0 16px 30px -10px rgba(0,0,0,.55); overflow:hidden; z-index:80; display:none;}
#roleSwitcherCs .cs-menu, #loginRoleCs .cs-menu{left:auto; right:0; min-width:190px;}
.cs.open .cs-menu{display:block;}
.cs-option{padding:10px 14px; font-size:.85rem; color:var(--ivory-100); cursor:pointer; transition:background .15s;}
.cs-option.sel{background:var(--olive-600); color:#fff; font-weight:600;}
.cs-light .cs-trigger{background:var(--page-bg); border:1px solid var(--line); border-radius:10px; padding:11px 13px; color:var(--charcoal-900); font-size:.9rem;}
.cs-light .cs-trigger svg{color:var(--charcoal-600);}
.cs-light .cs-menu{background:var(--surface); border:1px solid var(--line); box-shadow:0 16px 30px -10px rgba(0,0,0,.18);}
.cs-light .cs-option{color:var(--charcoal-900);}
.cs-light .cs-option.sel{background:var(--olive-600); color:#fff;}
.cs-group-label{padding:9px 14px 5px; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--charcoal-600); cursor:default;}
.cs-light .cs-menu{max-height:320px; overflow-y:auto;}
.warn-note{display:flex; gap:10px; background:var(--brass-100); color:#7a5f0e; border-radius:12px; padding:12px 16px; font-size:.8rem; line-height:1.5; margin-bottom:18px;}
.warn-note svg{width:18px; height:18px; flex-shrink:0; margin-top:1px;}
.avatar-upload{display:flex; align-items:center; gap:16px; margin-bottom:20px;}
.avatar-big{width:64px; height:64px; border-radius:50%; background:var(--olive-100); color:var(--olive-600); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.2rem; overflow:hidden;}
.upload-link{font-size:.82rem; font-weight:600; color:var(--olive-600); border:1px solid var(--olive-600); border-radius:20px; padding:8px 16px; display:inline-block;}
.swatches{display:flex; gap:10px;}
.swatch{width:34px; height:34px; border-radius:10px; cursor:pointer; border:2px solid transparent; transition:all .15s;}
.swatch.sel{border-color:var(--charcoal-900); transform:scale(1.08);}
.radio-row{display:flex; gap:10px; flex-wrap:wrap;}
.modern-checkbox{display:flex; align-items:center; gap:8px; cursor:pointer; font-size:.78rem; user-select:none;}
.modern-checkbox input{position:absolute; opacity:0; width:0; height:0; margin:0;}
.mc-box{width:19px; height:19px; border-radius:6px; border:1.5px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:center; transition:background .15s ease, border-color .15s ease; flex-shrink:0;}
.mc-box svg{width:13px; height:13px; color:#fff; opacity:0; transform:scale(.5); transition:opacity .15s ease, transform .15s ease;}
.modern-checkbox input:checked + .mc-box{background:var(--olive-600); border-color:var(--olive-600);}
.modern-checkbox input:checked + .mc-box svg{opacity:1; transform:scale(1);}
.modern-checkbox input:focus-visible + .mc-box{box-shadow:0 0 0 3px rgba(91,140,42,.28);}
.mc-label{color:var(--charcoal-900);}
.radio-pill{padding:9px 16px; border-radius:20px; border:1px solid var(--line); font-size:.83rem; font-weight:600; background:var(--surface);}
.radio-pill.sel{background:var(--olive-600); color:#fff; border-color:var(--olive-600);}
.ann-item{padding:14px 0; border-bottom:1px solid var(--line);}
.ann-seen{font-size:.74rem; color:var(--olive-600); margin-top:6px; font-weight:600;}
.ann-item .ann-head{display:flex; justify-content:space-between; font-size:.78rem; color:var(--charcoal-600); margin-bottom:4px;}
.ann-item .ann-body{font-size:.88rem;}
.ann-del{background:none; border:none; color:var(--charcoal-600); width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:6px; cursor:pointer; flex-shrink:0;}
.ann-del svg{width:14px; height:14px;}
.ni-del{background:none; border:none; color:var(--charcoal-600); opacity:.5; width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; flex-shrink:0; transition:all .15s;}
.ni-del svg{width:11px; height:11px;}

/* ============ SPLASH INTRO ============ */
#splashScreen{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(143,193,88,0.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 90% 100%, rgba(201,162,39,0.1), transparent 60%),
    var(--pine-950);
  transition: opacity .8s ease, visibility .8s;
}
body.splash-active{overflow:hidden !important;}
#splashScreen.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.splash-inner{display:flex; flex-direction:column; align-items:center; cursor:pointer;}
.splash-logo{
  width:min(78vw, 460px);
  opacity:0;
  transform:scale(.82);
  filter:drop-shadow(0 0 0 rgba(143,193,88,0));
  animation: splashReveal 1.15s cubic-bezier(.16,.84,.44,1) .15s forwards, splashGlow 2.6s ease-in-out 1.3s infinite;
}
@keyframes splashReveal{
  0%{ opacity:0; transform:scale(.82) translateY(10px); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}
@keyframes splashGlow{
  0%,100%{ filter:drop-shadow(0 0 14px rgba(143,193,88,.15)); }
  50%{ filter:drop-shadow(0 0 26px rgba(143,193,88,.35)); }
}
.splash-stitch{width:min(60vw,340px); height:18px; margin-top:6px; opacity:0; animation: fadein .6s ease 1.15s forwards;}
.splash-stitch path{fill:none; stroke:var(--brass-500); stroke-width:2; stroke-linecap:round; stroke-dasharray:8 9; stroke-dashoffset:700; animation: stitch-draw 1.3s cubic-bezier(.65,0,.35,1) 1.2s forwards;}
.reveal{opacity:0; transform:translateY(38px); transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); will-change:opacity, transform;}
.reveal.in{opacity:1; transform:none;}
.reveal-scale{opacity:0; transform:scale(.92); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);}
.reveal-scale.in{opacity:1; transform:none;}
.reveal-left{opacity:0; transform:translateX(-40px); transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);}
.reveal-left.in{opacity:1; transform:none;}
.reveal-right{opacity:0; transform:translateX(40px); transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);}
.reveal-right.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-scale, .reveal-left, .reveal-right{opacity:1 !important; transform:none !important; transition:none !important;}
}
@media (prefers-reduced-motion: reduce){
  #splashScreen{ transition:none; }
  .splash-logo{ animation:none; opacity:1; transform:none; }
  .splash-stitch{ animation:none; opacity:1; }
  .splash-stitch path{ animation:none; stroke-dashoffset:0; }
}

/* ============ NOTIFICATIONS: bell, panel, toast ============ */
.notif-wrap{position:relative; z-index:60;}
.bell-shake{animation: bellShake .6s ease;}
@keyframes bellShake{
  0%,100%{transform:rotate(0);}
  20%{transform:rotate(-14deg);} 40%{transform:rotate(11deg);}
  60%{transform:rotate(-7deg);} 80%{transform:rotate(4deg);}
}
.badge-count.pop{animation: badgePop .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes badgePop{ 0%{transform:scale(0);} 60%{transform:scale(1.3);} 100%{transform:scale(1);} }

.notif-panel{position:absolute; top:calc(100% + 12px); right:0; width:320px; max-height:420px; overflow-y:auto; background:var(--surface); border-radius:16px; box-shadow:0 26px 50px -16px rgba(0,0,0,.4); z-index:500; border:1px solid var(--line); display:none; opacity:0; transform:translateY(-6px); transition:opacity .25s ease, transform .25s ease;}
.notif-panel.open{display:block;}
.notif-panel.show{opacity:1; transform:translateY(0);}
:where([data-tip]){position:relative;}
:where([data-tip])::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--pine-950); color:var(--ivory-50); font-size:.72rem; font-weight:600; letter-spacing:.01em;
  padding:6px 11px; border-radius:8px; white-space:normal; width:max-content; max-width:220px; text-align:center; line-height:1.4;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:300;
}
:where([data-tip])::before{
  content:''; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%) translateY(4px);
  border:5px solid transparent; border-top-color:var(--pine-950);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:300;
}
[data-tip]:focus-visible::after, [data-tip]:focus-visible::before{
  opacity:1; transform:translateX(-50%) translateY(0);
}
[data-tip-below]::after{bottom:auto; top:calc(100% + 9px); transform:translateX(-50%) translateY(-4px);}
.mimg-zoom-btn::after{left:0; transform:translateX(0) translateY(-4px) !important;}
.mimg-zoom-btn::before{left:17px;}
[data-tip-below]::before{bottom:auto; top:calc(100% + 3px); border-top-color:transparent; border-bottom-color:var(--pine-950); transform:translateX(-50%) translateY(-4px);}
[data-tip-below]:focus-visible::after, [data-tip-below]:focus-visible::before{
  transform:translateX(-50%) translateY(0);
}
.topnav [data-tip]::after{bottom:auto; top:calc(100% + 9px); transform:translateX(-50%) translateY(-4px);}
.topnav [data-tip]::before{bottom:auto; top:calc(100% + 3px); border-top-color:transparent; border-bottom-color:var(--pine-950); transform:translateX(-50%) translateY(-4px);}
.topnav [data-tip]:focus-visible::after, .topnav [data-tip]:focus-visible::before{
  transform:translateX(-50%) translateY(0);
}
.notif-panel-head{padding:15px 18px; font-weight:700; font-size:.88rem; color:var(--charcoal-900); border-bottom:1px solid var(--line); background:linear-gradient(120deg, var(--olive-100), var(--page-bg) 70%); border-radius:16px 16px 0 0; position:relative; overflow:hidden;}
.fab-stack [data-tip]::after{left:auto; right:0; transform:translateX(0) translateY(4px);}
.fab-stack [data-tip]::before{left:auto; right:14px; transform:translateX(0) translateY(4px);}
.fab-stack [data-tip]:focus-visible::after, .fab-stack [data-tip]:focus-visible::before{
  transform:translateX(0) translateY(0);
}
.notif-body{padding:4px 0;}
.notif-item{padding:13px 18px; border-bottom:1px solid var(--line); position:relative; padding-left:28px; opacity:0; transform:translateY(8px); animation: notifIn .4s ease forwards;}
.notif-item:last-child{border-bottom:none;}
@keyframes notifIn{ to{ opacity:1; transform:translateY(0); } }
.notif-item::before{content:''; position:absolute; left:14px; top:15px; bottom:15px; width:3px; border-radius:3px; background:linear-gradient(180deg, var(--olive-500), var(--brass-500));}
.notif-item .ni-head{font-size:.68rem; color:var(--charcoal-600); margin-bottom:4px; display:flex; justify-content:space-between; text-transform:uppercase; letter-spacing:.03em;}
.notif-item .ni-body{font-size:.85rem; line-height:1.5; color:var(--charcoal-900);}
.notif-empty{padding:36px 20px; text-align:center; font-size:.85rem; color:var(--charcoal-600);}

.toast-container{position:fixed; bottom:90px; right:22px; z-index:400; display:flex; flex-direction:column; gap:12px; align-items:flex-end; pointer-events:none;}
@media (max-width:480px){.toast-container{bottom:100px; right:16px;}}
.toast{pointer-events:auto; max-width:340px; background:linear-gradient(150deg,var(--pine-900),var(--pine-950)); color:var(--ivory-50); border-radius:16px; padding:16px 18px; box-shadow:0 24px 46px -14px rgba(0,0,0,.55); position:relative; overflow:hidden; transform:translateX(130%) scale(.96); opacity:0; animation: toastIn .55s cubic-bezier(.16,.84,.44,1) forwards;}
.toast.leaving{animation: toastOut .35s ease forwards;}
@keyframes toastIn{ to{ transform:translateX(0) scale(1); opacity:1; } }
@keyframes toastOut{ to{ transform:translateX(130%) scale(.96); opacity:0; } }
.toast-border{position:absolute; inset:0; border-radius:16px; padding:1.5px; background:linear-gradient(120deg, var(--brass-500), var(--olive-400), var(--brass-500)); background-size:220% 220%; -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation: gradientShift 3s ease infinite; pointer-events:none;}
@keyframes gradientShift{ 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
.toast-shine{position:absolute; top:0; left:-60%; width:35%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.16), transparent); transform:skewX(-20deg); animation: shineSweep 1.6s ease-in-out .25s; pointer-events:none;}
@keyframes shineSweep{ 0%{left:-60%;} 100%{left:140%;} }
.toast-head{display:flex; align-items:center; gap:7px; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-400); margin-bottom:6px; font-weight:700; position:relative;}
.toast-head svg{width:13px; height:13px;}
.toast-dot{width:6px; height:6px; border-radius:50%; background:var(--olive-400); box-shadow:0 0 8px var(--olive-400); animation: dotPulse 1.4s ease-in-out infinite;}
@keyframes dotPulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
.toast-body{font-size:.86rem; line-height:1.5; position:relative;}

/* ============ AMBIENT FOOTWEAR PATTERN (background texture) ============ */
.hero, #screen-landing{position:relative;}
.screen{position:relative;}
.screen > *{position:relative; z-index:1;}
.topnav::before, .hero::before, #screen-landing::before, .screen::before, body::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-repeat:repeat; background-size:220px 220px;
  animation: patternDrift 110s linear infinite;
  will-change:background-position;
}
body::before{ position:fixed; inset:0; z-index:-1; }
.topnav::before, .hero::before, #screen-landing::before{
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23f7f4ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(8,18) rotate(-10)'%3E%3Cpath d='M2 24c0-8 6-15 15-17 6-1 11 1 15 5l16 6c5 2 7 4 7 7 0 3-3 4-6 4H8c-4 0-6-2-6-5z'/%3E%3Cpath d='M14 12l7 4'/%3E%3C/g%3E%3Cg transform='translate(130,25) rotate(14)'%3E%3Cellipse cx='20' cy='14' rx='18' ry='7'/%3E%3Cpath d='M8 9q12-8 24 0'/%3E%3C/g%3E%3Cg transform='translate(35,120) rotate(-16)'%3E%3Cellipse cx='19' cy='13' rx='18' ry='6'/%3E%3Cpath d='M6 13L26 2M32 13L12 2'/%3E%3C/g%3E%3Cg transform='translate(150,140) rotate(22)'%3E%3Cpath d='M2 20c0-7 5-13 13-15 5-1 10 1 13 4l14 5c4 2 6 3 6 6 0 3-2 4-5 4H7c-3 0-5-2-5-4z'/%3E%3Cpath d='M12 10l6 3'/%3E%3C/g%3E%3Cg transform='translate(0,165) rotate(-8)'%3E%3Cellipse cx='17' cy='12' rx='16' ry='6'/%3E%3Cpath d='M6 8q11-7 22 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* Default (light/white theme): dark-on-cream stroke, same tile as body::before */
.screen::before, body::before{
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%235b8c2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(8,18) rotate(-10)'%3E%3Cpath d='M2 24c0-8 6-15 15-17 6-1 11 1 15 5l16 6c5 2 7 4 7 7 0 3-3 4-6 4H8c-4 0-6-2-6-5z'/%3E%3Cpath d='M14 12l7 4'/%3E%3C/g%3E%3Cg transform='translate(130,25) rotate(14)'%3E%3Cellipse cx='20' cy='14' rx='18' ry='7'/%3E%3Cpath d='M8 9q12-8 24 0'/%3E%3C/g%3E%3Cg transform='translate(35,120) rotate(-16)'%3E%3Cellipse cx='19' cy='13' rx='18' ry='6'/%3E%3Cpath d='M6 13L26 2M32 13L12 2'/%3E%3C/g%3E%3Cg transform='translate(150,140) rotate(22)'%3E%3Cpath d='M2 20c0-7 5-13 13-15 5-1 10 1 13 4l14 5c4 2 6 3 6 6 0 3-2 4-5 4H7c-3 0-5-2-5-4z'/%3E%3Cpath d='M12 10l6 3'/%3E%3C/g%3E%3Cg transform='translate(0,165) rotate(-8)'%3E%3Cellipse cx='17' cy='12' rx='16' ry='6'/%3E%3Cpath d='M6 8q11-7 22 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* Dark themes ("Green" and "Black"): every .screen's own background flips to
   a dark page-bg via the theme classes below, so the dark-stroke tile above
   would nearly vanish against it \u2014 swap to the light-stroke tile instead,
   same one already used on the always-dark hero/topnav. body::before stays
   on the light tile deliberately: it's the fixed layer sitting behind every
   screen, and since every .screen now paints its own matching-theme pattern
   directly on top, body's own layer is only ever visible in the rare gaps
   outside a .screen \u2014 not worth re-deriving per theme for that sliver. */
body.theme-green .screen::before, body.theme-black .screen::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23f7f4ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(8,18) rotate(-10)'%3E%3Cpath d='M2 24c0-8 6-15 15-17 6-1 11 1 15 5l16 6c5 2 7 4 7 7 0 3-3 4-6 4H8c-4 0-6-2-6-5z'/%3E%3Cpath d='M14 12l7 4'/%3E%3C/g%3E%3Cg transform='translate(130,25) rotate(14)'%3E%3Cellipse cx='20' cy='14' rx='18' ry='7'/%3E%3Cpath d='M8 9q12-8 24 0'/%3E%3C/g%3E%3Cg transform='translate(35,120) rotate(-16)'%3E%3Cellipse cx='19' cy='13' rx='18' ry='6'/%3E%3Cpath d='M6 13L26 2M32 13L12 2'/%3E%3C/g%3E%3Cg transform='translate(150,140) rotate(22)'%3E%3Cpath d='M2 20c0-7 5-13 13-15 5-1 10 1 13 4l14 5c4 2 6 3 6 6 0 3-2 4-5 4H7c-3 0-5-2-5-4z'/%3E%3Cpath d='M12 10l6 3'/%3E%3C/g%3E%3Cg transform='translate(0,165) rotate(-8)'%3E%3Cellipse cx='17' cy='12' rx='16' ry='6'/%3E%3Cpath d='M6 8q11-7 22 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
@keyframes patternDrift{ from{ background-position:0 0; } to{ background-position:-220px -140px; } }
.topnav > *, .hero > *, #screen-landing > *{position:relative; z-index:1;}
.staff-wrap, .section, .staff-tabs{position:relative; z-index:1;}
/* Footer: always the same dark pine background regardless of theme (same as
   hero/topnav), so it always gets the light-stroke tile, no theme override
   needed. Appears 3 times in the markup (shop/preorder/track screens) but
   all share the .site-footer class, so one rule covers every instance. */
.site-footer{position:relative;}
.footer-inner, .footer-bottom{position:relative; z-index:1;}
.site-footer::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-repeat:repeat; background-size:220px 220px;
  animation: patternDrift 110s linear infinite;
  will-change:background-position;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23f7f4ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(8,18) rotate(-10)'%3E%3Cpath d='M2 24c0-8 6-15 15-17 6-1 11 1 15 5l16 6c5 2 7 4 7 7 0 3-3 4-6 4H8c-4 0-6-2-6-5z'/%3E%3Cpath d='M14 12l7 4'/%3E%3C/g%3E%3Cg transform='translate(130,25) rotate(14)'%3E%3Cellipse cx='20' cy='14' rx='18' ry='7'/%3E%3Cpath d='M8 9q12-8 24 0'/%3E%3C/g%3E%3Cg transform='translate(35,120) rotate(-16)'%3E%3Cellipse cx='19' cy='13' rx='18' ry='6'/%3E%3Cpath d='M6 13L26 2M32 13L12 2'/%3E%3C/g%3E%3Cg transform='translate(150,140) rotate(22)'%3E%3Cpath d='M2 20c0-7 5-13 13-15 5-1 10 1 13 4l14 5c4 2 6 3 6 6 0 3-2 4-5 4H7c-3 0-5-2-5-4z'/%3E%3Cpath d='M12 10l6 3'/%3E%3C/g%3E%3Cg transform='translate(0,165) rotate(-8)'%3E%3Cellipse cx='17' cy='12' rx='16' ry='6'/%3E%3Cpath d='M6 8q11-7 22 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){
  .topnav::before, .hero::before, #screen-landing::before, .screen::before, body::before, .site-footer::before{ animation:none; }
}

/* Receipt */
.receipt-overlay{position:fixed; inset:0; background:rgba(13,26,14,.6); display:none; align-items:center; justify-content:center; z-index:110; padding:20px;}
.receipt-overlay.active{display:flex;}
.receipt-modal{background:#fff; color:#1a1a18; width:320px; max-height:90vh; overflow-y:auto; border-radius:14px; box-shadow:0 30px 60px -20px rgba(0,0,0,.5);}
.receipt-paper{padding:22px 20px; font-family:'IBM Plex Mono',monospace; font-size:.76rem; color:#111;}
.receipt-paper .rlogo{display:flex; flex-direction:column; align-items:center; margin-bottom:10px;}
.receipt-paper .rlogo svg{width:26px; height:26px; color:var(--olive-600); margin-bottom:6px;}
.receipt-paper .rlogo img{width:170px; height:auto; margin-bottom:4px;}
.receipt-paper .rbrand{font-family:'Fraunces',serif; font-weight:700; font-size:1rem; letter-spacing:.02em;}
.receipt-paper .rbrand .cl{display:block; font-style:italic; font-weight:400; font-size:.68rem; letter-spacing:.2em; color:var(--olive-600); text-transform:uppercase; margin-top:2px;}
.receipt-paper .raddr{text-align:center; font-size:.68rem; color:#555; margin-top:8px; line-height:1.5;}
.rdash{border-top:1px dashed #999; margin:12px 0;}
.rrow{display:flex; justify-content:space-between; margin-bottom:4px;}
.rrow.item-row{align-items:flex-start;}
.rrow .rlabel{color:#555;}
.rtotal{font-weight:700; font-size:.92rem;}
.rthanks{text-align:center; font-weight:700; font-size:1.05rem; margin:16px 0 4px; letter-spacing:.04em;}
.rfoot-note{text-align:center; font-size:.66rem; color:#777; margin-top:4px;}
.receipt-actions{display:flex; gap:10px; padding:16px 20px 20px;}
.pay-pills{display:flex; gap:8px; flex-wrap:wrap;}
.pay-pill{padding:9px 14px; border-radius:10px; border:1px solid var(--line-dark); font-size:.78rem; font-weight:600; color:var(--ivory-50); background:transparent;}
.pay-pill.sel{background:var(--brass-500); color:var(--pine-950); border-color:var(--brass-500);}
.pos-cart select{width:100%; background:rgba(247,244,236,.1); border:1px solid var(--line-dark); border-radius:8px; padding:8px 10px; color:var(--ivory-50); font-size:.82rem; margin-bottom:4px;}
@media print{
  body *{visibility:hidden;}
  .receipt-modal, .receipt-modal *{visibility:visible;}
  .receipt-overlay{position:absolute; inset:auto; background:none; padding:0;}
  .receipt-modal{position:absolute; top:0; left:0; width:80mm; max-height:none; box-shadow:none; border-radius:0;}
  .receipt-actions{display:none;}

  #reportsPrintArea, #reportsPrintArea *{visibility:visible;}
  #reportsPrintArea{position:absolute; top:0; left:0; width:100%; padding:16px;}
  #reportPeriodChips{display:none;}
  #reportsPrintArea .panel-head button{display:none;}
  #reportsPrintArea .panel{box-shadow:none; border:1px solid #ccc; break-inside:avoid;}
  .print-only-header{display:block !important;}
}

/* Profile chip + modal */
.profile-chip{display:flex; align-items:center; gap:9px; background:rgba(247,244,236,.08); border:1px solid var(--line-dark); border-radius:24px; padding:5px 14px 5px 5px; cursor:pointer; transition:background .2s;}
.chip-avatar{width:30px; height:30px; border-radius:50%; background:var(--olive-500); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; overflow:hidden; flex-shrink:0;}
.chip-avatar img{width:100%; height:100%; object-fit:cover;}
.chip-text{display:flex; flex-direction:column; line-height:1.2;}
.chip-text .cname{font-size:.8rem; font-weight:600; color:var(--ivory-50);}
.chip-text .crole{font-size:.66rem; color:var(--olive-400); text-transform:uppercase; letter-spacing:.04em;}
@media (max-width:640px){.chip-text{display:none;}}

.profile-modal-overlay{position:fixed; inset:0; background:rgba(13,26,14,.6); display:none; align-items:center; justify-content:center; z-index:120; padding:20px;}
.bottom-sheet-overlay{position:fixed; inset:0; background:rgba(13,26,14,.5); display:none; align-items:flex-end; justify-content:center; z-index:220; opacity:0; transition:opacity .25s ease;}
.bottom-sheet-overlay.active{display:flex; opacity:1;}
.bottom-sheet{background:var(--surface); width:100%; max-width:520px; border-radius:22px 22px 0 0; padding:10px 20px 28px; transform:translateY(100%); transition:transform .3s cubic-bezier(.22,1,.36,1);}
.bottom-sheet-overlay.active .bottom-sheet{transform:translateY(0);}
.bottom-sheet-handle{width:36px; height:4px; border-radius:3px; background:var(--line); margin:6px auto 16px;}
.bottom-sheet-title{font-weight:700; font-size:1.02rem; margin-bottom:10px; color:var(--charcoal-900);}
.sort-sheet-option{display:block; width:100%; text-align:left; background:none; border:none; padding:14px 6px; font-size:.95rem; color:var(--charcoal-900); border-bottom:1px solid var(--line); cursor:pointer;}
.sort-sheet-option:last-child{border-bottom:none;}
.sort-sheet-option.sel{color:var(--olive-600); font-weight:700;}
.profile-modal-overlay.active{display:flex;}
.profile-modal{background:var(--surface); border-radius:22px; max-width:420px; width:100%; max-height:90vh; overflow-y:auto; padding:28px 26px; position:relative;}

/* ============ SHOP GUIDE (onboarding) ============ */
.shop-guide-overlay{position:fixed; inset:0; background:rgba(13,26,14,.65); display:none; align-items:center; justify-content:center; z-index:150; padding:20px;}
.shop-guide-overlay.active{display:flex;}
.shop-guide-card{background:var(--surface); border-radius:24px; max-width:440px; width:100%; padding:32px 28px 28px; position:relative; max-height:90vh; overflow-y:auto; box-shadow:0 40px 80px -20px rgba(0,0,0,.5); animation: sgPop .45s cubic-bezier(.16,.84,.44,1);}
@keyframes sgPop{ from{ opacity:0; transform:scale(.92) translateY(14px); } to{ opacity:1; transform:scale(1) translateY(0); } }
.sg-head{text-align:center; margin-bottom:22px;}
.sg-icon{width:52px; height:52px; border-radius:50%; background:var(--olive-100); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; color:var(--olive-600); overflow:hidden;}
.sg-icon svg{width:24px; height:24px;}
.sg-icon img{width:34px; height:34px; object-fit:contain;}
.sg-head h2{font-size:1.25rem; font-weight:600; margin-bottom:6px;}
.sg-head p{font-size:.85rem; color:var(--charcoal-600);}
.sg-steps{display:flex; flex-direction:column; gap:18px; margin-bottom:24px;}
.sg-step{display:flex; gap:14px; align-items:flex-start; opacity:0; transform:translateY(10px); animation: sgStepIn .5s ease forwards;}
@keyframes sgStepIn{ to{ opacity:1; transform:translateY(0); } }
.sg-num{width:28px; height:28px; border-radius:50%; background:var(--pine-900); color:var(--ivory-50); font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.sg-text h4{font-size:.95rem; font-weight:600; margin-bottom:3px;}
.sg-text p{font-size:.83rem; color:var(--charcoal-600); line-height:1.5;}
.sg-text strong{color:var(--olive-600);}

/* ============ MOBILE RESPONSIVENESS PASS ============ */
@media (max-width:800px){
  .topnav{padding:14px 16px;}
  .topnav .brand{font-size:.92rem; gap:7px;}
  .topnav .brand svg{width:19px; height:19px;}
  .topnav .actions{gap:8px;}
  .icon-btn{width:34px; height:34px;}
  .staff-tabs{padding:0 16px;}
  .staff-tab{padding:12px 13px; font-size:.8rem;}
  .staff-wrap{padding:18px 16px;}
  .section{padding:28px 16px;}
  .hero{padding:44px 18px 40px;}
  .theme-switch{padding:2px; gap:1px;}
  .theme-switch .ts-thumb{width:22px; height:22px;}
  .theme-switch button{width:22px; height:22px;}
  .theme-switch button svg{width:12px; height:12px;}
  .theme-switch-fab button{width:30px; height:30px;}
  .theme-switch-fab button svg{width:16px; height:16px;}
  #roleSwitcherCs .cs-trigger{padding:7px 9px; font-size:.7rem;}
  .profile-chip{padding:4px 8px 4px 4px;}
  .panel{padding:16px;}
  .panel-head{flex-direction:column; align-items:flex-start; gap:12px;}
  .panel-head .chips{width:100%;}
  .searchbar{max-width:100%; width:100%; flex:0 0 auto;}
  .stat-grid{gap:10px;}
  .stat-card{padding:14px 15px;}
  .stat-card .val{font-size:1.25rem;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;}
  .pos-products{grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); gap:8px;}
  .preorder-banner{margin:0 16px 0; padding:26px 22px; flex-direction:column; align-items:flex-start;}
  .form-card{padding:20px 16px;}
  .drawer{width:100%; max-width:100vw;}
  .modal{max-width:94vw;}
  .cust-grid{grid-template-columns:1fr;}
  .doorways .card{padding:24px 20px;}
}
@media (max-width:560px){
  .cust-search-row{flex-direction:column; align-items:stretch; width:100%;}
  .cust-search-row .btn-sm{width:100%;}
}
@media (max-width:480px){
  .wordmark{font-size:2rem;}
  .wordmark .classics{font-size:.85rem;}
  .tagline{font-size:.9rem; padding:0 10px;}
  .hero h1{font-size:1.5rem;}
  .btn-primary, .btn-secondary{padding:11px 18px; font-size:.82rem;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .pos-products{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));}
  .toast-container{left:12px; right:12px; bottom:12px; align-items:stretch;}
  .toast{max-width:100%;}
  .notif-panel{position:fixed; top:64px; left:12px; right:12px; width:auto; max-width:none;}
  .modern-bar-chart{overflow:visible; gap:16px; padding:30px 14px 10px; width:max-content; min-width:100%;}
  .bar-value-prefix{display:none;}
  .modern-bar-value{font-size:.7rem;}
  .modern-bar-wrap{flex:0 0 auto; width:72px; min-width:72px;}
  .modern-bar-label{font-size:.7rem; line-height:1.25; white-space:normal; text-align:center; margin-top:10px;}
  .date-calendar{position:fixed; top:50%; left:12px; right:12px; width:auto; max-width:none; transform:translateY(-50%) scale(.96);}
  .date-calendar.open{transform:translateY(-50%) scale(1);}
  .topnav{flex-wrap:wrap; row-gap:10px;}
  .topnav .actions{flex-wrap:wrap; justify-content:flex-end; row-gap:8px;}
}
/* overflow-x:hidden here (not just "clip") would silently force overflow-y
   to auto too — a CSS quirk where "hidden" on one axis and "visible" on
   the other collapses to "auto" on both. That turned this into an
   unintended scroll container that clipped dropdowns like the order
   date-range calendar whenever they opened below the visible content
   (you'd see it cut off and have to scroll to see the rest). "clip"
   blocks horizontal overflow the same way without that side effect. */
.staff-wrap, .section{overflow-x:clip;}
/* Hover-only visual states (lift, glow, color change on mouseover) are
   restricted to devices with a real mouse. On touch screens, tapping can
   trigger a synthetic :hover with no matching "un-hover" event, so these
   effects would otherwise get stuck on after a tap until something else
   steals the fake hover state — this is what caused the "back to top"
   button (and others) to stay highlighted on phones. */
@media (hover:hover) and (pointer:fine){
.card:hover{transform:translateY(-4px);}
.card-shop:hover{box-shadow:0 26px 50px -22px rgba(0,0,0,.28), 0 0 0 1px rgba(91,140,42,.3), 0 0 32px rgba(111,164,55,.35);}
.card-staff:hover{box-shadow:0 26px 50px -22px rgba(0,0,0,.4), 0 0 0 1px rgba(201,162,39,.35), 0 0 32px rgba(201,162,39,.28);}
.card:hover .card-cta svg{transform:translateX(4px);}
.signin-btn:hover{background:var(--brass-400);}
.dev-credit:hover .dev-name{color:var(--brass-500);}
.dev-credit:hover .dev-name::after{width:100%;}
.scroll-top-btn:hover{background:var(--olive-600); transform:translateY(-2px) scale(1.05);}
.wa-bubble:hover{transform:scale(1.08);}
.social-icon-link:hover{background:var(--olive-600); border-color:var(--olive-600); color:#fff; transform:translateY(-2px);}
.topnav nav a:hover{opacity:1; border-color:var(--olive-400);}
.theme-switch button:hover{color:rgba(247,244,236,.85);}
.icon-btn:hover{background:rgba(247,244,236,.16);}
.search-clear:hover{background:var(--red-100); color:var(--red-500);}
.fp-close:hover{background:rgba(247,244,236,.2);}
.fp-cta:hover{background:rgba(247,244,236,.1); border-color:rgba(247,244,236,.5);}
.fp-cta:hover span{transform:translateX(3px);}
.btn-primary:hover{background:var(--brass-400); transform:translateY(-2px);}
.btn-secondary:hover{background:rgba(247,244,236,.08);}
.cal-nav:hover{background:var(--olive-600); border-color:var(--olive-600); color:#fff;}
.cal-day:not(.empty):hover{background:var(--olive-100); transform:scale(1.08);}
.cal-clear:hover{background:var(--red-100);}
.chip:hover{background:var(--olive-600); color:#fff; border-color:var(--olive-600);}
.pcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft-hover);}
.stat-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-soft-hover);}
.panel:hover{box-shadow:var(--shadow-soft-hover);}
.wish-btn:hover{background:#fff; transform:scale(1.08);}
.craft-step:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft-hover);}
.testi-arrow:hover{background:rgba(247,244,236,.18);}
.blog-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft-hover);}
.quiz-option:hover{border-color:var(--olive-600); background:var(--olive-100);}
.footer-col a:hover{color:var(--brass-400);}
.mimg-arrow:hover{background:rgba(0,0,0,.55); transform:translateY(-50%) scale(1.08);}
.mimg-zoom-btn:hover{background:rgba(0,0,0,.55);}
.lightbox-close:hover{background:rgba(255,255,255,.22);}
.lightbox-arrows button:hover{background:rgba(255,255,255,.2);}
.opt-pill:hover{border-color:var(--olive-600); background:var(--olive-100); color:var(--olive-600);}
.ci-remove:hover{background:var(--red-100); color:var(--red-500); opacity:1;}
.continue-shopping-link:hover{text-decoration:underline;}
.qty-btn-sm:hover{background:var(--page-bg);}
.ref-photo-slot:hover{border-color:var(--olive-600); background:var(--olive-100);}
.ref-photo-slot .rps-remove:hover{background:var(--red-500);}
.upload-box:hover{border-color:var(--olive-600); background:var(--olive-100);}
.staff-tabs::-webkit-scrollbar-thumb:hover{background:rgba(247,244,236,.4);}
::-webkit-scrollbar-thumb:hover{background:var(--olive-600);}
.staff-tab:hover{opacity:1; color:var(--olive-400); border-color:var(--olive-400);}
.stat-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-soft-hover);}
.attention-item:hover{border-color:var(--brass-500); transform:translateY(-2px); box-shadow:var(--shadow-soft-hover);}
.chart-donut-svg circle.donut-seg:hover{filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)) brightness(1.08);}
.modern-bar:hover{filter:brightness(1.1); transform:translateY(-2px);}
.data-table tr:hover td{background:var(--page-bg);}
.action-chip:hover{border-color:var(--olive-600); color:var(--olive-600); background:var(--olive-100);}
.action-chip.danger:hover{background:var(--red-100); border-color:var(--red-500);}
.gsr-item:hover{background:var(--page-bg);}
.btn-sm:hover{background:var(--olive-500);}
.pos-pcard:hover{border-color:var(--olive-600); transform:translateY(-2px);}
.qty-btn:hover{background:rgba(247,244,236,.18);}
.qty-del:hover{background:var(--red-100); color:var(--red-500); opacity:1;}
.cust-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-soft-hover);}
.cust-tag-pill button:hover{opacity:1;}
.cust-tag-add:hover{border-color:var(--olive-600); color:var(--olive-600);}
.tag-popover-chips button:hover{border-color:var(--olive-600); color:var(--olive-600);}
.share-popover button:hover{background:var(--page-bg);}
.order-overflow-menu button:hover{background:var(--page-bg);}
.btn-sm.danger:hover{background:var(--red-100);}
.subtab:hover{color:var(--olive-600); border-color:var(--olive-600);}
.eye-btn:hover{background:var(--surface-tint); color:var(--olive-600);}
.cs-option:hover{background:rgba(247,244,236,.08);}
.cs-light .cs-option:hover{background:var(--surface-tint);}
.upload-link:hover{background:var(--olive-100);}
.modern-checkbox:hover .mc-box{border-color:var(--olive-600);}
.ann-del:hover{background:var(--red-100); color:var(--red-500);}
.ni-del:hover{background:var(--red-100); color:var(--red-500); opacity:1;}
[data-tip]:hover::after, [data-tip]:hover::before{ opacity:1; transform:translateX(-50%) translateY(0); }
[data-tip-below]:hover::after, [data-tip-below]:hover::before{ transform:translateX(-50%) translateY(0); }
.topnav [data-tip]:hover::after, .topnav [data-tip]:hover::before{ transform:translateX(-50%) translateY(0); }
.fab-stack [data-tip]:hover::after, .fab-stack [data-tip]:hover::before{ transform:translateX(0) translateY(0); }
.profile-chip:hover{background:rgba(247,244,236,.15);}
}


/* Touch equivalent of the hover states above: same visual feedback
   (color/lift/glow), triggered by the guaranteed-clearing .is-pressed
   class (see app.js) instead of touch's unreliable fake :hover. */
.card.is-pressed{transform:translateY(-4px);}
.card-shop.is-pressed{box-shadow:0 26px 50px -22px rgba(0,0,0,.28), 0 0 0 1px rgba(91,140,42,.3), 0 0 32px rgba(111,164,55,.35);}
.card-staff.is-pressed{box-shadow:0 26px 50px -22px rgba(0,0,0,.4), 0 0 0 1px rgba(201,162,39,.35), 0 0 32px rgba(201,162,39,.28);}
.card.is-pressed .card-cta svg{transform:translateX(4px);}
.signin-btn.is-pressed{background:var(--brass-400);}
.dev-credit.is-pressed .dev-name{color:var(--brass-500);}
.dev-credit.is-pressed .dev-name::after{width:100%;}
.scroll-top-btn.is-pressed{background:var(--olive-600); transform:translateY(-2px) scale(1.05);}
.wa-bubble.is-pressed{transform:scale(1.08);}
.social-icon-link.is-pressed{background:var(--olive-600); border-color:var(--olive-600); color:#fff; transform:translateY(-2px);}
.topnav nav a.is-pressed{opacity:1; border-color:var(--olive-400);}
.theme-switch button.is-pressed{color:rgba(247,244,236,.85);}
.icon-btn.is-pressed{background:rgba(247,244,236,.16);}
.search-clear.is-pressed{background:var(--red-100); color:var(--red-500);}
.fp-close.is-pressed{background:rgba(247,244,236,.2);}
.fp-cta.is-pressed{background:rgba(247,244,236,.1); border-color:rgba(247,244,236,.5);}
.fp-cta.is-pressed span{transform:translateX(3px);}
.btn-primary.is-pressed{background:var(--brass-400); transform:translateY(-2px);}
.btn-secondary.is-pressed{background:rgba(247,244,236,.08);}
.cal-nav.is-pressed{background:var(--olive-600); border-color:var(--olive-600); color:#fff;}
.cal-day:not(.empty).is-pressed{background:var(--olive-100); transform:scale(1.08);}
.cal-clear.is-pressed{background:var(--red-100);}
.chip.is-pressed{background:var(--olive-600); color:#fff; border-color:var(--olive-600);}
.pcard.is-pressed{transform:translateY(-4px); box-shadow:var(--shadow-soft-hover);}
.wish-btn.is-pressed{background:#fff; transform:scale(1.08);}
.craft-step.is-pressed{transform:translateY(-4px); box-shadow:var(--shadow-soft-hover);}
.testi-arrow.is-pressed{background:rgba(247,244,236,.18);}
.blog-card.is-pressed{transform:translateY(-4px); box-shadow:var(--shadow-soft-hover);}
.quiz-option.is-pressed{border-color:var(--olive-600); background:var(--olive-100);}
.footer-col a.is-pressed{color:var(--brass-400);}
.mimg-arrow.is-pressed{background:rgba(0,0,0,.55); transform:translateY(-50%) scale(1.08);}
.mimg-zoom-btn.is-pressed{background:rgba(0,0,0,.55);}
.lightbox-close.is-pressed{background:rgba(255,255,255,.22);}
.lightbox-arrows button.is-pressed{background:rgba(255,255,255,.2);}
.opt-pill.is-pressed{border-color:var(--olive-600); background:var(--olive-100); color:var(--olive-600);}
.ci-remove.is-pressed{background:var(--red-100); color:var(--red-500); opacity:1;}
.continue-shopping-link.is-pressed{text-decoration:underline;}
.qty-btn-sm.is-pressed{background:var(--page-bg);}
.ref-photo-slot.is-pressed{border-color:var(--olive-600); background:var(--olive-100);}
.ref-photo-slot .rps-remove.is-pressed{background:var(--red-500);}
.upload-box.is-pressed{border-color:var(--olive-600); background:var(--olive-100);}
.staff-tabs::-webkit-scrollbar-thumb.is-pressed{background:rgba(247,244,236,.4);}
::-webkit-scrollbar-thumb.is-pressed{background:var(--olive-600);}
.staff-tab.is-pressed{opacity:1; color:var(--olive-400); border-color:var(--olive-400);}
.stat-card.is-pressed{transform:translateY(-3px); box-shadow:var(--shadow-soft-hover);}
.attention-item.is-pressed{border-color:var(--brass-500); transform:translateY(-2px); box-shadow:var(--shadow-soft-hover);}
.chart-donut-svg circle.donut-seg.is-pressed{filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)) brightness(1.08);}
.modern-bar.is-pressed{filter:brightness(1.1); transform:translateY(-2px);}
.data-table tr.is-pressed td{background:var(--page-bg);}
.action-chip.is-pressed{border-color:var(--olive-600); color:var(--olive-600); background:var(--olive-100);}
.action-chip.danger.is-pressed{background:var(--red-100); border-color:var(--red-500);}
.gsr-item.is-pressed{background:var(--page-bg);}
.btn-sm.is-pressed{background:var(--olive-500);}
.pos-pcard.is-pressed{border-color:var(--olive-600); transform:translateY(-2px);}
.qty-btn.is-pressed{background:rgba(247,244,236,.18);}
.qty-del.is-pressed{background:var(--red-100); color:var(--red-500); opacity:1;}
.cust-card.is-pressed{transform:translateY(-3px); box-shadow:var(--shadow-soft-hover);}
.cust-tag-pill button.is-pressed{opacity:1;}
.cust-tag-add.is-pressed{border-color:var(--olive-600); color:var(--olive-600);}
.tag-popover-chips button.is-pressed{border-color:var(--olive-600); color:var(--olive-600);}
.share-popover button.is-pressed{background:var(--page-bg);}
.order-overflow-menu button.is-pressed{background:var(--page-bg);}
.btn-sm.danger.is-pressed{background:var(--red-100);}
.subtab.is-pressed{color:var(--olive-600); border-color:var(--olive-600);}
.eye-btn.is-pressed{background:var(--surface-tint); color:var(--olive-600);}
.cs-option.is-pressed{background:rgba(247,244,236,.08);}
.cs-light .cs-option.is-pressed{background:var(--surface-tint);}
.upload-link.is-pressed{background:var(--olive-100);}
.modern-checkbox.is-pressed .mc-box{border-color:var(--olive-600);}
.ann-del.is-pressed{background:var(--red-100); color:var(--red-500);}
.ni-del.is-pressed{background:var(--red-100); color:var(--red-500); opacity:1;}
[data-tip].is-pressed::after, [data-tip].is-pressed::before{ opacity:1; transform:translateX(-50%) translateY(0); }
[data-tip-below].is-pressed::after, [data-tip-below].is-pressed::before{ transform:translateX(-50%) translateY(0); }
.topnav [data-tip].is-pressed::after, .topnav [data-tip].is-pressed::before{ transform:translateX(-50%) translateY(0); }
.fab-stack [data-tip].is-pressed::after, .fab-stack [data-tip].is-pressed::before{ transform:translateX(0) translateY(0); }
.profile-chip.is-pressed{background:rgba(247,244,236,.15);}

/* ============ GLASS PANELS (opt-in, CEO-controlled) ============
   Off by default (solid panels). Only takes effect when body has the
   .glass-panels class, toggled from Settings > Interface > Panel style.
   Scoped to page-level cards/panels only \u2014 modals, drawers, and dropdowns
   stay solid regardless, since a blurred background behind a floating
   popup fights with whatever's underneath it. */
:root{
  --glass-surface: rgba(255,255,255,.6);
  --glass-border: rgba(255,255,255,.5);
  --glass-blur: 18px;
}
body.theme-green{
  --glass-surface: rgba(22,36,26,.55);
  --glass-border: rgba(242,239,228,.12);
}
body.theme-black{
  --glass-surface: rgba(22,22,22,.55);
  --glass-border: rgba(255,255,255,.1);
}
body.glass-panels .panel, body.glass-panels .stat-card, body.glass-panels .pcard,
body.glass-panels .cust-card, body.glass-panels .order-card, body.glass-panels .pos-pcard,
body.glass-panels .payment-alert-card, body.glass-panels .attention-item,
body.glass-panels .form-card, body.glass-panels .craft-step, body.glass-panels .blog-card,
body.glass-panels .skeleton-card{
  background: var(--glass-surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-color: var(--glass-border);
}