/* ============================================================
   KARAMOJA PRIDE v5 — Sunset Palette
   Inspired by Theme images: deep orange, burnt sienna, ochre
   Full responsive: mobile → tablet → desktop → wide
============================================================ */
:root {
  /* Sunset palette from theme photos */
  --sunset:     #E8600A;   /* main accent – deep orange */
  --flame:      #C04000;   /* darker flame */
  --ochre:      #D4820A;   /* golden ochre */
  --amber:      #F0A830;   /* warm amber */
  --dusk:       #6B2A00;   /* dusk brown */
  --bg:         #FDF6ED;   /* warm cream */
  --cream:      #FFFFFF;
  --dark:       #1A0C04;
  --muted:      #6B5A48;
  --stone:      #5A4A38;
  --border:     rgba(232,96,10,.14);
  --border-md:  rgba(232,96,10,.28);
  --success:    #1A5C38;
  --error:      #8B0000;
  --info:       #1A3A6B;
  --warn-col:   #6B4A00;
  --ff-display: 'Playfair Display',Georgia,serif;
  --ff-body:    'DM Sans',sans-serif;
  --ff-brand:   'Oswald','DM Sans',sans-serif;
  --radius:     8px;
  --radius-lg:  14px;
  --radius-pill:100px;
  --header-h:   60px;
  --bnav-h:     64px;
  --ease:       cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
body{font-family:var(--ff-body);background:var(--bg);color:var(--dark);font-size:15px;line-height:1.65;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
button{font-family:var(--ff-body);cursor:pointer;border:none;background:none}
input,textarea,select{font-family:var(--ff-body);font-size:14px;color:var(--dark);background:#fff;border:1px solid var(--border-md);border-radius:var(--radius);padding:.65rem .9rem;width:100%;outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{border-color:var(--sunset);box-shadow:0 0 0 3px rgba(232,96,10,.1)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:rgba(232,96,10,.25);border-radius:2px}

/* ─── FLOATING HEADER ────────────────────────────────── */
.site-header{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);
  z-index:300;width:calc(100% - 24px);max-width:1100px;
  background:#fff;border:1px solid rgba(232,96,10,.15);
  border-radius:var(--radius-pill);height:54px;padding:0 1rem;
  display:flex;align-items:center;justify-content:space-between;
  transition:all .35s var(--ease);
  box-shadow:0 4px 24px rgba(232,96,10,.12),0 1px 4px rgba(0,0,0,.06);
}
/* Home: header is visible from the start (white pill floats over the hero);
   the .scrolled class just deepens the shadow once you start scrolling. */
.site-header--home{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:all}
.site-header--home.scrolled{box-shadow:0 6px 28px rgba(232,96,10,.18),0 2px 6px rgba(0,0,0,.10)}
body:not(.page-home) .site-header{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:all}
@media(min-width:900px){.site-header{top:14px;padding:0 1.5rem;height:58px;width:calc(100% - 48px)}}

/* Logo — bull mark + live wordmark (no background box, scales cleanly) */
.logo-link{display:flex;align-items:center;gap:9px;flex-shrink:0;text-decoration:none}
.logo-mark{height:38px;width:38px;object-fit:contain;flex-shrink:0;display:block;transition:transform .35s var(--ease)}
.logo-link:hover .logo-mark{transform:rotate(-6deg) scale(1.06)}
.logo-word{display:flex;flex-direction:column;line-height:1}
.logo-word b{font-family:var(--ff-brand);font-size:15px;font-weight:700;letter-spacing:.07em;color:var(--dark);text-transform:uppercase}
.logo-word span{font-family:var(--ff-brand);font-size:8px;font-weight:600;letter-spacing:.32em;color:var(--sunset);text-transform:uppercase;margin-top:2px}
/* On dark surfaces (footer/admin/auth) flip the wordmark colours */
.logo-word--light b{color:#F8F2E8}
.logo-word--light span{color:var(--amber)}
@media(max-width:400px){.logo-word b{font-size:13px}.logo-mark{height:34px;width:34px}}

/* Desktop nav */
.desktop-nav{display:none}
.header-actions{display:flex;align-items:center;gap:.6rem}
.icon-btn{display:flex;align-items:center;justify-content:center;color:var(--muted);transition:color .18s,transform .15s;position:relative;padding:6px;border-radius:50%}
.icon-btn:hover{color:var(--sunset);transform:scale(1.1)}
.icon-btn--active{color:var(--sunset)}
.cart-badge{position:absolute;top:-4px;right:-4px;background:var(--sunset);color:#fff;font-size:9px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;animation:popIn .3s var(--ease)}
.cart-badge--nav{position:absolute;top:-4px;right:calc(50% - 18px);background:var(--sunset);color:#fff;font-size:9px;font-weight:700;width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}

@media(min-width:900px){
  .desktop-nav{display:flex;align-items:center;gap:.1rem}
  .desktop-nav a{padding:.4rem .9rem;border-radius:100px;font-size:13px;font-weight:500;color:var(--stone);transition:all .18s;white-space:nowrap}
  .desktop-nav a:hover,.desktop-nav a.active{background:rgba(232,96,10,.1);color:var(--sunset)}
}

/* ─── PAGE LAYOUT ────────────────────────────────────── */
.main-wrap{max-width:100%;padding-top:calc(var(--header-h) + 4px);min-height:100vh;padding-bottom:calc(var(--bnav-h)+1.5rem);animation:pageFade .3s ease}
.page-home .main-wrap{padding-top:0}
.page-inner{max-width:1280px;margin:0 auto}
.section{padding:1.75rem 1.25rem}
@media(min-width:900px){.section{padding:2.5rem 2.5rem};.main-wrap{padding-bottom:0}}
@media(min-width:1200px){.section{padding:3rem 4rem}}
@keyframes pageFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* ─── BOTTOM NAV ─────────────────────────────────────── */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:300;background:#fff;border-top:1px solid rgba(232,96,10,.12);display:flex;height:var(--bnav-h)}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:9px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;transition:color .18s;position:relative}
.bnav-item svg{transition:transform .2s var(--ease)}
.bnav-item:hover svg,.bnav-item--active svg{transform:translateY(-2px)}
.bnav-item:hover,.bnav-item--active{color:var(--sunset)}
@media(min-width:900px){.bottom-nav{display:none}}

/* ─── FOOTER ─────────────────────────────────────────── */
.site-footer-bar{background:var(--dark);padding:1.5rem;margin-bottom:var(--bnav-h)}
@media(min-width:900px){.site-footer-bar{padding:2rem 4rem;margin-bottom:0;display:flex;align-items:center;justify-content:space-between}}
.footer-inner{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center}
.footer-brand{font-family:var(--ff-brand);font-size:.9rem;color:var(--amber);letter-spacing:.06em;text-transform:uppercase}
.footer-copy{font-size:11px;color:rgba(255,255,255,.35)}
.footer-link{font-size:11px;color:var(--amber)}
.footer-bnav-spacer{display:block;height:var(--bnav-h)}
@media(min-width:900px){.footer-bnav-spacer{display:none}}

/* ─── TOASTS ─────────────────────────────────────────── */
#toast-container{position:fixed;bottom:calc(var(--bnav-h)+12px);left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(90vw,340px)}
@media(min-width:900px){#toast-container{bottom:24px}}
.kp-toast{padding:.8rem 1.1rem;border-radius:var(--radius-lg);font-size:13px;font-weight:500;display:flex;align-items:center;gap:.65rem;box-shadow:0 6px 28px rgba(0,0,0,.25);animation:toastIn .35s var(--ease);pointer-events:auto;width:100%}
.kp-toast__icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kp-toast__text{flex:1;line-height:1.4}
.kp-toast__close{opacity:.65;cursor:pointer;padding:2px;flex-shrink:0;line-height:0}
.kp-toast--success{background:#0D2B1A;color:#A7F3C4}.kp-toast--success .kp-toast__icon{background:#1A5C38}
.kp-toast--error{background:#2B0D0D;color:#FFC5C5}.kp-toast--error .kp-toast__icon{background:#8B0000}
.kp-toast--info{background:#0D1A2B;color:#BAD4F7}.kp-toast--info .kp-toast__icon{background:#1A3A6B}
.kp-toast--warn{background:#2B1400;color:#FFD980}.kp-toast--warn .kp-toast__icon{background:var(--flame)}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.95)}}

/* ─── PWA INSTALL BAR ────────────────────────────────── */
#pwa-install-bar{position:fixed;bottom:var(--bnav-h);left:0;right:0;z-index:400;background:#fff;border-top:2px solid var(--sunset);padding:.85rem 1.25rem;display:none;align-items:center;gap:1rem;box-shadow:0 -4px 20px rgba(232,96,10,.15)}
#pwa-install-bar.visible{display:flex;animation:slideUpBar .3s var(--ease)}
@keyframes slideUpBar{from{transform:translateY(100%)}to{transform:translateY(0)}}
#pwa-install-bar img{height:38px;width:38px;border-radius:8px;flex-shrink:0}
.pwa-bar-text{flex:1;min-width:0}
.pwa-bar-title{font-weight:700;font-size:13px;color:var(--dark)}
.pwa-bar-sub{font-size:11px;color:var(--muted)}
@media(min-width:900px){#pwa-install-bar{bottom:0;max-width:480px;left:50%;transform:translateX(-50%);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-left:1px solid rgba(232,96,10,.15);border-right:1px solid rgba(232,96,10,.15)}}

/* ─── BUTTONS ────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:.72rem 1.5rem;border-radius:var(--radius);font-family:var(--ff-body);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .18s var(--ease);text-decoration:none;position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn:disabled,.btn[disabled]{opacity:.45;pointer-events:none}
/* Primary = sunset orange */
.btn--primary{background:var(--sunset);color:#fff;border:none;box-shadow:0 2px 14px rgba(232,96,10,.3)}
.btn--primary:hover{background:var(--flame);box-shadow:0 4px 22px rgba(232,96,10,.45);transform:translateY(-1px)}
/* Accent = darker flame (add to cart) */
.btn--accent{background:var(--sunset);color:#fff;border:none;box-shadow:0 2px 14px rgba(232,96,10,.3)}
.btn--accent:hover{background:var(--flame);box-shadow:0 4px 22px rgba(232,96,10,.45);transform:translateY(-1px)}
/* Black */
.btn--black{background:#111;color:#fff;border:none}
.btn--black:hover{background:#000;transform:translateY(-1px)}
.btn--outline{background:transparent;color:var(--sunset);border:1.5px solid rgba(232,96,10,.4)}
.btn--outline:hover{background:rgba(232,96,10,.06)}
.btn--outline-dark{background:transparent;color:rgba(255,255,255,.85);border:1.5px solid rgba(255,255,255,.3)}
.btn--outline-dark:hover{background:rgba(255,255,255,.1)}
.btn--danger{background:var(--error);color:#fff;border:none}
.btn--full{width:100%}.btn--sm{padding:.4rem .85rem;font-size:11px}.btn--lg{padding:.9rem 2rem;font-size:13px}
.btn.loading{pointer-events:none}
.btn.loading .btn-text{opacity:.3}
.btn.loading::before{content:'';position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn--outline.loading::before{border-color:rgba(232,96,10,.2);border-top-color:var(--sunset)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── FORMS ──────────────────────────────────────────── */
.form-group{margin-bottom:1.1rem}
.form-label{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--stone);margin-bottom:5px;text-transform:uppercase}
.form-error{color:var(--error);font-size:12px;margin-top:4px}
.form-hint{color:var(--muted);font-size:11px;margin-top:4px;line-height:1.5}
.form-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem}

/* ─── HERO ───────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;
  min-height:100vh;min-height:100svh;          /* fills the whole first screen */
  display:flex;flex-direction:column;justify-content:center;
  padding:7rem 1.5rem 5rem;
  background:#190800;                            /* base colour behind the photos */
}
@media(min-width:900px){ .hero{padding:7rem 4rem} }

/* Rotating cultural photos behind everything */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease;will-change:opacity}
.hero-bg-slide.active{opacity:1;animation:heroKen 9s ease-out both}
@keyframes heroKen{from{transform:scale(1.12)}to{transform:scale(1)}}

/* Brown gradient overlay layered ON TOP of the photos */
.hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(102deg, rgba(18,6,0,.95) 0%, rgba(20,7,0,.86) 32%, rgba(26,9,0,.6) 66%, rgba(42,15,0,.46) 100%),
  linear-gradient(to top, rgba(16,5,0,.9) 0%, rgba(16,5,0,.15) 42%, transparent 60%);}

.hero-glow{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.4;background:radial-gradient(circle,rgba(232,96,10,.4),transparent 65%);top:-22%;right:-12%;z-index:1;animation:floatGlow 14s ease-in-out infinite}
@keyframes floatGlow{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4%,4%) scale(1.08)}}
.hero-title{font-family:var(--ff-display);font-size:clamp(2.7rem,7vw,5.4rem);color:#fff;line-height:.95;font-weight:500;margin-bottom:1.25rem;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hero-title em{font-style:italic;color:var(--amber)}
.hero-body{color:rgba(255,255,255,.78);font-weight:300;font-size:15px;line-height:1.85;margin-bottom:2rem;max-width:440px;text-shadow:0 1px 16px rgba(0,0,0,.4)}
.hero-btns{display:flex;gap:.75rem;flex-wrap:wrap}
/* Bouncing scroll cue at the foot of the hero */
.hero-scroll{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(255,255,255,.45);font-size:9px;letter-spacing:.25em;text-transform:uppercase;pointer-events:none;z-index:2}
.hero-scroll svg{animation:scrollBob 1.8s var(--ease) infinite}
@keyframes scrollBob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}
@media(min-width:900px){.hero-scroll{left:4rem;transform:none;align-items:flex-start}}

/* Hero content + slideshow dots */
.hero-content{position:relative;z-index:2;max-width:560px}
.hero-dots{position:absolute;right:1.5rem;bottom:1.5rem;z-index:2;display:flex;gap:7px;margin:0}
.hero-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;transition:all .2s;border:none;padding:0}
.hero-dot:hover{background:rgba(255,255,255,.6)}
.hero-dot.active{background:var(--amber);width:22px;border-radius:4px}
@media(min-width:900px){.hero-content{max-width:600px}.hero-dots{right:4rem;bottom:1.8rem}}

/* ─── DIVIDER ────────────────────────────────────────── */
.kara-divider{display:flex;align-items:center;gap:.75rem;padding:.7rem 0}
.kara-divider::before,.kara-divider::after{content:'';flex:1;height:.5px;background:linear-gradient(to right,transparent,rgba(232,96,10,.25))}
.kara-divider::after{background:linear-gradient(to left,transparent,rgba(232,96,10,.25))}

/* ─── PRODUCT GRID ───────────────────────────────────── */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:1rem}
@media(min-width:600px){.product-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
@media(min-width:900px){.product-grid{grid-template-columns:repeat(4,1fr);gap:1.5rem}}
@media(min-width:1200px){.product-grid{grid-template-columns:repeat(5,1fr)}}

/* ─── PRODUCT CARD ───────────────────────────────────── */
.product-card{background:#fff;border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s}
.product-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(232,96,10,.16)}
.product-thumb{width:100%;aspect-ratio:1/1;position:relative;overflow:hidden;display:block;cursor:pointer;background:#FDF0E0}
.product-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.product-thumb .thumb-bg{transition:transform .5s var(--ease)}
.product-card:hover .product-thumb img,.product-card:hover .thumb-bg{transform:scale(1.07)}
.thumb-cat{position:absolute;bottom:8px;left:8px;font-family:var(--ff-display);font-size:13px;color:rgba(255,255,255,.85);font-style:italic;pointer-events:none;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.thumb-tag{position:absolute;top:8px;right:8px;background:var(--sunset);color:#fff;font-size:9px;padding:3px 8px;border-radius:3px;font-weight:700;letter-spacing:.08em}
.product-info{padding:.9rem}
.product-name{font-family:var(--ff-display);font-size:1rem;line-height:1.2;margin-bottom:2px;display:block;cursor:pointer;transition:color .15s}
.product-name:hover{color:var(--sunset)}
.product-artist{font-size:10px;color:var(--muted);margin-bottom:5px}
.product-footer{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.product-price{font-weight:700;font-size:12px;color:var(--sunset);letter-spacing:.01em}
.avail{font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.avail::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0}
.avail--out::before{background:var(--error)}.avail--out{color:var(--error)}
.avail--low::before{background:var(--ochre)}.avail--low{color:var(--ochre)}
.avail--ok::before{background:var(--success)}.avail--ok{color:var(--success)}

/* ─── STATUS ─────────────────────────────────────────── */
.status{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:3px;font-size:11px;font-weight:600}
.status::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
.status--pending{background:#FFF3E0;color:#7A3A00}.status--pending::before{background:#E87010}
.status--dispatched{background:#E0F0FF;color:#004A8B}.status--dispatched::before{background:#1A6BD4}
.status--delivered{background:#E0FFF0;color:#0A4A28}.status--delivered::before{background:#1A8A50}
.status--cancelled{background:#FFE0E0;color:#5C0000}.status--cancelled::before{background:var(--error)}
.status--reviewing{background:#E0F0FF;color:#004A8B}.status--reviewing::before{background:#1A6BD4}
.status--confirmed{background:#E0FFF0;color:#0A4A28}.status--confirmed::before{background:#1A8A50}
.status--declined{background:#FFE0E0;color:#5C0000}.status--declined::before{background:var(--error)}

/* ─── WISH / ADD ─────────────────────────────────────── */
.wish-btn{background:none;border:none;cursor:pointer;padding:4px;color:#ccc;line-height:0;transition:color .2s,transform .2s var(--ease)}
.wish-btn:hover,.wish-btn.wished{color:var(--sunset)}
.wish-btn.popping{animation:heartPop .4s var(--ease)}
@keyframes heartPop{0%{transform:scale(1)}40%{transform:scale(1.4)}70%{transform:scale(.9)}100%{transform:scale(1)}}
.add-btn{width:26px;height:26px;border-radius:5px;background:var(--sunset);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s}
.add-btn:hover:not(:disabled){transform:scale(1.1);box-shadow:0 2px 10px rgba(232,96,10,.4)}
.add-btn:disabled{background:rgba(0,0,0,.1);cursor:not-allowed}

/* ─── HEADINGS ───────────────────────────────────────── */
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1.25rem}
.section-title{font-family:var(--ff-display);font-size:clamp(1.5rem,3vw,2.4rem);font-weight:500}
.section-link{color:var(--sunset);font-size:12px;letter-spacing:.04em;font-weight:600}
.culture-band{background:var(--dark);padding:2.5rem 1.5rem}
@media(min-width:900px){.culture-band{padding:4rem 4rem}}
.culture-label{color:var(--amber);font-size:10px;letter-spacing:.22em;font-weight:700;margin-bottom:.5rem;text-transform:uppercase}
.culture-quote{font-family:var(--ff-display);font-size:clamp(1.3rem,3vw,2.4rem);color:#fff;font-weight:400;line-height:1.4;font-style:italic;margin-bottom:.75rem}
.culture-body{font-weight:300;font-size:13px;color:rgba(255,255,255,.45);line-height:1.85}

/* ─── CARDS / MISC ───────────────────────────────────── */
.info-card{background:#FFF8F2;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem 1.25rem;margin-bottom:1rem}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.info-item-label{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.08em;margin-bottom:3px;text-transform:uppercase}
.info-item-val{font-size:13px;color:var(--dark)}
.product-detail-img{width:100%;display:flex;flex-direction:column;gap:.6rem}
.pd-img-frame{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#FDF0E0}
.pd-img-frame img{width:100%;height:100%;object-fit:cover}
.pd-thumbs{padding:0 0 .25rem}
.product-detail-body{padding:1.5rem}
.pd-cat{font-size:10px;color:var(--sunset);letter-spacing:.15em;font-weight:700;margin-bottom:6px;text-transform:uppercase}
.pd-title{font-family:var(--ff-display);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:500;line-height:1.05;margin-bottom:4px}
.pd-artist{font-size:12px;color:var(--muted);margin-bottom:.75rem}
.pd-price{font-family:var(--ff-display);font-size:clamp(1.5rem,3vw,2.2rem);color:var(--sunset);font-weight:600}
.pd-desc{font-size:14px;line-height:1.85;color:var(--stone);margin:1rem 0}
@media(min-width:900px){.product-detail-layout{display:grid;grid-template-columns:1fr 1fr;min-height:70vh}.product-detail-img{height:100%}.pd-img-frame{aspect-ratio:unset;flex:1;min-height:0}.product-detail-body{padding:3rem;overflow-y:auto}}
.qty-picker{display:inline-flex;align-items:center;border:1.5px solid var(--border-md);border-radius:var(--radius);overflow:hidden}
.qty-btn{width:34px;height:34px;background:none;border:none;font-size:18px;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.qty-btn:hover{background:rgba(232,96,10,.08)}
.qty-val{width:34px;text-align:center;font-weight:700;font-size:14px}
.sticky-bar{position:fixed;bottom:var(--bnav-h);left:0;right:0;z-index:200;background:#fff;border-top:1px solid var(--border);padding:.75rem 1.5rem;display:flex;gap:.75rem;box-sizing:border-box}
@media(min-width:900px){.sticky-bar{position:sticky;bottom:0;border:none;padding:1.5rem 0 2rem;background:transparent;max-width:600px}}
.filter-bar{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:none;flex-wrap:wrap}
.filter-bar::-webkit-scrollbar{display:none}
.pill{padding:.35rem 1rem;border-radius:100px;white-space:nowrap;border:1.5px solid var(--border-md);background:transparent;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;color:var(--stone)}
.pill:hover{border-color:var(--sunset);color:var(--sunset)}
.pill--active{background:var(--sunset);color:#fff;border-color:var(--sunset)}
.search-wrap{position:relative;margin-bottom:.85rem}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search-wrap input{padding-left:2.4rem}

/* Cart */
.cart-item{display:flex;gap:.9rem;padding:.9rem 0;border-bottom:1px solid var(--border);align-items:flex-start;animation:slideIn .25s var(--ease)}
@keyframes slideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.cart-thumb{width:64px;height:64px;border-radius:var(--radius);flex-shrink:0;overflow:hidden;background:#FDF0E0}
.cart-thumb img{width:100%;height:100%;object-fit:cover}
.cart-info{flex:1;min-width:0}
.cart-name{font-family:var(--ff-display);font-size:1rem;line-height:1.2;margin-bottom:3px}
.cart-sub{font-size:11px;color:var(--muted)}
.cart-remove{color:#ccc;line-height:0;transition:color .15s,transform .15s;padding:4px}
.cart-remove:hover{color:var(--error);transform:scale(1.15)}
.order-summary{background:#FFF8F2;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem;margin:1rem 0}
.summary-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px}
.summary-row--total{border-top:1px solid var(--border-md);margin-top:.5rem;padding-top:.85rem;font-weight:700;font-size:15px}
.summary-label{color:var(--stone)}
.summary-val--price{color:var(--sunset);font-weight:700}

/* Alerts */
.alert{border-radius:var(--radius);padding:.85rem 1rem;margin-bottom:1rem;font-size:13px;line-height:1.65;display:flex;align-items:flex-start;gap:8px}
.alert svg{flex-shrink:0;margin-top:2px}
.alert--warn{background:#FFF8F0;border:1px solid rgba(232,96,10,.2);color:var(--flame)}
.alert--error{background:#FFF5F5;border:1px solid rgba(139,0,0,.2);color:var(--error)}
.alert--info{background:#F0F6FF;border:1px solid rgba(26,58,107,.2);color:var(--info)}
.alert--success{background:#F0FFF6;border:1px solid rgba(26,92,56,.2);color:var(--success)}

/* Auth */
.auth-wrap{max-width:420px;margin:0 auto;padding:2rem 1.5rem 6rem}
.auth-logo{display:flex;justify-content:center;margin-bottom:1.75rem}
.auth-logo img{height:90px;width:auto;border-radius:10px}
.auth-title{font-family:var(--ff-display);font-size:2.2rem;font-weight:500;text-align:center;margin-bottom:.25rem}
.auth-sub{font-size:13px;color:var(--muted);text-align:center;margin-bottom:1.75rem}
.auth-switch{text-align:center;margin-top:1.25rem;font-size:13px}
.auth-switch a{color:var(--sunset);font-weight:600}

/* Profile */
.avatar{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--sunset),var(--ochre));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;flex-shrink:0}
.menu-list{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.menu-item{width:100%;padding:.9rem 1rem;display:flex;align-items:center;gap:.75rem;background:none;border:none;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px;color:var(--dark);text-align:left;transition:background .15s;text-decoration:none}
.menu-item:last-child{border-bottom:none}
.menu-item:hover{background:rgba(232,96,10,.05)}
.menu-item--danger{color:var(--error)}

/* Chat */
.chat-list-item{display:flex;gap:.75rem;padding:.9rem;border-bottom:1px solid var(--border);cursor:pointer;align-items:center;transition:background .15s;border-radius:var(--radius)}
.chat-list-item:hover{background:rgba(232,96,10,.04)}
.chat-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--sunset),var(--ochre));color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.chat-preview{flex:1;min-width:0}
.chat-name{font-size:13px;font-weight:600;margin-bottom:2px}
.chat-msg-preview{font-size:11px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chat-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.chat-time{font-size:10px;color:var(--muted)}
.unread-badge{background:var(--sunset);color:#fff;border-radius:50%;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;padding:0 3px}
.chat-thread{display:flex;flex-direction:column;gap:.65rem;padding:1rem 1.25rem;overflow-y:auto}
.msg-bubble-wrap{display:flex;flex-direction:column}
.msg-bubble-wrap--admin{align-items:flex-end}
.msg-bubble{max-width:78%;padding:.6rem .95rem;border-radius:12px;font-size:13px;line-height:1.55;animation:bubbleIn .25s var(--ease)}
@keyframes bubbleIn{from{opacity:0;transform:scale(.9) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}
.msg-bubble--user{background:#FFF8F2;border:1px solid var(--border);color:var(--dark);border-bottom-left-radius:3px}
.msg-bubble--admin{background:var(--sunset);color:#fff;border-bottom-right-radius:3px}
.msg-time{font-size:9px;opacity:.55;margin-top:3px;text-align:right}
.msg-sender{font-size:10px;color:var(--muted);margin-bottom:3px;padding:0 2px;font-weight:600}
.chat-input-wrap{display:flex;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--border);background:#fff}
.chat-input-wrap input{flex:1;padding:.5rem .75rem;font-size:13px}
.send-btn{width:40px;height:40px;flex-shrink:0;border-radius:var(--radius);background:var(--sunset);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.send-btn:hover{background:var(--flame);transform:scale(1.06)}
.wa-btn{background:#25D366;color:#fff;border:none;border-radius:var(--radius);padding:.6rem 1rem;font-family:var(--ff-body);font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:all .18s;text-decoration:none;letter-spacing:.03em}
.wa-btn:hover{background:#1ebe5d;transform:translateY(-1px);box-shadow:0 4px 14px rgba(37,211,102,.35)}

/* Payment modal */
.modal-overlay{position:fixed;inset:0;background:rgba(26,8,0,.6);z-index:500;display:flex;align-items:flex-end;justify-content:center;animation:fadeBg .2s}
@media(min-width:600px){.modal-overlay{align-items:center}}
@keyframes fadeBg{from{opacity:0}to{opacity:1}}
.modal-sheet{background:#fff;border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;max-width:480px;max-height:92vh;overflow-y:auto;animation:slideUp .3s var(--ease)}
@media(min-width:600px){.modal-sheet{border-radius:var(--radius-lg)}}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-header{padding:1.25rem 1.5rem 1rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal-title{font-family:var(--ff-display);font-size:1.3rem;font-weight:500}
.modal-body{padding:1.5rem}
.modal-close{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;line-height:0}
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.25rem}
.pay-option{border:1.5px solid var(--border-md);border-radius:var(--radius-lg);padding:1rem;text-align:center;cursor:pointer;transition:all .18s;background:#FFF8F2}
.pay-option:hover,.pay-option.selected{border-color:var(--sunset);background:rgba(232,96,10,.05)}
.pay-option.selected{box-shadow:0 0 0 3px rgba(232,96,10,.15)}
.pay-logo{font-size:.85rem;font-weight:700;margin-bottom:3px;color:var(--dark)}
.pay-label{font-size:10px;color:var(--muted)}
.pay-badge{color:#fff;border-radius:5px;padding:3px 8px;display:inline-block;margin-bottom:4px;font-size:.78rem;font-weight:700}
.pay-mtn{background:#000;color:#FFCC00}.pay-airtel{background:#E40E20}.pay-pesapal{background:#005B99}.pay-card{background:#1A1F71}
.pay-step{display:none}.pay-step.active{display:block;animation:fadeSlide .3s var(--ease)}
@keyframes fadeSlide{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
.pay-progress{display:flex;gap:4px;margin-bottom:1.25rem}
.pay-dot{flex:1;height:3px;border-radius:2px;background:rgba(232,96,10,.15);transition:background .3s}
.pay-dot.done{background:var(--sunset)}
.pay-spinner{width:48px;height:48px;border:3px solid rgba(232,96,10,.15);border-top-color:var(--sunset);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 1rem}

/* ═══════════════════════════════════════════
   ADMIN — FULL DESKTOP LAYOUT
   On laptop/desktop: sidebar + wider content
═══════════════════════════════════════════ */
.admin-header{background:var(--dark);padding:0 1.5rem;height:58px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:200}
.admin-logo-text{display:flex;align-items:center;gap:10px}
.admin-logo-img{height:34px;width:34px;object-fit:contain}
.admin-logo-main{font-family:var(--ff-brand);font-size:1rem;font-weight:700;color:var(--amber);letter-spacing:.06em;text-transform:uppercase}
.admin-tag{font-size:9px;color:rgba(255,255,255,.35);letter-spacing:.18em;border-left:1px solid rgba(255,255,255,.15);padding-left:.6rem}

/* Mobile: horizontal tabs */
.admin-layout{display:block}
.admin-nav{display:flex;background:var(--dark);border-bottom:.5px solid rgba(255,255,255,.08);overflow-x:auto;scrollbar-width:none}
.admin-nav::-webkit-scrollbar{display:none}
.admin-tab{flex:1;min-width:68px;padding:.8rem .4rem;display:flex;flex-direction:column;align-items:center;gap:3px;color:rgba(255,255,255,.35);font-size:8px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;transition:color .15s;text-decoration:none;position:relative}
.admin-tab:hover,.admin-tab--active{color:var(--amber)}
.admin-tab--active::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;background:var(--amber);border-radius:2px 2px 0 0}
.admin-body{padding:1.25rem;max-width:100%}

/* Tablet 768px+ : slightly wider body */
@media(min-width:768px){
  .admin-body{padding:1.5rem 2rem}
  .admin-tab{font-size:10px;min-width:80px}
}

/* Desktop 1024px+ : sidebar layout */
@media(min-width:1024px){
  .admin-layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 58px)}
  .admin-nav{flex-direction:column;border-bottom:none;border-right:.5px solid rgba(255,255,255,.08);overflow-y:auto;overflow-x:hidden;position:sticky;top:58px;height:calc(100vh - 58px)}
  .admin-tab{flex-direction:row;justify-content:flex-start;padding:.8rem 1.5rem;font-size:13px;min-width:unset;text-align:left;gap:10px;letter-spacing:.02em;text-transform:none}
  .admin-tab--active::after{top:0;bottom:0;right:0;left:unset;width:2px;height:unset;border-radius:0}
  .admin-body{padding:2rem 2.5rem;max-width:1100px;margin:0 auto}
}

/* Wide desktop 1440px+ */
@media(min-width:1440px){
  .admin-layout{grid-template-columns:240px 1fr}
  .admin-body{padding:2.5rem 4rem;max-width:1200px}
}

/* Stats grid */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem;margin-bottom:1.5rem}
@media(min-width:600px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem}
.stat-label{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.4rem}
.stat-val{font-family:var(--ff-display);font-size:1.6rem;font-weight:500;line-height:1;margin-bottom:3px}
.stat-sub{font-size:10px;color:var(--muted)}
.chart-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem;margin-bottom:.85rem}
.chart-title{font-size:11px;font-weight:700;color:var(--stone);letter-spacing:.07em;text-transform:uppercase;margin-bottom:.85rem}
.chart-bars{display:flex;align-items:flex-end;gap:6px;height:100px}
.chart-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.chart-bar{width:100%;background:linear-gradient(to top,var(--flame),var(--amber));border-radius:3px 3px 0 0;opacity:.85;min-height:4px;transition:height .6s var(--ease)}
.chart-bar-label{font-size:9px;color:var(--muted);white-space:nowrap}

/* Admin tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;padding:.6rem .85rem;border-bottom:1px solid var(--border);white-space:nowrap;background:#FFF8F2}
td{padding:.75rem .85rem;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(232,96,10,.03)}
.notif-dot{position:absolute;top:6px;right:calc(50% - 16px);width:8px;height:8px;background:var(--sunset);border-radius:50%;display:block}
@media(min-width:1024px){.notif-dot{top:50%;right:10px;margin-top:-4px}}

/* Misc */
.empty-state{text-align:center;padding:4rem 2rem}
.empty-icon{opacity:.12;margin:0 auto 1.25rem}
.empty-title{font-family:var(--ff-display);font-size:1.6rem;margin-bottom:.5rem}
.empty-body{font-size:13px;color:var(--muted);margin-bottom:1.5rem}
.back-bar{display:flex;align-items:center;gap:6px;padding:.75rem 1.25rem;border-bottom:1px solid var(--border);font-size:13px;color:var(--muted);cursor:pointer;text-decoration:none;width:100%;transition:color .15s}
.back-bar:hover{color:var(--sunset)}
.success-icon{width:68px;height:68px;border-radius:50%;background:var(--success);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;animation:successPop .5s var(--ease)}
@keyframes successPop{from{transform:scale(0);opacity:0}60%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}
.skeleton{background:linear-gradient(90deg,#FDF0E0 25%,#F5D9C0 50%,#FDF0E0 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--radius)}
@keyframes shimmer{to{background-position:-200% 0}}

/* ════════════════════════════════════════════════════════
   v6 ADDITIONS — loader · motion · sticky bg · FA · admin
   (responsive-first; all effects degrade on small screens)
════════════════════════════════════════════════════════ */

/* ── FIRST-LOAD PRELOADER ─────────────────────────────── */
#kp-loader{position:fixed;inset:0;z-index:9999;background:radial-gradient(900px 600px at 50% 30%,#3A1200,#190800 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;transition:opacity .6s var(--ease),visibility .6s}
#kp-loader.done{opacity:0;visibility:hidden}
.kp-loader-mark{width:96px;height:96px;object-fit:contain;animation:loaderPulse 1.6s var(--ease) infinite}
@keyframes loaderPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(240,168,48,0))}50%{transform:scale(1.07);filter:drop-shadow(0 6px 22px rgba(240,168,48,.45))}}
.kp-loader-word{font-family:var(--ff-brand);font-size:14px;letter-spacing:.42em;color:var(--amber);text-transform:uppercase;opacity:.9}
.kp-loader-track{width:140px;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.kp-loader-track i{display:block;height:100%;width:40%;border-radius:3px;background:linear-gradient(90deg,var(--flame),var(--amber));animation:loaderBar 1.1s var(--ease) infinite}
@keyframes loaderBar{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

/* ── STICKY AMBIENT BACKGROUND (scrolls under content) ─── */
.ambient-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ambient-bg::before,.ambient-bg::after{content:'';position:absolute;border-radius:50%;filter:blur(90px)}
.ambient-bg::before{width:55vmax;height:55vmax;top:-15vmax;right:-10vmax;background:radial-gradient(circle,rgba(232,96,10,.10),transparent 60%)}
.ambient-bg::after{width:50vmax;height:50vmax;bottom:-18vmax;left:-12vmax;background:radial-gradient(circle,rgba(240,168,48,.09),transparent 60%)}

/* ── SCROLL-REVEAL (IntersectionObserver toggles .in) ──── */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);will-change:opacity,transform}
[data-reveal="left"]{transform:translateX(-30px)}
[data-reveal="right"]{transform:translateX(30px)}
[data-reveal="zoom"]{transform:scale(.94)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
[data-reveal-delay="5"]{transition-delay:.40s}

/* Parallax drift for layered elements (JS sets --py) */
[data-parallax]{transform:translateY(var(--py,0))}

/* Scroll progress bar pinned to the very top */
#kp-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:600;background:linear-gradient(90deg,var(--flame),var(--amber));box-shadow:0 0 10px rgba(240,168,48,.5);transition:width .1s linear}

/* Sticky section heading underline reveal */
.section-title{position:relative}

/* ── FONT AWESOME helpers (replaces emoji "coloured logos") ── */
.fa-chip{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(232,96,10,.10);color:var(--sunset);font-size:15px;flex-shrink:0}
.fa-chip--lg{width:46px;height:46px;font-size:19px}
.fa-chip--light{background:rgba(255,255,255,.08);color:var(--amber)}
.trust-row{display:flex;flex-wrap:wrap;gap:1rem 1.75rem;margin-top:1.75rem}
.trust-item{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.6);font-size:12.5px;font-weight:500}
.trust-item i{color:var(--amber);font-size:14px}
.promo-strip{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.promo-inner{max-width:960px;margin:0 auto;padding:1.15rem 1.25rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem .5rem}
@media(min-width:680px){.promo-inner{grid-template-columns:repeat(4,1fr)}}
.promo-cell{display:flex;align-items:center;gap:11px;text-align:left}
.promo-cell .promo-t{font-size:12.5px;font-weight:700;color:var(--dark);line-height:1.2}
.promo-cell .promo-s{font-size:10.5px;color:var(--muted);line-height:1.2;margin-top:2px}

/* ════════════════════════════════════════════════════════
   ADMIN DASHBOARD — proper multi-column desktop layout
   (fixes the "squeezed like a phone" problem on laptops)
════════════════════════════════════════════════════════ */
.dash-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem;flex-wrap:wrap;gap:.75rem}
.dash-title{font-family:var(--ff-display);font-size:1.9rem;font-weight:500;line-height:1}
.dash-date{font-size:11px;color:var(--muted);margin-top:3px}

/* Two-column shell: charts/orders on the left, side rail on the right */
.dash-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:1024px){.dash-grid{grid-template-columns:1.7fr 1fr;align-items:start}}
.dash-col{display:grid;gap:1rem;min-width:0}

/* Quick-link tiles */
.dash-links{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1rem}
@media(min-width:1024px){.dash-links{grid-template-columns:repeat(2,1fr)}}

/* Stat cards: never crush below readable size */
.stat-val{word-break:break-word}
@media(min-width:1024px){
  .stat-card{padding:1.15rem 1.25rem}
  .stat-val{font-size:1.8rem}
}

/* Make the weekly chart breathe on desktop */
@media(min-width:1024px){.chart-bars{height:140px}}

/* Tables: comfortable on desktop, scrollable on mobile */
@media(min-width:1024px){
  .admin-body table{font-size:13.5px}
  .admin-body th,.admin-body td{padding:.7rem 1rem}
}

/* ── GENERAL MOBILE POLISH ────────────────────────────── */
@media(max-width:520px){
  .info-grid{grid-template-columns:1fr}
  .pay-grid{grid-template-columns:1fr}
  .section-head{flex-wrap:wrap;gap:.35rem}
  .hero-btns .btn{flex:1 1 auto;justify-content:center}
}
/* Tap targets comfortable on touch */
@media(hover:none){
  .icon-btn{padding:8px}
  .bnav-item{padding-top:6px;padding-bottom:6px}
}

/* Buttons get a soft sheen sweep on hover (desktop only) */
@media(hover:hover){
  .btn--primary::after,.btn--accent::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);transition:left .6s var(--ease)}
  .btn--primary:hover::after,.btn--accent:hover::after{left:140%}
}

/* Smooth anchored scrolling offset for the floating header */
:target{scroll-margin-top:90px}

/* ── REDUCED MOTION: respect the OS setting ───────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .hero{background-attachment:scroll}
  #kp-loader{display:none}
}

/* ── PAGE TRANSITION (fade between pages) ─────────────────
   IMPORTANT: opacity only — never put a transform on <body>,
   or it becomes the containing block for the fixed header and
   the navbar stops floating on scroll. */
body.kp-fade-in{animation:kpPageIn .45s var(--ease) both}
@keyframes kpPageIn{from{opacity:0}to{opacity:1}}
body.kp-fade-out{opacity:0;transition:opacity .23s var(--ease)}
@media(prefers-reduced-motion:reduce){body.kp-fade-in,body.kp-fade-out{animation:none!important;opacity:1!important;transition:none!important}}

/* ============================================================
   ADDITIONS — order statuses and the staff strip
   ============================================================ */

/* Order statuses used by the payment flow */
.status--awaiting_payment{background:#FFF3E0;color:#7A3A00}
.status--awaiting_payment::before{background:#E87010}
.status--payment_review{background:#FFF8E0;color:#6B4A00}
.status--payment_review::before{background:#F0A830}

/* Thin bar shown to signed-in staff on the storefront, so they always
   have a way back to the dashboard without a visible admin link. */
.staff-strip{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;
  background:#190800;color:rgba(255,255,255,.65);font-size:11px;padding:7px 1rem;
  position:relative;z-index:401}
.staff-strip i{color:var(--amber);margin-right:4px}
.staff-strip a{color:var(--amber);font-weight:600;text-decoration:none}
.staff-strip a:hover{text-decoration:underline}