/* Homes & Co components — shared by shop and back office. Values come from tokens.css. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:var(--lh-body);font-size:var(--fs-md);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-weight:800;line-height:var(--lh-tight);letter-spacing:var(--tr-tight);text-wrap:balance}
h1{font-size:var(--fs-4xl)}h2{font-size:var(--fs-3xl)}h3{font-size:var(--fs-xl)}h4{font-size:var(--fs-lg)}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
::selection{background:var(--accent-soft)}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--surface);padding:var(--s-3) var(--s-4)}.skip:focus{left:var(--s-2);top:var(--s-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* layout helpers */
.container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.row{display:flex;align-items:center;gap:var(--s-3)}.col{display:flex;flex-direction:column;gap:var(--s-3)}
.wrap{flex-wrap:wrap}.sp{justify-content:space-between}.end{justify-content:flex-end}.top{align-items:flex-start}.grow{flex:1;min-width:0}.center{text-align:center}.self-start{align-self:flex-start}
.gap-1{gap:var(--s-1)}.gap-2{gap:var(--s-2)}.gap-4{gap:var(--s-4)}.gap-6{gap:var(--s-6)}
.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}.mt-8{margin-top:var(--s-8)}.mt-12{margin-top:var(--s-12)}.mb-3{margin-bottom:var(--s-3)}.mb-4{margin-bottom:var(--s-4)}
/* text */
.muted{color:var(--ink-2)}.faint{color:var(--ink-3)}.small{font-size:var(--fs-sm)}.xs{font-size:var(--fs-xs)}.b{font-weight:700}.xb{font-weight:800}
.num,.price,.tbl td,.qty input{font-variant-numeric:tabular-nums}
.eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--accent)}
.price{font-weight:800;letter-spacing:-.01em}
.was{text-decoration:line-through;color:var(--ink-3);font-weight:500}
.urgent{color:var(--urgent)}.ok-t{color:var(--ok)}.acc-t{color:var(--accent)}
.clamp1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.link{text-decoration:underline;text-underline-offset:2px;font-weight:700}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;padding:0 var(--s-5);border-radius:var(--r-md);font-weight:700;font-size:var(--fs-md);transition:background var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast),color var(--t-fast);white-space:nowrap;text-align:center;position:relative}
.btn:active{transform:scale(.97)}.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none}
.btn-p{background:var(--ink);color:var(--surface)}.btn-p:hover{background:#3a332d;color:var(--surface)}
.btn-a{background:var(--accent);color:var(--surface)}.btn-a:hover{background:var(--accent-hover);color:var(--surface)}
.btn-u{background:var(--urgent);color:var(--surface)}.btn-u:hover{background:#9E1F18;color:var(--surface)}
.btn-o{box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--surface)}.btn-o:hover{background:var(--ink);color:var(--surface)}
.btn-g{color:var(--ink-2)}.btn-g:hover{background:var(--bg-2);color:var(--ink)}
.btn-sm{min-height:var(--tap);padding:0 var(--s-4);font-size:var(--fs-sm)}.btn-lg{min-height:54px;font-size:var(--fs-lg);padding:0 var(--s-6)}.btn-block{width:100%}
.btn.loading{color:transparent!important;pointer-events:none}.btn.loading::after{content:'';position:absolute;width:18px;height:18px;border-radius:var(--r-pill);border:2.5px solid rgba(255,255,255,.5);border-top-color:var(--surface);animation:spin .7s linear infinite}
.btn-o.loading::after,.btn-g.loading::after{border-color:var(--line-2);border-top-color:var(--ink)}
.ibtn{width:var(--tap);height:var(--tap);display:grid;place-items:center;border-radius:var(--r-pill);flex-shrink:0;position:relative;transition:background var(--t-fast)}.ibtn:hover{background:var(--bg-2)}
.ibtn.on{color:var(--accent)}
.cnt{position:absolute;top:2px;right:0;background:var(--accent);color:var(--surface);font-size:var(--fs-2xs);font-weight:800;min-width:18px;height:18px;border-radius:var(--r-pill);display:grid;place-items:center;padding:0 4px}
/* surfaces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-4)}
.card.pad{padding:var(--s-5)}.card.flat{border:0;background:var(--bg-2)}.card.cool{background:var(--cool);border-color:var(--cool-2)}.card.acc{background:var(--accent-soft);border-color:var(--accent-line)}
.notice{border-radius:var(--r-md);padding:var(--s-3) var(--s-4);font-size:var(--fs-sm);background:var(--bg-2);color:var(--ink-2)}
.notice.warn{background:var(--warn-soft);color:var(--warn)}.notice.ok{background:var(--ok-soft);color:var(--ok)}.notice.acc{background:var(--accent-soft);color:var(--accent)}.notice.err{background:var(--err-soft);color:var(--err)}.notice.cool{background:var(--cool);color:var(--cool-ink)}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-2xs);font-weight:800;padding:3px 8px;border-radius:var(--r-sm);background:var(--bg-2);color:var(--ink-2);white-space:nowrap;line-height:1.4}
.b-ok{background:var(--ok-soft);color:var(--ok)}.b-warn{background:var(--warn-soft);color:var(--warn)}.b-acc{background:var(--accent-soft);color:var(--accent)}.b-err{background:var(--err-soft);color:var(--err)}.b-dark{background:var(--ink);color:var(--surface)}.b-urgent{background:var(--urgent);color:var(--surface)}.b-brand{background:var(--accent);color:var(--surface)}.b-cool{background:var(--cool-2);color:var(--cool-ink)}
/* forms */
.field label,.lbl{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);margin-bottom:6px}
.hint{font-size:var(--fs-xs);color:var(--ink-3);margin-top:4px}
.input{width:100%;min-height:48px;padding:0 var(--s-3);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-md);transition:border var(--t-fast),box-shadow var(--t-fast)}
select.input{padding-right:var(--s-8);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235E5750' stroke-width='1.8'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
textarea.input{padding:var(--s-3);min-height:96px;resize:vertical}
.input:hover{border-color:var(--line-2)}.input:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus)}
.input.bad,.input[aria-invalid=true]{border-color:var(--err)}.input:disabled{background:var(--bg-2);color:var(--ink-3)}
.input.sm{min-height:40px}
.err-t{color:var(--err);font-size:var(--fs-xs);font-weight:600;margin-top:5px}
.frm{display:grid;gap:var(--s-4);grid-template-columns:minmax(0,1fr)}
@media(min-width:560px){.frm.two{grid-template-columns:repeat(2,minmax(0,1fr))}.frm .full{grid-column:1/-1}}
.check{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--tap);cursor:pointer;font-size:var(--fs-sm)}
.check input{width:20px;height:20px;accent-color:var(--accent);flex-shrink:0}
.switch{position:relative;width:46px;height:28px;border-radius:var(--r-pill);background:var(--line-2);transition:background var(--t-fast);flex-shrink:0}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--sh-1);transition:transform var(--t-base) var(--ease)}
.switch[aria-checked=true]{background:var(--accent)}.switch[aria-checked=true]::after{transform:translateX(18px)}
.chips{display:flex;gap:var(--s-2);overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;scroll-snap-type:x proximity}.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;min-height:var(--tap);padding:0 var(--s-4);border-radius:var(--r-pill);font-weight:700;font-size:var(--fs-sm);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;scroll-snap-align:start;transition:background var(--t-fast),box-shadow var(--t-fast)}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--brand)}.chip.on{background:var(--ink);color:var(--surface);box-shadow:none}.chip.sm{min-height:34px;padding:0 var(--s-3);font-size:var(--fs-xs)}
.chip .n{opacity:.6;font-weight:600}
.opt{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-4);border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--surface);cursor:pointer;min-height:56px;width:100%;text-align:left;transition:border var(--t-fast),background var(--t-fast)}
.opt:hover{border-color:var(--line-2)}.opt.on{border-color:var(--brand);background:var(--accent-soft)}.opt:disabled{opacity:.5;cursor:not-allowed}
.radio{width:20px;height:20px;border-radius:var(--r-pill);border:2px solid var(--ink-3);flex-shrink:0;margin-top:1px;display:grid;place-items:center}
.opt.on .radio{border-color:var(--accent)}.opt.on .radio::after{content:'';width:10px;height:10px;border-radius:var(--r-pill);background:var(--accent)}
.sw{width:36px;height:36px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);display:grid;place-items:center}
.swb{padding:3px;border-radius:var(--r-pill);border:2px solid transparent}.swb.on{border-color:var(--ink)}
/* image tiles: product cut-outs on a soft neutral backdrop, centred, never cropped */
.imgtile{aspect-ratio:1;background:var(--tile);border-radius:var(--r-md);overflow:hidden;display:grid;place-items:center;position:relative;color:var(--ink-3)}
.imgtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%;mix-blend-mode:multiply}
.imgtile img{transition:transform var(--t-slow) var(--ease),opacity var(--t-base)}
@media(hover:hover){.imgtile.zoom:hover img{transform:scale(var(--z,1.15))}}
.imgtile.full img{padding:0;mix-blend-mode:normal}
.imgtile.bad{background:#E6E2DC}
.skel{background:linear-gradient(90deg,var(--bg-2) 0%,#ECE6DE 50%,var(--bg-2) 100%);background-size:200% 100%;animation:shimmer 1.2s linear infinite;border-radius:var(--r-md)}
/* tables */
.tscroll{overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);max-height:72vh}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)}
.tbl th{position:sticky;top:0;z-index:1;text-align:left;font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:var(--bg-2);padding:10px 12px;white-space:nowrap;border-bottom:1px solid var(--line)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.on td{background:var(--accent-soft);font-weight:700}.tbl tr.errrow td{background:var(--err-soft)}
.tbl tr[tabindex]{cursor:pointer}.tbl tr[tabindex]:hover td,.tbl tr[tabindex]:focus td{background:var(--bg)}.tbl tr[tabindex]:focus{outline:none}.tbl tr[tabindex]:focus td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
.tbl .r{text-align:right}
/* overlays */
.overlay{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-modal);display:grid;place-items:center;padding:var(--s-3);animation:fade var(--t-base)}
.modal{background:var(--surface);border-radius:var(--r-lg);width:min(620px,100%);max-height:92vh;overflow:auto;padding:var(--s-5);box-shadow:var(--sh-3);animation:pop var(--t-slow) var(--ease)}
.modal.wide{width:min(920px,100%)}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4)}
.drawer-bg{position:fixed;inset:0;background:var(--scrim-soft);z-index:var(--z-drawer);transition:opacity var(--t-slow)}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,100vw);background:var(--bg);z-index:calc(var(--z-drawer) + 1);display:flex;flex-direction:column;transition:transform var(--t-slow) var(--ease);box-shadow:var(--sh-3)}
.toasts{position:fixed;bottom:calc(var(--s-5) + env(safe-area-inset-bottom));left:0;right:0;z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--s-2);align-items:center;pointer-events:none;padding:0 var(--s-3)}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--surface);padding:12px 18px;border-radius:var(--r-pill);box-shadow:var(--sh-2);animation:pop var(--t-slow) var(--ease);font-size:var(--fs-sm);font-weight:600;max-width:min(94vw,480px)}
.bar{height:8px;border-radius:var(--r-pill);background:var(--bg-2);overflow:hidden}.bar>i{display:block;height:100%;background:var(--accent);border-radius:inherit;transition:width var(--t-slow) var(--ease)}
.bar.urgent>i{background:var(--urgent)}.bar.ok>i{background:var(--ok)}
.tabs{display:flex;gap:var(--s-1);overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tab{padding:0 var(--s-4);min-height:48px;font-weight:700;font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap;border-bottom:3px solid transparent;transition:color var(--t-fast),border-color var(--t-fast)}.tab:hover{color:var(--ink)}.tab.on{color:var(--ink);border-color:var(--brand)}
.steps{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:var(--s-2);font-weight:700;font-size:var(--fs-sm);color:var(--ink-3);min-height:var(--tap)}.step.on{color:var(--ink)}
.step i{width:28px;height:28px;border-radius:var(--r-pill);display:grid;place-items:center;font-style:normal;font-size:var(--fs-xs);background:var(--line);color:var(--ink-2)}
.step.on i{background:var(--ink);color:var(--surface)}.step.done i{background:var(--ok);color:var(--surface)}
.step-sep{width:24px;height:2px;background:var(--line);border-radius:2px}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-pill);background:var(--surface)}
.qty button{width:var(--tap);height:var(--tap);display:grid;place-items:center;border-radius:var(--r-pill)}.qty button:hover{background:var(--bg-2)}.qty button:disabled{opacity:.35}
.qty input{width:56px;text-align:center;border:0;background:none;font-weight:700;min-height:var(--tap)}.qty input:focus{outline:none}
.logo{display:inline-flex;align-self:flex-start;width:fit-content;align-items:center;background:var(--brand);color:#fff;font-weight:800;letter-spacing:.06em;border-radius:10px;padding:7px 12px;font-size:15px;line-height:1;white-space:nowrap}
.spinner{width:34px;height:34px;border-radius:var(--r-pill);border:3px solid var(--line);border-top-color:var(--brand);animation:spin .8s linear infinite}
.stars{display:inline-flex;align-items:center;gap:1px;color:var(--brand)}.stars .off{color:var(--line-2)}
.cd{display:inline-flex;gap:3px;font-variant-numeric:tabular-nums;font-weight:800}.cd b{background:var(--ink);color:var(--surface);border-radius:6px;padding:1px 5px;min-width:26px;text-align:center}
.dd{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-2);max-height:60vh;overflow:auto;z-index:300}
.dd a,.dd button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:10px 14px;min-height:46px;font-size:var(--fs-sm);border-top:1px solid var(--line)}
.dd>:first-child{border-top:0}.dd a:hover,.dd button:hover,.dd .act{background:var(--bg)}
.pager{display:flex;align-items:center;gap:var(--s-2);justify-content:flex-end;margin-top:var(--s-3);font-size:var(--fs-sm)}
.pop{animation:bump var(--t-slow) var(--ease)}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(4px)}to{opacity:1;transform:none}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes fly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.3)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media print{body *{visibility:hidden}#printable,#printable *{visibility:visible}#printable{position:absolute;left:0;top:0;width:100%;padding:20px}.overlay{background:#fff!important}}