/* ==========================================================================
WhizHive — storefront + admin stylesheet
Fonts (add to ):
========================================================================== */
:root{
--ink:#1a1613;
--ink-2:#4c443d;
--ink-3:#6e655f; /* brand "Stone" */
--line:#e3ddd4;
--line-2:#cfc7bc;
--paper:#f7f4ef;
--surface:#ffffff;
--surface-2:#fdfbf8;
--sk:#e9e3da; /* skeleton fill — reads as "not here yet" on both paper and white */
--accent:#c4432a;
--accent-dark:#9f3320;
--accent-ink:#7d2716;
--accent-light:#e8694a; /* brand "Ember light" — the accent on dark surfaces */
--honey:#e8a317; /* brand "Honey" — fills and rules only, never text */
--accent-tint:#fbeee9;
--ok:#1d6a49;
--ok-tint:#e7f2ec;
--warn:#8a5a00;
--warn-tint:#fbf1dd;
--danger:#a3231a;
--danger-tint:#fbeae8;
--info:#1f5675;
--info-tint:#e8f0f5;
--r:4px;
--r-lg:8px;
--shadow:0 1px 2px rgba(26,22,19,.06), 0 8px 24px -16px rgba(26,22,19,.28);
--shadow-lift:0 2px 4px rgba(26,22,19,.08), 0 18px 36px -22px rgba(26,22,19,.4);
--head:"Familjen Grotesk", "Helvetica Neue", Helvetica, sans-serif;
--body:"IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--mono:"IBM Plex Mono", ui-monospace, monospace;
--tap:44px;
--gut:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--body);
font-size:16px;
line-height:1.5;
font-synthesis-weight:none;
-webkit-font-smoothing:antialiased;
text-wrap:pretty;
}
h1,h2,h3,h4{
font-family:var(--head);
font-weight:700;
letter-spacing:-.02em;
line-height:1.1;
margin:0 0 .5em;
text-wrap:balance;
}
h1{font-size:clamp(1.75rem,5vw,2.5rem)}
h2{font-size:clamp(1.3rem,3.4vw,1.75rem)}
h3{font-size:1.125rem;letter-spacing:-.01em}
p{margin:0 0 1em}
img{max-width:100%;display:block}
a{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--accent);text-decoration-thickness:2px}
:focus-visible{
outline:3px solid var(--accent);
outline-offset:2px;
border-radius:2px;
}
::selection{background:var(--accent);color:#fff}
/* --------------------------------------------------------------- layout -- */
.wrap{
width:100%;
max-width:1240px;
margin-inline:auto;
padding-inline:var(--gut);
}
@media (min-width:760px){ :root{--gut:24px} }
@media (min-width:1100px){ :root{--gut:32px} }
.section-head{
display:flex;
flex-wrap:wrap;
align-items:flex-end;
justify-content:space-between;
gap:8px 16px;
padding-block:28px 14px;
border-bottom:1px solid var(--line);
margin-bottom:20px;
}
.section-head h1,.section-head h2{margin:0}
.section-head .sub,.section-head p{margin:0;color:var(--ink-3);font-size:.9375rem}
.section-head a{font-size:.9375rem;font-weight:600;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:1px}
.sub{color:var(--ink-3)}
/* -------------------------------------------------------------- buttons -- */
.btn{
-webkit-appearance:none;
appearance:none;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:var(--tap);
padding:11px 20px;
border:1px solid var(--accent);
border-radius:var(--r);
background:var(--accent);
color:#fff;
font-family:var(--body);
font-size:.9375rem;
font-weight:600;
letter-spacing:.01em;
text-decoration:none;
cursor:pointer;
transition:background .14s ease, border-color .14s ease, transform .08s ease, box-shadow .14s ease;
}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn:disabled,.btn.disabled{
background:var(--line);
border-color:var(--line-2);
color:var(--ink-3);
cursor:not-allowed;
transform:none;
}
.btn[disabled]::after,.btn:disabled::after{content:"";}
.btn-outline{
background:transparent;
color:var(--ink);
border-color:var(--line-2);
}
.btn-outline:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-danger{background:var(--danger);border-color:var(--danger)}
.btn-danger:hover{background:#821a13;border-color:#821a13}
.btn-sm{min-height:36px;padding:6px 12px;font-size:.8125rem}
.btn-block{display:flex;width:100%}
/* --------------------------------------------------------------- forms --- */
.field-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field-group > label,
.field-row > label{
font-size:.75rem;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--ink-2);
}
.field-row{display:grid;gap:16px;margin-bottom:16px}
@media (min-width:620px){ .field-row{grid-template-columns:1fr 1fr} }
.field-row .field-group{margin-bottom:0}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=search],input[type=url],input[type=date],
input:not([type]),select,textarea{
width:100%;
min-height:var(--tap);
padding:10px 12px;
border:1px solid var(--line-2);
border-radius:var(--r);
background:var(--surface);
color:var(--ink);
font-family:var(--body);
font-size:1rem;
line-height:1.4;
}
textarea{min-height:110px;resize:vertical}
select{
-webkit-appearance:none;appearance:none;
padding-right:38px;
background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
background-position:calc(100% - 19px) 50%, calc(100% - 13px) 50%;
background-size:6px 6px, 6px 6px;
background-repeat:no-repeat;
}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input:not([type=radio]):not([type=checkbox]):focus,select:focus,textarea:focus{
outline:3px solid var(--accent);
outline-offset:1px;
border-color:var(--accent);
}
/* Radios and checkboxes: browsers draw their focus outline as a square box around the round control, so they
never get one on click. Keyboard users see the whole label (e.g. a payment option card) highlighted instead;
a control that isn't inside a label keeps a small keyboard-only ring. On/off switches (.toggle) have their own. */
input[type=radio]:focus,input[type=checkbox]:focus,
input[type=radio]:focus-visible,input[type=checkbox]:focus-visible{outline:none}
label:not(.toggle):has(> input[type=radio]:focus-visible),
label:not(.toggle):has(> input[type=checkbox]:focus-visible){outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r)}
input[type=radio]:not(label > input):focus-visible,
input[type=checkbox]:not(label > input):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[disabled],select[disabled],textarea[disabled]{background:var(--paper);color:var(--ink-3);cursor:not-allowed}
::placeholder{color:#a39a92}
fieldset{
margin:0 0 20px;
padding:18px 16px 4px;
border:1px solid var(--line);
border-radius:var(--r-lg);
background:var(--surface);
}
legend{
padding:0 8px;
margin-inline-start:-4px;
font-family:var(--head);
font-size:.8125rem;
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--accent-ink);
}
.hint{display:block;font-size:.8125rem;color:var(--ink-3);line-height:1.4}
.error-box,.flash{
display:flex;
align-items:flex-start;
gap:10px;
padding:12px 14px;
margin-bottom:16px;
border:1px solid var(--line-2);
border-radius:var(--r);
background:var(--surface);
font-size:.9375rem;
line-height:1.45;
}
.error-box::before,.flash::before{
font-family:var(--mono);
font-weight:600;
line-height:1.45;
flex:none;
}
.error-box{background:var(--danger-tint);border-color:#e6bdb8;color:#6f170f}
.error-box::before{content:"!";width:1.25em;text-align:center;color:var(--danger)}
.error-box ul{margin:0;padding-inline-start:18px}
.flash.success{background:var(--ok-tint);border-color:#bcd9c9;color:#134b33}
.flash.success::before{content:"\2713";color:var(--ok)}
.flash.error{background:var(--danger-tint);border-color:#e6bdb8;color:#6f170f}
.flash.error::before{content:"\00d7";color:var(--danger);font-size:1.1em}
/* --------------------------------------------------- badges and toggles -- */
.badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:3px 9px;
border:1px solid var(--line-2);
border-radius:999px;
background:var(--surface);
font-size:.75rem;
font-weight:600;
letter-spacing:.03em;
color:var(--ink-2);
white-space:nowrap;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.badge.on{background:var(--ok-tint);border-color:#bcd9c9;color:#134b33}
.badge.on::before{background:var(--ok)}
.badge.off{background:var(--paper);border-color:var(--line-2);color:var(--ink-3)}
.badge.off::before{background:none;width:6px;height:6px;border:1.5px solid var(--ink-3);border-radius:50%}
.toggle{
position:relative;
display:inline-flex;
align-items:center;
flex:none;
width:52px;
height:30px;
cursor:pointer;
}
.toggle input{
position:absolute;
inset:0;
width:100%;height:100%;
margin:0;
opacity:0;
cursor:pointer;
}
.slider{
position:absolute;
inset:0;
border-radius:999px;
background:var(--line-2);
transition:background .16s ease;
}
.slider::before{
content:"";
position:absolute;
top:3px;left:3px;
width:24px;height:24px;
border-radius:50%;
background:#fff;
box-shadow:0 1px 3px rgba(26,22,19,.3);
transition:transform .16s ease;
}
.toggle input:checked + .slider{background:var(--ok)}
.toggle input:checked + .slider::before{transform:translateX(22px)}
.toggle input:focus-visible + .slider{outline:3px solid var(--accent);outline-offset:2px}
/* -------------------------------------------------------- hex / marks --- */
.hex{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;height:34px;
flex:none;
background:var(--accent);
color:#fff;
font-family:var(--head);
font-size:1rem;
font-weight:700;
line-height:1;
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.ic{
display:inline-block;
width:20px;height:20px;
flex:none;
vertical-align:-.22em;
stroke:currentColor;
stroke-width:1.6;
stroke-linecap:round;
stroke-linejoin:round;
fill:none;
}
.hex-frame{
position:relative;
display:block;
aspect-ratio:1/1;
overflow:hidden;
background:
linear-gradient(180deg,var(--surface-2),#f2ede6);
border-bottom:1px solid var(--line);
}
.hex-frame img{
width:100%;height:100%;
object-fit:cover;
transition:transform .4s cubic-bezier(.2,.6,.2,1);
}
.hex-frame svg{
position:absolute;
inset:0;
margin:auto;
width:42%;height:42%;
stroke:var(--line-2);
stroke-width:1.2;
stroke-linecap:round;
stroke-linejoin:round;
fill:none;
color:var(--line-2);
}
.hex-frame:has(svg)::after{
content:"no photo";
position:absolute;
left:0;right:0;bottom:10px;
font-family:var(--mono);
font-size:.6875rem;
letter-spacing:.1em;
text-transform:uppercase;
text-align:center;
color:#a79e95;
}
/* -------------------------------------------------------------- header -- */
.announce-bar{
position:relative;
background:var(--ink);
color:#f4efe8;
font-size:.8125rem;
letter-spacing:.01em;
}
.announce-bar > *{margin:0}
.announce-bar strong{color:#fff}
.announce-bar::after{
content:"";
position:absolute;
left:0;right:0;bottom:0;
height:2px;
background:var(--accent);
}
.announce-bar .wrap,
.announce-bar > div{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
min-height:38px;
padding:8px 48px;
text-align:center;
}
.dismiss{
position:absolute;
top:50%;right:8px;
transform:translateY(-50%);
display:inline-flex;
align-items:center;
justify-content:center;
width:var(--tap);height:var(--tap);
padding:0;
border:0;
background:none;
color:#cdc4b9;
font-size:1.25rem;
line-height:1;
cursor:pointer;
border-radius:var(--r);
}
.dismiss:hover{color:#fff;background:rgba(255,255,255,.1)}
.site-header{
position:sticky;
top:0;
z-index:40;
background:var(--surface);
border-bottom:1px solid var(--line);
}
.header-inner{
display:flex;
align-items:center;
gap:12px;
min-height:62px;
}
.brand{
display:inline-flex;
align-items:center;
gap:9px;
margin-right:auto;
font-family:var(--head);
font-size:1.1875rem;
font-weight:700;
letter-spacing:-.02em;
color:var(--ink);
text-decoration:none;
white-space:nowrap;
}
.brand:hover{color:var(--ink);text-decoration:none}
.brand:hover .hex{background:var(--accent-dark)}
.main-nav{
display:flex;
align-items:center;
gap:2px;
min-width:0;
overflow-x:auto;
scrollbar-width:none;
}
.main-nav::-webkit-scrollbar{display:none}
.main-nav a{
display:inline-flex;
align-items:center;
flex:none;
white-space:nowrap;
min-height:var(--tap);
padding:0 11px;
border-radius:var(--r);
color:var(--ink-2);
font-size:.9375rem;
font-weight:500;
text-decoration:none;
}
.main-nav a:hover{background:var(--paper);color:var(--ink)}
.main-nav a.active{
color:var(--ink);
font-weight:600;
box-shadow:inset 0 -3px 0 var(--accent);
border-radius:var(--r) var(--r) 0 0;
}
.header-actions{display:flex;align-items:center;gap:4px}
.account-link{
display:inline-flex;
align-items:center;
gap:7px;
min-height:var(--tap);
padding:0 10px;
border-radius:var(--r);
color:var(--ink-2);
font-size:.9375rem;
font-weight:500;
text-decoration:none;
}
.account-link:hover{background:var(--paper);color:var(--ink);text-decoration:none}
.cart-btn{
position:relative;
display:inline-flex;
align-items:center;
gap:8px;
min-height:var(--tap);
padding:0 14px;
border:1px solid var(--line-2);
border-radius:var(--r);
background:var(--surface);
color:var(--ink);
font-size:.9375rem;
font-weight:600;
text-decoration:none;
cursor:pointer;
}
.cart-btn:hover{background:var(--ink);border-color:var(--ink);color:#fff;text-decoration:none}
.cart-count{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:20px;height:20px;
padding:0 5px;
border-radius:999px;
background:var(--accent);
color:#fff;
font-family:var(--mono);
font-size:.6875rem;
font-weight:600;
line-height:1;
}
.cart-btn:hover .cart-count{background:#fff;color:var(--accent-ink)}
.menu-toggle{
display:none;
align-items:center;
justify-content:center;
width:var(--tap);height:var(--tap);
padding:0;
border:1px solid var(--line-2);
border-radius:var(--r);
background:var(--surface);
color:var(--ink);
cursor:pointer;
}
.menu-toggle:hover{background:var(--paper)}
@media (max-width:860px){
.menu-toggle{display:inline-flex}
.main-nav{
order:5;
width:100%;
margin:0 calc(var(--gut) * -1);
padding:4px var(--gut) 8px;
overflow-x:auto;
gap:4px;
border-top:1px solid var(--line);
scrollbar-width:none;
}
.main-nav::-webkit-scrollbar{display:none}
.header-inner{flex-wrap:wrap;padding-top:0}
.account-link span{display:none}
.cart-btn span:first-of-type{display:none}
}
/* ------------------------------------------------------- announcements -- */
.popup-overlay{
position:fixed;
inset:0;
z-index:80;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(26,22,19,.55);
}
.popup-box{
position:relative;
width:100%;
max-width:400px;
padding:48px 26px 26px;
border-radius:var(--r-lg);
background:var(--surface);
box-shadow:var(--shadow-lift);
border-top:4px solid var(--accent);
text-align:center;
}
.popup-box h2,.popup-box h3{margin-top:0}
.popup-box p{color:var(--ink-2);font-size:.9375rem}
.popup-box .btn{margin-top:6px}
.popup-close{
position:absolute;
top:4px;right:4px;
display:inline-flex;
align-items:center;
justify-content:center;
width:var(--tap);height:var(--tap);
border:0;
background:none;
color:var(--ink-3);
font-size:1.375rem;
line-height:1;
cursor:pointer;
border-radius:var(--r);
}
.popup-close:hover{background:var(--paper);color:var(--ink)}
.notice-card{
display:flex;
gap:12px;
padding:14px 16px;
margin-bottom:20px;
border:1px solid #cfdde6;
border-left:3px solid var(--info);
border-radius:var(--r);
background:var(--info-tint);
color:#173f56;
font-size:.9375rem;
}
.notice-card h3,.notice-card strong{color:#123448}
.notice-card h3{font-size:.9375rem;margin-bottom:3px}
.notice-card p{margin:0}
.notice-card::before{
content:"i";
flex:none;
display:flex;
align-items:center;
justify-content:center;
width:20px;height:20px;
margin-top:1px;
border-radius:50%;
background:var(--info);
color:#fff;
font-family:var(--mono);
font-size:.75rem;
font-weight:600;
}
/* ---------------------------------------------------------------- hero -- */
.hero{
position:relative;
background:var(--ink);
color:#f4efe8;
border-bottom:2px solid var(--accent);
overflow:hidden;
}
/* slideshow: horizontal scroll-snap track — swipes on touch with no JS.
Optional JS only adds autoplay, arrows and dot syncing. */
.hero-slides{
display:flex;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
overscroll-behavior-x:contain;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.hero-slides::-webkit-scrollbar{display:none}
.hero-slide{
flex:0 0 100%;
min-width:100%;
scroll-snap-align:start;
display:flex;
align-items:center;
background:var(--ink);
color:#f4efe8;
padding-bottom:20px;
}
.hero-slide:nth-child(2n){background:var(--accent);color:#fff}
.hero-slide:nth-child(2n) .hero-inner p{color:#ffe6df}
.hero-slide:nth-child(2n) h1 em{color:#fff;box-shadow:inset 0 -.12em 0 rgba(255,255,255,.45)}
.hero-slide:nth-child(2n) .hero-actions .btn{background:#fff;border-color:#fff;color:var(--accent-ink)}
.hero-slide:nth-child(2n) .hero-actions .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.hero-slide:nth-child(3n){background:#efe8de;color:var(--ink)}
.hero-slide:nth-child(3n) .hero-inner h1{color:var(--ink)}
.hero-slide:nth-child(3n) .hero-inner p{color:var(--ink-2)}
.hero-slide:nth-child(3n) h1 em{color:var(--accent-ink);box-shadow:none}
.hero-slide:nth-child(3n) .hero-actions .btn-outline{border-color:var(--line-2);color:var(--ink)}
.hero-slide:nth-child(3n) .hero-actions .btn-outline:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.hero-slide:nth-child(3n) .f1,
.hero-slide:nth-child(3n) .f2,
.hero-slide:nth-child(3n) .f3{
background:rgba(255,255,255,.6);
border-color:var(--line-2);
color:var(--ink-2);
}
.hero-dots{
position:absolute;
left:0;right:0;bottom:12px;
z-index:3;
display:flex;
justify-content:center;
gap:2px;
width:fit-content;
margin-inline:auto;
padding:3px 6px;
border-radius:999px;
background:rgba(26,22,19,.42);
}
.hero-dot{
display:inline-flex;
align-items:center;
justify-content:center;
width:28px;height:22px;
padding:0;
border:0;
background:none;
cursor:pointer;
text-decoration:none;
}
.hero-dot::before{
content:"";
width:20px;height:3px;
border-radius:2px;
background:rgba(255,255,255,.5);
transition:background .15s ease;
}
.hero-dot:hover::before{background:rgba(255,255,255,.8)}
.hero-dot.active::before{background:#fff;width:26px}
.hero-arrow{
position:absolute;
top:50%;
z-index:3;
transform:translateY(-50%);
display:none;
align-items:center;
justify-content:center;
width:var(--tap);height:var(--tap);
padding:0;
border:1px solid rgba(255,255,255,.35);
border-radius:50%;
background:rgba(26,22,19,.45);
color:#fff;
cursor:pointer;
}
.hero-arrow:hover{background:var(--ink);border-color:var(--ink)}
.hero-arrow.prev{left:10px}
.hero-arrow.next{right:10px}
@media (min-width:820px){
.hero-arrow{display:inline-flex}
.hero-slide .hero-inner{padding-inline:62px}
}
.hero-inner{
display:grid;
gap:26px;
align-items:center;
padding-block:34px 30px;
}
@media (min-width:880px){
.hero-inner{grid-template-columns:1.05fr .95fr;gap:40px;padding-block:52px}
.hero-slide{min-height:340px}
}
.hero-inner h1{
color:inherit;
font-size:clamp(1.9rem,6.4vw,3.1rem);
letter-spacing:-.03em;
max-width:16ch;
}
.hero-inner h1 em{
font-style:normal;
color:var(--accent-light);
}
.hero-inner p{
max-width:46ch;
color:#cdc4ba;
font-size:1.0625rem;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-actions .btn-outline{
border-color:rgba(255,255,255,.35);
color:#fff;
background:transparent;
}
.hero-actions .btn-outline:hover{background:#fff;border-color:#fff;color:var(--ink)}
.hero-cluster{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}
.hero-cluster .f1,
.hero-cluster .f2,
.hero-cluster .f3,
.f1,.f2,.f3{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:18px;
min-height:104px;
padding:14px;
border:1px solid rgba(255,255,255,.16);
border-radius:var(--r);
background:rgba(255,255,255,.05);
color:#e8e1d8;
font-family:var(--mono);
font-size:.6875rem;
letter-spacing:.08em;
text-transform:uppercase;
}
.f1 svg,.f2 svg,.f3 svg{
width:26px;height:26px;
stroke:var(--accent-light);
stroke-width:1.5;
stroke-linecap:round;
stroke-linejoin:round;
fill:none;
}
.f2{background:rgba(196,67,42,.14);border-color:rgba(196,67,42,.45)}
.f2 svg{stroke:#f0b3a3}
@media (min-width:880px){
.f1{transform:translateY(10px)}
.f3{transform:translateY(-10px)}
}
/* ------------------------------------------------------- cats / chips --- */
.cat-strip{
background:var(--surface);
border-bottom:1px solid var(--line);
}
.cat-chips{
display:flex;
gap:8px;
padding-block:12px;
overflow-x:auto;
scrollbar-width:none;
}
.cat-chips::-webkit-scrollbar{display:none}
.chip{
display:inline-flex;
align-items:center;
min-height:38px;
padding:0 14px;
border:1px solid var(--line-2);
border-radius:999px;
background:var(--surface);
color:var(--ink-2);
font-size:.875rem;
font-weight:500;
white-space:nowrap;
text-decoration:none;
cursor:pointer;
}
.chip:hover{border-color:var(--ink);color:var(--ink);text-decoration:none}
.chip.active{
background:var(--ink);
border-color:var(--ink);
color:#fff;
font-weight:600;
}
.chip.active::before{content:"";width:5px;height:5px;margin-right:7px;border-radius:50%;background:var(--accent)}
/* ------------------------------------------------------------ listing -- */
.shop{padding-bottom:48px}
.product-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
@media (min-width:620px){ .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} }
@media (min-width:960px){ .product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} }
@media (min-width:1240px){ .product-grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
.card{
position:relative;
display:flex;
flex-direction:column;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
overflow:hidden;
transition:border-color .15s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.card:hover .hex-frame img{transform:scale(1.04)}
.card:focus-within{box-shadow:var(--shadow)}
.card > a{text-decoration:none;color:inherit;display:block}
.card h3,.card .tagline,.card .cat-tag,.card .price{padding-inline:12px}
.card h3{
margin:10px 0 2px;
font-family:var(--body);
font-size:.9375rem;
font-weight:600;
letter-spacing:0;
line-height:1.3;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--accent-ink);text-decoration:underline}
.cat-tag{
display:block;
margin-top:10px;
font-family:var(--mono);
font-size:.625rem;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--ink-3);
}
.card .cat-tag{margin-top:11px}
.card h3 + .cat-tag{margin-top:4px}
.tagline{
margin:0;
font-size:.8125rem;
line-height:1.4;
color:var(--ink-3);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.price{
font-family:var(--head);
font-size:1.125rem;
font-weight:700;
letter-spacing:-.01em;
color:var(--ink);
font-variant-numeric:tabular-nums;
}
.was{
margin-left:6px;
font-family:var(--body);
font-size:.8125rem;
font-weight:500;
color:var(--ink-3);
text-decoration:line-through;
}
.card-foot{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
flex-wrap:wrap;
margin-top:auto;
padding:10px 12px 12px;
}
.card-foot .price{font-size:1.0625rem}
.sale-badge{
position:absolute;
top:10px;left:10px;
z-index:2;
display:inline-flex;
align-items:center;
padding:4px 8px;
border-radius:var(--r);
background:var(--accent);
color:#fff;
font-family:var(--mono);
font-size:.6875rem;
font-weight:600;
letter-spacing:.06em;
text-transform:uppercase;
box-shadow:0 1px 6px rgba(26,22,19,.25);
}
.add-btn{
-webkit-appearance:none;appearance:none;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
min-height:38px;
padding:0 13px;
border:1px solid var(--ink);
border-radius:var(--r);
background:var(--ink);
color:#fff;
font-family:var(--body);
font-size:.8125rem;
font-weight:600;
cursor:pointer;
text-decoration:none;
transition:background .14s ease, border-color .14s ease;
}
.add-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;text-decoration:none}
.add-btn[disabled],.add-btn:disabled{
background:var(--paper);
border-color:var(--line-2);
color:var(--ink-3);
cursor:not-allowed;
}
.out-tag{
display:inline-flex;
align-items:center;
gap:6px;
padding:4px 9px;
border:1px solid var(--line-2);
border-radius:var(--r);
background:var(--paper);
color:var(--ink-2);
font-family:var(--mono);
font-size:.6875rem;
font-weight:600;
letter-spacing:.06em;
text-transform:uppercase;
}
.out-tag::before{
content:"";
width:8px;height:2px;
background:var(--ink-2);
}
.card:has(.out-tag) .hex-frame{filter:saturate(.35) opacity(.72)}
.empty-shop,.empty-state{
padding:52px 24px;
border:1px dashed var(--line-2);
border-radius:var(--r-lg);
background:var(--surface);
text-align:center;
color:var(--ink-3);
}
.empty-shop h2,.empty-state h2{color:var(--ink);margin-bottom:6px}
.empty-shop p,.empty-state p{margin:0 auto 18px;max-width:42ch}
.values{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px;
margin-block:8px 48px;
background:var(--line);
border:1px solid var(--line);
border-radius:var(--r-lg);
overflow:hidden;
}
@media (min-width:860px){ .values{grid-template-columns:repeat(4,minmax(0,1fr))} }
.value-item{
display:flex;
flex-direction:column;
gap:6px;
padding:18px 16px;
background:var(--surface);
}
.value-item svg,.value-item .ic{width:22px;height:22px;color:var(--accent);stroke:var(--accent)}
.value-item strong,.value-item h3{
font-family:var(--head);
font-size:.9375rem;
font-weight:700;
margin:0;
color:var(--ink);
}
.value-item p,.value-item span{margin:0;font-size:.8125rem;line-height:1.45;color:var(--ink-3)}
/* ------------------------------------------------------- product page -- */
.breadcrumb{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
padding-block:16px 4px;
font-size:.8125rem;
color:var(--ink-3);
}
.breadcrumb a{color:var(--ink-2);text-decoration:none}
.breadcrumb a:hover{color:var(--accent-ink);text-decoration:underline}
.breadcrumb a + a::before,
.breadcrumb span::before{content:"/";margin-right:6px;color:var(--line-2)}
.detail{padding-bottom:48px}
.detail-grid{
display:grid;
gap:24px;
align-items:start;
}
@media (min-width:880px){
.detail-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px}
}
.detail-img{
border:1px solid var(--line);
border-radius:var(--r-lg);
background:var(--surface);
overflow:hidden;
}
.detail-img .hex-frame{border-bottom:0;aspect-ratio:4/3}
.detail-img > img{width:100%;aspect-ratio:4/3;object-fit:cover}
.detail-thumbs{
display:flex;
gap:8px;
margin-top:10px;
overflow-x:auto;
scrollbar-width:none;
}
.detail-thumbs::-webkit-scrollbar{display:none}
.detail-thumbs img,
.detail-thumbs button,
.detail-thumbs a{
flex:none;
width:64px;height:64px;
padding:0;
border:1px solid var(--line-2);
border-radius:var(--r);
background:var(--surface);
object-fit:cover;
cursor:pointer;
overflow:hidden;
}
.detail-thumbs img:hover,.detail-thumbs button:hover{border-color:var(--ink)}
.detail-thumbs .active,
.detail-thumbs img.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.detail-info h1{font-size:clamp(1.5rem,4.4vw,2.125rem);margin-bottom:8px}
.detail-info .cat-tag{margin-bottom:8px;margin-top:0}
.detail-info .price{font-size:1.75rem;display:inline-block;margin-block:2px 6px}
.detail-info .was{font-size:1rem}
.detail-info .sale-badge{position:static;margin-left:8px;box-shadow:none;vertical-align:3px}
.desc{
padding-top:14px;
margin-top:14px;
border-top:1px solid var(--line);
color:var(--ink-2);
font-size:.9375rem;
line-height:1.6;
}
.bullets{
margin:0 0 18px;
padding:0;
list-style:none;
display:grid;
gap:7px;
}
.bullets li{
position:relative;
padding-left:20px;
font-size:.9375rem;
line-height:1.45;
color:var(--ink-2);
}
.bullets li::before{
content:"";
position:absolute;
left:0;top:.55em;
width:8px;height:2px;
background:var(--accent);
}
.qty-row{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
padding-block:16px;
}
.qty-row .btn{flex:1 1 180px}
.qty-stepper{
display:inline-flex;
align-items:center;
flex:none;
border:1px solid var(--line-2);
border-radius:var(--r);
background:var(--surface);
overflow:hidden;
}
.qty-stepper button{
width:var(--tap);height:var(--tap);
border:0;
background:var(--surface);
color:var(--ink);
font-family:var(--body);
font-size:1.125rem;
line-height:1;
cursor:pointer;
}
.qty-stepper button:hover{background:var(--paper);color:var(--accent-ink)}
.qty-stepper button:disabled{color:var(--line-2);cursor:not-allowed;background:var(--surface)}
.qty-stepper input,
.qty-stepper span{
width:48px;
min-height:var(--tap);
padding:0;
border:0;
border-inline:1px solid var(--line);
border-radius:0;
background:var(--surface);
text-align:center;
font-family:var(--mono);
font-size:.9375rem;
font-weight:600;
font-variant-numeric:tabular-nums;
display:inline-flex;
align-items:center;
justify-content:center;
}
.qty-stepper input:focus{outline-offset:-3px}
.stock-note{
display:inline-flex;
align-items:center;
gap:7px;
font-size:.875rem;
font-weight:600;
color:var(--ink-2);
}
.stock-note::before{
content:"";
width:8px;height:8px;
border-radius:50%;
background:var(--ink-3);
}
.stock-note.ok{color:#13543a}
.stock-note.ok::before{background:var(--ok)}
.stock-note.low{color:#7a4f00}
.stock-note.low::before{background:var(--warn);border-radius:1px;transform:rotate(45deg)}
.delivery-note{
display:grid;
gap:8px;
padding:14px 16px;
margin-top:16px;
border:1px solid var(--line);
border-radius:var(--r);
background:var(--surface-2);
font-size:.875rem;
color:var(--ink-2);
}
.delivery-note strong{color:var(--ink);font-weight:600}
.delivery-note > *{margin:0}
.delivery-note p{display:flex;gap:9px;align-items:flex-start}
.delivery-note p::before{
content:"";
flex:none;
width:6px;height:6px;
margin-top:.45em;
background:var(--accent);
transform:rotate(45deg);
}
/* --------------------------------------------------------------- cart --- */
.cart-page,.checkout,.auth-page{padding-bottom:52px}
.cart-layout,.checkout-layout{
display:grid;
gap:20px;
align-items:start;
}
@media (min-width:900px){
.cart-layout,.checkout-layout{grid-template-columns:minmax(0,1fr) 340px;gap:28px}
.summary{position:sticky;top:82px}
}
.cart-row{
display:grid;
grid-template-columns:88px minmax(0,1fr);
gap:14px;
padding:14px;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
margin-bottom:10px;
}
.cart-row .hex-frame{
width:88px;
border:1px solid var(--line);
border-radius:var(--r);
overflow:hidden;
}
.cart-row > img{width:88px;aspect-ratio:1;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}
.ci-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.ci-name{
font-size:.9375rem;
font-weight:600;
line-height:1.3;
color:var(--ink);
text-decoration:none;
}
.ci-name:hover{color:var(--accent-ink)}
.ci-cat{
font-family:var(--mono);
font-size:.625rem;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--ink-3);
}
.ci-controls{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
margin-top:8px;
}
.ci-price{
margin-left:auto;
font-family:var(--head);
font-size:1.0625rem;
font-weight:700;
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.remove{
display:inline-flex;
align-items:center;
min-height:36px;
padding:0 8px;
border:0;
background:none;
color:var(--ink-3);
font-size:.8125rem;
font-weight:500;
text-decoration:underline;
text-underline-offset:2px;
cursor:pointer;
border-radius:var(--r);
}
.remove:hover{color:var(--danger)}
.summary{
padding:18px;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--shadow);
}
.summary h2,.summary h3{font-size:1.0625rem;margin-bottom:12px}
.sum-line{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
padding-block:7px;
font-size:.9375rem;
color:var(--ink-2);
font-variant-numeric:tabular-nums;
}
.sum-line span:last-child{font-weight:600;color:var(--ink)}
.sum-line.discount{color:#13543a}
.sum-line.discount span:last-child{color:#13543a}
.sum-line.total{
margin-top:8px;
padding-top:14px;
border-top:1px solid var(--line);
font-family:var(--head);
font-size:1.25rem;
font-weight:700;
color:var(--ink);
}
.sum-line.total span:last-child{font-size:1.375rem}
.summary .btn{margin-top:14px}
.summary .hint{margin-top:10px;text-align:center}
/* ----------------------------------------------------------- checkout -- */
.promo-row{display:flex;gap:8px;margin-bottom:14px}
.promo-row input{flex:1;min-width:0}
.promo-row .btn,.promo-row button{flex:none}
.pay-option{
display:flex;
align-items:flex-start;
gap:12px;
padding:14px;
margin-bottom:10px;
border:1px solid var(--line-2);
border-radius:var(--r);
background:var(--surface);
cursor:pointer;
transition:border-color .14s ease, background .14s ease;
}
.pay-option:hover{border-color:var(--ink-3)}
.pay-option input[type=radio]{
flex:none;
width:20px;height:20px;
min-height:0;
margin:1px 0 0;
accent-color:var(--accent);
}
.pay-option strong{display:block;font-size:.9375rem;font-weight:600}
.pay-option .hint{margin-top:2px}
.pay-option:has(input:checked){
border-color:var(--accent);
background:var(--accent-tint);
box-shadow:inset 3px 0 0 var(--accent);
}
.pay-option:has(input:disabled){opacity:.55;cursor:not-allowed;background:var(--paper)}
.pay-option:has(input:disabled) strong{color:var(--ink-3)}
.confirm-note{
padding:12px 14px;
border:1px dashed var(--line-2);
border-radius:var(--r);
background:var(--surface-2);
font-size:.8125rem;
line-height:1.5;
color:var(--ink-2);
}
.success-box{
max-width:560px;
margin:40px auto;
padding:34px 26px;
border:1px solid #bcd9c9;
border-top:4px solid var(--ok);
border-radius:var(--r-lg);
background:var(--surface);
text-align:center;
box-shadow:var(--shadow);
}
.success-box::before{
content:"\2713";
display:flex;
align-items:center;
justify-content:center;
width:46px;height:46px;
margin:0 auto 14px;
border-radius:50%;
background:var(--ok-tint);
color:var(--ok);
font-size:1.375rem;
}
.success-box h1,.success-box h2{margin-bottom:8px}
.success-box p{color:var(--ink-2)}
.success-box strong{font-family:var(--mono);font-weight:600}
/* ------------------------------------------------------------ account -- */
.auth-page{
max-width:420px;
margin-inline:auto;
padding-top:32px;
}
.auth-page > form,
.auth-page .summary{
padding:22px;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--shadow);
}
.auth-switch{
margin-top:16px;
padding-top:14px;
border-top:1px solid var(--line);
text-align:center;
font-size:.875rem;
color:var(--ink-3);
}
.auth-switch a{font-weight:600}
.order-history-row{
padding:14px 16px;
margin-bottom:10px;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
}
.oh-top{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px 12px;
padding-bottom:10px;
margin-bottom:10px;
border-bottom:1px solid var(--line);
}
.oh-top strong{font-family:var(--mono);font-size:.875rem;font-weight:600}
.oh-top .status-pill{margin-left:auto}
.order-history-row .sum-line{padding-block:4px;font-size:.875rem}
.status-pill{
display:inline-flex;
align-items:center;
gap:7px;
padding:4px 11px;
border:1px solid;
border-radius:999px;
font-size:.75rem;
font-weight:600;
letter-spacing:.02em;
white-space:nowrap;
}
.status-pill::before{
content:"";
width:7px;height:7px;
flex:none;
border-radius:50%;
background:currentColor;
}
.status-Pending{background:var(--warn-tint);border-color:#e3cfa4;color:#6e4700}
.status-Pending::before{border-radius:1px;transform:rotate(45deg)}
.status-Confirmed{background:var(--info-tint);border-color:#c3d6e1;color:#17485f}
.status-Shipped{background:#eeeaf6;border-color:#d0c7e3;color:#463a63}
.status-Shipped::before{border-radius:1px;width:9px;height:5px}
.status-Delivered{background:var(--ok-tint);border-color:#bcd9c9;color:#13543a}
.status-Delivered::before{border-radius:0;width:8px;height:4px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;background:none;transform:rotate(-45deg) translate(1px,-1px)}
.status-Cancelled{background:var(--paper);border-color:var(--line-2);color:#5c534c;text-decoration:line-through}
.status-Cancelled::before{background:none;width:9px;height:9px;border-radius:0;background-image:linear-gradient(currentColor,currentColor);background-size:100% 1.5px;background-position:center;background-repeat:no-repeat;transform:rotate(-45deg)}
/* ------------------------------------------------------------- footer -- */
.site-footer{
margin-top:auto;
background:var(--ink);
color:#b8afa5;
font-size:.875rem;
}
.site-footer a{color:#e0d9d0;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:26px 20px;
padding-block:34px 28px;
}
@media (min-width:820px){ .footer-grid{grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:32px} }
.footer-grid h3,.footer-grid strong{
display:block;
margin-bottom:10px;
color:#fff;
font-family:var(--head);
font-size:.75rem;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
}
.footer-grid p{color:#a79e94;line-height:1.55;max-width:34ch}
.footer-grid .brand{color:#fff;margin-bottom:12px}
.flinks{
list-style:none;
margin:0;
padding:0;
display:grid;
gap:2px;
}
.flinks li{margin:0}
.flinks a{
display:inline-flex;
align-items:center;
min-height:36px;
}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.12);
}
.footer-bottom .wrap,
.footer-bottom > div{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:8px 16px;
padding-block:16px;
font-size:.8125rem;
color:#8d8479;
}
/* ================================================== admin (/nuclear/) == */
.admin-login{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
background:var(--ink);
}
.admin-login-box{
width:100%;
max-width:360px;
padding:28px 24px;
border-radius:var(--r-lg);
background:var(--surface);
border-top:4px solid var(--accent);
box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
.admin-login-box .brand{margin-bottom:18px}
.admin-login-box h1{font-size:1.25rem}
.admin-shell{
display:grid;
grid-template-columns:230px minmax(0,1fr);
min-height:100vh;
background:#f1eee9;
}
@media (max-width:900px){ .admin-shell{grid-template-columns:minmax(0,1fr)} }
.admin-sidebar{
display:flex;
flex-direction:column;
gap:18px;
padding:18px 14px;
background:var(--ink);
color:#b8afa5;
border-right:1px solid #000;
}
@media (max-width:900px){
.admin-sidebar{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px 16px}
}
.admin-sidebar .brand{color:#fff;font-size:1.0625rem;margin:0}
.admin-sidebar .brand::after{
content:"Admin";
font-family:var(--mono);
font-size:.5625rem;
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--accent);
border:1px solid rgba(196,67,42,.5);
border-radius:2px;
padding:2px 4px;
}
.admin-nav{display:grid;gap:2px}
@media (max-width:900px){ .admin-nav{display:flex;overflow-x:auto;scrollbar-width:none;flex:1} }
.admin-nav a{
display:flex;
align-items:center;
gap:9px;
min-height:var(--tap);
padding:0 11px;
border-radius:var(--r);
color:#b8afa5;
font-size:.9375rem;
font-weight:500;
text-decoration:none;
white-space:nowrap;
}
.admin-nav a:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.admin-nav a.active{background:var(--accent);color:#fff;font-weight:600}
.admin-nav a .ic{width:18px;height:18px;opacity:.85}
.foot-links{
margin-top:auto;
display:grid;
gap:2px;
padding-top:14px;
border-top:1px solid rgba(255,255,255,.12);
font-size:.8125rem;
}
@media (max-width:900px){ .foot-links{margin-top:0;border-top:0;padding-top:0;display:flex;gap:12px} }
.foot-links a{color:#8d8479;text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.foot-links a:hover{color:#fff}
.admin-main{min-width:0;padding:0 0 40px}
.admin-topbar{
position:sticky;
top:0;
z-index:20;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px 16px;
padding:14px 22px;
background:rgba(253,251,248,.95);
backdrop-filter:saturate(1.2);
border-bottom:1px solid var(--line);
}
.admin-topbar h1{margin:0;font-size:1.25rem}
.admin-topbar .btn,.admin-topbar .badge{margin-left:auto}
.admin-topbar .btn + .btn,
.admin-topbar .badge + .btn{margin-left:0}
.admin-main > .stat-cards,
.admin-main > .admin-panel,
.admin-main > .settings-section{margin-inline:22px}
@media (max-width:620px){
.admin-topbar{padding-inline:16px}
.admin-main > .stat-cards,
.admin-main > .admin-panel,
.admin-main > .settings-section{margin-inline:16px}
}
.stat-cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:12px;
margin-top:18px;
}
.stat-card{
padding:16px;
background:var(--surface);
border:1px solid var(--line);
border-left:3px solid var(--ink);
border-radius:var(--r);
}
.stat-card.warn{border-left-color:var(--warn);background:var(--warn-tint)}
.num{
display:block;
font-family:var(--head);
font-size:1.875rem;
font-weight:700;
letter-spacing:-.02em;
line-height:1.05;
font-variant-numeric:tabular-nums;
color:var(--ink);
}
.lbl{
display:block;
margin-top:4px;
font-family:var(--mono);
font-size:.6875rem;
font-weight:600;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--ink-3);
}
.stat-card.warn .lbl{color:#7a4f00}
.admin-panel{
margin-top:18px;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r);
overflow:hidden;
}
.admin-panel > h2,
.admin-panel > h3{
margin:0;
padding:14px 16px;
border-bottom:1px solid var(--line);
font-size:.9375rem;
letter-spacing:.01em;
background:var(--surface-2);
}
.admin-panel > p,
.admin-panel > form{padding:16px;margin:0}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.admin-table{
width:100%;
min-width:640px;
border-collapse:collapse;
font-size:.875rem;
}
.admin-table th{
position:sticky;
top:0;
padding:9px 14px;
background:var(--paper);
border-bottom:1px solid var(--line-2);
text-align:left;
font-family:var(--mono);
font-size:.6875rem;
font-weight:600;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--ink-2);
white-space:nowrap;
}
.admin-table td{
padding:10px 14px;
border-bottom:1px solid var(--line);
vertical-align:middle;
color:var(--ink-2);
}
.admin-table tbody tr:hover{background:var(--surface-2)}
.admin-table tbody tr:last-child td{border-bottom:0}
.admin-table td strong{color:var(--ink);font-weight:600}
.admin-table .num,
.admin-table td.num{font-family:var(--mono);font-size:.875rem;font-weight:600;text-align:right;display:table-cell}
.row-actions{display:flex;flex-wrap:wrap;gap:6px}
.thumb{
width:44px;height:44px;
object-fit:cover;
border:1px solid var(--line-2);
border-radius:var(--r);
background:var(--paper);
}
.status-select{
min-height:36px;
padding:5px 30px 5px 9px;
font-size:.8125rem;
font-weight:600;
background-position:calc(100% - 16px) 50%, calc(100% - 10px) 50%;
}
.empty-row{
padding:34px 16px;
text-align:center;
color:var(--ink-3);
font-size:.9375rem;
}
td.empty-row{border-bottom:0}
.cat-row,.cat-add-row,.pay-toggle-row,.image-upload-row{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
padding:11px 16px;
border-bottom:1px solid var(--line);
}
.cat-row strong,.pay-toggle-row strong{font-size:.9375rem;font-weight:600;color:var(--ink)}
.cat-row .row-actions,.pay-toggle-row .toggle{margin-left:auto}
.cat-row:hover{background:var(--surface-2)}
.cat-add-row{background:var(--surface-2);border-bottom:0}
.cat-add-row input{flex:1 1 180px;min-width:0}
.cat-add-row .btn{flex:none}
.settings-section{
margin-top:18px;
padding:0;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r);
overflow:hidden;
}
.settings-section > h2,
.settings-section > h3{
margin:0;
padding:14px 16px;
border-bottom:1px solid var(--line);
background:var(--surface-2);
font-size:.9375rem;
}
.settings-section > form,
.settings-section > p{padding:16px;margin:0}
.settings-section .field-group,
.settings-section .field-row{padding-inline:16px}
.settings-section > .field-group:first-of-type{padding-top:16px}
.pay-toggle-row .hint{flex:1 1 100%;order:3;margin:0}
.pay-toggle-row:last-child{border-bottom:0}
.image-upload-row{align-items:flex-start;background:var(--surface-2)}
.image-upload-row .thumb{width:64px;height:64px}
.image-upload-row input[type=file]{
flex:1 1 200px;
min-width:0;
padding:9px;
border:1px dashed var(--line-2);
border-radius:var(--r);
background:var(--surface);
font-size:.8125rem;
}
.security-note{
display:flex;
gap:10px;
padding:12px 14px;
margin:16px;
border:1px solid #e3cfa4;
border-left:3px solid var(--warn);
border-radius:var(--r);
background:var(--warn-tint);
font-size:.8125rem;
line-height:1.5;
color:#6e4700;
}
.security-note::before{
content:"!";
flex:none;
display:flex;
align-items:center;
justify-content:center;
width:18px;height:18px;
border-radius:50%;
background:var(--warn);
color:#fff;
font-family:var(--mono);
font-size:.6875rem;
font-weight:600;
}
.security-note strong{color:#5a3a00}
/* ------------------------------------------ WhizHive markup additions --- */
/* Rules for markup the mockup doesn't show: existing admin pages, product
photos, and a few spacing fixes. Keep the mockup rules above untouched. */
/* old token names still referenced by inline styles in a few pages */
:root{
--ink-soft:var(--ink-3);
--ink-faint:var(--ink-3);
--radius-sm:var(--r);
}
.promo-row .btn{margin-top:0}
.summary .badge{margin-top:12px}
.detail-info .sub{margin:0 0 10px}
.detail-thumbs button img{width:100%;height:100%;border:0;border-radius:0}
.checkout > .empty-state:first-child{margin-top:40px}
.account-page{max-width:760px;padding-bottom:52px}
.admin-main > .flash,
.admin-main > .error-box,
.admin-main > .hint,
.admin-main > .cat-chips{margin:18px 22px 0}
@media (max-width:620px){
.admin-main > .flash,
.admin-main > .error-box,
.admin-main > .hint,
.admin-main > .cat-chips{margin-inline:16px}
}
.admin-topbar .row-actions{margin-left:auto}
.admin-panel > :where(.field-group,.field-row,.flash,.error-box,.row-actions,.btn){margin:16px}
.admin-panel > input{display:block;width:calc(100% - 32px);margin:16px}
.admin-panel .settings-section{margin:0 0 16px}
tr.empty-row td{padding:34px 16px;text-align:center;color:var(--ink-3);border-bottom:0}
div.thumb,label.thumb{position:relative;display:block;flex:none;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.hex-frame{aspect-ratio:auto}
.thumb.hex-frame::after{content:none}
.image-upload-row .thumb input[type=checkbox]{position:absolute;top:4px;left:4px;margin:0}
.admin-login-box .security-note{margin:16px 0 0}
/* full-width banner slides (Nuclear > Hero slides): 1920x600, phone version 1080x1350.
The banner is never cropped (object-fit:contain). When another slide in the track
is taller, min-height:100% stretches the box and a blurred copy fills the extra space. */
.hero-slide.is-banner{padding:0;align-items:stretch;background:var(--ink)}
.hero-banner{position:relative;display:block;width:100%;min-height:100%;aspect-ratio:1920/600;max-height:600px;overflow:hidden}
.hero-banner picture{position:absolute;inset:0}
.hero-banner img{display:block;width:100%;height:100%;object-fit:contain}
.hero-banner-fill img{object-fit:cover;filter:blur(28px) brightness(.7);transform:scale(1.15)}
@media (max-width:759px){ .hero-banner.has-phone{aspect-ratio:1080/1350;max-height:none} }
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* brand logo (assets/brand — keep half the mark's height clear around it) */
.brand{flex-shrink:0}
.brand-logo{display:block;width:auto;max-width:none;height:28px}
.footer-grid .brand-logo{height:30px}
/* the logo is wider than one of the two footer columns on phones — give it the full row */
@media (max-width:819px){ .footer-grid > div:first-child{grid-column:1 / -1} }
.admin-sidebar .brand-logo{height:22px}
.admin-login-box .brand-logo{height:26px}
@media (max-width:420px){ .site-header .brand-logo{height:24px} }
.admin-sidebar .brand::after{color:var(--accent-light);border-color:rgba(232,105,74,.5)}
.brand-tag{
font-family:var(--mono);
font-size:.5625rem;
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--accent-ink);
border:1px solid rgba(196,67,42,.5);
border-radius:2px;
padding:2px 4px;
}
/* header "Shop" menu */
.nav-menu-btn{
display:inline-flex;align-items:center;gap:3px;flex:none;
min-height:var(--tap);padding:0 9px 0 11px;
border:0;border-radius:var(--r);background:none;
color:var(--ink-2);font-family:var(--body);font-size:.9375rem;font-weight:500;
white-space:nowrap;cursor:pointer;
}
.nav-menu-btn:hover,.nav-menu-btn[aria-expanded="true"]{background:var(--paper);color:var(--ink)}
.nav-menu-btn.active{color:var(--ink);font-weight:600;box-shadow:inset 0 -3px 0 var(--accent);border-radius:var(--r) var(--r) 0 0}
.nav-caret{width:16px;height:16px;transition:transform .15s ease}
.nav-menu-btn[aria-expanded="true"] .nav-caret{transform:rotate(180deg)}
.shop-menu{
position:absolute;top:100%;left:0;right:0;z-index:45;
background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lift);
}
.shop-menu-inner{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;padding-block:14px}
.shop-menu-inner a{
display:flex;flex-direction:column;gap:3px;padding:12px 14px;
border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
color:var(--ink);text-decoration:none;
}
.shop-menu-inner a:hover{border-color:var(--ink);background:var(--surface-2);color:var(--ink)}
.shop-menu-inner a.active{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.shop-menu-inner strong{font-family:var(--head);font-size:1rem;font-weight:700}
.shop-menu-inner span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.shop-menu-inner a.shop-menu-all,.shop-menu-inner a.shop-menu-all:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.shop-menu-inner a.shop-menu-all span{color:#cdc4ba}
/* homepage: shop by category */
.home{padding-bottom:48px}
.cat-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
@media (min-width:760px){ .cat-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} }
.cat-tile{
display:flex;flex-direction:column;overflow:hidden;
border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
color:var(--ink);text-decoration:none;
transition:border-color .15s ease, box-shadow .2s ease, transform .2s ease;
}
.cat-tile:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px);color:var(--ink);text-decoration:none}
.cat-tile:hover .hex-frame img{transform:scale(1.04)}
.cat-tile .hex-frame{aspect-ratio:4/3}
.cat-tile .hex-frame::after{content:none}
.cat-tile-body{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;padding:12px 14px}
.cat-tile-body strong{font-family:var(--head);font-size:1.0625rem}
.cat-tile-body span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cat-tile.cat-tile-all{background:var(--ink);border-color:var(--ink);color:#fff}
.cat-tile.cat-tile-all:hover{color:#fff;border-color:var(--ink)}
.cat-tile-all-inner{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px 16px}
.cat-tile-all-inner .ic{width:28px;height:28px;stroke:var(--accent-light);margin-bottom:auto}
.cat-tile-all-inner strong{font-family:var(--head);font-size:1.25rem}
.cat-tile-all-inner span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:#cdc4ba}
/* shop page */
.shop-head{background:var(--surface);border-bottom:1px solid var(--line)}
.shop-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;padding-block:4px 18px}
.shop-head h1{margin:0 0 4px}
.shop-head .sub{margin:0}
.sort-form{display:flex;align-items:center;gap:8px}
.sort-form label{font-size:.8125rem;font-weight:600;color:var(--ink-2);white-space:nowrap}
.sort-form select{width:auto;min-width:200px}
.shop-page{padding-top:20px}
.chip-count{margin-left:7px;font-family:var(--mono);font-size:.6875rem;color:var(--ink-3)}
.chip.active .chip-count{color:#cdc4ba}
.chip-deals{border-color:var(--accent);color:var(--accent-ink)}
.chip-deals.active{background:var(--accent);border-color:var(--accent)}
/* homepage product rows ("Most sold", "Trending now", …) */
.product-rail{margin-bottom:8px}
.rail-actions{display:flex;align-items:center;gap:8px}
.rail-actions a{margin-right:6px}
.rail-btn{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;padding:0;
border:1px solid var(--line-2);border-radius:50%;background:var(--surface);
color:var(--ink);font-size:1.25rem;line-height:1;cursor:pointer;
}
.rail-btn:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff}
.rail-btn:disabled{opacity:.35;cursor:default}
.rail-btn[hidden]{display:none}
@media (max-width:619px){ .rail-btn{display:none} } /* phones swipe */
.rail-track{
display:grid;grid-auto-flow:column;
grid-auto-columns:calc((100% - 12px) / 2.15); /* a peek of the next card hints that the row scrolls */
gap:12px;
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scroll-padding-inline:2px;
padding:4px 2px 10px;margin-inline:-2px;
scrollbar-width:none; /* the slim progress line below replaces the scrollbar */
}
.rail-track::-webkit-scrollbar{display:none}
.rail-track > .card{scroll-snap-align:start}
.rail-progress{height:3px;margin:2px 2px 0;border-radius:99px;background:var(--line);overflow:hidden}
.rail-progress[hidden]{display:none}
.rail-progress span{display:block;width:0;height:100%;border-radius:inherit;background:var(--ink);transition:transform .15s linear}
@media (min-width:620px){ .rail-track{grid-auto-columns:calc((100% - 28px) / 3);gap:14px} }
@media (min-width:960px){ .rail-track{grid-auto-columns:calc((100% - 48px) / 4);gap:16px} }
@media (min-width:1240px){ .rail-track{grid-auto-columns:calc((100% - 64px) / 5)} }
/* =================================================================== motion ==
Everything below is decoration: the page works without it, JavaScript only
adds classes, and prefers-reduced-motion switches it all off (see the end of
this file and the @media block at the bottom of this section).
========================================================================== */
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes cell-in{from{opacity:0;transform:scale(0) rotate(-120deg)}}
@keyframes cell-hop{
0%{transform:none}
35%{transform:translateY(-24%) scale(1.1)}
70%{transform:translateY(6%) scale(.96)}
100%{transform:none}
}
@keyframes word-in{from{width:0;opacity:0}}
@keyframes count-bump{0%{transform:scale(1)}35%{transform:scale(1.6)}65%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes cart-pulse{from{box-shadow:0 0 0 0 rgba(196,67,42,.5)}to{box-shadow:0 0 0 14px rgba(196,67,42,0)}}
@keyframes toast-in{from{opacity:0;transform:translateY(18px) scale(.96)}}
@keyframes toast-out{to{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes reveal-failsafe{to{opacity:1;transform:none}}
/* ── animated header logo (includes/logo.php) ── */
.logo{--logo-h:28px;display:inline-flex;align-items:center;height:var(--logo-h)}
.logo svg{display:block;height:100%;overflow:visible}
.logo-mark{width:calc(var(--logo-h) * 1.799)} /* 112 / 62.25 */
.logo-cell{
fill:var(--accent);
transform-box:fill-box;transform-origin:center;
transition:transform .45s cubic-bezier(.3,1.5,.5,1), fill .2s ease;
}
.logo-word-wrap{
display:block;height:100%;overflow:hidden;
width:calc(var(--logo-h) * 5.096); /* (26.147 gap + 291.073 word) / 62.25 */
transition:width .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.logo-word{fill:var(--ink);width:calc(var(--logo-h) * 4.676);margin-left:calc(var(--logo-h) * .42)}
@media (max-width:420px){ .logo{--logo-h:24px} }
.logo-intro .logo-cell{animation:cell-in .6s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(150ms + var(--cell) * 80ms)}
.logo-intro .logo-word-wrap{animation:word-in .55s .6s cubic-bezier(.2,.7,.2,1) backwards}
.brand:hover .logo-cell,
.brand:focus-visible .logo-cell,
.logo.is-buzz .logo-cell{animation:cell-hop .55s cubic-bezier(.3,.7,.4,1) backwards;animation-delay:calc(var(--cell) * 60ms)}
/* ── header compacts on scroll (html.header-compact, set in main.js) ── */
.site-header{transition:box-shadow .3s ease}
.header-inner{transition:min-height .3s ease}
.header-compact .site-header{box-shadow:0 10px 24px -18px rgba(26,22,19,.55)}
.header-compact .header-inner{min-height:54px}
.header-compact .logo-word-wrap{width:0;opacity:0}
.header-compact .logo-cell{transform:rotate(60deg)} /* a hexagon turned 60° looks the same, so this reads as a quick spin */
.header-compact .search-overlay{top:54px}
/* ── page loader (includes/loader.php + main.js) ───────────────────────────
Hidden by default and only shown when a navigation is genuinely slow, so a fast
page never flashes it. The five honeycomb cells build the W, then keep breathing. */
.page-loader{
position:fixed;inset:0;z-index:200;
display:grid;place-items:center;
background:var(--paper);
opacity:0;visibility:hidden;
transition:opacity .28s ease, visibility 0s linear .28s;
}
.page-loader.is-on{opacity:1;visibility:visible;transition:opacity .22s ease}
.page-loader-inner{display:grid;justify-items:center;gap:20px;padding:24px;text-align:center}
.loader-mark{width:132px;height:auto;overflow:visible}
@media (max-width:480px){ .loader-mark{width:104px} }
.loader-cell{
fill:var(--accent);
transform-box:fill-box;transform-origin:center;
animation:loader-cell 1.6s cubic-bezier(.4,0,.3,1) infinite backwards;
animation-delay:calc(var(--cell) * 130ms);
}
@keyframes loader-cell{
0% {opacity:.16;transform:scale(.72) rotate(-30deg)}
22% {opacity:1;transform:scale(1) rotate(0)}
55% {opacity:1;transform:scale(1) rotate(0)}
78% {opacity:.16;transform:scale(.72) rotate(30deg)}
100% {opacity:.16;transform:scale(.72) rotate(-30deg)}
}
.loader-bar{display:block;width:132px;height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.loader-bar-fill{
display:block;width:40%;height:100%;border-radius:99px;background:var(--honey);
animation:loader-bar 1.25s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes loader-bar{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}
.loader-text{margin:0;font:500 .8125rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){
.loader-cell{animation:none;opacity:1;transform:none}
.loader-bar-fill{animation:loader-bar-pulse 1.4s ease-in-out infinite;width:100%}
@keyframes loader-bar-pulse{0%,100%{opacity:.35}50%{opacity:1}}
}
/* ── skeletons ────────────────────────────────────────────────────────────
A shape in the right place while its content is on the way. .sk on any element
paints the shimmer; .sk-text / .sk-line size a line of type. */
.sk,.sk-text{
position:relative;overflow:hidden;
background:var(--sk);
border-radius:var(--r);
}
.sk::after,.sk-text::after{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.65) 55%, transparent);
transform:translateX(-100%);
animation:sk-shimmer 1.25s ease-in-out infinite;
}
.sk-text{height:.75em;margin:.34em 0;border-radius:99px}
.sk-text.w-90{width:90%}.sk-text.w-70{width:70%}.sk-text.w-50{width:50%}.sk-text.w-30{width:30%}
@keyframes sk-shimmer{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
.sk::after,.sk-text::after{animation:sk-pulse 1.6s ease-in-out infinite;transform:none;background:rgba(255,255,255,.5)}
@keyframes sk-pulse{0%,100%{opacity:0}50%{opacity:.8}}
}
/* A product photo shimmers in its frame until the image itself has loaded (main.js) */
.hex-frame.is-loading::before{
content:"";position:absolute;inset:0;z-index:1;
background:var(--sk);
animation:sk-fade .3s ease backwards;
}
.hex-frame.is-loading::after{
content:"";position:absolute;inset:0;z-index:2;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.6) 55%, transparent);
transform:translateX(-100%);
animation:sk-shimmer 1.25s ease-in-out infinite;
}
@keyframes sk-fade{from{opacity:0}}
/* A card standing in for one that hasn't arrived yet */
.card-sk{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.card-sk .sk-img{aspect-ratio:1/1;border-radius:var(--r)}
.sk-rows{display:grid;gap:10px}
/* ── add to cart (main.js) ── */
.fly-ghost{
position:fixed;z-index:96;margin:0;pointer-events:none;
border-radius:var(--r-lg);box-shadow:var(--shadow-lift);
will-change:transform, opacity;
}
.cart-count.is-bump{animation:count-bump .5s cubic-bezier(.3,1.4,.5,1)}
.cart-btn.is-pulse{animation:cart-pulse .6s ease-out}
.add-btn.is-busy,.btn.is-busy{opacity:.65;cursor:progress}
.add-btn.is-added,.btn.is-added,
.add-btn.is-added:hover,.btn.is-added:hover{background:var(--ok);border-color:var(--ok);color:#fff}
.toast-stack{
position:fixed;left:50%;bottom:max(16px, env(safe-area-inset-bottom));z-index:95;
display:grid;gap:8px;width:min(calc(100vw - 32px), 440px);
transform:translateX(-50%);pointer-events:none;
}
.toast{
display:flex;align-items:center;gap:10px;
padding:12px 14px;border-radius:var(--r-lg);
background:var(--ink);color:#f4efe8;box-shadow:var(--shadow-lift);
font-size:.9375rem;line-height:1.35;pointer-events:auto;
animation:toast-in .38s cubic-bezier(.2,.9,.3,1.15) both;
}
.toast.is-leaving{animation:toast-out .28s ease forwards}
.toast-icon{
flex:none;width:16px;height:18px;background:var(--accent-light);
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.toast.is-error{background:var(--danger)}
.toast.is-error .toast-icon{background:#fff}
.toast-text{flex:1;min-width:0}
.toast a{flex:none;color:var(--accent-light);font-weight:600;text-decoration:none;white-space:nowrap}
.toast a:hover{color:#fff;text-decoration:underline}
/* ── sections fade up as they scroll into view (main.js adds .is-visible) ── */
.js :is(.cat-tiles,.product-rail,.product-grid,.values){transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.js :is(.cat-tiles,.product-rail,.product-grid,.values):not(.is-visible){opacity:0;transform:translateY(22px)}
/* if main.js never loads, don't leave the page blank */
.js:not(.js-ready) :is(.cat-tiles,.product-rail,.product-grid,.values){animation:reveal-failsafe .01s 2.5s forwards}
.js .is-visible :is(.card,.cat-tile,.value-item){animation:rise .6s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i, 0) * 70ms)}
/* ── hero: each slide's content rises in when it becomes the active slide ── */
.js .hero-slide.is-active .hero-inner > div:first-child > *{animation:rise .7s cubic-bezier(.2,.7,.2,1) backwards}
.js .hero-slide.is-active .hero-inner > div:first-child > :nth-child(2){animation-delay:.08s}
.js .hero-slide.is-active .hero-inner > div:first-child > :nth-child(3){animation-delay:.16s}
.js .hero-slide.is-active .hero-inner > div:first-child > :nth-child(4){animation-delay:.24s}
.js .hero-slide.is-active .hero-inner > div:first-child > :nth-child(5){animation-delay:.32s}
.js .hero-slide.is-active :is(.hero-cluster > *, .hero-media){animation:rise .8s .25s cubic-bezier(.2,.7,.2,1) backwards}
/* ── product page: details slide in one after another ── */
.js .detail-info > *{animation:rise .55s cubic-bezier(.2,.7,.2,1) backwards}
.js .detail-info > :nth-child(2){animation-delay:.05s}
.js .detail-info > :nth-child(3){animation-delay:.1s}
.js .detail-info > :nth-child(4){animation-delay:.15s}
.js .detail-info > :nth-child(5){animation-delay:.2s}
.js .detail-info > :nth-child(6){animation-delay:.25s}
.js .detail-info > :nth-child(n+7){animation-delay:.3s}
.js .detail-thumbs button{animation:rise .5s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:.2s}
/* ── page-to-page transitions (Chrome/Edge/Brave; ignored elsewhere) ── */
@media (prefers-reduced-motion:no-preference){
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
.site-header{view-transition-name:site-header}
.detail-img .hex-frame{view-transition-name:product-image}
::view-transition-group(product-image){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(product-image),::view-transition-new(product-image){height:100%;object-fit:cover}
}
/* ── compact desktop header: the whole bar gathers into a floating, centred capsule ──
After scrolling (html.header-compact, set in main.js) the logo tucks to its mark, the
header turns into a rounded capsule that narrows to fit its contents, and every text
label (nav, account, cart) shrinks to an icon. The capsule keeps the full header's
height (1px border + 62px = 6 + 50 + 6 + 1), so the page underneath never jumps.
One duration and easing for everything (main.js uses the same for the nav's slide to
the centre). Capsule and label widths animate via interpolate-size (Chrome, Edge,
Brave); other browsers reach the same state with a quicker size change.
Phones keep text labels; their nav row tucks away while scrolling instead. */
:root{--hdr-dur:.65s;--hdr-ease:cubic-bezier(.4,0,.2,1)} /* starts moving at once but gently, settles softly */
.nav-ic{display:none}
.nav-caret{margin-left:3px}
@media (min-width:861px){
:root{interpolate-size:allow-keywords}
.site-header{
padding-block:0;
transition:background-color var(--hdr-dur) var(--hdr-ease), border-color var(--hdr-dur) var(--hdr-ease),
box-shadow var(--hdr-dur) var(--hdr-ease), padding var(--hdr-dur) var(--hdr-ease);
}
.header-inner{
/* --hdr-side (set by main.js just before expanding) keeps the side columns as wide as they were in the
capsule, so the capsule doesn't snap narrower on the first frame of growing back */
display:grid;grid-template-columns:minmax(var(--hdr-side, 0px), auto) 1fr minmax(var(--hdr-side, 0px), auto);column-gap:12px;
/* min() = the width actually shown (.wrap caps at 1240px). Animating from a plain 100% would spend
the first part of the collapse shrinking behind that cap, so the capsule would stall, then rush. */
width:min(100%, 1240px);min-height:62px;margin-block:0;border-radius:0;
background-color:rgba(255,255,255,0);
box-shadow:0 0 0 1px rgba(227,221,212,0), 0 14px 34px -20px rgba(26,22,19,0);
transition:
width var(--hdr-dur) var(--hdr-ease), min-height var(--hdr-dur) var(--hdr-ease), column-gap var(--hdr-dur) var(--hdr-ease),
margin-top var(--hdr-dur) var(--hdr-ease), margin-bottom var(--hdr-dur) var(--hdr-ease),
padding var(--hdr-dur) var(--hdr-ease), border-radius var(--hdr-dur) var(--hdr-ease),
background-color var(--hdr-dur) var(--hdr-ease), box-shadow var(--hdr-dur) var(--hdr-ease);
}
.brand{justify-self:start;margin-right:0}
.logo-word-wrap{transition:width var(--hdr-dur) var(--hdr-ease), opacity calc(var(--hdr-dur) * .6) var(--hdr-ease)}
.main-nav{
justify-self:end;overflow:visible;padding:0;border-radius:999px;
background-color:rgba(247,244,239,0);box-shadow:inset 0 0 0 1px rgba(227,221,212,0);
transition:background-color var(--hdr-dur) var(--hdr-ease), padding var(--hdr-dur) var(--hdr-ease),
box-shadow var(--hdr-dur) var(--hdr-ease), gap var(--hdr-dur) var(--hdr-ease);
}
.main-nav .nav-item{
position:relative;
transition:padding var(--hdr-dur) var(--hdr-ease), min-height var(--hdr-dur) var(--hdr-ease),
border-radius var(--hdr-dur) var(--hdr-ease), background-color .2s ease, color .2s ease;
}
.header-actions{justify-self:end;transition:gap var(--hdr-dur) var(--hdr-ease)}
.header-actions :is(.account-link,.cart-btn,.search-toggle){
transition:gap var(--hdr-dur) var(--hdr-ease), padding var(--hdr-dur) var(--hdr-ease),
border-radius var(--hdr-dur) var(--hdr-ease), background-color .2s ease, border-color .2s ease, color .2s ease;
}
.nav-ic{
display:block;flex:none;width:0;height:20px;opacity:0;transform:scale(.4) rotate(-30deg);
transition:width var(--hdr-dur) var(--hdr-ease), opacity calc(var(--hdr-dur) * .6) var(--hdr-ease),
transform var(--hdr-dur) cubic-bezier(.34,1.4,.5,1);
}
.nav-label,.hdr-label{
display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;
max-width:9em;transition:max-width var(--hdr-dur) var(--hdr-ease), opacity calc(var(--hdr-dur) * .5) var(--hdr-ease);
}
.nav-caret{transition:transform .2s ease, width var(--hdr-dur) var(--hdr-ease), margin var(--hdr-dur) var(--hdr-ease), opacity calc(var(--hdr-dur) * .5) var(--hdr-ease)}
/* compact state */
/* the 6px around the capsule is padding on the header, not margin on the capsule — a margin would
collapse through the header, leaving the capsule flush against the top of the screen */
.header-compact .site-header{padding-block:6px;background-color:transparent;border-bottom-color:transparent;box-shadow:none}
.header-compact .header-inner{
grid-template-columns:1fr auto 1fr;column-gap:10px;
width:fit-content;min-height:50px;padding-inline:9px; /* equal sides keep the nav exactly centred */
border-radius:999px;background-color:rgba(255,255,255,.9);
box-shadow:0 0 0 1px var(--line), 0 14px 34px -20px rgba(26,22,19,.5);
-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
}
.header-compact .main-nav{justify-self:center;gap:2px;padding:3px;background-color:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.header-compact .main-nav .nav-item{min-height:40px;padding-inline:11px;border-radius:999px}
.header-compact .nav-ic{width:20px;opacity:1;transform:none}
.header-compact :is(.nav-label,.hdr-label){max-width:0;opacity:0}
.header-compact .nav-caret{width:0;margin-left:0;opacity:0}
.header-compact .main-nav .nav-item:hover{background-color:var(--surface);color:var(--ink)}
.header-compact .main-nav .nav-item.active{box-shadow:none;background-color:var(--ink);color:#fff}
.header-compact .nav-menu-btn[aria-expanded="true"]{background-color:var(--surface);color:var(--accent-ink)}
.header-compact .header-actions{gap:2px}
.header-compact .header-actions :is(.account-link,.cart-btn,.search-toggle){border-radius:999px}
.header-compact .account-link{gap:0;padding-inline:12px}
.header-compact .cart-btn{gap:3px;padding-inline:12px 8px}
.header-compact .search-overlay{top:62px}
/* labels shrink from their real width rather than from a 9em cap, where supported */
@supports (interpolate-size:allow-keywords){
.nav-label,.hdr-label{max-width:none;width:auto;transition:width var(--hdr-dur) var(--hdr-ease), opacity calc(var(--hdr-dur) * .5) var(--hdr-ease)}
.header-compact :is(.nav-label,.hdr-label){max-width:none;width:0}
}
/* the Shop menu floats under the capsule as a rounded card */
.header-compact .shop-menu{
left:50%;right:auto;top:calc(100% + 4px);
width:min(1180px, calc(100vw - 48px));transform:translateX(-50%);
border:1px solid var(--line);border-radius:18px;overflow:hidden;
}
/* name tooltip under each icon */
.header-compact :is(.main-nav .nav-item, .header-actions [data-tip]){position:relative}
.header-compact :is(.main-nav .nav-item, .header-actions [data-tip])::after{
content:attr(data-tip);
position:absolute;top:calc(100% + 10px);left:50%;z-index:50;
padding:4px 9px;border-radius:var(--r);
background:var(--ink);color:#fff;
font-family:var(--body);font-size:.75rem;font-weight:600;line-height:1.3;letter-spacing:0;white-space:nowrap;
opacity:0;pointer-events:none;transform:translate(-50%,-4px);
transition:opacity .15s ease, transform .15s ease;
}
.header-compact :is(.main-nav .nav-item, .header-actions [data-tip]):is(:hover, :focus-visible)::after{opacity:1;transform:translate(-50%,0)}
/* no tooltip over an open Shop menu or search box (as specific as the hover rule, and later, so these win) */
.header-compact .main-nav .nav-menu-btn[aria-expanded="true"]::after,
.header-compact .header-actions .search-toggle[aria-expanded="true"]::after{opacity:0}
}
/* ── mobile header (≤860px): logo, account, cart and a ☰ that drops down a menu sheet ──
The desktop nav, search button and Shop menu are hidden; their links live in the sheet
(includes/header.php, .mnav). main.js opens it: html.menu-open + .mnav.is-open. */
@keyframes mnav-in{from{opacity:0;transform:translateY(-10px)}}
.menu-toggle{display:none}
.mnav{display:none}
@media (max-width:860px){
.site-header .main-nav,
.site-header .header-actions .search-toggle,
.site-header .shop-menu{display:none}
.header-inner,
.header-compact .header-inner{flex-wrap:nowrap;min-height:58px;gap:8px}
.header-compact .logo-word-wrap{width:calc(var(--logo-h) * 5.096);opacity:1} /* keep the name visible on phones */
.header-actions{gap:6px}
.account-link{width:var(--tap);padding:0;justify-content:center;border-radius:999px}
.cart-btn{padding:0 10px 0 12px;gap:6px;border-radius:999px}
/* ☰ that turns into ✕ */
.menu-toggle{
display:inline-flex;align-items:center;justify-content:center;flex:none;
width:var(--tap);height:var(--tap);padding:0;
border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink);
transition:background-color .3s ease, border-color .3s ease, color .3s ease;
}
.menu-toggle:hover{background:var(--paper)}
.menu-open .menu-toggle{background:var(--ink);border-color:var(--ink);color:#fff}
.burger{position:relative;display:block;width:18px;height:12px}
.burger span{
position:absolute;right:0;height:2px;border-radius:2px;background:currentColor;
transition:top .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1),
width .4s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.burger span:nth-child(1){top:0;width:18px}
.burger span:nth-child(2){top:5px;width:12px}
.burger span:nth-child(3){top:10px;width:15px}
.menu-toggle:hover .burger span,
.menu-open .burger span{width:18px}
.menu-open .burger span:nth-child(1){top:5px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0;transform:translateX(8px)}
.menu-open .burger span:nth-child(3){top:5px;transform:rotate(-45deg)}
/* while open: header stays on top (so ✕ is tappable) and the page behind can't scroll */
.menu-open .site-header{z-index:110}
html.menu-open,html.menu-open body{overflow:hidden}
/* the sheet unrolls downwards from the header's bottom edge (--mnav-top, set in main.js) */
.mnav{display:block;position:fixed;inset:0;z-index:100}
.mnav[hidden]{display:none}
.mnav-backdrop{
position:absolute;inset:0;
background:rgba(26,22,19,.42);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
opacity:0;transition:opacity .4s ease;
}
.mnav-panel{
position:absolute;left:0;right:0;top:var(--mnav-top, 58px);
max-height:calc(100dvh - var(--mnav-top, 58px));overflow-y:auto;overscroll-behavior:contain;
display:flex;flex-direction:column;gap:18px;
padding:16px var(--gut) calc(20px + env(safe-area-inset-bottom));
background:var(--paper);border-radius:0 0 26px 26px;
box-shadow:0 30px 60px -30px rgba(26,22,19,.55);
clip-path:inset(0 0 100% 0 round 0 0 26px 26px);
transition:clip-path .5s cubic-bezier(.32,.72,0,1);
}
.mnav-panel:focus{outline:none}
.mnav.is-open .mnav-backdrop{opacity:1}
.mnav.is-open .mnav-panel{clip-path:inset(0 0 0 0 round 0 0 26px 26px)}
.mnav.is-open [data-stagger]{animation:mnav-in .5s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(90ms + var(--i, 0) * 45ms)}
.mnav-search{position:relative}
.mnav-search .ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.mnav-search input{min-height:50px;padding-left:46px;border-color:var(--line);border-radius:14px;background:var(--surface)}
.mnav-links{display:grid;gap:8px}
.mnav-link{
display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 14px 8px 10px;
border:1px solid var(--line);border-radius:18px;background:var(--surface);
color:var(--ink);text-decoration:none;
font-family:var(--head);font-size:1.125rem;font-weight:700;letter-spacing:-.01em;
transition:transform .15s ease, background-color .2s ease, border-color .2s ease;
}
.mnav-link:hover{color:var(--ink);text-decoration:none;border-color:var(--line-2)}
.mnav-link:active{transform:scale(.98)}
.mnav-ic{ /* a hexagon tile, like the cells of the logo */
display:grid;place-items:center;flex:none;width:40px;height:44px;
background:var(--accent-tint);color:var(--accent);
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.mnav-ic .ic{width:21px;height:21px}
.mnav-text{flex:1;min-width:0}
.mnav-go{width:18px;height:18px;color:var(--ink-3);transform:rotate(-90deg)}
.mnav-link.active{background:var(--ink);border-color:var(--ink);color:#fff}
.mnav-link.active .mnav-ic{background:var(--accent);color:#fff}
.mnav-link.active .mnav-go{color:var(--accent-light)}
.mnav-label{margin:0 0 10px;font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mnav-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mnav-cats a{
display:flex;flex-direction:column;gap:3px;padding:12px 14px;
border:1px solid var(--line);border-radius:14px;background:var(--surface);
color:var(--ink);text-decoration:none;
}
.mnav-cats a:hover{color:var(--ink);text-decoration:none;border-color:var(--line-2)}
.mnav-cats strong{font-family:var(--head);font-size:.9375rem;line-height:1.2}
.mnav-cats span{font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.mnav-cats a.active{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.mnav-cats a.is-empty strong{color:var(--ink-2)}
.mnav-foot{display:grid;gap:10px;padding-top:16px;border-top:1px solid var(--line)}
.mnav-account{display:flex;align-items:center;gap:12px;padding:4px 2px;color:var(--ink);text-decoration:none}
.mnav-account:hover{color:var(--ink);text-decoration:none}
.mnav-avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--head);font-size:1.125rem;font-weight:700}
.mnav-account strong{display:block;font-family:var(--head);font-size:1rem}
.mnav-account small{display:block;font-size:.8125rem;color:var(--ink-3)}
.mnav-cart{min-height:52px;border-radius:14px;font-size:1rem}
.mnav-cart .cart-count{background:#fff;color:var(--accent-ink)}
.mnav-whatsapp{font-size:.875rem;text-align:center;color:var(--ink-2)}
}
@media (max-width:360px){ /* small phones (e.g. 320px): tighter spacing so the row still fits */
:root{--gut:12px}
.logo{--logo-h:20px}
.header-inner,.header-compact .header-inner{gap:6px}
.header-actions{gap:2px}
.account-link{width:40px}
.cart-btn{padding:0 8px 0 10px;gap:4px}
.menu-toggle{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
.js :is(.cat-tiles,.product-rail,.product-grid,.values):not(.is-visible){opacity:1;transform:none}
.header-compact .logo-cell{transform:none}
}
/* admin previews for banners */
.banner-preview{display:block;width:100%;max-width:520px;aspect-ratio:1920/600;object-fit:cover;border:1px solid var(--line-2);border-radius:var(--r);background:var(--paper)}
.banner-preview.phone{max-width:120px;aspect-ratio:1080/1350}
.banner-thumb{display:block;width:144px;height:45px;object-fit:cover;border:1px solid var(--line-2);border-radius:var(--r);background:var(--paper)}
/* product photo on featured-product hero slides */
.hero-media{
margin:0;
max-width:100%;
aspect-ratio:4/3;
overflow:hidden;
border:1px solid rgba(255,255,255,.16);
border-radius:var(--r-lg);
background:rgba(255,255,255,.05);
}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-slide:nth-child(3n) .hero-media{border-color:var(--line-2)}
.hero-media img{background:#fff}
.hero-price{
display:block;
margin:-4px 0 18px;
font-family:var(--head);
font-size:1.75rem;
font-weight:700;
letter-spacing:-.01em;
font-variant-numeric:tabular-nums;
}
.hero-price small{margin-left:8px;font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
/* legibility on the dark and red hero slides (mockup colours were too faint there) */
.hero-slide .cat-tag{color:#b8afa5}
.hero-slide:nth-child(2n):not(:nth-child(3n)) .cat-tag{color:#ffe6df}
.hero-slide:nth-child(3n) .cat-tag{color:var(--ink-3)}
.hero-slide:nth-child(2n):not(:nth-child(3n)) :is(.f1,.f2,.f3){
background:rgba(26,22,19,.12);
border-color:rgba(255,255,255,.32);
color:#fff;
}
.hero-slide:nth-child(2n):not(:nth-child(3n)) :is(.f1,.f2,.f3) svg{stroke:#fff}
.hero-slide:nth-child(2n):not(:nth-child(3n)) .hero-actions .btn-outline{background:transparent;border-color:rgba(255,255,255,.65);color:#fff}
.hero-slide:nth-child(2n):not(:nth-child(3n)) .hero-actions .btn-outline:hover{background:#fff;border-color:#fff;color:var(--accent-ink)}
/* ═════════ Admin power tools: search palette, badges, dashboard, filters, profiles ═════════ */
kbd{
display:inline-flex;align-items:center;justify-content:center;min-width:1.6em;height:1.6em;padding:0 .4em;
font:600 .6875rem/1 var(--mono);color:var(--ink-3);background:var(--surface);
border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;white-space:nowrap;
}
.hint-inline{margin-left:6px;font:500 .75rem var(--mono);color:var(--ink-3);letter-spacing:0}
a.hint-inline{float:right;color:var(--accent)}
.admin-main > p.hint{margin:14px 22px 0}
.admin-main > .dash-grid{margin-inline:22px}
@media (max-width:620px){ .admin-main > p.hint{margin-inline:16px} .admin-main > .dash-grid{margin-inline:16px} }
.admin-topbar .row-actions .btn{margin-left:0}
.order-sub{display:block;margin-top:1px;font-size:.75rem;color:var(--ink-3)}
.admin-table td.stock-out{color:var(--accent)}
.stat-sub{display:block;margin-top:4px;font-size:.75rem;color:var(--ink-3)}
/* Sidebar: search button + counters */
.admin-search-btn{
display:flex;align-items:center;gap:9px;min-height:40px;padding:0 8px 0 11px;
color:#b8afa5;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);
font-size:.875rem;text-decoration:none;transition:border-color .2s,background-color .2s,color .2s;
}
.admin-search-btn:hover,.admin-search-btn:focus-visible{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);text-decoration:none}
.admin-search-btn .ic{width:17px;height:17px}
.admin-search-btn kbd{margin-left:auto;color:#d9d2ca;background:transparent;border-color:rgba(255,255,255,.22)}
/* Search and the notification bell share one row in the admin sidebar */
.admin-tools-row{display:flex;align-items:center;gap:8px}
.admin-tools-row .admin-search-btn{flex:1;min-width:0}
.admin-tools-row .admin-search-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){
.admin-tools-row{order:3;flex:1 1 100%}
.admin-search-btn{flex:1}
.admin-sidebar .foot-links{order:2;margin-left:auto}
.admin-nav{order:4;flex-basis:100%}
}
.nav-count{
margin-left:auto;min-width:20px;height:20px;padding:0 6px;display:inline-grid;place-items:center;
font:600 .6875rem/1 var(--mono);color:#fff;background:var(--accent);border-radius:99px;
}
.nav-count.is-warn{color:var(--ink);background:var(--honey)}
.admin-nav a.active .nav-count{color:var(--accent);background:#fff}
@media (max-width:900px){ .nav-count{margin-left:2px} }
/* Ctrl/⌘ K palette */
html.cmdk-open{overflow:hidden}
.cmdk{position:fixed;inset:0;z-index:1000;display:flex;justify-content:center;align-items:flex-start;padding:min(12vh,110px) 16px 16px}
.cmdk[hidden]{display:none}
.cmdk-backdrop{position:absolute;inset:0;background:rgba(29,25,22,.48);backdrop-filter:blur(3px);animation:cmdkFade .18s ease-out}
.cmdk-panel{
position:relative;width:min(640px,100%);max-height:min(560px,calc(100dvh - 32px));display:flex;flex-direction:column;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
box-shadow:0 2px 6px rgba(29,25,22,.08),0 30px 80px -20px rgba(29,25,22,.45);
animation:cmdkIn .22s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes cmdkFade{from{opacity:0}}
@keyframes cmdkIn{from{opacity:0;transform:translateY(-10px) scale(.98)}}
.cmdk-bar{position:relative;display:flex;align-items:center;gap:10px;padding:0 12px 0 16px;border-bottom:1px solid var(--line)}
.cmdk-bar > .ic{width:20px;height:20px;flex:none;color:var(--ink-3)}
.cmdk-bar input{flex:1;min-width:0;height:58px;border:0;outline:0;background:transparent;font:500 1.0625rem var(--body,inherit);color:var(--ink)}
.cmdk-bar input::placeholder{color:#a39990}
.cmdk-bar::after{
content:"";position:absolute;left:0;bottom:-1px;height:2px;width:30%;background:var(--accent);opacity:0;
}
.cmdk-bar.is-loading::after{opacity:1;animation:cmdkLoad .9s ease-in-out infinite}
@keyframes cmdkLoad{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.cmdk-esc{padding:4px;border:0;background:none;cursor:pointer}
.cmdk-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 8px 10px;scroll-padding:36px 0 8px}
.cmdk-group + .cmdk-group{margin-top:4px}
.cmdk-group-label{
position:sticky;top:-6px;z-index:1;padding:10px 8px 6px;background:var(--surface);
font:600 .625rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.cmdk-item{
display:flex;align-items:center;gap:12px;min-height:52px;padding:7px 10px;border-radius:var(--r);
color:var(--ink);text-decoration:none;scroll-margin-block:8px;
}
.cmdk-item:hover,.cmdk-item.is-active{background:var(--surface-2);text-decoration:none}
.cmdk-item.is-active{box-shadow:inset 3px 0 0 var(--accent)}
.cmdk-ic{
flex:none;width:36px;height:36px;display:grid;place-items:center;overflow:hidden;
background:var(--paper);border:1px solid var(--line);border-radius:var(--r);color:var(--ink-3);
}
.cmdk-item.is-active .cmdk-ic{color:var(--accent);border-color:rgba(196,67,42,.35)}
.cmdk-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cmdk-ic img{width:100%;height:100%;object-fit:cover}
.cmdk-main{flex:1;min-width:0;display:grid;gap:1px}
.cmdk-title{font-weight:600;font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-sub{font-size:.8125rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-item mark,.admin-table mark{background:rgba(232,105,74,.2);color:inherit;border-radius:2px;padding:0 1px;box-shadow:inset 0 -1.5px 0 var(--accent)}
.cmdk-meta{flex:none;font:500 .75rem var(--mono);color:var(--ink-3);white-space:nowrap}
.cmdk-badge{flex:none}
.cmdk-more{display:block;margin:2px 0 0 58px;padding:6px 0;font-size:.8125rem;font-weight:600;color:var(--accent)}
.cmdk-empty{display:grid;gap:4px;padding:34px 16px;text-align:center;color:var(--ink-3)}
.cmdk-empty strong{color:var(--ink);font-size:1rem}
.cmdk-foot{
display:flex;align-items:center;gap:16px;padding:9px 14px;border-top:1px solid var(--line);background:var(--surface-2);
font-size:.75rem;color:var(--ink-3);
}
.cmdk-foot span{display:inline-flex;align-items:center;gap:3px}
.cmdk-foot a{margin-left:auto;font-weight:600;color:var(--accent)}
@media (max-width:620px){
.cmdk{padding:10px}
.cmdk-panel{max-height:calc(100dvh - 20px)}
.cmdk-meta,.cmdk-foot span,.cmdk-foot-hide{display:none}
.cmdk-item{flex-wrap:wrap}
}
@media (hover:none){ .cmdk-foot span{display:none} }
/* Full search page */
.search-page-form{padding:16px}
.search-page-form .hint{margin-top:10px}
.search-page-bar,.order-filters-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.search-field,.order-search{
flex:1 1 280px;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;
background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
}
.search-field:focus-within,.order-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(196,67,42,.15)}
.search-field .ic,.order-search .ic{width:18px;height:18px;flex:none;color:var(--ink-3)}
.search-field input,.order-search input{flex:1;min-width:0;height:42px;border:0;outline:0;background:transparent;font:inherit;font-size:.9375rem}
.search-list{padding:6px 8px}
.search-list .cmdk-item + .cmdk-item{margin-top:1px}
.admin-panel > p.search-more{padding:4px 16px 14px}
/* Order filters */
.admin-panel.order-filters{padding:14px 16px;overflow:visible}
.of-field{display:grid;gap:4px;font-size:.75rem;font-weight:600;color:var(--ink-3)}
.of-field input,.of-field select{min-height:44px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);font:inherit;font-size:.875rem;color:var(--ink)}
.order-filters-row .btn{min-height:44px}
.order-quick{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:12px}
.order-quick .hint{display:inline}
.order-quick a{padding:4px 10px;border:1px solid var(--line);border-radius:99px;font-size:.8125rem;color:var(--ink);text-decoration:none}
.order-quick a:hover{border-color:var(--ink)}
.order-quick a.active{background:var(--ink);border-color:var(--ink);color:#fff}
.admin-main > .orders-summary{margin-top:12px}
@media (max-width:620px){ .of-field{flex:1 1 calc(50% - 5px)} .order-filters-row .btn{flex:1} }
/* Dashboard */
.seg{display:inline-flex;margin-left:auto;padding:3px;background:var(--paper);border:1px solid var(--line);border-radius:calc(var(--r) + 3px)}
.seg a{padding:6px 14px;border-radius:var(--r);font-size:.8125rem;font-weight:600;color:var(--ink-3);text-decoration:none}
.seg a:hover{color:var(--ink)}
.seg a.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(29,25,22,.12)}
.kpi-cards .stat-card{display:grid;align-content:start;gap:6px}
.kpi-cards .lbl{margin:0}
.kpi-cards .num{font-size:1.75rem}
.kpi-change{font-size:.75rem;color:var(--ink-3)}
.kpi-change b{display:inline-block;margin-right:3px;padding:1px 6px;border-radius:99px;font:600 .6875rem var(--mono);background:var(--paper);color:var(--ink-3)}
.kpi-change.up b{background:var(--ok-tint);color:#13543a}
.kpi-change.down b{background:#f7e3dd;color:#8c2a17}
.kpi-cards .stat-sub{margin:0}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:0 18px;align-items:start}
.attention-list{list-style:none;margin:0;padding:6px}
.attention-list a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r);color:var(--ink);text-decoration:none}
.attention-list a:hover{background:var(--surface-2)}
.attention-count{
flex:none;min-width:40px;height:40px;padding:0 8px;display:grid;place-items:center;border-radius:var(--r);
font:700 1.125rem var(--head);background:var(--paper);border:1px solid var(--line);
}
.attention-list a.is-hot .attention-count{background:var(--accent);border-color:var(--accent);color:#fff}
.attention-text{flex:1;min-width:0;display:grid}
.attention-text span{font-size:.8125rem;color:var(--ink-3)}
.attention-list .ic{width:16px;height:16px;color:var(--ink-3);flex:none}
.admin-panel > p.attention-clear{padding:22px 16px;color:var(--ink-3)}
.attention-clear strong{color:#13543a}
.status-strip{display:flex;gap:3px;height:12px;margin:16px 16px 4px;border-radius:99px;overflow:hidden}
.status-strip span{min-width:6px}
.status-bar-Pending{background:#d9a441}
.status-bar-Confirmed{background:#4d88a8}
.status-bar-Shipped{background:#7b6aa6}
.status-bar-Delivered{background:#2f8a5f}
.status-bar-Cancelled{background:#c4bab1}
.status-legend{list-style:none;margin:0;padding:10px 8px 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px}
.status-legend a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px;border-radius:var(--r);color:var(--ink);text-decoration:none}
.status-legend a:hover{background:var(--surface-2)}
.status-legend b{font:600 .9375rem var(--mono)}
.row-print a{font-size:.8125rem;font-weight:600}
/* Customer profile */
.admin-panel.cust-card{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;padding:18px}
.cust-avatar{
flex:none;width:64px;height:72px;display:grid;place-items:center;
font:700 1.375rem var(--head);color:#fff;background:linear-gradient(150deg,var(--accent),#8f2d1b);
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.cust-info{flex:1 1 260px;min-width:0}
.cust-lines{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 6px}
.cust-lines span{display:inline-flex;align-items:center;gap:6px;font-weight:500;overflow-wrap:anywhere}
.cust-lines .ic{width:16px;height:16px;color:var(--ink-3);flex:none}
.cust-contact{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:620px){ .cust-contact{flex-basis:100%} .cust-contact .btn{flex:1} }
/* ═════════ Shopping assistant chat bubble (includes/assistant-widget.php, assets/js/assistant.js) ═════════ */
.aic{position:fixed;right:max(18px, env(safe-area-inset-right));bottom:max(18px, env(safe-area-inset-bottom));z-index:90;font-family:var(--body)}
html.menu-open .aic{display:none}
.aic-launch{
position:relative;display:flex;align-items:center;gap:9px;height:52px;padding:0 18px 0 7px;margin-left:auto;
color:#fff;background:var(--ink);border:0;border-radius:99px;cursor:pointer;
font:600 .9375rem var(--body);box-shadow:0 10px 30px -8px rgba(29,25,22,.55);
transition:transform .25s cubic-bezier(.2,.9,.3,1.2),box-shadow .25s;
}
.aic-launch:hover{transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(29,25,22,.6)}
/* Whizy's face (includes/assistant-widget.php). Moods come from data-mood on the face's wrapper. */
.aic-face{flex:none;display:block;width:40px;height:40px;padding:2px}
.whizy{display:block;width:100%;height:100%;overflow:visible;transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
.whizy .w-body{fill:var(--accent)}
.whizy .w-antenna{transform-box:view-box;transform-origin:24px 4px}
.whizy .w-antenna line{stroke:#e8694a;stroke-width:2.2;stroke-linecap:round}
.whizy .w-ant-hex{fill:var(--honey)}
.whizy .w-eye{fill:#fff;transform-box:fill-box;transform-origin:center}
.whizy .w-eyes,.whizy .w-mouth{transition:opacity .2s,transform .35s ease}
.whizy .w-happy,.whizy .w-sleep,.whizy .w-dots,.whizy .w-zz{opacity:0;transition:opacity .2s}
.whizy .w-happy path,.whizy .w-sleep path,.whizy .w-mouth{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.whizy .w-dots circle{fill:#fff;transform-box:fill-box;transform-origin:center}
.whizy .w-zz text{font:700 15px var(--mono);fill:var(--honey);transform-box:fill-box}
.whizy .w-sleep path{stroke-width:3.2}
[data-mood="rest"] > .whizy{animation:w-float 3s ease-in-out infinite}
[data-mood="rest"] > .whizy .w-eye{animation:w-blink 4.2s infinite}
[data-mood="rest"] > .whizy .w-antenna{animation:w-bob 2.4s ease-in-out infinite}
[data-mood="hover"] > .whizy{transform:rotate(-12deg) scale(1.08)}
[data-mood="hover"] > .whizy .w-eyes{transform:translate(-3px,-1px) scaleY(1.1)}
[data-mood="hover"] > .whizy .w-antenna{animation:w-bob 1.1s ease-in-out infinite}
[data-mood="think"] > .whizy .w-eyes,[data-mood="think"] > .whizy .w-mouth{opacity:0}
[data-mood="think"] > .whizy .w-dots{opacity:1}
[data-mood="think"] > .whizy .w-dots circle{animation:w-dot .9s ease-in-out infinite}
[data-mood="think"] > .whizy .w-dots circle:nth-child(2){animation-delay:.15s}
[data-mood="think"] > .whizy .w-dots circle:nth-child(3){animation-delay:.3s}
[data-mood="think"] > .whizy .w-antenna{animation:w-bob .5s ease-in-out infinite}
[data-mood="happy"] > .whizy{animation:w-hop .7s cubic-bezier(.3,1.6,.5,1)}
[data-mood="happy"] > .whizy .w-eyes,[data-mood="happy"] > .whizy .w-mouth{opacity:0}
[data-mood="happy"] > .whizy .w-happy{opacity:1}
[data-mood="night"] > .whizy{animation:w-float 5s ease-in-out infinite}
[data-mood="night"] > .whizy .w-eyes{opacity:0}
[data-mood="night"] > .whizy .w-sleep,[data-mood="night"] > .whizy .w-zz{opacity:1}
[data-mood="night"] > .whizy .w-zz text{animation:w-z 3s ease-in-out infinite}
[data-mood="night"] > .whizy .w-zz text:nth-child(2){animation-delay:1.5s}
@keyframes w-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes w-bob{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
@keyframes w-blink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
@keyframes w-dot{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}}
@keyframes w-hop{0%{transform:scale(1)}35%{transform:translateY(-9px) scale(1.12)}100%{transform:none}}
@keyframes w-z{0%{opacity:0;transform:translate(0,4px)}35%{opacity:1}100%{opacity:0;transform:translate(5px,-9px)}}
/* Honey badge on the button (shown with the hello nudge) */
.aic-badge{
position:absolute;top:-5px;right:-4px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;
background:var(--honey);color:var(--ink);font:600 .75rem var(--mono);border:2px solid var(--paper);animation:aic-pop .4s cubic-bezier(.3,1.6,.5,1);
}
.aic-badge[hidden]{display:none}
@keyframes aic-pop{from{transform:scale(0)}}
/* Hello nudge: "Need help choosing?" above the button on product pages */
.aic-nudge{
position:absolute;right:0;bottom:66px;display:flex;align-items:flex-start;gap:4px;width:min(280px, calc(100vw - 36px));
background:var(--surface);border:1px solid var(--line);border-radius:16px 16px 4px 16px;
box-shadow:0 18px 40px -18px rgba(29,25,22,.5);transform-origin:bottom right;animation:aicIn .35s cubic-bezier(.2,.9,.3,1.1);
}
.aic-nudge[hidden],.aic.is-open .aic-nudge{display:none}
.aic-nudge-open{flex:1;padding:12px 4px 12px 14px;border:0;background:none;text-align:left;cursor:pointer;font:400 .875rem/1.4 var(--body);color:var(--ink-2,var(--ink))}
.aic-nudge-open strong{display:block;margin-bottom:2px;font:700 .9375rem var(--head);color:var(--ink)}
.aic-nudge-x{flex:none;width:32px;height:32px;margin:6px 6px 0 0;border:0;border-radius:50%;background:transparent;cursor:pointer;color:var(--ink-3);font-size:1.25rem;line-height:1}
.aic-nudge-x:hover{background:var(--paper);color:var(--ink)}
@media (max-width:560px){ .aic-nudge{bottom:68px} }
.aic.is-open .aic-launch{transform:scale(.92)}
@media (max-width:560px){
.aic-launch{width:56px;height:56px;padding:0;justify-content:center}
.aic-launch-label{display:none}
.aic.is-open .aic-launch{display:none}
}
.aic-panel{
position:absolute;right:0;bottom:66px;display:flex;flex-direction:column;
width:min(390px, calc(100vw - 36px));height:min(620px, calc(100dvh - 110px));
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
box-shadow:0 2px 6px rgba(29,25,22,.08),0 30px 70px -20px rgba(29,25,22,.45);
transform-origin:bottom right;animation:aicIn .28s cubic-bezier(.2,.9,.3,1.1);
}
.aic-panel[hidden]{display:none}
@keyframes aicIn{from{opacity:0;transform:translateY(12px) scale(.96)}}
@media (max-width:560px){
.aic-panel{position:fixed;inset:0;width:auto;height:100dvh;border:0;border-radius:0}
html.aic-lock,html.aic-lock body{overflow:hidden}
}
.aic-head{display:flex;align-items:center;gap:10px;padding:12px 10px 12px 14px;color:#fff;background:var(--ink)}
.aic-avatar{flex:none;display:block;width:38px;height:38px;padding:3px 2px 1px}
.aic-title{flex:1;min-width:0;display:grid;line-height:1.25}
.aic-title strong{font:700 1rem var(--head)}
.aic-title span{display:flex;align-items:center;gap:6px;min-width:0;font-size:.75rem;color:#cfc6bc}
.aic-title em{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.aic-title i{flex:none}
.aic-title i{width:7px;height:7px;border-radius:50%;background:#4cc38a;box-shadow:0 0 0 3px rgba(76,195,138,.25)}
.aic-icon-btn{flex:none;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent;cursor:pointer}
.aic-icon-btn:hover{background:rgba(255,255,255,.1)}
.aic-icon-btn svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aic-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px;background:var(--paper)}
.aic-welcome[hidden]{display:none}
.aic-hello{margin:0 0 12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:4px 16px 16px 16px;font-size:.9375rem;line-height:1.45}
.aic-hello-row{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;align-items:start;margin-bottom:12px}
.aic-hello-row .aic-hello{margin:0}
.aic-msg-avatar{display:block;width:26px;height:26px;margin-top:4px}
.aic-chips{display:flex;flex-wrap:wrap;gap:8px}
.aic-chips button{
padding:8px 12px;border:1px solid var(--line-2);border-radius:99px;background:var(--surface);cursor:pointer;
font:500 .8125rem var(--body);color:var(--ink);transition:border-color .15s,background-color .15s;
}
.aic-chips button:hover{border-color:var(--accent);background:#fff}
.aic-msg{display:flex;flex-direction:column;margin-top:10px;animation:aicMsg .22s ease-out}
@keyframes aicMsg{from{opacity:0;transform:translateY(6px)}}
.aic-msg.is-user{align-items:flex-end}
/* Whizy's replies: a small face on the left, the bubble, product cards and buttons beside it */
.aic-msg.is-bot{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:8px;justify-items:start}
.aic-msg.is-bot > :not(.aic-msg-avatar){grid-column:2}
.aic-msg.is-bot > .aic-msg-avatar{grid-column:1;grid-row:1 / span 3}
.aic-msg.is-bot .aic-bubble{max-width:100%}
.aic-msg.is-bot .aic-cards{width:100%}
.aic-bubble{max-width:86%;padding:10px 13px;font-size:.9375rem;line-height:1.45;overflow-wrap:anywhere}
.is-user .aic-bubble{color:#fff;background:var(--accent);border-radius:16px 16px 4px 16px;white-space:pre-wrap}
.is-bot .aic-bubble{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:4px 16px 16px 16px}
.is-bot.is-error .aic-bubble{background:#fbeeea;border-color:#efc9bd}
.aic-bubble a{color:var(--accent-ink,var(--accent))}
.aic-li{display:block;padding-left:14px;position:relative}
.aic-li::before{content:"";position:absolute;left:3px;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.aic-typing .aic-bubble{display:flex;gap:4px;padding:14px 16px}
.aic-typing i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:w-dot .9s infinite ease-in-out} /* same bounce as Whizy's thinking eyes */
.aic-typing i:nth-child(2){animation-delay:.15s}
.aic-typing i:nth-child(3){animation-delay:.3s}
@keyframes aicDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.aic-cards{display:grid;gap:8px;width:92%;margin-top:8px}
.aic-card{display:flex;align-items:center;gap:10px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.aic-img{flex:none;display:block;width:54px;height:54px;border-radius:calc(var(--r) - 2px);overflow:hidden;background:var(--paper)}
.aic-img img{width:100%;height:100%;object-fit:cover}
.aic-card-info{flex:1;min-width:0;display:grid;gap:2px}
.aic-card-name{font-weight:600;font-size:.875rem;line-height:1.3;color:var(--ink);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.aic-card-name:hover{text-decoration:underline}
.aic-card-price{font:600 .8125rem var(--mono);color:var(--ink)}
.aic-card-price s{margin-left:6px;font-weight:500;color:var(--ink-3)}
.aic-add{margin:0}
.aic-add-btn{
display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:0;border-radius:99px;cursor:pointer;
font:600 .8125rem var(--body);color:#fff;background:var(--ink);text-decoration:none;white-space:nowrap;
}
.aic-add-btn:hover{background:var(--accent);color:#fff;text-decoration:none}
.aic-add-btn.is-ghost{color:var(--ink);background:transparent;border:1px solid var(--line-2)}
.aic-add-btn.is-added{background:#2f8a5f}
.aic-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.aic-wa{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:99px;background:#1f9d55;color:#fff;font-weight:600;font-size:.8125rem;text-decoration:none}
.aic-wa:hover{background:#17844a;color:#fff;text-decoration:none}
/* Rate / report a reply: quiet line icons that wake up on hover and fill in when chosen */
.aic-fb-group{display:inline-flex;align-items:center;gap:2px;opacity:.7;transition:opacity .15s}
.aic-msg:hover .aic-fb-group,.aic-fb-group:focus-within,.aic-fb-group:has(.is-on){opacity:1}
.aic-fb{
display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;
background:transparent;color:var(--ink-3);cursor:pointer;
transition:color .15s,background-color .15s,transform .25s cubic-bezier(.3,1.6,.5,1);
}
.aic-fb svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:fill .15s}
.aic-fb:hover{background:var(--surface);color:var(--ink)}
.aic-fb:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.aic-fb:active{transform:scale(.9)}
.aic-fb-up.is-on{color:#1f8a57;background:#e5f3ec}
.aic-fb-up.is-on svg{fill:rgba(31,138,87,.18)}
.aic-fb-down.is-on{color:var(--accent);background:#fbeeea}
.aic-fb-down.is-on svg{fill:rgba(196,67,42,.16)}
.aic-fb-flag{margin-left:4px}
.aic-fb-flag::before{content:"";position:absolute;width:1px;height:16px;margin-left:-22px;background:var(--line-2)}
.aic-fb-flag{position:relative}
.aic-followup{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;padding:8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;font-size:.8125rem;color:var(--ink-2);animation:aicMsg .22s ease-out}
.aic-followup-q{margin-right:2px;font-weight:600;color:var(--ink)}
.aic-followup.is-done{color:#1f6b45;background:#eef7f2;border-color:#cfe6d9}
.aic-followup.is-error{color:#8c2a17;background:#fbeeea;border-color:#efc9bd}
.aic-chip-sm{min-height:30px;padding:0 11px;border:1px solid var(--line-2);border-radius:99px;background:var(--paper);color:var(--ink);font:500 .75rem var(--body);cursor:pointer}
.aic-chip-sm:hover{border-color:var(--accent);background:#fff}
.aic-chip-sm.is-more{border-style:dashed}
.aic-chip-sm:disabled{opacity:.5;cursor:default}
.aic-foot-link{padding:0;border:0;background:none;color:var(--ink-2);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.aic-foot-link:hover{color:var(--accent)}
/* Report sheet: slides up inside the chat panel */
.aic-sheet{position:absolute;inset:0;z-index:6;display:flex;align-items:flex-end;background:rgba(29,25,22,.4);animation:cmdkFade .18s ease-out}
.aic-sheet[hidden]{display:none}
.aic-sheet-card{
width:100%;max-height:94%;overflow-y:auto;padding:16px 16px calc(18px + env(safe-area-inset-bottom));
background:var(--surface);border-radius:20px 20px 0 0;box-shadow:0 -16px 36px -18px rgba(29,25,22,.5);
animation:aicSheetIn .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes aicSheetIn{from{opacity:0;transform:translateY(28px)}}
.aic-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.aic-sheet-head strong{font:700 1.125rem var(--head)}
.aic-sheet-x{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--paper);cursor:pointer}
.aic-sheet-x:hover{background:var(--line)}
.aic-sheet-x svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.aic-sheet-quote{margin:0 0 14px;padding:9px 12px;border-left:3px solid var(--accent);border-radius:0 10px 10px 0;background:var(--paper);font-size:.8125rem;line-height:1.45;color:var(--ink-2)}
.aic-sheet-quote[hidden]{display:none}
.aic-reasons-label{margin:0 0 8px;font:600 .6875rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.aic-reasons{display:grid;gap:6px;margin-bottom:14px}
.aic-reason{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);font-size:.875rem;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.aic-reason:hover{border-color:var(--ink-3)}
.aic-reason:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:#fff}
.aic-reason input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--accent)}
.aic-sheet-label{display:block;margin-bottom:6px;font-size:.8125rem;font-weight:600;color:var(--ink)}
.aic-sheet-label span{font-weight:400;color:var(--ink-3)}
.aic-sheet textarea{width:100%;min-height:80px;padding:10px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--paper);font:inherit;font-size:.875rem;line-height:1.45;resize:vertical}
.aic-sheet textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(196,67,42,.15)}
.aic-sheet-error{margin:8px 0 0;font-size:.8125rem;color:#8c2a17}
.aic-sheet-error[hidden],.aic-sheet form[hidden],.aic-sheet-done[hidden]{display:none}
.aic-sheet-send{width:100%;min-height:46px;margin-top:14px;border:0;border-radius:99px;background:var(--ink);color:#fff;font:600 .9375rem var(--body);cursor:pointer;transition:background-color .15s}
.aic-sheet-send:hover{background:var(--accent)}
.aic-sheet-send:disabled{opacity:.6;cursor:progress}
.aic-sheet-done{display:grid;justify-items:center;gap:6px;padding:14px 8px 4px;text-align:center}
.aic-sheet-done svg{width:52px;height:52px;fill:none;stroke:#1f8a57;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.aic-sheet-done svg circle{fill:#e5f3ec;stroke-width:2}
.aic-sheet-done strong{font:700 1.125rem var(--head)}
.aic-sheet-done p{max-width:32ch;margin:0;font-size:.875rem;color:var(--ink-3)}
.aic-form{display:flex;align-items:flex-end;gap:8px;padding:10px 10px 6px;border-top:1px solid var(--line);background:var(--surface)}
.aic-form textarea{
flex:1;min-height:44px;max-height:120px;padding:11px 14px;resize:none;border:1px solid var(--line-2);border-radius:22px;
font:inherit;font-size:.9375rem;line-height:1.35;background:var(--paper);
}
.aic-form textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(196,67,42,.15)}
.aic-send{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--accent);cursor:pointer}
.aic-send svg{width:19px;height:19px;fill:#fff}
.aic-form.is-busy .aic-send{opacity:.5;cursor:progress}
.aic-foot{margin:0;padding:0 14px 8px;background:var(--surface);font-size:.6875rem;color:var(--ink-3);text-align:center}
/* ═════════ Product page (product.php) ═════════ */
@media (min-width:880px){ .detail-media{position:sticky;top:88px} } /* the photo stays in view beside the details */
.detail-img{box-shadow:0 1px 2px rgba(29,25,22,.04),0 18px 40px -30px rgba(29,25,22,.35)}
.detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.detail-head .cat-tag{margin:0;text-decoration:none}
a.cat-tag:hover{color:var(--accent-ink)}
.detail-share{
display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;flex:none;
border:1px solid var(--line-2);border-radius:99px;background:var(--surface);color:var(--ink-2);
font:500 .8125rem var(--body);cursor:pointer;transition:border-color .15s,color .15s;
}
.detail-share:hover{border-color:var(--ink);color:var(--ink)}
.detail-share:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.detail-share svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.detail-info h1{font-size:clamp(1.625rem,3.4vw,2.5rem);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.detail-info > .sub{max-width:52ch;font-size:1rem;line-height:1.5}
.buy-box{
margin-top:18px;padding:18px 18px 16px;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:0 1px 2px rgba(29,25,22,.04),0 20px 44px -34px rgba(29,25,22,.45);
}
.price-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.detail-info .price-row .price{margin:0;font-size:2rem;letter-spacing:-.01em}
.detail-info .price-row .sale-badge{margin-left:0;vertical-align:0}
.buy-box .qty-row{padding-block:18px 10px}
.buy-box .qty-row .btn{min-height:var(--tap)}
.buy-now{width:100%;min-height:var(--tap)}
.buy-box .opt-meta{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-2)}
.trust-list{list-style:none;display:grid;margin:14px 0 0;padding:0;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.trust-list li{display:flex;align-items:flex-start;gap:12px;padding:12px 16px}
.trust-list li + li{border-top:1px solid var(--line)}
.trust-list .ic{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.trust-list span{display:grid;gap:1px;font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.trust-list strong{font-weight:600;color:var(--ink)}
.trust-list a{color:var(--accent-ink);font-weight:600}
.detail-highlights{margin-top:24px}
.detail-highlights h2,.detail-more > h2{margin:0 0 14px;font-size:1.25rem;letter-spacing:-.01em}
.detail-more{margin-top:44px;padding-top:32px;border-top:1px solid var(--line)}
.detail-more-grid{display:grid;gap:24px;align-items:start}
@media (min-width:880px){ .detail-more-grid.has-both{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px} }
.detail-about{max-width:68ch;color:var(--ink-2);font-size:.9375rem;line-height:1.7}
.detail-about p{margin:0 0 12px}
.spec-table{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.spec-table h3{margin:0;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);font:600 .6875rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.spec-table dl{margin:0}
.spec-row{display:grid;grid-template-columns:minmax(110px,40%) minmax(0,1fr);gap:14px;padding:10px 16px;font-size:.875rem;line-height:1.45}
.spec-row + .spec-row,.spec-more dl{border-top:1px solid var(--line)}
.spec-row dt{color:var(--ink-3);overflow-wrap:anywhere}
.spec-row dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.spec-more summary{display:block;padding:12px 16px;border-top:1px solid var(--line);color:var(--accent-ink);font-weight:600;font-size:.875rem;cursor:pointer;list-style:none}
.spec-more summary::-webkit-details-marker{display:none}
.spec-more summary::after{content:" ↓"}
.spec-more[open] summary{display:none}
.detail-related{margin-top:40px}
.detail-related .product-rail{margin-bottom:0}
/* Phones: slim buy bar once the main Add to cart button has scrolled away */
.buy-bar{display:none}
@media (max-width:879px){
.buy-bar{
position:fixed;left:0;right:0;bottom:0;z-index:88;display:flex;align-items:center;gap:12px;
padding:10px 16px calc(10px + env(safe-area-inset-bottom));
background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -12px 28px -20px rgba(29,25,22,.5);
transform:translateY(110%);transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.buy-bar.is-shown{transform:none}
html.has-buy-bar .aic{bottom:calc(78px + env(safe-area-inset-bottom))}
html.has-buy-bar .toast-stack{bottom:calc(84px + env(safe-area-inset-bottom))}
}
.buy-bar-info{flex:1;min-width:0;display:grid}
.buy-bar-info strong{overflow:hidden;font-size:.8125rem;font-weight:600;white-space:nowrap;text-overflow:ellipsis;color:var(--ink-2)}
.buy-bar-info span{font:700 1.0625rem var(--mono);color:var(--ink)}
.buy-bar .btn{flex:none;min-width:136px}
.detail{padding-bottom:64px}
/* ═════════ Product options (product.php) ═════════ */
.detail-info [hidden]{display:none !important} /* the sale badge and was-price hide per option */
.opt-groups{display:grid;gap:16px;margin-top:14px}
.opt-group{min-width:0}
.opt-legend{
margin:0 0 8px;font:600 .6875rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.opt-chosen{margin-left:2px;font:600 .875rem var(--body);letter-spacing:0;text-transform:none;color:var(--ink)}
.opt-values{display:flex;flex-wrap:wrap;gap:8px}
.opt-btn{
position:relative;display:inline-flex;align-items:center;gap:9px;min-height:var(--tap);max-width:100%;padding:7px 14px;
border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--ink);
font:500 .875rem/1.3 var(--body);text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,background-color .15s;
}
.opt-btn:hover{border-color:var(--ink)}
.opt-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.opt-btn[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:#fff}
.opt-btn.has-img{padding:4px 12px 4px 4px}
.opt-btn img{flex:none;width:46px;height:46px;border-radius:calc(var(--r) - 2px);object-fit:cover;background:var(--paper)}
.opt-btn.is-soldout span{color:var(--ink-3);text-decoration:line-through}
.opt-btn.is-other{border-style:dashed;color:var(--ink-3)}
.opt-btn.is-other img{opacity:.6}
.opt-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.opt-sku{font:500 .75rem var(--mono);color:var(--ink-3)}
@media (max-width:420px){ .opt-btn{flex:1 1 calc(50% - 4px)} }
.ci-option{display:block;margin-top:2px;font-size:.8125rem;line-height:1.35;color:var(--ink-3)}
.sum-line.profit-up span:last-child{color:#13543a;font-weight:600}
.sum-line.profit-down span:last-child{color:var(--accent);font-weight:600}
/* ═════════ Nuclear → product editor: options (assets/js/admin-variations.js) ═════════ */
.product-form{padding:0}
.product-form > .settings-section{margin:0;padding:18px 18px 4px;border-bottom:1px solid var(--line)}
.plain-fieldset{min-width:0;margin:0;padding:0;border:0}
.plain-fieldset:disabled{opacity:.55}
.options-price-note{margin-bottom:12px}
.product-flags{display:flex;flex-wrap:wrap;gap:10px 24px}
.product-flags label{display:flex;align-items:center;gap:10px;font-weight:500;text-transform:none;letter-spacing:0}
.product-save-bar{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 18px;background:var(--surface);border-top:1px solid var(--line)}
.product-save-bar .hint{color:#8c2a17}
.ov-editor{position:relative;display:grid;gap:14px;margin-bottom:14px}
.ov-types{display:grid;gap:10px}
.ov-type{padding:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.ov-type-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:10px}
.ov-type-head label{font:600 .6875rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ov-type-name{flex:1 1 180px;max-width:280px;min-height:40px}
.ov-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:44px;padding:6px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r)}
.ov-chips:focus-within{border-color:var(--ink)}
.ov-chip{display:inline-flex;align-items:center;gap:2px;max-width:100%;padding:3px 3px 3px 10px;border-radius:99px;background:var(--paper);border:1px solid var(--line);font-size:.8125rem;line-height:1.3}
.ov-chip > span{overflow-wrap:anywhere}
.ov-chip button{display:grid;place-items:center;flex:none;width:24px;height:24px;border:0;border-radius:50%;background:transparent;color:var(--ink-3);font-size:1rem;cursor:pointer}
.ov-chip button:hover{background:var(--line);color:var(--ink)}
.ov-chips input.ov-value-input{flex:1 1 200px;min-height:32px;padding:4px 6px;border:0;background:transparent;box-shadow:none}
.ov-chips input.ov-value-input:focus{outline:0}
.ov-type-add{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ov-preset{min-height:32px;padding:0 12px;border:1px dashed var(--line-2);border-radius:99px;background:transparent;color:var(--ink-2,var(--ink));font:500 .8125rem var(--body);cursor:pointer}
.ov-preset:hover{border-color:var(--accent);color:var(--accent)}
.ov-summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font:500 .875rem var(--body);color:var(--ink)}
.ov-link{padding:0;border:0;background:none;color:var(--accent);font:600 .8125rem var(--body);text-decoration:underline;cursor:pointer}
.ov-empty{margin:0}
.ov-tools{border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.ov-tools summary{padding:10px 14px;font-weight:600;font-size:.875rem;cursor:pointer}
.ov-bulk,.ov-spread{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;padding:4px 14px 14px}
.ov-spread{border-top:1px dashed var(--line-2);padding-top:12px}
.ov-field{display:grid;gap:4px;flex:1 1 120px;min-width:0}
.ov-field label{font:600 .6875rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ov-field input,.ov-field select{min-height:40px}
.ov-spread .ov-field{flex:1 1 260px;max-width:340px}
.ov-check{display:flex;align-items:center;gap:6px;min-height:40px;font-size:.8125rem}
.ov-msg{flex:1 1 100%;margin:0}
.ov-table{min-width:980px}
.ov-table td{padding:6px 8px;vertical-align:middle}
.ov-table th{padding:8px}
.ov-table tr.is-off td{background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(29,25,22,.03) 8px 16px)}
.ov-table tr.is-off .ov-label{color:var(--ink-3)}
.ov-label{min-width:170px}
.ov-val{display:inline-block;margin:2px 4px 2px 0;padding:2px 8px;border-radius:5px;background:var(--paper);border:1px solid var(--line);font-size:.8125rem;line-height:1.35;overflow-wrap:anywhere}
.ov-new{display:inline-block;margin-left:2px;padding:1px 6px;border-radius:99px;background:var(--honey);color:var(--ink);font:600 .625rem var(--mono);letter-spacing:.06em;text-transform:uppercase}
.ov-in{width:100%;min-height:38px;padding:6px 8px}
.ov-table td.num .ov-in{text-align:right;font-family:var(--mono);font-size:.8125rem}
.ov-sku{min-width:110px}
.ov-price,.ov-sale,.ov-cost{min-width:92px}
.ov-stock{min-width:70px}
.ov-margin{min-width:64px;font-family:var(--mono)}
.ov-margin.is-good{color:#13543a}
.ov-margin.is-thin{color:#7a4f00}
.ov-margin.is-loss{color:var(--accent)}
.ov-photo{display:grid;place-items:center;width:44px;height:44px;padding:0;overflow:hidden;border:1px dashed var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--ink-3);font-size:1.25rem;cursor:pointer}
.ov-photo:hover{border-color:var(--ink);color:var(--ink)}
.ov-photo img{width:100%;height:100%;object-fit:cover}
.ov-photo.is-new{border:2px solid var(--honey)}
.ov-remove{width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--ink-3);font-size:1.25rem;cursor:pointer}
.ov-remove:hover{background:#fbeeea;color:var(--accent)}
.ov-picker{position:absolute;z-index:30;display:grid;gap:10px;width:min(340px,100%);padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 18px 40px -16px rgba(29,25,22,.4)}
.ov-picker[hidden]{display:none}
.ov-picker strong{font-size:.875rem}
.ov-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.ov-picker-grid .hint{grid-column:1 / -1;margin:0}
.ov-picker-img{aspect-ratio:1;padding:0;overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r);background:var(--paper);cursor:pointer}
.ov-picker-img img{width:100%;height:100%;object-fit:cover}
.ov-picker-img:hover{border-color:var(--ink)}
.ov-picker-img.is-on{border:2px solid var(--accent)}
.stock-warn{color:#7a4f00}
/* ═════════ Nuclear → AI assistant (nuclear/ai.php) ═════════ */
.admin-topbar .ai-badge-second{margin-left:0}
.ai-tabs{display:flex;gap:4px;margin:14px 22px 0;padding:4px;overflow-x:auto;scrollbar-width:none;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) + 4px)}
.ai-tabs a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:var(--r);font-weight:600;font-size:.875rem;color:var(--ink-3);text-decoration:none;white-space:nowrap}
.ai-tabs a:hover{color:var(--ink);background:var(--surface-2)}
.ai-tabs a.active{color:#fff;background:var(--ink)}
.ai-tabs .nav-count{margin-left:2px}
.admin-main > .ai-flash{margin:14px 22px 0}
.admin-main > .ai-chat-filter{margin:18px 22px 0}
@media (max-width:620px){ .ai-tabs,.admin-main > .ai-flash,.admin-main > .ai-chat-filter{margin-inline:16px} }
.ai-inline-form{display:inline;float:right;margin:-4px 0}
.admin-panel > p.ai-learning-intro{padding:12px 16px 0}
.ai-inline-pad{padding:0 16px 16px}
.ai-ask{display:flex;flex-direction:column;height:max(520px, calc(100vh - 200px))}
.ai-ask-log{flex:1;overflow-y:auto;padding:18px;background:var(--paper)}
.ai-ask-empty{max-width:640px;margin:4vh auto 0;text-align:center}
.ai-ask-empty[hidden]{display:none}
.ai-ask-empty h2{margin:10px 0 4px;font-size:1.375rem}
.ai-ask-mark{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff}
.ai-ask-mark .ic{width:26px;height:26px}
.ai-prompts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.ai-prompts button{padding:9px 14px;border:1px solid var(--line-2);border-radius:99px;background:var(--surface);font:500 .875rem var(--body);color:var(--ink);cursor:pointer;text-align:left}
.ai-prompts button:hover{border-color:var(--accent)}
.ai-ask-form{padding:12px 14px;border-top:1px solid var(--line);background:var(--surface)}
.ai-ask-form textarea{width:100%;min-height:58px;resize:vertical;border-radius:var(--r)}
.ai-ask-bar{display:flex;align-items:center;gap:12px;margin-top:8px}
.ai-ask-bar .hint{margin-right:auto}
.ai-ask-form.is-busy button[type=submit]{opacity:.5;pointer-events:none}
@media (max-width:620px){ .ai-ask-bar .hint{display:none} .ai-ask-bar .btn[type=submit]{margin-left:auto} }
.ai-msg{display:flex;flex-direction:column;margin-top:12px}
.ai-msg.is-user{align-items:flex-end}
.ai-bubble{max-width:min(760px, 88%);padding:11px 14px;line-height:1.5;overflow-wrap:anywhere}
.ai-msg.is-user .ai-bubble{color:#fff;background:var(--ink);border-radius:14px 14px 4px 14px;white-space:pre-wrap}
.ai-msg.is-bot .ai-bubble{background:var(--surface);border:1px solid var(--line);border-radius:4px 14px 14px 14px}
.ai-msg.is-error .ai-bubble{background:#fbeeea;border-color:#efc9bd}
.ai-msg.is-typing .ai-bubble{color:var(--ink-3);animation:aicDot 1s infinite}
.ai-li{display:block;position:relative;padding-left:16px}
.ai-li::before{content:"";position:absolute;left:4px;top:.65em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.ai-meta{margin-top:4px;font-size:.75rem;color:var(--ink-3)}
.ai-action{max-width:min(560px, 88%);margin-top:8px;padding:12px 14px;background:var(--warn-tint);border:1px solid #e3cfa4;border-radius:var(--r)}
.ai-action ul{margin:6px 0;padding-left:18px;font-size:.875rem}
.ai-action .hint{margin:4px 0}
.ai-action .row-actions{margin-top:8px}
.ai-action.is-done{background:var(--ok-tint);border-color:#bcd9c9}
.ai-action.is-closed{background:var(--surface);border-color:var(--line)}
.ai-action-result{margin:6px 0 0;font-weight:600}
.ai-faq-list{padding:8px 16px 16px;display:grid;gap:12px}
.ai-faq{display:grid;gap:8px;padding:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.ai-faq.is-open-question{border-left:3px solid var(--warn)}
.ai-faq-new{margin:16px}
.ai-faq-head{display:flex;align-items:center;gap:8px}
.ai-faq textarea{resize:vertical}
.ai-faq-approved{border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.ai-faq-approved summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer}
.ai-faq-approved summary .hint-inline{margin-left:auto}
.ai-faq-approved .ai-faq{border:0;border-top:1px solid var(--line);border-radius:0 0 var(--r) var(--r)}
.ai-notes{display:grid;gap:10px}
.ai-notes textarea{min-height:260px;resize:vertical;font-size:.9375rem}
.ai-source-counts{list-style:none;margin:12px 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ai-source-counts li{display:flex;justify-content:space-between;padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);font-size:.875rem}
.ai-source-counts b{font:600 1rem var(--mono)}
.ai-snippets{padding:4px 16px 16px}
.ai-snippets h3{margin:16px 0 6px;font:600 .6875rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ai-snippets details{border-bottom:1px solid var(--line)}
.ai-snippets summary{padding:9px 2px;cursor:pointer;font-weight:500}
.ai-snippets pre{margin:0 0 12px;padding:12px;white-space:pre-wrap;font:400 .8125rem/1.5 var(--body);background:var(--paper);border-radius:var(--r);max-height:260px;overflow:auto}
.ai-transcript{padding:8px 16px 18px;background:var(--paper)}
.ai-reports{list-style:none;display:grid;gap:10px;margin:0;padding:12px 16px 16px}
.ai-report{padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.ai-report.is-open{border-left:3px solid var(--accent)}
.ai-report.is-resolved{opacity:.72}
.ai-report-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ai-report-note{margin:8px 0 0}
.ai-report-reply{margin:8px 0 0;padding:8px 12px;background:var(--surface);border-left:3px solid var(--line-2);font-size:.875rem;color:var(--ink-2)}
.ai-report-reply span{display:block;margin-bottom:2px;font:600 .625rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ai-report .row-actions{margin-top:10px}
.ai-report .row-actions form{margin:0}
.admin-panel > p.ai-report-inline,.ai-report-inline{margin:10px 16px 0;padding:8px 12px;border-radius:var(--r);background:#fbeeea;font-size:.875rem;color:#6d2415}
.ai-transcript .ai-report-inline{margin:6px 0 0}
.ai-msg.is-reported .ai-bubble{border-color:#e9b3a3;box-shadow:0 0 0 2px #fbeeea}
.ai-settings .field-group{margin-bottom:14px}
.ai-check{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:.8125rem;font-weight:500;text-transform:none;letter-spacing:0}
.ai-meter{height:8px;margin:14px 16px 0;border-radius:99px;background:var(--paper);overflow:hidden}
.ai-meter span{display:block;height:100%;background:var(--accent);border-radius:inherit}
@media (prefers-reduced-motion:reduce){
*{transition-duration:.01ms !important;animation-duration:.01ms !important}
}
@media print{
.site-header,.announce-bar,.site-footer,.popup-overlay,.admin-sidebar{display:none}
}
/* ============================================================
Feature upgrades — Search, Pagination, Tag strip, Bulk bar
============================================================ */
/* ── Search toggle button (in header-actions) ────────────────── */
.search-toggle{
display:inline-flex;align-items:center;justify-content:center;
min-height:var(--tap);min-width:var(--tap);
padding:0 8px;border:none;background:none;cursor:pointer;
border-radius:var(--r);color:var(--ink-2);
transition:background .15s,color .15s;
}
.search-toggle:hover{background:var(--paper);color:var(--ink)}
.search-toggle[aria-expanded="true"]{background:var(--paper);color:var(--accent)}
/* ── Search overlay (drops below sticky header) ─────────────── */
.search-overlay{
position:sticky;top:62px;left:0;right:0;z-index:39;
background:var(--surface);
border-bottom:1px solid var(--line);
box-shadow:0 8px 24px rgba(0,0,0,.08);
animation:searchSlideIn .15s ease;
}
@keyframes searchSlideIn{
from{opacity:0;transform:translateY(-8px)}
to {opacity:1;transform:none}
}
.search-overlay-inner{padding:12px 0;position:relative}
.search-overlay-form{position:relative}
.search-wrap{position:relative;display:flex;align-items:center}
.search-ic{
position:absolute;left:12px;top:50%;transform:translateY(-50%);
width:18px;height:18px;stroke:var(--ink-soft);stroke-width:2;
fill:none;pointer-events:none;flex-shrink:0;
}
.search-input{
width:100%;padding:10px 48px 10px 40px;
border:1.5px solid var(--line);border-radius:var(--r-full,99px);
background:var(--surface-2,#f7f5f2);font-family:inherit;font-size:.9375rem;
color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s;
box-sizing:border-box;
}
.search-input-lg{padding:11px 52px 11px 44px;font-size:1rem}
.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,91,214,.14)}
.search-input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-close-btn{
position:absolute;right:12px;top:50%;transform:translateY(-50%);
background:none;border:none;padding:4px 8px;cursor:pointer;
font-size:20px;line-height:1;color:var(--ink-soft);border-radius:var(--r);
}
.search-close-btn:hover{background:var(--paper);color:var(--ink)}
.search-clear{
position:absolute;right:12px;top:50%;transform:translateY(-50%);
color:var(--ink-soft);font-size:18px;line-height:1;cursor:pointer;
text-decoration:none;padding:2px 6px;
}
.search-clear:hover{color:var(--ink)}
.search-dropdown{
position:absolute;top:calc(100% + 6px);left:0;right:0;
background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);
box-shadow:0 8px 28px rgba(0,0,0,.1);list-style:none;margin:0;padding:6px 0;
z-index:200;overflow:hidden;
}
.search-dropdown-lg{top:calc(100% + 8px)}
.search-item{
display:flex;align-items:center;gap:10px;
padding:8px 14px;cursor:pointer;outline:none;
transition:background .12s;
}
.search-item:hover,.search-item:focus{background:var(--surface-2)}
.search-thumb{
width:44px;height:44px;border-radius:var(--r);object-fit:cover;
border:1px solid var(--line);flex-shrink:0;
}
.search-thumb-placeholder{background:var(--surface-2)}
.search-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.search-name{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-price{font-size:.78rem;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace}
.search-no-results{padding:14px 16px;color:var(--ink-soft);font-size:.9rem}
.search-all{padding:8px 14px;border-top:1px solid var(--line);margin-top:4px}
.search-all a{font-size:.84rem;color:var(--accent);text-decoration:none;font-weight:500}
.search-all a:hover{text-decoration:underline}
/* ── Tag strip ──────────────────────────────────────────────── */
.tag-strip{border-top:none;padding-top:0;margin-top:-2px}
.chip-label{font-size:.75rem;font-family:'IBM Plex Mono',monospace;color:var(--ink-soft);
padding:5px 4px;align-self:center}
.chip-tag{border-style:dashed}
.chip-tag.active{border-style:solid}
/* ── Pagination ─────────────────────────────────────────────── */
.pagination{
display:flex;align-items:center;justify-content:center;gap:6px;
padding:28px 0 8px;flex-wrap:wrap;
}
.pag-num{
display:inline-flex;align-items:center;justify-content:center;
min-width:36px;height:36px;padding:0 8px;
border:1.5px solid var(--line);border-radius:var(--r);
font-size:.875rem;font-weight:500;color:var(--ink);
text-decoration:none;transition:border-color .15s,background .15s,color .15s;
}
.pag-num:hover{border-color:var(--accent);color:var(--accent)}
.pag-num.active{
background:var(--accent);border-color:var(--accent);
color:#fff;cursor:default;
}
.pag-ellipsis{color:var(--ink-soft);padding:0 4px;font-size:.9rem}
/* ── Bulk order action bar ──────────────────────────────────── */
.bulk-bar{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:12px 16px;margin-bottom:14px;
background:var(--accent);color:#fff;border-radius:var(--r-lg);
font-size:.875rem;animation:bulkBarIn .18s ease;
}
@keyframes bulkBarIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.bulk-count{font-weight:700;min-width:90px}
.bulk-bar label{opacity:.9}
.bulk-status-select{
padding:6px 10px;border-radius:var(--r);border:none;
font-family:inherit;font-size:.875rem;background:rgba(255,255,255,.92);
color:var(--ink);
}
.bulk-bar .btn{background:#fff;color:var(--accent);border:none}
.bulk-bar .btn:hover{background:rgba(255,255,255,.85)}
.bulk-bar .btn-outline{background:transparent;border:1.5px solid rgba(255,255,255,.6);color:#fff}
.bulk-bar .btn-outline:hover{background:rgba(255,255,255,.15)}
.order-check{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}
/* ------------------------------------ rewards, requests, suggestions (shop) -- */
.rw-page{padding-bottom:56px}
.rw-hero{display:grid;gap:22px;align-items:center;padding:30px 0 8px}
@media (min-width:860px){.rw-hero.has-wallet{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.rw-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;font:600 .75rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.rw-kicker .ic{width:18px;height:18px}
.rw-hero h1{margin:0 0 10px;font-size:clamp(1.85rem,4vw,2.8rem);line-height:1.06;letter-spacing:-.02em;max-width:20ch}
.rw-hero .sub{margin:0;max-width:60ch;color:var(--ink-2);font-size:1.0625rem;line-height:1.55}
.rw-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.honey-wallet{position:relative;overflow:hidden;display:grid;padding:22px;border-radius:var(--r-lg);background:var(--ink);color:#fff;box-shadow:var(--shadow)}
.honey-wallet::after{content:"";position:absolute;right:-46px;top:-46px;width:180px;height:180px;background:var(--honey);opacity:.16;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);pointer-events:none}
.honey-wallet .lbl{margin:0;color:rgba(255,255,255,.65)}
.honey-balance{font:700 clamp(2.4rem,6vw,3.3rem)/1.05 var(--head);letter-spacing:-.03em;color:var(--honey);font-variant-numeric:tabular-nums}
.honey-worth{margin-top:2px;color:rgba(255,255,255,.82)}
.honey-pending{margin-top:6px;font-size:.8125rem;color:rgba(255,255,255,.7)}
.honey-tier{display:grid;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.honey-tier small{font-size:.8125rem;line-height:1.45;color:rgba(255,255,255,.78)}
.tier-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.tier-bar span{display:block;height:100%;border-radius:inherit;background:var(--honey)}
.tier-chip{justify-self:start;display:inline-flex;align-items:center;padding:3px 10px;border:1px solid var(--line-2);border-radius:99px;background:var(--paper);color:var(--ink);font:600 .75rem var(--mono);letter-spacing:.04em}
.tier-chip.tier-busy{background:#eef1f4;border-color:#cdd4dc}
.tier-chip.tier-queen{background:#fbf0d4;border-color:#ecd28e;color:#5e4100}
.rw-section{margin-top:40px}
.rw-section > h2{margin:0 0 4px;font-size:1.375rem}
.rw-section > .sub{margin:0 0 16px;color:var(--ink-3)}
.rw-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;margin-top:14px}
.rw-way{display:flex;flex-direction:column;gap:8px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.rw-way h3{margin:4px 0 0;font-size:1.0625rem}
.rw-way p{flex:1;margin:0;color:var(--ink-2);font-size:.9375rem;line-height:1.5}
.rw-way a{font-weight:600;font-size:.9375rem}
.rw-way-ic{display:grid;place-items:center;width:44px;height:44px;background:#fbf0d4;color:#8a5a00;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.rw-way-ic .ic{width:20px;height:20px}
.rw-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.rw-tier{display:grid;align-content:start;gap:6px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.rw-tier strong{font:700 1.25rem var(--head)}
.rw-tier small{color:var(--ink-3);font-size:.8125rem}
.rw-tier.is-current{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.rw-you{font:600 .6875rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.rw-card{padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.rw-card > h2{margin:0 0 6px;font-size:1.25rem}
.rw-card > .sub{margin:0;color:var(--ink-2);line-height:1.55}
.rw-card-flush{padding:0}
.rw-copy{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.rw-copy input{flex:1 1 260px;min-width:0;font-family:var(--mono);font-size:.875rem}
.rw-code{font-family:var(--mono);letter-spacing:.06em;color:var(--ink)}
.rw-notice{margin:12px 0 0;padding:10px 12px;border-radius:var(--r);background:var(--warn-tint);color:var(--warn);font-size:.875rem}
.rw-stats{display:flex;flex-wrap:wrap;gap:6px 20px;margin:14px 0 0;padding:0;list-style:none;font-size:.875rem;color:var(--ink-3)}
.rw-stats b{font-family:var(--mono);color:var(--ink)}
.rw-history{width:100%;border-collapse:collapse;font-size:.9375rem}
.rw-history td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.rw-history tr:last-child td{border-bottom:0}
.rw-history .date{width:1%;white-space:nowrap;font:.8125rem var(--mono);color:var(--ink-3)}
.rw-history .pts{text-align:right;white-space:nowrap;font:600 .9375rem var(--mono)}
.pts.up,.rw-up{color:var(--ok)}
.pts.down,.rw-down{color:var(--accent)}
.rw-rules details{border-bottom:1px solid var(--line)}
.rw-rules summary{display:flex;justify-content:space-between;gap:12px;padding:14px 0;font-weight:600;cursor:pointer;list-style:none}
.rw-rules summary::-webkit-details-marker{display:none}
.rw-rules summary::after{content:"+";font:500 1.25rem/1 var(--mono);color:var(--ink-3)}
.rw-rules details[open] summary::after{content:"−"}
.rw-rules details p{max-width:72ch;margin:0 0 14px;color:var(--ink-2);line-height:1.6}
.rw-split{display:grid;gap:18px;margin-top:22px}
@media (min-width:900px){.rw-split{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);align-items:start}}
.rw-form h2{margin:0 0 14px;font-size:1.125rem}
.rw-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rw-side{display:grid;gap:14px}
.rw-steps{display:grid;gap:16px;margin:0;padding:4px 0 0;list-style:none;counter-reset:rw}
.rw-steps li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;counter-increment:rw}
.rw-steps li::before{content:counter(rw);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font:600 .875rem var(--mono)}
.rw-steps strong{display:block;margin-top:6px}
.rw-steps span{color:var(--ink-3);font-size:.875rem;line-height:1.5}
.rw-cross{display:block;margin:0;padding:14px 16px;border-radius:var(--r-lg);background:#fbf0d4;color:#5e4100;font-size:.9375rem;line-height:1.5;text-decoration:none}
a.rw-cross:hover{background:#f8e7bd}
.rw-cross strong{color:#3d2a00}
.rw-fine{margin:0;line-height:1.55}
.rw-board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:12px}
.rw-req{display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);scroll-margin-top:110px}
.rw-req:target{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.rw-req-img{display:grid;place-items:center;aspect-ratio:4/3;max-width:100%;background:var(--surface-2);color:var(--ink-3)}
.rw-req-img img{width:100%;height:100%;object-fit:cover}
.rw-req-img .ic{width:34px;height:34px}
.rw-req-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:8px;padding:14px}
.rw-req-body h3{margin:0;font-size:1rem;line-height:1.3}
.rw-req-body form,.rw-req-body .btn{margin-top:auto;width:100%}
.rw-votes{font:600 .8125rem var(--mono);color:var(--ink-3)}
.rw-pill{display:inline-block;padding:2px 9px;border:1px solid var(--line-2);border-radius:99px;background:var(--paper);color:var(--ink-3);font:600 .6875rem var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.rw-pill.s-sourcing,.rw-pill.s-accepted,.rw-pill.s-ref-pending{background:#fbf0d4;border-color:#ecd28e;color:#5e4100}
.rw-pill.s-available,.rw-pill.s-rewarded,.rw-pill.s-ref-rewarded{background:var(--ok-tint);border-color:#bcd9c9;color:#134b33}
.rw-pill.s-declined,.rw-pill.s-expired,.rw-pill.s-ref-blocked,.rw-pill.s-ref-capped,.rw-pill.s-ref-cancelled{background:#f7e3dd;border-color:#ebc3b8;color:#8c2a17}
.rw-mine{display:grid;gap:10px}
.rw-mine-item{display:grid;gap:8px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.rw-mine-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.rw-mine-top .rw-pill{margin-left:auto}
.rw-mine-item p{margin:0;color:var(--ink-2);font-size:.875rem;line-height:1.5}
.rw-progress{height:8px;overflow:hidden;border:1px solid var(--line);border-radius:99px;background:var(--surface-2)}
.rw-progress span{display:block;height:100%;background:var(--honey)}
/* Honey at checkout, product page and account */
.honey-box{display:grid;gap:8px;margin:0 0 14px;padding:12px;border:1px dashed #ecd28e;border-radius:var(--r);background:#fdf7e6}
.honey-toggle{display:flex;align-items:flex-start;gap:10px;font-size:.9375rem;cursor:pointer}
.honey-toggle input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--ink)}
.honey-toggle small{display:block;font-size:.8125rem;color:var(--ink-3)}
.honey-box .btn{justify-self:start}
.honey-note{margin:8px 0 0;font-size:.8125rem;line-height:1.5;color:var(--ink-3)}
.honey-box .honey-note{margin:0}
.honey-earn{display:flex;align-items:flex-start;gap:10px;margin:14px 0 10px;padding:10px 12px;border-radius:var(--r);background:#fdf7e6;color:#5e4100;font-size:.875rem;line-height:1.5}
.honey-earn .ic{flex:none;width:20px;height:20px;color:#a36f00}
.honey-earn a{color:#3d2a00;font-weight:600}
.success-box .honey-earn{justify-content:center;text-align:left}
.link-btn{margin-left:6px;padding:0;border:0;background:none;color:var(--ink-3);font:inherit;font-size:.8125rem;text-decoration:underline;cursor:pointer}
.link-btn:hover{color:var(--accent)}
.honey-hint{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:.875rem;color:var(--ink-2)}
.honey-hint .ic{flex:none;width:18px;height:18px;color:#a36f00}
.honey-hint a{font-weight:600}
.honey-card{display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:14px 16px;border-radius:var(--r-lg);background:var(--ink);color:#fff;text-decoration:none}
.honey-card:hover{background:#2b2520}
.honey-card-ic{display:grid;place-items:center;flex:none;width:42px;height:42px;background:var(--honey);color:var(--ink);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.honey-card-main{display:grid;flex:1;min-width:0}
.honey-card-main strong{font:700 1.25rem var(--head);color:var(--honey)}
.honey-card-main small{color:rgba(255,255,255,.75)}
.honey-card-go{font-size:.875rem;font-weight:600;white-space:nowrap}
@media (max-width:520px){.honey-card-go{display:none}}
.account-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 22px;font-size:.9375rem}
.account-links a{font-weight:600}
.oh-honey{font:600 .75rem var(--mono);color:#8a5a00}
/* ------------------------------------ rewards & requests (Nuclear) -- */
.rw-filters{display:flex;flex-wrap:wrap;gap:6px;margin:14px 22px 0}
.rw-filters a{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--line-2);border-radius:99px;background:var(--surface);color:var(--ink-2);font-size:.8125rem;font-weight:600;text-decoration:none}
.rw-filters a span{font:600 .75rem var(--mono);color:var(--ink-3)}
.rw-filters a:hover{border-color:var(--ink-3)}
.rw-filters a.active{border-color:var(--ink);background:var(--ink);color:#fff}
.rw-filters a.active span{color:rgba(255,255,255,.7)}
@media (max-width:620px){.rw-filters{margin-inline:16px}}
.rw-item{scroll-margin-top:80px}
.rw-item-head{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.rw-thumb{display:block;width:64px;height:64px;object-fit:cover;border:1px solid var(--line);border-radius:var(--r)}
.rw-item-title{flex:1;min-width:0}
.rw-item-title h3{margin:0;font-size:1rem;overflow-wrap:anywhere}
.rw-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:4px 0 0;font-size:.8125rem;color:var(--ink-3)}
.rw-meta b{color:var(--ink)}
.rw-warn{color:var(--warn);font-weight:600}
.rw-item-body{padding:12px 16px 0}
.rw-item-body p{margin:0 0 8px;font-size:.9375rem;line-height:1.5;overflow-wrap:anywhere}
.rw-link{font-family:var(--mono);font-size:.8125rem}
.rw-who{color:var(--ink-3)}
.admin-panel > .rw-item-form{padding:12px 16px 16px;border-top:1px dashed var(--line)}
.rw-item-form .field-group{margin-bottom:12px}
.rw-item-form textarea{min-height:0}
.rw-item-form > p{margin:0 0 10px}
.rw-item-form .row-actions{flex-wrap:wrap;align-items:center;margin-top:10px}
.rw-push{margin-left:auto}
.rw-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0 14px}
.rw-done{font-size:.9375rem}
.rw-track{padding:12px 16px 4px;display:grid;gap:8px}
.rw-track-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:.875rem;color:var(--ink-3)}
.rw-track-top b{font:700 1.125rem var(--head);color:var(--ink)}
.rw-track .rw-meta{margin:0}
.admin-panel.rw-terms p{padding-bottom:8px;font-size:.9375rem;line-height:1.55}
.admin-panel > .rw-terms-action{padding:0 16px 16px}
.rw-cost-rows{display:grid}
.rw-cost-row{display:grid;gap:2px;padding:12px 16px;border-bottom:1px solid var(--line)}
.rw-cost-row span{font-size:.8125rem;color:var(--ink-3)}
.rw-cost-row strong{font-size:.9375rem}
.rw-cost-row small{font-size:.8125rem;color:var(--warn);font-weight:600}
.rw-cost-row.warn{background:var(--warn-tint)}
.admin-panel.rw-cost > p.hint{padding:12px 16px 16px}
@media (min-width:1100px){.rw-settings-grid > .rw-cost{position:sticky;top:84px}}
.rw-set{padding-bottom:6px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.rw-set h3{margin:0 0 8px;font-size:.9375rem}
.rw-set .pay-toggle-row{margin-bottom:12px}
.rw-cust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:4px 24px;padding:14px 16px}
.rw-cust-grid .hint{margin:0 0 10px}
.rw-cust-balance{margin:0 0 6px;font-size:.9375rem}
.rw-cust-balance strong{font:700 1.75rem var(--head);color:var(--ink)}
.rw-cust-ledger{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-size:.8125rem}
.rw-cust-ledger li{display:flex;justify-content:space-between;gap:12px;color:var(--ink-3)}
.rw-cust-ledger b{font-family:var(--mono)}
.rw-cust-adjust .field-group{margin-bottom:10px}
.admin-table.rw-table-tight{min-width:0}
.dash-grid > .admin-panel{min-width:0}
/* ------------------------------------------- information pages (FAQs, policies) -- */
.info-page{padding-bottom:56px}
.info-hero{padding:30px 0 18px;border-bottom:1px solid var(--line)}
.info-hero .rw-kicker{margin-bottom:8px}
.info-hero h1{margin:0;font-size:clamp(1.85rem,4vw,2.6rem);line-height:1.08;letter-spacing:-.02em}
.info-hero .sub{margin:8px 0 0;color:var(--ink-3)}
.info-updated{margin:8px 0 0;font:500 .8125rem var(--mono);color:var(--ink-3)}
.info-layout{display:grid;gap:26px;margin-top:26px}
@media (min-width:900px){
.info-layout{grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start}
.info-side{position:sticky;top:96px}
}
.info-side{display:grid;gap:22px;align-content:start;min-width:0}
.info-side-head{margin:0 0 8px;font:600 .6875rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.info-toc ol,.info-nav ul,.contact-quick ul{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.info-toc a,.info-nav a,.contact-quick a{display:block;padding:6px 10px;border-radius:var(--r);color:var(--ink-2);font-size:.875rem;line-height:1.35;text-decoration:none}
.info-toc a:hover,.info-nav a:hover,.contact-quick a:hover{background:var(--surface);color:var(--ink)}
.info-nav a[aria-current="page"]{background:var(--ink);color:#fff}
@media (max-width:899px){
.info-side{order:2}
.info-toc{display:none}
.info-nav ul{display:flex;flex-wrap:wrap;gap:6px}
.info-nav a{border:1px solid var(--line-2);border-radius:99px;background:var(--surface)}
}
.prose{max-width:72ch;color:var(--ink-2);font-size:1rem;line-height:1.7;min-width:0}
.prose h2{margin:36px 0 10px;font-size:1.375rem;line-height:1.25;color:var(--ink);scroll-margin-top:100px}
.prose > h2:first-child,.prose > .faq-group:first-of-type > h2{margin-top:0}
.prose h3{margin:24px 0 6px;font-size:1.0625rem;line-height:1.35;color:var(--ink);scroll-margin-top:100px}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{display:grid;gap:6px;margin:0 0 16px;padding-left:22px}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--ink);font-weight:600;text-decoration-color:var(--accent);text-underline-offset:3px;overflow-wrap:anywhere}
.prose strong{color:var(--ink)}
.page-note{margin:0 0 22px;padding:14px 16px;border-left:3px solid var(--honey);border-radius:var(--r);background:#fdf7e6;color:#4d3600}
.faq-search{position:relative;margin-bottom:22px}
.faq-search .ic{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.faq-search input{width:100%;padding-left:42px}
.faq-empty{margin:0 0 22px;padding:14px 16px;border:1px dashed var(--line-2);border-radius:var(--r)}
.faq-group{margin-bottom:28px}
.faq-item{margin-bottom:8px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);scroll-margin-top:100px}
.faq-item summary{display:flex;justify-content:space-between;gap:14px;padding:14px 16px;font-weight:600;line-height:1.4;color:var(--ink);cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;font:500 1.25rem/1 var(--mono);color:var(--ink-3)}
.faq-item[open] summary::after{content:"\2212"}
.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-lg)}
.faq-a{padding:0 16px 2px}
.faq-a > :last-child{margin-bottom:14px}
.info-help{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:44px;padding:22px;border-radius:var(--r-lg);background:var(--ink);color:#fff}
.info-help h2{margin:0 0 4px;font-size:1.25rem;color:#fff}
.info-help p{margin:0;color:rgba(255,255,255,.75)}
.info-help-actions{display:flex;flex-wrap:wrap;gap:10px}
.info-help .btn-outline{border-color:rgba(255,255,255,.45);color:#fff}
.info-help .btn-outline:hover{border-color:#fff;background:#fff;color:var(--ink)}
/* ------------------------------------------- contact, track, order, account -- */
.contact-methods{display:grid;margin:0;padding:0;overflow:hidden;list-style:none;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.contact-methods li{display:grid;gap:2px;padding:12px 16px;border-bottom:1px solid var(--line)}
.contact-methods li:last-child{border-bottom:0}
.contact-methods span{font:600 .6875rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.contact-methods a,.contact-methods strong{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.contact-quick{padding:4px 0}
.order-card{display:grid;gap:12px;margin-top:14px}
.order-card-head,.order-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 14px}
.order-card-head h2{margin:0;font-size:1.25rem}
.order-card-head .hint{margin-top:2px}
.order-status-text{margin:0;font-weight:600;color:var(--ink)}
.order-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:4px 0 0;padding:0;list-style:none}
.order-steps li{position:relative;display:grid;justify-items:center;gap:6px;text-align:center;font-size:.8125rem;line-height:1.3;color:var(--ink-3)}
.order-steps li::before{content:"";position:absolute;top:8px;left:-50%;width:100%;height:2px;background:var(--line-2)}
.order-steps li:first-child::before{display:none}
.order-steps li.is-done::before,.order-steps li.is-current::before{background:var(--ok)}
.os-dot{position:relative;z-index:1;width:18px;height:18px;border:2px solid var(--line-2);border-radius:50%;background:var(--surface)}
.is-done .os-dot{border-color:var(--ok);background:var(--ok)}
.is-done .os-dot::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.is-current .os-dot{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
.is-done .os-label,.is-current .os-label{font-weight:600;color:var(--ink)}
.order-cancelled{margin:0;padding:12px 14px;border-radius:var(--r);background:var(--danger-tint);color:#6f170f}
.order-lines{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.order-lines li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px}
.order-lines img,.order-line-ph{display:block;width:48px;height:48px;object-fit:cover;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.order-line-name{font-weight:600;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.order-line-name a{color:inherit}
.order-line-name small{display:block;font-weight:400;font-size:.8125rem;color:var(--ink-3)}
.order-line-qty,.order-line-total{font:600 .875rem var(--mono);white-space:nowrap;color:var(--ink-2)}
.track-recent ul{display:grid;gap:2px;margin:0 0 12px;padding:0;list-style:none}
.track-recent li a{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.track-recent li a span{font-size:.8125rem;color:var(--ink-3)}
.track-recent strong{font:600 .875rem var(--mono)}
.order-page{padding-bottom:56px}
.order-back{margin:22px 0 0;font-size:.875rem}
.order-back a{color:var(--ink-3);text-decoration:none}
.order-back a:hover{color:var(--ink)}
.order-page > .flash{margin-top:14px}
.order-head{padding:10px 0 18px}
.order-head h1{margin:0;font-size:clamp(1.5rem,3.4vw,2.1rem)}
.order-head .sub{margin:4px 0 0}
.order-progress-card{display:grid;gap:14px}
.order-grid{display:grid;gap:16px;margin-top:16px}
@media (min-width:900px){.order-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);align-items:start}}
.order-grid .rw-card > h2{margin:0 0 14px;font-size:1.0625rem}
.order-side{display:grid;gap:16px;min-width:0}
.order-totals{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.order-again{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line)}
.order-address{margin:0 0 10px;line-height:1.55;color:var(--ink-2);overflow-wrap:anywhere}
.order-honey p{display:flex;align-items:flex-start;gap:10px;margin:0;color:#5e4100}
.order-honey .ic{flex:none;width:20px;height:20px;color:#a36f00}
.order-help{display:grid;gap:8px;margin:0;padding:0;list-style:none;font-size:.9375rem}
.order-help a{font-weight:600}
.success-actions{justify-content:center}
.acct-page{padding-bottom:56px}
.acct-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:20px;padding:28px 0 20px;border-bottom:1px solid var(--line)}
.acct-head > div{min-width:0}
.acct-head h1{margin:0;font-size:clamp(1.5rem,3.4vw,2rem)}
.acct-head .sub{margin:2px 0 0;overflow-wrap:anywhere}
.acct-avatar{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:50%;background:var(--ink);color:#fff;font:700 1.125rem var(--head)}
.acct-signout{margin-left:auto}
.acct-page > .flash{margin-bottom:16px}
.acct-layout{display:grid;gap:18px}
.acct-nav{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.acct-nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink-2);font-size:.9375rem;font-weight:600;text-decoration:none;white-space:nowrap}
.acct-nav a:hover{border-color:var(--ink-3);color:var(--ink)}
.acct-nav a[aria-current="page"]{border-color:var(--ink);background:var(--ink);color:#fff}
.acct-nav a span{font:600 .75rem var(--mono);opacity:.7}
@media (min-width:860px){
.acct-layout{grid-template-columns:220px minmax(0,1fr);gap:32px;align-items:start}
.acct-nav{position:sticky;top:96px;flex-direction:column;overflow:visible}
}
.acct-main{display:grid;gap:16px;align-content:start;min-width:0}
.acct-main > .error-box,.acct-main > .honey-card,.acct-main > .account-links,.acct-main > .hint,.acct-main > .empty-state{margin:0}
.acct-title{margin:4px 0 0;font-size:1.125rem}
.acct-orders{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.acct-order{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);text-decoration:none}
.acct-order:hover{border-color:var(--ink-3);box-shadow:var(--shadow)}
.acct-order-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.acct-order-top strong{font:600 .9375rem var(--mono)}
.acct-order-meta{grid-column:1;font-size:.8125rem;color:var(--ink-3)}
.acct-order-total{grid-column:2;grid-row:1 / span 2;align-self:center;font:700 1rem var(--head);white-space:nowrap}
.addr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px}
.addr-card{display:grid;align-content:start;gap:8px;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.addr-card.is-default{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.addr-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0}
.addr-badge{padding:2px 8px;border-radius:99px;background:var(--ink);color:#fff;font:600 .6875rem var(--mono);letter-spacing:.04em;text-transform:uppercase}
.addr-lines{margin:0;font-size:.9375rem;line-height:1.55;color:var(--ink-2);overflow-wrap:anywhere}
.addr-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.addr-actions form{margin:0}
.addr-form{scroll-margin-top:100px}
.acct-danger .sub{line-height:1.55}
.auth-forgot{align-self:flex-end;font-size:.8125rem;font-weight:600}
.auth-legal{margin:12px 0 0;font-size:.8125rem;line-height:1.5;text-align:center;color:var(--ink-3)}
/* checkout addresses, product share and footer links */
.saved-address .hint a{font-weight:600}
.save-address{display:flex;align-items:center;gap:10px;margin:2px 0 0;font-size:.9375rem;cursor:pointer}
.save-address input{flex:none;width:18px;height:18px;min-height:0;accent-color:var(--ink)}
.checkout-legal a{font-weight:600}
.detail-share.is-earn{border-color:#ecd28e;background:#fdf7e6;color:#5e4100}
.detail-share.is-earn:hover{border-color:#a36f00;color:#3d2a00}
.share-note{margin:10px 0 0;padding:10px 12px;border-radius:var(--r);background:#fdf7e6;color:#5e4100;font-size:.8125rem;line-height:1.5}
.share-note a{font-weight:600;color:#3d2a00}
.footer-social{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px}
.footer-legal{display:flex;flex-wrap:wrap;gap:4px 16px}
.site-footer .footer-legal a{color:#b8afa5}
.site-footer .footer-legal a:hover{color:#fff}
/* Nuclear → Pages & messages */
@media (min-width:1100px){.pg-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.pg-editor textarea{width:100%;min-height:520px;font:.875rem/1.6 var(--mono);resize:vertical}
.admin-panel.pg-help > p,.admin-panel.pg-help > ul{padding:0 16px;margin:12px 0}
.admin-panel.pg-help > h3{margin:18px 16px 0;font-size:.875rem}
.pg-help p{font-size:.875rem;line-height:1.7;color:var(--ink-2)}
.pg-help code{padding:0 4px;border:1px solid var(--line);border-radius:3px;background:var(--surface-2);font:.8125rem var(--mono)}
.pg-tokens{display:grid;gap:4px;list-style:none}
.pg-tokens li{display:flex;justify-content:space-between;gap:10px;font-size:.8125rem}
.pg-tokens li span{text-align:right;color:var(--ink-3);overflow-wrap:anywhere}
.msg-body{white-space:pre-wrap}
.rw-pill.s-msg-new{background:var(--accent-tint);border-color:#ebc3b8;color:#8c2a17}
.rw-pill.s-msg-replied{background:var(--ok-tint);border-color:#bcd9c9;color:#134b33}
/* ------------------------------------------------ Nuclear notification bell -- */
.admin-bell{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:var(--r);background:rgba(255,255,255,.06);color:#d9d2ca;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.admin-bell:hover,.admin-bell[aria-expanded="true"]{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3);color:#fff}
.admin-bell:focus-visible{outline:2px solid #e8694a;outline-offset:2px}
.admin-bell svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 12%}
.admin-bell.is-ringing svg{animation:bellRing .9s ease-in-out}
@keyframes bellRing{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-13deg)}45%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}}
.bell-count{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:99px;background:var(--accent);color:#fff;font:600 .625rem/1 var(--mono)}
.bell-count[hidden]{display:none}
.bell-panel{position:fixed;z-index:900;top:58px;left:244px;width:min(400px,calc(100vw - 24px));max-height:min(620px,calc(100dvh - 76px));display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 2px 6px rgba(29,25,22,.08),0 30px 80px -20px rgba(29,25,22,.45);animation:cmdkIn .2s cubic-bezier(.2,.9,.3,1.1)}
.bell-panel[hidden]{display:none}
@media (max-width:900px){.bell-panel{top:64px;left:12px;right:12px;width:auto;max-height:calc(100dvh - 76px)}}
.bell-head,.bell-foot{display:flex;align-items:center;gap:8px 14px;padding:12px 14px;background:var(--surface-2)}
.bell-head{border-bottom:1px solid var(--line)}
.bell-head strong{font:700 1rem var(--head);color:var(--ink)}
.bell-head .bell-link{margin-left:auto}
.bell-foot{flex-wrap:wrap;border-top:1px solid var(--line)}
.bell-foot-end{margin-left:auto}
.bell-foot a,.bell-link{padding:0;border:0;background:none;font:600 .8125rem var(--body);color:var(--accent-ink);text-decoration:none;cursor:pointer}
.bell-foot a:hover,.bell-link:hover{color:var(--accent);text-decoration:underline}
.bell-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px}
.bell-empty{margin:0;padding:30px 18px;text-align:center;font-size:.875rem;color:var(--ink-3)}
.bell-item{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:10px 12px 10px 10px;border-radius:var(--r);color:var(--ink);text-decoration:none}
a.bell-item:hover{background:var(--surface-2);text-decoration:none;color:var(--ink)}
.bell-item.is-unread{background:var(--accent-tint)}
.bell-item.is-unread::after{content:"";position:absolute;top:15px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.bell-ic{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:var(--paper);font-size:1rem;line-height:1}
.bell-main{display:grid;gap:2px;min-width:0;padding-right:16px}
.bell-title{font-size:.875rem;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.bell-body{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;white-space:pre-line;font-size:.8125rem;line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere}
.bell-time{font:500 .6875rem var(--mono);color:var(--ink-3)}
.bell-toasts{position:fixed;z-index:950;right:16px;bottom:16px;display:grid;gap:10px;width:min(360px,calc(100vw - 32px))}
.bell-toast{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:12px 38px 12px 12px;border-radius:var(--r-lg);background:var(--ink);color:#fff;text-decoration:none;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);animation:bellToastIn .28s cubic-bezier(.2,.9,.3,1.1);transition:opacity .25s,transform .25s}
a.bell-toast:hover{background:#2b2520;color:#fff;text-decoration:none}
.bell-toast .bell-ic{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.1)}
.bell-toast .bell-title{color:#fff}
.bell-toast .bell-body{-webkit-line-clamp:2;line-clamp:2;color:rgba(255,255,255,.75)}
.bell-toast.is-out{opacity:0;transform:translateY(8px)}
.bell-toast-x{position:absolute;top:6px;right:6px;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.7);font-size:1.15rem;line-height:1;cursor:pointer}
.bell-toast-x:hover{background:rgba(255,255,255,.12);color:#fff}
@keyframes bellToastIn{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){.admin-bell.is-ringing svg,.bell-toast,.bell-panel{animation:none}}
/* Nuclear → Notifications */
.nt-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.nt-item:last-child{border-bottom:0}
.nt-item.is-new{background:var(--accent-tint)}
.nt-item .bell-ic{width:38px;height:38px}
.nt-title{margin:0;font-weight:600;overflow-wrap:anywhere}
.nt-title a{color:var(--ink)}
.nt-body{margin:2px 0 0;white-space:pre-line;font-size:.875rem;color:var(--ink-2);overflow-wrap:anywhere}
.nt-meta{display:grid;justify-items:end;gap:4px;font-size:.75rem;color:var(--ink-3);text-align:right;white-space:nowrap}
@media (max-width:620px){.nt-item{grid-template-columns:34px minmax(0,1fr)}.nt-meta{grid-column:2;justify-items:start;text-align:left}}
.tg-chat-row{display:flex;gap:8px}
.tg-chat-row input{flex:1;min-width:0}
.tg-found{display:grid;gap:8px;margin:-4px 0 14px}
.tg-chat{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.tg-chat .btn{margin-left:auto}
.tg-events{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:4px 16px;margin:0 0 14px}
.admin-panel > form.tg-test{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-top:0}
.tg-steps{margin:0;padding:14px 18px 4px 38px;display:grid;gap:8px;line-height:1.55}
.tg-steps code{padding:0 4px;border:1px solid var(--line);border-radius:3px;background:var(--surface-2);font:.8125rem var(--mono)}
/* checkout delivery */
.delivery-area{display:block;font-size:.75rem;font-weight:400;color:var(--ink-3)}
.delivery-hint{margin:10px 0 0;padding:8px 12px;border-radius:var(--r);background:var(--surface-2);border:1px dashed var(--line-2);font-size:.8125rem;line-height:1.45;color:var(--ink-2)}
.delivery-hint.is-free{background:var(--ok-tint);border-color:#bcd9c9;color:#134b33}
/* ── stars, ratings and reviews ────────────────────────────────────────── */
.stars{display:inline-block;line-height:0;vertical-align:middle}
.stars svg{display:block;width:auto;height:1em}
.stars-xs{font-size:13px}
.stars-sm{font-size:15px}
.stars-lg{font-size:22px}
.stars-bg{fill:var(--line-2)}
.stars-fill{fill:var(--honey)}
.card-rating{display:flex;align-items:center;gap:6px;margin:0 0 2px;font-size:.75rem;color:var(--ink-3)}
.card-rating span{font-variant-numeric:tabular-nums}
.rating-line{
display:inline-flex;align-items:center;gap:8px;margin:0 0 6px;
font-size:.875rem;color:var(--ink-2);text-decoration:none;
}
.rating-line:hover{color:var(--ink);text-decoration:none}
.rating-line span{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.rating-line strong{font-variant-numeric:tabular-nums}
.reviews{margin-top:46px;padding-top:30px;border-top:1px solid var(--line);scroll-margin-top:90px}
.reviews > h2{margin:0 0 18px;font-size:1.5rem}
.reviews-none{margin:0;color:var(--ink-3);max-width:60ch}
.reviews-summary{
display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;
max-width:620px;margin-bottom:26px;padding:18px 20px;
border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
}
.reviews-score{display:grid;justify-items:center;gap:4px;min-width:120px}
.reviews-score strong{font:700 2.5rem/1 var(--head);letter-spacing:-.02em}
.reviews-score span{font-size:.8125rem;color:var(--ink-3)}
.reviews-bars{display:grid;gap:5px;margin:0;padding:0;list-style:none;max-width:340px}
.reviews-bars li{display:grid;grid-template-columns:34px minmax(0,1fr) 28px;align-items:center;gap:9px;font-size:.8125rem;color:var(--ink-3)}
.rb-star{font-variant-numeric:tabular-nums;white-space:nowrap}
.rb-track{height:7px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.rb-fill{display:block;height:100%;background:var(--honey)}
.rb-n{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:620px){
.reviews-summary{grid-template-columns:1fr;gap:18px;justify-items:start}
.reviews-score{justify-items:start}
.reviews-bars{max-width:none;width:100%}
}
.review-list{display:grid;gap:2px;margin:0 0 20px;padding:0;list-style:none}
.review{padding:16px 0;border-bottom:1px solid var(--line)}
.review-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:5px}
.review-who{font-weight:600}
.review-verified{font:600 .6875rem var(--mono);letter-spacing:.04em;color:var(--ok)}
.review-head time{margin-left:auto;font-size:.75rem;color:var(--ink-3)}
.review-opt{margin:0 0 5px;font:500 .75rem var(--mono);color:var(--ink-3)}
.review-body{margin:0;line-height:1.6;overflow-wrap:anywhere}
.review-reply{margin:10px 0 0 0;padding:11px 14px;border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0;background:var(--surface-2)}
.review-reply p{margin:0;line-height:1.55}
.review-reply-who{font:600 .6875rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:3px !important}
.review.is-sk{display:grid;gap:7px}
.review.is-sk .sk-stars{display:block;width:88px;height:15px;border-radius:99px}
.more-reviews.is-busy{opacity:.6;cursor:progress}
/* ── rate your order (review.php) ── */
.review-page{max-width:760px}
.review-item{padding:20px 0;border-top:1px solid var(--line)}
.review-item:first-of-type{border-top:0;padding-top:4px}
.review-item-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.review-item-head h2{margin:0;font-size:1.0625rem}
.star-pick{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:3px;min-width:0;margin:0 0 14px;padding:0;border:0;background:none}
.star-pick input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.star-pick label{display:grid;place-items:center;padding:3px;cursor:pointer;line-height:0;border-radius:var(--r)}
.star-pick svg{width:32px;height:32px;fill:var(--line-2);transition:fill .15s ease, transform .15s ease}
/* the chosen star and everything before it — the row is reversed, so "before" is a following sibling */
.star-pick input:checked ~ label svg,
.star-pick label:hover svg,
.star-pick label:hover ~ label svg{fill:var(--honey)}
.star-pick label:hover svg{transform:scale(1.12)}
.star-pick input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}
.review-external{margin-top:34px;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.review-external h2{margin:0 0 4px;font-size:1.125rem}
.review-external p{margin:0 0 12px;color:var(--ink-3)}
.review-external-links{display:flex;flex-wrap:wrap;gap:10px;margin:0 !important}
.review-back{margin-top:26px}
.order-review-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.order-review-card h2{margin:0 0 2px;font-size:1.0625rem}
.order-review-card .sub{margin:0}
/* ── Nuclear → Reviews ── */
.rv-item{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line)}
.rv-item:last-of-type{border-bottom:0}
.rv-item.is-hidden{opacity:.62}
.rv-main{flex:1 1 420px;min-width:0}
.rv-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:4px}
.rv-when{margin-left:auto;font:500 .6875rem var(--mono);color:var(--ink-3)}
.rv-product{margin:0 0 6px;font-size:.8125rem;color:var(--ink-3)}
.rv-body{margin:0;line-height:1.55;overflow-wrap:anywhere}
.rv-reply{margin-top:10px}
.rv-reply summary{cursor:pointer;font:600 .8125rem var(--body);color:var(--accent-ink)}
.rv-reply form{margin-top:8px;display:grid;gap:8px;justify-items:start}
.rv-reply textarea{width:100%}
.rv-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch}
@media (max-width:640px){ .rv-actions{flex-direction:row} }
/* ── skeletons in the admin search palette and the shop chat ── */
.cmdk-sk{display:grid;gap:4px;padding:8px}
.cmdk-sk-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px}
.cmdk-sk .sk-ic{display:block;width:28px;height:28px;border-radius:var(--r)}
.aic-sk{display:grid;gap:10px;padding:6px 0}
.aic-sk-row{display:flex}
.aic-sk-row.is-user{justify-content:flex-end}
.aic-sk-bubble{display:block;width:62%;height:44px;border-radius:var(--r-lg)}
.aic-sk-row.is-user .aic-sk-bubble{width:44%}
/* ── launch landing page (launching.php) ───────────────────────────────────
Standalone: it doesn't use the site header or footer, so everything it needs is here. */
.launch-body{
margin:0;min-height:100dvh;
background:var(--ink);color:var(--paper);
font-family:var(--body);
-webkit-font-smoothing:antialiased;
}
.launch-body.is-bn{font-family:'Noto Sans Bengali',var(--body)}
.launch-body.is-bn h1,.launch-body.is-bn h2,.launch-body.is-bn h3{font-family:'Noto Sans Bengali',var(--head)}
.launch-body.is-bn .launch-kicker,.launch-body.is-bn .cd-l,.launch-body.is-bn .launch-trust span{letter-spacing:0;text-transform:none}
/* the honeycomb texture, drawn once and tiled — the same idea as the posters */
.launch-hex{
position:fixed;inset:0;z-index:0;pointer-events:none;
background-image:url("data:image/svg+xml,");
background-size:84px 48.5px;
-webkit-mask-image:radial-gradient(120% 90% at 100% 0%, #000 10%, transparent 62%);
mask-image:radial-gradient(120% 90% at 100% 0%, #000 10%, transparent 62%);
opacity:.75;
}
@media (max-width:700px){ .launch-hex{background-size:63px 36.4px} }
.launch{position:relative;z-index:1;width:min(100% - 40px, 760px);margin:0 auto;padding:26px 0 56px}
.launch-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:40px}
.launch-logo{display:block;height:26px;width:auto}
.launch-lang{
padding:6px 13px;border:1px solid rgba(247,244,239,.28);border-radius:99px;
font:600 .8125rem var(--body);color:var(--paper);text-decoration:none;
transition:background-color .2s ease,border-color .2s ease;
}
.launch-lang:hover{background:rgba(247,244,239,.1);border-color:rgba(247,244,239,.5);color:#fff;text-decoration:none}
.launch-hero{margin-bottom:34px}
.launch-kicker{
margin:0 0 20px;font:600 .75rem var(--mono);letter-spacing:.18em;text-transform:uppercase;
color:var(--accent-light);
}
.launch-mark{display:block;width:104px;height:auto;margin-bottom:26px;overflow:visible}
/* The mark builds itself once, cell by cell, then stays put. It is the logo, so it is
never left mid-dissolve — the brand pack is clear that the mark takes no effects. */
.launch-cell{
fill:var(--accent-light);
transform-box:fill-box;transform-origin:center;
animation:launch-cell .62s cubic-bezier(.3,1.5,.5,1) backwards;
animation-delay:calc(200ms + var(--cell) * 110ms);
}
@keyframes launch-cell{
from{opacity:0;transform:scale(.55) rotate(-40deg)}
to{opacity:1;transform:none}
}
.launch h1{
margin:0 0 16px;
font:700 clamp(2.5rem, 9vw, 4.25rem)/1.02 var(--head);
letter-spacing:-.03em;
}
.launch h1 span{display:block}
.launch h1 .accent{color:var(--accent-light)}
.launch-sub{margin:0 0 30px;max-width:46ch;font-size:1.0625rem;line-height:1.6;color:rgba(247,244,239,.78)}
.launch-count{margin-top:6px}
.launch-count-label{margin:0 0 12px;font:500 .875rem var(--body);color:rgba(247,244,239,.7)}
.launch-count-label strong{color:var(--paper)}
.launch-count ul{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.launch-count li{
display:grid;justify-items:center;gap:3px;min-width:78px;padding:12px 10px;
border:1px solid rgba(247,244,239,.16);border-radius:var(--r-lg);background:rgba(247,244,239,.05);
}
.cd-n{font:700 1.875rem/1 var(--head);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cd-l{font:600 .625rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(247,244,239,.6)}
@media (max-width:480px){ .launch-count li{min-width:0;flex:1 1 68px;padding:10px 6px} .cd-n{font-size:1.5rem} }
.launch-open{margin:0 0 16px;font:700 1.25rem var(--head);color:var(--accent-light)}
.launch-card{
padding:26px;margin-bottom:34px;
border:1px solid rgba(247,244,239,.16);border-radius:var(--r-lg);
background:rgba(247,244,239,.06);
}
.launch-card h2{margin:0 0 6px;font:700 1.375rem var(--head);letter-spacing:-.01em}
.launch-card-sub{margin:0 0 18px;color:rgba(247,244,239,.72)}
.launch-reward{
margin:0 0 18px;padding:11px 14px;
border-left:3px solid var(--honey);border-radius:0 var(--r) var(--r) 0;
background:rgba(232,163,23,.12);font-size:.9375rem;line-height:1.5;
}
.launch-invited{margin:0 0 16px;font:500 .875rem var(--body);color:var(--accent-light)}
.launch-form .field-group{margin-bottom:16px}
.launch-form label{display:block;margin-bottom:6px;font-weight:600;font-size:.875rem;color:var(--paper)}
.launch-form input{
width:100%;padding:12px 14px;
border:1px solid rgba(247,244,239,.24);border-radius:var(--r);
background:rgba(26,22,19,.55);color:var(--paper);
font:400 1rem var(--body);
}
.launch-body.is-bn .launch-form input{font-family:'Noto Sans Bengali',var(--body)}
.launch-form input::placeholder{color:rgba(247,244,239,.4)}
.launch-form input:focus{outline:3px solid var(--accent-light);outline-offset:1px;border-color:var(--accent-light)}
.launch-form .hint{display:block;margin-top:5px;font-size:.8125rem;color:rgba(247,244,239,.55)}
.launch-btn{width:100%;margin-top:6px;padding:14px 20px;font-size:1rem}
.launch-hero .launch-btn{width:auto;display:inline-block}
.launch-counter{
display:flex;align-items:center;gap:8px;margin:16px 0 0;
font-size:.875rem;color:rgba(247,244,239,.72);
}
.launch-dot{
width:8px;height:8px;border-radius:50%;background:#5dc798;flex:none;
animation:launch-pulse 2.2s ease-out infinite;
}
@keyframes launch-pulse{
0%{box-shadow:0 0 0 0 rgba(93,199,152,.6)}
70%{box-shadow:0 0 0 9px rgba(93,199,152,0)}
100%{box-shadow:0 0 0 0 rgba(93,199,152,0)}
}
.launch-invite{margin-top:22px;padding-top:20px;border-top:1px solid rgba(247,244,239,.16)}
.launch-invite h3{margin:0 0 5px;font:700 1.0625rem var(--head)}
.launch-invite > p{margin:0 0 14px;font-size:.9375rem;line-height:1.55;color:rgba(247,244,239,.75)}
.launch-invite-row{display:flex;gap:8px;margin-bottom:12px}
.launch-invite-row input{
flex:1;min-width:0;padding:10px 12px;
border:1px solid rgba(247,244,239,.24);border-radius:var(--r);
background:rgba(26,22,19,.55);color:var(--paper);
font:500 .8125rem var(--mono);
}
.launch-invite-row .btn{flex:none;white-space:nowrap}
.launch-share{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 12px}
.launch-share .btn-outline{border-color:rgba(247,244,239,.3);color:var(--paper)}
.launch-share .btn-outline:hover{background:rgba(247,244,239,.1);border-color:var(--paper);color:#fff}
.launch-invite-count{margin:0;font:500 .8125rem var(--mono);color:rgba(247,244,239,.6)}
.launch-again{margin:18px 0 0}
.launch-again a{color:rgba(247,244,239,.7);font-size:.875rem}
@media (max-width:460px){ .launch-invite-row{flex-direction:column} .launch-invite-row .btn{width:100%} }
.launch-cats{margin-bottom:28px}
.launch-cats h2{margin:0 0 14px;font:600 .75rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(247,244,239,.55)}
.launch-cats ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 22px;margin:0;padding:0;list-style:none}
.launch-cats li{display:flex;align-items:center;gap:10px;font-size:1rem}
.launch-cat-dot{width:9px;height:9px;flex:none;background:var(--accent-light);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.launch-trust{
display:flex;flex-wrap:wrap;gap:8px 22px;
padding:16px 0;margin-bottom:26px;
border-top:1px solid rgba(247,244,239,.16);border-bottom:1px solid rgba(247,244,239,.16);
}
/* Paper at 72% is comfortably over 4.5:1 on ink — the small print has to stay readable on a phone */
.launch-trust span{font:600 .75rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(247,244,239,.72)}
.launch-foot{display:grid;gap:14px}
.launch-follow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0}
.launch-follow-label{font:600 .6875rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(247,244,239,.55)}
.launch-body.is-bn .launch-follow-label{font-family:'Noto Sans Bengali',var(--body);letter-spacing:0;text-transform:none;font-size:.8125rem}
/* Each mark sits in a hexagon cell, so the row reads as part of the honeycomb */
.launch-social{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.launch-social a{display:block;text-decoration:none;border-radius:var(--r)}
.launch-social-cell{
display:grid;place-items:center;width:42px;height:38px;
background:rgba(247,244,239,.08);
clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
transition:background-color .2s ease, transform .2s cubic-bezier(.3,1.4,.5,1);
}
.launch-social svg{
width:20px;height:20px;display:block;
fill:none;stroke:var(--paper);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
transition:stroke .2s ease;
}
.launch-social a:hover .launch-social-cell,
.launch-social a:focus-visible .launch-social-cell{background:var(--accent);transform:translateY(-2px)}
.launch-social a:hover svg,
.launch-social a:focus-visible svg{stroke:#fff}
.launch-social a:focus-visible{outline:2px solid var(--accent-light);outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .launch-social-cell{transition:background-color .2s ease} }
.launch-host{margin:0;font:500 .75rem var(--mono);letter-spacing:.06em;color:rgba(247,244,239,.5)}
@media (prefers-reduced-motion:reduce){
.launch-cell{animation:none;opacity:1;transform:none}
.launch-dot{animation:none}
}