/* ============ Veyora storefront — design tokens from veyora.com ============ */
:root{
--ink:#221F20; /* header / primary dark */
--ink-2:#131e42; /* deep navy accent */
--ink-3:#32204e; /* deep purple accent */
--accent:#324264; /* slate blue */
--muted:#64748b;
--line:#e2e8f0;
--bg:#fafbfc;
--card:#ffffff;
--soft-blue:#ebf3f9;
--soft-purple:#f1e3f7;
--ok:#15803d;
--warn:#b45309;
--bad:#b91c1c;
--radius:6px;
/* Status labels and chips. Fully-round shapes are reserved for things that
genuinely are round - a count bubble, a circular icon button. A status
badge is a LABEL, and a label with a straight edge reads as trade
software rather than as a consumer app. */
--radius-badge:2px;
--radius-chip:4px;
/* One shadow, close to the surface. The previous pair stacked a tight
shadow under a wide soft one, which lifted every card off the page and
made a dense ordering screen look like a set of floating tiles. */
--shadow:0 1px 2px rgba(19,30,66,.07),0 1px 6px rgba(19,30,66,.05);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
/* interactive controls: no text-selection / long-press copy callout on touch */
button,.vrow,.fchip,.chip,.qtybox,.nav a,.pcard2,.thumbstrip img,.vthumbs .vthumb,
.vthumbs img,.lb-stage,.lb-dots,.imgbox.big,.pager,.stockpill{
-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* never allow the page itself to pan sideways (inner scrollers unaffected) */
/* Clip sideways overflow on body only. Putting overflow-x on BOTH html and
body makes iOS treat position:fixed as position:absolute, so the phone
bottom nav ("black filter") scrolls with the page. */
body{overflow-x:clip}
@supports not (overflow:clip){body{overflow-x:hidden}}
/* Montserrat is named first and used if the machine already has it; nothing
fetches it. The fallbacks are a geometric-leaning system stack, so the
portal renders in a face of the right character everywhere without a
third-party request on an authenticated page. Same approach, and the same
reasoning, as the admin panel's --font. */
body{font-family:'Montserrat','Avenir Next','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45}
a{color:var(--accent);text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:16px}
img{max-width:100%}
/* ---------- layout shell ----------
Light chrome matching the marketing homepage header (client: no black bar).
White surface, dark ink controls, black wordmark. */
html,body{height:100%}
body{overflow-y:auto}
#app{min-height:100%}
.app-shell{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden}
.app-shell > .app-body{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.app-shell > .app-body > .page{flex:1 1 auto;width:100%;box-sizing:border-box;padding-bottom:24px}
/* Document footer — not glued to the viewport. Copyright and legal links
at the end of the page you scroll. */
.site-foot{flex:0 0 auto;margin-top:auto;background:#fff;color:rgba(28,25,23,.6);font-weight:400;
padding-inline-end:calc(26px + 56px + 16px)}
body.hm-dark .site-foot{padding-inline-end:calc(22px + 48px + 16px)}
.site-foot-legal{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;padding:13px clamp(20px,4vw,40px);background:#fff;border-top:1px solid #eee;font-size:12px;font-weight:400;color:rgba(28,25,23,.6)}
.site-foot-copy{flex:0 1 auto;font-weight:400}
.site-foot-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0}
.site-foot-links a{color:rgba(28,25,23,.75);display:inline-flex;align-items:center;min-height:34px;font-weight:400}
.site-foot-links a:hover{color:#1c1917}
.site-foot-links i{color:#ccc;font-style:normal;margin:0 10px;font-weight:400}
/* Talk to sales: WhatsApp, email, or a phone call — not WhatsApp only.
The menu is `position:fixed` from JS so a parent `overflow:hidden` (the
homepage hero) cannot clip it, and so it stays on-screen on a phone. */
.sales-pick{position:relative;display:inline-block}
.sales-pick > summary{list-style:none;cursor:pointer}
.sales-pick > summary::-webkit-details-marker{display:none}
.sales-pick-block{display:block;width:100%}
.sales-pick-block > summary.login-btn{width:100%}
.sales-pick-menu{
position:absolute;z-index:80;top:calc(100% + 6px);inset-inline-start:0;
min-width:200px;max-width:calc(100vw - 24px);padding:6px 0;
background:#fff;border:1px solid var(--line);
box-shadow:0 10px 28px rgba(19,30,66,.12);text-align:start}
.sales-pick-menu a{
display:flex;flex-direction:column;gap:2px;padding:10px 16px;
color:var(--ink);font-size:13px;font-weight:400;line-height:1.35;min-height:44px;
justify-content:center;letter-spacing:0;text-transform:none}
.sales-pick-menu a:hover{background:#f8fafc;color:var(--ink-2)}
.sales-pick-name{font-weight:500}
.sales-pick-menu span{font-size:12px;font-weight:400;color:var(--muted);direction:ltr;unicode-bidi:isolate}
.sales-pick-menu .sales-pick-name{font-size:13px;color:var(--ink)}
.site-foot-links .sales-pick{display:inline-flex;vertical-align:middle}
.site-foot-links .sales-pick > summary{
color:rgba(28,25,23,.75);display:inline-flex;align-items:center;min-height:34px;
font-size:12px;font-weight:400;letter-spacing:0;text-transform:none}
.site-foot-links .sales-pick > summary:hover{color:#1c1917}
.site-foot-links .sales-pick-menu a{min-height:44px;color:var(--ink);font-weight:400}
.topbar{position:sticky;top:0;z-index:40;background:#fff;color:#191612;display:flex;align-items:center;gap:10px;padding:0 18px;height:58px;border-bottom:1px solid rgba(25,22,18,.14);flex:0 0 auto}
.topbar .logo-link{display:flex;align-items:center;line-height:0}
.topbar .logo{font-weight:800;letter-spacing:.24em;font-size:19px;color:#191612;cursor:pointer;user-select:none;width:126px;height:auto}
.topbar .logo span{color:#8f6db3}
.topbar .spacer{flex:1}
.topbar .icon-btn{position:relative;background:none;border:none;color:#191612;font-size:20px;padding:8px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.topbar .icon-btn svg{width:20px;height:20px;display:block}
.topbar .icon-btn:hover{background:rgba(25,22,18,.08)}
.topbar .present-toggle svg{display:block}
.topbar .present-toggle.on{background:#8f6db3;color:#fff}
.topbar .present-toggle.on:hover{background:#9a78bf}
/* presentation-mode banner (agent is hiding their prices to show customers) */
.present-bar{
display:flex;align-items:center;justify-content:space-between;gap:12px;
background:var(--ink-3);color:#fff;padding:10px 18px;font-size:13px;font-weight:600;
}
.present-bar-copy{display:flex;align-items:flex-start;gap:10px;min-width:0;flex:1 1 auto}
.present-bar-icon{display:flex;flex:none;margin-top:1px}
.present-bar-icon svg,.present-bar svg{width:16px;height:16px;flex:none}
.present-bar-text{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.35}
.present-bar-text strong{font-weight:700;font-size:13.5px}
.present-bar-sub{font-weight:500;font-size:12.5px;opacity:.88}
.present-bar button{
background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.4);
border-radius:999px;padding:7px 15px;font-weight:600;font-size:12.5px;cursor:pointer;
white-space:nowrap;flex:0 0 auto;
}
.present-bar button:hover{background:rgba(255,255,255,.28)}
@media(max-width:640px){
.present-bar{
flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px;
}
.present-bar-copy{align-items:flex-start}
.present-bar button{width:100%;text-align:center;padding:10px 14px}
}
.topbar .badge{position:absolute;top:2px;right:0;background:#8f6db3;color:#fff;font-size:10px;font-weight:700;border-radius:999px;min-width:16px;height:16px;line-height:16px;text-align:center;padding:0 3px}
.nav{position:sticky;top:58px;z-index:39;display:flex;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:0 8px 0 16px;flex:0 0 auto}
.nav-track{display:flex;gap:2px;flex:1 1 auto;min-width:0;overflow:hidden}
.nav-track > a{flex:0 0 auto}
.nav a{padding:11px 13px;font-weight:600;font-size:13px;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent}
.nav a.active{color:var(--ink-2);border-bottom-color:var(--ink-2)}
.nav-overflow{position:relative;flex:0 0 auto;display:none;align-items:stretch}
.nav.has-more .nav-overflow{display:flex}
.nav-more-btn{background:none;border:0;padding:11px 16px;font:inherit;font-weight:600;font-size:13px;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;cursor:pointer}
.nav-more-btn:hover,.nav-more-btn[aria-expanded="true"]{color:var(--ink-2)}
.nav-more-btn[aria-expanded="true"]{border-bottom-color:var(--ink-2)}
.nav-more-menu{position:absolute;top:calc(100% - 1px);right:0;z-index:50;min-width:220px;padding:6px 0;background:#fff;border:1px solid var(--line);border-radius:0 0 8px 8px;box-shadow:0 10px 28px rgba(19,30,66,.12)}
.nav-more-menu a{display:block;padding:10px 16px;border-bottom:0}
.nav-more-menu a:hover{background:#f8fafc;color:var(--ink-2)}
.nav-more-menu a.active{background:var(--soft-blue);color:var(--ink-2);box-shadow:inset 3px 0 0 var(--ink-2)}
.page{max-width:1280px;margin:0 auto;padding:18px 16px 90px}
h1.pagetitle{font-size:20px;font-weight:700;margin-bottom:14px}
h1.pagetitle.page-head{
display:flex;justify-content:space-between;align-items:center;
gap:12px;flex-wrap:wrap;
}
h1.page-head > span{min-width:0}
h1.page-head > .btn{flex:0 0 auto;white-space:nowrap}
.sub{color:var(--muted);font-size:13px}
/* ---------- dashboard (post-login landing, old-site look) ---------- */
.welcome-card h1{font-size:22px;font-weight:700;margin-bottom:2px}
.welcome-card .sub{font-size:13.5px}
.dash-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.dash-links a{background:#fff;border:1px solid var(--line);border-radius:var(--radius-chip);padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.dash-links a:hover{background:var(--soft-blue)}
.dash-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:14px}
@media(max-width:900px){.dash-tiles{grid-template-columns:repeat(2,1fr)}}
/* old-site tile: soft icon chip on the left, number + label beside it */
.dtile{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;cursor:pointer;transition:transform .12s,border-color .12s;display:flex;align-items:center;gap:13px;min-height:92px}
.dtile:hover{transform:translateY(-2px)}
.dtile .chip{flex:0 0 46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center}
.dtile .chip svg{width:24px;height:24px}
.dtile .tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.dtile b{font-size:24px;font-weight:800;line-height:1.1}
.dtile span{font-size:12.5px;font-weight:600;color:var(--muted)}
.dtile i.sub{font-style:normal;font-size:11.5px;min-height:14px}
.dtile select{position:absolute;top:8px;right:8px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:11px;padding:2px 4px;color:var(--muted);max-width:46%}
.dtile.t-orders .chip{background:#f1f5f9;color:#475569} .dtile.t-orders b{color:var(--ink-2)} .dtile.t-orders:hover{border-color:var(--ink-2)}
.dtile.t-cart .chip{background:#dcfce7;color:var(--ok)} .dtile.t-cart b{color:var(--ok)} .dtile.t-cart:hover{border-color:var(--ok)}
.dtile.t-ctot .chip{background:#dbeafe;color:#2563eb} .dtile.t-ctot b{color:#2563eb} .dtile.t-ctot:hover{border-color:#2563eb}
.dtile.t-back .chip{background:#fef3c7;color:var(--warn)}.dtile.t-back b{color:var(--warn)} .dtile.t-back:hover{border-color:var(--warn)}
.dtile.t-ret .chip{background:var(--soft-purple);color:var(--ink-3)}.dtile.t-ret b{color:var(--ink-3)}.dtile.t-ret:hover{border-color:var(--ink-3)}
/* ---------- app shell under 900px (old-site layout: burger + centered
logo, bottom tab bar, everything else in the drawer) ---------- */
.burger{display:none;background:none;border:none;color:#191612;padding:8px;border-radius:8px}
.burger svg{display:block;width:24px;height:24px}
.burger:hover{background:rgba(25,22,18,.08)}
.bottomnav{display:none}
.drawer-back{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .22s;overscroll-behavior:none}
.app-shell > .drawer-back{position:absolute;inset:0}
.drawer-back.open{opacity:1;pointer-events:auto}
.drawer{position:absolute;top:0;bottom:0;left:0;width:280px;max-width:84vw;background:#fff;overflow-y:auto;padding:16px 0 24px}
.drawer .dhead{padding:6px 20px 16px;border-bottom:1px solid var(--line);margin-bottom:8px}
.drawer .dhead img{width:118px;display:block}
.drawer a,.drawer .drow{display:flex;align-items:center;gap:10px;padding:12.5px 20px;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer}
.drawer a.active{background:var(--soft-blue);color:var(--ink-2);box-shadow:inset 3px 0 0 var(--ink-2)}
.drawer a:hover,.drawer .drow:hover{background:#f8fafc}
.drawer .drow svg{width:18px;height:18px;color:var(--muted)}
@media(max-width:900px){
.topbar{padding:0 12px}
.burger{display:inline-flex}
.topbar .logo-link{position:absolute;left:50%;transform:translateX(-50%)}
.topbar .logo{position:static;transform:none}
.topbar .spacer,.topbar .icon-btn{display:none}
.nav{display:none}
/* In the app-shell flex column — not position:fixed. overflow-x on html+body
used to turn fixed into absolute, so this bar scrolled through the grid. */
.bottomnav{position:relative;left:auto;right:auto;bottom:auto;z-index:60;display:flex;justify-content:space-around;background:var(--ink);padding:7px 4px calc(7px + env(safe-area-inset-bottom));flex:0 0 auto;width:100%}
.bottomnav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;color:#8d8a87;font-size:10.5px;font-weight:600;letter-spacing:.3px;padding:2px 8px;min-width:56px}
.bottomnav a.active{color:#fff}
.bottomnav svg{width:22px;height:22px}
.bottomnav .badge{position:absolute;top:-4px;right:8px;background:#bda0d3;color:var(--ink);font-size:10px;font-weight:700;border-radius:999px;min-width:16px;height:16px;line-height:16px;text-align:center;padding:0 3px}
#toasts{bottom:86px}
}
/* customer WhatsApp button in the logged-in shell: the prefilled message
identifies who is writing (Sam: "talk to the customer with his login name") */
.shell-wa{width:48px;height:48px}
.app-shell > .hm-wa.shell-wa{bottom:26px}
/* Lift the float clear above the bottom nav on mobile. Uses .hm-wa.shell-wa so
it beats the base `.hm-wa{bottom:26px}` rule (which appears later in the file
with equal specificity) instead of being overridden by it — and adds the
iPhone home-indicator safe area so it clears the taller nav on notched phones. */
@media(max-width:900px){
.site-foot{padding-inline-end:0;padding-bottom:calc(56px + 20px + env(safe-area-inset-bottom, 0px))}
.site-foot-legal{flex-direction:column;gap:10px;text-align:center;padding:14px 16px 8px}
.site-foot-copy{width:100%;text-align:center}
.site-foot-links{justify-content:center;gap:6px 18px;width:100%}
.site-foot-links i{display:none}
/* Same selector as the desktop pin above, or `bottom:26px` wins on specificity
and the float sits on My account. 86px matches #toasts and clears the tab
bar; z-index 40 stays under .bottomnav (60) so a short lift never eats taps. */
.app-shell > .hm-wa.shell-wa{
width:48px;height:48px;z-index:40;
bottom:calc(86px + env(safe-area-inset-bottom));right:16px;
}
}
/* products page: cart summary under the search, like the old app layout */
.cart-total-row{display:none}
.cart-total-row .btn{position:relative}
.cart-total-row .badge{position:absolute;top:-7px;right:-7px;background:#bda0d3;color:var(--ink);font-size:10.5px;font-weight:700;border-radius:999px;min-width:17px;height:17px;line-height:17px;text-align:center;padding:0 4px}
@media(max-width:900px){
.cart-total-row{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.cart-total-row .amt{font-size:15px;font-weight:700}
.cart-total-row .btn{background:#1a1a1a;border-radius:10px}
}
/* ---------- cards / tables ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none}
.card .pad{padding:16px}
table.list{width:100%;border-collapse:collapse;font-size:13px}
table.list th{text-align:left;padding:10px 12px;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap}
table.list td{padding:11px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
table.list tr.click{cursor:pointer}
table.list tr.click:hover td{background:var(--soft-blue)}
/* ---------- buttons / forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink-2);color:#fff;border:none;border-radius:var(--radius);padding:10px 18px;font-weight:600;font-size:14px}
.btn:hover{filter:brightness(1.15)}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:#fff;color:var(--ink-2);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--soft-blue);filter:none}
.btn.danger{background:var(--bad)}
.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:var(--radius-chip)}
.field{margin-bottom:13px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(50,66,100,.12)}
/* Native file inputs look OS-default; hide the control and style a ghost button. */
.filepick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer;margin:0}
.filepick input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.filepick-btn{pointer-events:none}
.filepick:focus-within .filepick-btn{outline:2px solid var(--accent);outline-offset:2px}
.filepick-name{font-size:12.5px;color:var(--muted);max-width:min(100%,280px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
/* ---------- auth screens ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--ink) 0%,var(--ink-3) 60%,var(--ink-2) 100%);padding:20px}
.auth-card{background:#fff;border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.35);width:100%;max-width:400px;padding:34px 30px}
.auth-card .logo{font-weight:800;letter-spacing:.24em;font-size:24px;text-align:center;margin-bottom:4px}
.auth-card .logo span{color:#bda0d3}
.auth-card .tag{text-align:center;color:var(--muted);font-size:12.5px;margin-bottom:24px;letter-spacing:.08em;text-transform:uppercase}
.auth-card .btn{width:100%;padding:12px;margin-top:6px}
.auth-links{display:flex;justify-content:space-between;margin-top:16px;font-size:13px}
.auth-err{background:#fef2f2;color:var(--bad);border:1px solid #fecaca;border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:13px}
/* Activation questionnaire: a checkbox reads as a question, not a field. */
.auth-check{display:flex;align-items:center;gap:9px;font-size:13.5px;margin-bottom:14px;cursor:pointer}
.auth-check input{width:auto;margin:0}
/* ---------- catalog ---------- */
.catbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.catbar .search{flex:1;min-width:200px;position:relative}
.catbar .search input{width:100%;padding:10px 12px 10px 38px;border:1px solid var(--line);border-radius:999px;background:#fff}
.catbar .search::before{content:'⌕';position:absolute;left:14px;top:8px;font-size:18px;color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;user-select:none}
.chip.on{background:var(--ink-2);border-color:var(--ink-2);color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
@media(max-width:480px){.pgrid{grid-template-columns:repeat(2,1fr);gap:10px}}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:box-shadow .15s,transform .15s;position:relative}
.pcard:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.pcard .imgbox{aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #f1f5f9;overflow:hidden}
.pcard .imgbox img{object-fit:contain;width:100%;height:100%}
.pcard .imgbox .noimg{color:#cbd5e1;font-size:34px;letter-spacing:.2em}
.pcard .body{padding:11px 12px 12px}
.pcard .sku{font-size:11.5px;color:var(--muted);font-weight:600}
.pcard .nm{font-size:13px;font-weight:600;margin:2px 0 6px;min-height:34px}
.pcard .price{font-weight:700;font-size:14.5px}
.pcard .oos{color:var(--bad);font-size:11.5px;font-weight:600}
.pcard .fav,.pcard2 .fav{
position:absolute;top:8px;right:8px;z-index:2;
display:inline-flex;align-items:center;justify-content:center;
width:32px;height:32px;padding:0;margin:0;
background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:999px;
color:#94a3b8;cursor:pointer;line-height:0;appearance:none;-webkit-appearance:none}
.pcard .fav.on,.pcard2 .fav.on{color:#e11d48}
.pcard .fav:hover,.pcard2 .fav:hover{color:#64748b}
.pcard .fav.on:hover,.pcard2 .fav.on:hover{color:#be123c}
/* Lock glyph size; ignore clicks on the SVG so the button always owns state. */
.fav svg{display:block;width:16px;height:16px;margin:0;flex:none;pointer-events:none}
/* Discreet share — same corner language as favourite, quieter until hover. */
.pcard2 .pcard-share{
position:absolute;top:8px;right:8px;z-index:2;
display:inline-flex;align-items:center;justify-content:center;
width:32px;height:32px;padding:0;margin:0;
background:rgba(255,255,255,.82);border:1px solid rgba(25,22,18,.1);border-radius:999px;
color:#9a958c;cursor:pointer;line-height:0;appearance:none;-webkit-appearance:none;
opacity:.72;transition:opacity .12s,color .12s,border-color .12s,background .12s;
}
.pcard2:has(.fav) .pcard-share{right:46px}
.pcard2 .pcard-share:hover,.pcard2 .pcard-share:focus-visible{
opacity:1;color:var(--ink);background:#fff;border-color:var(--line);
}
.pcard2 .pcard-share svg{display:block;pointer-events:none}
.pdetail-sku-row{
display:flex;align-items:center;justify-content:space-between;gap:10px;
min-width:0;
}
.pdetail-sku-row #pdetailSku{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdetail-share{
flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:32px;height:32px;padding:0;margin:0;
background:transparent;border:1px solid transparent;border-radius:999px;
color:#9a958c;cursor:pointer;line-height:0;appearance:none;-webkit-appearance:none;
opacity:.75;transition:opacity .12s,color .12s,border-color .12s,background .12s;
}
.pdetail-share:hover,.pdetail-share:focus-visible{
opacity:1;color:var(--ink);background:#f7f5f0;border-color:var(--line);
}
.pdetail-share svg{display:block;pointer-events:none}
.share-sheet-back{
position:fixed;inset:0;z-index:1200;background:rgba(25,22,18,.42);
display:flex;align-items:flex-end;justify-content:center;padding:16px;
}
.share-sheet{
width:min(420px,100%);background:#fffdf9;border:1px solid var(--line);
border-radius:16px 16px 12px 12px;box-shadow:0 18px 50px rgba(25,22,18,.18);
padding:16px 16px 12px;
}
.share-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.share-sheet-head strong{font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.share-sheet-close{
width:32px;height:32px;border:0;background:transparent;color:var(--ink-2);
font-size:22px;line-height:1;cursor:pointer;border-radius:999px;
}
.share-sheet-name{margin:0 0 12px;font-size:15px;font-weight:600;color:var(--ink)}
.share-sheet-actions{display:flex;flex-direction:column;gap:8px}
.share-sheet-btn{
display:flex;align-items:center;gap:10px;width:100%;
border:1px solid var(--line);background:#fff;border-radius:10px;
padding:12px 14px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;
}
.share-sheet-btn:hover,.share-sheet-btn:focus-visible{background:#f7f5f0;border-color:#d8d2c8}
.share-sheet-btn svg{flex:none}
@media (min-width:761px){
.share-sheet-back{align-items:center}
.share-sheet{border-radius:16px}
}
.pcard .tagnew{position:absolute;top:10px;left:10px;background:var(--ink-3);color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:5px;letter-spacing:.08em}
.pager{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:20px;flex-wrap:wrap}
.pager button{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-weight:600;min-width:40px;color:var(--ink-2)}
.pager button:disabled{opacity:.45;color:var(--muted);cursor:default}
.pager button.pg.on{background:#221F20;color:#fff;border-color:#221F20}
.pager-gap{color:var(--muted);padding:0 2px;font-weight:600}
.pager-meta{margin-left:6px}
/* ---------- product modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(19,30,66,.5);z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{position:relative;background:#fff;border-radius:14px;max-width:960px;width:100%;max-height:92vh;overflow:auto;padding:22px}
/* Desktop shelf browse — hidden on phone (max-width:760px matches modal close placement).
Sit in the dimmed viewport gutters, clear of the white card. */
.pdetail-shelf-nav{display:none}
@media (min-width:761px){
.pdetail-shelf-nav{
display:inline-flex;align-items:center;justify-content:center;
position:fixed;top:50%;transform:translateY(-50%);z-index:61;
width:48px;height:48px;padding:0;margin:0;
border-radius:999px;border:1px solid rgba(255,255,255,.45);
background:rgba(25,22,18,.72);color:#fff;font-size:30px;line-height:1;
cursor:pointer;appearance:none;-webkit-appearance:none;
box-shadow:0 2px 14px rgba(0,0,0,.22);
transition:background .12s,opacity .12s;
}
.pdetail-shelf-nav:hover:not(:disabled),.pdetail-shelf-nav:focus-visible:not(:disabled){
background:rgba(25,22,18,.9);
}
.pdetail-shelf-nav:disabled{opacity:.28;cursor:default;box-shadow:none}
.pdetail-shelf-nav.prev{left:20px}
.pdetail-shelf-nav.next{right:20px}
}
/* Floating circle close (reference: white circle + soft shadow) */
.modal .close{
position:absolute;top:12px;right:12px;z-index:6;
width:40px;height:40px;padding:0;margin:0;
display:flex;align-items:center;justify-content:center;
background:#fff;border:none;border-radius:999px;
font-size:22px;font-weight:400;line-height:1;color:#222;cursor:pointer;
box-shadow:0 2px 10px rgba(0,0,0,.16);
}
.modal .close:hover{background:#f7f7f7;color:#000}
.modal .close:focus-visible{outline:2px solid var(--ink-2);outline-offset:2px}
/* Product modal: close floats on the gallery (top-right of the image) */
.pdetail-img > .close{
position:absolute;top:10px;right:10px;z-index:3;
}
/* Variation rows in the product modal.
The row must WRAP rather than squeeze: an out-of-stock row carries a long
"Available to backorder" pill plus a quantity box plus "Notify me", which on
a 432px-wide modal column overflows by ~190px. Everything except the colour
name is therefore flex:0 0 auto, and the row wraps to a second line when it
genuinely does not fit. Previously the qty box absorbed the overflow — and
because .qtybox has overflow:hidden, it CLIPPED its own number and + button,
so the control looked absent and out-of-stock items appeared unorderable. */
.vrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f1f5f9;flex-wrap:wrap}
/* Seamless list thumbs: no plate, no outline. `multiply` dissolves the white
cutout background into the card so the frame sits on the page rather than
inside a second white rectangle. */
.vrow img{
flex:0 0 auto;width:56px;height:42px;object-fit:contain;display:block;
border:0;border-radius:0;background:transparent;box-shadow:none;
mix-blend-mode:multiply;
}
.vrow .vsku{flex:0 0 auto;font-weight:600;font-size:13px;min-width:84px}
/* the only element that yields space — break at words, never mid-letter */
.vrow .vcol{flex:1 1 80px;min-width:0;color:var(--muted);font-size:12.5px;overflow-wrap:break-word;word-break:normal}
.vrow .vprice{flex:0 0 auto;min-width:56px;text-align:right}
.vrow .stockpill{flex:0 0 auto;font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--radius-badge);white-space:nowrap;text-transform:none}
/* The product modal's ordering controls travel together and wrap as one unit;
see `.pdetail .vctrl`, which is that unit. */
/* per-item price reveal (presentation / hidden-price mode) */
.pdetail .pr-hidden{display:none}
.pdetail.show-prices .pr-hidden{display:initial}
.reveal-row{display:flex;align-items:center;gap:10px;margin:2px 0 4px}
.reveal-btn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.reveal-btn:hover{background:var(--soft-blue)}
.reveal-btn svg{width:15px;height:15px}
/* notify-me: pressed state sticks so you can see it's set */
.notify.on{background:#dcfce7;border-color:#bbf7d0;color:var(--ok)}
.stockpill.in{background:#dcfce7;color:var(--ok)}
.stockpill.out{background:#fee2e2;color:var(--bad)}
.stockpill.prod{background:#fef3c7;color:var(--warn)}
/* orderable, just not on the shelf — informative, not an error */
.stockpill.back{background:#efe9f5;color:#56416d}
/* Labels come from stockPill() already title-cased ("In Stock"). Never let a
parent text-transform flatten them to "in stock". */
.stockpill{text-transform:none}
/* per-colour note: "8 now · 4 on backorder", appears as soon as the requested
quantity passes what is in stock */
.vrow .vbo{flex-basis:100%;font-size:11.5px;font-weight:600;color:transparent;min-height:0}
.vrow .vbo.on{color:#b45309}
.vrow .vbo.on.oos{color:var(--bad)}
/* flex:0 0 auto is load-bearing: this box has overflow:hidden, so if flex is
allowed to shrink it the quantity and the + button are silently clipped
instead of the row wrapping. */
.qtybox{
flex:0 0 auto;display:inline-flex;align-items:stretch;gap:0;
height:36px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;
box-sizing:border-box;
}
.qtybox button{
flex:0 0 auto;width:34px;border:0;background:#f8fafc;font-size:17px;line-height:1;color:var(--ink-2);cursor:pointer;
display:flex;align-items:center;justify-content:center;padding:0;
}
.qtybox button:hover{background:#eee}
/* Product modal quantity stepper — label + instant feedback while typing. */
.vqty{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.vqty-stack{display:flex;flex-direction:column;align-items:center;gap:4px}
.vqty-label{
font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.02em;
line-height:1;white-space:nowrap;
}
.vqty-hint{
font-size:9.5px;font-weight:500;color:#94a3b8;line-height:1;white-space:nowrap;
letter-spacing:.01em;
}
.pdetail .vqty .qtyfield{width:52px}
.pdetail .vqty .qtyfield input,
.pdetail .vqty .qtyfield .qtynum{font-size:15px;font-weight:700}
.pdetail .qtybox-editable .qtyfield{
cursor:text;background:#f1f5f9;
}
.pdetail .qtybox-editable .qtyfield:not(:focus-within){
box-shadow:inset 0 -2px 0 #94a3b8;
}
.pdetail .qtybox-editable .qtyfield:focus-within{
background:#fff;box-shadow:inset 0 0 0 2px rgba(37,99,235,.45);
}
.pdetail-notice{
display:none;margin:0 0 10px;padding:10px 12px;border-radius:8px;
background:#fffbeb;border:1px solid #fcd34d;color:#92400e;
font-size:13px;font-weight:600;line-height:1.35;
position:sticky;top:0;z-index:4;
}
.pdetail-notice.on{display:block}
@media(max-width:760px){
/* Stays visible above the on-screen keyboard — not buried at the bottom. */
.pdetail-notice.on{
position:fixed;top:max(10px, env(safe-area-inset-top, 10px));
left:12px;right:12px;z-index:70;margin:0;
box-shadow:0 4px 18px rgba(0,0,0,.14);
}
}
.qtybox.dirty .qtyfield{box-shadow:inset 0 0 0 1.5px rgba(37,99,235,.35)}
.qtyfield{
position:relative;flex:0 0 auto;width:44px;
display:flex;align-items:center;justify-content:center;
border-left:1px solid var(--line);border-right:1px solid var(--line);background:#fff;
}
.qtyfield .qtynum{
pointer-events:none;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;
line-height:1;color:var(--ink);user-select:none;
display:flex;align-items:center;justify-content:center;
width:100%;height:100%;
}
.qtyfield input{
position:absolute;inset:0;width:100%;height:100%;
border:0;padding:0;margin:0;opacity:0;caret-color:var(--ink);
font-size:14px;font-weight:600;text-align:center;outline:none;background:#fff;
appearance:textfield;-moz-appearance:textfield;-webkit-appearance:none;
}
.qtyfield:focus-within .qtynum{opacity:0}
.qtyfield input:focus{opacity:1}
.qtyfield input::-webkit-outer-spin-button,
.qtyfield input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0;display:none}
/* "Notify me" is secondary — it must never crowd out the ordering control */
.vrow .notify{flex:0 0 auto;white-space:nowrap}
/* ---- cart-qty stepper on each colourway ----
The stepper shows what the CART holds for that SKU. One number, written
through on every − / + / typed change. */
.vqty[hidden]{display:none !important}
/* Per-row Add and the separate cart-count chip are gone — qty is the cart. */
/* product modal image gallery */
.pdetail{display:flex;gap:24px;align-items:stretch}
.pdetail-img{flex:0 0 320px;min-width:0;position:sticky;top:0;align-self:flex-start}
.pdetail-info{flex:1;min-width:0;padding-right:8px;display:flex;flex-direction:column;min-height:0}
.pdetail-title{margin:2px 0 6px;font-size:19px}
.pdetail-price{font-size:18px;font-weight:800}
.pdetail-desc{margin-top:8px}
/* Model + size sit under the photo: "Luigi 1 | 44-25-145" with a thin SVG rule.
Colour name (Black / Optic Nude) sits centred on the next line when known. */
.pdetail-under{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
text-align:center;min-height:1.35em;margin:8px 0 4px;padding:0 8px;
font-size:13.5px;font-weight:600;color:var(--ink-2);letter-spacing:.02em;
font-variant-numeric:tabular-nums;
}
.pdetail-under:empty{display:none}
.pdetail-under-row{
display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;max-width:100%;width:100%;
}
/* The name yields; the mm string never does. Hyphens in 49-20-145 are break
opportunities, so a squeezed .pdetail-under-dims wrapped to "49-20-" / "145". */
.pdetail-under-label{min-width:0;flex:0 1 auto;overflow-wrap:break-word;word-break:normal}
.pdetail-under-size,.pdetail-under-dims,.pdetail-fit,.frame-size{
flex:0 0 auto;min-width:max-content;white-space:nowrap;
overflow-wrap:normal;word-break:keep-all;hyphens:none;
}
.pdetail-under-size{font-weight:700;color:var(--ink-2);letter-spacing:.02em}
.pdetail-under-dims{font-weight:700;color:var(--ink-2);letter-spacing:.04em}
.pdetail-fit{margin-top:6px;font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.pdetail-under-color{
display:block;width:100%;max-width:100%;
font-size:12.5px;font-weight:500;color:var(--muted);letter-spacing:.02em;
line-height:1.25;text-align:center;
}
.pdetail-sep{flex:0 0 auto;display:block;color:#cbd5e1}
.pdetail-colors-h{font-size:13.5px;margin:16px 0 4px;font-weight:700;letter-spacing:.02em}
.pdetail .vrows{margin:0;width:100%}
/* Color rows: thumb · full SKU · colour · status …… qty (qty pinned trailing) */
/* The colour name is the only track allowed to yield, so it is minmax(0,…):
a bare `max-content` track cannot shrink below its content, which on a long
colourway ("Transparent Havana Tortoiseshell Gradient") pushed the whole row
past the modal at 768px. It ellipsises instead — the full SKU, the pill and
the controls all have to stay readable. */
.pdetail .vrow{
display:grid;
grid-template-columns:48px minmax(0,max-content) max-content minmax(12px,1fr) auto;
grid-template-areas:"thumb sku pill . ctrl";
align-items:center;
column-gap:10px;
width:100%;
box-sizing:border-box;
padding:10px 0;
border-bottom:1px solid #f1f5f9;
}
.pdetail .vrow:last-child{border-bottom:0}
.pdetail .vrow.on{background:#f8fafc;border-radius:8px}
.pdetail .vrow > img,
.pdetail .vrow > .noimg{
grid-area:thumb;width:48px;height:48px;object-fit:contain;
border:1px solid var(--line);border-radius:8px;background:#fff;
}
.pdetail .vrow > .noimg{display:flex;align-items:center;justify-content:center;font-size:14px;color:#cbd5e1}
/* Colour label (or colour # / SKU suffix) — full SKU is on title=. */
.pdetail .vsku{
grid-area:sku;
flex:none !important;
min-width:0;max-width:100%;
display:flex;flex-direction:column;gap:1px;justify-content:center;
font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;
color:var(--ink);line-height:1.25;
}
.pdetail .vsku-code{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pdetail .vsku-color{
font-weight:500;font-size:12px;color:var(--muted);letter-spacing:.01em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Reorder / legacy rows still use .vcol beside .vsku. */
.pdetail .vcol{
grid-area:name;
flex:none !important;
min-width:0;max-width:200px;
color:var(--muted);font-size:13px;font-weight:500;line-height:1.25;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pdetail .vcol:empty{display:none}
.pdetail .stockpill{
grid-area:pill;justify-self:start;margin:0;
font-size:10px;padding:2px 7px;line-height:1.3;white-space:nowrap;
}
/* The ordering unit: "In cart: N" · qty +/− · Add to cart · Notify me.
flex-wrap is load-bearing — a backorderable colour already in the cart can
carry all of these at once, and on a narrow phone they wrap inside the
control area rather than crushing the colour name. */
.pdetail .vctrl{
grid-area:ctrl;justify-self:end;align-self:center;
display:flex;align-items:center;justify-content:flex-end;
flex-wrap:wrap;gap:8px;row-gap:6px;margin:0;
max-width:100%;min-width:0;
}
.pdetail .vprice{min-width:0;font-size:13px;font-weight:700}
.pdetail .vctrl .notify{
flex:0 0 auto;white-space:nowrap;padding:6px 10px;font-size:11.5px;min-height:0;
}
.pdetail .vctrl .qtybox{flex:0 0 auto}
.pdetail .vbo{
grid-column:1 / -1;flex:none;min-height:0;margin:0;width:100%;
display:none;
}
.pdetail .vbo.on{display:block;padding-top:2px}
.pdetail .vbo.on.oos{color:var(--bad)}
.pdetail-actions{
display:flex;gap:10px;margin-top:auto;padding-top:14px;align-items:center;flex-wrap:wrap;
justify-content:flex-end;position:sticky;bottom:0;background:#fff;z-index:2;
border-top:1px solid #f1f5f9;margin-left:-2px;margin-right:-2px;padding-left:2px;padding-right:2px;
padding-bottom:2px;
}
.pdetail-actions-spacer{flex:1 1 auto;min-width:0}
/* Staff "Show to customer" on the left; save actions grouped bottom-right. */
.pdetail-actions > .btn.ghost:first-child{margin-right:auto;margin-left:0}
.pdetail-actions-end{
margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;
}
.pdetail-actions-end > .btn{flex:0 0 auto;min-width:0}
.pdetail-actions-end > #goToCart{min-width:132px}
/* clean stage: soft grey field, no border lines (old-site look) */
.imgbox.big{position:relative;aspect-ratio:1/1;background:#f7f6f4;border:none;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in}
.imgbox.big img{object-fit:contain;width:100%;height:100%;mix-blend-mode:multiply}
.imgbox.big .noimg{color:#cbd5e1;font-size:38px;letter-spacing:.2em}
.zoom-hint{position:absolute;right:8px;bottom:8px;background:rgba(255,255,255,.95);border:none;border-radius:8px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--muted);pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.thumbstrip{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.thumbstrip img{width:56px;height:56px;object-fit:contain;background:#f7f6f4;border:1.5px solid transparent;border-radius:10px;cursor:pointer;flex:0 0 auto}
.thumbstrip img.sel{border-color:var(--ink-2)}
@media(max-width:760px){
.modal-back{padding:8px}
.modal{padding:16px 14px;max-height:94vh;border-radius:12px}
.modal .close{top:10px;right:10px;width:44px;height:44px;font-size:24px}
.pdetail-img > .close{top:10px;right:10px}
.pdetail{flex-direction:column;gap:14px;align-items:stretch}
.pdetail-img{flex:none;width:100%;position:relative;align-self:stretch}
.pdetail-info{padding-right:0;width:100%;max-width:100%;min-width:0}
/* On a phone the ordering controls take their own full-width line. Sharing a
column with the name and the pill leaves each of them a few dozen pixels at
360px, which is how the count, the button and "Notify me" ended up stacked
over the colour name. */
.pdetail .vrow{
/* Thumb + colour label on the left; stock + qty stacked on the right.
Label lives in .vsku (no separate .vcol), so it spans both rows. */
grid-template-columns:40px minmax(0,1fr) auto;
grid-template-areas:
"thumb sku pill"
"thumb sku ctrl";
column-gap:10px;
row-gap:2px;
padding:9px 0;
align-items:center;
}
.pdetail .vsku{align-self:center;font-size:12.5px}
.pdetail .vrow > img,
.pdetail .vrow > .noimg{width:40px;height:40px;border-radius:6px}
.pdetail .vcol{font-size:12.5px;max-width:none;min-width:0}
.pdetail .stockpill{
font-size:10px;padding:2px 6px;justify-self:end;align-self:end;
}
.pdetail .vctrl{
margin-left:0;justify-self:end;align-self:start;padding-top:0;
}
.pdetail .vctrl .notify{min-height:34px}
.pdetail .vbo{grid-column:1 / -1}
.pdetail-actions{
position:sticky;bottom:-2px;padding-top:12px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
box-shadow:0 -8px 16px rgba(255,255,255,.9);
/* Equal side-by-side actions — avoid a short ghost over a full-width Cart. */
flex-wrap:nowrap;gap:8px;align-items:stretch;
}
.pdetail-actions > .btn.ghost:first-child{
margin-right:0;flex:1 1 0;min-width:0;min-height:44px;
}
.pdetail-actions-spacer{display:none}
.pdetail-actions-end{
flex:1 1 0;min-width:0;width:auto;margin-left:0;justify-content:stretch;
}
.pdetail-actions-end > .btn{flex:1 1 auto;min-height:44px;width:100%}
.pdetail-actions-end > #goToCart{min-width:0}
/* legacy/dashboard color rows outside the product modal */
.vrow{flex-wrap:wrap;row-gap:7px}
.vrow .vsku{min-width:0}
.vrow .vcol{flex:1 1 40px;min-width:40px}
.vrow .stockpill{margin-left:auto}
.vrow .qtybox button{width:30px;height:34px}
.vrow .qtyfield{width:40px}
.vrow .qtybox{height:34px}
}
/* sign-in page — replica of old veyora.com /my-account (measured values) */
.login-page{min-height:100vh;display:flex;flex-direction:column;background:#fafaf9}
.guest-head .hm-nav{position:sticky;top:0;background:#fff}
.guest-shell{min-height:100vh;display:flex;flex-direction:column}
.guest-shell > .page{flex:1 1 auto}
.login-split{flex:1;display:flex}
.login-photo{flex:1;background:url('../assets/login-hero.jpg') center 30%/cover no-repeat}
.login-panel{flex:0 0 521px;display:flex;align-items:center;justify-content:center;background:#fafaf9;padding:40px}
.login-box{width:380px;max-width:100%}
.login-logo{width:132px;height:18px;display:block;margin-bottom:30px}
.login-eyebrow{font-size:11px;font-weight:500;letter-spacing:2.2px;text-transform:uppercase;color:rgba(28,25,23,.55);margin-bottom:10px}
.login-box h1{font-size:36px;font-weight:600;letter-spacing:-.72px;color:#1c1917;margin:0 0 6px}
.login-sub{font-size:14px;font-weight:400;color:rgba(28,25,23,.6);margin:0 0 34px}
.login-label{font-size:11px;font-weight:600;letter-spacing:1.32px;text-transform:uppercase;color:rgba(28,25,23,.7)}
.login-label-row{display:flex;justify-content:space-between;align-items:center;margin-top:24px}
.login-forgot{font-size:12px;font-weight:500;color:#55406c}
.login-field{position:relative;border-bottom:1px solid rgba(28,25,23,.18);margin-top:2px}
.login-field:focus-within{border-bottom-color:#1c1917}
.login-field input{width:100%;border:none;background:transparent;font-size:16px;padding:4px 30px 5px 0;outline:none;color:#1c1917}
.login-field input::placeholder{color:rgba(28,25,23,.35)}
.login-eye{position:absolute;right:0;top:3px;background:none;border:none;color:rgba(28,25,23,.45);cursor:pointer;padding:2px;line-height:1}
.login-eye:hover{color:#1c1917}
.login-btn{width:100%;height:52px;margin-top:34px;background:#1c1917;color:#fafaf9;border:none;border-radius:6px;font-size:13px;font-weight:600;letter-spacing:2.34px;text-transform:uppercase;cursor:pointer}
.login-btn:hover{background:#332e2b}
.login-btn:disabled{opacity:.6;cursor:default}
.login-tagline{margin-top:28px;text-align:center;font-size:11px;letter-spacing:1.98px;text-transform:uppercase;color:rgba(28,25,23,.4)}
.login-activate{margin-top:14px;text-align:center;font-size:12px;color:rgba(28,25,23,.6)}
.login-activate a{color:#55406c;font-weight:600;display:inline-flex;align-items:center;gap:6px;min-height:34px}
.login-request{margin-top:12px}
.login-request a{
display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;
min-height:48px;padding:0 16px;border:1px solid rgba(28,25,23,.22);border-radius:6px;
font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:#1c1917}
.login-request a:hover{background:rgba(28,25,23,.04);border-color:#1c1917}
.login-sales{margin-top:18px;text-align:center}
.login-sales a{
display:inline-flex;align-items:center;justify-content:center;min-height:34px;
font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:rgba(28,25,23,.4)}
.login-sales a:hover{color:#1c1917}
/* Agent sales door — `#/agent`. Same /auth/login, different room. */
body.ag-login-on{background:#221F20}
.ag-login{min-height:100vh;display:flex;flex-direction:column;background:#221F20;color:#f7f2e7}
.ag-login-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px clamp(20px,4vw,40px)}
.ag-login-mark{height:18px;width:auto;display:block}
.ag-login-bar-end{display:flex;align-items:center}
.ag-login .lang-current{border-color:rgba(247,242,231,.28);color:#f7f2e7}
.ag-login .lang-current:hover{background:rgba(247,242,231,.08);border-color:rgba(247,242,231,.5)}
.ag-login-main{flex:1;display:flex;align-items:center;justify-content:center;padding:12px 20px 32px}
.ag-login-card{width:100%;max-width:400px}
.ag-kicker{font-size:10px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:#b7b0a4;margin-bottom:10px}
.ag-login-card h1{font-size:32px;font-weight:600;letter-spacing:-.5px;line-height:1.15;margin:0 0 8px;color:#f7f2e7}
.ag-sub{font-size:14px;color:#cfc8ba;margin:0 0 28px;line-height:1.45}
.ag-login .auth-err{background:#3a1c1c;color:#fecaca;border-radius:6px;padding:9px 12px;font-size:13px;margin-bottom:16px}
.ag-label{display:block;font-size:11px;font-weight:600;letter-spacing:1.32px;text-transform:uppercase;color:#b7b0a4}
.ag-label-row{display:flex;justify-content:space-between;align-items:center;margin-top:22px}
.ag-forgot{font-size:12px;font-weight:500;color:#d4c4a8}
.ag-forgot:hover{color:#f7f2e7}
.ag-field{position:relative;border-bottom:1px solid rgba(247,242,231,.22);margin-top:2px}
.ag-field:focus-within{border-bottom-color:#f7f2e7}
.ag-field input{width:100%;border:none;background:transparent;font-size:16px;padding-block:6px 8px;padding-inline:0 36px;outline:none;color:#f7f2e7}
.ag-eye{position:absolute;inset-inline-end:0;top:4px;background:none;border:none;color:rgba(247,242,231,.45);cursor:pointer;padding:2px;line-height:1}
.ag-eye:hover{color:#f7f2e7}
.ag-btn{width:100%;height:52px;margin-top:32px;background:#f7f2e7;color:#221F20;border:none;border-radius:6px;font-size:13px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;cursor:pointer}
.ag-btn:hover{background:#fff}
.ag-btn:disabled{opacity:.6;cursor:default}
.ag-aside{margin-top:18px;font-size:12px;color:#8a8478}
.ag-portal{margin-top:8px;font-size:12px}
.ag-portal a{color:#d4c4a8;font-weight:600}
.ag-portal a:hover{color:#f7f2e7}
.ag-tag{text-align:center;padding:0 20px 28px;font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:#8a8478}
.ag-login form>.ag-label:first-of-type{margin-top:0}
@media(max-width:640px){
.ag-login-card h1{font-size:26px}
.ag-login-bar{padding:18px 20px}
}
.login-section{font-size:14px;line-height:1.55;color:rgba(28,25,23,.6);margin:28px 0 12px;padding-top:18px;border-top:1px solid rgba(28,25,23,.12)}
.login-box form>.login-label{display:block;margin-top:20px}
.login-box form>.login-label:first-child,.login-label-row .login-label{margin-top:0}
/* Long B2B questionnaires: the same photo+panel split as sign-in, so
login-hero.jpg is cropped as a column (center 30% / cover), not a short
full-width strip that cuts the portraits at the forehead. The page is a
viewport shell; the panel scrolls so the photo crop never stretches. */
.login-page-wide{height:100dvh;max-height:100dvh;overflow:hidden}
.login-page-wide .login-split{flex:1 1 auto;min-height:0}
.login-page-wide .login-photo{flex:1 1 48%;min-width:0;width:auto;height:auto}
.login-page-wide .login-panel{
flex:1 1 52%;max-width:640px;overflow-y:auto;-webkit-overflow-scrolling:touch;
justify-content:flex-start;align-items:flex-start;padding:40px 36px 56px}
.login-page-wide .login-box{width:100%;max-width:640px}
.login-page-wide .login-box h1{font-size:clamp(26px,4vw,32px)}
.login-page-wide .login-sub{margin-bottom:22px}
.login-page .auth-err{background:#fee2e2;color:#b91c1c;border-radius:6px;padding:9px 12px;font-size:13px;margin-bottom:14px}
.login-foot{background:#fff;border-top:1px solid #eee;display:flex;justify-content:space-between;align-items:center;padding:13px 24px;font-size:12px;color:rgba(28,25,23,.6)}
.login-foot a{color:rgba(28,25,23,.75)}
.login-foot a[href]:hover{color:#1c1917}
.login-foot i{color:#ccc;font-style:normal;margin:0 10px}
.login-page > .site-foot{flex:0 0 auto}
@media(max-width:900px){
.login-split{flex-direction:column}
.login-photo{flex:none;height:160px;background-position:50% 28%}
.login-panel{flex:1;padding:32px 20px}
.login-page-wide{height:auto;max-height:none;overflow:visible}
.login-page-wide .login-panel{flex-basis:auto;max-width:none;min-height:0;overflow:visible;padding-top:28px}
.login-page-wide .login-photo{height:220px;background-position:50% 42%}
.login-foot{flex-direction:column;gap:8px;text-align:center}
}
/* Sign-in on a phone: Request an account must sit on the first screen. The
160px photo + duplicate wordmark + tagline pushed it below a 667px fold.
The sticky header already carries the mark. Request-account (wide) is
unchanged — that form is meant to scroll. */
@media(max-width:560px){
.login-page:not(.login-page-wide) .login-photo{height:96px;background-position:50% 28%}
.login-page:not(.login-page-wide) .login-panel{padding:20px 20px 24px}
.login-page:not(.login-page-wide) .login-logo{display:none}
.login-page:not(.login-page-wide) .login-eyebrow{margin-bottom:6px}
.login-page:not(.login-page-wide) .login-box h1{font-size:28px}
.login-page:not(.login-page-wide) .login-sub{margin-bottom:16px}
.login-page:not(.login-page-wide) .login-box form>.login-label{margin-top:14px}
.login-page:not(.login-page-wide) .login-label-row{margin-top:16px}
.login-page:not(.login-page-wide) .login-btn{margin-top:22px}
.login-page:not(.login-page-wide) .login-tagline{display:none}
}
/* fullscreen image viewer — white card, measured from the old veyora.com
(backdrop .2, card #fafbfc r12, 44px grey circle arrows, chip bottom-left) */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;padding:32px}
.lb-card{position:relative;background:#fafbfc;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.12);padding:16px;display:flex;flex-direction:column;align-items:center}
.lb-stage{position:relative;width:min(78vh,85vw);height:min(78vh,85vw)}
.lb-stage img{width:100%;height:100%;object-fit:contain;display:block}
.lb-close{position:absolute;top:8px;right:8px;z-index:3;width:38px;height:38px;border:none;border-radius:50%;background:rgba(0,0,0,.04);color:#a6a19e;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-close:hover{background:rgba(0,0,0,.08)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border:none;border-radius:50%;background:rgba(0,0,0,.04);color:#a6a19e;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-nav:hover{background:rgba(0,0,0,.08)}
.lb-nav.prev{left:8px}
.lb-nav.next{right:8px}
.lb-title{position:absolute;bottom:8px;left:8px;z-index:2;background:rgba(34,31,32,.72);color:#f5efe4;font-size:13px;font-weight:500;letter-spacing:.3px;padding:3px 8px;border-radius:6px}
.lb-color{color:#000;font-size:13.6px;font-weight:500;letter-spacing:.5px;text-align:center;margin:12px 0 6px;min-height:20px}
/* Colour name + code under customer-view / leftover caption slots */
.pdetail-colorcap,.cv-colorcap{
text-align:center;font-size:13.5px;font-weight:600;color:var(--ink-2);
letter-spacing:.04em;min-height:1.35em;margin:10px 0 6px;padding:0 10px;
font-variant-numeric:tabular-nums}
.pdetail-colorcap:empty,.cv-colorcap:empty{display:none}
.cv-colorcap{color:#fff;opacity:.95;margin:10px 0 0;display:block}
.cv-under{color:#fff;margin:10px 0 0}
.cv-under .pdetail-under-dims{color:rgba(255,255,255,.75)}
.cv-under .pdetail-sep{color:rgba(255,255,255,.45)}
.lb-dots{display:flex;gap:4.8px;justify-content:center}
.lb-dots span{width:6px;height:6px;border-radius:18px;background:#e0e0e0;cursor:pointer;transition:.2s}
.lb-dots span.on{width:18px;background:#221f20}
@media(max-width:900px){
.lightbox{padding:12px}
.lb-card{padding:10px}
.lb-stage{width:min(70vh,92vw);height:min(70vh,92vw)}
}
/* ---------- cart ---------- */
.cart-lines-head{display:flex;justify-content:flex-end;margin:-4px 0 4px}
.cart-line{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #f1f5f9}
.cart-line img{
width:74px;height:56px;object-fit:contain;display:block;
border:0;border-radius:0;background:transparent;box-shadow:none;
mix-blend-mode:multiply;
}
.cart-hit{
display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 220px;
margin:0;padding:4px 6px 4px 0;border:0;border-radius:var(--radius);
background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer;
}
.cart-hit:hover .nm{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.cart-hit:focus-visible{outline:2px solid var(--ink-2);outline-offset:2px}
.cart-thumb{flex:0 0 74px;width:74px;height:56px;display:flex;align-items:center;justify-content:center}
.cart-thumb img,.cart-thumb .noimg{
width:74px;height:56px;object-fit:contain;display:block;
border:0;border-radius:0;background:transparent;box-shadow:none;mix-blend-mode:multiply;
}
.cart-hit-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.cart-line .info{flex:0 1 auto;min-width:120px}
.cart-line .nm{font-weight:600;font-size:13.5px}
.cart-line .meta{color:var(--muted);font-size:12px;margin-top:2px}
.cart-line-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px}
.cart-line .cart-preview,.cart-line .noteLink{
font-size:12.5px;font-weight:600;color:var(--accent);background:none;border:0;
padding:0;cursor:pointer;font:inherit;
}
.cart-line .cart-preview:hover,.cart-line .noteLink:hover{text-decoration:underline;text-underline-offset:2px}
.cart-line .lt{font-weight:700;min-width:70px;text-align:right}
.summary-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:13.5px;border-bottom:1px solid var(--line)}
.summary-row:last-of-type{border-bottom:0}
.summary-row.total{font-weight:800;font-size:16px;border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
/* ---------- My Account — trade-panel, not floating consumer cards ---------- */
.acct-layout{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.acct-main{flex:2;min-width:300px}
.acct-side{flex:1;min-width:260px}
.acct-panel{border-radius:var(--radius);box-shadow:none}
.acct-h{font-size:14px;font-weight:700;margin-bottom:12px;letter-spacing:.01em}
.acct-bal-link{color:inherit;text-decoration:underline;text-underline-offset:2px}
.acct-bal-link:hover{color:var(--ink-2)}
.acct-signout{width:100%;margin-top:14px;border-radius:var(--radius)}
.acct-finance-copy{margin:0 0 12px;line-height:1.45}
.promo-banner{background:var(--soft-purple);border:1px solid #e9d5ff;color:var(--ink-3);border-radius:8px;padding:10px 13px;font-size:13px;font-weight:600;margin-bottom:12px}
/* backorder disclosure: cart banner + the per-line split, so a customer always
knows which pieces ship now and which are being held */
.bo-banner{background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;border-radius:8px;padding:10px 13px;font-size:13px;line-height:1.5;margin-bottom:12px}
.cart-line .bo-split{color:#b45309;font-weight:600}
/* checkout summary lines — full product identity, not just a SKU */
.co-line{padding:7px 0;border-bottom:1px solid #f1f5f9;font-size:13px}
.co-line:last-of-type{border-bottom:none}
.co-hit{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:0;border:0;
background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer;border-radius:8px}
.co-hit:hover .co-nm{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.co-hit:focus-visible{outline:2px solid var(--ink-2);outline-offset:2px}
.co-thumb{flex:0 0 52px;width:52px;height:40px;display:flex;align-items:center;justify-content:center}
.co-thumb img,.co-thumb .noimg{
width:52px;height:40px;object-fit:contain;display:block;
border:0;background:transparent;mix-blend-mode:multiply;
}
.co-hit-text{min-width:0;flex:1}
.co-line-main{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.co-line-main .co-nm{font-weight:600}
.co-line-main .co-amt{white-space:nowrap}
.co-line-sub{color:var(--muted);font-size:11.5px;margin-top:1px;display:block}
.co-line-bo{color:#b45309;font-size:11.5px;font-weight:600;margin-top:1px;display:block}
/* thank-you page backorder recap */
.ty-bo{margin:14px auto 0;max-width:420px;text-align:left}
.ty-line{padding:7px 0;border-bottom:1px solid #f1f5f9;font-size:13px;font-weight:600}
.ty-line .sub{display:block;font-weight:400}
.ty-hit{display:block;width:100%;margin:0;border:0;background:transparent;text-align:left;
font:inherit;color:inherit;cursor:pointer;border-radius:8px}
.ty-hit:hover .ty-hit-main{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.ty-hit:focus-visible{outline:2px solid var(--ink-2);outline-offset:2px}
.ret-sku-hit{display:inline;margin:0;padding:0;border:0;background:transparent;font:inherit;
color:inherit;cursor:pointer;text-align:left}
.ret-sku-hit:hover{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.ret-sku-hit:focus-visible{outline:2px solid var(--ink-2);outline-offset:2px}
/* requested vs allocated vs backordered value, kept visibly distinct */
.ty-values{margin:16px auto 0;max-width:420px;text-align:left;font-size:13px}
.ty-values div{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #f1f5f9}
.ty-values span{color:var(--muted)}
/* backorder state chip on the customer's backorders page */
.bo-state{display:inline-block;background:#efe9f5;color:#56416d;font-size:11px;font-weight:700;padding:2px 9px;border-radius:var(--radius-badge);margin-left:4px}
/* "Ordering for: X" — a salesperson must never lose track of whose order this is */
.acting-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#2f2440;color:#f3eefa;padding:10px 3%;font-size:13px;line-height:1.5}
.acting-bar .sub{color:#bda0d3}
.acting-actions{display:flex;gap:8px;flex-shrink:0}
.acting-bar button{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:var(--radius-chip);padding:5px 13px;font-size:12px;font-weight:600;cursor:pointer}
.acting-bar button:hover{background:rgba(255,255,255,.24)}
/* Checkout confirmation of WHO the assisted order is for — the last chance to
notice you are ordering for the wrong account. */
.co-acting{background:#f7f3fc;border:1px solid #e2d5f0;border-left:4px solid #56416d;border-radius:8px;padding:12px 14px;margin:0 0 14px;font-size:13.5px;line-height:1.55}
.co-acting .sub{display:block;margin-top:4px;color:#6b5c7d;font-size:12.5px}
/* ---------- status pills ---------- */
.pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--radius-badge);text-transform:capitalize;letter-spacing:.01em}
.pill.pending{background:#fef3c7;color:var(--warn)}
.pill.processing,.pill.collecting,.pill.approved{background:var(--soft-blue);color:var(--accent)}
.pill.completed,.pill.shipped,.pill.collected,.pill.closed,.pill.active{background:#dcfce7;color:var(--ok)}
.pill.cancelled,.pill.disabled{background:#fee2e2;color:var(--bad)}
.pill.open{background:var(--soft-purple);color:var(--ink-3)}
/* ---------- misc ---------- */
.empty{padding:48px 20px;text-align:center;color:var(--muted)}
/* Empty-state mark. It is an SVG now, not a 40px emoji, so it is sized here
and deliberately muted: an empty list is a normal state, not an alarm. */
.empty .big{margin-bottom:12px;line-height:0;color:var(--line-strong,#cbd5e1)}
.empty .big svg{width:34px;height:34px;stroke-width:1.5}
/* An icon sitting beside a label in a button or badge sits on the text
baseline rather than hanging off it. */
.btn svg,.chip svg,.fchip svg,.seller svg,.icon-btn svg,.promo-banner svg,.bo-banner svg{
vertical-align:-.16em;flex:0 0 auto}
.zoom-hint svg,.scan-ic svg{display:block}
#toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;max-width:min(92vw,420px)}
#toasts.toasts-top{
top:max(12px, env(safe-area-inset-top, 12px));bottom:auto;
}
#toasts .toast{pointer-events:auto}
.toast{background:var(--ink);color:#fff;padding:11px 18px;border-radius:var(--radius);font-size:13.5px;font-weight:600;box-shadow:var(--shadow);animation:pop .16s;text-align:center}
.toast.toast-top{animation:popDown .16s}
.toast.err{background:var(--bad)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
@keyframes popDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1}}
.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 37%,#f1f5f9 63%);background-size:400% 100%;animation:sk 1.2s infinite;border-radius:8px}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
.mobile-only{display:none}
@media(max-width:760px){
.desktop-only{display:none}
.mobile-only{display:initial}
.page{padding:12px 10px 90px}
/* tables tighten up and drop secondary columns so they fit the screen */
table.list{font-size:12.5px}
table.list th{padding:8px 6px}
table.list td{padding:9px 6px}
.hide-m{display:none}
}
/* ==================== public homepage — "Editorial Showroom" ====================
Light, warm-neutral, photography-led. Everything here is scoped to hm-*
classes that only the marketing homepage renders, except `.hm-head` and its
children (the DARK GUEST HEADER reused by the sign-in, catalogue and list
pages inside `.guest-head`) and `.hm-wa` (also worn by the signed-in shell's
float as `.hm-wa.shell-wa`). Those two are left alone.
`body.hm-dark` is the marketing-homepage body flag — app.js toggles it for
#/ and #/home and the authenticated pages remove it. The name is historical;
it now carries the light canvas and the page's design tokens. */
body.hm-dark{
--hm-canvas:#f5f2ec; /* warm ivory page */
--hm-paper:#fffdf9; /* lifted panel */
--hm-stone:#ebe5db; /* pale stone */
--hm-ink:#191612;
--hm-ink-soft:rgba(25,22,18,.64);
--hm-ink-faint:rgba(25,22,18,.42);
--hm-rule:rgba(25,22,18,.14);
--hm-night:#141210;
--hm-serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Times New Roman',serif;
background:var(--hm-canvas);color:var(--hm-ink)
}
/* ---- dark guest header (sign-in / catalogue / lists) — unchanged ---- */
.hm-head{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.hm-logo img{width:200px;display:block}
.hm-head-right{display:flex;align-items:center;gap:16px}
.hm-pill{display:inline-flex;align-items:center;gap:10px;background:rgba(25,23,22,.85);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:999px;padding:11px 22px;font-weight:600;font-size:15px;backdrop-filter:blur(6px)}
.hm-pill:hover{background:rgba(45,41,39,.9)}
.hm-pill.ghost{background:transparent;border-color:rgba(255,255,255,.28)}
.hm-pill.ghost:hover{background:rgba(255,255,255,.08)}
.hm-pill svg{width:21px;height:21px}
.hm-account{color:#fff;opacity:.9;display:flex;padding:6px}
.hm-account svg{width:26px;height:26px}
.hm-account:hover{opacity:1}
/* ---------- editorial type scale + controls ----------
The display face is a local serif stack — no extra webfont is requested, and
the mixed-case serif is what separates this page from the letter-spaced
uppercase Montserrat used everywhere else in the app. */
.hm-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.22em;line-height:1.7;color:var(--hm-ink-faint);margin:0 0 18px}
.hm-eyebrow.on-dark{color:rgba(255,255,255,.6)}
.hm-display{font-family:var(--hm-serif);font-weight:400;font-size:clamp(32px,5.4vw,66px);line-height:1.06;letter-spacing:-.015em;color:var(--hm-ink);margin:0;overflow-wrap:break-word}
.hm-display.sm{font-size:clamp(26px,4vw,46px);line-height:1.13}
.hm-display.xs{font-size:clamp(24px,3vw,34px);line-height:1.18}
.hm-display.on-dark{color:#fff}
.hm-lead{font-size:clamp(15px,1.1vw,17px);line-height:1.75;color:var(--hm-ink-soft);max-width:44ch;margin:22px 0 0}
.hm-body{font-size:15.5px;line-height:1.8;color:var(--hm-ink-soft);max-width:46ch;margin:18px 0 0}
.hm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:34px}
.hm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 32px;background:var(--hm-ink);border:1px solid var(--hm-ink);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-align:center;transition:background .18s,border-color .18s,color .18s}
.hm-btn:hover{background:#000;border-color:#000;color:#fff}
.hm-btn.light{background:var(--hm-canvas);border-color:var(--hm-canvas);color:var(--hm-ink)}
.hm-btn.light:hover{background:#fff;border-color:#fff;color:var(--hm-ink)}
.hm-btn.ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.hm-btn.ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.hm-textlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--hm-ink);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;box-shadow:inset 0 -1px 0 var(--hm-rule);transition:box-shadow .18s}
.hm-textlink::after{content:'→';font-size:13px;letter-spacing:0}
.hm-textlink:hover{box-shadow:inset 0 -1px 0 var(--hm-ink);color:var(--hm-ink)}
/* ---------- compact light header (homepage + guest pages) ----------
One row: logo left, Products + account + language clustered on the right.
Never wrap — a second row for the switcher is what made signed-out chrome
look stacked and empty in the middle. */
.hm-nav{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--hm-rule, rgba(25,22,18,.14))}
body.hm-dark .hm-nav{background:var(--hm-canvas);border-bottom-color:transparent}
.hm-nav-in{max-width:1320px;margin:0 auto;padding:clamp(11px,1.2vw,14px) clamp(20px,5.6vw,40px);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap}
.hm-nav-logo{display:block;min-width:0;flex:0 1 auto}
.hm-nav-logo img{display:block;width:auto;height:clamp(17px,4.8vw,24px);max-width:100%}
.hm-nav-end{display:flex;align-items:center;gap:clamp(10px,2vw,22px);flex:0 1 auto;min-width:0}
.hm-nav-links{display:flex;align-items:center;gap:clamp(10px,2.4vw,30px);flex:0 0 auto;flex-wrap:nowrap}
.hm-nav-links a{display:inline-flex;align-items:center;min-height:40px;color:var(--hm-ink, #191612);font-size:clamp(10px,1.6vw,11.5px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.hm-nav-links a:hover{color:#000}
.hm-nav-links .hm-nav-acct{padding:0 clamp(10px,1.4vw,16px);border:1px solid var(--hm-rule, rgba(25,22,18,.14))}
.hm-nav-links .hm-nav-acct:hover{border-color:var(--hm-ink, #191612)}
/* Homepage top bar keeps a consistent arrangement (logo left, switcher right)
even under Arabic/RTL — the marketing chrome doesn't mirror, only the page
content below does. Each nav label keeps its own natural text direction. */
[dir="rtl"] .hm-nav-in,[dir="rtl"] .hm-nav-end{direction:ltr}
[dir="rtl"] .hm-nav-links a{direction:rtl}
/* ---------- 1. editorial split hero ----------
Asymmetric: narrower copy column on the left, one dominant campaign frame on
the right. A second overlapping frame was tried and removed — mid-scroll it
showed a large pale stretch of studio architecture with no subject in it, and
one excellent photograph beats two badly composed ones.
Crop: hero-04 is a 2:3 portrait whose model sits between 31% and 82% of the
frame height (hair 31%, sunglasses 36%, hips 60%, boots 82%). The 46% vertical
object-position keeps that whole band inside the visible window at every
width the 4/5 box and the 70vh cap produce. */
.hm-ed{background:var(--hm-canvas);overflow:hidden}
.hm-ed-in{max-width:1320px;margin:0 auto;padding:clamp(40px,5vw,70px) clamp(20px,4vw,40px) clamp(52px,6vw,84px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(36px,5vw,72px);align-items:center}
.hm-ed-copy{min-width:0}
.hm-ed-copy .hm-eyebrow{padding-top:20px;background-image:linear-gradient(var(--hm-ink),var(--hm-ink));background-size:56px 1px;background-repeat:no-repeat;background-position:0 0}
.hm-ed-art{margin:0;min-width:0}
.hm-ed-art-main{display:block;width:100%;aspect-ratio:4/5;max-height:min(70vh,680px);object-fit:cover;object-position:50% 46%;background:var(--hm-stone)}
/* Phone-only: sits on the hero photograph so Request an account is on the
first screen. Hidden on desktop — the copy column already has the text link. */
.hm-ed-req{display:none}
/* ---------- 2. retailer value strip ---------- */
.hm-strip{background:var(--hm-paper);border-top:1px solid var(--hm-rule);border-bottom:1px solid var(--hm-rule)}
.hm-strip-in{max-width:1320px;margin:0 auto;padding:clamp(30px,3.2vw,46px) clamp(20px,4vw,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.hm-strip article{padding-left:clamp(20px,2vw,30px);border-left:1px solid var(--hm-rule)}
.hm-strip article:first-child{padding-left:0;border-left:0}
.hm-strip-no{display:block;font-family:var(--hm-serif);font-size:13px;color:var(--hm-ink-faint);margin-bottom:12px}
.hm-strip h2{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--hm-ink);margin:0 0 10px}
.hm-strip p{font-size:14.5px;line-height:1.7;color:var(--hm-ink-soft);max-width:34ch;margin:0}
/* ---------- 3. collections in focus ----------
Copy on the left, then ONE pair of frames sharing a top and bottom line. The
earlier version staggered three frames of unrelated proportions down the
page; it read as accidental rather than asymmetric and left a blank column.
Equal height, unequal width is the controlled version of the same idea.
Crops: hero-05 (two models, faces at 32% and 45% of the frame) sits at 25%,
which keeps both faces and the eyewear in view. hero-10 (single model, face
25–48%) is narrower than its box here, so its full height shows. */
.hm-focus{background:var(--hm-canvas)}
.hm-focus-in{max-width:1320px;margin:0 auto;padding:clamp(52px,6vw,92px) clamp(20px,4vw,40px);display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,4.4vw,64px);align-items:center}
.hm-focus-lead{min-width:0}
.hm-focus-lead .hm-textlink{margin-top:26px}
.hm-focus-pair{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:clamp(12px,1.6vw,22px);height:clamp(400px,54vh,580px)}
.hm-focus-pair figure{margin:0;min-width:0;height:100%}
.hm-focus-pair img{display:block;width:100%;height:100%;object-fit:cover;background:var(--hm-stone)}
.hm-focus-a img{object-position:50% 25%}
.hm-focus-b img{object-position:50% 30%}
/* ---------- 4. full-bleed campaign statement ----------
One absolutely-positioned photograph behind a left-weighted scrim; the copy
sits low and left rather than centred, and the height comes from a clamp
plus the copy's own padding so it never collapses or runs away on a phone.
Crop: hero-02's model is on the right of the frame (face 35–78% across,
sunglasses at 27–48% down, chin at 88%). 57% across keeps the face inside the
narrow window a phone crops to; 43% down keeps the eyewear and the mouth
inside the shallow window a wide desktop crops to. The left of the frame is
an out-of-focus ghost image, which is exactly where the scrim is heaviest. */
.hm-state{position:relative;display:flex;align-items:flex-end;min-height:clamp(340px,50vh,520px);background:var(--hm-night);overflow:hidden}
.hm-state>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:57% 43%}
.hm-state-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(12,10,9,.8) 0%,rgba(12,10,9,.52) 46%,rgba(12,10,9,.2) 78%,rgba(12,10,9,.06) 100%),linear-gradient(0deg,rgba(12,10,9,.52) 0%,rgba(12,10,9,0) 44%)}
.hm-state-copy{position:relative;width:100%;max-width:1320px;margin:0 auto;padding:clamp(64px,8vw,120px) clamp(20px,4vw,40px) clamp(34px,4vw,60px)}
.hm-state-copy h2{font-family:var(--hm-serif);font-weight:400;font-size:clamp(26px,4.2vw,50px);line-height:1.14;letter-spacing:-.012em;color:#fff;max-width:19ch;margin:0;overflow-wrap:break-word}
/* ---------- 5. product portfolio ----------
Left feature vertically centered against the right stack. object-fit:contain
keeps CHARLETT branding in frame (cover was cropping logos at top/bottom). */
.hm-port{background:var(--hm-stone)}
.hm-port-in{max-width:1200px;margin:0 auto;padding:clamp(36px,4.5vw,64px) clamp(20px,4vw,40px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,3.2vw,44px);align-items:center}
.hm-port-feature{margin:0;width:100%;max-width:520px;aspect-ratio:1/1;overflow:hidden;background:var(--hm-stone)}
.hm-port-feature img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.hm-port-side{min-width:0;display:flex;flex-direction:column}
.hm-port-side .hm-textlink{margin-top:14px;margin-bottom:0}
.hm-port-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.2vw,14px);margin-top:clamp(18px,2.4vw,28px)}
.hm-port-row figure{margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--hm-stone)}
.hm-port-row img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
/* ---------- 6. veyora in motion — framed, not full-bleed ---------- */
.hm-motion{background:var(--hm-canvas)}
.hm-motion-in{max-width:1240px;margin:0 auto;padding:clamp(50px,6vw,92px) clamp(20px,4vw,40px);display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);gap:clamp(30px,4vw,56px);align-items:end}
.hm-motion-copy{min-width:0}
.hm-motion-frame{margin:0;min-width:0;background:var(--hm-night);padding:clamp(8px,.9vw,12px);box-shadow:0 24px 60px rgba(25,22,18,.16)}
.hm-motion-frame video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--hm-night)}
/* ---------- 7. closing CTA on the dark canvas ---------- */
.hm-close{background:var(--hm-night)}
.hm-close-in{max-width:1320px;margin:0 auto;padding:clamp(52px,6vw,96px) clamp(20px,4vw,40px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,4vw,64px);align-items:end}
.hm-close-side{min-width:0}
.hm-close-side p{font-size:15.5px;line-height:1.8;color:rgba(255,255,255,.66);max-width:38ch;margin:0}
/* ---------- 8. footer ---------- */
.hm-foot{background:#0d0b0a;color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.hm-foot-in{max-width:1320px;margin:0 auto;padding:clamp(34px,3.6vw,48px) clamp(20px,4vw,40px) clamp(52px,5vw,76px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 40px;align-items:center}
.hm-foot-logo{grid-column:1;justify-self:start}
.hm-foot-logo img{display:block;width:auto;height:19px}
.hm-foot-links{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 26px;justify-content:flex-end;align-items:center}
.hm-foot-links a{display:inline-flex;align-items:center;min-height:36px;color:rgba(255,255,255,.72);font-size:12.5px}
.hm-foot-links a:hover{color:#fff}
.hm-foot-social{display:inline-flex;align-items:center;gap:8px;margin-left:4px}
/* Client feedback item 8. The three social buttons already existed and already
pointed at the right profiles — what was asked for was that they LOOK like
the WhatsApp float. So they now share its language exactly: a circle on the
#191612 warm-black surface with an #f5f2ec icon and the same warm-light
hairline (rgba(245,242,236,.16)), rather than a transparent outline that all
but vanished against the #0d0b0a footer. The filled surface is one step
LIGHTER than the footer behind it, which is what makes them read as objects
sitting on the footer instead of etchings in it.
Smaller than the 56px float and without its drop shadow — a footer link is
not a floating action — but the same shape, the same two colours, the same
restrained hover (settle to pure black, a slight lift, no colour change).
`.hm-wa` above is the reference; these two rules are deliberately written to
mirror it, and client-enhancements.test.js asserts they still do.
SELECTED AS `.hm-foot-links a.hm-soc`, not `.hm-soc`. These anchors sit
inside `.hm-foot-links`, whose own `a` rule sets colour — and `.hm-foot-links
a` (0,1,1) out-specifies a bare `.hm-soc` (0,1,0). Written the short way the
surface and the border applied but the ICON stayed the footer's 72%-white,
so the buttons only half-changed. A real browser reported
rgba(255,255,255,.72) where the WhatsApp float reported rgb(245,242,236);
reading the rule as text could not have shown it, because the rule itself
was right. */
.hm-foot-links a.hm-soc,.site-foot-links a.hm-soc{width:38px;height:38px;border-radius:999px;background:#191612;border:1px solid rgba(245,242,236,.16);color:#f5f2ec;display:inline-flex;align-items:center;justify-content:center;min-height:0 !important;transition:transform .15s,background .18s,border-color .18s}
.hm-foot-links a.hm-soc:hover,.site-foot-links a.hm-soc:hover{background:#000;border-color:rgba(245,242,236,.32);transform:scale(1.06)}
.site-foot-links .hm-foot-social{margin-inline-start:12px}
.hm-foot-legal{grid-column:1/-1;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:rgba(255,255,255,.42)}
/* The WhatsApp float, shared by the marketing homepage (`.hm-wa`) and the
signed-in shell (`.hm-wa.shell-wa`, rendered by app.js on every authenticated
page — Products, Orders, Backorders, Returns, Favorites, Reorder, Spare
Parts, My Account). The editorial charcoal-on-ivory treatment lives HERE, in
the base rule, so every instance inherits one appearance; the bright orange
read as a third-party badge stuck on the page and clashed with the ink,
ivory and stone palette. Literal colours rather than the --hm-* tokens,
because those are declared on body.hm-dark and the authenticated pages
remove that class.
What stays page-specific below is only geometry: size, placement, the
homepage's phone hiding, and the shell's lift above the bottom nav. */
.hm-wa{position:fixed;bottom:26px;right:26px;z-index:50;width:56px;height:56px;border-radius:999px;background:#191612;color:#f5f2ec;border:1px solid rgba(245,242,236,.16);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(25,22,18,.3);transition:transform .15s,background .18s}
.hm-wa svg{width:22px;height:22px}
.hm-wa:hover{background:#000;transform:scale(1.06)}
@media(max-width:900px){
.app-shell > .hm-wa.shell-wa{
width:48px;height:48px;z-index:40;
bottom:calc(86px + env(safe-area-inset-bottom));right:16px;
}
}
/* Homepage: geometry only — the appearance comes from the base rule above. The
footer reserves height below its last line so the button never sits over copy
or a CTA, and the phone safe area is added on top. "Talk to Sales" also
exists as a text link under the hero CTA, as a button in the closing section
and in the footer, so the float is never the only route to sales. */
body.hm-dark .hm-wa{width:48px;height:48px;bottom:calc(22px + env(safe-area-inset-bottom));right:22px}
/* ---------- homepage responsive ---------- */
@media(max-width:900px){
/* Phone and small-tablet layout, designed as its own sequence rather than the
desktop grid squeezed into one column: the campaign photograph leads (it is
ordered above the copy so it is on the first screen), everything else
stacks in reading order, and nothing overlaps or is nudged off the line. */
.hm-ed-in{grid-template-columns:minmax(0,1fr);gap:clamp(20px,4vw,28px);padding:clamp(16px,3vw,26px) clamp(20px,5.6vw,32px) clamp(44px,6vw,64px)}
.hm-ed-art{order:-1}
/* landscape crop on the model's head and shoulders, so the hero photograph
fits the first screen above the headline instead of filling it */
.hm-ed-art-main{aspect-ratio:5/4;max-height:48vh}
.hm-focus-in{grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,32px)}
.hm-focus-pair{grid-template-columns:minmax(0,1fr);height:auto;gap:clamp(12px,3vw,18px)}
.hm-focus-pair figure{height:auto}
.hm-focus-pair img{height:auto}
.hm-focus-a img{aspect-ratio:4/5}
.hm-focus-b img{aspect-ratio:3/2}
.hm-port-in{grid-template-columns:minmax(0,1fr);gap:24px}
/* Full content width, flush with the eyebrow — not a centered max-width box.
Aspect follows the portrait asset so contain no longer letterboxes sides. */
.hm-port-feature{max-width:none;width:100%;margin:0;aspect-ratio:4/5}
.hm-port-feature img{object-fit:cover;object-position:center}
.hm-motion-in{grid-template-columns:minmax(0,1fr);gap:26px;align-items:start}
.hm-close-in{grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
}
@media(max-width:820px){
.hm-strip-in{grid-template-columns:minmax(0,1fr);gap:0}
.hm-strip article{padding:22px 0 0;margin-top:22px;border-left:0;border-top:1px solid var(--hm-rule)}
.hm-strip article:first-child{padding-top:0;margin-top:0;border-top:0}
.hm-foot-in{grid-template-columns:minmax(0,1fr);gap:16px;padding-bottom:calc(72px + env(safe-area-inset-bottom))}
.hm-foot-logo,.hm-foot-links{grid-column:1}
.hm-foot-links{justify-content:flex-start;gap:2px 22px}
/* smaller and further into the corner, clear of the reading column */
body.hm-dark .hm-wa{width:44px;height:44px;bottom:calc(14px + env(safe-area-inset-bottom));right:14px}
body.hm-dark .hm-wa svg{width:20px;height:20px} /* sizing only */
body.hm-dark .site-foot{padding-inline-end:calc(14px + 44px + 16px)}
}
@media(max-width:560px){
/* full-width primary button, with Talk to Sales as the text link beneath it */
.hm-actions{gap:12px 18px;margin-top:28px}
.hm-actions .hm-btn{flex:1 1 100%}
.hm-actions .sales-pick:has(> summary.hm-btn){flex:1 1 100%}
.hm-actions .sales-pick > summary.hm-btn{width:100%;box-sizing:border-box}
/* A shallower band on the smallest phones. At 375x667 the 5/4 crop put the
CTA exactly on the fold; 3/2 buys 44px and still shows the model's head,
sunglasses and shoulders across the full width of the screen. */
.hm-ed-art-main{aspect-ratio:3/2}
/* Request an account rides on the photograph (the first screen) instead of
a second header row. Grid overlay, not absolute, so the image still
reserves its box. The in-flow text link is redundant here. */
.hm-ed-art{display:grid}
.hm-ed-art > *{grid-area:1/1}
.hm-ed-req{display:flex;align-self:end;justify-self:stretch;z-index:1;margin:12px;
box-sizing:border-box;box-shadow:0 8px 24px rgba(25,22,18,.28)}
.hm-ed .hm-actions a[href="#/request-account"]{display:none}
.hm-state-copy h2{max-width:none}
/* On a phone there is no corner the float can sit in without landing on a
headline, a photograph or the primary CTA at some scroll position, so the
homepage drops it entirely. Talk to Sales stays reachable three other
ways: the text link under the hero CTA, the button in the closing section
and the footer link. Scoped to body.hm-dark, so the authenticated shell's
`.hm-wa.shell-wa` is untouched — that one still sits above the bottom nav. */
body.hm-dark .hm-wa{display:none}
body.hm-dark .site-foot{padding-inline-end:0;padding-bottom:0}
}
/* ==================== products page (old veyora.com card design) ==================== */
.prod-head{display:flex;justify-content:space-between;align-items:center;margin:6px 0 14px;gap:10px}
.prod-head h1{font-size:22px;font-weight:600;letter-spacing:.5px;color:#000;margin-right:auto}
.bigsearch{position:relative;margin-bottom:14px}
.bigsearch input{width:100%;height:42px;padding:0 14px 0 46px;border:none;border-radius:10px;background:#f5efe4;font-size:16px;font-weight:500;outline:none;color:var(--ink)}
.bigsearch input::placeholder{color:#a89f90;font-weight:400}
.bigsearch::before{content:'⌕';position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:21px;color:#4c463d;z-index:1;pointer-events:none}
.cat-suggest{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 6px);margin:0;padding:8px 0;list-style:none;
background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px rgba(34,31,32,.12);max-height:min(70vh,480px);overflow:auto}
.cat-suggest[hidden]{display:none !important}
.cat-suggest-item{display:flex;gap:12px;align-items:center;padding:10px 14px;cursor:pointer}
.cat-suggest-item:hover,.cat-suggest-item.on{background:#f5efe4}
.cat-suggest-thumb{width:72px;height:72px;border-radius:10px;background:#f3f1ee;overflow:hidden;flex:0 0 auto;
display:grid;place-items:center;border:1px solid #ebe7e1}
.cat-suggest-thumb img{width:100%;height:100%;object-fit:contain}
.cat-suggest-txt{min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.25}
.cat-suggest-sku{font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.cat-suggest-hit{color:#ed6e2a;font-weight:800;background:none;padding:0}
.cat-suggest-txt .sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-suggest-var{color:#8a857c;font-weight:600;font-variant-numeric:tabular-nums}
.cat-suggest-empty{padding:14px 16px;font-size:13px;color:var(--muted)}
.cat-suggest-group{list-style:none;margin:0;padding:0;border-bottom:1px solid #f0ebe4}
.cat-suggest-group:last-child{border-bottom:none}
.cat-suggest-parent{border-radius:0}
.cat-suggest-vars{list-style:none;margin:0;padding:0 14px 10px 98px;display:flex;flex-direction:column;gap:4px}
.cat-suggest-var-item{
display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;cursor:pointer;
font-size:12.5px;color:var(--ink-2);
}
.cat-suggest-var-item:hover,.cat-suggest-var-item.on{background:#f5efe4}
.cat-suggest-var-thumb{
width:40px;height:40px;border-radius:8px;background:#f3f1ee;overflow:hidden;flex:0 0 auto;
display:grid;place-items:center;border:1px solid #ebe7e1;
}
.cat-suggest-var-thumb img{width:100%;height:100%;object-fit:contain}
.cat-suggest-var-sku{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.cat-suggest-var-label{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fbar{
background:#fafafa;border:1px solid #eee;border-radius:10px;
padding:8px 10px;margin-bottom:12px;
}
.fbar-head{display:flex;align-items:flex-start;gap:10px}
.fchips{
flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
}
.fclear{
flex:0 0 auto;align-self:flex-start;
background:#fff;border:1px solid #d8d2c8;border-radius:999px;
padding:5px 11px;font-size:12px;font-weight:650;color:var(--ink-2);
cursor:pointer;line-height:1.3;white-space:nowrap;
}
.fclear:hover{background:#f3f4f6;border-color:#cfc8bc;color:var(--ink)}
.fgroup{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;max-width:100%}
.fgroup .flabel{
margin:0 2px 0 0;font-size:10.5px;font-weight:650;
letter-spacing:.04em;text-transform:uppercase;color:#9a9590;white-space:nowrap;
}
.fdiv{width:1px;height:16px;background:#e4e0db;flex:0 0 auto;align-self:center}
.fchip{
display:inline-flex;align-items:center;justify-content:center;
height:26px;padding:0 10px;background:#fff;border:1px solid #d4d0cb;
border-radius:999px;font-size:12.5px;font-weight:600;color:#221f20;
cursor:pointer;user-select:none;transition:background .12s,border-color .12s,color .12s;
}
.fchip:hover{background:#f3f1ee;border-color:#c5c0b8}
.fchip:focus-visible{outline:2px solid #221f20;outline-offset:2px}
.fchip.on{background:#221F20;border-color:#221F20;color:#fff}
.fchip.on:hover{background:#2e2a2b;border-color:#2e2a2b}
/* Exact eye mm only when a size range is active — breaks under the chip row */
.size-bands{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}
.size-exact-panels{
display:none;flex-basis:100%;flex-direction:column;gap:4px;width:100%;margin:2px 0 0;
}
.size-exact-panels.has-open{display:flex}
.size-exact{
display:none;flex-wrap:wrap;align-items:center;gap:4px;width:100%;
padding:6px 8px;background:#fff;border:1px solid #ebe7e1;border-radius:8px;
}
.size-exact.open{display:flex}
.size-exact-label{font-size:10.5px;font-weight:650;color:#9a9590;margin-right:2px;white-space:nowrap}
.fchip.size-band-all{font-variant-numeric:tabular-nums;letter-spacing:.01em;min-width:3.6rem;padding:0 8px}
.fchip.size-band-all.partial{background:rgba(34,31,32,.08);border-color:#221F20;color:#221F20}
.fchip[data-g="sizes"]{font-variant-numeric:tabular-nums;min-width:28px;padding:0 6px;height:24px;font-size:12px}
.fbar #brandGroup{max-width:100%}
/* scan-your-list: doc button beside Filters (all widths), old-site modal */
.fbtn.scanbtn{display:inline-flex;padding:3px 12px}
.scan-drop{border:1.5px dashed var(--line);border-radius:14px;padding:26px 18px;text-align:center;margin-bottom:8px}
.scan-drop.over{border-color:var(--ink-2);background:var(--soft-blue)}
.scan-drop .scan-ic{width:64px;height:64px;border-radius:999px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px}
/* mobile filters: button opens a bottom sheet */
.fbtn{display:none;align-items:center;gap:6px;height:42px;padding:3px 12px;background:transparent;border:1px solid rgba(34,31,32,.5);border-radius:10px;color:#221f20;font-size:14px;font-weight:500;letter-spacing:.5px;cursor:pointer;flex:0 0 auto}
.fbtn.has-filters{border-color:#221F20;background:rgba(34,31,32,.06)}
.fbtn-badge{
display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
padding:0 5px;margin-left:2px;border-radius:999px;background:#221F20;color:#fff;
font-size:11px;font-weight:700;line-height:1;letter-spacing:0;
}
.fsheet-back{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .22s;display:flex;align-items:flex-end;justify-content:center}
.fsheet-back.open{opacity:1;pointer-events:auto}
.fsheet{
position:relative;left:auto;right:auto;bottom:auto;width:100%;max-width:560px;
background:#fff;border-radius:18px 18px 0 0;
max-height:min(88vh,760px);display:flex;flex-direction:column;
box-shadow:0 -8px 32px rgba(34,31,32,.18);overflow:hidden;
padding:0 0 env(safe-area-inset-bottom,0);
}
.fsheet-grab{
width:44px;height:5px;border-radius:999px;background:#d0cac0;margin:10px auto 2px;flex:none;
position:relative;
}
/* Larger hit target for the drag handle without growing the visible pill */
.fsheet-grab::before{
content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:88px;height:28px;
}
.fsheet-head{
display:flex;justify-content:space-between;align-items:center;gap:12px;
padding:10px 18px 12px;border-bottom:1px solid #efeae3;flex:none;
touch-action:none;cursor:grab;
}
.fsheet-grab{touch-action:none;cursor:grab}
.fsheet-back.dragging .fsheet-head,
.fsheet-back.dragging .fsheet-grab{cursor:grabbing}
.fsheet-back.dragging{transition:none}
.fsheet-back.dragging .fsheet{will-change:transform}
.fsheet-head b{font-size:17px;font-weight:700;letter-spacing:-.01em}
.fsheet-done{
background:none;border:none;font-size:15px;font-weight:650;color:#221f20;cursor:pointer;
padding:6px 4px;min-height:36px;
}
.fsheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 16px 12px}
.fsheet-foot{
flex:none;display:flex;gap:10px;align-items:center;padding:12px 16px 14px;
border-top:1px solid #efeae3;background:#fff;
}
.fsheet-clear,.fsheet-apply{
border-radius:12px;font:inherit;font-weight:650;font-size:14.5px;cursor:pointer;
min-height:46px;padding:0 16px;
}
.fsheet-clear{
flex:0 0 auto;background:#fff;border:1px solid #d8d2c8;color:#221f20;
}
.fsheet-clear[hidden]{display:none!important}
.fsheet-apply{
flex:1 1 auto;background:#221F20;border:1px solid #221F20;color:#fff;
}
.fsheet .fbar{background:none;border:none;border-radius:0;padding:0;margin:0;box-shadow:none}
.fsheet .fbar-head{display:block;gap:0}
.fsheet .fclear{display:none!important} /* Clear lives in the sheet foot on phone */
.fsheet .fdiv{display:none}
.fsheet .fchips{
display:flex;flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;
}
.fsheet .fgroup{
display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;
padding:14px 0;border:none;border-bottom:1px solid #f0ebe4;border-radius:0;
background:transparent;
}
.fsheet .fgroup:last-child{border-bottom:none}
.fsheet .fgroup .flabel{
width:100%;flex:0 0 100%;margin:0 0 2px;font-size:11px;letter-spacing:.06em;color:#8a857c;
}
.fsheet .fchip{
/* Keep pills compact — never stretch to full sheet width */
flex:0 0 auto;width:auto;max-width:100%;
height:36px;padding:0 14px;font-size:13.5px;border-radius:999px;
box-sizing:border-box;
}
.fsheet .fchip.size-band-all{min-width:4.2rem;height:36px}
.fsheet .fchip[data-g="sizes"]{min-width:34px;height:34px;font-size:13px;padding:0 8px}
.fsheet .size-bands{gap:8px}
.fsheet .size-exact-panels{margin-top:4px;gap:8px;grid-column:auto}
.fsheet .size-exact{
padding:10px;border-radius:12px;gap:8px;background:#faf8f4;border-color:#ebe5db;
}
.fsheet .size-exact-panels{margin-top:0}
.fsheet #brandGroup{grid-column:auto}
/* Inline filters on laptop/desktop; sheet on phone/small tablet */
@media(max-width:900px){
.fbar{display:none}
.fsheet .fbar{display:block}
.fbtn{display:inline-flex}
}
@media(max-width:760px){
.prod-head h1{font-size:16px}
}
.pgrid2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;align-items:stretch}
.pgrid2 > .pcard2{align-self:stretch;height:100%;min-height:100%}
@media(max-width:1100px){.pgrid2{grid-template-columns:repeat(3,1fr)}}
@media(max-width:840px){.pgrid2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.pgrid2{grid-template-columns:1fr 1fr}}
/* mobile fixes: readable/tappable order button; cart line must wrap so the
remove + total stay on-screen; bigger qty steppers for touch */
@media(max-width:480px){
.pcard2 .orderbtn{
flex-basis:40px;height:40px;min-height:40px;max-height:40px;
font-size:11px;letter-spacing:.6px;padding:0 8px;
}
.cart-line{flex-wrap:wrap}
.cart-line .cart-hit{flex:1 1 100%;order:-1}
.cart-line .info{flex:1 1 100%}
.cart-line img,.cart-thumb img,.cart-thumb .noimg{width:56px;height:44px}
.cart-thumb{flex-basis:56px;width:56px;height:44px}
.cart-line .lt{min-width:0}
}
@media(max-width:760px){
.qtybox{height:40px}
.qtybox button{min-width:40px;width:40px}
.qtyfield{width:40px}
.vrow .qtybox button{width:40px}
}
.pcard2{position:relative;background:#fff;border:none;border-radius:2px;cursor:pointer;display:flex;flex-direction:column;height:100%;min-height:100%;align-self:stretch;transition:box-shadow .15s}
.pcard2:hover{box-shadow:var(--shadow)}
.pcard2 .seller{position:absolute;top:10px;left:10px;z-index:2;font-size:8px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2.8px 6.4px;border-radius:3px}
.pcard2 .seller.best{background:#E8730C;color:#fff}
.pcard2 .seller.good{background:#f4d96e;color:#1a1a1a}
.pcard2 .seller.review{background:#fde68a;color:#92400e}
.pcard2.needs-review{outline:2px solid #f59e0b;outline-offset:-2px;background:#fffbeb}
.pcard2.needs-review .imgbox2{background:#fff4d6}
.pcard2 .badge3d{position:absolute;right:10px;bottom:56px;z-index:3;font-size:8px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2.8px 6.4px;border-radius:3px;background:#131e42;color:#fff;pointer-events:none}
.pcard2 .photo-wrap{display:block;position:relative;flex:0 0 auto;width:100%}
.pcard2 .imgbox2{
position:relative;width:100%;height:0;padding-bottom:100%;overflow:hidden;
background:#f4f3f1;display:block;flex:none;
}
.pcard2 .imgbox2 img{
position:absolute;top:0;left:0;width:100%;height:100%;
object-fit:contain;display:block;
}
.pcard2 .imgbox2.swipeable{touch-action:pan-y;cursor:grab;user-select:none}
.pcard2 .imgbox2.swipeable:active{cursor:grabbing}
.pcard2 .imgbox2.swipeable img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.pcard2 .imgbox2 .noimg{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
color:#cbd5e1;font-size:38px;letter-spacing:.2em;
}
/* Second-angle image, fades in over the square on hover (desktop). Sits outside
.imgbox2 so the thumbnail-click image swap never removes it. Armed only while
the card still shows the product gallery hero — colour thumb previews turn it off. */
.pcard2 .hover-img{
position:absolute;top:0;left:0;width:100%;aspect-ratio:1/1;height:auto;z-index:1;
object-fit:contain;background:#f4f3f1;opacity:0;transition:opacity .18s ease;pointer-events:none;
}
@media (hover:hover){.pcard2.hover-armed:hover .hover-img{opacity:1}}
/* Only while a thumb click just happened under an active hover — clear on
mouseleave so the second-angle hover effect keeps working as normal. */
.pcard2.thumb-swapping .hover-img,
.pcard2.thumb-swapping:hover .hover-img{opacity:0}
/* Client feedback item 2. `colour-locked` is set by productCard() as soon as
the customer picks a colourway that is not the product's own photograph, and
is cleared only when they pick that photograph back. The second-angle
overlay is a PRODUCT-level image, so leaving it live would let a hover
replace the colour they chose with the one the product happened to be
photographed in. Unlike `thumb-swapping` this does not end at mouseleave. */
.pcard2.colour-locked .hover-img,
.pcard2.colour-locked:hover .hover-img{opacity:0}
.pcard2 .photo-wrap{cursor:pointer}
.pcard2 .attrline{
display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;
max-width:100%;min-width:0;box-sizing:border-box;
flex:0 0 48px;height:48px;min-height:48px;max-height:48px;
text-align:center;color:rgba(0,0,0,.55);font-size:12.5px;font-weight:600;
font-variant-numeric:tabular-nums;padding:0 10px;letter-spacing:.14em;
white-space:nowrap;overflow:hidden;
}
.lens-chip{
display:inline-block;max-width:100%;box-sizing:border-box;
background:#efe9f5;color:#56416d;font-size:10.5px;font-weight:700;
padding:2px 8px;border-radius:4px;vertical-align:1px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pcard2 .attrline .lens-chip{margin-left:6px;flex:0 0 auto;max-width:42%}
.pcard2-meta{display:flex;flex-direction:column;flex:1 1 auto;min-height:118px}
.pcard2-spacer{flex:1 1 auto;min-height:0}
.pcard2 .rowname{
display:flex;justify-content:space-between;align-items:center;
flex:0 0 36px;height:36px;min-height:36px;max-height:36px;
padding:8px 14px 4px;box-sizing:border-box;overflow:hidden;
}
.pcard2 .pname{
font-size:11.5px;font-weight:500;letter-spacing:1.5px;color:#1a1a1a;text-transform:uppercase;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;
}
.pcard2 .vthumbs,
.pcard2 .vthumbs.empty-thumbs{
display:flex;gap:8px;align-items:center;justify-content:flex-start;
flex:0 0 52px;height:52px;min-height:52px;max-height:52px;
padding:6px 14px 6px;box-sizing:border-box;
flex-wrap:nowrap;overflow:hidden;min-width:0;
}
.pcard2 .vthumb{
display:flex;flex-direction:column;align-items:center;gap:3px;
flex:0 0 auto;width:44px;padding:0;margin:0;border:0;background:transparent;cursor:pointer;
font:inherit;color:inherit;-webkit-appearance:none;appearance:none;
}
.pcard2 .vthumb img{
width:40px;height:40px;border-radius:var(--radius-chip);object-fit:cover;
border:1.5px solid #ddd9d2;background:#f4f3f1;display:block;
}
.pcard2 .vthumb.sel img{border-color:#221F20}
.pcard2 .vthumb-color{
display:block;width:100%;max-width:44px;
font-size:9.5px;font-weight:600;line-height:1.15;letter-spacing:.02em;
color:#6b6760;text-align:center;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pcard2 .vthumbs .more{
flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
min-width:40px;height:40px;padding:0 6px;
font-size:12px;font-weight:700;color:#6b6760;letter-spacing:.02em;
}
/* Narrow cards: smaller same-size thumbs; JS shows however many fit + +N. */
@media(max-width:840px){
.pcard2{min-width:0}
.pcard2 .vthumbs,
.pcard2 .vthumbs.empty-thumbs{
flex-basis:44px;height:44px;min-height:44px;max-height:44px;
gap:6px;padding:6px 8px;
}
.pcard2 .vthumb{flex:0 0 auto;width:36px}
.pcard2 .vthumb img{width:32px;height:32px}
.pcard2 .vthumb-color{max-width:100%;font-size:8px}
.pcard2 .vthumbs .more{min-width:32px;height:32px;font-size:11px;padding:0 4px}
}
.pcard2 .orderbtn{
flex:0 0 30px;height:30px;min-height:30px;max-height:30px;
margin-top:0;background:#1a1a1a;color:#fff;border:none;padding:0 8px;
font-size:8.8px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;
}
.pcard2 .orderbtn:hover{background:#3a3536}
.pcard2 .orderbtn:disabled{background:#c9c5bf;cursor:default}
/* orderable but not in stock — distinct from a live "Order" so the customer
knows before clicking, without the button looking broken */
.pcard2 .orderbtn.bo{background:#56416d}
.pcard2 .orderbtn.bo:hover{background:#6a5185}
/* guest catalog / auth / legal: same light header as the marketing homepage */
.guest-head .hm-nav{position:sticky;top:0;background:#fff}
.page.prod-page{max-width:none;padding:18px 24px 90px;background:var(--bg);color:var(--ink)}
.page:has(.prod-page-inner){max-width:none;padding-left:24px;padding-right:24px}
@media(max-width:760px){
.page.prod-page{padding:12px 12px 90px}
.page:has(.prod-page-inner){padding-left:12px;padding-right:12px}
}
@media(max-width:820px){
.hm-head{padding:16px 18px}
.hm-logo img{width:150px}
.hm-nav-in{flex-wrap:nowrap;gap:10px;padding:10px 16px}
.hm-nav-end{gap:8px;flex:0 1 auto}
.hm-nav-links{flex-wrap:nowrap;justify-content:flex-end;gap:8px 12px;min-width:0}
.hm-nav-links a{letter-spacing:.1em;min-height:36px}
.hm-nav-links .hm-nav-acct{padding:0 10px}
}
/* ---- Customer view: one frame, no price, for turning the screen to a shopper ---- */
.custview{position:fixed;inset:0;z-index:90;background:#fff;display:flex;align-items:center;
justify-content:center;padding:28px;overflow:auto;animation:cvfade .18s ease}
@keyframes cvfade{from{opacity:0}to{opacity:1}}
.cv-close{position:fixed;top:14px;right:16px;width:46px;height:46px;border:none;border-radius:50%;
background:#f1f1f1;color:#333;font-size:26px;line-height:1;cursor:pointer;z-index:2;
display:flex;align-items:center;justify-content:center}
.cv-close:hover{background:#e7e7e7}
.cv-card{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:720px;
width:100%;min-width:0}
.cv-stage{width:100%;max-width:min(600px,100%);aspect-ratio:1/1;display:flex;align-items:center;
justify-content:center;background:#fafbfc;border-radius:16px;overflow:hidden;touch-action:pan-y}
.cv-stage img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.cv-stage .noimg{font-size:72px;color:#d2d2d2}
.cv-meta{text-align:center}
.cv-brand{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#8a8a8a}
.cv-name{font-size:27px;font-weight:800;margin:5px 0 0;color:var(--ink,#131e42)}
.cv-colors{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}
.cv-swatch{display:flex;flex-direction:column;align-items:center;gap:5px;border:1px solid #ececec;
border-radius:11px;padding:7px;background:#fff;cursor:pointer;width:88px}
.cv-swatch.sel{border-color:var(--ink,#131e42);box-shadow:0 0 0 1px var(--ink,#131e42)}
.cv-swatch img,.cv-swatch .noimg{width:66px;height:48px;object-fit:contain}
.cv-swatch .noimg{font-size:22px;color:#d2d2d2;display:flex;align-items:center;justify-content:center}
.cv-swatch span{font-size:11px;color:#555;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){
.custview{padding:16px}
.cv-name{font-size:22px}
.cv-stage{max-width:100%}
}
/* ---------- return form: order lines + exchange picker (feedback B, C) ---------- */
.ret-lines td{vertical-align:middle}
.ret-lines .qtybox{margin:0}
.ret-line select.r-res{padding:7px 8px;border:1px solid var(--line);border-radius:8px;
font-size:13px;background:#fff;color:var(--ink)}
.ret-ex{margin-top:10px}
.ret-ex > label{display:block;margin-bottom:5px}
/* The picker is positioned so its list can overlay what follows rather than
pushing the Submit button down the page every time somebody types. */
.ex-pick{position:relative}
.ex-input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
font-size:13.5px;background:#fff;color:var(--ink)}
.ex-input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.ex-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);
max-height:260px;overflow-y:auto;background:#fff;border:1px solid var(--line);
border-radius:10px;box-shadow:var(--shadow)}
.ex-opt{display:flex;align-items:center;gap:10px;padding:8px 11px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line-2,#f1f5f9)}
.ex-opt:last-child{border-bottom:0}
.ex-opt-thumb{flex:0 0 56px;width:56px;height:42px;display:flex;align-items:center;justify-content:center}
.ex-opt-thumb img,.ex-opt-thumb .noimg{
width:56px;height:42px;object-fit:contain;display:block;
border:0;border-radius:0;background:transparent;box-shadow:none;mix-blend-mode:multiply;
}
.ex-opt-txt{min-width:0;flex:1;line-height:1.35}
.ex-opt-txt .sub{display:block;margin-top:1px}
/* Hover and keyboard selection share one appearance: a customer arrowing down
and a customer with a mouse should not see two different "this one" states. */
.ex-opt:hover,.ex-opt.on{background:var(--soft-blue,#eef4fb)}
.ex-empty{padding:11px;font-size:13px;color:var(--muted)}
@media (max-width:640px){
.ret-lines td{padding:8px 6px}
.ret-lines .r-qty-cell,.ret-lines .r-res-cell{display:block}
.ex-opt-thumb{flex-basis:48px;width:48px;height:36px}
.ex-opt-thumb img,.ex-opt-thumb .noimg{width:48px;height:36px}
}
/* The reorder list carries a thumbnail, SKU, name, cadence, an overdue badge,
a stock pill and a button. At tablet width the name column was the only
thing allowed to yield, so it collapsed to its 80px basis and wrapped to
four lines while everything else kept its size. It gets a workable basis
here, and the row wraps as a whole once it genuinely cannot fit. */
.reorder-row .vcol{flex:1 1 220px}
.reorder-row .btn{flex:0 0 auto}
/* Photo + identity open the product modal. Quantity / Reorder stay separate
so a qty tap never accidentally opens the frame. */
.reorder-hit{
flex:1 1 220px;min-width:0;display:flex;align-items:center;gap:12px;
margin:0;padding:0;border:0;background:transparent;text-align:left;
font:inherit;color:inherit;cursor:pointer;border-radius:8px;
}
.reorder-hit:hover .vsku,.reorder-hit:hover .vcol{color:var(--ink)}
.reorder-hit:focus-visible{outline:2px solid var(--ink-2);outline-offset:2px}
.reorder-hit .vsku{flex:0 0 auto}
.reorder-hit .vcol{flex:1 1 120px;min-width:0}
.reorder-hit img,.reorder-hit .noimg{flex:0 0 auto}
@media (max-width:900px){
.reorder-row .btn{margin-left:auto}
/* Photo left, SKU then name stacked right — a 100% flex basis in a nowrap
row was painting the SKU on top of the colourway (B18, phones >400px). */
.reorder-hit{
flex:1 1 100%;min-width:0;
display:grid;grid-template-columns:56px minmax(0,1fr);
column-gap:10px;row-gap:2px;align-items:center;
}
.reorder-hit img,.reorder-hit .noimg{grid-column:1;grid-row:1 / span 2}
.reorder-hit .vsku{grid-column:2;grid-row:1;min-width:0;flex:none;overflow-wrap:anywhere}
.reorder-hit .vcol{grid-column:2;grid-row:2;min-width:0;flex:none}
}
/* ---------- Back control (feedback E) ---------- */
/* Sits in the light topbar beside the menu button. Inherits ink colour. */
.topbar .backbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
color:inherit;font:inherit;font-size:13px;font-weight:600;padding:8px 10px;border-radius:8px;
cursor:pointer;white-space:nowrap}
.topbar .backbtn:hover{background:rgba(25,22,18,.08)}
.topbar .backbtn:focus-visible{outline:2px solid #191612;outline-offset:-2px}
.topbar .backbtn svg{display:block}
/* On a phone the word is dropped and the arrow carries it; the button keeps
its aria-label, so it is still announced as "Back". */
@media (max-width:520px){
.topbar .backbtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.topbar .backbtn{padding:8px}
}
/* ---------- Balance & Payments (feedback G, H) ---------- */
.bal-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.bal-stat{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:#fff}
.bal-k{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.bal-v{font-size:22px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
/* An unset credit limit is a NEUTRAL state, not an error. It is greyed rather
than reddened, because "nobody has set one" is not the customer's problem
and must not read as a warning about their account. */
.bal-unset .bal-v{font-size:15px;font-weight:600;color:var(--muted)}
.bal-note{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.45}
.bal-terms-note{font-weight:400;color:var(--muted)}
/* Over the limit IS a warning, and looks like one. */
.bal-stat.over{border-color:#f3c9c4;background:#fdf6f5}
.bal-stat.over .bal-v{color:var(--bad)}
.bal-h{font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px;margin-bottom:10px}
.bal-h svg{flex:0 0 auto}
.bal-inv{width:100%;border-collapse:collapse}
.bal-inv th,.bal-inv td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.bal-inv th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
.bal-inv .bal-num,.bal-inv th.bal-num,.bal-inv td.bal-num{
text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;width:1%}
.bal-inv tfoot td{border-bottom:0;padding-top:12px}
.bal-open-orders tr.click{cursor:pointer}
.bal-open-orders tr.click:hover td{background:#f7fafc}
/* ---------- expandable orders (feedback I) ---------- */
.ord-card{border-radius:var(--radius);box-shadow:var(--shadow)}
.ord-table th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
.ord-table td,.ord-table th{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.ord-table .pill{border-radius:var(--radius-badge)}
.ord-x{width:34px}
.ord-toggle{background:none;border:0;padding:4px;color:var(--muted);cursor:pointer;
display:flex;align-items:center;border-radius:5px}
.ord-toggle:hover{background:var(--soft-blue);color:var(--ink)}
.ord-toggle svg{transition:transform .14s ease}
.ord-row.open .ord-toggle svg{transform:rotate(90deg)}
.ord-detail > td{background:#fbfcfd;padding:12px 14px}
.ord-detail-foot{display:flex;gap:8px;margin:10px 0 4px}
.ord-inv-cell{white-space:nowrap}
.ord-paid-cell{min-width:72px;font-variant-numeric:tabular-nums}
.ord-paid-cell .bal-bar{max-width:64px;margin-top:4px}
.ord-lines{width:100%;border-collapse:collapse}
.ord-lines td{padding:0;border:0}
.ord-hit{
width:100%;display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;
gap:12px;align-items:center;padding:10px 4px;margin:0;border:0;border-bottom:1px solid var(--line);
background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer;border-radius:0;
}
.ord-hit:hover{background:#f8fafc}
.ord-hit:focus-visible{outline:2px solid var(--ink-2);outline-offset:-2px}
.ord-hit .ord-thumb{width:56px;height:42px;display:flex;align-items:center;justify-content:center}
.ord-hit .ord-thumb img,.ord-hit .ord-thumb .noimg{
width:56px;height:42px;object-fit:contain;display:block;
border:0;border-radius:0;background:transparent;box-shadow:none;mix-blend-mode:multiply;
}
.ord-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.ord-sku{font-weight:700;font-size:13px;color:var(--ink)}
.ord-name{font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ord-qty,.ord-price{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.ord-price{min-width:72px;text-align:right}
/* The address AS STAMPED on the order. Soft panel so it reads as a record,
not an editable profile field — horizontal locality line, phone as a link. */
.ord-addr{margin-top:14px;padding:12px 14px;border-radius:var(--radius);
background:linear-gradient(180deg,#f4f7fb 0%,#eef3f8 100%);
border:1px solid #d7e0ea;font-size:13px;line-height:1.45;max-width:42rem}
.ord-addrs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;max-width:56rem}
.ord-addrs .ord-addr{margin-top:0;max-width:none}
@media (max-width:640px){.ord-addrs{grid-template-columns:1fr}}
.ord-addr-h{font-size:10.5px;font-weight:700;color:#5b6b7c;text-transform:uppercase;
letter-spacing:.08em;margin-bottom:8px}
.ord-addr-body{display:flex;flex-direction:column;gap:4px}
.ord-addr-who{font-weight:650;color:var(--ink);font-size:13.5px}
.ord-addr-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;
color:#3d4a5c;font-size:13px}
.ord-addr-sep{display:inline-block;padding:0 8px;color:#94a3b8;font-weight:500}
.ord-addr-phone{display:inline-block;margin-top:4px;color:var(--accent);font-weight:600;
font-variant-numeric:tabular-nums;letter-spacing:.02em;text-decoration:none}
a.ord-addr-phone:hover{text-decoration:underline;color:var(--ink-2)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Balance paid bar */
.page-head.bal-page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
margin-bottom:14px;flex-wrap:wrap}
.page-head.bal-page-head .pagetitle{margin-bottom:0}
.page-head-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.bal-pay-note{margin:0}
.bal-bar{height:4px;background:#e8eef5;border-radius:1px;margin-top:6px;overflow:hidden;max-width:140px}
.bal-bar > span{display:block;height:100%;background:var(--ok)}
.bal-inv th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
/* Address suggestions (Photon / OSM) */
/* Profile/saved address shown first; Change reveals the field grid. */
.addr-use-summary{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.addr-use-lines{flex:1;min-width:180px;font-size:13.5px;line-height:1.45;color:var(--ink)}
.addr-use-line + .addr-use-line{margin-top:2px}
.addr-use-change{flex:0 0 auto;align-self:flex-start}
.addr-suggest{position:relative}
.addr-suggest-list{position:absolute;z-index:80;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px 0;
list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
box-shadow:0 8px 24px rgba(19,30,66,.12);max-height:220px;overflow:auto}
.addr-suggest-list li{padding:8px 12px;font-size:12.5px;cursor:pointer;line-height:1.35}
.addr-suggest-list li:hover,.addr-suggest-list li.active{background:var(--soft-blue)}
.addr-suggest input{width:100%}
/* ---------- in-portal confirmation (feedback M) ---------- */
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
/* The destructive choice is styled as such and is NOT the focused control —
Cancel takes focus, so a reflex Enter does not confirm a deletion. */
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.danger:hover{background:#a11414;border-color:#a11414}
@media (max-width:420px){
.modal-actions{flex-direction:column-reverse}
.modal-actions .btn{width:100%;justify-content:center}
}
/* ---------- legal pages (privacy / terms / accessibility) ---------- */
.legal-page{min-height:100vh;display:flex;flex-direction:column;background:#f7f6f4}
.legal-page .guest-head .hm-nav{position:sticky;top:0;background:#fff}
.legal-main{flex:1;padding:clamp(28px,4vw,48px) clamp(20px,4vw,40px) clamp(48px,6vw,72px)}
.legal-inner{max-width:42rem;margin:0 auto}
.legal-inner h1{font-size:clamp(1.6rem,2.5vw,2rem);font-weight:600;letter-spacing:.02em;margin:0 0 12px;color:var(--ink)}
.legal-inner .legal-updated{font-size:13px;color:var(--muted);margin:0 0 1.25rem}
.legal-inner h2{font-size:1.1rem;font-weight:650;margin:1.75rem 0 .55rem;color:var(--ink)}
.legal-inner p,.legal-inner li{font-size:14.5px;line-height:1.7;color:rgba(28,25,23,.78);margin:0 0 .9rem}
.legal-inner ul{margin:0 0 1rem;padding-left:1.2rem}
.legal-inner li{margin:0 0 .35rem}
.legal-inner a{color:var(--ink);text-decoration:underline;text-underline-offset:.15em}
/* ===========================================================================
NARROW PHONES AND TRANSLATED TEXT (Gate 1, batch 1E)
Two defects, one cause.
Human acceptance reported the customer dashboard CLIPPED on the right at
375px, and separately reported that translated strings damage alignment. The
base rule `body{overflow-x:clip}` at the top of this file meant neither
ever produced a scrollbar — content simply ran off the edge and was cut. That
guard stops a page sliding sideways; it does NOT make the content fit, and it
is what turned an overflow into an invisible amputation.
So this section makes the content actually fit at 375px, and makes it keep
fitting when a label is Italian, French, German or Arabic. Translated strings
are ALLOWED TO WRAP. Nothing here truncates customer-meaningful text: a
button that reads over two lines is correct; a button reading
"Aggiungi tutt…" is not.
=========================================================================== */
@media (max-width:430px){
/* THE CONFIRMED DEFECT. Two tiles across 375px leaves roughly 74px of text
column beside a 46px icon chip and 32px of padding — not enough for
"Backorders open" in English, let alone "Rückstände offen". The tile then
overflowed and `overflow-x:clip` ate the right-hand edge. One column has
room for every language. */
.dash-tiles{grid-template-columns:1fr}
/* The period select sat absolutely over the tile's own text. With a full-width
tile it has room to sit beside it instead of on top of it. */
.dtile select{max-width:40%}
/* Long words in translated headings and labels break rather than push the
card wider than the screen — German and Russian compounds are the common
case ("Zahlungsbedingungen", "Возврат средств"). */
.welcome-card h1,.dash-links a,.dtile span,.dtile i.sub,
.card h1,.card h2,.card h3,.empty{overflow-wrap:anywhere}
/* Buttons WRAP instead of overflowing their container. A translated label is
usually 15-30% longer than the English it replaced, and a nowrap button in
a fixed row is exactly where that lands. */
.btn{white-space:normal;overflow-wrap:anywhere;text-align:center}
/* Flex rows: every child may shrink below its content width and reflow onto
the next line. Without `min-width:0` a flex item refuses to shrink past its
longest word, which is how one long SKU or product name drags a whole row
past the viewport. */
.vrow>*{min-width:0}
.vrow .vsku{min-width:0;flex:0 1 auto}
.vrow .btn{flex:1 1 auto}
/* Action rows stack rather than overlapping. */
.modal-actions,.ord-actions,.card .pad>.row-actions{flex-wrap:wrap}
}
/* Status is a label — never "Pendin / g". Table actions stay on one line so
"Order for" / "Invoice" cannot stack one letter per row. */
.pill,.stockpill{white-space:nowrap;overflow-wrap:normal;word-break:normal}
.cust-cards{display:none}
.cust-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:760px){
.cust-table-wrap{display:none}
.cust-cards{display:flex;flex-direction:column;gap:10px}
.cust-card{
display:flex;flex-direction:column;gap:6px;padding:14px;
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
cursor:pointer;
}
.cust-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cust-card-who{min-width:0}
.cust-card-who b{display:block;font-size:14.5px;line-height:1.3}
.cust-card-contact{font-size:13px;min-width:0}
.cust-card-contact .sub{display:block;overflow-wrap:anywhere}
.cust-card-meta{
display:flex;justify-content:space-between;align-items:baseline;gap:8px;
font-size:12.5px;color:var(--muted);
}
.cust-card-bal{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.cust-card-act{display:flex;justify-content:flex-end;margin-top:4px}
.cust-card-act .btn{white-space:nowrap;min-height:40px;overflow-wrap:normal}
}
@media (max-width:900px){
table.list{width:max-content;min-width:100%}
table.list th,table.list td{white-space:nowrap}
table.list .btn,table.list .pill,.ord-inv-cell .btn,.ord-table .pill{
white-space:nowrap;overflow-wrap:normal;word-break:normal;
}
.vrow.reorder-row{flex-wrap:wrap;align-items:flex-start;gap:8px 10px}
.vrow.reorder-row > .reorder-hit{
flex:1 1 100%;width:100%;min-width:0;
display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto;
column-gap:10px;row-gap:2px;align-items:start;
}
.vrow.reorder-row > .reorder-hit img,
.vrow.reorder-row > .reorder-hit .noimg{grid-column:1;grid-row:1 / span 2}
.vrow.reorder-row > .reorder-hit .vsku{grid-column:2;grid-row:1;flex:none;min-width:0}
.vrow.reorder-row > .reorder-hit .vcol{grid-column:2;grid-row:2;flex:none;min-width:0}
.vrow.reorder-row > .stockpill,
.vrow.reorder-row > .qtybox,
.vrow.reorder-row > .btn{flex:0 0 auto}
}
/* Any width: content may not be wider than the screen. Belt and braces behind
the rules above, so a surface nobody thought to list here still cannot push
the layout sideways. */
.card,.dtile,.vrow,.welcome-card,.empty,pre,img,video,iframe{max-width:100%}
/* A table that genuinely cannot narrow scrolls INSIDE ITS OWN BOX rather than
moving the page. A horizontally scrollable table is a normal, usable thing on
a phone; a page that slides under a fixed header is not. */
@media (max-width:640px){
.card .cust-table-wrap,.card .ord-card, .ord-card > div{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* ---------------------------------------------------------------------------
RIGHT-TO-LEFT (Arabic)
`I18N.apply()` sets dir="rtl" on and toggles `.rtl`, and until now
there was NO CSS behind either — so the flow direction flipped while every
hard-coded `left:` / `right:` / `padding-left` in this file stayed where it
was. The result is the mirrored-layout defect: a drawer that opens from the
wrong edge, a centred logo pushed off-centre, badges detached from the icons
they belong to.
Only PHYSICALLY-POSITIONED things need fixing; anything laid out by flex,
grid or normal flow already mirrors itself. Flags, images and the wordmark are
deliberately NOT mirrored — RTL reverses reading order, not artwork.
--------------------------------------------------------------------------- */
.rtl .drawer{left:auto;right:0}
.rtl .drawer a.active{box-shadow:inset -3px 0 0 var(--ink-2)}
.rtl .topbar .logo-link{left:auto;right:50%;transform:translateX(50%)}
.rtl .dtile select{right:auto;left:8px}
.rtl .bottomnav .badge{right:auto;left:8px}
.rtl .nav-more-menu{right:auto;left:0}
.rtl .nav-more-menu a.active{box-shadow:inset -3px 0 0 var(--ink-2)}
.rtl .cart-total-row .badge{right:auto;left:-7px}
.rtl .hm-wa,.rtl .hm-wa.shell-wa{right:auto;left:16px}
.rtl .legal-inner ul{padding-left:0;padding-right:1.2rem}
.rtl .modal-actions{justify-content:flex-start}
/* Numbers, SKUs, money and dates stay LTR inside Arabic text — an invoice
number is a fact, not a sentence, and reversing it changes what it says. */
.rtl .vsku,.rtl .vprice,.rtl .mono,.rtl .amt,.rtl .dtile b,
.rtl .pdetail-under-dims,.rtl .pdetail-fit,.rtl .frame-size{direction:ltr;unicode-bidi:isolate}
.rtl .pcard2 .attrline{direction:ltr;unicode-bidi:isolate}
/* ===========================================================================
B18 — DASHBOARD AND ORDERS ON A NARROW PHONE (~375px)
Measured on a 375x667 viewport (iPhone SE) against the real pages. The
`max-width:430px` block further up already stopped the page itself from
sliding sideways, and it still holds: neither page scrolls horizontally
before or after this. What was left were four defects INSIDE that fitted
page, all of them content that had nowhere to go.
1. Reorder rows printed the SKU ON TOP OF the product name. `.reorder-hit`
is a nowrap flex row, and the 560px rule gives `.vcol` `flex:1 1 100%` —
a 100% BASIS in a nowrap container cannot wrap, so it just squeezed its
sibling: the SKU box shrank to 64px while "4004683612605" still measured
93px, and the surplus digits printed over the colourway
("40046836104|41se Gold"). Letting the row wrap is the whole fix.
2. Status pills broke MID-WORD — "Pro/cess/ing", "Shi/ppe/d", "Can/cell/ed".
The 430px block gives `.pill{overflow-wrap:anywhere}` so translated
labels can break; inside a table column competing with eight others that
permission let the column collapse to one character wide.
3. Order rows were 315px TALL. Every cell wrapped — "VEY-/2026-/004182" over
three lines — so barely two orders fitted on a screen. The table is a
horizontal scroller here by design (see the 640px rule above), so cells
keep their one line and the row keeps its height; the order number and
the caret are pinned to the left edge so you can always see WHICH order
you are reading while the rest scrolls under them.
4. The EXPANDED order detail was the worst of them. It is ordinary flex and
grid content that fits 325px comfortably, but it lives in a `colspan` cell
of a ~580px table, so it inherited that width: the quantity and the line
price sat at x=474 and x=502 — entirely off-screen — and the delivery
address lost its country. It is measured against the VIEWPORT instead,
and the line reflows to two rows so identity, quantity and price all land
on screen.
Nothing here truncates anything a customer needs to read: long product names
and long colourways wrap, they are not ellipsised away.
=========================================================================== */
@media (max-width:400px){
/* ---------- Dashboard: "Time to reorder" ---------- */
/* Defect 1 lives in the 900px reorder-hit grid above — stacking SKU over
the name was not only a 400px-wide problem. */
/* Reorder is the action on the row and was 28px tall. */
.reorder-row .btn.sm{min-height:40px}
/* The tile's period picker was 23px tall — a real control, not a caption. */
.dtile select{min-height:34px;padding:3px 6px}
/* "Browse all →" was an 18px-tall tap target. Selected via the one id that
only the dashboard renders, so no other card's links are touched. */
.card:has(#dReorder) a.sub{display:inline-flex;align-items:center;min-height:40px}
/* ---------- Orders: the history table ---------- */
/* Defect 3. One line per cell, tighter gutters, and a row that is ~46px
instead of 315px. */
.ord-table th,.ord-table td{padding:9px 5px;white-space:nowrap}
/* Defect 2. A status is a LABEL — it wraps as a word or not at all. */
.ord-card .pill{white-space:nowrap;overflow-wrap:normal}
.ord-card .btn.sm{white-space:nowrap;min-height:40px}
/* Tracking is the one genuinely long cell (a carrier name plus a consignment
number). It is allowed to wrap inside a cap rather than adding 250px of
scroll that every other row has to travel past. `min-width` is load-bearing
and was learned the hard way: `overflow-wrap:anywhere` also lowers the
cell's MIN-CONTENT width to a single character, so auto table layout — with
eight other columns asking for room — squeezed this one to 68px and wrapped
a courier reference over five lines, making every row 113px tall. The floor
is what keeps it at two. */
.ord-table td.sub{
white-space:normal;overflow-wrap:anywhere;min-width:8rem;max-width:9rem;
font-size:11.5px;line-height:1.35}
/* "40%" over the word "paid" over the bar is three stacked lines, and it set
the height of every row in the table. The column heading already says Paid,
so the repeated word goes and the number keeps its bar. */
.ord-paid-cell .sub{display:none}
/* The expand caret was a 22x22 target. */
.ord-table .ord-x{width:38px;padding-left:2px;padding-right:2px}
.ord-toggle{min-width:34px;min-height:40px;justify-content:center}
/* The caret and the order number stay put while the rest of the row scrolls,
so a horizontal scroll never leaves you looking at a status with no idea
which order it belongs to. Columns 1 and 2 are the only ones safe to
address by position: the optional Customer and Total columns both appear
AFTER them, so their indices never move. The cells need their own opaque
background — a sticky transparent cell lets the scrolled row show through.
Scoped to `.ord-row >` so the expanded `.ord-detail` cell, which is also
its row's first child, is left alone. */
.ord-table thead th:nth-child(1),.ord-table thead th:nth-child(2),
.ord-row > td:nth-child(1),.ord-row > td:nth-child(2){
position:sticky;z-index:2;background:var(--card)}
.ord-table thead th:nth-child(1),.ord-row > td:nth-child(1){left:0}
.ord-table thead th:nth-child(2),.ord-row > td:nth-child(2){
left:38px;box-shadow:1px 0 0 var(--line)}
/* The row's own hover tint has to reach the pinned cells too, or they read as
a separate un-hovered strip. */
.ord-table tr.click:hover > td:nth-child(1),
.ord-table tr.click:hover > td:nth-child(2){background:var(--soft-blue)}
/* ---------- Orders: the expanded detail ---------- */
/* Defect 4. The cell keeps the table's width — it has to, it is a table cell
— but its CONTENTS are measured against the screen: 375px less the page's
10px gutters, the card's 1px borders and this cell's 14px padding. So the
lines, the invoice button and both addresses all sit inside the 325px that
is actually visible at scrollLeft:0. */
.ord-detail > td{padding:12px 14px;white-space:normal}
.ord-detail > td > *{max-width:calc(100vw - 52px)}
/* An order line becomes two rows beside its thumbnail: identity across the
top, quantity and price beneath it. In one row the price was pushed to
x=502 and never seen. */
.ord-hit{grid-template-columns:44px minmax(0,1fr) auto;column-gap:10px;row-gap:3px;padding:10px 2px}
.ord-hit > .ord-thumb{grid-column:1;grid-row:1 / span 2}
.ord-hit > .ord-meta{grid-column:2 / -1;grid-row:1}
.ord-hit > .ord-qty{grid-column:2;grid-row:2}
.ord-hit > .ord-price{grid-column:3;grid-row:2;min-width:0}
.ord-hit .ord-thumb,.ord-hit .ord-thumb img,.ord-hit .ord-thumb .noimg{width:44px;height:34px}
/* A colourway is customer-meaningful, so it wraps onto a second line rather
than being ellipsised at the edge of a box it never fitted. */
.ord-name{white-space:normal;overflow-wrap:anywhere}
.ord-detail-foot{flex-wrap:wrap}
/* A phone number on a phone is a call button. */
.ord-addr-phone{display:inline-flex;align-items:center;min-height:40px}
/* TODO(B18) — needs markup change in pages_orders.js, owned by Cowork.
The history table renders nine or ten columns and cannot fit 375px however
it is styled; the sticky identity columns above make the horizontal scroll
usable, they do not remove it. The real fix is to mark Tracking, Paid and
Items with the existing `.hide-m` class (see the 760px block above), which
drops them on a phone and leaves order / date / total / status / invoice
fitting the screen outright. That is a one-line-per-`
`-and-`
` edit
in the `Routes['#/orders']` template, so it is not made here. */
}
/* ===========================================================================
B9, B3-B8 — THE TWO CUSTOMER B2B FORMS
`#/request-account` (B9) and the CUSTOMER half of `#/set-password` (B3-B8)
are the two longest forms a customer ever meets: seventeen and fourteen
controls against the two that `.auth-card` and `.login-field` were designed
for. Measured in a real browser at 375x667 and 1280x900, in English and in
Arabic, against the shipped `pages_request_account.js` / `pages_auth.js`.
What was actually wrong — every item below was measured, not guessed:
1. NONE of the `.ra-*` classes had a single rule in this file. The markup
names ten of them; the browser was given none, so every wrapper was an
ordinary block and the page fell back to whatever `.login-field` did.
2. So `.ra-phone` STACKED. The dial-code select and the number field are
siblings in one `.login-field`, and two blocks in a block container go one
above the other: the select rendered 88px wide on its own line with the
number field beneath it, sharing one underline. It read as a broken field,
not as one phone number. Same at 375px and at 1280px.
3. And `.ra-row` was never a row. All three of them rendered one column per
line at EVERY width — measured `1+1+1`, `1+1`, `1+1` at 1280px — so
city/region/postcode, website/tax and name/role each cost three or two
full-width rows on a card capped at 400px. The form was 1405px tall on a
desktop with 880px of empty space either side of it.
4. `.login-field` styles `input` and nothing else, so every `select` and the
message `textarea` on the request-account page kept its OS-default box:
a 25px-tall bordered control sitting on top of a 1px underline meant for a
borderless field. Two visual languages in one form, and a 25px control is
below any usable tap target.
5. Labels had ~7px of air above them. The gap between one field's underline
and the next field's label measured 22.3px in total, and the label itself
is 13px of that — so the label belonged to the field ABOVE it as much as
to the one below. On a seventeen-control form that is what "cramped"
actually is.
6. `a.login-btn` is a 52px-tall anchor with no vertical centring, so on the
two screens that use the anchor form of the button — the individual's
"talk to sales" notice and the success panel — the label sat against the
top edge of the button.
7. The account icon in the guest header was ENTIRELY OFF SCREEN at 375px, on
`#/request-account` and on `#/login` alike, in both directions:
`.hm-head-right` measured 397px inside a 339px content box and does not
wrap, so `a.hm-account` landed at 391..429 in English and at -40..-2 in
Arabic. `overflow-x:clip` at the top of this file hid the overflow instead
of fixing it — the same amputation the 1E section was written for.
8. In Arabic the `https://` placeholder rendered as `//:https`. A phone
number, an email address and a URL are LTR data; bidi reordered the
punctuation-only ones. The digits of a dial code are a fact, not a
sentence — the same reasoning as the `.vsku` / `.amt` rule above.
Nothing here truncates anything: long translated labels wrap.
=========================================================================== */
/* ---------- Request an account (B9) ---------- */
/* The 400px cap on `.auth-card` is right for a login box and wrong for a
seventeen-control questionnaire — it is what forced every `.ra-row` to one
column. `.login-page-wide` (720px panel) is the replacement; `.ra-card` is
kept only so older markup cannot collapse the row again. */
.ra-card{max-width:720px}
/* Two columns where there is room for two, three where the markup offers three
(city / region / postcode), and one when there is not — `flex-basis` decides
that from the space available instead of from a breakpoint guess. `min-width:0`
is load-bearing: without it a flex item refuses to shrink below its longest
option ("US — United States"), which is how a select drags a row wider than
its card. Flex mirrors itself in RTL, so there is no twin rule below. */
.ra-row{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:20px}
.ra-col{flex:1 1 200px;min-width:0}
.ra-col .login-label{margin-top:0}
/* One phone number is ONE field: dial code at its natural width, the number
taking everything that is left, both on the same baseline and inside the one
underline they share.
The dial selector carries two classes deliberately: `.login-field select`
below is (0,1,1), so a bare `.ra-dial` would LOSE to its `width:100%` and the
dial code would eat the whole row. */
.ra-phone{display:flex;align-items:center;gap:10px}
.ra-phone .ra-dial,.ra-phone .ra-choice-q{flex:0 0 auto;width:7.2rem;max-width:45%}
.ra-phone input{flex:1 1 auto;min-width:0}
.ra-phone input.ra-choice-q{flex:0 0 auto;min-width:5.5rem}
/* `.login-field` dresses `input` only, so a select and a textarea arrived as
OS-default boxes on top of the underline. They join the field they live in:
borderless, transparent, full width, the same 16px as an input — which is
also what stops iOS zooming the page when one is focused. `padding-inline-end`
leaves the native select arrow its room in BOTH directions, which is why it
is the logical property and not `padding-right`. */
.login-field select,.login-field textarea{
width:100%;border:none;background:transparent;font-size:16px;color:#1c1917;
outline:none;padding:4px 0 5px;padding-inline-end:20px}
.login-field select{
cursor:pointer;
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231c1917' stroke-opacity='.45' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1.5 1.8L6 6.2 10.5 1.8'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 0 center}
.rtl .login-field select{background-position:left 0 center}
.login-field textarea{resize:vertical;min-height:80px;line-height:1.5;padding-inline-end:0}
.login-field select:disabled{color:rgba(28,25,23,.45)}
/* Custom choice lists — same white panel as address suggest, not the OS menu. */
.ra-choice-native{
position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;
pointer-events:none;margin:0;padding:0;border:0}
.ra-choice-btn{
display:block;width:100%;border:0;background:transparent;
font:inherit;font-size:16px;color:#1c1917;text-align:start;
padding:4px 22px 5px 0;min-height:30px;cursor:pointer;line-height:1.35;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231c1917' stroke-opacity='.45' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1.5 1.8L6 6.2 10.5 1.8'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 0 center}
.rtl .ra-choice-btn{background-position:left 0 center;padding:4px 0 5px 22px}
.ra-choice-q{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231c1917' stroke-opacity='.45' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1.5 1.8L6 6.2 10.5 1.8'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 0 center}
.rtl .ra-choice-q{background-position:left 0 center}
.ra-choice-list{
position:absolute;z-index:80;left:0;right:0;top:calc(100% + 4px);
margin:0;padding:6px 0;list-style:none;
background:#fff;border:1px solid var(--line);border-radius:6px;
box-shadow:0 10px 28px rgba(19,30,66,.12);
max-height:240px;overflow:auto}
.ra-phone .ra-choice-list{right:auto;min-width:220px;width:max-content;max-width:min(320px,80vw)}
.rtl .ra-phone .ra-choice-list{left:auto;right:0}
.ra-choice-list li{padding:10px 16px;font-size:13px;cursor:pointer;line-height:1.35;color:var(--ink)}
.ra-choice-list li:hover,.ra-choice-list li.active{background:#f8fafc}
.ra-choice-head{
font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:rgba(28,25,23,.45);cursor:default;padding:8px 16px 4px}
.ra-choice-empty{color:var(--muted);cursor:default}
/* Lined notes field so the empty box reads as a writing area, not a gap. */
.login-field.ra-notes{
border:1px solid rgba(28,25,23,.12);border-radius:8px;
margin-top:8px;padding:10px 12px 8px;
background-color:rgba(28,25,23,.03);
background-image:repeating-linear-gradient(
to bottom,
transparent 0,
transparent calc(1.55em - 1px),
rgba(28,25,23,.12) calc(1.55em - 1px),
rgba(28,25,23,.12) 1.55em);
background-origin:content-box;background-clip:content-box}
.login-field.ra-notes:focus-within{border-color:#1c1917;border-bottom-color:#1c1917}
.login-field.ra-notes textarea{
min-height:calc(1.55em * 4);line-height:1.55;resize:vertical;padding:0}
/* A label now sits with the field it names rather than midway between two. */
.ra-form .login-label{display:block;margin-top:20px}
.ra-form > .login-label:first-child{margin-top:0}
/* "(optional)" is an aside inside a tracked, uppercased label — it should not
be shouted in the same voice as the label itself. */
.ra-opt{font-weight:500;letter-spacing:.04em;text-transform:none;opacity:.62}
/* A note explains the field BELOW it, so it keeps its distance from the field
above and stays close to the one it belongs to. */
.ra-note{font-size:12.5px;line-height:1.5;color:rgba(28,25,23,.6);margin:20px 0 0}
.ra-note + .login-label{margin-top:8px}
/* The store-or-individual question: the question owns its line, the two answers
sit side by side under it as real 36px targets instead of 19px ones. */
.ra-who{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin:0 0 24px}
.ra-who .login-label{flex:0 0 100%}
.ra-radio{display:inline-flex;align-items:center;gap:9px;min-height:36px;
font-size:14.5px;color:#1c1917;cursor:pointer}
.ra-radio input{width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:#55406c}
/* Consent is a confirmation, not another uppercase field label: sentence copy
beside a real 18px checkbox, in a quiet well so it reads as agreement. */
.ra-consent{
display:flex;align-items:flex-start;gap:12px;
margin:28px 0 4px;padding:14px 16px;
background:rgba(28,25,23,.04);border-radius:8px;
font-size:14.5px;font-weight:400;letter-spacing:0;text-transform:none;
line-height:1.5;color:#1c1917;cursor:pointer}
.ra-consent input{width:18px;height:18px;margin:2px 0 0;flex:0 0 auto;accent-color:#1c1917}
.ra-consent span{min-width:0}
/* Missing / invalid fields: red label, red underline, and a line of copy
under the control — not a generic banner at the top of the card.
`:focus-within` otherwise paints the same edge black and hides the error
the customer is trying to fix. */
.ra-form .login-label:has(+ .login-field.is-invalid),
.ra-form .ra-col:has(.login-field.is-invalid) .login-label{color:var(--bad)}
.ra-form .login-field.is-invalid,
.ra-form .login-field.is-invalid:focus-within{border-bottom-color:var(--bad)}
.ra-form .ra-consent.is-invalid{outline:2px solid var(--bad);background:#fef2f2;color:var(--bad)}
.ra-field-err{margin:6px 0 0;font-size:12.5px;line-height:1.4;color:var(--bad)}
.ra-field-err[hidden]{display:none}
/* Optional store pin. OSM tiles for dropping a marker; Google Maps is the
outbound link once a pin exists. */
.ra-pin-note{margin-top:8px}
.ra-pinmap{margin-top:10px;border:1px solid rgba(28,25,23,.12);border-radius:10px;overflow:hidden;background:#e6e1d8}
.ra-pinmap-canvas{position:relative;height:280px;cursor:grab;overflow:hidden;touch-action:none}
.ra-pinmap-canvas.is-panning{cursor:grabbing}
.ra-pinmap-canvas.is-pinning{cursor:grabbing}
.ra-pinmap-canvas img{position:absolute;display:block;max-width:none;pointer-events:none;-webkit-user-drag:none}
.ra-pinmap-pin{position:absolute;z-index:2;width:44px;height:44px;margin:-44px 0 0 -22px;
pointer-events:auto;cursor:grab;background:transparent;border:0;box-shadow:none;transform:none}
.ra-pinmap-pin::after{content:"";position:absolute;left:50%;bottom:2px;width:22px;height:22px;margin-left:-11px;
background:#c62828;border:2px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
box-shadow:0 2px 6px rgba(0,0,0,.28);pointer-events:none}
.ra-pinmap-pin[hidden]{display:none}
.ra-pinmap-zoom{position:absolute;z-index:3;top:10px;inset-inline-end:10px;display:flex;flex-direction:column;gap:4px}
.ra-pinmap-zoom button{width:32px;height:32px;border:0;border-radius:6px;background:#fff;color:#1c1917;
font-size:18px;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.ra-pinmap-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 12px;background:#fff;
font-size:12.5px;min-height:36px}
.ra-pinmap-open{color:#55406c;font-weight:500;text-decoration:underline;text-underline-offset:2px}
.ra-pinmap-open[hidden],.ra-pinmap-clear[hidden]{display:none}
.ra-pinmap-clear{margin:0;padding:0;border:0;background:none;color:rgba(28,25,23,.65);cursor:pointer;font:inherit}
.ra-pinmap-attr{margin-inline-start:auto;color:rgba(28,25,23,.45);font-size:11px}
/* The submitted state. */
.ra-success{text-align:center}
.ra-success h2{font-size:24px;font-weight:600;letter-spacing:-.4px;color:#1c1917;margin:0 0 8px}
.ra-success .login-sub{margin-bottom:0}
/* Defect 6. `.login-btn` is a button on the form and an anchor on the notice and
the success panel, and an anchor does not centre its own text vertically. */
a.login-btn{display:flex;align-items:center;justify-content:center;text-decoration:none}
/* ---------- The auth cards: activation, login, forgot (B1, B3-B8) ---------- */
/* Staff activation and customer activation render the SAME `.auth-card`, so the
customer questionnaire has no class of its own to widen — `:has()` on a field
only that form contains is the honest hook, and it is the same technique the
dashboard rule above uses for `#dReorder`. 480px is one comfortable column;
it is deliberately NOT two, because this form is a sequence of sections
rather than a grid. See the TODO at the end of this block. */
.auth-card:has([name=repEmail]){max-width:480px}
/* Fourteen fields at 13px apart read as one undifferentiated stack. Scoped to
the auth cards so the portal's own dense forms keep their rhythm. */
.auth-card .field{margin-bottom:15px}
/* A question with a checkbox is a 34px target, and its text may wrap. */
.auth-check{align-items:flex-start;min-height:34px;line-height:1.45}
.auth-check input[type=checkbox]{width:18px;height:18px;margin-top:1px;flex:0 0 auto;
accent-color:#55406c}
/* "Back to sign in" was an 18px-tall link. */
.auth-links a{display:inline-flex;align-items:center;gap:6px;min-height:34px}
/* An email address, a URL and a phone number are LTR data wherever they appear.
Unconditional — it is a property of the CONTENT, not of the page direction —
and the RTL block below only decides which edge the value sits against. */
.ra-phone input,.ra-phone .ra-dial,.ra-phone .ra-choice-q,
.login-field input[type=email],.login-field input[inputmode=url],
.field input[type=email],.field input[type=tel],.field select[name$=Dial]{direction:ltr}
/* ---------- narrower than a two-column form ---------- */
@media (max-width:480px){
/* One column, deterministically: below this width a second column cannot hold
a translated label and a control at once. */
.ra-row>.ra-col{flex:1 1 100%}
/* Stacked columns need the vertical gap the single row never did. */
.ra-row{gap:0}
.ra-col + .ra-col .login-label{margin-top:20px}
}
/* ---------- narrow phones (375px measured) ---------- */
@media (max-width:430px){
/* 20px of side padding instead of 30px. On a 375px screen that takes the
card's usable width from 275px to 295px — 20px handed back to every field
on the longest form in the product. */
.auth-card,.ra-card{padding:28px 20px}
/* Every control on the underlined-field pages was 30px tall, and a select was
25px. Touch targets, without changing the design above this width. */
.login-field input,.login-field select,.login-field textarea,.ra-choice-btn,.ra-choice-q{min-height:36px}
.login-field textarea{min-height:80px}
.login-field.ra-notes textarea{min-height:calc(1.55em * 4)}
/* The show-password toggle was a 22x23 target. It stays pinned to the field's
end edge, where the input's own 30px of end padding already keeps the text
clear of it. */
.login-eye{width:34px;height:34px;top:1px;padding:0;
display:flex;align-items:center;justify-content:center}
/* "Forgot password?" was 17px tall. */
.login-forgot{display:inline-flex;align-items:center;min-height:34px}
.auth-links a{min-height:40px}
/* The sign-in page's footer links — privacy, terms, accessibility, sales —
were 16px tall, which is the smallest target on the page. */
.login-foot nav a{display:inline-flex;align-items:center;min-height:34px}
/* Defect 7. The guest header's right-hand group is 397px of pills and an
account icon inside a 339px content box, and it does not wrap — so the
account icon left the screen entirely, in both directions. Letting the
group wrap keeps every control reachable and costs one row of header
height on a phone; nothing above 430px is touched. */
.guest-head .hm-head{flex-wrap:wrap;row-gap:10px}
.guest-head .hm-head-right{flex-wrap:wrap;justify-content:flex-end;gap:10px;min-width:0}
/* The WhatsApp float is fixed to this corner and these two pages both end in
a full-width primary button. */
.login-page-wide .login-panel{padding-bottom:96px}
}
/* ---------- Arabic ---------- */
/* Tracking and uppercasing are Latin display devices. Arabic is cursive: letter
spacing pulls apart glyphs that are meant to join, and `text-transform` does
nothing but is reset with it so these labels are governed by one rule. The
label also gains a little size, because 11px is small for a script with
diacritics. */
.rtl .login-label,.rtl .login-eyebrow,.rtl .login-btn,.rtl .login-tagline{
letter-spacing:normal;text-transform:none}
.rtl .login-label{font-size:12.5px;font-weight:650}
/* The LTR values above keep their digits in order; this puts them against the
same edge every other field's text starts from, so the column of fields still
reads as a column. */
.rtl .ra-phone input,.rtl .ra-phone .ra-dial,.rtl .ra-phone .ra-choice-q,
.rtl .login-field input[type=email],.rtl .login-field input[inputmode=url],
.rtl .field input[type=email],.rtl .field input[type=tel],
.rtl .field select[name$=Dial]{text-align:right}
/* TODO(Cowork) — needs hooks in pages_auth.js, owned by Cowork. Two things in
the customer activation form cannot be reached from CSS:
1. Its three sections (choose a password / the business / the store contact)
are announced by `
` intros carrying INLINE
`style="margin:20px 0 10px"`, which no stylesheet can override, and the
fields that follow each intro have no common parent. So the form cannot be
given the section rules and grouping a fourteen-field questionnaire wants,
and it stays one long stack. A `