/* ==========================================================================
   Intcenta redesign — shop.css  (v1)
   Plain CSS (no build step). Loaded by resources/views/layouts/shop.blade.php.
   Design system from the approved prototype. Colour rules:
   - primary/chrome #22262B (NOT red) · red #D61F27 = urgency only
   - green in stock · amber low stock
   ========================================================================== */
:root{
  --chrome:#22262B; --hero-dark:#1b1e22; --accent:#D61F27; --stock:#1d7a3c; --low:#b98a00;
  --surface:#fff; --page:#e9e8e6; --panel:#f4f4f3; --chip:#f0efee;
  --ink:#000; --ink-2:#767676; --ink-3:#8a8a8a; --ink-4:#999;
  --line:#e6e6e6; --line-2:#e2e2e2; --line-3:#eee; --input:#d5d5d5;
  --on-dark-1:#b6bcc4; --on-dark-2:#aab0b8; --on-dark-3:#9aa0a8; --on-dark-4:#7f858d;
  --ff:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;}
body.shop{margin:0;background:var(--page);font-family:var(--ff);color:var(--ink);-webkit-font-smoothing:antialiased;}
.shop a{color:inherit;text-decoration:none;}
.shop img{max-width:100%;}
.shop .clk{cursor:pointer;}
.tnum{font-variant-numeric:tabular-nums;}
.mono{font-family:var(--mono);}
.shop-shell{width:1280px;max-width:100%;margin:0 auto;background:var(--surface);min-height:100vh;display:flex;flex-direction:column;}
.eyebrow{font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;}
.section{padding:28px 32px;}

/* brand wordmark */
.brand{font:700 19px var(--ff);letter-spacing:-.02em;line-height:1;white-space:nowrap;color:var(--ink);}
.brand--sm{font-size:15px;}
.brand--invert{color:#fff;}
/* Official logo, inline SVG — the navy wordmark tracks `color` via
   currentColor so the same markup works on light and dark backgrounds;
   the red accent stroke stays fixed to the brand accent token. */
.brand-logo-svg{width:auto;display:block;}
.brand-logo{height:24px;color:var(--chrome);}
.brand-logo--footer{height:20px;color:#fff;}

/* ---- utility bar ---- */
.utilbar{display:flex;justify-content:space-between;align-items:center;background:var(--chrome);color:#fff;padding:6px 32px;font:400 12px var(--ff);}
.utilbar .left,.utilbar .right{display:flex;gap:20px;align-items:center;}
.utilbar .muted{color:var(--on-dark-3);}
.utilbar a.strong{font-weight:600;color:#fff;}
.utilbar a:hover{color:var(--accent);}

/* ---- header ---- */
.header{display:flex;align-items:center;gap:28px;padding:18px 32px;border-bottom:1px solid var(--line);}
.header .logo{flex:none;}
.search{flex:1;display:flex;height:44px;border:2px solid var(--chrome);border-radius:6px;position:relative;}
.search input{flex:1;border:0;outline:none;padding:0 16px;font:400 14px var(--ff);color:#333;min-width:0;border-radius:4px 0 0 4px;}
.search button{display:flex;align-items:center;padding:0 22px;background:var(--chrome);color:#fff;font:600 13px var(--ff);border:0;cursor:pointer;border-radius:0 4px 4px 0;}
.search .search-results{position:absolute;top:46px;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:0 0 6px 6px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:40;max-height:60vh;overflow:auto;}
.sres-empty{padding:18px 16px;font:500 13px var(--ff);color:var(--ink-3);text-align:center;}
.sres-dym{padding:9px 14px;font:500 12px var(--ff);color:var(--ink-2);background:var(--surface);border-bottom:1px solid var(--line-2);}
.sres-dym strong{color:var(--chrome);}
.sres-cats{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line-2);}
.sres-cat{font:600 11px var(--ff);color:var(--chrome);background:var(--panel);border:1px solid var(--line-2);border-radius:20px;padding:4px 11px;text-decoration:none;white-space:nowrap;}
.sres-cat:hover{background:var(--chrome);color:#fff;}
.sres-list{display:flex;flex-direction:column;}
.sres-row{display:flex;align-items:center;gap:12px;padding:9px 14px;text-decoration:none;border-bottom:1px solid var(--line-2);}
.sres-row:last-child{border-bottom:0;}
.sres-row:hover,.sres-row.is-active{background:var(--surface);}
.sres-thumb{flex:none;width:34px;height:34px;border-radius:5px;background:#f7f6f4;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.sres-thumb img{max-width:100%;max-height:100%;object-fit:contain;}
.sres-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.sres-name{font:600 13px var(--ff);color:#000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sres-code{font:400 11px var(--mono);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sres-end{flex:none;display:flex;align-items:center;gap:8px;}
.sres-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.sres-dot--in{background:var(--stock);}
.sres-dot--out{background:var(--ink-3);}
.sres-price{font:700 13px var(--ff);color:#000;white-space:nowrap;}
.sres-more{display:block;padding:11px 14px;font:600 12px var(--ff);color:var(--chrome);text-align:center;border-top:1px solid var(--line);text-decoration:none;background:var(--surface);}
.sres-more:hover{color:var(--accent);}
.actions{display:flex;gap:22px;flex:none;font:500 12px var(--ff);}
.action{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;background:none;border:0;color:#000;cursor:pointer;font:500 12px var(--ff);}
.action .ico{width:20px;height:20px;border:1.5px solid var(--chrome);}
.action .ico--sq{border-radius:4px;}.action .ico--rnd{border-radius:50%;}.action .ico--cart{border-radius:4px 4px 8px 8px;}
.cart-badge{position:absolute;top:-6px;right:2px;background:var(--accent);color:#fff;font:600 10px var(--ff);border-radius:9px;padding:1px 6px;min-width:16px;text-align:center;}

/* ---- category nav ---- */
.catnav{display:flex;gap:4px;align-items:center;padding:0 32px;background:var(--panel);border-bottom:1px solid var(--line);font:500 13px var(--ff);color:#1a1a1a;flex-wrap:wrap;}
.catnav .item{padding:12px 14px;white-space:nowrap;color:inherit;}
.catnav .item--all{padding:12px 16px;background:var(--chrome);color:#fff;}
.catnav .item:not(.item--all):hover{color:var(--accent);}
.catnav .spacer{flex:1;}
.catnav .item--selloff{color:var(--accent);font-weight:700;}
.catnav .item--new{font-weight:700;}

/* ---- footer ---- */
.footer{background:var(--chrome);color:#fff;padding:28px 32px;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:auto;flex-wrap:wrap;}
.footer .links{display:flex;gap:24px;font:400 12px var(--ff);color:var(--on-dark-2);}
.footer .links a:hover{color:#fff;}
.footer .copy{font:400 11px var(--ff);color:var(--on-dark-4);}
/* The group link sits in the copyright line: same size, one step brighter
   than the text around it so it reads as a link without drawing the eye. */
.footer .copy-link{color:var(--on-dark-2);text-decoration:none;}
.footer .copy-link:hover{color:#fff;text-decoration:underline;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:6px;font:600 13px var(--ff);padding:11px 22px;white-space:nowrap;border:0;cursor:pointer;}
a.btn--dark,.btn--dark{background:var(--chrome);color:#fff;}
a.btn--light,.btn--light{background:#fff;color:var(--chrome);}
a.btn--ghost-dark,.btn--ghost-dark{border:1.5px solid #565c65;color:#fff;background:transparent;}
a.btn--outline,.btn--outline{border:1.5px solid var(--chrome);color:var(--chrome);background:#fff;}
.btn--block{display:flex;width:100%;}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:40px;padding:40px 32px;background:var(--hero-dark);color:#fff;}
.hero .copy{flex:1;}
.hero .eyebrow{color:#ff8a8e;margin-bottom:10px;display:flex;align-items:center;gap:7px;}
.hero .eyebrow .livedot{width:7px;height:7px;border-radius:50%;background:#8de0a6;flex:none;box-shadow:0 0 0 3px rgba(141,224,166,.25);}
.hero h1{font:700 34px/1.12 var(--ff);letter-spacing:-.01em;max-width:540px;margin:0;color:#fff;}
.hero p{font:400 14px/1.5 var(--ff);color:var(--on-dark-1);margin:12px 0 20px;max-width:480px;}
.hero .hero-cta{display:flex;gap:12px;flex-wrap:wrap;}
.hero .hero-img{width:460px;height:230px;flex:none;background:#fff;border:1px solid #333;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.hero .hero-img img{width:100%;height:100%;object-fit:contain;}
.hero-stats{display:flex;gap:14px;margin:18px 0 22px;flex-wrap:wrap;}
.hero-stats .hero-stat{background:rgba(255,255,255,.05);border:1px solid #33383f;border-radius:8px;padding:12px 18px;}
.hero-stats .hero-stat .hs-v{font:700 22px var(--ff);color:#fff;}
.hero-stats .hero-stat .hs-l{font:500 11px var(--ff);color:var(--on-dark-2);text-transform:uppercase;letter-spacing:.06em;margin-top:2px;}

/* ---- quick-order pad ---- */
.qopad{background:var(--chrome);border:1px solid #2e3339;border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:12px;}
.qopad .qo-head{font:700 14px var(--ff);color:#fff;}
.qopad .qo-sub{font:400 12px var(--ff);color:var(--on-dark-2);margin-top:-8px;}
.qopad textarea{width:100%;min-height:110px;resize:vertical;background:#1a1d21;border:1px solid #383e45;border-radius:8px;color:#fff;font:400 13px var(--mono);padding:10px 12px;outline:none;}
.qopad textarea::placeholder{color:#666d75;}
.qopad .qo-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.qopad .qo-add{background:var(--accent);color:#fff;border:0;border-radius:6px;padding:11px 18px;font:600 13px var(--ff);cursor:pointer;flex:1;}
.qopad .qo-add:hover{filter:brightness(1.08);}
.qopad .qo-upload{font:500 12px var(--ff);color:var(--on-dark-2);border:1px solid #444b53;border-radius:6px;padding:10px 14px;cursor:pointer;white-space:nowrap;}
.qopad .qo-upload input{display:none;}
.qopad .qo-note{font:400 11px var(--ff);color:var(--on-dark-3);}
.qopad .qo-results{display:flex;flex-direction:column;gap:4px;max-height:140px;overflow:auto;}
.qopad .qo-line{display:flex;justify-content:space-between;gap:8px;font:400 12px var(--ff);padding:5px 0;border-top:1px solid #2e3339;}
.qopad .qo-line:first-child{border-top:0;}
.qopad .qo-line .code{font-family:var(--mono);color:var(--on-dark-1);}
.qopad .qo-line .ok{color:#8de0a6;}
.qopad .qo-line .err{color:#ff9a9d;}
.qopad .qo-login{font:400 13px/1.5 var(--ff);color:var(--on-dark-1);}
.qopad .qo-login a{color:#fff;font-weight:700;text-decoration:underline;}

/* ---- spec quick-access chips ---- */
.spec-chips{display:flex;flex-wrap:wrap;gap:10px;}
.spec-chip{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;background:var(--chip);border:1px solid var(--line-2);border-radius:20px;font:500 12px var(--ff);color:#000;}
.spec-chip:hover{border-color:var(--chrome);color:var(--chrome);}
.spec-chip .grp{color:var(--ink-3);}

/* ---- trade CTA band ---- */
.trade-cta{background:var(--hero-dark);border-radius:14px;padding:34px 40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;color:#fff;}
.trade-cta .t{font:700 22px var(--ff);letter-spacing:-.01em;}
.trade-cta .s{font:400 13px var(--ff);color:var(--on-dark-1);margin-top:6px;max-width:460px;}

/* ---- section heads / grids ---- */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;}
.sec-title{font:700 18px var(--ff);color:#000;}
.sec-link{font:500 12px var(--ff);color:var(--accent);}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}

/* ---- image box + placeholder ---- */
.imgbox{background:#fff;border:1px solid var(--line-3);border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.imgbox img{width:100%;height:100%;object-fit:contain;}
.imgbox.is-empty{background:radial-gradient(circle at 30% 30%,#fbfbfb,#f1f1f0);position:relative;}
.imgbox.is-empty::after{content:"";position:absolute;inset:24%;border-radius:4px;background:linear-gradient(180deg,#dfe1e3,#c7cace 60%,#b6b9bd);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 4px rgba(0,0,0,.12);}

/* ---- category card ---- */
.cat-card{border:1px solid var(--line-2);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:12px;background:#fff;}
.cat-card .imgbox{height:100px;}
.cat-card .t{font:600 14px var(--ff);color:#000;}
.cat-card .s{font:400 12px var(--ff);color:#777;margin-top:2px;}

/* ---- product card ---- */
.pcard{border:1px solid var(--line-2);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:10px;background:#fff;position:relative;}
.pcard .imgbox{height:130px;}
.pcard .brand-line{font:400 11px var(--mono);color:var(--ink-3);}
.pcard .name{font:500 13px/1.35 var(--ff);color:#000;min-height:35px;}
.pcard .card-code{display:block;font:400 10px var(--mono);color:#9a9a9a;margin-top:-6px;}
.pcard .price{font:700 17px var(--ff);color:#000;}
.pcard .price--login{font:600 12px var(--ff);color:var(--ink-2);}
.pcard .tag{position:absolute;top:10px;left:10px;font:700 9px var(--ff);letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:4px;color:#fff;}
.tag--new{background:var(--chrome);}
.tag--selloff{background:var(--accent);}
.tag--phaseout{background:#494ea3;}
.addcart{background:var(--chrome);color:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center;font:600 12px var(--ff);height:36px;width:100%;border:0;cursor:pointer;}
.addcart:hover{filter:brightness(1.1);}
.morebtn{border:1.5px solid var(--chrome);color:var(--chrome);background:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center;font:600 12px var(--ff);height:36px;width:100%;}
.login-hint{font:500 11px var(--ff);color:var(--ink-2);text-align:center;padding:8px 0;}

/* ---- trust ---- */
.trust{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border-radius:8px;padding:16px;}
.trust .bar{width:8px;height:34px;background:var(--accent);border-radius:3px;flex:none;}
.trust .t{font:600 13px var(--ff);color:#000;}
.trust .b{font:400 12px/1.45 var(--ff);color:#666;}

/* ---- brands ---- */
.brands-sec{text-align:center;}
.brands-label{display:flex;align-items:center;justify-content:center;gap:14px;font:700 12px var(--ff);letter-spacing:.14em;color:var(--ink-3);margin-bottom:22px;}
.brands-rule{display:inline-block;width:36px;height:2px;background:var(--accent);}
.brands-row{display:flex;flex-wrap:wrap;gap:36px;align-items:center;justify-content:center;}
.brands-name{font:500 15px var(--ff);letter-spacing:.1em;color:var(--ink-2);white-space:nowrap;text-transform:uppercase;}

/* ---- responsive ---- */
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){
  .section{padding:22px 18px;}
  .utilbar{padding:6px 18px;font-size:11px;}
  .utilbar .muted.hide-sm{display:none;}
  .header{padding:14px 18px;gap:14px;flex-wrap:wrap;}
  .header .logo{order:1;}.actions{order:2;margin-left:auto;gap:16px;}.search{order:3;flex-basis:100%;}
  .catnav{overflow-x:auto;flex-wrap:nowrap;padding:0 18px;}
  .hero{grid-template-columns:1fr;align-items:stretch;padding:24px 18px;gap:20px;}
  .hero .hero-img{width:100%;}.hero h1{font-size:27px;}
  .hero-stats{gap:18px;}
  .grid-4,.grid-3{grid-template-columns:repeat(2,1fr);}
  .footer{flex-direction:column;align-items:flex-start;gap:14px;}
  .trade-cta{padding:26px 22px;}
}
@media(max-width:460px){.grid-4,.grid-3{grid-template-columns:1fr;}}

/* ===== CATALOG ===== */
.crumb{font:400 12px var(--ff);color:var(--ink-2);margin-bottom:8px;}
.crumb a:hover{color:var(--accent);}
.crumb .cur{color:#000;}
.page-title{font:700 26px var(--ff);letter-spacing:-.01em;color:#000;margin:0;}
.page-count{font:400 13px var(--ff);color:var(--ink-2);}
.catalog-grid{display:grid;grid-template-columns:248px 1fr;gap:24px;align-items:start;}
.side-panel{font:400 13px var(--ff);color:#333;}
.side-panel h3{font:700 14px var(--ff);color:#000;margin:0 0 12px;}
.side-block{border-top:1px solid var(--line);padding:16px 0;}
.side-block:first-child{border-top:0;padding-top:0;}
.cat-tree ul{list-style:none;margin:0;padding:0;}
.cat-tree .content-box__link{display:block;padding:6px 0;font:500 13px var(--ff);color:#333;}
.cat-tree .content-box__link:hover{color:var(--accent);}
.cat-tree .content-box__link.active-cat{color:var(--chrome);font-weight:700;}
.cat-toggle{position:relative;flex:none;width:20px;height:20px;border:0;background:none;cursor:pointer;padding:0;}
.cat-toggle::after{content:"";position:absolute;left:6px;top:6px;width:6px;height:6px;border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);transform:rotate(-45deg);transition:transform .15s;}
.cat-toggle.is-open::after{transform:rotate(45deg);}
.cat-toggle:hover::after{border-color:var(--accent);}
.cat-tree .content-box__sub-cats{list-style:none;padding-left:12px;border-left:1px solid var(--line-2);margin:2px 0 6px;display:none;}
.cat-tree .content-box__sub-cats.is-open{display:block;}

/* admin-only inline category reordering (sidebar tree + top nav) */
.content-box__link.is-draggable{cursor:grab;}
.content-box__link.is-draggable::before{content:"⠿";display:inline-block;margin-right:6px;color:var(--ink-3);}
.catnav .item.is-draggable{cursor:grab;}
[data-cat-id].is-dragging{opacity:.35;}
.filter-panel .filter__box{margin-bottom:10px;}
.filter-panel select{width:100%;height:40px;border:1px solid var(--input);border-radius:6px;padding:0 12px;font:400 13px var(--ff);background:#fff;color:#000;cursor:pointer;}
.filter-panel .filter__btn{border:0;padding:0;background:none;}
.filter-panel .dropdown__action{font:600 12px var(--ff);color:#000;margin-bottom:8px;}
.filter__price{display:flex;gap:10px;margin-bottom:8px;}
.filter__col{flex:1;}
.filter__col label{display:block;font:500 11px var(--ff);color:var(--ink-2);margin-bottom:4px;}
.filter__col input{width:100%;height:38px;border:1px solid var(--input);border-radius:6px;padding:0 10px;font:400 13px var(--ff);}
.filter-panel .range-slider{display:none;}
.range-slider-submit{display:inline-block;margin-top:6px;padding:7px 14px;background:var(--chrome);color:#fff;border-radius:6px;font:600 11px var(--ff);cursor:pointer;}
.filter-panel .filter__actions{display:flex;gap:10px;align-items:center;margin-top:12px;}
.filter-panel .filter__actions button{flex:1;height:40px;background:var(--chrome);color:#fff;border:0;border-radius:6px;font:600 12px var(--ff);cursor:pointer;}
.filter-panel .filter__actions a{font:500 12px var(--ff);color:var(--ink-2);}
.clear-filters{display:inline-block;margin-top:8px;font:500 11px var(--ff);color:var(--accent);}
.results-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px;font:500 13px var(--ff);color:var(--ink-2);}
.catalog-grid .pagination{display:flex;list-style:none;gap:6px;padding:24px 0;margin:0;justify-content:center;flex-wrap:wrap;}
.catalog-grid .pagination .page-link{display:flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;border:1px solid var(--input);border-radius:6px;font:500 13px var(--ff);color:#000;text-decoration:none;}
.catalog-grid .pagination .active .page-link{background:var(--chrome);color:#fff;border-color:var(--chrome);}
.catalog-grid .pagination .disabled .page-link{color:#bbb;}
@media(max-width:900px){.catalog-grid{grid-template-columns:1fr;}}

/* ===== PRODUCT DETAIL ===== */
.pd-crumb{padding:18px 32px 6px;font:400 12px var(--ff);color:var(--ink-2);}
.pd-crumb a:hover{color:var(--accent);}
/* align-items:start — the grid used to stretch the gallery to the height of
   the text column, and the main image, a flex:1 box centring its picture,
   grew with it: on a product with long copy the photo sat half a screen down
   in an empty frame. Now the frame keeps its own square shape at the top and
   the gallery stays in view while the copy scrolls past (desktop only). */
.pd-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;padding:16px 32px 28px;align-items:start;}
.gallery{display:flex;gap:14px;position:sticky;top:16px;}
.gallery .thumbs{display:flex;flex-direction:column;gap:10px;}
.gallery .thumb{width:64px;height:64px;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:#fff;padding:0;cursor:pointer;}
.gallery .thumb.is-active{border:2px solid var(--chrome);}
.gallery .thumb img{width:100%;height:100%;object-fit:contain;}
.gallery .main-img{flex:1;background:#fff;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;max-height:560px;}
.gallery .main-img img{width:100%;height:100%;object-fit:contain;padding:20px;}
.brand-chips{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.bchip{font:600 10px var(--ff);letter-spacing:.06em;padding:4px 8px;border-radius:4px;text-transform:uppercase;}
.bchip--dark{background:var(--chrome);color:#fff;}
.bchip--grey{background:var(--panel);color:#444;}
.bchip--accent{background:var(--accent);color:#fff;}
.pd-title{font:700 26px/1.2 var(--ff);letter-spacing:-.01em;color:#000;margin:0;}
.pd-code{font:400 13px var(--mono);color:var(--ink-3);margin:6px 0 16px;}
.pd-desc{font:400 14px/1.55 var(--ff);color:#555;margin:16px 0;}
.pd-desc h1,.pd-desc h2,.pd-desc h3{font-size:15px;font-weight:700;margin:12px 0 6px;color:#000;}
.pd-desc p{margin:0 0 10px;}
.pd-desc ul{padding-left:18px;margin:8px 0;}
.pd-desc table{width:100%;border-collapse:collapse;font-size:13px;}
.pd-desc td,.pd-desc th{border-bottom:1px solid var(--line-3);padding:6px 8px;text-align:left;}
.buybox{border:1px solid var(--line-2);border-radius:10px;padding:18px;}
.buybox .price{font:700 30px var(--ff);color:#000;font-variant-numeric:tabular-nums;}
.buybox .vat{font:400 12px var(--ff);color:var(--ink-4);margin:2px 0 14px;}
.buybox .buy-row{display:flex;gap:10px;align-items:center;}
.buybox .stepper{display:flex;align-items:center;border:1px solid var(--input);border-radius:8px;height:46px;overflow:hidden;flex:none;}
.buybox .stepper button{width:36px;height:100%;border:0;background:none;font-size:18px;cursor:pointer;color:var(--ink-2);}
.buybox .stepper input{width:44px;height:100%;border:0;text-align:center;font:500 15px var(--ff);-moz-appearance:textfield;outline:none;}
.buybox .stepper input::-webkit-outer-spin-button,.buybox .stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.buybox .add{flex:1;height:46px;background:var(--chrome);color:#fff;border:0;border-radius:8px;font:600 14px var(--ff);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
.buybox .add:hover{filter:brightness(1.1);}
.buybox .login-note{font:500 13px var(--ff);color:var(--low);}
.buybox .nostock{font:500 13px var(--ff);color:var(--accent);}
.dlbtn{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 16px;border:1.5px solid var(--chrome);color:var(--chrome);border-radius:8px;font:600 12px var(--ff);}
/* Every downloadable document for one order, wrapping on narrow screens. */
.doc-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 4px;}
.doc-row .dlbtn{margin-top:0;}
.dlbtn__meta{font-weight:400;color:var(--ink-3);}
.pd-section{padding:0 32px 28px;}
.pd-section h2{font:700 18px var(--ff);margin:0 0 12px;color:#000;}
.dl-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-3);font:400 13px var(--ff);}
.dl-row .dlink{color:var(--accent);font-weight:600;white-space:nowrap;}
@media(max-width:900px){.pd-grid{grid-template-columns:1fr;}.gallery{position:static;}}

/* ===== CART ===== */
.cart-grid{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start;}
.cart-head,.cart-line{display:grid;grid-template-columns:72px 1fr 130px 110px 110px 32px;gap:14px;align-items:center;}
.cart-head{padding:10px 0;border-bottom:1px solid var(--line);font:600 11px var(--ff);letter-spacing:.04em;color:var(--ink-2);}
.cart-head .r{text-align:right;}
.cart-line{padding:16px 0;border-bottom:1px solid var(--line-3);}
.cart-line .imgbox{width:72px;height:60px;}
.cart-line .nm{font:600 14px var(--ff);color:#000;}
.cart-line .ean{font:400 11px var(--mono);color:var(--ink-3);margin:3px 0 4px;}
.cart-line .stk{font:500 11px var(--ff);display:flex;align-items:center;gap:6px;}
.cart-line .stk .dot{width:8px;height:8px;border-radius:50%;flex:none;}
.stk--green{color:var(--stock);}.stk--green .dot{background:var(--stock);}
.stk--yellow{color:var(--low);}.stk--yellow .dot{background:var(--low);}
.stk--red{color:var(--accent);}.stk--red .dot{background:var(--accent);}
.cart-line .unit{font:500 14px var(--ff);color:#000;font-variant-numeric:tabular-nums;}
.cart-line .ltot{text-align:right;font:700 15px var(--ff);color:#000;font-variant-numeric:tabular-nums;}
.cart-line .rm{background:none;border:0;color:#bbb;cursor:pointer;font-size:18px;line-height:1;}
.cart-line .rm:hover{color:var(--accent);}
.cstep{display:flex;align-items:center;border:1px solid var(--input);border-radius:8px;height:40px;width:110px;overflow:hidden;}
.cstep button{width:32px;height:100%;border:0;background:none;font-size:16px;cursor:pointer;color:var(--ink-2);}
.cstep input{width:46px;height:100%;border:0;text-align:center;font:500 14px var(--ff);-moz-appearance:textfield;outline:none;}
.cstep input::-webkit-outer-spin-button,.cstep input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.cart-msg{margin-top:18px;}
.cart-msg label{font:600 12px var(--ff);color:#000;display:block;margin-bottom:6px;}
.cart-msg textarea{width:100%;min-height:80px;border:1px solid var(--input);border-radius:8px;padding:10px 12px;font:400 13px var(--ff);resize:vertical;outline:none;}
.cart-links-row{display:flex;gap:20px;margin-top:14px;flex-wrap:wrap;}
.cart-links-row a{font:500 13px var(--ff);color:var(--chrome);}
.summary{border:1px solid var(--line-2);border-radius:10px;padding:20px;}
.summary h3{font:700 15px var(--ff);color:#000;margin:0 0 14px;}
.summary .row{display:flex;justify-content:space-between;font:400 13px var(--ff);color:#444;padding:5px 0;}
.summary .row--vat{border-bottom:1px solid var(--line-3);margin-bottom:8px;}
.summary .total{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0 16px;}
.summary .total .l{font:700 15px var(--ff);}
.summary .total .v{font:700 22px var(--ff);font-variant-numeric:tabular-nums;}
.summary .co{height:48px;}
.credit-warn{margin-top:12px;background:#fdeceb;border:1px solid #f5c2be;color:#a5271f;border-radius:8px;padding:10px 12px;font:500 12px/1.4 var(--ff);}
.cart-empty{padding:40px 0;color:var(--ink-2);font:400 14px var(--ff);}
@media(max-width:900px){.cart-grid{grid-template-columns:1fr;}}
@media(max-width:600px){.cart-head{display:none;}.cart-line{grid-template-columns:56px 1fr;gap:8px 12px;}.cart-line .cstep,.cart-line .unit,.cart-line .ltot{grid-column:2;}.cart-line .rm{grid-column:2;justify-self:start;}}

/* ===== CONFIRM / SUCCESS ===== */
.confirm{padding:60px 32px 80px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.confirm .check{width:64px;height:64px;border-radius:50%;background:var(--stock);display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;margin-bottom:20px;}
.confirm h1{font:700 28px var(--ff);letter-spacing:-.01em;color:#000;margin:0;}
.confirm .sub{font:400 14px/1.6 var(--ff);color:var(--ink-2);margin:12px 0 0;max-width:480px;text-wrap:pretty;}
.confirm .cbtns{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;justify-content:center;}

/* ===== ACCOUNT (orders / invoices) ===== */
.acct-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.acct-tabs{display:flex;gap:8px;}
.acct-tabs a{padding:9px 16px;border-radius:6px;font:600 13px var(--ff);color:var(--chrome);border:1px solid var(--line-2);background:#fff;}
.acct-tabs a.is-active{background:var(--chrome);color:#fff;border-color:var(--chrome);}
.acct-table{border:1px solid var(--line-2);border-radius:8px;overflow:hidden;margin-top:16px;}
.acct-table__head,.acct-table__row{display:grid;grid-template-columns:130px 1fr 70px 150px 150px;gap:12px;align-items:center;padding:12px 16px;}
.acct-table__head{background:var(--panel);font:600 11px var(--ff);letter-spacing:.04em;color:var(--ink-2);}
.acct-table__row{border-top:1px solid var(--line-3);font:400 13px var(--ff);}
.acct-table__row .num{font-family:var(--mono);font-weight:500;}
.acct-table__row .tot{font-weight:700;font-variant-numeric:tabular-nums;}
.acct-table__row .doc{color:var(--accent);font-weight:600;}
/* Admin view of every company's invoices: one extra Company column. */
.acct-table--allco .acct-table__head,.acct-table--allco .acct-table__row{grid-template-columns:110px minmax(160px,1.4fr) 92px 92px 130px 110px;}
.acct-table--allco .co{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:860px){
  .acct-table--allco .acct-table__head{display:none;}
  .acct-table--allco .acct-table__row{grid-template-columns:1fr auto;row-gap:4px;}
  .acct-table--allco .acct-table__row .co{grid-column:1/-1;order:-1;font-size:12px;color:var(--ink-2);}
}
.acct-empty{padding:40px 16px;text-align:center;color:var(--ink-2);font:400 14px var(--ff);}
.acct-search{margin-top:22px;background:var(--panel);border-radius:10px;padding:20px;}
.acct-search .t{font:700 15px var(--ff);color:#000;}
.acct-search .s{font:400 13px var(--ff);color:var(--ink-2);margin:4px 0 12px;}
.acct-search input{width:100%;max-width:420px;height:44px;border:1px solid var(--input);border-radius:8px;padding:0 14px;font:400 14px var(--ff);outline:none;}
.acct-pager{display:flex;gap:10px;margin-top:16px;}
.acct-pager a{padding:9px 16px;border:1px solid var(--input);border-radius:6px;font:600 12px var(--ff);color:#000;}
@media(max-width:760px){.acct-table__head{display:none;}.acct-table__row{grid-template-columns:1fr 1fr;}}

/* ============ Catalog comparison table (Catalog Redesign) ============ */
.results-head{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.view-toggle{display:flex;gap:2px;border:1px solid var(--input);border-radius:7px;overflow:hidden;}
.view-toggle a{padding:8px 14px;font:600 12px var(--ff);color:#555;background:var(--surface);text-decoration:none;}
.view-toggle a.is-active{background:var(--chrome);color:#fff;}

.cat-table-wrap{overflow-x:auto;margin-top:6px;}
/* table-layout:fixed only has column widths from .ct-name/.ct-stock/.ct-price
   to work with — on narrow viewports it was proportionally shrinking ALL
   columns (including the "fixed" px ones) to fit, instead of scrolling,
   which wrapped/overlapped the product name or collapsed it to 0 width when
   several spec columns competed for the same squeeze. A min-width floor
   forces the wrapper's horizontal scroll to kick in instead. */
.cat-table{width:100%;min-width:860px;border-collapse:collapse;font:500 13px var(--ff);table-layout:fixed;}
.cat-table thead th{background:var(--chrome);color:#fff;font:600 11px var(--ff);text-align:left;padding:11px 12px;white-space:nowrap;position:sticky;top:0;}
.cat-table thead th:first-child{border-radius:8px 0 0 0;}
.cat-table thead th:last-child{border-radius:0 8px 0 0;text-align:right;}
.cat-table thead th a{color:#fff;text-decoration:none;display:inline-flex;gap:5px;align-items:center;}
.cat-table thead th a:hover{color:#fff;filter:none;text-decoration:underline;}
.ct-ar{opacity:.55;font-size:10px;}
.cat-table tbody td{padding:10px 12px;border-bottom:1px solid var(--line-3);vertical-align:middle;white-space:nowrap;}
.cat-table tbody tr:nth-child(odd) td{background:#f8f7f5;}
.cat-table tbody tr:hover td{background:#f1efec;}
.ct-check{width:34px;text-align:center;}
.ct-name{width:26%;}
.ct-stock{width:120px;}
.ct-price{width:120px;}
.cmp-check{width:15px;height:15px;accent-color:var(--chrome);cursor:pointer;}
.ct-prod{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0;}
.ct-thumb{width:42px;height:34px;flex:none;background:#fff;border:1px solid var(--line-3);border-radius:5px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.ct-thumb img{width:100%;height:100%;object-fit:contain;}
.ct-name-text{min-width:0;}
.ct-title{display:block;font-weight:600;color:var(--chrome);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Search / all-products views have no spec columns, so let the product name
   take the free width and wrap instead of truncating. */
.cat-table--nospec .ct-name{width:auto;}
.cat-table--nospec .ct-title{white-space:normal;overflow:visible;text-overflow:clip;}
.ct-code{display:block;font:400 10px var(--mono);color:#9a9a9a;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ct-spec{font-variant-numeric:tabular-nums;color:#333;overflow:hidden;}
.ct-spec-val{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;}
.stock{font-weight:600;}
.stock--in{color:var(--stock);}
.stock--low{color:var(--low);}
.stock--out{color:var(--ink-3);font-weight:500;}
.ct-price{text-align:right;}
.ct-price-cell{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.ct-eur{font:700 15px var(--ff);white-space:nowrap;}
.ct-eur--login{font:600 12px var(--ff);color:var(--ink-2);white-space:nowrap;}
.ct-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;}
.ct-qty-mini{width:38px;height:30px;border:1px solid var(--line-2);border-radius:6px;text-align:center;font:600 12px var(--ff);}
.ct-add,.ct-more{width:30px;height:30px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;background:var(--chrome);color:#fff;text-decoration:none;font-size:17px;line-height:1;}
.ct-add:hover,.ct-more:hover{filter:brightness(1.15);color:#fff;}

.cmp-bar{position:sticky;bottom:14px;margin:18px 0 6px;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--chrome);border-radius:9px;color:#fff;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);}
/* .cmp-bar{display:flex} above unconditionally overrode the browser's default
   [hidden]{display:none}, so the bar (meant to show only once a product is
   selected — see products.blade.php's refresh(), which sets bar.hidden) was
   permanently visible and, being sticky-bottom on a list taller than the
   viewport, covered the top of the list on every page load. This wins on
   specificity and restores the intended hide-when-empty behavior. */
.cmp-bar[hidden]{display:none;}
.cmp-bar__n{font:500 13px var(--ff);}
.cmp-bar__actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.cmp-bar__actions button{border:0;cursor:pointer;font:600 12px var(--ff);}
#cmp-clear{background:transparent;color:var(--on-dark-1);}
#cmp-go{background:#fff;color:var(--chrome);padding:10px 20px;border-radius:6px;}
#cmp-move-target{height:34px;border-radius:6px;border:1px solid var(--line-2);padding:0 8px;font:500 12px var(--ff);max-width:220px;}
#cmp-move{background:var(--accent);color:#fff;padding:10px 16px;border-radius:6px;}

/* admin-only inline category management (rename / add subgroup / add main group) */
.cat-row{display:flex;align-items:center;gap:2px;}
.cat-row .content-box__link{flex:1;min-width:0;}
.cat-actions{display:flex;gap:2px;flex:none;}
.cat-act{border:1px solid var(--line-2);background:#fff;color:var(--ink-2);width:20px;height:20px;line-height:1;border-radius:4px;cursor:pointer;font-size:12px;padding:0;}
.cat-act:hover{color:var(--accent);border-color:var(--accent);}
.cat-add-root{border:1px solid var(--line-2);background:#fff;color:var(--ink-2);border-radius:6px;padding:5px 10px;font:600 11px var(--ff);cursor:pointer;}
.cat-add-root:hover{color:var(--accent);border-color:var(--accent);}
.cat-snackbar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:999;display:flex;align-items:center;gap:16px;padding:12px 18px;background:var(--chrome);color:#fff;border-radius:8px;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);font:500 13px var(--ff);}
.cat-snackbar button{border:0;background:#fff;color:var(--chrome);font:600 12px var(--ff);padding:7px 14px;border-radius:6px;cursor:pointer;}
.cat-move-panel{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin:10px 0;padding:10px;background:#f8f7f5;border:1px solid var(--line-2);border-radius:8px;}
.cat-move-panel label{display:flex;flex-direction:column;gap:3px;font:600 11px var(--ff);color:var(--ink-2);}
.cat-move-panel select{height:32px;border-radius:6px;border:1px solid var(--line-2);padding:0 6px;font:500 12px var(--ff);max-width:180px;}
.cat-move-panel button{height:32px;border:0;border-radius:6px;padding:0 12px;font:600 12px var(--ff);cursor:pointer;}
#cat-move-go{background:var(--accent);color:#fff;}
#cat-move-cancel{background:transparent;color:var(--ink-2);}

/* ---- horizontal filter chips (catalog table) ---- */
.fchip-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:2px 0 12px;}
.fchip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--input);border-radius:7px;padding:7px 10px 7px 12px;font:500 12px var(--ff);cursor:pointer;}
.fchip.is-on{border-color:var(--chrome);box-shadow:inset 0 0 0 1px var(--chrome);}
.fchip-lbl{color:var(--ink-3);}
.fchip.is-on .fchip-lbl{color:var(--chrome);font-weight:600;}
.fchip-sel{border:0;background:transparent;outline:none;font:600 12px var(--ff);color:var(--ink);cursor:pointer;max-width:130px;}
.fchip-spacer{flex:1;}
.fchip-count{font:600 13px var(--ff);color:var(--ink);white-space:nowrap;}
.fpills{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;}
.fpill{display:inline-flex;align-items:center;gap:7px;background:var(--chrome);color:#fff;border-radius:16px;padding:6px 12px;font:500 11px var(--ff);text-decoration:none;}
.fpill span{opacity:.7;}
.fpill:hover{color:#fff;filter:brightness(1.15);}
.fpill-clear{font:500 11px var(--ff);color:var(--ink-3);text-decoration:none;padding:6px 4px;}
.fpill-clear:hover{color:var(--accent);}

/* ==================== Info pages (About / Contact / Delivery) ==================== */
.info-wrap{max-width:1000px;}
.info-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:26px;}
.info-tabs a{padding:12px 18px;font:600 13px var(--ff);color:#5a5f65;text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;}
.info-tabs a:hover{color:var(--ink);}
.info-tabs a.is-active{color:var(--ink);border-bottom-color:var(--accent);}

.info-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center;padding:8px 0 30px;}
.info-hero h1{font:800 30px var(--ff);letter-spacing:-.02em;line-height:1.12;margin:0 0 12px;}
.info-hero p{font:400 15px var(--ff);color:#5a5f65;line-height:1.6;margin:0;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;}
.stat__n{font:800 20px var(--ff);color:var(--chrome);letter-spacing:-.01em;}
.stat__l{font:500 12px var(--ff);color:#767676;margin-top:3px;}

.info-section{padding:26px 0;border-top:1px solid var(--line);}
.info-section h2{font:700 22px var(--ff);letter-spacing:-.01em;margin:0 0 18px;}
.info-sub{font:700 16px var(--ff);margin:28px 0 14px;}

.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.offer-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s;}
.offer-card:hover{border-color:var(--chrome);box-shadow:0 10px 24px -16px rgba(0,0,0,.4);color:inherit;}
.offer-card__h{font:700 16px var(--ff);color:var(--chrome);margin-bottom:8px;}
.offer-card p{font:400 13px var(--ff);color:#5a5f65;line-height:1.55;margin:0 0 12px;}
.offer-card__go{font:600 12px var(--ff);color:var(--accent);}

.value-grid,.cards-3{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.cards-3{grid-template-columns:repeat(3,1fr);}
.value-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;}
.value-card__h{font:700 14px var(--ff);margin-bottom:7px;}
.value-card p{font:400 12.5px var(--ff);color:#5a5f65;line-height:1.5;margin:0;}

.cta-band{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--chrome);color:#fff;border-radius:11px;padding:22px 26px;margin-top:26px;font:600 16px var(--ff);}
.cta-band__btn{background:#fff;color:var(--chrome);border-radius:7px;padding:11px 20px;font:600 13px var(--ff);text-decoration:none;white-space:nowrap;}
.cta-band__btn:hover{color:var(--chrome);filter:brightness(.94);}

/* Contact */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:26px;align-items:start;}
.contact-cards{display:flex;flex-direction:column;gap:12px;}
.contact-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:15px 16px;}
.contact-card__l{font:600 11px var(--ff);text-transform:uppercase;letter-spacing:.05em;color:#8a8a8a;}
.contact-card__v{display:block;font:700 16px var(--ff);color:var(--chrome);text-decoration:none;margin:3px 0 2px;}
a.contact-card__v:hover{color:var(--accent);}
.contact-card__s{font:400 12px var(--ff);color:#767676;}
.map-holder{margin-top:12px;height:180px;border:1px dashed var(--input);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#aaa;font:500 13px var(--ff);background:var(--panel);}

.contact-form{display:flex;flex-direction:column;gap:14px;}
.form-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.contact-form label{font:600 12px var(--ff);color:#444;display:flex;flex-direction:column;gap:6px;}
.contact-form input,.contact-form textarea{border:1.5px solid var(--input);border-radius:7px;padding:10px 12px;font:400 14px var(--ff);color:#222;outline:none;}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--chrome);}
.form-full{width:100%;}
.form-check{flex-direction:row;align-items:center;gap:9px;font-weight:500;color:#333;}
.form-check input{width:16px;height:16px;accent-color:var(--chrome);}
.form-submit{align-self:flex-start;background:var(--chrome);color:#fff;border:0;border-radius:7px;padding:13px 26px;font:600 13px var(--ff);cursor:pointer;}
.form-submit:hover{filter:brightness(1.12);}
.form-note{background:var(--chip);border-radius:7px;padding:10px 12px;font:500 12px var(--ff);color:#444;}
.form-alert{border-radius:7px;padding:10px 12px;font:500 13px var(--ff);}
.form-alert--err{background:#fdecec;color:#a11;border:1px solid #f4c3c3;}

/* Delivery */
.zone-wrap{margin-bottom:8px;}
.zone-table{width:100%;border-collapse:collapse;font:500 13.5px var(--ff);}
.zone-table th{background:var(--chrome);color:#fff;text-align:left;padding:11px 14px;font:600 12px var(--ff);}
.zone-table th:first-child{border-radius:8px 0 0 0;}
.zone-table th:last-child{border-radius:0 8px 0 0;}
.zone-table td{padding:12px 14px;border-bottom:1px solid var(--line-3);}
.zone-table tbody tr:nth-child(odd) td{background:#f8f7f5;}
.zone-note{font:400 12px var(--ff);color:#8a8a8a;margin:10px 0 0;}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.step{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;}
.step__n{width:26px;height:26px;border-radius:50%;background:var(--chrome);color:#fff;display:flex;align-items:center;justify-content:center;font:700 13px var(--ff);margin-bottom:9px;}
.step__h{font:700 14px var(--ff);margin-bottom:5px;}
.step p{font:400 12.5px var(--ff);color:#5a5f65;line-height:1.5;margin:0;}

@media(max-width:820px){
  .info-hero,.contact-grid{grid-template-columns:1fr;}
  .offer-grid,.value-grid,.cards-3,.steps{grid-template-columns:1fr 1fr;}
  .form-row2{grid-template-columns:1fr;}
}
@media(max-width:520px){
  .offer-grid,.value-grid,.cards-3,.steps,.stat-grid{grid-template-columns:1fr;}
}

/* ---- legal pages (Terms / Privacy) ---- */
.legal-page{max-width:760px;padding:14px 0 10px;}
.legal-page h1{font:800 28px var(--ff);letter-spacing:-.02em;margin:6px 0 20px;}
.legal-page h2{font:700 18px var(--ff);margin:26px 0 10px;}
.legal-page h3{font:700 15px var(--ff);margin:20px 0 8px;}
.legal-page p,.legal-page li{font:400 14.5px var(--ff);color:#3a3f45;line-height:1.65;}
.legal-page ul,.legal-page ol{padding-left:22px;margin:10px 0;}
.legal-page li{margin:4px 0;}
.legal-page a{color:var(--accent);}
.legal-empty{color:#8a8a8a;font-style:italic;}

/* legal-page tables (privacy processing-purposes table) */
.legal-page table{width:100%;border-collapse:collapse;margin:14px 0 20px;font:400 13.5px var(--ff);}
.legal-page table td{padding:9px 12px;border:1px solid var(--line-2);vertical-align:top;}
.legal-page table tr:first-child td{background:var(--chrome);color:#fff;font-weight:600;}
.legal-page table tr:nth-child(even):not(:first-child) td{background:#f8f7f5;}

/* Fix: .shop a{color:inherit} (base reset) has higher CSS specificity
   (class+type) than the single-class component rules above that set an
   explicit anchor color, silently overriding them (e.g. white text on a
   white button background). Restate the intended colors with matching
   specificity so the component rules actually win. */
a.btn--dark{color:#fff;}
a.btn--outline{color:var(--chrome);}
a.cta-band__btn{color:var(--chrome);}
a.ct-add,a.ct-more{color:#fff;}
a.fpill{color:#fff;}
a.fpill-clear{color:var(--ink-3);}
a.addcart{color:#fff;}
a.contact-card__v{color:var(--chrome);}

/* ---- order/invoice detail (cart_history_element) + order product search ---- */
.acct-subhead{font:700 17px var(--ff);margin:28px 0 4px;}
.acct-summary{display:flex;flex-wrap:wrap;gap:22px;align-items:center;background:var(--panel);border:1px solid var(--line-2);border-radius:10px;padding:18px 20px;margin-top:16px;}
.acct-summary > div{display:flex;flex-direction:column;gap:3px;}
.acct-summary span{font:600 11px var(--ff);letter-spacing:.04em;color:var(--ink-2);text-transform:uppercase;}
.acct-summary strong{font:600 14px var(--ff);color:#000;}
.acct-summary strong.tot{font:700 15px var(--ff);}
.acct-summary__pdf{margin-left:auto;background:var(--chrome);color:#fff;border-radius:6px;padding:9px 16px;font:600 12px var(--ff);text-decoration:none;white-space:nowrap;}
.acct-table--products .acct-table__head,.acct-table--products .acct-table__row{grid-template-columns:2.2fr .9fr .6fr .9fr .9fr;}
.acct-table--search .acct-table__head,.acct-table--search .acct-table__row{grid-template-columns:2fr 1fr .8fr .8fr;}
/* Hub order history: number, date, delivery, total, status. */
.acct-table--orders .acct-table__head,.acct-table--orders .acct-table__row{grid-template-columns:120px 100px 100px 140px 1fr;}
/* Staff view adds a Company column. Three classes so it beats the rule above
   regardless of source order — the generic --allco rule sits earlier in the file. */
.acct-table--orders.acct-table--allco .acct-table__head,
.acct-table--orders.acct-table--allco .acct-table__row{grid-template-columns:110px minmax(150px,1.3fr) 92px 92px 130px 1fr;}
.acct-table--inv.acct-table--allco .acct-table__head,
.acct-table--inv.acct-table--allco .acct-table__row{grid-template-columns:110px minmax(160px,1.4fr) 92px 92px 130px 110px;}

.acct-flash{border-radius:8px;padding:12px 16px;font:500 13px var(--ff);margin-top:16px;}
.acct-flash--ok{background:rgba(29,122,60,.08);color:var(--stock);}
.acct-flash--err{background:rgba(214,31,39,.08);color:var(--accent);}
.acct-panel{max-width:420px;margin-top:20px;border:1px solid var(--line-2);border-radius:8px;padding:20px;background:#fff;}
.acct-panel__title{font:700 16px var(--ff);margin:0 0 14px;}

/* invoices (IncentaHub-sourced: paid state, due date, line items) */
.acct-count{font:500 13px var(--ff);color:var(--ink-2);margin:14px 0 0;}
.acct-table--inv .acct-table__head,.acct-table--inv .acct-table__row{grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;}
.acct-table--invlines .acct-table__head,.acct-table--invlines .acct-table__row{grid-template-columns:3fr 1fr 1fr 1fr;}
.inv-status{display:inline-block;padding:3px 10px;border-radius:19px;font:600 11px var(--ff);white-space:nowrap;}
.inv-status--paid{background:rgba(29,122,60,.1);color:var(--stock);}
.inv-status--unpaid{background:var(--chip);color:var(--ink-2);}
.inv-status--overdue{background:rgba(214,31,39,.1);color:var(--accent);}
.inv-kind{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:19px;background:var(--chip);font:600 10px var(--ff);color:var(--ink-2);}
.inv-code{display:block;font:400 10px var(--mono);color:#9a9a9a;margin-top:2px;}
.inv-meta{display:flex;gap:28px;flex-wrap:wrap;margin:18px 0;padding:14px 16px;border:1px solid var(--line-2);border-radius:8px;background:#fff;}
.inv-meta__item{display:flex;flex-direction:column;gap:3px;}
.inv-meta__label{font:600 11px var(--ff);color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;}
.inv-totals{margin-top:16px;margin-left:auto;max-width:280px;display:flex;flex-direction:column;gap:6px;}
.inv-totals div{display:flex;justify-content:space-between;gap:16px;font:500 13px var(--ff);color:var(--ink-2);}
.inv-totals__grand{padding-top:8px;border-top:1px solid var(--line-2);font-size:15px!important;color:#000!important;}
.acct-pager__pos{font:500 12px var(--ff);color:var(--ink-3);margin:0 12px;}
.acct-back{margin-top:20px;font:500 13px var(--ff);}
@media(max-width:768px){
  .acct-table--inv .acct-table__head,.acct-table--invlines .acct-table__head{display:none;}
  .acct-table--inv .acct-table__row,.acct-table--invlines .acct-table__row{grid-template-columns:1fr 1fr;gap:6px;}
  .inv-meta{gap:16px;}
}
.ord-status{display:inline-flex;align-items:center;gap:5px;font:600 11px var(--ff);border-radius:6px;padding:3px 8px;text-transform:none;white-space:nowrap;}
.ord-status__ico{width:13px;height:13px;flex:0 0 13px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.ord-status--pending{color:var(--low);background:rgba(185,138,0,.09);}
.ord-status--cancelled{color:var(--ink-3);background:var(--chip);}
.ord-status--payment_declined{color:var(--accent);background:rgba(214,31,39,.08);}
.ord-status--shipped,.ord-status--fulfilled{color:var(--stock);background:rgba(29,122,60,.08);}
.ord-status--ready,.ord-status--packed,.ord-status--in_packing,.ord-status--partially_fulfilled{color:#3a5a8a;background:rgba(58,90,138,.08);}
/* IncentaHub's own vocabulary — the only four values it returns (measured over
   5573 real orders): draft, confirmed, delivered, cancelled. The Erply names
   above are kept for historical markup but are no longer produced. */
.ord-status--draft{color:var(--low);background:rgba(185,138,0,.09);}
.ord-status--confirmed{color:#3a5a8a;background:rgba(58,90,138,.08);}
.ord-status--delivered{color:var(--stock);background:rgba(29,122,60,.08);}

/* Order lifecycle strip on the order detail page. */
.ord-flow{display:flex;align-items:flex-start;gap:0;margin:18px 0 6px;flex-wrap:wrap;}
.ord-flow__step{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:104px;position:relative;text-align:center;}
.ord-flow__dot{width:14px;height:14px;border-radius:50%;background:var(--line-2);border:2px solid var(--line-2);}
.ord-flow__step.is-done .ord-flow__dot{background:var(--stock);border-color:var(--stock);}
.ord-flow__step.is-current .ord-flow__dot{background:#fff;border-color:var(--stock);box-shadow:0 0 0 3px rgba(29,122,60,.15);}
.ord-flow__lbl{font:600 12px var(--ff);color:var(--ink-3);}
.ord-flow__step.is-done .ord-flow__lbl,.ord-flow__step.is-current .ord-flow__lbl{color:var(--ink);}
.ord-flow__date{font:400 11px var(--ff);color:var(--ink-3);}
.ord-flow__bar{flex:1;min-width:24px;height:2px;background:var(--line-2);margin-top:6px;}
.ord-flow__bar.is-done{background:var(--stock);}
.ord-flow--cancelled .ord-flow__dot{background:var(--chip);border-color:var(--line-2);}
@media (max-width:560px){
  .ord-flow{flex-direction:column;align-items:flex-start;gap:10px;}
  .ord-flow__step{flex-direction:row;min-width:0;gap:10px;text-align:left;}
  .ord-flow__bar{display:none;}
}
/* Arrival estimate under the dispatch date — deliberately a lead time, not a
   date, because the hub gives us no expected-delivery field. */
.ord-eta{display:block;font:400 11px var(--ff);color:var(--ink-3);}
/* Per-line delivery date, shown only when it differs from the order's. */
.line-eta{display:block;font:500 11px var(--ff);color:#3a5a8a;margin-top:2px;}
.ord-cancel{display:block;margin-top:4px;border:0;background:none;color:var(--accent);font:600 11px var(--ff);cursor:pointer;padding:0;text-decoration:underline;}
.acct-tbc{color:var(--accent);font:600 11px var(--ff);}
a.acct-summary__pdf{color:#fff;}

/* ==================== Login / Register ==================== */
.auth-wrap{max-width:1000px;}
.auth-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:36px;align-items:start;}
.auth-col{background:var(--surface);}
.auth-h1{font:800 24px var(--ff);letter-spacing:-.01em;margin:0 0 4px;}
.auth-sub{font:400 13px var(--ff);color:var(--ink-2);margin:0 0 18px;}
.auth-benefits{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px;}
.auth-benefits li{font:500 13px var(--ff);color:var(--ink-2);padding-left:22px;position:relative;}
.auth-benefits li::before{content:"✓";position:absolute;left:0;color:var(--stock);font-weight:700;}
.auth-err{font:500 12px var(--ff);color:var(--accent);margin:-8px 0 2px;}
.auth-help{font:400 12px var(--ff);color:var(--ink-2);line-height:1.6;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);}
.auth-help a{color:var(--ink);font-weight:600;text-decoration:none;white-space:nowrap;}
.auth-help a:hover{text-decoration:underline;}
.auth-pass{display:flex;gap:8px;}
.auth-pass input{flex:1;}
.auth-pass-toggle{border:1.5px solid var(--input);background:#fff;border-radius:7px;padding:0 12px;font:600 11px var(--ff);color:#444;cursor:pointer;white-space:nowrap;}
.auth-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:20px;}
.auth-tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 16px;font:600 13px var(--ff);color:#5a5f65;cursor:pointer;}
.auth-tab:hover{color:var(--ink);}
.auth-tab.is-active{color:var(--ink);border-bottom-color:var(--accent);}
.auth-panel{display:none;}
.auth-panel.is-active{display:block;}
@media(max-width:820px){.auth-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   Mobile redesign (MOBILE.md, 2026-07-26) — P1 scope.
   Desktop layout above is untouched; everything here is gated behind
   @media(max-width:768px) so nothing changes on tablet/desktop.
   ========================================================================== */

/* ---- header: hamburger button (hidden on desktop) ---- */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:4px;width:36px;height:36px;border:0;background:none;cursor:pointer;flex:none;padding:0;}
.hamburger span{display:block;width:20px;height:2px;background:var(--chrome);border-radius:2px;}

/* ---- pagination: desktop numbers vs mobile "load more" ---- */
.pager-mobile{display:none;}
/* ---- product page sticky buy bar: mobile-only ---- */
.sticky-buy-bar{display:none;}
/* ---- catalog row-card: mobile-only replacement for the compare table ---- */
.cat-rowcard-list{display:none;}
/* ---- mobile bottom nav ---- */
.bottomnav{display:none;}
/* ---- filter drawer: desktop keeps the inline chip bar, hide the trigger/backdrop/close ---- */
.filter-drawer-toggle,.filter-drawer-backdrop,.filter-drawer-close{display:none;}

@media(max-width:768px){
  /* utility bar: keep login/logout (no other mobile way to log out), drop
     the phone/email — already repeated in the footer. */
  .utilbar .left{display:none;}
  .utilbar{padding:6px 14px;font-size:11px;}

  /* header: icon-only actions, hamburger visible, search stays full-width */
  .header{padding:10px 14px;gap:10px;flex-wrap:wrap;}
  .hamburger{display:flex;}
  .header .actions{gap:2px;}
  .action-label{display:none;}
  .header .action{padding:8px;}
  .search{order:3;flex:1 1 100%;}

  /* category nav becomes a hamburger-toggled dropdown panel instead of a
     horizontal strip — same links/admin controls, just hidden until opened
     and stacked vertically while open. */
  .catnav{display:none;flex-direction:column;align-items:stretch;padding:6px 14px 14px;box-shadow:0 8px 16px -12px rgba(0,0,0,.25);max-height:70vh;overflow-y:auto;}
  .catnav.is-open{display:flex;}
  .catnav .item{padding:12px 4px;border-bottom:1px solid var(--line-3);}
  .catnav .spacer{display:none;}

  /* sticky mobile buy bar (product page) */
  .sticky-buy-bar{position:sticky;bottom:0;left:0;right:0;display:flex;gap:10px;align-items:center;background:#fff;border-top:1px solid var(--line-2);padding:10px 14px;box-shadow:0 -8px 20px -12px rgba(0,0,0,.15);z-index:30;}
  .sticky-buy-bar .stepper{flex:none;}
  .sticky-buy-bar .add{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:8px;background:var(--accent);color:#fff;border:0;font:700 14px var(--ff);}
  .sticky-buy-bar__price{font:700 14px var(--ff);}

  /* pagination: hide the number grid, show a single "load more" action */
  .pager-desktop{display:none;}
  .pager-mobile{display:block;text-align:center;padding:16px 0 8px;}
  .pager-mobile__count{font:500 12px var(--ff);color:var(--ink-2);margin-bottom:10px;}
  .pager-mobile__more{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;border-radius:8px;background:var(--chrome);color:#fff;font:600 13px var(--ff);text-decoration:none;}

  .sticky-buy-bar{display:flex;}

  /* catalog row-card replaces the compare table on mobile — same data,
     compare checkbox/add-to-cart classes reused so existing JS still works */
  .cat-table-wrap{display:none;}
  .cat-rowcard-list{display:block;background:#fff;border-radius:8px;overflow:hidden;}
  .cat-rowcard{display:flex;gap:12px;padding:14px 12px;border-bottom:1px solid var(--line-3);position:relative;}
  .cat-rowcard.is-out{background:#fbfbfa;}
  .cat-rowcard__check{position:absolute;top:12px;right:10px;}
  .cat-rowcard__check input{width:20px;height:20px;accent-color:var(--chrome);}
  .cat-rowcard__photo{width:76px;height:76px;flex:none;background:#faf9f7;border:1px solid var(--line-3);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .cat-rowcard.is-out .cat-rowcard__photo{opacity:.55;}
  .cat-rowcard__photo img{width:100%;height:100%;object-fit:contain;}
  .cat-rowcard__body{flex:1;min-width:0;padding-right:26px;}
  .cat-rowcard__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:600 14px var(--ff);color:var(--ink);}
  .cat-rowcard__code{font:400 10px var(--mono);color:#9a9a9a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
  .cat-rowcard__chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
  .rc-chip{font:500 10px var(--ff);color:#444;background:var(--chip);border-radius:19px;padding:3px 9px;white-space:nowrap;}
  .cat-rowcard__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;}
  .cat-rowcard__foot .stock{font-size:11px;}
  .cat-rowcard__buy{display:flex;align-items:center;gap:8px;flex:none;}
  .cat-rowcard__price{font:700 16px var(--ff);white-space:nowrap;}
  .cat-rowcard__price--login{font:600 12px var(--ff);color:var(--ink-2);white-space:nowrap;}
  .cat-rowcard__add{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--chrome);color:#fff;border-radius:8px;font:700 20px var(--ff);text-decoration:none;}
  .cat-rowcard__more{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--input);border-radius:8px;color:var(--chrome);font:700 16px var(--ff);text-decoration:none;}

  /* filter drawer: the chip-bar form becomes a bottom sheet, opened by this
     trigger button — same fields/auto-submit as desktop, only the container
     (fixed position + slide transform) changes. */
  .filter-drawer-toggle{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:19px;border:0;background:var(--chrome);color:#fff;font:600 12px var(--ff);margin:10px 0;}
  .fdt-badge{background:#fff;color:var(--chrome);border-radius:10px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font:700 10px var(--ff);padding:0 4px;}
  .filter-drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(17,17,17,.55);z-index:49;}
  .filter-drawer-backdrop.is-open{display:block;}
  .filter-drawer-close{display:block;position:absolute;top:10px;right:14px;width:32px;height:32px;border:0;background:none;font-size:16px;color:var(--ink-2);}
  .fchip-bar{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:80vh;overflow-y:auto;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -12px 30px -12px rgba(0,0,0,.3);z-index:50;flex-direction:column;align-items:stretch;gap:0;padding:20px 16px 24px;transform:translateY(100%);transition:transform .25s;}
  .fchip-bar.is-open{transform:translateY(0);}
  .fchip-bar::before{content:"";display:block;width:38px;height:4px;background:var(--line-2);border-radius:4px;margin:0 auto 14px;}
  .fchip-bar .fchip{width:100%;margin-bottom:10px;}
  .fchip-bar .fchip-sel{width:100%;height:44px;font-size:16px;}
  .fchip-spacer{display:none;}
  .fchip-count{order:99;text-align:center;font:600 13px var(--ff);color:var(--ink-2);margin-top:8px;padding-top:12px;border-top:1px solid var(--line-3);}

  /* bottom nav — 5 items, fixed to the viewport bottom. Hidden whenever the
     product page's sticky buy bar is present (:has — both bars fixed/stuck
     to the bottom at once would stack awkwardly and wastes vertical space);
     body gets bottom padding so the last bit of normal content isn't hidden
     behind the fixed bar (the sticky buy bar already reserves its own space
     via normal flow, so no extra padding needed for that case). */
  body.shop{padding-bottom:62px;}
  body.shop:has(.sticky-buy-bar){padding-bottom:0;}
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;height:62px;background:#fff;border-top:1px solid var(--line-2);z-index:45;padding-bottom:env(safe-area-inset-bottom);}
  body.shop:has(.sticky-buy-bar) .bottomnav{display:none;}
  .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:relative;color:var(--ink-2);font:600 9.5px var(--ff);}
  .bn-item.is-active{color:var(--chrome);}
  .bn-ico{width:19px;height:19px;border:1.5px solid currentColor;}
  .bn-ico--home{border-radius:4px 4px 8px 8px;}
  .bn-ico--catalog{border-radius:4px;}
  .bn-ico--account{border-radius:50%;}
  .bn-ico--cart{border-radius:4px 4px 8px 8px;}
  .bn-ico--quick{border-radius:4px;position:relative;}
  .bn-ico--quick::after{content:"+";position:absolute;top:-7px;right:-7px;width:12px;height:12px;line-height:11px;text-align:center;background:var(--accent);color:#fff;border-radius:50%;font:700 10px var(--ff);}
  .bn-badge{position:absolute;top:2px;right:calc(50% - 20px);background:var(--accent);color:#fff;font:700 9px var(--ff);border-radius:9px;padding:1px 5px;min-width:14px;text-align:center;}
}

/* ==========================================================================
   ACCOUNT AREA v2  —  "Intcenta Account Area.dc.html"
   Sign in · Open a trade account · Application pending · My account overview.
   Uses the tokens defined at the top of this file: the design and the shop
   share one system (#22262B chrome, #D61F27 accent, Archivo + IBM Plex Mono),
   so nothing is redefined here.
   ========================================================================== */

/* ---- shared form atoms (sign-in and the application form) ---- */
.fld-stack{display:flex;flex-direction:column;gap:14px;margin-top:22px;}
.fld{min-width:0;}
.fld__lbl{display:block;font:600 12px var(--ff);color:#444;margin-bottom:6px;}
.fld__row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.fld__row .fld__lbl{margin:0;}
.fld__aside{font:500 12px var(--ff);color:var(--accent);}
.fld__in{width:100%;height:46px;border:1px solid var(--input);border-radius:7px;padding:0 13px;font:400 14.5px var(--ff);outline:none;background:#fff;color:#000;}
.fld__in:focus{border-color:var(--chrome);box-shadow:0 0 0 3px rgba(34,38,43,.08);}
.fld__in:disabled{background:var(--panel);color:var(--ink-3);}
select.fld__in{appearance:none;padding-right:32px;}
.fld__pass{position:relative;}
.fld__pass .fld__in{padding-right:64px;}
.fld__peek{position:absolute;right:6px;top:6px;height:34px;padding:0 10px;border:0;background:var(--panel);border-radius:5px;font:600 11px var(--ff);color:var(--ink-2);cursor:pointer;}
.fld__err{font:500 12px var(--ff);color:var(--accent);margin-top:6px;}
.fld__check{display:flex;align-items:flex-start;gap:9px;font:400 13px/1.5 var(--ff);color:var(--ink-2);cursor:pointer;}
.fld__check input{width:16px;height:16px;flex:none;margin:1px 0 0;accent-color:var(--chrome);}
.btn--sm{padding:9px 15px;font-size:12.5px;}

/* ---- 01 · sign in ---- */
.signin{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;}
.signin__pitch{background:var(--chrome);color:#fff;padding:48px 42px;display:flex;flex-direction:column;justify-content:space-between;}
.signin__eyebrow{font:600 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#ff6b6f;}
.signin__h1{font:800 32px/1.15 var(--ff);letter-spacing:-.025em;margin:16px 0 0;text-wrap:balance;}
.signin__lede{font:400 14.5px/1.7 var(--ff);color:var(--on-dark-1);margin:16px 0 0;max-width:400px;text-wrap:pretty;}
.signin__stats{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;}
.signin__stats li{display:flex;gap:16px;align-items:baseline;font:400 13.5px/1.45 var(--ff);color:var(--on-dark-2);}
.signin__stats span{flex:none;width:62px;font:600 13px var(--mono);color:#ff6b6f;}
.signin__form{padding:48px 44px;display:flex;flex-direction:column;justify-content:center;background:var(--surface);}
.signin__h2{font:800 26px var(--ff);letter-spacing:-.02em;margin:0;color:#000;}
.signin__sub{font:400 13.5px/1.6 var(--ff);color:var(--ink-2);margin:8px 0 0;}
.signin__rule{height:1px;background:var(--line-3);margin:28px 0 22px;}
.signin__cta{border:1px solid var(--line-2);border-radius:11px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;}
.signin__cta-t{font:700 15px var(--ff);color:#000;}
.signin__cta-s{font:400 12.5px/1.6 var(--ff);color:var(--ink-2);margin-top:5px;}
.signin__cta-a{flex:none;font:600 13px var(--ff);color:var(--accent);white-space:nowrap;}
.signin__fine{font:400 12px/1.6 var(--ff);color:var(--ink-3);margin:18px 0 0;}
.signin__fine a{color:var(--accent);}

/* ---- 02 · open a trade account ---- */
.apply{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start;}
.apply__h1{font:800 30px var(--ff);letter-spacing:-.02em;margin:0;color:#000;}
.apply__lede{font:400 14px/1.65 var(--ff);color:var(--ink-2);margin:9px 0 0;max-width:640px;text-wrap:pretty;}
.apply__form{margin-top:6px;}
.apply__step{font:600 11px var(--mono);letter-spacing:.14em;color:var(--ink-3);margin:30px 0 12px;text-transform:uppercase;}
.apply__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.apply__grid--vat{grid-template-columns:100px 1fr 1fr;}
.apply__verify{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:14px 0;}
.apply__captcha{margin-top:24px;}
.apply__consent{margin-top:18px;}
.apply__submit{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px;}
.apply__hint{font:400 12.5px/1.5 var(--ff);color:var(--ink-2);max-width:340px;}
.apply__side{display:flex;flex-direction:column;gap:16px;}
.apply__card{border:1px solid var(--line-2);border-radius:11px;padding:20px;}
.apply__card--tint{background:var(--panel);}
.apply__card p{font:400 12.5px/1.6 var(--ff);color:var(--ink-2);margin:6px 0 0;}
.apply__card-t{font:700 13.5px var(--ff);color:#000;}
.apply__lbl{font:600 11px var(--mono);letter-spacing:.14em;color:var(--ink-3);margin-bottom:14px;text-transform:uppercase;}
.apply__rule{height:1px;background:var(--line-3);margin:18px 0;}
.apply__fine{font:400 12px/1.6 var(--ff);color:var(--ink-2);margin:0;}
.nsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px;}
.nsteps li{display:flex;gap:12px;font:400 12.5px/1.55 var(--ff);color:#3c4046;}
.nsteps span{flex:none;width:22px;height:22px;border-radius:50%;background:var(--chrome);color:#fff;font:700 11px/22px var(--ff);text-align:center;}

/* activity chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{cursor:pointer;}
.chip input{position:absolute;opacity:0;pointer-events:none;}
.chip span{display:inline-block;font:500 12.5px var(--ff);border:1px solid var(--line-2);padding:8px 13px;border-radius:6px;color:#000;background:#fff;}
.chip input:checked + span{background:var(--chrome);border-color:var(--chrome);color:#fff;font-weight:600;}
.chip input:focus-visible + span{box-shadow:0 0 0 3px rgba(34,38,43,.15);}

/* VIES verification result */
.vfy{background:var(--panel);border-radius:8px;padding:14px 16px;margin-bottom:18px;}
.vfy__badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px;}
.vfy__b{font:600 11px var(--ff);padding:4px 9px;border-radius:4px;}
.vfy__b--ok{background:rgba(29,122,60,.1);color:var(--stock);}
.vfy__b--warn{background:#fdf7e9;color:#7a5c12;}
.vfy__when{font:400 11.5px var(--mono);color:var(--ink-3);}
.vfy__co{font:400 12.5px/1.6 var(--ff);color:#3c4046;}
.vfy__manual{border:0;background:0;padding:0;margin-top:8px;font:500 12px var(--ff);color:var(--accent);cursor:pointer;}

/* ---- 03 · application pending ---- */
.pend{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start;}
.pend__main{max-width:620px;}
.pill-wait{display:inline-flex;align-items:center;gap:9px;background:#fdf7e9;border:1px solid #f0dfb4;border-radius:6px;padding:6px 11px;font:600 11.5px var(--ff);color:#7a5c12;}
.pill-wait__dot{width:7px;height:7px;border-radius:50%;background:#e0a020;}
.pend__h1{font:800 31px/1.16 var(--ff);letter-spacing:-.025em;margin:18px 0 0;color:#000;text-wrap:balance;}
.pend__p{font:400 15px/1.7 var(--ff);color:#4a4f55;margin:14px 0 0;text-wrap:pretty;}
.pend__box{border:1px solid var(--line-2);border-radius:10px;padding:18px 20px;margin-top:26px;}
.pend__lbl{font:600 11px var(--mono);letter-spacing:.14em;color:var(--ink-3);margin-bottom:12px;text-transform:uppercase;}
.pend__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.pend__list li{display:flex;gap:11px;font:400 13.5px/1.55 var(--ff);color:#3c4046;}
.pend__list span{color:var(--accent);font-weight:700;flex:none;}
.pend__act{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;}
.pend__side{display:flex;flex-direction:column;gap:16px;}
.pend__card{border:1px solid var(--line-2);border-radius:11px;padding:22px;}
.pend__facts{font:400 13px/1.75 var(--ff);color:#3c4046;}
.pend__rule{height:1px;background:var(--line-3);margin:18px 0;}
.pend__urgent{background:var(--chrome);color:#fff;border-radius:11px;padding:20px;}
.pend__urgent-t{font:700 13.5px var(--ff);}
.pend__urgent p{font:400 12.5px/1.65 var(--ff);color:var(--on-dark-1);margin:6px 0 0;}
.pend__urgent a{color:#fff;font-weight:600;}
.steps{display:flex;flex-direction:column;gap:13px;}
.steps__i{display:flex;gap:11px;align-items:flex-start;font:400 12.5px/1.5 var(--ff);color:#3c4046;}
.steps__n{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid #c9c9c5;color:var(--ink-3);font:700 10px/15px var(--ff);text-align:center;}
.steps__n--ok{background:var(--stock);border-color:var(--stock);color:#fff;line-height:18px;}
.steps__n--now{background:#e0a020;border-color:#e0a020;color:#fff;line-height:18px;}
.dim{color:var(--ink-3);}

/* ---- 04 · my account overview ---- */
.acct-layout{display:grid;grid-template-columns:212px minmax(0,1fr);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;}
.acct-side{background:#fbfbfa;border-right:1px solid var(--line-3);padding:22px 0 34px;}
.acct-side__lbl{font:600 11px var(--mono);letter-spacing:.14em;color:var(--ink-3);padding:0 20px 12px;text-transform:uppercase;}
.acct-side__i{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 20px 9px 23px;font:400 13px var(--ff);color:#3c4046;border-left:3px solid transparent;}
.acct-side__i:hover{background:var(--panel);}
.acct-side__i.is-active{font-weight:600;color:#000;border-left-color:var(--accent);background:#f2f2f0;padding-left:20px;}
.acct-side__n{font:400 12px var(--mono);color:#a3a3a0;}
.acct-side__n--due{color:var(--accent);font-weight:600;}
.acct-side__rule{height:1px;background:var(--line-3);margin:14px 20px;}
.acct-side__note{font:400 12px/1.5 var(--ff);color:var(--ink-4);padding:14px 23px 0;margin:0;}
.acct-side__note a{color:var(--accent);font-weight:600;}
.acct-main{padding:26px;background:var(--surface);min-width:0;}
.acct-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px;}
.acct-hero__co{font:800 25px var(--ff);letter-spacing:-.02em;margin:0;color:#000;}
.acct-hero__meta{font:400 12.5px var(--ff);color:var(--ink-3);margin-top:4px;}
.acct-hero__act{display:flex;gap:8px;flex:none;flex-wrap:wrap;}
.acct-hero__act form{margin:0;}

.tiles{display:grid;border:1px solid var(--line-2);border-radius:9px;overflow:hidden;margin-bottom:22px;}
.tiles--2{grid-template-columns:repeat(2,1fr);}
.tiles--3{grid-template-columns:repeat(3,1fr);}
.tile{padding:16px 18px;border-right:1px solid var(--line-2);}
.tile:last-child{border-right:0;}
.tile__lbl{font:600 11px var(--mono);letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase;}
.tile__big{font:800 22px var(--ff);letter-spacing:-.02em;margin-top:7px;color:#000;}
.tile__unit{font:600 13px var(--ff);color:var(--ink-2);letter-spacing:0;}
.tile__bar{height:4px;background:var(--line-3);border-radius:2px;margin-top:9px;overflow:hidden;}
.tile__bar span{display:block;height:100%;background:var(--chrome);}
.tile__sub{font:400 11.5px var(--ff);color:var(--ink-3);margin-top:10px;display:block;}
.tile__sub--act{color:var(--accent);font-weight:500;}
.tile__sub--link{color:var(--ink-2);font-weight:500;}

.acct-sec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px;}
.acct-sec__t{font:700 15px var(--ff);margin:0;color:#000;}
.acct-sec__all{font:500 12.5px var(--ff);color:var(--accent);white-space:nowrap;}

.ord-tbl{border:1px solid var(--line-2);border-radius:9px;overflow:hidden;margin-bottom:24px;}
.ord-tbl__head,.ord-tbl__row{display:grid;grid-template-columns:120px minmax(0,1fr) 62px 56px 118px 92px;gap:12px;align-items:center;padding:12px 16px;}
.ord-tbl__head{background:var(--panel);border-bottom:1px solid var(--line-2);font:600 11px var(--mono);letter-spacing:.08em;color:var(--ink-2);text-transform:uppercase;}
.ord-tbl__row{border-bottom:1px solid var(--line-3);font:400 13px var(--ff);}
.ord-tbl__row:last-child{border-bottom:0;}
.ord-tbl__ref{font:500 12.5px var(--mono);color:#000;}
.ord-tbl__ref:hover{color:var(--accent);}
.ord-tbl__cont{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ord-tbl__dim{color:var(--ink-3);}
.ord-tbl__row form{margin:0;}
.lnk-act{border:0;background:0;padding:0;font:600 12.5px var(--ff);color:var(--accent);cursor:pointer;}

.acct-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.mini{border:1px solid var(--line-2);border-radius:9px;overflow:hidden;}
.mini__row{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line-3);font:400 12.5px var(--ff);}
.mini__row:last-child{border-bottom:0;}
.mini__row.is-paid{color:var(--ink-3);}
.mini__l{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.mini__r{display:flex;gap:12px;flex:none;align-items:baseline;}
.mini__ref{font:500 12px var(--mono);color:inherit;}
.mini__sum{font-weight:600;font-variant-numeric:tabular-nums;}
.mini__pdf{color:var(--accent);font-weight:500;}
.mini--wide .mini__l{font-weight:500;color:var(--ink-2);}
.acct-empty--sm{padding:22px 14px;font-size:13px;}
.acct-note{font:400 13px/1.65 var(--ff);color:var(--ink-2);margin:20px 0 0;}
.acct-note a{color:var(--accent);font-weight:500;}

/* ---- responsive ---- */
@media (max-width:1000px){
  .signin{grid-template-columns:1fr;}
  .signin__pitch{padding:32px 26px;}
  .signin__form{padding:32px 26px;}
  .apply,.pend{grid-template-columns:1fr;gap:26px;}
  .acct-layout{grid-template-columns:1fr;}
  .acct-side{border-right:0;border-bottom:1px solid var(--line-3);display:grid;grid-template-columns:repeat(2,1fr);padding:14px 0 18px;}
  .acct-side__lbl{grid-column:1/-1;}
  .acct-side__rule{display:none;}
  .acct-side__note{grid-column:1/-1;}
  .acct-side__i.is-active{padding-left:23px;border-left-color:transparent;box-shadow:inset 0 -2px 0 var(--accent);}
}
@media (max-width:760px){
  .apply__grid,.apply__grid--vat,.acct-cols{grid-template-columns:1fr;}
  .tiles--2,.tiles--3{grid-template-columns:1fr;}
  .tile{border-right:0;border-bottom:1px solid var(--line-2);}
  .tile:last-child{border-bottom:0;}
  /* One order per card: six columns cannot fit, and a horizontally scrolling
     table is worse than a stack on a phone. */
  .ord-tbl__head{display:none;}
  .ord-tbl__row{grid-template-columns:1fr auto;row-gap:6px;padding:14px 16px;}
  .ord-tbl__row > div:nth-child(2){grid-column:1/-1;white-space:normal;}
  .acct-main{padding:18px;}
  .signin__stats{margin-top:24px;}
  .fld__in{height:48px;}
}

/* ---- one shell for every account page ------------------------------------
   The shell lives in layouts/shop.blade.php, so Overview, Orders, Invoices,
   Cart, Company details and Password all render inside the same frame and the
   sidebar never moves between pages. The pages themselves still open with their
   own <section class="section">, so that padding is neutralised here rather
   than by editing six views.
   ------------------------------------------------------------------------- */
.acct-wrap{padding:28px 32px;}
.acct-main > .section{padding:0;}
.acct-main > .section > .acct-head:first-child{margin-bottom:18px;}
.acct-main > .section > .acct-head .page-title{font:800 25px var(--ff);letter-spacing:-.02em;}

/* The sidebar follows on long lists — 2 220 orders is a lot of scrolling to do
   before you can reach another section. */
@media (min-width:1001px){
  .acct-side{position:sticky;top:12px;align-self:start;max-height:calc(100vh - 24px);overflow-y:auto;}
}

/* Hovering a row should feel like the link it is, without shifting anything. */
.ord-tbl__row{transition:background .12s ease;}
.ord-tbl__row:hover{background:#fcfcfb;}
.acct-side__i{transition:background .12s ease,color .12s ease;}
.mini__row{transition:background .12s ease;}
.mini__row:hover{background:#fcfcfb;}

@media (max-width:1000px){
  .acct-wrap{padding:14px 16px;}
}

/* ---- empty the cart ------------------------------------------------------
   The only destructive control on the cart page. It stays quiet: a text button
   in the footer row, pushed to the far end and away from the navigation links,
   turning accent-red only on hover and while it asks. Nothing here should
   compete with "Confirm and order".
   ------------------------------------------------------------------------- */
/* THE bug that made this row a jumble: `display:inline-flex` below outranks the
   hidden attribute's UA `display:none`, so the button and its confirmation were
   both on screen at once. Attribute + class beats class, so this restores it
   without !important. */
.cart-clear__ask[hidden],.cart-clear__sure[hidden]{display:none;}

/* One row, one baseline. Every item gets the same font and the same 20px line
   box, so the link text and the button text sit on exactly the same line — the
   icon is centred inside that box instead of stretching it. */
.cart-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line-3);margin-top:18px;padding-top:14px;}
.cart-foot__l{font:500 13px/20px var(--ff);color:var(--chrome);}
.cart-foot__l:hover{color:var(--accent);}
/* Marks off the destructive action without exiling it to the far edge. */
.cart-foot__div{width:1px;height:16px;background:var(--line-2);flex:none;}
.cart-clear{flex:none;}
.cart-clear__ask,.cart-clear__no{border:0;background:0;padding:0;cursor:pointer;font:500 13px/20px var(--ff);color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;transition:color .12s ease;}
.cart-clear__ask:hover,.cart-clear__no:hover{color:var(--accent);}
.cart-clear__ask:focus-visible,.cart-clear__no:focus-visible,.cart-clear__yes:focus-visible{outline:2px solid var(--chrome);outline-offset:3px;border-radius:4px;}

/* A small bin, drawn in CSS so there is no icon dependency. */
.cart-clear__ico{width:11px;height:12px;flex:none;align-self:center;position:relative;border:1.5px solid currentColor;border-top:0;border-radius:0 0 2px 2px;}
.cart-clear__ico::before{content:"";position:absolute;left:-2.5px;right:-2.5px;top:-3.5px;height:1.5px;background:currentColor;}
.cart-clear__ico::after{content:"";position:absolute;left:2.5px;right:2.5px;top:-6px;height:1.5px;background:currentColor;}

/* The in-place question. Amber ground, because this is a warning and not an
   error — nothing has happened yet. */
.cart-clear__sure{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fdf7e9;border:1px solid #f0dfb4;border-radius:7px;padding:7px 11px;}
.cart-clear__q{font:600 12.5px var(--ff);color:#7a5c12;}
.cart-clear__yes{border:0;background:var(--accent);color:#fff;border-radius:5px;padding:7px 12px;font:600 12.5px var(--ff);cursor:pointer;white-space:nowrap;}
.cart-clear__yes:hover{filter:brightness(.92);}

/* ---- cart flash strip, with Undo ---------------------------------------- */
.cart-flash{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-radius:8px;padding:12px 16px;margin-top:14px;font:500 13px var(--ff);}
.cart-flash--ok{background:rgba(29,122,60,.08);color:var(--stock);}
.cart-flash--err{background:rgba(214,31,39,.08);color:var(--accent);}
.cart-flash__undo{border:1.5px solid currentColor;background:0;color:inherit;border-radius:6px;padding:6px 14px;font:600 12.5px var(--ff);cursor:pointer;white-space:nowrap;}
.cart-flash__undo:hover{background:rgba(0,0,0,.05);}

@media (max-width:760px){
  /* On a phone the row wraps, so the button gets its own line and a full-width
     tap target rather than being squeezed against the links. */
  .cart-clear{margin-left:0;width:100%;margin-top:4px;}
  .cart-clear__ask{min-height:44px;}
  .cart-clear__sure{width:100%;}
  .cart-clear__yes,.cart-clear__no{min-height:40px;}
}

/* ==========================================================================
   ORDER CONFIRMATION  —  what a customer sees the moment an order is placed.
   Four things, in this order: it arrived · which order it is · where it stands
   and what comes next · what to do now. The lifecycle wording matches the order
   page, so the story a customer is told never changes vocabulary.
   ========================================================================== */
.oc{max-width:760px;margin:0 auto;padding:8px 0 20px;}
.oc__head{display:flex;gap:20px;align-items:flex-start;}
.oc__check{flex:none;width:52px;height:52px;border-radius:50%;background:var(--stock);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;}
.oc__h1{font:800 28px/1.2 var(--ff);letter-spacing:-.02em;color:#000;margin:2px 0 0;text-wrap:balance;}
.oc__ref{font:400 14px var(--ff);color:var(--ink-2);margin-top:8px;}
.oc__ref strong{color:#000;font-weight:600;}
.oc__lede{font:400 14.5px/1.7 var(--ff);color:#4a4f55;margin:12px 0 0;text-wrap:pretty;}

/* lifecycle */
.oc__flow{display:flex;align-items:flex-start;margin:30px 0 26px;}
.oc__step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0;}
.oc__dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--line-2);background:#fff;color:#fff;display:flex;align-items:center;justify-content:center;font:700 12px var(--ff);}
.oc__step.is-done .oc__dot,.oc__step.is-now .oc__dot{background:var(--stock);border-color:var(--stock);}
.oc__lbl{font:600 12.5px var(--ff);color:var(--ink-3);}
.oc__step.is-done .oc__lbl,.oc__step.is-now .oc__lbl{color:#000;}
.oc__note{font:400 11px/1.35 var(--ff);color:var(--ink-4);}
.oc__bar{flex:none;width:clamp(18px,6vw,58px);height:2px;background:var(--line-2);margin-top:11px;}
.oc__bar.is-done{background:var(--stock);}

/* panels */
.oc__panel,.oc__next{border:1px solid var(--line-2);border-radius:10px;margin-bottom:16px;overflow:hidden;}
.oc__panel-h{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:13px 18px;background:var(--panel);border-bottom:1px solid var(--line-2);}
.oc__next .oc__panel-h{border-bottom:1px solid var(--line-2);}
.oc__line{display:grid;grid-template-columns:minmax(0,1fr) 86px 104px;gap:12px;align-items:baseline;padding:12px 18px;border-bottom:1px solid var(--line-3);font:400 13.5px var(--ff);}
.oc__line-q{color:var(--ink-2);font-size:12.5px;}
.oc__line-t{text-align:right;font-weight:600;}
.oc__code{display:block;font:400 11.5px var(--mono);color:var(--ink-3);margin-top:3px;}
.oc__totals{padding:12px 18px;background:#fbfbfa;}
.oc__totals > div{display:flex;justify-content:space-between;font:400 13px var(--ff);color:#444;padding:4px 0;}
.oc__grand{border-top:1px solid var(--line-3);margin-top:6px;padding-top:10px !important;font-size:15px !important;color:#000 !important;}
.oc__grand strong{font-weight:800;}

.oc__nlist{list-style:none;margin:0;padding:16px 18px 4px;display:flex;flex-direction:column;gap:14px;}
.oc__nlist li{display:flex;gap:12px;font:400 13.5px/1.55 var(--ff);color:#3c4046;}
.oc__nlist span{flex:none;width:22px;height:22px;border-radius:50%;background:var(--chrome);color:#fff;font:700 11px/22px var(--ff);text-align:center;}
.oc__help{font:400 12.5px/1.65 var(--ff);color:var(--ink-2);margin:0;padding:6px 18px 16px;}
.oc__help a{color:var(--accent);font-weight:500;}

.oc__acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;}
.oc__more{font:500 13px var(--ff);color:var(--chrome);}
.oc__more:hover{color:var(--accent);}

@media (max-width:700px){
  .oc__head{gap:14px;}
  .oc__check{width:40px;height:40px;font-size:20px;}
  .oc__h1{font-size:23px;}
  .oc__note{display:none;}
  .oc__line{grid-template-columns:minmax(0,1fr) auto;row-gap:4px;}
  .oc__line-t{grid-column:2;}
  .oc__line-q{grid-column:1;}
  .oc__acts .btn{width:100%;}
}

/* ---- order could not be submitted ---------------------------------------
   Deliberately a block and not a thin flash: three attempts went by unexplained
   on 2026-08-18 because a one-line message is easy to miss above a long cart.
   ------------------------------------------------------------------------- */
.cart-fail{border:1px solid #f3c9cb;background:#fdf3f3;border-radius:10px;padding:16px 18px;margin-top:14px;}
.cart-fail__t{font:700 14.5px var(--ff);color:var(--accent);margin-bottom:6px;}
.cart-fail p{font:400 13.5px/1.65 var(--ff);color:#4a4f55;margin:0;text-wrap:pretty;}
.cart-fail__act{margin-top:8px !important;font-size:13px !important;}
.cart-fail a{color:var(--accent);font-weight:600;}

/* The forgotten-password page reuses the sign-in panel, but with no pitch
   column beside it — so the single panel is centred and given a readable width
   instead of being stretched across the full grid. */
.signin--single{grid-template-columns:minmax(0,460px);justify-content:center;}

/* ==========================================================================
   DRIVER FINDER — parametric driver search (/driver-finder)
   Modelled on the Inventronics selector this audience already knows, kept in
   the shop's own visual language: same tokens, same table, same buttons.
   ========================================================================== */
.df-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.df-lede{font:400 14px/1.65 var(--ff);color:var(--ink-2);margin:6px 0 0;max-width:620px;text-wrap:pretty;}

/* class tiles */
.df-classes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:18px 0 16px;}
.df-class{border:1.5px solid var(--line-2);border-radius:10px;background:#fff;padding:10px 8px 9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--ff);transition:border-color .12s ease,box-shadow .12s ease;}
.df-class:hover{border-color:var(--chrome);}
.df-class.is-on{border-color:var(--chrome);box-shadow:inset 0 0 0 1px var(--chrome);background:var(--panel);}
.df-class__img{height:44px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.df-class__img img{max-height:44px;max-width:90px;object-fit:contain;mix-blend-mode:multiply;}
.df-class__l1{font:700 11.5px var(--ff);color:#000;}
.df-class__l2{font:500 11px var(--ff);color:var(--ink-2);}
.df-class__n{font:500 10.5px var(--mono);color:var(--ink-4);margin-top:3px;}

/* primary inputs */
.df-inputs{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;border:1px solid var(--line-2);border-radius:12px;padding:16px;background:var(--panel);}
.df-in{display:flex;flex-direction:column;gap:5px;min-width:150px;flex:1;}
.df-in__lbl{font:600 11px var(--ff);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.df-in__field{display:flex;align-items:center;gap:0;background:#fff;border:1.5px solid var(--line-2);border-radius:8px;overflow:hidden;}
.df-in__field:focus-within{border-color:var(--chrome);}
.df-in__field input,.df-in__field select{border:0;outline:0;padding:10px 12px;font:600 15px var(--ff);width:100%;min-width:0;background:#fff;}
.df-in__field select{appearance:auto;padding-right:8px;font-size:14px;}
.df-in__unit{font:600 12px var(--mono);color:var(--ink-3);padding:0 12px 0 4px;flex:none;}
.df-in__hint{font:400 10.5px var(--ff);color:var(--ink-4);min-height:14px;}
.df-go{flex:none;padding:12px 26px;margin-bottom:19px;}

/* advanced */
.df-more{margin:10px 2px 0;}
.df-more summary{font:600 12.5px var(--ff);color:var(--chrome);cursor:pointer;width:max-content;padding:4px 0;}
.df-more summary:hover{color:var(--accent);}
.df-more__row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:10px 2px 2px;}
.df-mini{display:flex;align-items:center;gap:8px;font:500 13px var(--ff);color:#333;}
.df-mini select{border:1.5px solid var(--line-2);border-radius:6px;padding:7px 8px;font:500 13px var(--ff);background:#fff;}
.df-check{display:flex;align-items:center;gap:7px;font:500 13px var(--ff);color:#333;cursor:pointer;}
.df-reset{font:500 12.5px var(--ff);color:var(--ink-3);margin-left:auto;}
.df-reset:hover{color:var(--accent);}

/* results */
.df-empty{border:1.5px dashed var(--line-2);border-radius:12px;padding:34px 20px;text-align:center;font:500 14px var(--ff);color:var(--ink-3);margin-top:18px;}
.df-count{font:500 14px var(--ff);color:#333;margin:18px 0 4px;}
.df-count a{color:var(--accent);font-weight:600;}
.df-table .ct-spec strong{color:#000;}
.df-foot{font:400 12.5px var(--ff);color:var(--ink-3);margin-top:14px;}
.df-foot a{color:var(--accent);font-weight:500;}

@media (max-width:1000px){
  .df-classes{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:640px){
  .df-classes{grid-template-columns:repeat(2,minmax(0,1fr));}
  .df-inputs{flex-direction:column;align-items:stretch;}
  .df-go{margin-bottom:0;width:100%;}
}

/* ---- homepage entry band ---- */
.dfb-wrap{padding-top:10px;padding-bottom:6px;}
.dfb{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--chrome);border-radius:14px;padding:18px 22px;}
.dfb__title{font:800 17px var(--ff);color:#fff;letter-spacing:-.01em;}
.dfb__sub{font:400 12.5px var(--ff);color:rgba(255,255,255,.75);margin-top:3px;}
.dfb__form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.dfb__f{display:flex;align-items:center;background:#fff;border-radius:8px;overflow:hidden;}
.dfb__f input{border:0;outline:0;width:74px;padding:10px 4px 10px 12px;font:600 14px var(--ff);}
.dfb__f span{font:600 11px var(--mono);color:var(--ink-3);padding:0 10px 0 2px;}
.dfb__form select{border:0;border-radius:8px;padding:10px 8px;font:500 13px var(--ff);background:#fff;}
.dfb__form .btn{white-space:nowrap;}
@media (max-width:760px){
  .dfb{flex-direction:column;align-items:stretch;}
  .dfb__form{justify-content:stretch;}
  .dfb__form .btn{flex:1;}
}

/* ---- category-page strip ---- */
.df-strip{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line-2);border-left:4px solid var(--accent);border-radius:10px;background:#fff;padding:12px 16px;font:400 13px var(--ff);color:#333;margin-bottom:4px;transition:border-color .12s ease;}
.df-strip:hover{border-color:var(--chrome);border-left-color:var(--accent);}
.df-strip strong{font-weight:700;color:#000;}
.df-strip__ico{font-size:17px;color:var(--accent);flex:none;}
.df-strip__go{margin-left:auto;font:600 12.5px var(--ff);color:var(--chrome);white-space:nowrap;}

/* ==========================================================================
   POPULAR RIGHT NOW — homepage ticker
   One continuously drifting row of the most-viewed products. The track holds
   two copies of the list and slides -50%, so the loop is seamless. Hover (or
   focus inside) pauses it; reduced-motion turns it into a plain scrollable
   row — the markup is just links in a flexbox, so nothing is lost.
   ========================================================================== */
.pm-sec{padding-top:6px;padding-bottom:2px;}
.pm-hint{font:400 12px var(--ff);color:var(--ink-4);}
.pm-wrap{overflow:hidden;position:relative;margin-top:10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.pm-track{display:flex;gap:12px;width:max-content;animation:pm-drift 60s linear infinite;}
.pm-wrap:hover .pm-track,.pm-track:focus-within{animation-play-state:paused;}
@keyframes pm-drift{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.pm-card{flex:none;width:196px;border:1px solid var(--line-2);border-radius:10px;background:#fff;padding:12px 12px 11px;display:flex;flex-direction:column;gap:7px;transition:border-color .12s ease,box-shadow .12s ease;}
.pm-card:hover{border-color:var(--chrome);box-shadow:0 2px 10px rgba(0,0,0,.06);}
.pm-card__img{height:78px;display:flex;align-items:center;justify-content:center;}
.pm-card__img img{max-height:78px;max-width:100%;object-fit:contain;mix-blend-mode:multiply;}
.pm-card__name{font:600 12px/1.35 var(--ff);color:#000;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px;}
.pm-card__meta{display:flex;align-items:center;gap:7px;font:600 12.5px var(--ff);color:#222;}
.pm-card__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;}
.pm-card__dot.is-in{background:var(--stock);}

@media (prefers-reduced-motion: reduce){
  .pm-track{animation:none;}
  .pm-wrap{overflow-x:auto;mask-image:none;-webkit-mask-image:none;}
}
@media (max-width:640px){
  .pm-card{width:164px;}
}

/* ==========================================================================
   COOKIE CONSENT BAR
   Not a modal: it must not block the page. The three buttons are deliberately
   identical in weight — a greyed-out "decline" next to a bright "accept" is the
   dark pattern EU regulators specifically call out.
   ========================================================================== */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:900;background:#fff;border-top:1px solid var(--line-2);box-shadow:0 -4px 20px rgba(0,0,0,.08);}
.cbar[hidden]{display:none;}
.cbar__in{max-width:1280px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.cbar__txt{flex:1;min-width:280px;font:400 12.5px/1.6 var(--ff);color:#3c4046;text-wrap:pretty;}
.cbar__txt strong{display:block;font:700 13px var(--ff);color:#000;margin-bottom:2px;}
.cbar__txt a{color:var(--chrome);text-decoration:underline;}
.cbar__acts{display:flex;gap:8px;flex-wrap:wrap;flex:none;}
.cbar__btn{border:1.5px solid var(--chrome);background:#fff;color:var(--chrome);border-radius:6px;padding:9px 18px;font:600 12.5px var(--ff);cursor:pointer;white-space:nowrap;}
.cbar__btn:hover{background:var(--panel);}
.cbar__btn--quiet{border-color:var(--line-2);color:var(--ink-2);}
.cbar__panel{max-width:1280px;margin:0 auto;padding:4px 32px 16px;border-top:1px solid var(--line-3);}
.cbar__panel[hidden]{display:none;}
.cbar__row{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font:400 12.5px/1.55 var(--ff);color:#3c4046;cursor:pointer;}
.cbar__row input{margin-top:2px;flex:none;}
.cbar__row strong{color:#000;}
@media (max-width:760px){
  .cbar__in{padding:12px 16px;gap:12px;}
  .cbar__panel{padding:4px 16px 14px;}
  .cbar__acts{width:100%;}
  .cbar__btn{flex:1;text-align:center;}
}

/* Category intro (27.10.2026). Full text on desktop; clipped to three lines on
   a phone, with a Read more button the page script only reveals when the text
   actually overflows. */
.cat-intro{margin-top:8px;max-width:760px;font:400 14px/1.55 var(--ff);color:var(--ink-2);}
.cat-intro p{margin:0 0 8px;}
.cat-intro p:last-child{margin-bottom:0;}
.cat-intro-more{display:none;}
@media (max-width:760px){
  .cat-intro:not(.is-open){max-height:4.65em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent);}
  .cat-intro-more:not([hidden]){display:inline-block;margin-top:4px;padding:0;border:0;background:none;font:600 13px var(--ff);color:var(--chrome);text-decoration:underline;cursor:pointer;}
}