/* Dalbani storefront v3 — shared design system (approved 2026-09-13..20). Header, footer, tokens, components. */

  [hidden]{display:none !important}

  /* shared storefront chrome, copied from the approved product page (product-page-variations.tpl.html) */
  :root{
    --bg:#FAFAF9; --paper:#FFFFFF; --ink:#0B1220; --ink-2:#374151; --muted:#6B7280; --line:#E5E7EB; --soft:#F3F4F6;
    --brand:#B91C1C; --brand-hot:#DC2626; --ok:#15803D; --ok-bg:#ECFDF3; --warn:#B45309; --warn-bg:#FEF3C7;
    --tint:rgba(185,28,28,.07); --ring:rgba(185,28,28,.16); --glow:rgba(185,28,28,.4);
    --field:#FFFFFF; --field-line:#D5D8DE; --shadow:0 24px 50px -30px rgba(11,18,32,.35); --plate:#FFFFFF;
    --strip:#0B1220; --strip-ink:#E6E3DC;
    --display:'Bebas Neue', Impact, 'Arial Narrow', sans-serif; --serif:'Instrument Serif', Georgia, serif;
    --sans:Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; --mono:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
    --bg:#0C0D10; --paper:#15171B; --ink:#F2EFE9; --ink-2:#C9C5BC; --muted:#8E8C86; --line:#26292F; --soft:#1C1F24;
    --brand:#D42A21; --brand-hot:#F04A3E; --ok:#4ADE80; --ok-bg:rgba(74,222,128,.1); --warn:#FBBF24; --warn-bg:rgba(251,191,36,.1);
    --tint:rgba(240,74,62,.1); --ring:rgba(240,74,62,.2); --glow:rgba(240,74,62,.55);
    --field:#101216; --field-line:#2A2E35; --shadow:0 30px 60px -30px rgba(0,0,0,.9); --plate:#FFFFFF;
    --strip:#070809; --strip-ink:#D9D5CC;
  }}
  :root[data-theme="dark"]{
    --bg:#0C0D10; --paper:#15171B; --ink:#F2EFE9; --ink-2:#C9C5BC; --muted:#8E8C86; --line:#26292F; --soft:#1C1F24;
    --brand:#D42A21; --brand-hot:#F04A3E; --ok:#4ADE80; --ok-bg:rgba(74,222,128,.1); --warn:#FBBF24; --warn-bg:rgba(251,191,36,.1);
    --tint:rgba(240,74,62,.1); --ring:rgba(240,74,62,.2); --glow:rgba(240,74,62,.55);
    --field:#101216; --field-line:#2A2E35; --shadow:0 30px 60px -30px rgba(0,0,0,.9); --plate:#FFFFFF;
    --strip:#070809; --strip-ink:#D9D5CC;
  }
  *{box-sizing:border-box}
  body{margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 var(--sans); transition:background .35s ease, color .35s ease}
  a{color:inherit; text-decoration:none}
  button{font:inherit; color:inherit}
  button:focus-visible, a:focus-visible, input:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
  .wrap{max-width:1180px; margin:0 auto; padding-inline:24px}

  /* storefront chrome (same as the homepage v5) */
  .strip{background:var(--strip); color:var(--strip-ink); font-size:12px}
  .strip ul{list-style:none; margin:0; padding:8px 0; display:flex; justify-content:center; flex-wrap:wrap; gap:6px 22px}
  .strip li{display:flex; align-items:center; gap:8px; white-space:nowrap} .strip li::before{content:""; width:5px; height:5px; border-radius:50%; background:#F04A3E}
  .strip b{color:#fff; font-weight:600}
  header{background:var(--paper); border-bottom:1px solid var(--line)}
  .hdr{display:grid; grid-template-columns:auto minmax(0,720px) auto; justify-content:space-between; align-items:center; gap:24px; min-height:88px}
  .logo{font-family:var(--display); font-size:28px; letter-spacing:.01em; white-space:nowrap} .logo i{font-style:normal; color:var(--brand)}
  .gs{position:relative; display:flex; align-items:center; gap:14px; height:62px; padding:5px 14px 5px 5px; background:var(--field); border:1px solid var(--field-line); border-radius:19px; color:var(--muted); font-size:16px; min-width:0}
  .gs .key{flex:none; width:52px; height:52px; border-radius:14px; background:var(--brand); display:grid; place-items:center; color:#fff}
  .gs svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round}
  .gs span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .gs .streak{position:absolute; left:18px; right:18px; bottom:-1px; height:2px; overflow:hidden}
  .gs .streak::before{content:""; position:absolute; top:0; left:-32%; width:32%; height:100%; background:linear-gradient(90deg, transparent, var(--brand-hot) 45%, #FFD2CC 50%, var(--brand-hot) 55%, transparent)}
  @media (prefers-reduced-motion:no-preference){ .gs .streak::before{animation:sweep 3.4s cubic-bezier(.45,.05,.35,1) infinite} }
  @keyframes sweep{0%{left:-32%} 62%,100%{left:100%}}
  .acct{display:flex; align-items:center; gap:18px; color:var(--ink-2); font-weight:500; font-size:13.5px; white-space:nowrap}
  .acct b{display:inline-grid; place-items:center; min-width:18px; height:18px; border-radius:999px; background:var(--brand); color:#fff; font-size:11px; margin-left:5px; padding:0 5px}
  .mode{display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:999px; padding:4px 12px 4px 8px; cursor:pointer; background:transparent; color:var(--ink-2); font-size:12.5px; font-weight:600}
  .th-lx-slot{position:relative;width:17px;height:17px;flex:0 0 17px;display:inline-block}
  .th-lx-orb{position:absolute;inset:0;transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.4,.4,1)}
  .th-lx-moon{opacity:1;transform:scale(1) rotate(0deg)} .th-lx-sun{opacity:0;transform:scale(.4) rotate(-90deg)}
  :root[data-theme="light"] .th-lx-moon{opacity:0;transform:scale(.4) rotate(90deg)} :root[data-theme="light"] .th-lx-sun{opacity:1;transform:scale(1) rotate(0deg)}
  .th-lx-moon .th-lx-core{position:absolute;inset:0;border-radius:50%;z-index:2;background:linear-gradient(150deg,#241417,#0B0708 72%)}
  .th-lx-moon .th-lx-glow{position:absolute;inset:0;border-radius:50%;z-index:1;background:radial-gradient(circle at 42% 40%,var(--brand-hot) 0%,#7F1D1D 68%,transparent 100%);transform:translateX(8px) scale(.82)}
  .th-lx-sun .th-lx-core{position:absolute;inset:3px;border-radius:50%;z-index:2;background:radial-gradient(circle at 38% 34%,#FFE7C9 0%,var(--brand-hot) 55%,var(--brand) 100%)}
  .th-lx-sun .th-lx-glow{position:absolute;inset:0;border-radius:50%;z-index:1;background:radial-gradient(circle,var(--brand-hot) 0%,transparent 72%);transform:scale(.86);opacity:.4}
  .th-lx-rays{position:absolute;inset:0;z-index:0}
  .th-lx-ray{position:absolute;left:50%;top:50%;width:1.6px;height:5px;margin:-2.5px 0 0 -.8px;border-radius:2px;background:var(--brand-hot);opacity:.7;transform:rotate(calc(var(--i) * 45deg)) translateY(-12px)}
  @media (prefers-reduced-motion:no-preference){ .th-lx-moon .th-lx-glow{animation:ecl 4.6s ease-in-out infinite} .th-lx-rays{animation:spin 16s linear infinite} }
  @keyframes ecl{0%{transform:translateX(8px) scale(.82)}50%{transform:translateX(0) scale(1.06)}100%{transform:translateX(-8px) scale(.82)}}
  @keyframes spin{to{transform:rotate(360deg)}}
  /* centred across the full header width: logo edge to the theme toggle. 'safe center' falls back to
     left-aligned when the row is wider than the screen, so the first tab is never cut off on a phone. */
  .cb{display:flex; gap:2px; padding:4px 0 10px; border-top:1px solid var(--line); overflow-x:auto; scrollbar-width:none; justify-content:center; justify-content:safe center}
  .cb>.tab{flex:0 0 auto}
  .cb::-webkit-scrollbar{display:none}
  .tab{flex:none; display:grid; justify-items:center; gap:5px; min-width:88px; padding:8px 6px 4px; border-radius:12px; color:var(--ink-2); font-size:12px; font-weight:500; white-space:nowrap}
  .tab .sq{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--soft); border:1px solid transparent}
  .tab svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
  .tab.all{color:var(--brand); font-weight:600; margin-right:8px} .tab.all .sq{background:transparent; border:1.5px dashed color-mix(in srgb, var(--brand) 55%, transparent)}
  .tab.cur{color:var(--ink); font-weight:600} .tab.cur .sq{background:var(--brand); color:#fff}


  
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); transform:translate(-50%, 20px); opacity:0; z-index:90; background:var(--ink); color:var(--bg); font-size:13px; font-weight:500; padding:10px 16px; border-radius:999px; transition:opacity .25s ease, transform .25s ease; pointer-events:none; max-width:calc(100% - 32px)}
  .toast.on{opacity:1; transform:translate(-50%, 0)}

/* ---------- header behaviour at smaller widths (same breakpoints as the approved results page) ---------- */
@media (max-width:1000px){ .hdr .acct .hide-md{display:none} }
@media (max-width:900px){
  .hdr{grid-template-columns:minmax(0,1fr) auto; padding-block:14px; row-gap:12px; min-height:0}
  .hdr .gs{grid-column:1 / -1; order:3; height:56px} .hdr .gs .key{width:46px; height:46px}
}
/* Services + Account used to disappear at <=900px with nothing to replace them. They now stay on a tablet (761-900) and move into the phone menu (<=760, see the MOBILE block at the end) */
@media (max-width:560px){ .wrap{padding-inline:16px} .acct{gap:12px} .mode #modeLbl{display:none} }
.acct > span{cursor:pointer}
.tab.cur{color:var(--ink)}

/* ---------- draft pages: cart, checkout, order, account ---------- */
.page-h{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:10px 24px; padding-block:26px 18px}
.page-h h1{margin:0; font:400 64px/.9 var(--display); letter-spacing:.005em; text-wrap:balance}
.page-h h1 em{display:block; font:italic 400 26px/1.2 var(--serif); color:var(--ink-2); margin-top:6px}
.crumbs{display:flex; flex-wrap:wrap; gap:6px; font-size:12.5px; color:var(--muted); padding-block:18px 0}
.crumbs a:hover{color:var(--brand)}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.two-col{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:28px; align-items:start}
@media (max-width:980px){ .two-col{grid-template-columns:1fr} }

.panel{background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:20px}
.panel h2{margin:0 0 12px; font:400 28px/1 var(--display); letter-spacing:.01em}
.panel h2 em{font:italic 400 20px var(--serif); color:var(--ink-2)}
.sticky{position:sticky; top:calc(16px + env(safe-area-inset-top, 0px))}

.btn-p{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 24px; border:0; border-radius:14px; background:var(--brand); color:#fff; font:600 15px var(--sans); cursor:pointer; text-decoration:none; transition:background .2s ease, transform .15s ease}
.btn-p:hover{background:var(--brand-hot)} .btn-p:active{transform:translateY(1px)}
.btn-p[disabled]{opacity:.45; cursor:not-allowed}
.btn-p.wide{width:100%}
.btn-s{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); font:600 13.5px var(--sans); cursor:pointer; text-decoration:none}
.btn-s:hover{border-color:var(--brand); color:var(--brand)}
.link{color:var(--brand); font-weight:600; background:none; border:0; padding:0; cursor:pointer; font:inherit; font-weight:600}
.link:hover{text-decoration:underline}

/* cart lines */
.lines{display:grid; gap:12px}
.line{display:grid; grid-template-columns:104px minmax(0,1fr) auto; gap:16px; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:14px}
.line .ph{width:104px; height:104px; border-radius:14px; background:#fff; display:grid; place-items:center; border:1px solid var(--line); overflow:hidden; cursor:pointer}
.line .ph img{width:88%; height:88%; object-fit:contain}
.line .nm{margin:0; font:400 26px/.95 var(--display); letter-spacing:.01em; text-transform:uppercase; cursor:pointer}
.line .fr{margin:2px 0 6px; font:italic 400 17px/1.2 var(--serif); color:var(--ink-2)}
.line .fr b{font:600 14px var(--sans); font-style:normal; color:var(--ink)}
.line .tags{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:12.5px; color:var(--muted)}
.chip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:2px 10px; font-size:12px; font-weight:600; color:var(--ink-2); background:var(--soft)}
.chip i{width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.ok{color:var(--ok); font-weight:600}
.line .end{display:grid; justify-items:end; gap:10px}
.line .lp{font:600 18px var(--mono); font-variant-numeric:tabular-nums}
.line .lp small{display:block; text-align:right; font:500 11.5px var(--sans); color:var(--muted)}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--field)}
.qty button{width:36px; height:36px; border:0; background:transparent; font-size:18px; cursor:pointer; color:var(--ink)}
.qty button:hover{background:var(--soft)}
.qty span{min-width:30px; text-align:center; font:600 14px var(--mono)}
.rm{border:0; background:none; color:var(--muted); font-size:12.5px; cursor:pointer; padding:0}
.rm:hover{color:var(--brand)}
@media (max-width:560px){
  .line{grid-template-columns:76px minmax(0,1fr); gap:12px}
  .line .ph{width:76px; height:76px}
  .line .nm{font-size:22px}
  .line .end{grid-column:1 / -1; grid-template-columns:auto auto 1fr; justify-items:start; align-items:center}
  .line .lp{justify-self:end}
  .page-h h1{font-size:48px}
}

.unlock{display:grid; gap:8px; margin-top:14px; padding:14px 16px; border-radius:16px; background:var(--tint); border:1px solid var(--ring)}
.unlock p{margin:0; font-size:13.5px}
.unlock .bar{height:6px; border-radius:6px; background:var(--soft); overflow:hidden}
.unlock .bar i{display:block; height:100%; background:var(--brand); border-radius:6px; transition:width .4s ease}

.sum{display:grid; gap:10px}
.sum .row{display:flex; justify-content:space-between; gap:12px; font-size:14px}
.sum .row b{font:600 14px var(--mono); font-variant-numeric:tabular-nums}
.sum .row.free b{color:var(--ok)}
.sum .total{border-top:1px solid var(--line); padding-top:12px; margin-top:4px; align-items:baseline}
.sum .total span{font:400 26px var(--display); letter-spacing:.02em}
.sum .total b{font:700 22px var(--mono)}
.express{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.express button{height:46px; border-radius:12px; border:1px solid var(--line); background:var(--ink); color:var(--bg); font:600 14px var(--sans); cursor:pointer}
.divider{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px}
.divider::before, .divider::after{content:""; flex:1; height:1px; background:var(--line)}
.perks{display:grid; gap:10px; margin-top:6px; font-size:13px; color:var(--ink-2)}
.perks div{display:flex; gap:10px; align-items:flex-start}
.perks svg{flex:none; width:18px; height:18px; fill:none; stroke:var(--brand); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; margin-top:1px}
.perks b{color:var(--ink)}

/* mini product cards (empty cart, "you may also need", saved parts) */
.minis{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px}
@media (max-width:900px){ .minis{grid-template-columns:repeat(2, minmax(0,1fr))} }
.mini{display:grid; grid-template-rows:auto 1fr; background:var(--paper); border:1px solid var(--line); border-radius:18px; overflow:hidden}
.mini .mph{aspect-ratio:1/1; background:#fff; display:grid; place-items:center; border-bottom:1px solid var(--line); cursor:pointer}
.mini .mph img{width:84%; height:84%; object-fit:contain}
.mini .mb{display:grid; gap:4px; padding:10px 12px 12px}
.mini .mn{margin:0; font:400 21px/.95 var(--display); text-transform:uppercase; letter-spacing:.01em; cursor:pointer}
.mini .mf{margin:0; font:italic 400 15px/1.2 var(--serif); color:var(--ink-2); min-height:1.2em}
.mini .mr{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:6px}
.mini .mr b{font:600 15px var(--mono)}
.mini .mr button{height:34px; padding:0 12px; border-radius:10px; border:0; background:var(--brand); color:#fff; font:600 12.5px var(--sans); cursor:pointer}
.sec-t{display:flex; justify-content:space-between; align-items:end; gap:12px; margin:36px 0 14px}
.sec-t h2{margin:0; font:400 36px/.95 var(--display); letter-spacing:.01em}
.sec-t h2 em{font:italic 400 22px var(--serif); color:var(--ink-2)}

.empty-cart{display:grid; justify-items:center; text-align:center; gap:10px; padding:48px 16px 28px; border:1px dashed var(--line); border-radius:24px; background:var(--paper)}
.empty-cart h2{margin:0; font:400 56px/.9 var(--display)}
.empty-cart h2 em{display:block; font:italic 400 26px var(--serif); color:var(--ink-2)}
.empty-cart svg{width:64px; height:64px; fill:none; stroke:var(--brand); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* forms (checkout) */
.steps{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:12.5px; color:var(--muted); margin-bottom:6px}
.steps b{color:var(--ink)}
.fsec{display:grid; gap:14px}
.fsec + .fsec{margin-top:16px}
.fsec h2{display:flex; align-items:center; gap:12px}
.fsec h2 .n{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff; font:600 14px var(--mono)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid3{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:12px}
@media (max-width:560px){ .grid2, .grid3{grid-template-columns:1fr} }
.fld{display:grid; gap:6px}
.fld label{font-size:12.5px; font-weight:600; color:var(--ink-2)}
.fld input, .fld select{height:48px; border-radius:12px; border:1px solid var(--field-line); background:var(--field); color:var(--ink); padding:0 14px; font:15px var(--sans); width:100%}
.fld input:focus, .fld select:focus{outline:0; border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
.opts{display:grid; gap:10px}
.opt{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:16px; cursor:pointer; background:var(--field)}
.opt:has(input:checked){border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); background:var(--tint)}
.opt.off{opacity:.55; cursor:not-allowed}
.opt input{accent-color:var(--brand); width:18px; height:18px}
.opt b{display:block} .opt small{color:var(--muted)}
.opt .pr{font:600 14px var(--mono)} .opt .pr.free{color:var(--ok)}
.note{font-size:12.5px; color:var(--muted); margin:0}
.secure{display:inline-flex; align-items:center; gap:8px; color:var(--ok); font-weight:600; font-size:13px}
.secure svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2}
.mini-lines{display:grid; gap:10px; max-height:320px; overflow:auto; padding-right:4px}
.ml{display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:10px; align-items:center; font-size:13px}
.ml .t{position:relative; width:52px; height:52px; border-radius:10px; background:#fff; border:1px solid var(--line); display:grid; place-items:center}
.ml .t img{width:86%; height:86%; object-fit:contain}
.ml .t i{position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; border-radius:999px; background:var(--ink); color:var(--bg); font:600 11px/20px var(--mono); font-style:normal; text-align:center; padding:0 5px}
.ml small{display:block; color:var(--muted)}
.ml b{font:600 13px var(--mono)}

/* checkout header */
.co-hdr{background:var(--paper); border-bottom:1px solid var(--line)}
.co-hdr .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:76px}
.co-hdr .r{display:flex; align-items:center; gap:16px; font-size:13.5px}

/* order timeline */
.track{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:0; margin:8px 0 4px}
.track .st{position:relative; display:grid; justify-items:center; gap:8px; text-align:center; font-size:12.5px; color:var(--muted)}
.track .st::before{content:""; position:absolute; top:15px; left:-50%; right:50%; height:3px; background:var(--line)}
.track .st:first-child::before{display:none}
.track .st.done::before, .track .st.now::before{background:var(--brand)}
.track .dot{position:relative; z-index:1; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--soft); border:2px solid var(--line); color:var(--muted)}
.track .dot svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.track .done .dot{background:var(--brand); border-color:var(--brand); color:#fff}
.track .now .dot{background:var(--paper); border-color:var(--brand); color:var(--brand); box-shadow:0 0 0 5px var(--ring)}
.track b{color:var(--ink)}
@media (max-width:560px){ .track{grid-template-columns:1fr; gap:14px} .track .st{grid-template-columns:32px 1fr; justify-items:start; text-align:left; align-items:center} .track .st::before{display:none} }
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:13.5px; margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0}

/* account */
.tabs{display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px}
.tabs button{border:0; background:none; padding:12px 14px; font:600 14px var(--sans); color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--ink); border-color:var(--brand)}
.orders{display:grid; gap:12px}
.order{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:16px}
.order .thumbs{display:flex; gap:6px; margin-top:10px}
.order .thumbs span{width:48px; height:48px; border-radius:10px; background:#fff; border:1px solid var(--line); display:grid; place-items:center}
.order .thumbs img{width:86%; height:86%; object-fit:contain}
.order h3{margin:0; font:600 15px var(--mono)}
.order .meta{font-size:12.5px; color:var(--muted)}
.pill{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:3px 10px; font-size:12px; font-weight:600}
.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.pill.ship{color:#2563EB; background:rgba(37,99,235,.1)} .pill.del{color:var(--ok); background:var(--ok-bg)} .pill.new{color:var(--warn); background:var(--warn-bg)}
.order .act{display:grid; gap:8px; justify-items:end}
@media (max-width:560px){ .order{grid-template-columns:1fr} .order .act{justify-items:start; grid-auto-flow:column} }
.biz{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; padding:22px; border-radius:20px; background:var(--strip); color:var(--strip-ink)}
.biz h3{margin:0; font:400 32px/.95 var(--display); color:#fff} .biz h3 em{font:italic 400 22px var(--serif); color:var(--strip-ink)}
.biz p{margin:6px 0 0}
@media (max-width:560px){ .biz{grid-template-columns:1fr} }

/* footer + search + services (from the approved demo) */
/* Dalbani demo — small layer shared by every page (the approved pages keep their own styles) */
:root{
  --foot:#0B1220; --foot-2:#131B2C; --foot-ink:#E9E6DF; --foot-muted:#8C93A3; --foot-line:#1F2A3D;
  --aisle:url(aisle.jpg);
  --df-bg:#FFFFFF; --df-ink:#0B1220; --df-mute:#6B7280; --df-line:#E5E7EB; --df-brand:#B91C1C;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --foot:#08090B; --foot-2:#101216; --foot-ink:#EDEAE3; --foot-muted:#8E8C86; --foot-line:#1E2126;
  --df-bg:#15171B; --df-ink:#F2EFE9; --df-mute:#8E8C86; --df-line:#26292F; --df-brand:#D42A21;
}}
:root[data-theme="dark"]{
  --foot:#08090B; --foot-2:#101216; --foot-ink:#EDEAE3; --foot-muted:#8E8C86; --foot-line:#1E2126;
  --df-bg:#15171B; --df-ink:#F2EFE9; --df-mute:#8E8C86; --df-line:#26292F; --df-brand:#D42A21;
}

/* mockup-only bars and notes are hidden in the demo */
.v3-gs{cursor:text}
.v3-gs .key{border:0; cursor:pointer; padding:0}
.v3-gs input{flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:16px; height:100%}
.v3-gs input::placeholder{color:var(--muted)}
.v3-gs input::-webkit-search-cancel-button{filter:grayscale(1)}
.v3-gs:focus-within{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring, rgba(185,28,28,.16))}
.v3-sug{position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:80; background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:6px; box-shadow:var(--shadow, 0 24px 50px -30px rgba(11,18,32,.35)); display:grid; gap:2px; max-height:min(70vh, 460px); overflow:auto}
.v3-sug a{display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; padding:8px 10px; border-radius:12px; color:var(--ink); text-decoration:none}
.v3-sug a:hover, .v3-sug a:focus-visible{background:var(--soft, rgba(127,127,127,.1))}
.v3-sug img{width:44px; height:44px; object-fit:contain; background:#fff; border-radius:8px}
.v3-sug span{display:grid; min-width:0} .v3-sug b{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.v3-sug small{color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.v3-sug em{font:600 13px 'JetBrains Mono', ui-monospace, monospace; font-style:normal}
.v3-sug .ds-c{grid-template-columns:minmax(0,1fr) auto} .v3-sug .ds-c small{color:var(--brand); font-weight:600}
.v3-sug .ds-all{grid-template-columns:1fr; color:var(--brand); font-weight:600; border-top:1px solid var(--line); border-radius:0 0 12px 12px}
.site-foot{background:var(--foot); color:var(--foot-muted); margin-top:56px; position:relative; overflow:hidden; font-size:13.5px; font-family:Inter, system-ui, sans-serif}
.site-foot a{color:var(--foot-ink); text-decoration:none} .site-foot a:hover{color:#F04A3E}
.site-foot .wrap{max-width:1180px; margin:0 auto; padding-inline:24px}
.foot-ask{position:relative; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--foot-line)}
.foot-ask:before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, var(--foot) 0%, rgba(8,9,12,.72) 45%, rgba(8,9,12,.35) 100%), var(--aisle) center 58% / cover no-repeat}
.foot-ask .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; padding-block:34px}
.foot-ask p{margin:0; color:var(--foot-ink); font-size:18px} .foot-ask p span{color:var(--foot-muted)}
.foot-ask .btn{display:inline-flex; align-items:center; padding:12px 20px; border-radius:8px; font-weight:600; background:transparent; border:1px solid var(--foot-line); color:var(--foot-ink)}
.foot-main{display:grid; grid-template-columns:minmax(0,1.25fr) repeat(4, minmax(0,1fr)); gap:32px; padding-block:44px 40px; position:relative; z-index:1}
.foot-brand .mark{font-family:'Bebas Neue', Impact, sans-serif; font-size:52px; line-height:.9; color:var(--foot-ink); letter-spacing:.01em}
.foot-brand .mark i{font-style:normal; color:#F04A3E}
.foot-brand p{margin:10px 0 18px; max-width:30ch}
.foot-brand address{font-style:normal; display:grid; gap:4px; line-height:1.5}
.foot-brand address a{font-weight:600}
.foot-brand .hours{display:inline-flex; align-items:center; gap:8px; margin-top:6px; font-size:12.5px}
.foot-brand .hours:before{content:""; width:7px; height:7px; border-radius:50%; background:#4ADE80; box-shadow:0 0 0 3px rgba(74,222,128,.15)}
.foot-col h3{margin:0 0 12px; font-family:'Bebas Neue', Impact, sans-serif; font-weight:400; font-size:20px; letter-spacing:.04em; color:var(--foot-ink)}
.foot-col ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.foot-col a{color:var(--foot-muted)} .foot-col a:hover{color:var(--foot-ink)}
.foot-col small{display:inline-block; margin-left:6px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#F04A3E; font-weight:600}
.foot-giant{font-family:'Bebas Neue', Impact, sans-serif; font-size:clamp(96px, 23vw, 320px); line-height:.78; height:.5em; overflow:hidden; text-align:center; letter-spacing:.02em; color:var(--foot-2); white-space:nowrap; pointer-events:none; user-select:none; margin-top:6px}
.foot-bottom{position:relative; z-index:1; border-top:1px solid var(--foot-line)}
.foot-bottom .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; padding-block:18px 22px; font-size:12.5px}
.foot-legal{display:flex; flex-wrap:wrap; gap:6px 16px}
.foot-legal a{color:var(--foot-muted)}
.pay{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0}
.pay li{border:1px solid var(--foot-line); border-radius:5px; padding:3px 7px; font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--foot-ink); background:var(--foot-2)}
@media (max-width:900px){ .foot-main{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1 / -1} }
@media (max-width:560px){ .site-foot .wrap{padding-inline:16px} }
.svc-link{color:var(--brand, #B91C1C); font-weight:600}
@media (min-width:1000px){ .site-foot .foot-main:has(.svc-col){grid-template-columns:minmax(0,1.25fr) repeat(5, minmax(0,1fr)); gap:26px} }
/* services homepage band (approved 2026-09-20, from the Services placement preview) */
.svc-band2{padding-block:44px 8px}
.svc-band2 .svb{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.svc-band2 .svb-c{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; border-radius:18px; padding:18px; background:var(--paper,#fff); border:1px solid var(--line,#E5E7EB); color:var(--ink,#0B1220); text-decoration:none}
.svc-band2 .svb-c:hover{border-color:var(--brand,#B91C1C)}
.svc-band2 .svb-c.dk{background:var(--strip,#0B1220); color:#F2EFE9; border-color:transparent}
/* In dark mode --strip is darker than the page, so the emphasis card turned into a hole and the
   two cards read the same. Keep the navy identity and a visible edge so the light-mode pairing survives. */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .svc-band2 .svb-c.dk{background:#111725; border-color:#1E2636} }
:root[data-theme="dark"] .svc-band2 .svb-c.dk{background:#111725; border-color:#1E2636}
.svc-band2 .svb-c b{display:block; font:400 34px/1 'Bebas Neue', Impact, sans-serif; letter-spacing:.01em; color:inherit}
.svc-band2 .svb-c span{font-size:13.5px; opacity:.8; color:inherit}
.svc-band2 .svb-c img{width:120px; height:84px; object-fit:contain}
.svc-band2 .svb-c img.ph{width:60px; border-radius:8px; object-fit:cover; object-position:top; box-shadow:0 6px 16px rgba(0,0,0,.3)}
@media (max-width:900px){ .svc-band2 .svb{grid-template-columns:1fr} .svc-band2 .svb-c b{font-size:28px} }

/* =====================================================================================================
   MOBILE + TOUCH PASS (session #15, 2026-10-02) - Gabriel: "optimized for pc, mobile and tablet for both android and ios".
   Everything below is inside a phone/touch media query EXCEPT the rules marked [all widths], which are
   no-ops on a desktop mouse. A mouse at >=761px paints exactly as before (one deliberate exception: at 761-900px the
   Services and Account links, previously hidden with no replacement, now show in the header).
   PHONE   = (max-width:760px), or a phone held sideways ((pointer:coarse) and (max-height:500px)): header menu, strip, drawer layout.
   TOUCH   = (max-width:760px), or any coarse-pointer device (phones AND tablets, either orientation): the 16px input rule (iOS zooms
             the whole page on focus of anything under 16px at ANY width) and the 44px tap-target rules.
   Specificity notes: the page <style> blocks load AFTER this file, so a bare selector here loses to them.
   Rules that must win use the extra `body` prefix (one more type selector) or a :not() chain. !important is
   used only where the thing being beaten is itself !important or an inline style="" (cart drawer, RFQ panel,
   the price-range inputs, the sort select) - each is marked.
   ===================================================================================================== */

/* [all widths] stop iOS landscape from inflating text; drop the 300ms double-tap-zoom wait on controls */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
a, button, summary, label, select, input, textarea{touch-action:manipulation}
/* [all widths] viewport-fit=cover is set on every page, so on a notched phone held sideways the page runs under the
   notch. env() is 0 everywhere else, so max() collapses to the old 24px / 16px. */
.wrap, .site-foot .wrap{padding-left:max(24px, env(safe-area-inset-left)); padding-right:max(24px, env(safe-area-inset-right))}
@media (max-width:560px){ .wrap, .site-foot .wrap{padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right))} }

/* ---------- header: hamburger + menu sheet (phone) ---------- */
.menu-btn, .v3-menu{display:none}
@media (max-width:760px), (pointer:coarse) and (max-height:500px){
  .acct .hide-sm{display:none}
  .acct{gap:6px}
  .acct > a:not(.hide-sm){display:inline-flex; align-items:center; min-height:44px; padding:0 8px}
  .acct b{margin-left:6px}
  .mode{min-height:44px; min-width:44px; justify-content:center; padding:0 12px}
  .menu-btn{display:inline-grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink-2); cursor:pointer}
  .menu-btn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
  .menu-btn .x{display:none} .menu-btn[aria-expanded="true"] .x{display:block} .menu-btn[aria-expanded="true"] .bars{display:none}
  .menu-btn[aria-expanded="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
  .v3-menu{grid-column:1 / -1; order:2; display:grid; margin:0; border:1px solid var(--line); border-radius:16px; background:var(--paper); overflow:hidden}
  .v3-menu[hidden]{display:none}
  .v3-menu a{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:0 16px; font:600 15px var(--sans); color:var(--ink)}
  .v3-menu a + a{border-top:1px solid var(--line)}
  .v3-menu a::after{content:"\203A"; color:var(--muted); font-weight:400; font-size:20px; line-height:1}
  .v3-menu a.pri{color:var(--brand)}
  .v3-menu a:active{background:var(--soft)}
  .v3-menu .mh{padding:12px 16px 6px; font:600 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); background:var(--soft); border-top:1px solid var(--line)}
  .v3-menu .mh:first-child{border-top:0}
}

/* ---------- announcement strip: 135px -> ~100px on a phone (same words, same asterisk, footnote still always visible) ---------- */
.strip-fine{margin:-3px auto 0; padding:0 16px 8px; max-width:920px; text-align:center; font-size:11px; line-height:1.45; opacity:.85}
@media (max-width:560px){
  .strip ul{padding:7px 12px 6px; gap:1px 12px; font-size:11.5px; line-height:1.4}
  .strip li{white-space:normal; gap:6px}
  .strip li:nth-child(2){order:3}            /* "Free UPS 2nd Day Air...*" drops to its own line, directly above its footnote */
  .strip-fine{margin-top:-2px; padding:0 14px 7px; font-size:11px; line-height:1.4}
}

/* ---------- inputs: 16px or iOS zooms the page on every focus. Beats page rules, !important rules and inline styles. ---------- */
@media (max-width:760px), (pointer:coarse){
  /* !important: needed - the sources are inline style="" (cart drawer qty, price range, catalog filters) and page rules that are
     themselves !important (.filters .rs-price input, .sort-dropdown select, #dlb-rfq input). The :not() chain gives it the weight
     to out-rank the page rules; the two #dlb-rfq selectors below are for the ID-weighted !important rules. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=hidden]),
  select, textarea,
  html #dlb-rfq input, html #dlb-rfq textarea,
  body .sort-dropdown select, body .filters .rs-price input{font-size:16px !important}   /* last two: the page rules they beat are themselves !important (font:600 13px/14px ... !important) */
}

/* ---------- tap targets (phone + any touch screen incl. tablets; a desktop mouse at any width is untouched) ---------- */
@media (max-width:760px), (pointer:coarse){
  .logo{display:inline-flex; align-items:center; min-height:44px}
  .acct > a{display:inline-flex; align-items:center; min-height:44px}
  .mode{min-height:44px; min-width:44px}
  .btn-s{min-height:44px}
  .foot-ask .btn{min-height:44px}
  .foot-col ul{gap:0}
  .foot-col li{display:flex; align-items:center; flex-wrap:wrap; column-gap:6px}
  .foot-col li a{display:inline-flex; align-items:center; min-height:40px; min-width:44px}
  .foot-col small{margin-left:0}
  .foot-brand address{gap:0}
  .foot-brand address a{display:flex; align-items:center; min-height:40px}
  .foot-legal{gap:0 16px}
  .foot-legal a{display:inline-flex; align-items:center; min-height:40px; min-width:44px}
  body .crumbs, body .rs .crumbs{padding-block:0 4px; gap:0 6px; align-items:center}
  body .crumbs a, body .rs .crumbs a{display:inline-flex; align-items:center; min-height:40px; padding-inline:5px; margin-inline:-5px}
  #dlb-c-reject, #dlb-c-accept{min-height:44px}

  /* cart page */
  body .qty-stepper button{width:44px; height:44px}
  body .qty-stepper input{width:48px; height:44px}
  body .cart-item .remove, body .cart-item .later{min-height:44px; padding:0 8px}
  body .cart-item .qty-row{gap:4px 12px}
  body .sl .sa button, body .sl .sa a{min-height:44px; padding-inline:8px}

  /* category / search */
  body .dqty{padding:2px}
  body .dqty button{width:44px; height:44px}
  body .datc{min-height:44px; padding-block:0}
  body .dqv{min-height:44px; padding:0 14px; font-size:12.5px}
  body .fbtn{height:44px}
  body .sort-dropdown select{height:44px !important}   /* !important: the page rule it beats is itself !important */
  body .active-filters .chip button, body .active-filters .clear-all{position:relative}
  body .active-filters .chip button::after, body .active-filters .clear-all::after{content:""; position:absolute; top:-12px; right:-12px; bottom:-12px; left:-12px}  /* hit area only, the chip looks the same */
  body .pagination button{min-width:44px; height:44px}
  body .rail-h button{width:44px; height:44px}
  body .filters .filter-option{padding-block:11px}
  body .filters .rs-price input, body .filters .rs-price button{height:44px !important}
  body .filters .rs-price button{min-width:44px}   /* !important: page rule is !important */
  body .dmeta{font-size:12.5px} body .dmeta .skul{font-size:12px} body .dkick{font-size:11px}
  body .dconds button{font-size:12.5px; padding:8px 11px}
  body .ddots{gap:14px}
  body .ddots button::before{content:""; position:absolute; top:-8px; right:-8px; bottom:-8px; left:-8px}
}

@media (max-width:760px), (pointer:coarse){
  body .btn{min-height:44px}
  body .mc-b button, body .tp-row .mc-b button{min-height:44px}
  body .fs-h a{display:inline-flex; align-items:center; min-height:44px}
  body .co-hdr .r .back{display:inline-flex; align-items:center; min-height:44px}
  body label.chk, body #credit-row, body #acct-row{min-height:44px}
  body #tabDalbani, body #tabEbay{min-height:44px}
  body .b-qty button{width:44px; height:44px}
  body .b-nav button{min-width:44px; min-height:44px}
  body [role=tab]{min-height:44px}
  body #skuGo{min-height:44px}
  body .gallery-main .zoom{width:44px; height:44px}
  body .pd-qty input{align-self:stretch; height:100%}
  body .pd #dlb-wish{min-height:44px}
  body .pd .section-block button:not(.pd-copy){min-height:44px}
  /* small text links and chips: grow the HIT area with an invisible pseudo-element, the look does not change */
  body .sec-h a, body .dp-head a, body .paste-f a, body #bSee, body .pd-copy, body .pd-eyebrow a, body .pd-perk a, body #show-login{position:relative}
  body .sec-h a::after, body .dp-head a::after, body .paste-f a::after, body #bSee::after, body .pd-copy::after, body .pd-eyebrow a::after, body .pd-perk a::after, body #show-login::after{content:""; position:absolute; top:-15px; right:-8px; bottom:-15px; left:-8px}
}