/* Dexam Trade - site stylesheet
   Extracted from header.html (debug borders removed); listing, variant and
   description styles are appended at the end. */

/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --ink:        #1c2124;   /* header / primary text */
  --inkbg:      #ffffff;   /* ink background */
  --paper:      #f7f5f1;   /* page background */
  --paper-dim:  #efece5;
  --accent:     #8B2F3B;   /* safety-orange */
  --steel:      #3b5169;   /* secondary */
  --line:       #333a3e;   /* hairlines on dark */
  --line-light: #d8d3c9;   /* hairlines on light */
  --muted:      #9aa3a8;   /* muted text on dark */
  --muted-dark: #6f7679;   /* muted text on light */
  --navhover:   #000000;

  --font-display: 'Trebuchet MS', Helvetica, Arial, Verdana, sans-serif;
  --font-body:    'Trebuchet MS', Helvetica, Arial, Verdana, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --header-h: 0px;         /* set by JS: real rendered header height */
  --container: 1240px;
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;padding:0;}
body{
display: flex;
flex-direction: column;
   min-height: 100vh;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
main{
flex: 1 1 auto;   /* grows/shrinks to fill whatever space header+footer don't use */
}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;background:none;border:0;cursor:pointer;color:inherit;}
img{max-width:100%;display:block;}

.wrap{max-width:var(--container);margin:0 auto;padding:0 24px;}

/* =========================================================
   HEADER — desktop
   ========================================================= */
.site-header{
  background:var(--inkbg);
  color:#000;
  position:relative;
  z-index:100;
}
.header-inner{
  max-width: none;   /* remove the 1240px cap */

/*  max-width:var(--container);*/
  margin:0 auto;
  padding:20px 24px 0;
  display:flex;
  align-items:flex-end;         /* <-- logo bottom aligns to bottom of the stacked nav column */
  justify-content:space-between;
  gap:32px;
}
.header-inner img{height:120px;}

/* Logo -------------------------------------------------- */
.logo{
  flex:0 0 auto;
 
  letter-spacing:-0.02em;
  line-height:1;
  display:flex;
  align-items:baseline;
  gap:2px;
}
.logo span{color:var(--accent);}

/* Right-hand stack: top links / search / primary nav ---- */
.header-right{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

.top-links{
  display:flex;
  justify-content:flex-end;
  gap:24px;
  font-size:13px;
}
.top-links a{
  color:var(--ink);
  font-weight:500;
  transition:color .15s ease;
}
.top-links a:hover{color:var(--accent);}

.search-row{
    width: 400px;
    align-self: flex-end;
  /*display:flex;*/
}
.search-form{
  flex:1 1 auto;
  display:flex;
  background:#ccc;
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
}
.search-form input{
  flex:1 1 auto;
  border:0;
  background:transparent;
  color:#fff;
  padding:11px 14px;
  font-size:14px;
  font-family:var(--font-body);
  outline:none;
}
.search-form input::placeholder{color:var(--muted);}
.search-form button{
  flex:0 0 auto;
  padding:0 18px;
  background:var(--accent);
  color:#000;
  font-weight:600;
  font-size:13px;
  letter-spacing:.02em;
}
.search-form button:hover{background:#d8501f;}

/* Primary nav / menu row --------------------------------- */
.primary-nav{
  border-top:1px solid var(--line);
}
.primary-nav > ul{
  display:flex;
  gap:4px;
}
.nav-item{position:static;}
.nav-link{
  display:flex;
  align-items:center;
  gap:6px;
  padding:14px 16px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  letter-spacing:.01em;
  color: var(--accent);
  border-bottom:2px solid transparent;
}
.nav-item.open .nav-link,
.nav-link:hover{
  color:var(--navhover);
}
.nav-link .chev{
  display:none;
  width:8px;height:8px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .15s ease;
}
.nav-item.open .nav-link .chev{
  transform:rotate(225deg) translateY(1px);
}

/* =========================================================
   MEGA DROPDOWN — 90vw wide, centred on the viewport
   ========================================================= */
.dropdown-panel{
  display:none;
  position:fixed;
  top:var(--header-h);
  left:50%;
  transform:translateX(-50%);
  width:90vw;
  max-width:1400px;
  background:var(--inkbg);
  color:var(--ink);
  border:1px solid var(--line-light);
  border-top:3px solid var(--accent);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  z-index:90;
}
.nav-item.open .dropdown-panel{display:block;}
/* Page behind an open dropdown stays still (set by site.js); a tall dropdown scrolls itself */
html.dropdown-open{overflow:hidden;}
html.dropdown-open body{padding-right:var(--scrollbar-w, 0px);}
html.dropdown-open .dropdown-panel{
  top:var(--dropdown-top, var(--header-h));
  max-height:calc(100vh - var(--dropdown-top, var(--header-h)) - 16px);
  overflow-y:auto;
  overscroll-behavior:contain;
}

.dropdown-inner{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:0;
}
.dropdown-links{
  padding:32px 40px;
}
.dropdown-eyebrow{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px;
}
.dropdown-list{
  columns:3;
  column-gap:32px;
}
.dropdown-list li{
  break-inside:avoid;
  margin-bottom:4px;
}
.dropdown-list a{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  font-size:14px;
  font-weight:500;
  border-bottom:1px solid var(--line-light);
  color:var(--ink);
}
.dropdown-list a:hover{color:var(--accent);}
.dropdown-list .sku{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted-dark);
  white-space:nowrap;
}

.dropdown-image{
  background:var(--paper-dim);
  border-left:1px solid var(--line-light);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.dropdown-image .img-placeholder{
  flex:1 1 auto;
  min-height:180px;
  border:1px dashed #b9b2a4;
  border-radius:4px;
  background:
    repeating-linear-gradient(45deg, #e4e0d6 0 10px, #ece9e0 10px 20px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.05em;
  color:var(--muted-dark);
  text-transform:uppercase;
  text-align:center;
}
.dropdown-image .img-caption{
  font-size:13px;
  font-weight:600;
}
.dropdown-image .img-cta{
  font-size:12px;
  color:var(--steel);
  font-weight:600;
}

/* =========================================================
   MOBILE BAR + OFF-CANVAS NAV  (< 900px)
   ========================================================= */
.mobile-bar{display:none;}
.menu-toggle{display:none;}
.offcanvas-scrim{display:none;}

/* Hides the mobile menu if the width is 901 or more */
@media (min-width:901px)
{
.offcanvas{display:none;}
}
@media (max-width: 900px){

  /* hide desktop header contents, show mobile bar */
  .header-inner{display:none;}

  .mobile-bar{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    padding:16px 16px;
  }
  .mobile-bar img{height:100px;}
  .menu-toggle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    width:28px;height:22px;
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
  }
  .menu-toggle span{
    display:block;height:2px;width:100%;
    background:#000;
    border-radius:1px;
  }
  .mobile-bar .logo{font-size:22px;}

  .mobile-spacer{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    width:28px;
  }

  /* Off-canvas panel ("pizza-box" slide-in menu) */
  .offcanvas{
    position:fixed;
    top:0;left:0;
    height:100%;
    width:86%;
    max-width:360px;
    background:var(--inkbg);
    color:#fff;
    z-index:200;
    transform:translateX(-100%);
    transition:transform .28s ease;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
  }
  .offcanvas.open{transform:translateX(0);}

  .offcanvas-scrim{
    display:block;
    position:fixed;inset:0;
    background:rgba(0,0,0,.4);
    z-index:190;
    opacity:0;
    pointer-events:none;
    transition:opacity .28s ease;
  }
  .offcanvas-scrim.open{opacity:1;pointer-events:auto;}

  .offcanvas-head{
    display:flex;
    justify-content:flex-end;
    padding:16px;
    border-bottom:1px solid var(--line);
  }
  .offcanvas-close{color:#fff;font-size:22px;line-height:1;padding:4px;}

  .offcanvas .search-row{padding:16px;}
  .offcanvas .top-links{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:4px 16px 16px;
  }
  .offcanvas .top-links a,
  .offcanvas .top-links .logout-form{
    padding:10px 0;
    width:100%;
    border-bottom:1px solid var(--line);
  }
  .search-row{
  width: auto;        /* undo the 400px */
  align-self: stretch;
}

  .offcanvas .primary-nav{border-top:1px solid var(--line);}
  .offcanvas .primary-nav > ul{flex-direction:column;gap:0;}
  .offcanvas .nav-link{
    width:100%;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    border-radius:0;
  }

  /* mobile dropdown becomes an inline accordion, not a fixed mega-panel */
  .offcanvas .dropdown-panel{
    display:none;
    position:static;
    transform:none;
    width:auto;
    max-width:none;
    background:#20262a;
    border:0;
    border-top:0;
    box-shadow:none;
  }
  .offcanvas .nav-item.open .dropdown-panel{display:block;}
  .offcanvas .dropdown-inner{
    grid-template-columns:1fr;
  }
  .offcanvas .dropdown-links{padding:8px 16px 20px;}
  .offcanvas .dropdown-list{columns:1;}
  .offcanvas .dropdown-list a{color:#fff;border-bottom:1px solid var(--line);}
  .offcanvas .dropdown-image{
    border-left:0;
    border-top:1px solid var(--line);
    background:#20262a;
    padding:16px;
  }
  .offcanvas .dropdown-image .img-placeholder{
    min-height:120px;
    background:repeating-linear-gradient(45deg,#2b3236 0 10px,#252b2e 10px 20px);
    border-color:#454d51;
    color:var(--muted);
  }
  .offcanvas .dropdown-image .img-caption{color:#fff;}
}

/* =========================================================
   PAGE CONTENT (placeholder — swap per template page)
   ========================================================= */
.page-placeholder{
  max-width:var(--container);
  margin:0 auto;
  padding:80px 24px;
  min-height:40vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--muted-dark);
  font-family:var(--font-mono);
  font-size:13px;
  border:1px dashed var(--line-light);
  border-left:0;border-right:0;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--inkbg);
  color:var(--muted);
  margin-top:0;
}
.footer-top{
  display:none;
  max-width:var(--container);
  margin:0 auto;
  padding:56px 24px;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
}
.footer-brand .logo{color:#fff;margin-bottom:12px;}
.footer-brand p{
  font-size:13px;
  line-height:1.6;
  max-width:280px;
  color:var(--muted);
}
.footer-col h4{
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 16px;
}
.footer-col ul li{margin-bottom:10px;}
.footer-col a{font-size:13px;color:var(--muted);transition:color .15s ease;}
.footer-col a:hover{color:var(--accent);}
.footer-bottom{
  border-top:1px solid var(--line);
}
.footer-bottom-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:20px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-size:12px;
}
.footer-bottom a{color:var(--muted);margin-left:16px;}
.footer-bottom a:hover{color:#fff;}

@media (max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1 / -1;}
}
@media (max-width:520px){
  .footer-top{grid-template-columns:1fr;}
}

/* Focus visibility (accessibility floor) */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
}
 /* ---------- breadcrumb ---------- */
.breadcrumb{
  padding:20px 24px 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:13px;
  color:var(--muted-dark);
}
.breadcrumb a{color:var(--muted-dark);}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb span.sep{color:var(--line-light);}
.breadcrumb .current{color:var(--ink);font-weight:600;}

/* ---------- hero: gallery + (info & tabs) ---------- */
.product-hero{
  padding:24px 24px 56px;
  display:grid;
  grid-template-columns:380px 1fr;   /* fixed, narrower image column so tabs get the rest of the width */
  gap:48px;
  align-items:start;
}

.gallery{
  grid-row:1 / span 2;   /* spans the info + tabs rows so it sits beside both */
  position:sticky;
  top:24px;
  align-self:start;
}

.gallery-main{
  aspect-ratio:1 / 1;
  background:var(--paper-dim);
  border:1px solid var(--line-light);
  border-radius:6px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gallery-main img{width:100%;height:100%;object-fit:cover;}
.gallery-thumbs{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.gallery-thumbs button{
  width:64px;height:64px;
  padding:0;
  border:2px solid var(--line-light);
  border-radius:4px;
  overflow:hidden;
  background:var(--paper-dim);
}
.gallery-thumbs button.active{border-color:var(--accent);}
.gallery-thumbs img{width:100%;height:100%;object-fit:cover;}

.product-info .brand-tag{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  max-width:250px;
}
.product-info .brand-tag img{height:22px;width:auto;}

.product-eyebrow{
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted-dark);
  margin-bottom:6px;
}
.product-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:30px;
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:0 0 16px;
}

.product-price-row{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:16px 0;
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
  margin-bottom:20px;
}
.product-price{
  font-family:var(--font-display);
  font-weight:800;
  font-size:26px;
}
.product-price-label{
  font-size:12px;
  color:var(--muted-dark);
  text-transform:uppercase;
  letter-spacing:.05em;
}

.quick-specs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 24px;
  margin-bottom:24px;
  font-size:13px;
  max-width:300px;
}
.quick-specs dt{color:var(--muted-dark);}
.quick-specs dd{margin:0;font-weight:600;}

.buy-row{
  display:flex;
  gap:12px;
  margin-bottom:8px;
  display:none;
}
.qty-input{
  width:70px;
  padding:12px;
  border:1px solid var(--line-light);
  border-radius:4px;
  font-family:var(--font-body);
  font-size:14px;
  text-align:center;
}
.btn-primary{
  flex:1 1 auto;
  background:var(--accent);
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
  padding:0 24px;
  border-radius:4px;
  transition:background .15s ease;
}
.btn-primary:hover{background:#6e2430;}
.stock-note{
  font-size:12px;
  color:var(--steel);
  font-weight:600;
}

/* ---------- tabs (sits in the hero's right column, under product-info) ---------- */
.product-tabs{
  padding:32px 0 0;
}
.tab-buttons{
  display:flex;
  gap:4px;
  border-bottom:1px solid var(--line-light);
  margin-bottom:32px;
}
.tab-buttons button{
  padding:14px 4px;
  margin-right:28px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  color:var(--muted-dark);
  border-bottom:2px solid transparent;
}
.tab-buttons button.active{
  color:var(--ink);
  border-bottom-color:var(--accent);
}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.product-description{
  max-width:720px;
  font-size:15px;
  line-height:1.7;
  color:#3a3f42;
}
.product-description p{margin:0 0 16px;}

.feature-list{
  margin-top:28px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 32px;
}
.feature-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  font-weight:500;
}
.feature-list li::before{
  content:"";
  width:6px;height:6px;
  margin-top:7px;
  background:var(--accent);
  border-radius:50%;
  flex:0 0 auto;
}

.spec-table{
  width:100%;
  max-width:640px;
  border-collapse:collapse;
  font-size:14px;
}
.spec-table tr{border-bottom:1px solid var(--line-light);}
.spec-table th{
  text-align:left;
  padding:12px 24px 12px 0;
  color:var(--muted-dark);
  font-weight:500;
  width:220px;
}
.spec-table td{padding:12px 0;font-weight:600;}

/* ---------- related products ---------- */
.related-section{
  background:var(--paper-dim);
  padding:56px 0 64px;
}
.related-section .wrap{padding:0 24px;}
.related-heading{
  font-family:var(--font-display);
  font-weight:800;
  font-size:20px;
  margin:0 0 24px;
}
.related-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:20px;
}
.related-card{display:block;}
.related-card .thumb{
  aspect-ratio:1/1;
  background:#fff;
  border:1px solid var(--line-light);
  border-radius:6px;
  overflow:hidden;
  margin-bottom:10px;
}
.related-card .thumb img{width:100%;height:100%;object-fit:cover;}
.related-card .name{
  font-size:12.5px;
  font-weight:600;
  line-height:1.35;
  color:var(--ink);
}
.related-card:hover .name{color:var(--accent);}

@media (max-width:900px){
  .product-hero{grid-template-columns:1fr;gap:28px;padding-bottom:40px;}
  .gallery{grid-row:auto;position:static;}
  .gallery-main{max-width:420px;margin:0 auto;}
  .quick-specs{grid-template-columns:1fr 1fr;font-size:12.5px;}
  .feature-list{grid-template-columns:1fr;}
  .related-grid{grid-template-columns:repeat(2, 1fr);}
  .tab-buttons{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .tab-buttons button{white-space:nowrap;}
}

/* =========================================================
   ADDITIONS FOR THE PHP BUILD
   ========================================================= */

/* Menu: featured product image in each mega-dropdown */
.dropdown-image .feature-link{display:block;}
.dropdown-image .feature-img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  background:#fff;
  border:1px solid var(--line-light);
  border-radius:4px;
}
.dropdown-list .count{min-width:2ch;text-align:right;}

/* Product description content coming from productlist.json */
.product-description h3,
.product-description h4{
  font-family:var(--font-display);
  font-size:16px;
  margin:24px 0 8px;
  color:var(--ink);
}
.product-description a{color:var(--steel);text-decoration:underline;}
.product-description .feature-list{margin:12px 0 20px;}

/* Variants (products sharing the same "parent") */
.variants{margin:0 0 24px;}
.variants-label{
  display:block;
  font-size:13px;
  color:var(--muted-dark);
  margin-bottom:10px;
}
.variant-list{display:flex;flex-wrap:wrap;gap:10px;}
.variant-list a{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  width:72px;
  font-size:11px;
  line-height:1.25;
  text-align:center;
  color:var(--muted-dark);
}
.variant-list img{
  width:56px;height:56px;
  object-fit:cover;
  background:#fff;
  border:2px solid var(--line-light);
  border-radius:4px;
}
.variant-list a:hover img{border-color:var(--accent);}
.variant-list a:hover{color:var(--ink);}

/* Images tab: hi-res downloads */
.download-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:16px;
}
.download-grid a{display:block;font-size:12px;color:var(--muted-dark);}
.download-grid img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  background:#fff;
  border:1px solid var(--line-light);
  border-radius:4px;
  margin-bottom:6px;
}
.download-grid a:hover{color:var(--accent);}

/* Image placeholder when a product has no pictures */
.no-image{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--muted-dark);
  background:var(--paper-dim);
}

/* Listing pages: home, tab and category */
.listing{padding:0 0 64px;}
.listing .breadcrumb{padding-left:0;padding-right:0;}
.listing-head{padding:20px 0 28px;}
.listing-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:32px;
  line-height:1.15;
  margin:0 0 6px;
}
.listing-sub{margin:0;font-size:14px;color:var(--muted-dark);}
.listing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:28px 20px;
}
.card{display:flex;flex-direction:column;}
.card-link{display:block;}
.card .thumb{
  aspect-ratio:1 / 1;
  background:#fff;
  border:1px solid var(--line-light);
  border-radius:6px;
  overflow:hidden;
  margin-bottom:10px;
}
.card .thumb img{width:100%;height:100%;object-fit:cover;}
.card .name{font-size:14px;font-weight:600;line-height:1.35;color:var(--ink);}
.card .meta{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:4px;
  font-size:12px;
  color:var(--muted-dark);
}
.card .meta .price{color:var(--ink);font-weight:600;}
a.card:hover .name,.card-link:hover .name{color:var(--accent);}

/* Not found / error pages */
.message-page{padding:64px 0;max-width:640px;}
.message-page h1{font-family:var(--font-display);font-size:28px;margin:0 0 12px;}
.message-page p{font-size:15px;line-height:1.6;color:#3a3f42;}
.message-page a{color:var(--steel);text-decoration:underline;}

@media (max-width:900px){
  .listing-grid{grid-template-columns:repeat(2, 1fr);gap:20px 14px;}
  .listing-title{font-size:26px;}
}

/* <picture> wraps WebP images with a JPG fallback. display:contents lets the
   inner <img> lay out exactly as if it were a direct child, so existing rules
   like ".gallery-main img" and ".card .thumb img" keep working. */
picture{display:contents;}

/* Search results */
.search-empty{padding-top:0;}
.pagination{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  margin:40px 0 0;
  font-size:14px;
}
.pagination a,
.pagination span{
  min-width:36px;
  padding:8px 12px;
  text-align:center;
  border:1px solid var(--line-light);
  border-radius:4px;
  background:#fff;
  color:var(--ink);
}
.pagination a:hover{border-color:var(--accent);color:var(--accent);}
.pagination .current{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600;}
.pagination .gap{border:0;background:none;min-width:auto;padding:8px 4px;color:var(--muted-dark);}

/* =========================================================
   FILTERS (category and search pages)
   ========================================================= */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}

.listing-body.has-filters{
  display:grid;
  grid-template-columns:220px minmax(0, 1fr);
  gap:36px;
  align-items:start;
}
.listing-body.has-filters .listing-grid{
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
}

.filters-wrap{position:sticky;top:calc(var(--header-h, 0px) + 16px);}

.filters-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  list-style:none;
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:0 0 12px;
  border-bottom:2px solid var(--ink);
  color:var(--ink);
}
.filters-toggle::-webkit-details-marker{display:none;}
.filters-badge{
  min-width:20px;
  padding:1px 6px;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font-family:var(--font-body, inherit);
  font-size:12px;
  letter-spacing:0;
  text-align:center;
}

.filter-group{padding:18px 0;border-bottom:1px solid var(--line-light);}
.filter-heading{
  margin:0 0 10px;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
}
.filter-options{list-style:none;margin:0;padding:0;}
.filter-options.is-long{max-height:340px;overflow-y:auto;padding-right:6px;}

.filter-option{
  display:flex;
  align-items:center;
  gap:9px;
  padding:5px 0;
  font-size:14px;
  line-height:1.3;
  color:#3a3f42;
}
.filter-option .label{flex:1;}
.filter-option .count{font-size:12px;color:var(--muted-dark);}
.filter-option .box{
  flex:0 0 16px;
  width:16px;height:16px;
  border:1.5px solid #9aa0a3;
  border-radius:3px;
  background:#fff;
}
a.filter-option:hover{color:var(--accent);}
a.filter-option:hover .box{border-color:var(--accent);}
.filter-option.is-selected{color:var(--ink);font-weight:600;}
.filter-option.is-selected .box{
  border-color:var(--accent);
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.filter-option.is-disabled{opacity:.4;cursor:default;}

/* Colour swatches (by the slug of prime_colour) */
.swatch{
  flex:0 0 14px;
  width:14px;height:14px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.18);
  background:#d8d3c9;
}
.swatch[data-colour="black"]{background:#1c1c1c;}
.swatch[data-colour="blue"]{background:#2f5d9e;}
.swatch[data-colour="brown"]{background:#7a4e2d;}
.swatch[data-colour="cream"]{background:#f1e7cf;}
.swatch[data-colour="green"]{background:#4f7a4a;}
.swatch[data-colour="grey"]{background:#8d9295;}
.swatch[data-colour="orange"]{background:#e07a2c;}
.swatch[data-colour="pink"]{background:#e39bb3;}
.swatch[data-colour="purple"]{background:#6e4a8e;}
.swatch[data-colour="red"]{background:#b3262f;}
.swatch[data-colour="white"]{background:#fff;}
.swatch[data-colour="yellow"]{background:#f2c230;}
.swatch[data-colour="metal"]{background:linear-gradient(135deg,#e9ecee,#9ea4a8 55%,#dfe3e5);}
.swatch[data-colour="assorted"],
.swatch[data-colour="various"],
.swatch[data-colour="multicoloured"]{
  background:conic-gradient(#b3262f,#f2c230,#4f7a4a,#2f5d9e,#6e4a8e,#b3262f);
}

.filters-clear{
  display:inline-block;
  margin-top:16px;
  font-size:13px;
  color:var(--steel);
  text-decoration:underline;
}

/* Filters in use, above the results */
.active-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 20px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border:1px solid var(--line-light);
  border-radius:16px;
  background:#fff;
  font-size:13px;
  color:var(--ink);
}
.chip:hover{border-color:var(--accent);color:var(--accent);}
.chip-clear{font-size:13px;color:var(--steel);text-decoration:underline;margin-left:4px;}
.no-results{font-size:15px;color:#3a3f42;padding:24px 0;}
.no-results a{color:var(--steel);text-decoration:underline;}

@media (max-width:900px){
  .listing-body.has-filters{display:block;}
  .listing-body.has-filters .listing-grid{grid-template-columns:repeat(2, 1fr);}
  .filters-wrap{position:static;margin:0 0 20px;}
  .filters{border:1px solid var(--line-light);border-radius:6px;background:#fff;}
  .filters-toggle{padding:12px 14px;border-bottom:0;}
  .filters-toggle::after{content:"+";margin-left:auto;font-size:18px;font-weight:400;}
  .filters[open] .filters-toggle{border-bottom:1px solid var(--line-light);}
  .filters[open] .filters-toggle::after{content:"−";}
  .filters-body{padding:0 14px 14px;}
  .filter-group:last-of-type{border-bottom:0;}
}
@media (min-width:901px){
  /* On desktop the panel is always open; the heading is just a heading. */
  .filters-toggle{cursor:default;}
}

/* =========================================================
   HOME PAGE BANNERS (CMS)
   ========================================================= */
.hero-wrap{padding-top:24px;}
.hero{position:relative;border-radius:6px;overflow:hidden;background:var(--paper-dim);}
/* All slides share one grid cell so the carousel is as tall as its tallest slide. */
.hero-track{display:grid;}
.hero-slide{
  grid-area:1 / 1;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .6s ease, visibility 0s linear .6s;
}
.hero-slide.is-active{opacity:1;visibility:visible;transition:opacity .6s ease, visibility 0s;}
.hero-slide a{display:block;width:100%;}
.hero-slide img{display:block;width:100%;height:auto;}

.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.85);color:var(--ink);
  font-size:28px;line-height:1;cursor:pointer;
  opacity:0;transition:opacity .2s;
}
.hero-prev{left:14px;}
.hero-next{right:14px;}
.hero:hover .hero-arrow,.hero-arrow:focus-visible{opacity:1;}
.hero-arrow:hover{background:#fff;}

.hero-controls{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  padding:6px 10px;border-radius:16px;background:rgba(28,33,36,.45);
}
.hero-dots{display:flex;gap:8px;}
.hero-dot{width:10px;height:10px;padding:0;border:2px solid #fff;border-radius:50%;background:transparent;cursor:pointer;}
.hero-dot.is-active{background:#fff;}
.hero-pause{width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;position:relative;}
.hero-pause span,.hero-pause span::after{
  position:absolute;top:4px;width:4px;height:12px;background:#fff;content:"";
}
.hero-pause span{left:4px;}
.hero-pause span::after{left:7px;top:0;}
.hero-pause[aria-pressed="true"] span{
  left:6px;width:0;height:0;background:none;
  border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff;
}
.hero-pause[aria-pressed="true"] span::after{display:none;}
.hero button:focus-visible{outline:3px solid #f2c230;outline-offset:2px;}

.preview-bar{background:#f2c230;color:var(--ink);font-size:14px;padding:10px 0;}
.preview-bar a{color:var(--ink);text-decoration:underline;margin-left:6px;}

@media (max-width:900px){
  .hero-wrap{padding-top:16px;}
  .hero-arrow{display:none;}     /* swipe instead */
}
@media (prefers-reduced-motion: reduce){
  .hero-slide,.hero-slide.is-active{transition:none;}
}

/* =========================================================
   CUSTOMER ACCOUNTS
   ========================================================= */
.top-links .logout-form{display:inline;margin:0;}
/* Log out / Stop is a button but looks and behaves like the other top links */
.top-links .top-link-button{font-size:inherit;color:var(--ink);font-weight:500;transition:color .15s ease;}
.top-links .top-link-button:hover{color:var(--accent);}
.top-links a{white-space:nowrap;}
.link-button{
  background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer;
}

.form-card{
  max-width:440px;
  margin:48px auto 72px;
  padding:32px;
  background:#fff;
  border:1px solid var(--line-light);
  border-radius:8px;
}
.form-card h1{font-family:var(--font-display);font-size:26px;margin:0 0 8px;}
.form-intro{margin:0 0 20px;color:#3a3f42;font-size:15px;line-height:1.5;}
.form-card label{display:block;font-weight:600;font-size:14px;margin:16px 0 6px;}
.form-card input[type=text],
.form-card input[type=password]{
  width:100%;padding:11px 12px;font:inherit;font-size:15px;
  border:1px solid #b9b3a8;border-radius:4px;background:#fff;
}
.form-card input:focus{outline:3px solid #f2c230;outline-offset:1px;border-color:var(--ink);}
.form-card [aria-invalid=true]{border-color:#a4232f;}
.form-card .btn-primary{margin-top:22px;width:100%;padding:13px 24px;border:0;cursor:pointer;font-size:15px;}
.form-card a.btn-primary{display:block;text-align:center;}
.form-hint{margin:0 0 6px;font-size:13px;color:var(--muted-dark);}
.form-note{margin:20px 0 0;font-size:13px;color:var(--muted-dark);}
.form-note .link-button{color:var(--steel);text-decoration:underline;}
.form-alert{
  margin:0 0 8px;padding:10px 14px;
  background:#fbe9eb;border-left:4px solid #a4232f;border-radius:4px;
  font-size:14px;
}
.field-error{margin:6px 0 0;color:#a4232f;font-size:13px;font-weight:600;}

.account-panels{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:20px;margin:0 0 40px;}
.account-panel{background:#fff;border:1px solid var(--line-light);border-radius:6px;padding:20px 22px;}
.account-panel h2{font-family:var(--font-display);font-size:17px;margin:0 0 12px;}
.account-panel dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 14px;font-size:14px;}
.account-panel dt{color:var(--muted-dark);}
.account-panel dd{margin:0;font-weight:600;}
.account-panel p{margin:0 0 6px;font-size:14px;}
.account-panel a{color:var(--steel);text-decoration:underline;}
.rep-name{font-weight:600;font-size:15px;}
.section-heading{font-family:var(--font-display);font-size:20px;margin:0 0 18px;}
.muted-text{color:var(--muted-dark);font-size:14px;}

/* =========================================================
   STOCK TRAFFIC LIGHTS
   ========================================================= */
.stock{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:14px;font-weight:600;color:var(--ink);}
.stock-dot{
  width:12px;height:12px;border-radius:50%;flex:0 0 12px;
  box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 0 3px rgba(0,0,0,.12);
}
.stock-green .stock-dot{background:#2e8b3e;}
.stock-amber .stock-dot{background:#e6a100;}
.stock-red .stock-dot{background:#c62828;}
.stock-unknown .stock-dot{background:#9aa0a3;}
.stock-due{flex-basis:100%;padding-left:20px;font-weight:400;font-size:13px;color:#3a3f42;}
.product-stock{margin:-8px 0 20px;}
.card-stock{margin-top:6px;}
.stock-compact{font-size:12px;gap:2px 6px;}
.stock-compact .stock-dot{width:9px;height:9px;flex-basis:9px;}
.stock-compact .stock-due{padding-left:15px;font-size:11px;}

/* =========================================================
   BASKET
   ========================================================= */
.buy-form{margin:0 0 8px;}
.buy-label{display:block;font-size:13px;font-weight:600;color:var(--muted-dark);margin-bottom:6px;}
.buy-controls{display:flex;gap:12px;}
.buy-controls .qty-input{width:96px;}
.buy-controls .btn-primary{border:0;padding:13px 24px;cursor:pointer;font-size:15px;}
.buy-controls .btn-primary:disabled{opacity:.6;cursor:wait;}
.pack-note{margin:8px 0 0;font-size:13px;color:var(--muted-dark);}
.pack-note:empty,.buy-message:empty,.qty-note:empty{display:none;}
.buy-message{margin:10px 0 0;padding:10px 12px;background:#e8f3ea;border-radius:4px;font-size:14px;}
.buy-message a,.site-flash a{color:var(--steel);text-decoration:underline;}
.buy-login{margin:0 0 16px;}
.buy-login .btn-primary{display:inline-block;padding:13px 24px;color:#fff;}

.basket-scan{margin:0 0 16px;font-size:14px;}
.basket-scan a{font-weight:600;}
.basket-count{
  display:inline-block;min-width:20px;padding:1px 6px;margin-left:2px;
  border-radius:10px;background:var(--accent);color:#fff;
  font-size:12px;text-align:center;
}

.site-flash{margin:16px 0;padding:10px 14px;border-radius:4px;background:#e8f3ea;border-left:4px solid #2e8b3e;font-size:14px;}
.site-flash-error{background:#fbe9eb;border-color:#a4232f;}
.toast{
  position:fixed;right:20px;bottom:20px;z-index:200;max-width:360px;
  padding:12px 16px;border-radius:6px;background:var(--ink);color:#fff;
  font-size:14px;box-shadow:0 6px 24px rgba(0,0,0,.2);
}
.toast-error{background:#a4232f;}

.basket-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line-light);border-radius:6px;}
.basket-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-dark);padding:10px 12px;border-bottom:1px solid var(--line-light);}
.basket-table td{padding:12px;border-bottom:1px solid var(--line-light);vertical-align:middle;font-size:14px;}
.basket-table tr:last-child td{border-bottom:0;}
.basket-thumb{width:72px;}
.basket-thumb img{width:64px;height:64px;object-fit:cover;border:1px solid var(--line-light);border-radius:4px;background:#fff;}
.basket-name{font-weight:600;color:var(--ink);}
.basket-name:hover{color:var(--accent);}
.basket-meta{font-size:12px;color:var(--muted-dark);margin-top:3px;}
.qty-col{width:130px;}
.qty-col .qty-input{width:100px;padding:9px;}
.qty-note{margin:6px 0 0;font-size:12px;color:#8a5a00;}
.remove-button{color:var(--steel);text-decoration:underline;font-size:13px;}
.basket-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin:18px 0;}
.basket-actions .link-button{color:var(--steel);text-decoration:underline;font-size:14px;}
.btn-secondary{padding:11px 20px;border:1px solid var(--ink);border-radius:4px;background:#fff;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;}
.btn-secondary:hover{background:var(--ink);color:#fff;}
.basket-next{margin-top:8px;padding:14px 16px;background:#fff;border:1px dashed var(--line-light);border-radius:6px;font-size:14px;}
.basket-next p{margin:0;}

@media (max-width:700px){
  .basket-table thead{display:none;}
  .basket-table tr{display:grid;grid-template-columns:72px 1fr;gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--line-light);}
  .basket-table td{border:0;padding:4px 10px;}
  .basket-table td.basket-thumb{grid-row:span 4;}
  .qty-col{width:auto;}
}
.basket-by{font-size:12px;color:var(--steel);margin-top:3px;font-style:italic;}

/* Add to basket on product cards */
.card-buy{margin-top:6px;}
.card-buy-row{display:flex;align-items:center;gap:5px;}
.card-buy .qty-input{flex:0 0 46px;width:46px;height:28px;padding:2px 3px;font-size:13px;}
.card-buy .btn-primary{flex:0 0 auto;height:28px;padding:0 10px;border:0;cursor:pointer;font-size:12px;line-height:1;}
.card-buy .btn-primary:disabled{opacity:.6;cursor:wait;}
/* Below the button, so notes appearing here never move it. */
.card-status{margin:4px 0 0;font-size:12px;line-height:16px;color:var(--muted-dark);}
.card-status:empty{display:none;}
.card-status a{color:var(--steel);text-decoration:underline;}
.card-in-basket{color:#2e7d32;font-weight:600;}
/* Basket page rounding note: floats below the box instead of pushing the buttons down. */
.basket-table .qty-col{position:relative;}
.basket-table .qty-note{
  position:absolute;left:12px;top:calc(100% - 10px);z-index:3;
  width:max-content;max-width:230px;margin:0;padding:5px 9px;
  background:#fff8e1;border:1px solid #f0d48a;border-radius:4px;
  box-shadow:0 4px 12px rgba(0,0,0,.12);color:#6b4a00;
}

/* =========================================================
   PRODUCT CARDS: every part lines up across a row
   The name has a fixed three-line box (longer names end in "…"; the full name is
   in the tooltip and on the product page) and the stock status a fixed one-line
   space, so the SKU/price line, stock status and Add to basket sit at the same
   height on every card, whatever the length of the name.
   ========================================================= */
.card-link .name{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
  line-height:1.35;
  height:calc(1.35em * 3);
}
.card-link .meta{white-space:nowrap;}
/* Stock status and its due date / "Please call" / "Discontinued" share one line. */
.card-stock{height:16px;margin-top:6px;}
.card-stock .stock-compact{display:flex;flex-wrap:nowrap;max-width:100%;line-height:16px;gap:0 4px;}
.card-stock .stock-dot{margin-right:1px;}
.card-stock .stock-due::before{content:"\00b7\00a0";}
.card-stock .stock-label{flex:0 0 auto;white-space:nowrap;}
.card-stock .stock-due{flex:0 1 auto;min-width:0;padding-left:0;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* "In basket" quantity on product cards */
.card-inbasket{margin-top:5px;}
.card-inbasket[hidden]{display:none;}
.card-inbasket-label{flex:0 0 auto;font-size:12px;font-weight:600;color:#2e7d32;margin-right:1px;}
.card-inbasket .qty-input{flex:0 0 46px;width:46px;height:26px;padding:2px 3px;font-size:13px;}
.btn-small{height:26px;padding:0 10px;font-size:12px;line-height:1;}

/* =========================================================
   BRANDS
   ========================================================= */
.brand-logo img{max-height:48px;width:auto;margin:0 0 10px;}
.range-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;}
.range-links a{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border:1px solid var(--line-light);border-radius:16px;
  background:#fff;font-size:13px;color:var(--ink);
}
.range-links a span{font-size:11px;color:var(--muted-dark);}
.range-links a:hover{border-color:var(--accent);color:var(--accent);}
.range-links a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff;}
.range-links a[aria-current="page"] span{color:#d8d3c9;}

/* Brands dropdown: brands with their ranges, flowing across columns */
.brand-menu{columns:4;column-gap:28px;}
.brand-menu-group{margin:0 0 14px;}
.brand-menu-group > a{
  display:flex;justify-content:space-between;gap:8px;
  padding:6px 0;font-weight:700;font-size:14px;color:var(--ink);
  border-bottom:1px solid var(--line-light);break-after:avoid;
}
.brand-menu-group > a:hover{color:var(--accent);}
.brand-menu-group ul{list-style:none;margin:4px 0 0;padding:0;}
.brand-menu-group li a{display:flex;justify-content:space-between;gap:8px;padding:3px 0 3px 10px;font-size:13px;color:#3a3f42;}
.brand-menu-group li a:hover{color:var(--accent);}
.brand-menu .count{font-family:var(--font-mono);font-size:11px;color:var(--muted-dark);}
.dropdown-inner.dropdown-inner-full{grid-template-columns:1fr;}
/* Distributors and Categories: groups kept whole, one per column */
.brand-menu.menu-groups{columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 28px;align-items:start;}
.brand-menu.menu-groups.menu-tabs{grid-template-columns:repeat(5,minmax(0,1fr));}
@media (max-width:900px){
  .brand-menu{columns:1;}
  .brand-menu.menu-groups,.brand-menu.menu-groups.menu-tabs{grid-template-columns:1fr;}
  .offcanvas .brand-menu-group > a,.offcanvas .brand-menu-group li a{color:#fff;border-color:var(--line);}
}
.dropdown-all{margin:10px 0 0;}

/* ---------- Content pages (About Us etc., edited in Admin → Pages) ---------- */
.content-page{padding-bottom:56px;}
.content-page .breadcrumb{padding-left:0;padding-right:0;}
.page-article{max-width:980px;}
.page-title{font-family:var(--font-display);font-size:34px;line-height:1.15;margin:8px 0 24px;}
.page-images{display:grid;gap:16px;margin:0 0 32px;}
.page-images-2{grid-template-columns:1fr 1fr;}
.page-images-3{grid-template-columns:repeat(3,1fr);}
.page-images-4{grid-template-columns:repeat(4,1fr);}
.page-images figure{margin:0;}
.page-images img{display:block;width:100%;height:auto;border-radius:4px;}
.page-body{font-size:16px;line-height:1.65;max-width:820px;}
.page-body h2{font-family:var(--font-display);font-size:24px;margin:32px 0 10px;}
.page-body h3{font-size:19px;margin:26px 0 8px;}
.page-body h4{font-size:16px;margin:22px 0 6px;}
.page-body > :first-child{margin-top:0;}
.page-body p{margin:0 0 14px;}
.page-body a{color:var(--accent);}
.page-body ul,.page-body ol{margin:0 0 14px;padding-left:24px;}
.page-body img{max-width:100%;height:auto;border-radius:4px;}
.page-body blockquote{margin:0 0 14px;padding:4px 0 4px 16px;border-left:3px solid var(--line-light);color:var(--muted-dark);}
.page-body img[width]{width:auto;}
/* <ul class="tiles">: a grid of picture cards, e.g. catalogue covers. Each <li> holds a link with a picture and a caption. */
.page-body ul.tiles,.page-body ol.tiles{list-style:none;padding:0;margin:8px 0 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:20px;}
.page-body .tiles li{margin:0;}
.page-body .tiles a{display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;padding:12px;border:1px solid var(--line-light);border-radius:6px;color:var(--ink);font-weight:600;font-size:14px;text-align:center;text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease;}
.page-body .tiles a:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.08);}
.page-body .tiles br{display:none;}
.page-body .tiles img,.page-body .tiles picture{display:block;width:100%;height:auto;border-radius:3px;}
.page-body hr{border:0;border-top:1px solid var(--line-light);margin:28px 0;}
.page-body table{border-collapse:collapse;margin:0 0 14px;}
.page-body th,.page-body td{border:1px solid var(--line-light);padding:6px 10px;text-align:left;vertical-align:top;}
.page-draft-note{background:#fff4d6;border-left:4px solid #d99a00;padding:8px 12px;margin:0 0 16px;}
.page-edit-link{margin-top:32px;font-size:14px;}
@media (max-width:700px){
  .page-title{font-size:27px;}
  .page-images-3,.page-images-4{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .page-images-2,.page-images-3,.page-images-4{grid-template-columns:1fr;}
}

/* Logged-in customer prices (app/account/prices.php) */
.card .meta .price-own{color:var(--accent);}
.card .meta .price-more{margin-left:1px;font-weight:600;}
.price-breaks{list-style:none;margin:-8px 0 12px;padding:0;font-size:14px;color:var(--ink);}
.price-breaks li{margin:2px 0;}
.price-guide{margin:-6px 0 16px;font-size:13px;color:var(--muted-dark);}
.price-ask{display:block;margin:0 0 12px;}

/* Basket prices */
.basket-table .num{text-align:right;}
.basket-table th.num{text-align:right;}
.price-col{white-space:nowrap;width:110px;}
.line-total{font-weight:600;}
.basket-unit-price{margin-top:4px;font-size:14px;color:var(--ink);}
.basket-next-price{color:var(--accent);}
.basket-total-row td{border-top:2px solid var(--ink);font-weight:700;font-size:15px;background:#faf9f6;}
.basket-total-note{font-weight:400;font-size:12px;color:var(--muted-dark);}
.basket-total-note:empty{display:none;}
.basket-table tr.is-updating td{opacity:.6;}
.basket-price-note{font-size:13px;color:var(--muted-dark);margin:10px 0 0;}
@media (max-width:760px){
  .price-col{width:auto;}
}

/* =========================================================
   SCAN TO ORDER (/scan)
   ========================================================= */
.scan-layout{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:40px;align-items:start;margin-top:8px;}
.scan-view{position:relative;aspect-ratio:4/3;background:#1c2124;border-radius:8px;overflow:hidden;}
.scan-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.scan-guide{display:none;position:absolute;left:10%;right:10%;top:30%;bottom:30%;border:3px solid rgba(255,255,255,.9);border-radius:8px;box-shadow:0 0 0 999px rgba(0,0,0,.28);}
.scan-view.is-live .scan-guide{display:block;}
.scan-view.flash-good .scan-guide{animation:scan-good .6s ease;}
.scan-view.flash-bad .scan-guide{animation:scan-bad .9s ease;}
@keyframes scan-good{0%,60%{border-color:#3fb26b;box-shadow:0 0 0 999px rgba(20,90,45,.35);}}
@keyframes scan-bad{0%,70%{border-color:#e0a030;box-shadow:0 0 0 999px rgba(120,70,0,.35);}}
.scan-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;color:#e8e4dc;}
.scan-idle[hidden]{display:none;}
.scan-idle .btn-primary{flex:0 0 auto;border:0;padding:14px 28px;font-size:16px;cursor:pointer;}
.scan-idle-note{font-size:13px;margin:0;color:#c9c4ba;}
.scan-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;min-height:44px;}
.scan-controls [hidden]{display:none;}
.scan-controls .btn-secondary[aria-pressed="true"]{background:var(--ink);color:#fff;}
.scan-status{flex:1 1 200px;margin:0;font-size:14px;color:var(--steel);}
.scan-status.is-error{color:var(--accent);font-weight:600;}
.scan-typed{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-light);}
.scan-typed label,.scan-note label{display:block;font-weight:600;font-size:14px;margin-bottom:6px;}
.scan-typed-row{display:flex;gap:8px;}
.scan-typed-row[hidden]{display:none;}
.scan-typed-row input{flex:1 1 auto;min-width:0;padding:10px 12px;border:1px solid var(--line-light);border-radius:4px;font:inherit;font-size:16px;}
.scan-typed-note{font-size:12px;color:var(--muted-dark);margin:6px 0 0;}
.scan-results-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;}
.scan-results-head h2{margin:0;font-family:var(--font-display);font-size:22px;}
.scan-results-head .btn-secondary{text-decoration:none;padding:8px 14px;font-size:14px;}
.scan-list{list-style:none;margin:0;padding:0;}
.scan-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line-light);}
.scan-item.is-new{animation:scan-new 1.2s ease;}
@keyframes scan-new{0%{background:#fbf1d6;}}
.scan-item.is-updating{opacity:.6;}
.scan-item.is-removed .scan-name{text-decoration:line-through;color:var(--muted-dark);}
.scan-thumb{width:64px;height:64px;background:#fff;border:1px solid var(--line-light);border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.scan-thumb img{width:100%;height:100%;object-fit:contain;}
.scan-thumb-unknown{font-family:var(--font-display);font-size:28px;font-weight:800;color:#b07a10;background:#fbf1d6;border-color:#ecd59a;}
.scan-name{font-weight:600;color:var(--ink);}
.scan-meta,.scan-added{font-size:12px;color:var(--muted-dark);margin-top:2px;}
.scan-stock{margin-top:4px;}
.scan-price{font-size:13px;margin-top:4px;}
.scan-problem{margin-top:6px;font-size:13px;font-weight:600;color:var(--accent);}
.scan-unknown .scan-info,.scan-unavailable .scan-info{grid-column:2 / -1;}
.scan-note{margin-top:8px;}
.scan-note label{font-weight:400;font-size:13px;}
.scan-note input{font-size:15px;}
.scan-note-done{font-size:13px;color:var(--steel);margin:6px 0 0;}
.scan-qty{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.scan-qty label{font-size:12px;color:var(--muted-dark);}
.scan-qty .qty-input{width:84px;}
.scan-line-total{font-weight:600;font-size:14px;}
.scan-qty .link-button[hidden]{display:none;}
@media (max-width:900px){
  .scan-layout{grid-template-columns:1fr;gap:24px;}
  .scan-item{grid-template-columns:52px minmax(0,1fr);}
  .scan-thumb{width:52px;height:52px;}
  .scan-qty{grid-column:2;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px;}
}
@media (max-width:900px){.wrap.scan-page{padding-left:16px;padding-right:16px;}}

/* =========================================================
   CHECKOUT AND ORDERS
   ========================================================= */
.basket-actions .basket-checkout{flex:0 0 auto;border:0;padding:12px 28px;font-size:15px;cursor:pointer;margin-left:auto;}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:start;}
.checkout-heading{font-family:var(--font-display);font-size:20px;margin:0 0 12px;}
.checkout-table td,.checkout-table th{vertical-align:top;}
.checkout-form-panel{background:#fff;border:1px solid var(--line-light);border-radius:6px;padding:24px;}
.checkout-form label{display:block;font-weight:600;font-size:14px;margin:16px 0 6px;}
.checkout-form label:first-of-type{margin-top:0;}
.checkout-form .optional{font-weight:400;color:var(--muted-dark);}
.checkout-form input[type=text],.checkout-form textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line-light);border-radius:4px;font:inherit;font-size:16px;}
.checkout-form textarea{resize:vertical;}
.checkout-form [aria-invalid="true"]{border-color:var(--accent);}
.field-hint{font-size:12px;color:var(--muted-dark);margin:4px 0 0;}
.checkout-deliver{margin:18px 0 0;font-size:14px;}
.checkout-submit{display:block;width:100%;border:0;padding:14px 24px;font-size:16px;cursor:pointer;margin-top:18px;}
.checkout-submit[disabled]{opacity:.55;cursor:not-allowed;}
.site-flash ul{margin:6px 0 6px 18px;padding:0;}
.site-flash p{margin:0;}
.order-thanks{background:#eef6ef;border:1px solid #b9d9bf;border-radius:6px;padding:20px 24px;margin:8px 0 24px;}
.order-thanks h1{font-family:var(--font-display);font-size:26px;margin:0 0 6px;}
.order-thanks p{margin:0;}
.order-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 28px;margin:0 0 24px;}
.order-facts > div{border-top:1px solid var(--line-light);padding-top:8px;}
.order-facts dt{font-size:12px;color:var(--muted-dark);text-transform:uppercase;letter-spacing:.05em;}
.order-facts dd{margin:4px 0 0;font-weight:600;overflow-wrap:anywhere;}
@media (max-width:900px){
  .checkout-layout{grid-template-columns:1fr;gap:24px;}
  .wrap.checkout-page,.wrap.order-page,.wrap.orders-page{padding-left:16px;padding-right:16px;}
  .basket-actions .basket-checkout{width:100%;margin-left:0;}
}

/* Top of every dropdown: small heading on the left, "Shop all ..." on the right */
.dropdown-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line-light);}
.dropdown-top .dropdown-eyebrow{margin-bottom:0;}
.dropdown-shop-all{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--accent);}
.dropdown-shop-all:hover{color:var(--navhover);text-decoration:underline;}
@media (max-width:900px){
  .offcanvas .dropdown-top{border-color:var(--line);}
  .offcanvas .dropdown-shop-all{color:#fff;}
}
.order-status{display:inline-block;padding:2px 8px;border-radius:10px;background:var(--paper-dim);font-size:13px;font-weight:600;}
.erp-lines{margin-bottom:24px;}
.erp-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px 40px;margin:0 0 24px;}
.erp-list{list-style:none;margin:0;padding:0;}
.erp-list li{padding:10px 0;border-bottom:1px solid var(--line-light);font-size:14px;}
.mono-text{font-family:var(--font-mono);font-size:13px;}
.order-as-placed{margin:8px 0 24px;}
.order-as-placed > summary{cursor:pointer;font-weight:600;padding:8px 0;}
@media (max-width:700px){ .erp-lines{display:block;overflow-x:auto;} }

/* Billing accounts: switch between delivery accounts */
.account-switch ul{list-style:none;margin:10px 0 0;padding:0;}
.account-switch li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line-light);}
.account-switch li.is-current{background:#f7f3ea;margin:0 -10px;padding:10px;}
.account-switch form{margin:0;}
.account-switch .btn-secondary{padding:7px 12px;font-size:13px;white-space:nowrap;}
.acting-code{font-weight:400;color:var(--muted-dark);}

/* Favourites and order again */
.fav-form{display:flex;align-items:center;gap:16px;margin:4px 0 18px;}
.fav-toggle{font-weight:600;color:var(--accent);}
.fav-toggle.is-fav{color:#b07a10;}
.fav-link{font-size:13px;}
.favourites-table .tick-col{width:32px;text-align:center;}
.favourites-table tr.is-gone{opacity:.6;}
.fav-actions{white-space:nowrap;}
.fav-actions .link-button{margin-left:10px;}
.reorder-form{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:10px 0 18px;}
.reorder-form .btn-primary{flex:0 0 auto;border:0;padding:12px 22px;cursor:pointer;font-size:15px;}
.order-favs{margin:0 0 20px;}
.order-favs > summary{cursor:pointer;font-weight:600;padding:6px 0;}
.order-favs ul{list-style:none;margin:6px 0 0;padding:0;}
.order-favs li form{display:flex;align-items:center;gap:8px;margin:0;padding:6px 0;border-bottom:1px solid var(--line-light);}
.order-favs .fav-toggle{font-size:18px;line-height:1;}

/* Small product pictures on order, checkout and favourites lines */
.line-product{display:flex;align-items:center;gap:12px;}
.line-thumb{flex:0 0 48px;width:48px;height:48px;border:1px solid #ddd8ce;border-radius:4px;background:#fff;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;}
.line-thumb picture,.line-thumb img{display:block;width:100%;height:100%;object-fit:contain;}

.fav-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px;margin:0 0 16px;padding:12px 14px;background:#fff;border:1px solid var(--line-light);border-radius:6px;}
.fav-filters label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted-dark);}
.fav-filters select{min-width:150px;padding:8px 10px;border:1px solid var(--line-light);border-radius:4px;font:inherit;font-size:14px;color:var(--ink);background:#fff;}
.fav-clear{font-size:13px;align-self:center;}
.fav-count{margin-left:auto;align-self:center;font-size:13px;color:var(--muted-dark);}

/* Staff working as a customer */
.staff-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:8px 24px;background:#1c2124;color:#f4f1ea;font-size:13px;}
.staff-bar a{color:#f3d3d7;text-decoration:underline;}
.staff-bar form{margin:0 0 0 auto;}
.staff-bar button{background:#8B2F3B;color:#fff;border:0;border-radius:4px;padding:6px 12px;font:inherit;font-weight:600;cursor:pointer;}

/* Order page: deliveries first; cancelled lines stand out */
.erp-panels > section{background:#fff;border:1px solid var(--line-light);border-radius:6px;padding:16px 18px;}
.erp-panels .erp-list > li:last-child{border-bottom:0;}
.erp-item-head{font-size:14px;}
.erp-tracking{margin:6px 0 4px;padding:6px 10px;background:#eef6ef;border:1px solid #b9d9bf;border-radius:4px;font-size:14px;font-weight:600;display:inline-block;}
.erp-tracking .mono-text{font-size:15px;margin-left:6px;user-select:all;}
.erp-contents{list-style:none;margin:6px 0 0;padding:0;font-size:13px;}
.erp-contents li{padding:2px 0;}
.cancelled-note{margin:0 0 14px;padding:10px 14px;background:#fbe9eb;border:1px solid #a4232f;border-left-width:4px;border-radius:4px;color:#7d1a24;font-size:14px;}
.erp-lines tr.is-cancelled td{background:#fdf1f2;}
.cancelled-badge{display:inline-block;padding:2px 8px;border-radius:10px;background:#a4232f;color:#fff;font-size:12px;font-weight:700;white-space:nowrap;}

.cancelled-note p{margin:0 0 6px;}
.cancelled-note ul{list-style:none;margin:0;padding:0;}
.cancelled-note li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 0;border-top:1px solid #f0c9ce;}
.cancelled-note li.is-back{background:#eef6ef;margin:0 -14px;padding:8px 14px;border-top-color:#b9d9bf;color:var(--ink);}
.cancelled-what{display:flex;align-items:center;gap:10px;flex:1 1 280px;}
.back-in-stock{display:inline-block;padding:3px 10px;border-radius:10px;background:#2e7d4a;color:#fff;font-size:12px;font-weight:700;}
.cancelled-add{display:flex;align-items:center;gap:8px;margin:0;}
.cancelled-add .qty-input{width:80px;}
.cancelled-add .btn-secondary{padding:8px 14px;font-size:14px;}

/* =========================================================
   HOME PAGE: news and new products (Admin > Home page)
   ========================================================= */
.home-feature{display:grid;gap:32px;margin:32px auto 8px;}
.home-split{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start;}
.home-news{background:#fff;border:1px solid var(--line-light);border-radius:6px;overflow:hidden;}
.home-news-img picture,.home-news-img img{display:block;width:100%;height:auto;}
.home-news-body{padding:20px 22px 24px;}
.home-news-body h2{font-family:var(--font-display);font-size:24px;line-height:1.2;margin:0 0 10px;}
.home-news-body p{margin:0 0 14px;line-height:1.5;}
.home-news-link{font-size:14px;}
.home-full .home-news{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.home-full .home-news-body{align-self:center;padding:28px 36px;}
.home-full .home-news:not(:has(.home-news-img)){grid-template-columns:1fr;}
.home-feed .section-heading{margin-top:0;}
.collection-card .thumb picture,.collection-card .thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.collection-text{font-size:13px;color:var(--muted-dark);margin:2px 0 6px;line-height:1.4;}
.collection-tag{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);}
@media (max-width:900px){
  .home-split{grid-template-columns:1fr;}
  .home-full .home-news{grid-template-columns:1fr;}
}
.wrap.home-feature{padding-left:0;padding-right:0;}
@media (max-width:1240px){.wrap.home-feature{padding-left:24px;padding-right:24px;}}
@media (max-width:700px){.wrap.home-feature{padding-left:16px;padding-right:16px;}}

/* New products carousel: one row that slides along (arrows, swipe, and moves on by itself) */
.feed-carousel{position:relative;--feed-per:5;--feed-gap:20px;}
.home-split .feed-carousel{--feed-per:3;}
.feed-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--feed-per) - 1) * var(--feed-gap)) / var(--feed-per));
  gap:var(--feed-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px;}
.feed-track::-webkit-scrollbar{display:none;}
.feed-slide{scroll-snap-align:start;min-width:0;}
.feed-arrow{position:absolute;top:calc(50% - 40px);z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-light);
  background:#fff;color:var(--ink);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12);}
.feed-arrow:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.feed-prev{left:-18px;}
.feed-next{right:-18px;}
.feed-carousel.no-scroll .feed-arrow{display:none;}
@media (max-width:1100px){ .feed-carousel{--feed-per:4;} .home-split .feed-carousel{--feed-per:2;} }
@media (max-width:900px){ .feed-carousel,.home-split .feed-carousel{--feed-per:3;} }
@media (max-width:600px){ .feed-carousel,.home-split .feed-carousel{--feed-per:2;--feed-gap:12px;} .feed-prev{left:-8px;} .feed-next{right:-8px;} }
@media (prefers-reduced-motion:reduce){ .feed-track{scroll-behavior:auto;} }

/* Brand page: hint for picking several ranges (only where there is a keyboard and mouse) */
.range-tip{display:none;margin:-16px 0 20px;font-size:12px;color:var(--muted-dark);}
.range-tip kbd{font:inherit;font-size:11px;padding:1px 5px;border:1px solid var(--line-light);border-radius:3px;background:#fff;}
@media (hover:hover) and (pointer:fine){.range-tip{display:block;}}

/* Footer: social media links (set in Admin > Settings), each network's own icon in a round button */
.footer-social{max-width:var(--container);margin:0 auto;padding:22px 24px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.footer-social-label{font-family:var(--font-display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-weight:700;}
.social-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.social-links a{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border-radius:21px;border:1px solid var(--line-light);background:#fff;color:var(--ink);font-size:13px;font-weight:600;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;}
.social-links a.has-icon{width:42px;padding:0;}
.social-links a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:0 3px 10px rgba(0,0,0,.08);}
.social-links img{width:24px;height:24px;object-fit:contain;display:block;}
.staff-bar-view a{margin-left:auto;}

/* Home page news from LinkedIn: one post at a time (side by side layout) or up to three (full
   width), scrolling sideways on its own every few seconds; arrows, dots and a pause button. */
.home-li{display:flex;flex-direction:column;padding:18px 0 14px;}
.home-li-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 20px 12px;}
.home-li-head h2{margin:0;}
.home-li-follow{font-size:13px;color:var(--accent);white-space:nowrap;}
.li-carousel{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;}
.li-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:0 20px 4px;scroll-padding-inline:20px;scrollbar-width:none;overscroll-behavior-x:contain;}
.li-track::-webkit-scrollbar{display:none;}
.li-track:focus-visible{outline:3px solid #f2c230;outline-offset:-3px;}
.li-slide{flex:0 0 100%;scroll-snap-align:start;display:flex;flex-direction:column;border:1px solid var(--line-light);border-radius:6px;overflow:hidden;background:#fff;min-width:0;}
.home-full .li-slide{flex-basis:calc((100% - 32px) / 3);}
.li-img{display:block;aspect-ratio:1.91/1;background:#f4f1ea;overflow:hidden;}
.li-img img{width:100%;height:100%;object-fit:cover;display:block;}
.li-body{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px;flex:1;}
.li-date{font-size:12px;color:var(--muted-dark);text-transform:uppercase;letter-spacing:.04em;}
.li-text{margin:0;font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;}
.li-article{font-size:13px;font-weight:600;color:var(--ink);}
.li-more{margin-top:auto;font-size:14px;}
.li-controls{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px 0;}
.li-arrow,.li-pause{width:32px;height:32px;border-radius:16px;border:1px solid var(--line-light);background:#fff;color:var(--ink);font-size:18px;line-height:1;cursor:pointer;}
.li-pause{font-size:10px;letter-spacing:-1px;}
.li-arrow:hover,.li-pause:hover{border-color:var(--accent);color:var(--accent);}
.li-dots{display:flex;gap:6px;}
.li-dots i{width:7px;height:7px;border-radius:4px;background:var(--line-light);transition:background-color .2s ease,width .2s ease;}
.li-dots i.on{background:var(--accent);width:18px;}
@media (max-width:900px){.home-full .li-slide{flex-basis:100%;}}
@media (prefers-reduced-motion:reduce){.li-track{scroll-behavior:auto;}}

/* Image bank download: the bar above a list and each product's "Images" tick box */
.ib-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 16px;padding:10px 12px;border:1px solid var(--line-light);border-radius:6px;background:#fff;}
.ib-bar .btn-small{height:auto;padding:7px 14px;font-size:13px;}
.ib-bar button{width:auto;flex:0 0 auto;}
.ib-bar button[disabled]{opacity:.45;cursor:not-allowed;}
.ib-count{font-size:13px;color:var(--muted-dark);}
.image-select{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted-dark);cursor:pointer;user-select:none;}
.image-select input{width:16px;height:16px;margin:0;accent-color:var(--accent);cursor:pointer;}
.card .image-select{margin:2px 0 0;padding:0 2px;}
.basket-table .image-select{margin-top:4px;}

/* Scan page: paste a list */
.scan-paste{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-light);}
.scan-paste summary{cursor:pointer;font-weight:600;font-size:14px;}
.scan-paste form{margin-top:10px;}
.scan-paste label{display:block;font-weight:600;font-size:14px;margin-bottom:6px;}
.scan-paste textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line-light);border-radius:4px;font:14px/1.5 ui-monospace,Menlo,Consolas,monospace;resize:vertical;}
.scan-paste-actions{margin:8px 0;}
.scan-paste-summary{margin:10px 0 6px;font-size:14px;}
.scan-paste-error{color:#a32020;}
.scan-paste-problems{margin:0 0 6px;padding-left:18px;font-size:13px;}
.scan-paste-problems li{margin-bottom:4px;}
.scan-paste-added{font-size:13px;}
.scan-paste-added ul{margin:6px 0 0;padding-left:18px;}
.scan-paste .mono{font-family:ui-monospace,Menlo,Consolas,monospace;background:#f4f1ea;padding:0 4px;border-radius:3px;}
.scan-paste-actions .btn-primary{padding:10px 18px;height:auto;}