/* ==========================================================================
   chamkl - specification catalogue theme
   White ground, deep teal, lime used sparingly. Products read as technical
   data, model numbers louder than everything around them.
   ========================================================================== */

:root{
  --ink:#14201f;
  --ink-2:#5a6b68;
  --ink-3:#8b9997;
  --line:#e4ebe9;
  --line-2:#d3dedb;
  --paper:#ffffff;
  --tint:#f7faf9;
  --teal:#0d5c52;
  --teal-dark:#0a4a42;
  --teal-soft:#e8f2f0;
  --lime:#c8e06a;
  --lime-ink:#2f3b06;
  --copper:#b4661f;
  --ok:#12784a;   --ok-bg:#e6f5ec;   --ok-line:#a9dcc0;
  --warn:#9a5b00; --warn-bg:#fdf3e0; --warn-line:#f0d79a;
  --out:#6b7378;  --out-bg:#f2f4f5;  --out-line:#dfe3e5;
  --danger:#b32d2e;
  --maxw:1280px;
  --gap:32px;
  --mono:"Consolas","SF Mono",Menlo,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--paper);color:var(--ink);
  font:15px/1.62 "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--teal)}
button{font:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.3px}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.mono{font-family:var(--mono)}

.acb-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gap)}
.acb-skip{position:absolute;left:-9999px}
.acb-skip:focus{left:8px;top:8px;z-index:99;background:#fff;padding:8px 14px;
  border:1px solid var(--line);border-radius:8px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;padding:12px 22px;font-size:14px;font-weight:600;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  background:none;color:inherit;line-height:1.2;text-align:center}
.btn--solid{background:var(--teal);color:#fff}
.btn--solid:hover{background:var(--teal-dark);color:#fff}
.btn--out{background:transparent;color:var(--teal);border-color:var(--line-2)}
.btn--out:hover{border-color:var(--teal);color:var(--teal)}
.btn--lime{background:var(--lime);color:var(--lime-ink)}
.btn--lime:hover{filter:brightness(.96);color:var(--lime-ink)}
.btn--sm{padding:9px 16px;font-size:13px}
.btn--block{width:100%}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:7px;border-radius:8px;
  padding:6px 11px;font-size:11.5px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;white-space:nowrap;border:1px solid;line-height:1.35}
.badge i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 8px}
.badge--in{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.badge--low{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.badge--out{color:var(--out);background:var(--out-bg);border-color:var(--out-line)}
.badge-note{font-size:12px;color:var(--ink-2);margin-left:8px}
.badge-plain{display:inline-flex;align-items:center;border-radius:8px;padding:6px 11px;
  font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  border:1px solid var(--line);background:var(--tint);color:var(--ink-2)}

/* ==========================================================================
   Top strip and header
   ========================================================================== */
.acb-top{background:var(--paper);border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--ink-2)}
.acb-top__in{display:flex;justify-content:space-between;align-items:center;
  min-height:40px;gap:16px;padding-top:6px;padding-bottom:6px}
.acb-top b{color:var(--teal);font-weight:600}
.acb-top__r{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.acb-top__ok{color:var(--ok);font-weight:600}

.acb-header{background:var(--paper);border-bottom:1px solid var(--line);
  position:relative;z-index:30}
.acb-header__in{display:flex;align-items:center;gap:26px;min-height:84px;
  padding-top:10px;padding-bottom:10px}
.acb-logo{display:flex;align-items:center;gap:11px;font-weight:700;font-size:20px;
  color:var(--teal);flex:0 0 auto}
.acb-logo__mark{width:38px;height:38px;border-radius:11px;background:var(--teal);
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px}

.acb-nav{display:flex;gap:23px;font-size:14.5px;color:var(--ink-2);font-weight:500}
.acb-nav a:hover{color:var(--teal)}
.acb-header__act{margin-left:auto;display:flex;align-items:center;gap:11px;flex:0 0 auto}

.acb-hsearch{flex:1 1 300px;max-width:480px;display:flex;align-items:stretch;
  border:2px solid var(--teal);border-radius:11px;overflow:hidden;background:#fff}
.acb-hsearch input{flex:1 1 0;min-width:0;border:0;outline:0;padding:10px 14px;
  font-size:14px;font-family:var(--mono);background:transparent;color:var(--ink)}
.acb-hsearch button{border:0;background:var(--teal);color:#fff;padding:0 16px;
  font-weight:700;font-size:13px;cursor:pointer}

/* ---------- model finder (home) ---------- */
.acb-finder{padding:44px 0 32px;border-bottom:1px solid var(--line)}
.acb-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--copper);margin-bottom:12px}
.acb-finder h1{font-size:40px;line-height:1.14;letter-spacing:-.9px;
  max-width:23ch;margin-bottom:14px}
.acb-finder h1 em{font-style:normal;color:var(--teal);
  border-bottom:3px solid var(--lime);padding-bottom:2px}
.acb-finder__sub{color:var(--ink-2);font-size:16px;max-width:64ch;margin-bottom:26px}

.acb-bigsearch{max-width:840px}
.acb-bigsearch__row{display:flex;align-items:stretch;background:#fff;
  border:2px solid var(--teal);border-radius:14px;overflow:hidden;
  box-shadow:0 6px 22px rgba(13,92,82,.09)}
.acb-bigsearch__row input{flex:1 1 0;min-width:0;border:0;outline:0;
  padding:19px 20px;font-size:16.5px;font-family:var(--mono);color:var(--ink)}
.acb-bigsearch__row button{border:0;border-radius:0;padding:0 28px;
  background:var(--teal);color:#fff;font-weight:700;font-size:15px;cursor:pointer}
.acb-bigsearch__hint{margin-top:11px;font-size:12.5px;color:var(--ink-3);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.acb-bigsearch__hint .ex{font-family:var(--mono);background:var(--teal-soft);
  color:var(--teal);border-radius:6px;padding:3px 9px;font-size:12px;
  border:1px solid #cfe4e0}

.acb-metrics{display:flex;flex-wrap:wrap;margin-top:30px;
  border-top:1px solid var(--line);padding-top:20px}
.acb-metric{padding-right:34px;margin-right:34px;border-right:1px solid var(--line)}
.acb-metric:last-child{border-right:0;margin-right:0;padding-right:0}
.acb-metric b{display:block;font-size:25px;letter-spacing:-.6px;color:var(--teal)}
.acb-metric span{font-size:12.5px;color:var(--ink-2)}

/* ==========================================================================
   Sections
   ========================================================================== */
.acb-sec{padding:44px 0}
.acb-sec--tight{padding-top:8px}
.acb-shead{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:20px}
.acb-shead h2{font-size:23px;letter-spacing:-.4px}
.acb-shead p{margin:5px 0 0;color:var(--ink-2);font-size:14px}
.acb-shead a{font-size:14px;color:var(--teal);font-weight:600;white-space:nowrap}

/* ---------- brands ---------- */
.acb-brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:12px}
.acb-brand{border:1px solid var(--line);border-radius:12px;padding:16px 15px;
  background:#fff;display:flex;flex-direction:column;gap:4px}
.acb-brand:hover{border-color:var(--teal);background:var(--tint)}
.acb-brand b{font-size:15px}
.acb-brand span{font-size:12px;color:var(--ink-3)}
.acb-brand .n{font-family:var(--mono);color:var(--teal);font-size:12.5px}

/* ---------- families ---------- */
.acb-families{border-top:1px solid var(--line)}
.acb-fam{display:grid;grid-template-columns:52px 1.6fr 1.1fr 110px 24px;
  align-items:center;gap:20px;padding:18px 6px;border-bottom:1px solid var(--line)}
.acb-fam:hover{background:var(--teal-soft)}
.acb-fam__ic{width:42px;height:42px;border-radius:11px;background:var(--teal-soft);
  color:var(--teal);display:grid;place-items:center;font-size:17px;
  border:1px solid #d5e8e4}
.acb-fam b{font-size:15.5px;display:block}
.acb-fam .d{font-size:13px;color:var(--ink-2)}
.acb-fam__cnt{font-family:var(--mono);font-size:13px;color:var(--ink-2);text-align:right}
.acb-fam__arw{color:var(--teal);text-align:right;font-size:16px}

/* ==========================================================================
   Product table - specification list, not a card grid
   ========================================================================== */
.acb-table{width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.acb-table thead th{text-align:left;font-size:11.5px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;
  padding:13px 18px;border-bottom:1px solid var(--line);background:var(--tint)}
.acb-table tbody td{padding:20px 18px;border-bottom:1px solid var(--line);
  vertical-align:middle}
.acb-table tbody tr:last-child td{border-bottom:0}
.acb-table tbody tr:hover td{background:#f4faf8}

.acb-pcell{display:flex;align-items:center;gap:18px}
/*
 * The image fills the frame and is scaled to fit inside it.
 *
 * WooCommerce returns the full size photograph when a requested size is missing, and
 * with only max-height set a tall image overflowed the frame sideways and was
 * clipped, leaving a sliver of the part number visible at the edge. Setting both
 * dimensions with object-fit:contain cannot overflow.
 */
.acb-pcell__thumb{width:104px;height:104px;flex:0 0 104px;border-radius:12px;
  background:#f2f7f5;border:1px solid var(--line);display:block;
  padding:9px;overflow:hidden;line-height:0}
.acb-pcell__thumb img{width:100%;height:100%;object-fit:contain;
  mix-blend-mode:multiply;border-radius:5px}
.acb-pcell__txt{min-width:0;flex:1 1 auto}
.acb-pcell__brand{font-size:11.5px;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;color:var(--copper)}
/*
 * The part number is one unbroken token and must stay readable. It is short enough to
 * fit at every width the site serves, so it never wraps; word-break:break-word would
 * have split it mid-token rather than keep it whole.
 */
.acb-pcell__pn{display:block;font-family:var(--mono);font-size:20px;font-weight:700;
  color:var(--teal);letter-spacing:-.3px;line-height:1.25;margin:1px 0 3px;
  overflow-wrap:normal;word-break:keep-all}
/*
 * The description is prose and must break between words, not inside them.
 * overflow-wrap:anywhere broke "Input" into "I" and "nput" at narrow widths; break-word
 * only splits a word when that word alone cannot fit, which is the honest fallback.
 */
.acb-pcell__nm{font-size:13.5px;color:var(--ink-2);line-height:1.5;
  display:block;overflow-wrap:break-word;word-break:normal;hyphens:none}

.acb-ks{font-family:var(--mono);font-size:13px;color:var(--ink);line-height:1.8}
.acb-ks i{color:var(--ink-3);font-style:normal;display:inline-block;min-width:92px}
.acb-pric{font-size:19px;font-weight:700;letter-spacing:-.3px;white-space:nowrap}
.acb-pric small{display:block;font-size:11.5px;color:var(--ink-3);font-weight:400;
  letter-spacing:0;margin-top:2px}
.acb-act{display:flex;flex-direction:column;gap:7px;min-width:112px}

/* The availability cell keeps the badge and its note on one line. */
.acb-avail{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.acb-avail .badge-note{margin-left:0;white-space:nowrap}

/* ==========================================================================
   Notice - says plainly that payment is not open
   ========================================================================== */
.acb-notice{display:flex;gap:13px;align-items:flex-start;border-radius:12px;
  padding:15px 18px;border:1px solid var(--warn-line);background:var(--warn-bg);
  color:#5c4405;font-size:13.5px;line-height:1.55}
.acb-notice b{color:#3f2f04}
.acb-notice--teal{border-color:#cfe4e0;background:var(--teal-soft);color:#0c3f39}
.acb-notice--teal b{color:#08302c}
.acb-notice__ic{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:#fff;border:1px solid currentColor;display:grid;place-items:center;
  font-weight:800;font-size:12px;margin-top:1px}

/* ==========================================================================
   Delivery-time line
   Shown beside the model search and beside the stock state. While the figure is
   unconfirmed it is dashed and carries an "awaiting confirmation" tag, so it reads
   as a claim under review rather than a published promise.
   ========================================================================== */
.acb-transit{display:flex;gap:12px;align-items:flex-start;margin:16px 0 0;
  padding:13px 16px;border-radius:12px;border:1px solid #cfe4e0;
  background:var(--teal-soft);color:#0c3f39;font-size:13.5px;line-height:1.5}
.acb-transit--preview{border-style:dashed;border-color:var(--warn-line);
  background:var(--warn-bg);color:#5c4405}
.acb-transit__ic{flex:0 0 auto;font-size:15px;line-height:1.4}
.acb-transit__body{min-width:0;display:block}
.acb-transit__line{display:block}
.acb-transit__line b{font-weight:700}
.acb-transit__tag{display:inline-block;margin-right:8px;padding:2px 8px;
  border-radius:6px;background:#fff;border:1px solid currentColor;
  font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  vertical-align:1px;white-space:nowrap}
.acb-transit__note{display:block;margin-top:4px;font-size:12.5px;opacity:.9}
.acb-transit__note--warn{font-style:italic}
.acb-transit + .acb-metrics{margin-top:22px}
.acb-box .acb-transit{margin:14px 0 0}

/* ==========================================================================
   Warranty and support notice, beside the price and the quote button
   Pale teal, with a small shield. It states the warranty length and offers
   support only: nothing about what is covered or who provides it, because none
   of that has been confirmed.
   ========================================================================== */
.acb-warranty{display:flex;gap:12px;align-items:flex-start;margin:16px 0 0;
  padding:14px 16px;border-radius:12px;border:1px solid #cfe4e0;
  background:#e9f4f2;color:#0c3f39}
.acb-warranty__ic{flex:0 0 auto;color:var(--teal);display:block;line-height:0;
  margin-top:1px}
.acb-warranty__body{min-width:0;display:block}
.acb-warranty__title{display:block;font-size:14px;font-weight:700;
  letter-spacing:.1px;color:#08302c;margin-bottom:3px}
.acb-warranty__text{display:block;font-size:12.8px;line-height:1.55;
  color:#124f48}

/* ==========================================================================
   Process
   ========================================================================== */
.acb-process{background:var(--tint);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.acb-process__in{padding:44px 0}
.acb-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-top:24px}
.acb-step{position:relative;padding-top:20px;border-top:2px solid var(--line-2)}
.acb-step--on{border-top-color:var(--teal)}
.acb-step .n{position:absolute;top:-15px;left:0;width:29px;height:29px;
  border-radius:50%;background:#fff;border:2px solid var(--line-2);
  color:var(--ink-2);display:grid;place-items:center;font-weight:800;font-size:13px}
.acb-step--on .n{background:var(--teal);border-color:var(--teal);color:#fff}
.acb-step b{display:block;font-size:15px;margin-bottom:5px}
.acb-step span{font-size:13.5px;color:var(--ink-2)}
.acb-assure{margin-top:24px;padding:15px 18px;background:#fff;
  border:1px solid var(--line);border-left:4px solid var(--lime);
  border-radius:10px;font-size:14px;color:var(--ink-2)}
.acb-assure b{color:var(--ink)}

/* ==========================================================================
   Quote form
   ========================================================================== */
.acb-quote{background:var(--teal);color:#fff;border-radius:18px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr}
.acb-quote__l{padding:38px 34px}
.acb-quote__l h2{font-size:26px;letter-spacing:-.4px;margin-bottom:12px}
.acb-quote__l p{color:#c3dbd7;font-size:14.5px;margin-bottom:18px}
.acb-quote__l ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.acb-quote__l li{display:flex;gap:11px;font-size:14px;color:#dcebe8}
.acb-quote__l li .t{color:var(--lime);font-weight:800}
.acb-quote__r{background:#fff;color:var(--ink);padding:30px}
.acb-quote__r h3{font-size:16px;margin-bottom:14px}
.acb-fr{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.acb-fr--one{grid-template-columns:minmax(0,1fr)}
.acb-fd label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);
  margin-bottom:5px}
.acb-fd input,.acb-fd textarea,.acb-fd select{width:100%;border:1px solid var(--line-2);
  border-radius:9px;padding:11px 13px;font-size:14px;outline:0;background:var(--tint);
  color:var(--ink);font-family:inherit}
.acb-fd input:focus,.acb-fd textarea:focus,.acb-fd select:focus{
  border-color:var(--teal);background:#fff}
.acb-fd textarea{min-height:78px;resize:vertical;font-family:var(--mono);font-size:13px}
.acb-fd--full{grid-column:1 / -1}

/* ==========================================================================
   Contact channels
   ========================================================================== */
.acb-channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.acb-ch{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;
  display:flex;gap:15px;align-items:flex-start}
.acb-ch:hover{border-color:var(--teal)}
.acb-ch__ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  font-weight:800;font-size:16px;flex:0 0 46px}
.acb-ch--wa .acb-ch__ic{background:#e7f7ec;color:#128c3e}
.acb-ch--em .acb-ch__ic{background:var(--teal-soft);color:var(--teal)}
.acb-ch--wc .acb-ch__ic{background:#e8f7e9;color:#07923b}
.acb-ch b{display:block;font-size:15px;margin-bottom:3px}
.acb-ch .s{font-size:13px;color:var(--ink-2);display:block;line-height:1.5}
.acb-ch .v{font-family:var(--mono);font-size:13.5px;color:var(--teal);
  font-weight:700;margin-top:6px;display:block}
.acb-ch .v--none{font-family:inherit;font-weight:600;color:var(--ink-3);font-size:13px}

/* ==========================================================================
   Footer
   ========================================================================== */
.acb-footer{background:#fff;border-top:1px solid var(--line);margin-top:44px}
.acb-footer__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;
  padding-top:42px;padding-bottom:42px}
.acb-footer h4{font-size:12.5px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:13px}
.acb-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;
  font-size:14px;color:var(--ink-2)}
.acb-footer__bot{border-top:1px solid var(--line);padding-top:18px;padding-bottom:18px;
  display:flex;justify-content:space-between;gap:16px;font-size:12.5px;
  color:var(--ink-3);flex-wrap:wrap}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.acb-crumb{font-size:12.5px;color:var(--ink-3);padding:16px 0 4px}
.acb-crumb a{color:var(--ink-2)}
.acb-crumb em{margin:0 7px;color:var(--line-2);font-style:normal}

/* ==========================================================================
   Product detail
   ========================================================================== */
.acb-pdp{display:grid;grid-template-columns:47% 1fr;
  grid-template-areas:"gallery buy" "legend legend" "specs specs";
  gap:22px 42px;align-items:start;padding:14px 0 8px}
.acb-gal{grid-area:gallery;min-width:0;overflow:hidden}
.acb-buy{grid-area:buy;min-width:0;overflow:hidden}
.acb-legend{grid-area:legend;min-width:0}
.acb-specs{grid-area:specs;min-width:0}

.acb-gal__stage{background:#f2f7f5;border:1px solid var(--line);border-radius:16px;
  display:grid;place-items:center;padding:26px;min-height:452px;position:relative}
.acb-gal__stage img{max-width:100%;max-height:400px;width:auto;height:auto;
  object-fit:contain;mix-blend-mode:multiply}
.acb-gal__slot{position:absolute;top:12px;left:12px;background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:4px 9px;font-size:11px;
  font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3)}
.acb-gal__thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.acb-gal__th{background:#f2f7f5;border:1px solid var(--line);border-radius:10px;
  width:84px;height:84px;display:grid;place-items:center;padding:7px;cursor:pointer;
  position:relative;flex:0 0 84px}
.acb-gal__th img{width:100%;height:100%;object-fit:contain;
  mix-blend-mode:multiply}
.acb-gal__th.is-on{border:2px solid var(--teal);background:#fff}
.acb-gal__th .n{position:absolute;bottom:3px;right:5px;font-size:10px;
  font-family:var(--mono);color:var(--ink-3)}
.acb-gal__legend{background:var(--tint);border:1px solid var(--line);
  border-radius:10px;padding:11px 16px;font-size:12px;color:var(--ink-3);margin:0}
.acb-gal__legend b{color:var(--teal);font-weight:700;font-family:var(--mono)}
.acb-gal__caption{font-size:12.5px;color:var(--ink-3);margin:9px 0 0}

/* The categories offered when a search finds nothing, so a miss is a step not a dead end. */
.acb-empty__cats{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0}
.acb-empty__cats a{text-decoration:none}
.acb-empty__cats a:hover{border-color:var(--teal);color:var(--teal)}

/* The narrower categories inside a broad one, so the range can be stepped down. */
.acb-subcats{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px}
.acb-subcats__label{font-size:12.5px;color:var(--ink-3);letter-spacing:.02em;text-transform:uppercase}
.acb-subcats a{text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.acb-subcats a:hover{border-color:var(--teal);color:var(--teal)}
.acb-subcats__n{font-size:11.5px;color:var(--ink-3);background:var(--line);border-radius:20px;padding:1px 7px}
.acb-subcats a:hover .acb-subcats__n{background:var(--teal-pale);color:var(--teal)}

/* --------------------------------------------------------------------------
   Gallery: the magnifier, and the full-screen viewer
   --------------------------------------------------------------------------
   The photograph is never cropped, reshaped or drawn on. The viewer loads the original
   upload and both it and the stage are drawn with object-fit: contain, so the file's own
   proportions are what is shown. The point of the magnifier is to read the labelling on
   the carton from the real photograph, so it too comes from the original file.
   -------------------------------------------------------------------------- */

/* The stage is the click target, so it says so. */
.acb-gal__stage{cursor:zoom-in}
.acb-gal__stage img{transition:opacity .18s ease}

.acb-gal__zoom{
  position:absolute;right:12px;bottom:12px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.94);
  color:var(--ink-2);font-family:var(--sans);font-size:12.5px;font-weight:600;
  letter-spacing:.1px;line-height:1;
  box-shadow:0 2px 10px rgba(9,49,44,.08);
  opacity:0;transition:opacity .16s ease,color .16s ease,border-color .16s ease}
.acb-gal__zoom-ic{display:block;line-height:0}
.acb-gal__stage:hover .acb-gal__zoom,
.acb-gal__zoom:focus-visible{opacity:1}
.acb-gal__zoom:hover{color:var(--teal);border-color:#cfe4e0}

/* There is no hover on a touch screen to reveal it, so it is simply shown. */
@media (hover:none){
  .acb-gal__zoom{opacity:1}
}

/*
 * The magnifier: a fixed-size disc over the pointer, filled with the same photograph at
 * a larger scale.
 */
.acb-lens{
  position:absolute;z-index:2;pointer-events:none;border-radius:50%;
  border:2px solid #fff;background-repeat:no-repeat;background-color:#f2f7f5;
  box-shadow:0 6px 22px rgba(9,49,44,.22);
  opacity:0;transition:opacity .14s ease}
.acb-lens.is-on{opacity:1}

/* --------------------------------------------------------------------------
   The full-screen viewer
   -------------------------------------------------------------------------- */
html.acb-viewer-open{overflow:hidden}

.acb-viewer{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;
  background:rgba(6,26,24,.94);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  padding:14px 16px 18px;
  overscroll-behavior:contain}
.acb-viewer[hidden]{display:none}

.acb-viewer__bar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:2px 2px 12px;color:#eaf3f1}
.acb-viewer__count{font-family:var(--mono);font-size:13px;color:#a9c4bf;
  letter-spacing:.4px}

/* The close control: large, labelled and high contrast, so it is never hunted for. */
.acb-viewer__close{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:11px 18px 11px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.10);
  color:#fff;font-family:var(--sans);font-size:14px;font-weight:700;
  line-height:1;letter-spacing:.2px}
.acb-viewer__close:hover{background:#fff;color:#0c2f2b;border-color:#fff}
.acb-viewer__close svg{display:block}
.acb-viewer__close-t{display:inline}

.acb-viewer__stage{
  flex:1 1 auto;position:relative;display:flex;align-items:center;
  justify-content:center;min-height:0;overflow:hidden;
  touch-action:none;cursor:grab}
.acb-viewer.is-zoomed .acb-viewer__stage{cursor:grabbing}
.acb-viewer__stage img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;
  transform-origin:center center;will-change:transform;
  transition:transform .16s ease;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
  touch-action:none}

.acb-viewer__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.12);
  color:#fff}
.acb-viewer__nav:hover{background:#fff;color:#0c2f2b;border-color:#fff}
.acb-viewer__nav[hidden]{display:none}
.acb-viewer__nav--prev{left:6px}
.acb-viewer__nav--next{right:6px}

.acb-viewer__cap{
  flex:0 0 auto;margin:12px 0 0;text-align:center;
  color:#c9dcd8;font-family:var(--sans);font-size:13px;line-height:1.5;
  padding:0 56px}

.acb-buy__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:6px}
.acb-buy__brand{font-size:12px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;color:var(--copper)}
.acb-buy__cats{font-size:12px;color:var(--ink-3)}
.acb-model{font-family:var(--mono);font-size:38px;line-height:1.12;
  letter-spacing:-1.2px;color:var(--teal);margin:0 0 8px;word-break:break-word}
.acb-buy__desc{font-size:15.5px;color:var(--ink-2);margin:0 0 16px;max-width:56ch}
.acb-buy__badges{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}

.acb-box{border:1px solid var(--line);border-radius:14px;padding:20px;background:#fff}
.acb-box + .acb-box{margin-top:14px}
.acb-pricerow{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.acb-price{font-size:32px;font-weight:700;letter-spacing:-.8px;line-height:1}
.acb-price small{display:block;font-size:13px;font-weight:400;color:var(--ink-2);
  letter-spacing:0;margin-top:6px}
.acb-qty{display:flex;align-items:center;gap:10px}
.acb-qty label{font-size:12.5px;color:var(--ink-2)}
.acb-qty__ctl{display:flex;align-items:stretch;border:1px solid var(--line-2);
  border-radius:9px;overflow:hidden}
.acb-qty__ctl button{border:0;background:var(--tint);width:34px;font-size:16px;
  cursor:pointer;color:var(--ink)}
.acb-qty__ctl input{width:48px;border:0;text-align:center;font-size:15px;
  font-family:var(--mono);outline:0;background:#fff;color:var(--ink)}
.acb-actions{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:16px}
.acb-smallprint{font-size:12.5px;color:var(--ink-3);margin-top:12px;line-height:1.6}
.acb-smallprint b{color:var(--ink-2)}

/* ---------- specification tables ---------- */
.acb-spec{width:100%;border-collapse:collapse}
.acb-spec th,.acb-spec td{padding:11px 18px;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top}
.acb-spec tr:last-child th,.acb-spec tr:last-child td{border-bottom:0}
.acb-spec th{font-weight:500;color:var(--ink-2);font-size:13.5px;width:42%}
.acb-spec td{font-family:var(--mono);font-size:13.5px;color:var(--ink)}
.acb-spec--6 th{width:14%;color:var(--ink-3);font-size:12.5px;padding:10px 16px}
.acb-spec--6 td{width:19.3%;padding:10px 16px}

.acb-panel{border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:#fff}
.acb-panel__ph{padding:13px 18px;border-bottom:1px solid var(--line);
  background:var(--tint);font-size:12.5px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--ink-3)}
.acb-cols2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.acb-prose{padding:18px;font-size:14.5px;color:var(--ink-2)}
.acb-prose ul{margin:0 0 1em;padding-left:18px}
.acb-prose li{margin-bottom:7px}

/* ==========================================================================
   Catalogue list
   ========================================================================== */
.acb-list__head{padding:26px 0 10px}
.acb-list__head h1{font-size:32px;letter-spacing:-.6px;margin-bottom:6px}
.acb-list__head p{color:var(--ink-2);font-size:14.5px;max-width:70ch}
.acb-list__bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:16px 0 20px;border-bottom:1px solid var(--line);margin-bottom:22px}
.acb-list__bar label{font-size:12.5px;color:var(--ink-2)}
.acb-list__bar select,.acb-list__bar input{border:1px solid var(--line-2);
  border-radius:9px;padding:9px 12px;font-size:13.5px;background:var(--tint);
  color:var(--ink);outline:0}
.acb-paged{display:flex;justify-content:center;gap:8px;padding:28px 0}
.acb-paged .page-numbers{display:inline-grid;place-items:center;min-width:38px;
  height:38px;padding:0 10px;border:1px solid var(--line);border-radius:9px;
  font-size:13.5px;font-family:var(--mono);color:var(--ink-2)}
.acb-paged .page-numbers.current{background:var(--teal);color:#fff;
  border-color:var(--teal);font-weight:700}
.acb-empty{border:1px solid var(--line);border-radius:14px;padding:34px;
  text-align:center;color:var(--ink-2);background:var(--tint)}

/* ==========================================================================
   WooCommerce: cart, checkout, order, account
   The quote flow drives these pages. Only presentation is set here.
   ========================================================================== */
.acb-page{padding:26px 0 10px}
.acb-page h1{font-size:30px;letter-spacing:-.6px;margin-bottom:18px}

.woocommerce-notices-wrapper{margin-bottom:16px}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none;margin:0 0 12px;padding:13px 16px;border-radius:10px;
  border:1px solid var(--line);background:var(--tint);color:var(--ink);
  font-size:14px;line-height:1.55}
.woocommerce-error{background:#fdf0f0;border-color:#f0c9c9;color:#7a1f20}
.woocommerce-message{background:var(--ok-bg);border-color:var(--ok-line);color:#0d5030}
.woocommerce-info{background:var(--teal-soft);border-color:#cfe4e0;color:#0c3f39}
.woocommerce-error li,.woocommerce-message li,.woocommerce-info li{margin:0}

.woocommerce table.shop_table{width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:20px}
.woocommerce table.shop_table th{text-align:left;font-size:11.5px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:13px 16px;
  border-bottom:1px solid var(--line);background:var(--tint)}
.woocommerce table.shop_table td{padding:14px 16px;border-bottom:1px solid var(--line);
  vertical-align:middle;font-size:14px}
.woocommerce table.shop_table tr:last-child td{border-bottom:0}

.woocommerce .quantity input.qty{width:64px;border:1px solid var(--line-2);
  border-radius:9px;padding:9px 10px;font-family:var(--mono);text-align:center}
.woocommerce .coupon{display:flex;gap:8px;align-items:center}
.woocommerce .coupon input[type=text]{border:1px solid var(--line-2);border-radius:9px;
  padding:10px 12px;font-size:13.5px;background:var(--tint)}

.woocommerce-cart-form__cart-item .product-thumbnail img{width:64px;border-radius:10px;
  border:1px solid var(--line);background:#f2f7f5;padding:5px}
/* ==========================================================================
   Cart totals - one label-column, one amount-column, and as few rules as possible
   ==========================================================================
   Each line reads "item ....... amount", the two columns aligned down the whole box, so
   the eye can compare the figures instead of hunting for them. Horizontal rules are
   limited to the one separating the goods lines from the goods total, which is the only
   division that carries meaning here; the previous version drew a line under every row
   and put a long paragraph inside the table, which read as clutter.

   The note about the amount not being final sits below the table, once.
   ========================================================================== */
.cart_totals{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:24px 26px}
.cart_totals h2{font-size:19px;letter-spacing:-.2px;margin:0 0 16px}
.cart_totals table.shop_table{border:0;border-radius:0;margin:0;background:transparent}
.cart_totals table.shop_table tbody tr{background:transparent}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td{
  padding:9px 0;border-bottom:0;background:transparent;vertical-align:baseline}
.cart_totals table.shop_table th{text-transform:none;letter-spacing:0;
  font-size:14.5px;font-weight:500;color:var(--ink-2)}
.cart_totals table.shop_table td{text-align:right;font-family:var(--mono);
  font-size:14.5px;color:var(--ink)}

/* The only rule in the box, and only above the goods total. */
.cart_totals tr.acb-sum__row th,
.cart_totals tr.acb-sum__row td{border-top:1px solid var(--line);padding-top:14px}

.cart_totals table.shop_table tr.order-total.acb-goods-total th{
  font-size:15px;font-weight:700;color:var(--ink);letter-spacing:0}
.cart_totals table.shop_table tr.order-total.acb-goods-total td{
  font-size:17px;font-weight:700}

/* The freight line: named, and honest about having no figure yet. */
.cart_totals tr.woocommerce-shipping-totals th,
.cart_totals tr.woocommerce-shipping-totals td{color:var(--ink-2)}
.cart_totals tr.woocommerce-shipping-totals .woocommerce-shipping-methods{
  list-style:none;margin:0;padding:0}
.cart_totals tr.woocommerce-shipping-totals .woocommerce-shipping-methods li{margin:0}
.cart_totals tr.woocommerce-shipping-totals label{font-size:14.5px;
  font-weight:500;color:var(--ink-2)}
.acb-freight-note{color:var(--ink-3);font-size:12.5px;line-height:1.5;
  margin:4px 0 0;font-family:var(--sans)}


.acb-sum__note{margin:14px 0 0;padding:0;font-size:12.8px;line-height:1.6;
  color:var(--ink-3);font-family:var(--sans)}
.acb-sum__note b{display:block;color:var(--ink);font-weight:700;margin-bottom:2px}

.wc-proceed-to-checkout{margin-top:20px}
.wc-proceed-to-checkout .checkout-button{width:100%}

/* ==========================================================================
   Checkout form - one scale for every label, field and heading
   ==========================================================================
   Previously the labels, inputs and headings each picked their own size and spacing, and
   the section headings competed with the page heading. Everything below shares one set
   of values so the form reads as a single document:

     field label     12.5px / semibold, 6px below it
     field control   14px, 12px padding, 46px tall, 14px between controls
     section heading 19px, 26px above and 14px below
   ========================================================================== */
.woocommerce-checkout .col2-set{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}

/* Section headings sit clearly under the page heading, never level with it. */
.woocommerce-checkout h3,
#order_review_heading{font-size:19px;font-weight:700;letter-spacing:-.2px;
  color:var(--ink);margin:0 0 14px}
.woocommerce-checkout #customer_details{margin-bottom:26px}
.woocommerce-checkout #customer_details h3{margin-top:0}

.woocommerce-checkout .form-row{margin:0 0 14px;padding:0}
.woocommerce-checkout .form-row:last-child{margin-bottom:0}
.woocommerce-checkout label{display:block;font-size:12.5px;font-weight:600;
  letter-spacing:.1px;color:var(--ink-2);margin:0 0 6px;line-height:1.4}
.woocommerce-checkout .required{color:var(--copper);text-decoration:none}

.woocommerce-checkout input[type=text],
.woocommerce-checkout input[type=email],
.woocommerce-checkout input[type=tel],
.woocommerce-checkout input[type=password],
.woocommerce-checkout textarea,
.woocommerce-checkout select{
  width:100%;border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;
  font-size:14px;line-height:1.4;min-height:46px;outline:0;
  background:var(--tint);color:var(--ink);font-family:inherit}
.woocommerce-checkout textarea{min-height:88px;resize:vertical}
.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder{color:var(--ink-3);opacity:1}
.woocommerce-checkout input:focus,.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus{border-color:var(--teal);background:#fff;
  box-shadow:0 0 0 3px rgba(13,92,82,.08)}

/* The country and state pickers are select2 widgets; they are made to match the
   plain fields exactly, including their height. */
.woocommerce-checkout .select2-container{width:100% !important}
.woocommerce-checkout .select2-container .select2-selection--single{
  height:46px;border:1px solid var(--line-2);border-radius:10px;background:var(--tint)}
.woocommerce-checkout .select2-container--default
  .select2-selection--single .select2-selection__rendered{
  line-height:44px;padding-left:14px;padding-right:38px;font-size:14px;color:var(--ink)}
.woocommerce-checkout .select2-container--default
  .select2-selection--single .select2-selection__arrow{height:44px;right:8px}
.woocommerce-checkout .select2-container--focus
  .select2-selection--single,
.woocommerce-checkout .select2-container--open
  .select2-selection--single{border-color:var(--teal);background:#fff}
.select2-dropdown{border-color:var(--line-2);border-radius:10px;font-size:14px}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--teal)}

/* The "ship to a different address" toggle reads as a small option, not a field. */
.woocommerce-checkout .woocommerce-shipping-fields{margin-top:6px}
.woocommerce-checkout #ship-to-different-address{margin:0 0 14px}
.woocommerce-checkout #ship-to-different-address label{display:inline-flex;
  align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--ink-2);
  margin:0;cursor:pointer}
.woocommerce-checkout #ship-to-different-address input{margin:0}

#order_review{border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  background:#fff}
.woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{padding:11px 0;text-align:left;
  border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
.woocommerce-checkout-review-order-table th{font-weight:500;color:var(--ink-2);
  padding-right:14px}
.woocommerce-checkout-review-order-table td{text-align:right;font-family:var(--mono);
  color:var(--ink);white-space:nowrap}
.woocommerce-checkout-review-order-table tr:last-child td,
.woocommerce-checkout-review-order-table tr:last-child th{border-bottom:0}
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td{font-weight:700;
  font-size:16px;color:var(--ink)}
/*
 * No table-layout:fixed on this table. Fixing the columns stopped the long part name
 * from shrinking, which pushed its "x 1" marker past the right edge of the phone
 * viewport.
 *
 * The name column must also be told it may wrap: with nowrap anywhere in that cell the
 * table cannot shrink below the width of the whole part name and grows past its
 * container instead, which is what pushed the table to 827px inside a 390px viewport.
 * Only the amount column stays unbroken.
 */
.woocommerce-checkout-review-order-table .product-name{
  white-space:normal;overflow-wrap:break-word;word-break:normal;padding-right:12px}
.woocommerce-checkout-review-order-table .product-name a{white-space:normal}
.woocommerce-checkout-review-order-table .product-name .product-quantity{
  white-space:nowrap;font-family:var(--sans);color:var(--ink-2)}
.woocommerce-checkout-review-order-table .product-total{white-space:nowrap}

/* The quote flow hides the payment methods and the totals row by its own CSS.
   The submit button must stay visible and reachable. */
#payment{background:transparent;border:0;padding:0;margin-top:16px}
#payment .place-order{padding:0}
#place_order{width:100%;border-radius:999px;padding:15px 22px;font-size:15px;
  font-weight:700;background:var(--teal);color:#fff;border:0;cursor:pointer}
#place_order:hover{background:var(--teal-dark)}

/*
 * WooCommerce stamps its own accent colour on the add-to-cart button, which showed as
 * a violet block on an otherwise teal product page. The theme's own colour is applied
 * so the two buttons beside each other match.
 */
.single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order{
  background:var(--teal);color:#fff;border:0;border-radius:999px;
  padding:14px 24px;font-size:15px;font-weight:700;line-height:1.2;cursor:pointer}
.single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover{background:var(--teal-dark);color:#fff}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt{
  background:var(--teal);color:#fff}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover{background:var(--teal-dark);color:#fff}
.woocommerce a.button:disabled,
.woocommerce button.button:disabled{background:var(--line);color:var(--ink-3)}

/* ---------- order received, account ---------- */
.woocommerce-order{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:24px}
.woocommerce-order-overview{list-style:none;margin:0 0 20px;padding:0;
  display:flex;gap:26px;flex-wrap:wrap}
.woocommerce-order-overview li{font-size:12.5px;color:var(--ink-3);
  border-right:1px solid var(--line);padding-right:26px}
.woocommerce-order-overview li:last-child{border-right:0;padding-right:0}
.woocommerce-order-overview li strong{display:block;font-size:15px;color:var(--ink);
  font-family:var(--mono);margin-top:3px}
.woocommerce-table--order-details th{font-family:inherit}
.woocommerce-form-login,.woocommerce-form-register,.woocommerce-EditAccountForm{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;
  max-width:520px}
.woocommerce-form-login input[type=text],.woocommerce-form-login input[type=email],
.woocommerce-form-login input[type=password]{width:100%;border:1px solid var(--line-2);
  border-radius:9px;padding:11px 13px;background:var(--tint);outline:0;
  font-size:14px;margin-bottom:12px}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;
  padding:0;display:flex;gap:8px;flex-wrap:wrap}
.woocommerce-account .woocommerce-MyAccount-navigation a{display:inline-block;
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13.5px;
  color:var(--ink-2)}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a{
  background:var(--teal);border-color:var(--teal);color:#fff}

.acb-price-note{font-size:12.5px;color:var(--ink-3);margin-top:10px}
.woocommerce-Price-amount{font-family:var(--mono);font-weight:600}
.woocommerce-Price-currencySymbol{font-family:inherit}

/* ==========================================================================
   Narrow screens
   ========================================================================== */
@media (max-width:920px){
  :root{--gap:18px}
  .acb-top__in{min-height:auto;flex-wrap:wrap;gap:6px 14px;font-size:11.5px}
  .acb-top__r{gap:14px}
  .acb-top__r .hide-sm{display:none}

  .acb-header__in{flex-wrap:wrap;gap:13px;min-height:auto;padding:13px 0}
  .acb-logo{font-size:18px}
  .acb-nav{order:3;width:100%;overflow-x:auto;gap:19px;font-size:14px;
    padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .acb-hsearch{order:4;flex:1 1 100%;max-width:none}
  .acb-header__act{margin-left:auto}
  .acb-header__act .btn{padding:9px 14px;font-size:13px}
  .acb-header__act .hide-sm{display:none}

  .acb-finder{padding:24px 0 20px}
  .acb-finder h1{font-size:26px;letter-spacing:-.5px}
  .acb-finder__sub{font-size:14.5px}
  .acb-bigsearch__row{flex-direction:column;border-radius:13px}
  .acb-bigsearch__row input{padding:15px 16px;font-size:15.5px;
    border-bottom:1px solid var(--line)}
  .acb-bigsearch__row button{padding:15px 0;width:100%}
  .acb-metrics{gap:14px 0;padding-top:17px}
  .acb-metric{padding-right:18px;margin-right:18px;flex:1 1 40%}
  .acb-metric b{font-size:21px}

  .acb-brands{grid-template-columns:1fr 1fr;gap:10px}

  .acb-fam{grid-template-columns:42px 1fr 22px;gap:4px 12px;align-items:start;
    padding:15px 2px}
  .acb-fam__ic{grid-row:1 / span 2;width:40px;height:40px}
  .acb-fam > *:nth-child(2){grid-column:2;min-width:0}
  .acb-fam > *:nth-child(3){grid-column:2;font-size:12.5px;color:var(--ink-3)}
  .acb-fam__cnt{grid-column:2;text-align:left;font-size:12px}
  .acb-fam__arw{grid-column:3;grid-row:1}

  /* the specification list becomes one block per product, image kept generous */
  .acb-table thead{display:none}
  .acb-table,.acb-table tbody,.acb-table tr,.acb-table td{display:block;width:100%}
  .acb-table{border:0;background:transparent}
  .acb-table tbody tr{background:#fff;border:1px solid var(--line);
    border-radius:14px;margin-bottom:14px;padding:4px 0}
  .acb-table tbody td{border-bottom:0;padding:9px 16px}
  .acb-table tbody td:first-child{padding-top:16px}
  .acb-table tbody td:last-child{padding-bottom:16px}
  .acb-pcell{gap:14px;align-items:flex-start}
  .acb-pcell__thumb{width:88px;height:88px;flex:0 0 88px;padding:7px}
  .acb-pcell__pn{font-size:17px}
  .acb-pcell__nm{font-size:13px}
  .badge{font-size:11px;padding:6px 10px}
  .acb-act{flex-direction:row;flex-wrap:wrap;min-width:0}
  .acb-act .btn{flex:1 1 auto}

  .acb-steps{grid-template-columns:minmax(0,1fr);gap:18px}
  .acb-process__in{padding:28px 0}
  .acb-quote{grid-template-columns:minmax(0,1fr);border-radius:14px}
  .acb-quote__l,.acb-quote__r{padding:24px 20px}
  .acb-fr{grid-template-columns:minmax(0,1fr)}
  .acb-channels{grid-template-columns:minmax(0,1fr);gap:12px}
  .acb-footer__cols{grid-template-columns:1fr 1fr;gap:22px;
    padding-top:28px;padding-bottom:28px}
  .acb-footer__bot{flex-direction:column}
  .acb-shead{flex-direction:column;align-items:flex-start;gap:8px}

  .acb-pdp{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"gallery" "buy" "legend" "specs";gap:18px;padding:8px 0}
  /*
   * The main picture on a phone.
   *
   * The photographs are a mix of shapes: two are portrait (a tall carton), two
   * landscape and one square. A 250px height cap squeezed the portrait ones into
   * narrow strips using little more than half the width available, which is what made
   * the carton look cramped rather than merely small. A landscape picture was already
   * bounded by the width, so the cap did nothing for it.
   *
   * The cap is therefore taken off: the picture is constrained by the frame's width,
   * which is what actually limits every shape here, and the frame grows to suit the
   * picture instead of the picture being shrunk to suit the frame. The padding is
   * increased so there is more air around it.
   *
   * Nothing about the image itself changes: max-width keeps it inside the frame and
   * object-fit keeps the file's own proportions whatever they are. Nothing is cropped,
   * stretched or resized.
   */
  .acb-gal__stage{min-height:0;padding:26px;border-radius:14px}
  .acb-gal__stage img{max-width:100%;max-height:none;width:auto;height:auto}
  .acb-gal__th{width:66px;height:66px;flex:0 0 66px;padding:6px}
  .acb-model{font-size:26px;letter-spacing:-.7px}
  .acb-price{font-size:27px}
  .acb-actions{grid-template-columns:minmax(0,1fr)}
  .acb-cols2{grid-template-columns:minmax(0,1fr);gap:16px}

  /* six labelled columns cannot fit a phone: pair them into rows */
  .acb-spec--6,.acb-spec--6 tbody{display:block;width:100%}
  .acb-spec--6 tr{display:grid;grid-template-columns:46% 1fr;width:100%;
    border-bottom:1px solid var(--line)}
  .acb-spec--6 tr:last-child{border-bottom:0}
  .acb-spec--6 th,.acb-spec--6 td{width:auto;padding:10px 16px;font-size:13px;
    border-bottom:0}

  .acb-list__head h1{font-size:24px}
  .woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:11px 12px}
  .woocommerce-order{padding:18px}
  .woocommerce-order-overview{gap:16px}
  .woocommerce-order-overview li{border-right:0;padding-right:0}
}

@media (max-width:560px){
  .acb-brands{grid-template-columns:minmax(0,1fr)}
  .acb-metric{flex:1 1 100%;border-right:0;margin-right:0;padding-right:0}

  /* The gallery's own controls, sized for a thumb. */
  .acb-gal__zoom{opacity:1;right:10px;bottom:10px;padding:8px 12px;font-size:12px}

  /* The viewer: controls reachable with a thumb, photograph given the room. */
  .acb-viewer{padding:10px 12px 14px}
  .acb-viewer__bar{padding-bottom:8px}
  .acb-viewer__close{padding:11px 16px 11px 13px;font-size:13.5px}
  .acb-viewer__nav{width:42px;height:42px}
  .acb-viewer__nav--prev{left:0}
  .acb-viewer__nav--next{right:0}
  .acb-viewer__cap{padding:0 46px;font-size:12.5px;margin-top:10px}

  /* ======================================================================
     The cart line, on a phone.
     ======================================================================
     WooCommerce turns each cell into a full-width, right-aligned block and hides the
     product photograph entirely, which left the row reading as a stack of loose
     fragments: the remove button owning a whole line of its own, the name, then the
     price, then "Quantity:" with a quantity against the right edge, then the amount
     again. It was hard to tell what belonged to what.

     Below, the same cells are laid out as one tidy line: photograph, then the part
     number with its price, and a footer row carrying the quantity control on the left
     and the line amount on the right, with a small remove control in the corner rather
     than a full-width button.

     No quantity, amount or calculation is touched. The labels remain as hidden text for
     screen readers, which previously announced "Quantity" before each control and had
     to be read out to make sense of the stack.
     ====================================================================== */
  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item{
    display:grid;grid-template-columns:76px minmax(0,1fr);
    grid-template-areas:"thumb name" "thumb price" "qty total";
    column-gap:13px;row-gap:10px;align-items:start;
    padding:15px 14px;position:relative;border-bottom:1px solid var(--line)}

  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td{
    display:block;float:none;padding:0;border:0;text-align:left;
    background:none !important;width:auto}

  /* WooCommerce hides the photograph at this width; it is the clearest thing on the
     line, so it comes back. */
  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-thumbnail{
    display:block !important;grid-area:thumb;float:none;width:auto;line-height:0}
  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-thumbnail img{
    width:76px;height:76px;object-fit:contain;padding:4px;border-radius:12px;
    border:1px solid var(--line);background:#f2f7f5}

  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-thumbnail::before,
  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-remove::before{
    display:none;content:none}

  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-name{
    grid-area:name;font-size:14.5px;font-weight:600;line-height:1.45;
    padding-right:34px !important}
  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-name a{
    color:var(--ink);text-decoration:none}

  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-price{
    grid-area:price;font-family:var(--mono);font-size:13px;color:var(--ink-3)}
  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-price::before{
    content:"Unit price  ";font-family:var(--sans);font-size:11.5px;font-weight:600;
    letter-spacing:.4px;color:var(--ink-3);text-transform:uppercase}

  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-quantity{
    grid-area:qty;justify-self:start;align-self:center;
    display:flex;align-items:center;gap:8px}
  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-quantity::before{
    content:"Quantity";font-size:11.5px;font-weight:600;letter-spacing:.4px;
    color:var(--ink-3);text-transform:uppercase;white-space:nowrap}
  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-quantity .quantity{
    display:inline-block;line-height:0}
  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-quantity .quantity input.qty:not([type=hidden]){
    width:58px;padding:8px 6px;font-size:14px}
  /*
   * A part sold one per customer is rendered as a hidden field, so nothing was shown
   * where the quantity belongs and the line read as though the quantity were blank.
   * The figure is written out instead.
   */
  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-quantity:has(input.qty[type=hidden])::after{
    content:"1";font-family:var(--mono);font-size:14px;color:var(--ink)}
  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-quantity .quantity:has(input.qty[type=hidden]){
    display:none}

  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-subtotal{
    grid-area:total;justify-self:end;align-self:center;
    font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink)}

  /* A small control in the corner instead of a line of its own. */
  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-remove{
    position:absolute;top:9px;right:9px;width:32px;height:32px;z-index:2}
  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-remove a.remove{
    display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:50%;line-height:1;
    font-size:19px;text-decoration:none;color:var(--ink-3);
    background:var(--tint);border:1px solid var(--line)}
  .woocommerce table.cart.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-remove a.remove:hover{
    color:#7a1f20;background:#fdf0f0;border-color:#f0c9c9}

  /*
   * The totals box on a phone: the same label-left, amount-right lines as on the
   * desktop, one row per figure.
   *
   * WooCommerce's phone stylesheet turns the table into blocks -- tr becomes block and
   * each td fills the width -- which is what stacked every label above its amount and
   * doubled the height of the box. The rows are put back as table rows so the two
   * columns line up, and the figures stay comparable down the box. "Shipment" and
   * "Goods total" are short enough to sit beside their amounts even at 390px.
   *
   * table-layout:fixed keeps the two columns at a settled width instead of letting a
   * long amount push the label around.
   */
  .cart_totals{padding:20px 18px}
  .woocommerce-cart .cart_totals table.shop_table_responsive{
    display:table;table-layout:fixed;width:100%}
  .woocommerce-cart .cart_totals table.shop_table_responsive tbody{
    display:table-row-group}
  .woocommerce-cart .cart_totals table.shop_table_responsive tr{
    display:table-row}
  /*
   * WooCommerce also hides tbody th outright at this width, which took the label off
   * every figure; both cells are restored as table cells.
   */
  .woocommerce-cart .cart_totals table.shop_table_responsive tbody th{
    display:table-cell !important}
  .woocommerce-cart .cart_totals table.shop_table_responsive td{
    display:table-cell !important}

  .cart_totals table.shop_table th,
  .cart_totals table.shop_table td{padding:8px 0}
  .cart_totals table.shop_table th{font-size:13.5px;padding-right:12px;width:auto}
  .cart_totals table.shop_table td{font-size:13.5px;width:48%;white-space:normal}
  /*
   * The freight note on its own line under the row. Beside the figure it wrapped against
   * the right edge and read as part of the amount; here it takes the full width and
   * aligns left. On the desktop the amount column is wide enough for it to stay on one
   * line, so it is left where it is there.
   */
  .cart_totals tr.woocommerce-shipping-totals td .acb-freight-note{
    display:block;width:100%;text-align:left;margin:8px 0 0;
    font-size:12px;white-space:normal}
  .cart_totals tr.acb-sum__row th,
  .cart_totals tr.acb-sum__row td{padding-top:12px}
  .cart_totals table.shop_table tr.order-total.acb-goods-total th{font-size:14px}
  .cart_totals table.shop_table tr.order-total.acb-goods-total td{font-size:16px}
  .cart_totals tr.woocommerce-shipping-totals label{font-size:13.5px}
  .cart_totals tr.woocommerce-shipping-totals td{text-align:right !important}
  .acb-freight-note{font-size:12px}
  .acb-sum__note{font-size:12.5px;margin-top:12px;padding-top:12px;
    border-top:1px solid var(--line)}

  /* ----------------------------------------------------------------------
     Stop the labels repeating, without silencing the ones that are wanted.
     ----------------------------------------------------------------------
     WooCommerce's phone stylesheet prints the cell's data-title before its content,
     which on this table duplicated what was already there: the part number was
     prefixed "Product:" and the line amount "Subtotal:". Those two are the duplicates,
     and the quantity's own label is written below, so only these cells are silenced.
     Hiding every cell's generated label would take the quantity label with it.
     ---------------------------------------------------------------------- */
  .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-name::before,
  .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-subtotal::before,
  .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-remove::before{
    display:none !important;content:none !important}

  /*
   * The totals table keeps none of the generated labels: every line there already has a
   * real heading beside it, which is restored above.
   */
  .woocommerce-cart .cart_totals table.shop_table_responsive tr td::before{
    display:none !important;content:none !important}
}


/* ==========================================================================
   chamkl - catalogue layout
   ==========================================================================
   The home page and the product list are built from four pieces: a finder band
   with the search beside a real photograph of a real part, a grid of cards, two
   strips that narrow by brand and category, and a short account of how ordering
   works.

   Every rule added here re-states the responsive behaviour it would otherwise
   override. These rules sit at the end of the file, so a plain declaration here
   beats an earlier one inside a media query -- which is how a three-column
   desktop grid once survived all the way down to a phone. Each breakpoint below
   therefore names the properties it changes rather than leaving them to an
   earlier block.

   NOTHING IS CROPPED
   ------------------
   Every frame uses object-fit:contain. The photographs range from 0.75 portrait
   to 1.33 landscape and each is of a sealed carton whose model label is the
   reason the picture exists, so a crop to a common shape would cut the label off
   the portrait ones. A fixed frame with a contained image keeps the grid even and
   every photograph whole. Nothing is generated, retouched or re-framed.
   ========================================================================== */

/* ---------- the finder band, and the featured part beside it ---------- */

.acb-finder{padding:34px 0 30px}

.acb-finder__grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr);
  gap:46px;
  align-items:center;
}

/* With no featured part to show, the search takes the whole width. */
.acb-finder__lead:only-child{grid-column:1 / -1}

/*
 * The heading keeps no width cap of its own here.
 *
 * The base rule caps it at 23 characters, which was written for a heading that spanned the
 * whole page. With the search beside a featured part the heading already sits in a column
 * about two-thirds of the page wide, so the cap added nothing except a wrap: "Freight quoted
 * before payment" is wider than 23 characters and broke with the last word alone on a third
 * line. The column is the constraint now.
 */
.acb-finder__lead h1{font-size:37px;line-height:1.13;letter-spacing:-.9px;max-width:none}
.acb-finder__sub{max-width:52ch;margin-bottom:22px}

.acb-hero{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;
  box-shadow:0 16px 44px rgba(20,32,31,.085);
}
.acb-hero__shot{
  display:flex;align-items:center;justify-content:center;
  height:296px;padding:16px;
  background:var(--tint);border-bottom:1px solid var(--line);
}
.acb-hero__shot img{width:100%;height:100%;object-fit:contain}

.acb-hero__body{padding:17px 20px 20px;display:flex;flex-direction:column;gap:7px}
.acb-hero__tag{
  margin:0;font-size:10.5px;font-weight:800;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--teal);
}
.acb-hero__model{
  margin:0;font-family:var(--mono);font-size:22px;font-weight:700;
  line-height:1.2;letter-spacing:-.4px;overflow-wrap:anywhere;
}
.acb-hero__model a{color:inherit}
.acb-hero__model a:hover{color:var(--teal)}

.acb-hero__meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;
  margin:0;font-size:13px;color:var(--ink-2);
}
.acb-hero__brand{font-weight:700;color:var(--ink)}
.acb-hero__brand + .acb-hero__cat::before{content:"\00b7";margin-right:7px;color:var(--ink-3)}

.acb-hero__price{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  margin:2px 0 0;font-size:20px;font-weight:800;letter-spacing:-.4px;
}
.acb-hero__price small{font-size:11.5px;font-weight:600;color:var(--ink-3);letter-spacing:0}

.acb-hero__stock{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.acb-hero .btn{margin-top:9px}

/* ---------- the card grid ---------- */

.acb-cards{display:grid;gap:22px;margin-top:22px}

/*
 * The column count is set by the template from how many cards there are, so a
 * short catalogue never leaves one card alone under a full row. auto-fill is the
 * fallback for anywhere the attribute is not printed.
 */
.acb-cards:not([data-cols]){grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.acb-cards[data-cols="1"]{grid-template-columns:repeat(1,minmax(0,1fr))}
.acb-cards[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.acb-cards[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.acb-cards[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.acb-cards[data-cols="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ---------- one card ---------- */
/*
 * A COMPACT CARD
 * --------------
 * The card carries a photograph, a part number, a brand, a price and a stock state. Nothing
 * else. The specification lines that used to sit here repeated down every page -- "24 VDC"
 * again and again -- pushed the price below the fold on a phone, and made each card 611
 * pixels tall, which is one and a third cards to a screen and a slow way through a catalogue.
 * They now live in the quick-look panel and on the product page.
 *
 * THE WHOLE CARD IS THE WAY IN
 * ----------------------------
 * The part number's link is stretched over the card with a pseudo-element, so a tap anywhere
 * opens the product page while the markup keeps exactly one link and one tab stop. That is
 * what leaves room for a two-column grid on a phone: a separate View details button cost a
 * row of its own on every card.
 *
 * THE PHOTOGRAPH HAS ONE CONTROL
 * ------------------------------
 * The Quick look button sits above the stretched link, so tapping the picture opens the panel
 * and tapping anything else opens the page. On a pointer device it appears on hover and on
 * keyboard focus, where a cursor already tells the visitor the card does something; on a
 * touch screen, where there is no hover, it is always visible, because otherwise nothing on
 * the card would suggest the panel exists at all.
 *
 * THE PHOTOGRAPH BOX IS A FIXED SHAPE
 * -----------------------------------
 * The stock photographs are taken at different distances on different surfaces. Fitted into a
 * box of one shape on one ground with one margin, the row reads as a row; left at their own
 * sizes it read as a jumble. Nothing is cropped, stretched or re-framed -- object-fit:contain
 * keeps every carton and its label whole.
 */

.acb-card{
  position:relative;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.acb-card:hover,
.acb-card:focus-within{
  border-color:var(--line-2);
  box-shadow:0 10px 26px rgba(20,32,31,.08);
}

.acb-card__shot{display:block;background:var(--tint);border-bottom:1px solid var(--line)}

.acb-card__frame{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1 / 1;padding:12px;
}
.acb-card__frame img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.acb-card__nophoto{font-size:12px;color:var(--ink-3);text-align:center;padding:0 10px}

.acb-card__peek{
  position:absolute;z-index:3;top:10px;right:10px;
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.96);border:1px solid var(--line-2);
  border-radius:999px;padding:5px 10px;cursor:pointer;
  font-size:11px;font-weight:700;letter-spacing:.2px;color:var(--teal);
  box-shadow:0 1px 6px rgba(12,22,21,.09);
  transition:background .15s ease,color .15s ease,border-color .15s ease,opacity .15s ease;
}
.acb-card__peek:hover{background:var(--teal);border-color:var(--teal);color:#fff}

/*
 * Hidden until hover or focus where a pointer exists, always visible where it does not.
 * Opacity rather than display, so the button stays in the tab order and becomes visible the
 * moment a keyboard reaches it.
 */
@media (hover:hover) and (pointer:fine){
  .acb-card__peek{opacity:0}
  .acb-card:hover .acb-card__peek,
  .acb-card__peek:focus-visible{opacity:1}
}

.acb-card__body{
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:5px;
  padding:12px 13px 13px;flex:1 1 auto;
}
.acb-card__model{grid-row:1}
.acb-card__meta{grid-row:2;align-self:start}
.acb-card__foot{grid-row:3}

/* The part number, largest thing on the card, and never shortened. */
.acb-card__model{
  margin:0;font-family:var(--mono);font-size:15px;font-weight:700;
  line-height:1.25;letter-spacing:-.3px;overflow-wrap:anywhere;
}
.acb-card__model a{color:inherit}
.acb-card__model a::after{content:"";position:absolute;inset:0;z-index:2}
/* The part number keeps its colour on hover. A part number that changes colour under the pointer reads as a different part number. */
.acb-card__model a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

.acb-card__meta{
  margin:0;font-size:11.5px;line-height:1.4;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.acb-card__meta b{color:var(--ink-2);font-weight:700}
.acb-card__meta i{font-style:normal;color:var(--line-2);margin:0 2px}

.acb-card__foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin:0;
}
.acb-card__price{font-size:16px;font-weight:800;letter-spacing:-.3px;line-height:1.25}

/*
 * Stock as a coloured dot and two words. A filled amber badge on every card shouted as loudly
 * as the price did; the state still appears on every card, quietly.
 */
.acb-card__stock{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  font-size:11.5px;font-weight:600;white-space:nowrap;color:var(--ink-3);
}
.acb-card__stock i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}
.acb-card__stock--in{color:var(--ok)}
.acb-card__stock--low{color:var(--warn)}
.acb-card__stock--out{color:var(--out)}

/* ---------- brands and categories, as two strips ---------- */

.acb-browse{
  display:flex;flex-direction:column;gap:13px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;
}
.acb-browse__row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.acb-browse__label{
  flex:0 0 88px;font-size:11px;font-weight:800;letter-spacing:.9px;
  text-transform:uppercase;color:var(--ink-3);
}
.acb-browse__items{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto;min-width:0}

.acb-chip{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line-2);border-radius:999px;background:#fff;
  padding:6px 13px;font-size:13px;font-weight:600;
  transition:border-color .14s ease,background .14s ease,color .14s ease;
}
.acb-chip:hover{border-color:var(--teal);background:var(--teal-soft);color:var(--teal)}
.acb-chip b{font-size:11.5px;font-weight:700;color:var(--ink-3)}
.acb-chip:hover b{color:var(--teal)}
.acb-chip--more{border-style:dashed;color:var(--ink-2)}
.acb-chip--more:hover{color:var(--teal)}

/* ---------- how ordering works, three lines rather than a wall ---------- */

.acb-process__in{padding:32px 0}
.acb-process__title{font-size:20px;letter-spacing:-.3px;margin-bottom:18px}

.acb-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:0}
.acb-step{
  position:relative;padding:0 0 0 38px;
  border-top:0;
}
.acb-step .n{
  position:absolute;left:0;top:0;width:26px;height:26px;
  border-radius:50%;background:#fff;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12.5px;font-weight:800;color:var(--ink-2);
}
.acb-step--on .n{background:var(--teal);border-color:var(--teal);color:#fff}
.acb-step b{display:block;font-size:14.5px;margin-bottom:3px}
.acb-step span{font-size:13px;line-height:1.5;color:var(--ink-2)}

.acb-process__foot{margin:18px 0 0;font-size:12.5px;color:var(--ink-3)}

/* ==========================================================================
   The quick-look panel
   ==========================================================================
   Fixed overlay, a scrim, and a panel that scrolls inside itself. On a phone
   the panel takes the whole screen, so the close control is never off the top
   of the view.

   One large photograph with thumbnails under it, rather than a stack of
   full-size pictures. Stacking them pushed the part number, the price and the
   button far enough down that a visitor opening the panel on a phone saw
   photographs and had to scroll to find out what the part cost. Switching
   through thumbnails keeps every one of those on the first screen.

   The panel itself does not scroll; the contents inside it do. That is what
   lets the close control sit against the panel's corner and stay there while a
   long entry scrolls underneath. It also stops the control being clipped: a
   floated sticky button resolved against the scrolling box, and on a 390-pixel
   phone it hung off the right edge with its right side cut away.
   ========================================================================== */

.acb-qv-dialog{
  position:fixed;inset:0;z-index:130;
  display:flex;align-items:center;justify-content:center;
  padding:22px;
}
.acb-qv-dialog[hidden]{display:none}

.acb-qv-dialog__scrim{
  position:absolute;inset:0;
  background:rgba(11,20,19,.63);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}

.acb-qv-dialog__panel{
  position:relative;z-index:1;
  width:min(1060px,100%);
  max-height:min(90vh,900px);
  display:flex;flex-direction:column;
  overflow:hidden;
  background:#fff;border-radius:18px;
  box-shadow:0 30px 80px rgba(8,18,17,.4);
}

.acb-qv-dialog__close{
  position:absolute;top:12px;right:12px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.96);border:1px solid var(--line-2);
  border-radius:999px;padding:8px 14px;cursor:pointer;
  font-size:12.5px;font-weight:700;color:var(--ink);
  box-shadow:0 2px 10px rgba(12,22,21,.1);
}
.acb-qv-dialog__close:hover{border-color:var(--teal);color:var(--teal)}

.acb-qv-dialog__content{
  flex:1 1 auto;min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.acb-qv{display:flex;flex-direction:column}

.acb-qv__media{
  display:flex;flex-direction:column;gap:12px;
  padding:16px;background:var(--tint);border-bottom:1px solid var(--line);
}
.acb-qv__main{
  margin:0;display:flex;align-items:center;justify-content:center;min-height:0;
}
.acb-qv__main img{width:100%;height:auto;max-height:38vh;object-fit:contain}

.acb-qv__thumbs{display:flex;flex-wrap:wrap;gap:8px}
.acb-qv__thumb{
  width:58px;height:58px;padding:3px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line-2);border-radius:10px;
  transition:border-color .14s ease,box-shadow .14s ease;
}
.acb-qv__thumb img{width:100%;height:100%;object-fit:contain}
.acb-qv__thumb:hover{border-color:var(--teal)}
.acb-qv__thumb.is-on{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal-soft)}

.acb-qv__body{display:flex;flex-direction:column;gap:10px;padding:18px}

.acb-qv__eyebrow{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;
  margin:0;font-size:12.5px;color:var(--ink-2);
}
.acb-qv__brand{font-weight:700;color:var(--ink)}
.acb-qv__brand + .acb-qv__cat::before{content:"\00b7";margin-right:7px;color:var(--ink-3)}

.acb-qv__model{
  margin:0;font-family:var(--mono);font-size:24px;font-weight:700;
  line-height:1.15;letter-spacing:-.4px;overflow-wrap:anywhere;
}
.acb-qv__name{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}

.acb-qv__price{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;
  margin:0;font-size:25px;font-weight:800;letter-spacing:-.5px;
}
.acb-qv__price small{font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:0}

.acb-qv__stock{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0}

.acb-qv__specs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:1px;margin:5px 0 0;
  background:var(--line);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;
}
.acb-qv__spec{background:#fff;padding:10px 13px}
.acb-qv__spec dt{
  font-size:11px;font-weight:700;letter-spacing:.45px;text-transform:uppercase;
  color:var(--ink-3);
}
.acb-qv__spec dd{margin:3px 0 0;font-size:14px;line-height:1.4}

.acb-qv__go{margin-top:7px}

/* ---------- wide enough to put the photograph beside the text ---------- */

@media (min-width:900px){
  /*
   * Photographs take the larger share of the panel.
   *
   * The point of opening one is to read the carton and its label, so the picture column is
   * given more width than the text beside it -- 1.15 to 0.85 -- and the picture is allowed to
   * run to just over half the viewport's height. At the earlier even split the photograph was
   * 444 pixels across in a 940-pixel panel, which is a third of the file's own width and less
   * than it needs for the label to be read without squinting.
   */
  .acb-qv{
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
    align-items:stretch;min-height:0;
  }
  .acb-qv__media{
    padding:20px;justify-content:center;
    border-bottom:0;border-right:1px solid var(--line);
  }
  .acb-qv__main img{max-height:52vh}
  .acb-qv__body{padding:26px;justify-content:center}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1080px){
  .acb-finder__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .acb-hero__shot{height:250px}
  .acb-finder__lead h1{font-size:32px}
}

@media (max-width:1180px){
  .acb-cards[data-cols="5"]{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:980px){
  .acb-cards[data-cols="4"],
  .acb-cards[data-cols="5"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:920px){
  .acb-finder{padding:22px 0 18px}
  .acb-finder__lead h1{font-size:26px;letter-spacing:-.5px}
  .acb-finder__sub{font-size:14.5px}
  .acb-hero__shot{height:210px;padding:12px}
  .acb-hero__body{padding:15px 16px 17px}
  .acb-hero__model{font-size:19px}
  .acb-hero__price{font-size:18px}

  .acb-cards{gap:16px}
  .acb-cards[data-cols="3"],
  .acb-cards[data-cols="4"],
  .acb-cards[data-cols="5"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acb-card__body{padding:13px 14px 15px}
  .acb-card__model{font-size:15.5px}
  .acb-card__price{font-size:17px}

  .acb-browse{padding:14px 15px}
  .acb-browse__label{flex-basis:100%}
  .acb-browse__row{gap:9px}

  .acb-steps{grid-template-columns:minmax(0,1fr);gap:16px}
  .acb-process__in{padding:26px 0}
}

@media (max-width:620px){
  /* One column: a card is then as wide as the screen and nothing is squeezed. */
  .acb-cards,
  .acb-cards[data-cols]{grid-template-columns:minmax(0,1fr);gap:14px}

  /*
   * The panel takes the whole screen, so the close control is against the top
   * corner and the rest scrolls beneath it. Nothing sits off the edge.
   */
  .acb-qv-dialog{padding:0;align-items:stretch}
  .acb-qv-dialog__panel{
    width:100%;max-height:100vh;height:100%;
    border-radius:0;
  }
  .acb-qv-dialog__close{top:10px;right:10px;padding:9px 13px}

  .acb-qv__main img{max-height:34vh}
  .acb-qv__body{padding:16px;gap:9px}
  .acb-qv__model{font-size:20px}
  .acb-qv__price{font-size:21px}
  /*
   * Two specification columns, not one.
   *
   * One per row made the panel tall enough that the View full details button fell below the
   * screen on a phone. The labels are short enough to sit two to a row at this width, which
   * brings the button back into view.
   */
  .acb-qv__specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acb-qv__spec{padding:9px 11px}
  .acb-qv__spec dt{font-size:10px;letter-spacing:.3px}
  .acb-qv__spec dd{font-size:13.5px}
}

/* ==========================================================================
   Catalogue filters
   ==========================================================================
   Two closed lists above the results. Dropdowns rather than rows of chips,
   because a shop with forty brands cannot print forty chips and a dropdown is
   the same height whatever it holds.
   ========================================================================== */

.acb-filters{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;
  padding:14px 16px;margin-top:16px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
}

.acb-filters__f{
  display:flex;flex-direction:column;gap:5px;
  flex:1 1 210px;min-width:0;max-width:300px;
}
.acb-filters__f label{
  font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink-3);
}
.acb-filters__f select{
  font:inherit;font-size:14px;font-weight:600;color:var(--ink);
  width:100%;max-width:100%;
  padding:9px 10px;border:1px solid var(--line-2);border-radius:10px;background:#fff;
}
.acb-filters__f select:focus{outline:2px solid var(--teal);outline-offset:1px}

.acb-filters__go{align-self:flex-end}
/* With scripting on, the dropdowns submit themselves and the button is noise. */
.acb-filters--live .acb-filters__go{display:none}

.acb-filters__clear{
  align-self:flex-end;padding-bottom:10px;
  font-size:13.5px;font-weight:600;color:var(--teal);
}

/* ---------- result count and sort, under the filters ---------- */

.acb-list__bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin:16px 0 14px;
}
.acb-list__bar .woocommerce-result-count{margin:0;font-size:13.5px;color:var(--ink-2)}
.acb-list__bar .woocommerce-ordering{margin:0;float:none}
.acb-list__bar .woocommerce-ordering select{
  font:inherit;font-size:14px;font-weight:600;color:var(--ink);
  padding:9px 10px;border:1px solid var(--line-2);border-radius:10px;background:#fff;
}

/* ---------- pagination ---------- */

.acb-paged{margin:26px 0 4px}
.acb-paged .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;margin:0 3px 6px 0;
  border:1px solid var(--line-2);border-radius:10px;background:#fff;
  font-size:14px;font-weight:600;color:var(--ink);
}
.acb-paged .page-numbers.current{
  background:var(--teal);border-color:var(--teal);color:#fff;
}
.acb-paged .page-numbers:hover{border-color:var(--teal);color:var(--teal)}
.acb-paged .page-numbers.current:hover{color:#fff}

/* ==========================================================================
   Refinements
   ==========================================================================
   Less space between blocks, larger type in the places a buyer actually reads,
   and a card whose part number and price carry real weight against the labels
   around them.

   These come last in the file, so they also override the responsive blocks
   above. Every value that has to differ on a small screen is restated in the
   media queries at the end of this section rather than left to an earlier rule.
   ========================================================================== */

.acb-finder{padding:28px 0 26px}
.acb-sec{padding:34px 0}
.acb-sec--tight{padding-top:6px}
.acb-cards{margin-top:18px}

/* ---------- the card, at a readable size ---------- */

.acb-card__peek{font-size:12px;padding:7px 13px}

/* ---------- chips, and the strips that hold them ---------- */

.acb-browse{padding:15px 17px;gap:12px}
.acb-browse__label{font-size:11.5px}
.acb-chip{font-size:13.5px;padding:7px 14px}
.acb-chip b{font-size:12px}

/* ---------- the featured part ---------- */

.acb-hero__model{font-size:23px}
.acb-hero__meta{font-size:13.5px}
.acb-hero__price{font-size:21px}
.acb-hero__body{padding:18px 20px 20px;gap:8px}

/* ---------- ordering steps ---------- */

.acb-process__in{padding:30px 0}
.acb-process__foot{font-size:13px}

/* ---------- the panel ---------- */

.acb-qv__name{font-size:14.5px}
.acb-qv__spec dd{font-size:14.5px}

@media (max-width:1080px){
  .acb-filters__f{flex-basis:180px;max-width:none}
}

@media (max-width:920px){
  .acb-finder{padding:22px 0 18px}
  .acb-sec{padding:28px 0}

  /*
   * The photograph box becomes a fixed 236 pixels here.
   *
   * On a phone the grid is one column, so a card is as wide as the screen and its photograph
   * box is the largest thing on the page: left proportional it came to 280 pixels, and the
   * card with its text to 611 -- one and a third cards to a screen, which is a slow way to
   * look through a catalogue. At a fixed 236 the box still shows the carton and its label
   * clearly and two cards now fit on a screen. The height is the lever because everything
   * below it is already down to what the card has to say.
   */
  .acb-card__frame{aspect-ratio:auto;height:236px;min-height:0;max-height:none;padding:14px}
  .acb-card__body{padding:13px 15px 15px;gap:5px}
  .acb-card__model{font-size:18px}
  .acb-card__meta{font-size:12.5px}
  .acb-card__price{font-size:19px}
  .acb-card__stock{font-size:12px}
  .acb-card__acts{padding-top:9px}
  .acb-card__acts .btn{padding:11px 18px;font-size:14px}

  .acb-hero__model{font-size:20px}
  .acb-hero__price{font-size:19px}

  .acb-filters{padding:12px 13px;gap:10px 12px}
  .acb-filters__f{flex:1 1 100%;max-width:none}
  .acb-filters__clear{padding-bottom:0}
}

@media (max-width:620px){
  .acb-card__model{font-size:18px}
  .acb-card__price{font-size:19px}
  .acb-list__bar{justify-content:flex-start}
}

/* ---------- small print that was too small to read comfortably ---------- */

.badge{font-size:12px;padding:6px 11px;letter-spacing:.4px}
.badge-note{font-size:13px;color:var(--ink-2)}
.acb-hero__price small,
.acb-qv__price small{font-size:12.5px}
.acb-chip b{font-size:12.5px}
.acb-browse__label{font-size:12px}

@media (max-width:920px){
  .badge{font-size:11.5px}
  .badge-note{font-size:12.5px}
}

/* ---------- the freight and tax position, once per grid ---------- */

.acb-price-note{
  margin:14px 0 0;max-width:74ch;
  font-size:12.5px;line-height:1.55;color:var(--ink-3);
}

@media (max-width:920px){
  .acb-price-note{margin-top:12px;font-size:12px}
}

/* ==========================================================================
   The industrial shell: header, home band, brand bar
   ==========================================================================
   A deeper, cooler dark than the brand teal, used for the two places that
   carry the shop's identity -- the category list heading and the main band on
   the home page. It is the same family as the teal, so the mark, the buttons
   and the bands still read as one shop rather than two.
   ========================================================================== */

:root{
  --steel:#0b3340;
  --steel-2:#0f4453;
  --steel-deep:#07222b;
}

/* ---------- header ---------- */

.acb-header{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:20}

.acb-header__in{
  display:flex;align-items:center;gap:18px;
  min-height:74px;padding-top:10px;padding-bottom:10px;
}

.acb-logo{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:inherit}
.acb-logo__mark{
  width:40px;height:40px;border-radius:11px;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;letter-spacing:.4px;flex:0 0 40px;
}
.acb-logo__txt{display:flex;flex-direction:column;gap:1px;line-height:1.15}
.acb-logo__txt b{font-size:17px;font-weight:800;letter-spacing:-.2px;color:var(--ink)}
.acb-logo__txt small{font-size:10.5px;font-weight:600;letter-spacing:.2px;color:var(--ink-3)}

.acb-nav{display:flex;gap:19px;flex:0 0 auto;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.acb-nav a:hover{color:var(--teal)}

.acb-hsearch{
  display:flex;align-items:stretch;flex:1 1 auto;min-width:0;
  max-width:360px;margin-left:auto;
  background:#fff;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;
}
.acb-hsearch input{
  flex:1 1 auto;min-width:0;border:0;background:transparent;
  padding:10px 13px;font:inherit;font-size:14px;color:var(--ink);
}
.acb-hsearch input:focus{outline:none}
.acb-hsearch:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.acb-hsearch button{
  display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
  background:var(--teal);color:#fff;padding:0 16px;
  font:inherit;font-size:13.5px;font-weight:700;
}
.acb-hsearch button:hover{background:var(--teal-dark)}

.acb-header__act{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.acb-hact{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;
}
.acb-hact:hover{color:var(--teal)}
.acb-hact--list{position:relative}
.acb-hact__n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--teal);color:#fff;font-size:11px;font-weight:800;
}

/* ---------- the home band: category list beside the main visual ---------- */

.acb-home-top{
  background:linear-gradient(180deg,#f5f9f8 0%,var(--paper) 100%);
  border-bottom:1px solid var(--line);
  padding:22px 0 26px;
}

.acb-home-top__in{
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start;
}

.acb-catnav{
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;
}
.acb-catnav__h{
  margin:0;padding:13px 16px;background:var(--steel);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
}
.acb-catnav__list{list-style:none;margin:0;padding:5px 0;flex:1 1 auto}
.acb-catnav__i a{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px 9px calc(15px + var(--d,0) * 13px);
  font-size:13.5px;font-weight:600;color:var(--ink-2);
}
.acb-catnav__i a:hover{background:var(--teal-soft);color:var(--teal)}
.acb-catnav__n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acb-catnav__c{flex:0 0 auto;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.acb-catnav__all{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 15px;border-top:1px solid var(--line);background:var(--tint);
  font-size:13px;font-weight:700;color:var(--teal);
}
.acb-catnav__all:hover{background:var(--teal-soft)}

.acb-band{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,0.72fr);
  gap:26px;align-items:center;
  padding:30px 30px;
  border-radius:16px;overflow:hidden;
  background:
    radial-gradient(115% 150% at 86% 6%, var(--steel-2) 0%, var(--steel) 52%, var(--steel-deep) 100%);
}

.acb-band__eyebrow{
  margin:0 0 10px;font-size:11.5px;font-weight:800;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--lime);
}
.acb-band__h{
  margin:0 0 11px;max-width:22ch;color:#fff;
  font-size:33px;line-height:1.14;letter-spacing:-.8px;
}
.acb-band__sub{
  margin:0 0 18px;max-width:48ch;
  font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.76);
}

/* The search keeps its white field; only the note under it changes for a dark ground. */
.acb-band .acb-bigsearch{max-width:560px}
.acb-band .acb-bigsearch__row{border-color:transparent;box-shadow:0 2px 12px rgba(3,16,20,.28)}
.acb-band .acb-bigsearch__hint{color:rgba(255,255,255,.62);margin-top:11px}
.acb-band .acb-bigsearch__hint .ex{
  background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2);color:#fff;
}
.acb-band .acb-bigsearch__hint .ex:hover{background:rgba(255,255,255,.2);color:#fff}
.acb-band .acb-transit{color:#fff}

/* The featured part, as a light card standing on the dark band. */
.acb-band .acb-hero{box-shadow:0 14px 34px rgba(3,16,20,.34)}
.acb-band .acb-hero__shot{height:216px}

/* ---------- four statements of fact, under the band ---------- */

.acb-trust{
  list-style:none;margin:18px 0 0;padding:15px 18px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
}
.acb-trust li{display:flex;align-items:center;gap:11px;min-width:0}
.acb-trust__ic{
  flex:0 0 38px;width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--teal-soft);color:var(--teal);
}
.acb-trust__t{display:flex;flex-direction:column;gap:1px;min-width:0}
.acb-trust__t b{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3}
.acb-trust__t span{font-size:12px;color:var(--ink-3);line-height:1.35}

/* ---------- the brand strip ---------- */

.acb-brandbar{
  background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-top:26px;
}
.acb-brandbar__in{display:flex;align-items:center;gap:20px;padding:14px 0;flex-wrap:wrap}
.acb-brandbar__label{
  flex:0 0 auto;font-size:11.5px;font-weight:800;letter-spacing:.9px;
  text-transform:uppercase;color:var(--ink-3);
}
.acb-brandbar__items{display:flex;flex-wrap:wrap;gap:10px;flex:1 1 auto;min-width:0}

.acb-brandtile{
  display:inline-flex;align-items:baseline;gap:8px;
  padding:10px 18px;background:#fff;
  border:1px solid var(--line);border-radius:10px;
  font-size:15px;font-weight:800;letter-spacing:.3px;color:var(--ink-2);
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.acb-brandtile span{font-size:11.5px;font-weight:700;color:var(--ink-3);font-family:var(--mono)}
.acb-brandtile:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-soft)}
.acb-brandtile--more{border-style:dashed;font-weight:700;font-size:13px}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1180px){
  .acb-logo__txt small{display:none}
  .acb-nav{gap:14px;font-size:14px}
  .acb-hsearch{max-width:270px}
  .acb-hact span{display:none}
  .acb-home-top__in{grid-template-columns:220px minmax(0,1fr)}
  .acb-band__h{font-size:29px}
}

@media (max-width:1000px){
  .acb-home-top__in{grid-template-columns:minmax(0,1fr)}
  .acb-catnav{display:none}
  .acb-band{grid-template-columns:minmax(0,1fr) minmax(0,0.8fr);padding:26px 24px}
  .acb-band__h{font-size:27px}
  .acb-trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}

@media (max-width:920px){
  .acb-header__in{flex-wrap:wrap;gap:12px;padding-top:12px;padding-bottom:12px}
  .acb-nav{order:3;width:100%;overflow-x:auto;gap:18px;font-size:14px;
    padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .acb-hsearch{order:4;flex:1 1 100%;max-width:none;margin-left:0}
  .acb-header__act{margin-left:auto;gap:14px}
  .acb-hact span{display:inline}
  .acb-header__cta{padding:9px 14px;font-size:13px}

  .acb-home-top{padding:16px 0 20px}
  .acb-band{grid-template-columns:minmax(0,1fr);gap:20px;padding:22px 18px;border-radius:14px}
  .acb-band__h{font-size:24px;letter-spacing:-.5px;max-width:none}
  .acb-band__sub{font-size:13.5px}
  .acb-band .acb-hero__shot{height:190px}

  .acb-trust{padding:14px;gap:12px 14px;margin-top:14px}
  .acb-trust__ic{flex-basis:34px;width:34px;height:34px}
  .acb-trust__t b{font-size:13px}
  .acb-trust__t span{font-size:11.5px}

  .acb-brandbar{margin-top:18px}
  .acb-brandbar__in{gap:12px;padding:12px 0}
  .acb-brandbar__label{flex-basis:100%}
  .acb-brandtile{padding:8px 14px;font-size:14px}
}

@media (max-width:620px){
  /*
   * Two columns, not one.
   *
   * A single column of full-width cards is what made the catalogue slow to look through: each
   * card took most of a screen. Two to a row halves the scrolling and roughly doubles how
   * many parts a visitor can take in at once, and the part numbers still fit -- the longest
   * in the catalogue is sixteen characters, and a card here is about 150 pixels of usable
   * width at 13 pixels of monospace.
   */
  .acb-cards,
  .acb-cards[data-cols]{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}

  .acb-card__frame{padding:9px}
  .acb-card__body{padding:10px 11px 11px;gap:4px}
  .acb-card__model{font-size:13px}
  .acb-card__meta{font-size:10.5px}
  .acb-card__price{font-size:14.5px}
  .acb-card__stock{font-size:10.5px}
  .acb-card__peek{top:7px;right:7px;padding:4px 8px;font-size:10px;gap:4px}
  .acb-card__peek svg{width:12px;height:12px}

  .acb-trust{grid-template-columns:minmax(0,1fr);gap:11px}
  .acb-band .acb-hero__shot{height:170px}
}

/* ==========================================================================
   Home page: the main visual, the brand rail, the category cards
   ==========================================================================
   Everything here is built from the shop's own photographs and its own
   catalogue. The dark ground behind the main visual is a grid drawn in CSS --
   a pattern, not a photograph of anywhere -- and the parts standing on it are
   the real cartons, whole, exactly as photographed.
   ========================================================================== */

/* ---------- the main visual ---------- */

.acb-band{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr);
  gap:24px;align-items:center;
  padding:32px 32px;
  border-radius:16px;
  background:
    radial-gradient(120% 150% at 88% 4%, var(--steel-2) 0%, var(--steel) 48%, var(--steel-deep) 100%);
}

/* A technical grid, which is honest decoration rather than a picture of a place. */
.acb-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 120% at 20% 30%,#000 0%,transparent 78%);
  mask-image:radial-gradient(120% 120% at 20% 30%,#000 0%,transparent 78%);
}

.acb-band__txt{position:relative;z-index:2;min-width:0}

.acb-band__cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:20px}

/* The outline button, for a dark ground. */
.acb-btn--onDark{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.42);
}
.acb-btn--onDark:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* ---------- the parts, layered ---------- */

.acb-band__media{position:relative;z-index:2;height:306px;min-width:0}

.acb-band__shot{
  position:absolute;
  display:flex;flex-direction:column;
  background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 18px 44px rgba(3,16,20,.46);
  transition:transform .18s ease;
}
.acb-band__shot img{
  flex:1 1 auto;min-height:0;
  width:100%;height:100%;object-fit:contain;padding:12px;
}
.acb-band__tag{
  flex:0 0 auto;padding:6px 11px;
  border-top:1px solid var(--line);background:#fff;
  font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.acb-band__shot:hover{transform:translateY(-3px)}

/* Three depths: the newest large and forward, the others stepped back. */
.acb-band__shot--1{width:60%;height:84%;right:0;top:0;z-index:3}
.acb-band__shot--2{width:44%;height:60%;left:0;bottom:0;z-index:2}
.acb-band__shot--3{width:36%;height:48%;left:14%;top:4%;z-index:1;opacity:.94}
.acb-band__shot--2:hover,
.acb-band__shot--3:hover{z-index:4}

/* ---------- a rail: one row, swiped on a phone ---------- */

.acb-rail{
  display:flex;gap:12px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  padding-bottom:6px;
}
.acb-rail > *{scroll-snap-align:start;flex:0 0 auto}

/* ---------- the brand rail ---------- */

.acb-brandbar{
  background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 0;margin-top:26px;
}
.acb-brandbar__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.acb-brandbar__head h2{margin:0;font-size:19px;letter-spacing:-.3px}
.acb-brandbar__head p{margin:0;font-size:13px;color:var(--ink-3)}

.acb-brandtile{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-width:164px;height:64px;padding:10px 20px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  font-size:16px;font-weight:800;letter-spacing:.3px;color:var(--ink-2);
  transition:border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.acb-brandtile img{max-height:30px;max-width:124px;width:auto;object-fit:contain}
.acb-brandtile__n{
  font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--teal);
}
a.acb-brandtile:hover{border-color:var(--teal);color:var(--teal);box-shadow:0 6px 18px rgba(20,32,31,.07)}
/* Nothing filed under this line yet: part of the strip, but not a door to an empty page. */
.acb-brandtile--plain{color:var(--ink-3);border-style:dashed;cursor:default}

/* ---------- the category cards ---------- */

.acb-cattile{
  display:flex;flex-direction:column;width:190px;
  background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.acb-cattile:hover{border-color:var(--teal);box-shadow:0 10px 26px rgba(20,32,31,.08)}
.acb-cattile__shot{
  display:flex;align-items:center;justify-content:center;
  height:136px;padding:10px;
  background:var(--tint);border-bottom:1px solid var(--line);
}
.acb-cattile__shot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.acb-cattile__blank{display:block;width:100%;height:100%}
.acb-cattile__t{display:flex;flex-direction:column;gap:2px;padding:11px 13px 13px}
.acb-cattile__t b{font-size:13.5px;font-weight:700;line-height:1.3;color:var(--ink)}
.acb-cattile__t span{font-size:11.5px;color:var(--ink-3)}
.acb-cattile:hover .acb-cattile__t b{color:var(--teal)}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1180px){
  .acb-band{padding:26px 24px;grid-template-columns:minmax(0,1fr) minmax(0,0.9fr)}
  .acb-band__media{height:266px}
}

@media (max-width:1000px){
  .acb-band{grid-template-columns:minmax(0,1fr);gap:22px;padding:24px 20px}
  .acb-band__media{height:250px;max-width:520px}
  .acb-brandtile{min-width:146px;height:58px;font-size:15px}
  .acb-brandtile img{max-height:26px;max-width:106px}
  .acb-cattile{width:170px}
  .acb-cattile__shot{height:122px}
}

@media (max-width:920px){
  .acb-band__cta{gap:9px}
  .acb-band__media{height:228px}
  .acb-band__shot img{padding:9px}
  .acb-band__shot--1{width:62%;height:86%}
  .acb-band__shot--2{width:46%;height:58%}

  /* Full-bleed rails: the row runs to the screen edge so it reads as swipeable. */
  .acb-rail{margin-right:calc(var(--gap) * -1);padding-right:var(--gap)}
  .acb-brandbar{padding:15px 0;margin-top:18px}
  .acb-brandbar__head{gap:6px;margin-bottom:11px}
  .acb-brandbar__head h2{font-size:17px}
  .acb-brandbar__head p{font-size:12.5px}
  .acb-brandtile{min-width:132px;height:54px;font-size:14px;padding:8px 14px}
  .acb-cattile{width:152px}
  .acb-cattile__shot{height:110px}
  .acb-cattile__t{padding:9px 11px 11px}
  .acb-cattile__t b{font-size:12.5px}
}

/* ==========================================================================
   chamkl Industrial - design layer
   ==========================================================================
   Warm off-white ground, dark grey type, serif headings, and a small amount of
   amber light. Everything here is layered over the base stylesheet: the palette
   is redefined at the token level, so the cart, the checkout, the account pages
   and every WooCommerce screen follow the same shift without being touched
   individually.

   NOTHING FUNCTIONAL LIVES IN THIS FILE
   -------------------------------------
   No price, no freight figure, no stock rule and no part of the quote flow is
   decided here. The quote-first ordering -- freight options, "To be confirmed",
   "Not final yet", the Submit quote request button -- is the amper-order-flow
   plugin's, and this file only dresses it.
   ========================================================================== */

:root{
  --ink:#1f1e1b;
  --ink-2:#5c5952;
  --ink-3:#8d8880;
  --line:#e8e3d9;
  --line-2:#d9d3c6;
  --paper:#faf8f3;
  --tint:#f4f1e9;

  --teal:#1f1e1b;
  --teal-dark:#000000;
  --teal-soft:#f1ede4;

  --lime:#e3ad3a;
  --lime-ink:#3a2c07;
  --copper:#a9761a;

  --ok:#2e8b4e;   --ok-bg:#eaf6ee;   --ok-line:#c2e3cc;
  --warn:#96690a; --warn-bg:#fbf3e2; --warn-line:#ecdcb2;
  --out:#7b766d;  --out-bg:#f2efe7;  --out-line:#e3ded2;

  --steel:#22211e;
  --steel-2:#2e2c27;
  --steel-deep:#141311;
  --amber:#e3ad3a;

  --maxw:1380px;
  --gap:30px;

  --font-head:Georgia,"Iowan Old Style","Times New Roman",Times,serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

html{scroll-behavior:smooth}

body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-body);
  font-size:15.5px;line-height:1.62;
}

h1,h2,h3,h4{font-family:var(--font-head);font-weight:400;letter-spacing:-.2px}

.acb-wrap{max-width:var(--maxw);padding:0 var(--gap)}

/* Section headings, in the reference's voice: a serif line with a quiet link. */
.acb-shead h2{font-size:30px;letter-spacing:-.5px}
.acb-shead p{font-size:14px;color:var(--ink-3);margin-top:4px}
.acb-shead a{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.acb-shead a:hover{color:var(--ink)}

/* ==========================================================================
   Header: one bar, logo left, the one search field, then the rest
   ========================================================================== */

.acb-header{
  background:var(--paper);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
}
.acb-header__in{display:flex;align-items:center;gap:20px;min-height:78px;padding-top:12px;padding-bottom:12px}

.acb-logo__mark{
  background:var(--ink);color:var(--paper);border-radius:8px;
  font-family:var(--font-head);font-size:16px;font-weight:700;
}
.acb-logo__txt b{font-family:var(--font-head);font-size:19px;font-weight:700;letter-spacing:-.2px}
.acb-logo__txt small{font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-3)}

.acb-hsearch{
  flex:1 1 auto;max-width:620px;margin:0 auto;
  background:#fff;border:1px solid var(--line-2);border-radius:10px;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.acb-hsearch:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(31,30,27,.07)}
.acb-hsearch input{padding:11px 14px;font-size:14.5px}
.acb-hsearch button{background:var(--ink);padding:0 18px}
.acb-hsearch button:hover{background:#000}

.acb-nav{font-size:14px;color:var(--ink-2);gap:22px}
.acb-hact{font-size:13.5px;color:var(--ink-2)}
.acb-hact__n{background:var(--ink);color:var(--paper)}
.acb-header__cta{background:var(--ink);border-radius:8px}
.acb-header__cta:hover{background:#000}

/* ==========================================================================
   Hero: a full-bleed ground, the text on the left, amber light on the machine
   ========================================================================== */

.hi-hero{
  position:relative;overflow:hidden;
  background:var(--steel-deep);
  min-height:520px;
  display:flex;align-items:center;
}

/* The art layer. A photograph when one has been supplied, a drawn ground
   otherwise -- never a generated picture of a machine the shop does not have. */
.hi-hero__art{
  position:absolute;inset:-6% 0 -6% 0;z-index:0;
  will-change:transform;
}
.hi-hero__art img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.92) contrast(1.02);
}
.hi-hero__art::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(14,13,11,.94) 0%,rgba(14,13,11,.72) 42%,rgba(14,13,11,.34) 70%,rgba(14,13,11,.52) 100%);
}
/* The drawn ground, for while no photograph is in place. */
.hi-hero__art--drawn{
  background:
    radial-gradient(90% 120% at 78% 30%,#3a3831 0%,#25241f 45%,#16150f 100%);
}
.hi-hero__art--drawn::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(80% 90% at 72% 45%,#000 0%,transparent 76%);
  mask-image:radial-gradient(80% 90% at 72% 45%,#000 0%,transparent 76%);
}

.hi-hero__in{position:relative;z-index:2;width:100%;padding-top:74px;padding-bottom:74px}
.hi-hero__eyebrow{
  margin:0 0 16px;font-size:11px;font-weight:700;letter-spacing:2.2px;
  text-transform:uppercase;color:rgba(250,248,243,.62);
}
.hi-hero__h{
  margin:0 0 16px;max-width:15ch;color:#faf8f3;
  font-family:var(--font-head);font-size:56px;line-height:1.1;letter-spacing:-1px;
}
.hi-hero__sub{
  margin:0 0 26px;max-width:44ch;
  font-size:16px;line-height:1.65;color:rgba(250,248,243,.78);
}
.hi-hero__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.hi-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:8px;border:1px solid transparent;
  background:#faf8f3;color:#141310;
  font-size:14.5px;font-weight:600;letter-spacing:.1px;
  transition:transform .16s ease,background .16s ease,opacity .16s ease;
}
.hi-btn:hover{background:#fff;transform:translateY(-1px);color:#141310}
.hi-btn--ghost{background:transparent;border-color:rgba(250,248,243,.36);color:#faf8f3}
.hi-btn--ghost:hover{background:rgba(250,248,243,.12);border-color:rgba(250,248,243,.6);color:#faf8f3}

/* Small amber points of light, travelling a short path on the machine. */
.hi-sparks{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hi-spark{
  position:absolute;left:var(--x);top:var(--y);
  width:7px;height:7px;border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 3px rgba(227,173,58,.16),0 0 16px 4px rgba(227,173,58,.34);
  opacity:calc(.16 + var(--p,0) * .74);
  transform:translate3d(calc(var(--p,0) * var(--dx,14px)),calc(var(--p,0) * var(--dy,-22px)),0) scale(calc(.72 + var(--p,0) * .5));
  transition:opacity .2s linear;
}
.hi-spark--trail::after{
  content:"";position:absolute;left:50%;top:50%;
  width:46px;height:1px;transform:translate(-100%,-50%);
  background:linear-gradient(90deg,transparent,rgba(227,173,58,.42));
  opacity:calc(var(--p,0) * .8);
}

/* ==========================================================================
   Brand bar
   ========================================================================== */

.hi-brands{
  background:var(--paper);border-bottom:1px solid var(--line);
  padding:22px 0;
}
.hi-brands__in{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.hi-brands__label{
  flex:0 0 auto;margin-right:26px;
  font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-3);
}
.hi-brands__rail{
  display:flex;align-items:center;flex:1 1 auto;min-width:0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.hi-brand{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  min-width:158px;height:52px;padding:0 26px;
  border-left:1px solid var(--line);
  font-family:var(--font-head);font-size:19px;font-weight:700;letter-spacing:.2px;
  color:var(--ink-2);white-space:nowrap;
  transition:color .16s ease,opacity .2s ease;
}
.hi-brand img{max-height:26px;max-width:120px;width:auto;object-fit:contain}
.hi-brand:hover{color:var(--ink)}
.hi-brand--plain{color:var(--ink-3);cursor:default}
.hi-brand--plain:hover{color:var(--ink-3)}
.hi-brand__n{
  margin-left:8px;font-family:var(--font-mono);font-size:11px;font-weight:700;
  color:var(--amber);
}
.hi-brands__more{
  flex:0 0 auto;margin-left:auto;padding-left:24px;
  font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;
}
.hi-brands__more:hover{color:var(--ink)}

/* ==========================================================================
   Category cards
   ========================================================================== */

.hi-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}

.hi-cat{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.hi-cat:hover{border-color:var(--line-2);box-shadow:0 12px 30px rgba(31,30,27,.07);transform:translateY(-2px)}
.hi-cat__top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 18px 0;
}
.hi-cat__n{font-family:var(--font-head);font-size:19px;font-weight:700;color:var(--ink)}
.hi-cat__arw{color:var(--ink-3);transition:transform .18s ease,color .18s ease}
.hi-cat:hover .hi-cat__arw{transform:translateX(3px);color:var(--ink)}
.hi-cat__shot{
  display:flex;align-items:center;justify-content:center;
  height:172px;margin:14px 18px 0;padding:10px;
  background:var(--tint);border-radius:10px;
}
.hi-cat__shot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.hi-cat__t{padding:13px 18px 17px;font-size:13px;line-height:1.5;color:var(--ink-3)}

/* ==========================================================================
   Product cards
   ========================================================================== */

.acb-card{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  position:relative;overflow:hidden;
}
.acb-card:hover{border-color:var(--line-2);box-shadow:0 10px 26px rgba(31,30,27,.07)}
.acb-card__shot{background:var(--tint);border-bottom:1px solid var(--line)}
.acb-card__frame{aspect-ratio:1/1;padding:18px}
.acb-card__model{font-family:var(--font-head);font-size:16px;font-weight:700;letter-spacing:-.1px}
.acb-card__meta{font-size:12.5px;color:var(--ink-3)}
.acb-card__meta b{color:var(--ink-2);font-weight:600}
.acb-card__price{font-size:17px;font-weight:700;letter-spacing:-.2px}
.acb-card__stock{font-size:12.5px}
.acb-card__peek{background:rgba(250,248,243,.96);border-color:var(--line-2);border-radius:8px;color:var(--ink-2)}
.acb-card__peek:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* A quiet line under every price, as in the reference. */
.acb-card__ship{
  margin:0;font-size:11.5px;color:var(--ink-3);
}

/* ==========================================================================
   Product list: filters beside the grid
   ========================================================================== */

.hi-list{display:grid;grid-template-columns:258px minmax(0,1fr);gap:30px;align-items:start}
.hi-side{
  position:sticky;top:96px;
  background:transparent;border:0;padding:0;
}
.hi-side__grp{border-bottom:1px solid var(--line);padding:0 0 18px;margin-bottom:18px}
.hi-side__grp:last-child{border-bottom:0}
.hi-side__h{
  display:flex;align-items:center;justify-content:space-between;
  margin:0 0 12px;font-size:14px;font-weight:700;color:var(--ink);
  font-family:var(--font-body);
}
.hi-side__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.hi-side__list label{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.hi-side__list input[type="checkbox"]{width:15px;height:15px;accent-color:var(--ink);cursor:pointer}
.hi-side__n{margin-left:auto;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3)}
.hi-side__list a{color:var(--ink-2)}
.hi-side__list a:hover{color:var(--ink)}

.hi-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:18px;
}
.hi-count{font-size:14px;color:var(--ink-2)}
.hi-count b{font-family:var(--font-head);font-size:18px;color:var(--ink);font-weight:700}
.hi-toolbar__r{display:flex;align-items:center;gap:12px}

/* ==========================================================================
   Product detail
   ========================================================================== */

.hi-pdp{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr);gap:44px;align-items:start}
.hi-pdp__gal{position:sticky;top:96px}

.hi-gallery{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.hi-gallery__stage{
  display:flex;align-items:center;justify-content:center;
  height:430px;background:var(--tint);border-radius:10px;cursor:zoom-in;
}
.hi-gallery__stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.hi-gallery__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.hi-gallery__th{
  display:flex;align-items:center;justify-content:center;
  height:84px;padding:7px;background:#fff;
  border:1px solid var(--line);border-radius:9px;cursor:pointer;
  transition:border-color .15s ease;
}
.hi-gallery__th img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.hi-gallery__th.is-on{border-color:var(--ink);border-width:2px;padding:6px}
.hi-gallery__th:hover{border-color:var(--line-2)}

.hi-buy__brand{
  margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--ink-3);
}
.hi-buy__h{
  margin:0 0 12px;font-family:var(--font-head);
  font-size:38px;line-height:1.14;letter-spacing:-.7px;color:var(--ink);
}
.hi-buy__state{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:0 0 20px;font-size:13.5px;color:var(--ink-2);
}
.hi-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 8px}
.hi-dot--in{color:var(--ok)}
.hi-dot--low{color:var(--warn)}
.hi-dot--out{color:var(--out)}

.hi-buy__price{
  margin:0 0 6px;font-family:var(--font-head);
  font-size:40px;font-weight:400;letter-spacing:-1px;color:var(--ink);
}
.hi-buy__price small{font-size:15px;font-family:var(--font-body);color:var(--ink-3);margin-left:4px}
.hi-buy__note{margin:0 0 22px;font-size:13px;color:var(--ink-3)}

.hi-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;margin-bottom:18px}
.hi-actions .acb-qty__ctl, .hi-actions .quantity{flex:0 0 auto}
.hi-actions .btn, .hi-actions .single_add_to_cart_button{
  flex:1 1 auto;min-width:190px;border-radius:8px;padding:15px 22px;font-size:15px;
}

.hi-shipbox{
  display:flex;align-items:center;gap:13px;
  background:var(--tint);border:1px solid var(--line);border-radius:10px;
  padding:15px 17px;margin-bottom:22px;
  font-size:13.5px;color:var(--ink-2);
}
.hi-shipbox svg{flex:0 0 auto;color:var(--ink-2)}

.hi-acc{border-top:1px solid var(--line)}
.hi-acc__row{border-bottom:1px solid var(--line)}
.hi-acc__h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:16px 2px;background:none;border:0;cursor:pointer;
  font-family:var(--font-head);font-size:17px;color:var(--ink);text-align:left;
}
.hi-acc__h span{color:var(--ink-3);font-size:18px}
.hi-acc__b{padding:0 2px 18px;font-size:14px;color:var(--ink-2);line-height:1.65}
.hi-acc__b[hidden]{display:none}

.hi-spec{width:100%;border-collapse:collapse;font-size:14px}
.hi-spec th,.hi-spec td{
  text-align:left;padding:11px 0;border-bottom:1px solid var(--line);
  vertical-align:top;
}
.hi-spec th{width:42%;color:var(--ink-3);font-weight:400}
.hi-spec td{color:var(--ink)}
.hi-spec tr:last-child th,.hi-spec tr:last-child td{border-bottom:0}

.hi-help{
  background:var(--tint);border:1px solid var(--line);border-radius:12px;
  padding:20px;margin-top:22px;
}
.hi-help h3{margin:0 0 7px;font-family:var(--font-head);font-size:19px;font-weight:400}
.hi-help p{margin:0 0 15px;font-size:13.5px;color:var(--ink-2)}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */

.hi-reveal{opacity:0;transform:translate3d(0,14px,0);transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
.hi-reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1180px){
  .hi-hero__h{font-size:46px}
  .hi-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hi-list{grid-template-columns:220px minmax(0,1fr);gap:24px}
  .hi-pdp{gap:30px}
  .hi-buy__h{font-size:32px}
  .hi-buy__price{font-size:34px}
}

@media (max-width:920px){
  .acb-header__in{flex-wrap:wrap;gap:11px;padding-top:11px;padding-bottom:11px}
  .acb-hsearch{order:4;flex:1 1 100%;max-width:none;margin:0}
  .acb-nav{order:3;width:100%;overflow-x:auto}

  .hi-hero{min-height:0}
  .hi-hero__in{padding-top:52px;padding-bottom:52px}
  .hi-hero__h{font-size:34px;max-width:18ch}
  .hi-hero__sub{font-size:14.5px;max-width:38ch}

  .hi-brands{padding:16px 0}
  .hi-brands__label{flex-basis:100%;margin:0 0 10px}
  .hi-brand{min-width:132px;padding:0 18px;font-size:17px}
  .hi-brands__more{flex-basis:100%;margin:12px 0 0;padding-left:0}

  .hi-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hi-cat__shot{height:120px;margin:10px 12px 0}
  .hi-cat__t{padding:10px 12px 13px;font-size:12px}
  .hi-cat__top{padding:12px 12px 0}
  .hi-cat__n{font-size:16px}

  .hi-list{grid-template-columns:minmax(0,1fr);gap:18px}
  .hi-side{position:static;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff}
  .hi-side__grp{padding-bottom:14px;margin-bottom:14px}

  .hi-pdp{grid-template-columns:minmax(0,1fr);gap:22px}
  .hi-pdp__gal{position:static}
  .hi-gallery{padding:12px}
  .hi-gallery__stage{height:280px}
  .hi-gallery__thumbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .hi-gallery__th{height:62px;padding:5px}
  .hi-buy__h{font-size:26px}
  .hi-buy__price{font-size:30px}
  .hi-actions .btn,.hi-actions .single_add_to_cart_button{min-width:0;flex:1 1 100%}
}

@media (max-width:620px){
  .acb-cards,.acb-cards[data-cols]{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .acb-card__frame{padding:11px}
  .acb-card__model{font-size:13.5px}
  .acb-card__price{font-size:14.5px}
  .hi-hero__h{font-size:29px}
  .hi-cats{grid-template-columns:minmax(0,1fr)}
  .hi-cat__shot{height:150px}
}

/* ==========================================================================
   Reduced motion
   ==========================================================================
   Everything above that moves is decoration. When the system asks for less
   motion, it stops: the parallax, the travelling light and the reveal all go,
   and what is left is a still, readable page.
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hi-hero__art{transform:none !important}
  .hi-spark{transform:none !important;opacity:.34 !important}
  .hi-spark--trail::after{opacity:0 !important}
  .hi-reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .acb-card:hover,.hi-cat:hover,.hi-btn:hover{transform:none !important}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ==========================================================================
   Additions: the step band, the specification table, the suggestion list
   ========================================================================== */

.acb-cur{
  font-size:12px;font-weight:700;letter-spacing:1.1px;color:var(--ink-2);
  padding-right:4px;
}

/* Cards carry the quote entry as WooCommerce's own link. */
.acb-card__body{display:grid;grid-template-rows:auto auto auto auto 1fr auto;gap:5px;padding:14px 15px 15px}
.acb-card__model{grid-row:1}
.acb-card__meta{grid-row:2}
.acb-card__price{grid-row:3;margin:4px 0 0}
.acb-card__ship{grid-row:4;margin:0}
.acb-card__foot{grid-row:5;align-self:end;margin:0}
.acb-card__quote{grid-row:6}

.acb-card__ship{margin:0}

.acb-card__quote{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:11px;padding:10px 14px;
  border:1px solid var(--line-2);border-radius:8px;background:#fff;
  font-size:13px;font-weight:600;color:var(--ink-2);
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.acb-card__quote:hover{border-color:var(--ink);color:var(--ink);background:var(--tint)}

/* ---------- the step band ---------- */

.hi-steps{padding:66px 0;border-top:1px solid var(--line);background:var(--paper)}
.hi-stepgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin-top:34px}
.hi-step{position:relative;padding-top:26px;border-top:1px solid var(--line-2)}
.hi-step__n{
  position:absolute;top:-11px;left:0;padding-right:12px;background:var(--paper);
  font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:var(--ink-3);letter-spacing:.5px;
}
.hi-step__ic{display:block;margin-bottom:14px;color:var(--ink-2)}
.hi-step h3{margin:0 0 7px;font-family:var(--font-head);font-size:21px;font-weight:400}
.hi-step p{margin:0;font-size:14px;line-height:1.65;color:var(--ink-2)}
.hi-steps__foot{margin:34px 0 0;font-size:13px;color:var(--ink-3)}

/* ---------- specification table, wide ---------- */

.hi-pdp__foot{display:grid;grid-template-columns:minmax(0,1fr) 332px;gap:44px;align-items:start}
.hi-spec--wide th{width:34%;color:var(--ink-3)}
.hi-spec--wide th,.hi-spec--wide td{padding:13px 0}

.acb-price-note{margin:16px 0 0;max-width:78ch;font-size:12.5px;line-height:1.6;color:var(--ink-3)}

/* ---------- the accordion marker ---------- */

.hi-acc__row[open] .hi-acc__h span{transform:rotate(45deg);display:inline-block}
.hi-acc__h span{transition:transform .18s ease;font-weight:300}

/* ---------- model suggestions under the search field ---------- */

.acb-hsearch{position:relative}
.acb-suggest{
  position:absolute;left:-1px;right:-1px;top:calc(100% + 7px);z-index:60;
  background:#fff;border:1px solid var(--line-2);border-radius:11px;
  box-shadow:0 18px 44px rgba(31,30,27,.13);
  overflow:hidden;padding:5px;
}
.acb-suggest[hidden]{display:none}
.acb-suggest__h{
  padding:9px 12px 6px;font-size:10.5px;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--ink-3);
}
.acb-suggest__i{
  display:flex;align-items:center;gap:12px;
  padding:9px 12px;border-radius:8px;
}
.acb-suggest__i:hover,.acb-suggest__i.is-active{background:var(--tint)}
.acb-suggest__m{
  font-family:var(--font-mono);font-size:13.5px;font-weight:700;color:var(--ink);
  flex:0 0 auto;
}
.acb-suggest__b{font-size:12.5px;color:var(--ink-3);flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acb-suggest__p{margin-left:auto;font-size:13px;font-weight:700;color:var(--ink-2);flex:0 0 auto}
.acb-suggest__none{padding:12px;font-size:13px;color:var(--ink-3)}
.acb-suggest__all{
  display:block;padding:11px 12px;margin-top:3px;border-top:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--ink-2);
}
.acb-suggest__all:hover{color:var(--ink);background:var(--tint)}

@media (max-width:1000px){
  .hi-stepgrid{grid-template-columns:minmax(0,1fr);gap:20px}
  .hi-pdp__foot{grid-template-columns:minmax(0,1fr);gap:26px}
}

@media (max-width:920px){
  .hi-steps{padding:44px 0}
  .hi-step{padding-top:20px}
  .hi-step h3{font-size:19px}
  .acb-suggest{left:0;right:0}
}

/* ---------- the filter column ---------- */

.hi-side__list--scroll{
  max-height:296px;overflow-y:auto;padding-right:4px;
  scrollbar-width:thin;
}
.hi-side__list--scroll::-webkit-scrollbar{width:7px}
.hi-side__list--scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.hi-side__ind{margin-left:calc(var(--d,0) * 13px);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hi-side__list label > span:first-of-type{flex:1 1 auto;min-width:0}
.hi-side__foot{margin-top:4px}
.hi-side__clear{
  display:block;margin-top:11px;text-align:center;
  font-size:13px;font-weight:600;color:var(--ink-3);
}
.hi-side__clear:hover{color:var(--ink)}

.acb-empty{background:#fff;border:1px solid var(--line);border-radius:12px;padding:34px}
.acb-empty p{margin:0 0 8px;font-size:14.5px;color:var(--ink-2)}
.acb-empty b{font-family:var(--font-head);font-size:19px;color:var(--ink)}

/* ---------- pagination and ordering, in this palette ---------- */

.acb-paged .page-numbers{
  border-color:var(--line);background:#fff;color:var(--ink-2);
  border-radius:8px;min-width:38px;height:38px;
}
.acb-paged .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.acb-paged .page-numbers:hover{border-color:var(--ink);color:var(--ink)}
.acb-paged .page-numbers.current:hover{color:var(--paper)}

.acb-list__bar .woocommerce-ordering select,
.hi-toolbar .woocommerce-ordering select{
  font:inherit;font-size:13.5px;color:var(--ink);
  padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;
}
.hi-toolbar .woocommerce-ordering{margin:0;float:none}

@media (max-width:920px){
  .hi-side__list--scroll{max-height:none;overflow:visible}
}

/* ---------- long tokens must never widen a layout ---------- */

/*
 * A product description can contain a run of characters with no space in it -- a slash-
 * separated configuration string, a long part number inside prose, a URL. Left alone, that
 * one run sets a floor on the width of everything above it: on a phone the buying panel was
 * 330 pixels wide while its scroll width was 488, because a single paragraph could not wrap,
 * and the whole page then scrolled sideways.
 *
 * break-word only breaks a word when there is no other way to fit it, so ordinary prose is
 * unaffected.
 */
.hi-acc__b,
.hi-acc__b p,
.hi-acc__b li,
.hi-buy__note,
.hi-buy__state,
.hi-shipbox span,
.hi-help p,
.hi-cat__t,
.acb-card__meta,
.acb-empty p{
  overflow-wrap:break-word;
  word-wrap:break-word;
}

.hi-acc__b table,
.hi-spec{
  table-layout:fixed;
  width:100%;
}
.hi-spec th,
.hi-spec td{
  overflow-wrap:break-word;
  word-wrap:break-word;
}

/* ==========================================================================
   The hero: the text, and the parts standing beside it
   ========================================================================== */

.hi-hero__in{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr);
  gap:36px;
  align-items:center;
  padding-top:64px;
  padding-bottom:64px;
}
.hi-hero__txt{min-width:0;position:relative;z-index:2}

/* The parts, stepped into layers so they read as objects rather than as a flat strip. */
.hi-hero__shots{position:relative;height:388px;min-width:0;z-index:2}

.hi-hero__shot{
  position:absolute;
  display:flex;flex-direction:column;
  background:#faf8f3;border-radius:12px;overflow:hidden;
  box-shadow:0 22px 50px rgba(6,6,5,.5);
  transition:transform .2s ease;
}
.hi-hero__shot img{
  flex:1 1 auto;min-height:0;
  width:100%;height:100%;object-fit:contain;padding:14px;
}
.hi-hero__tag{
  flex:0 0 auto;padding:7px 12px;
  border-top:1px solid var(--line);background:#fff;
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hi-hero__shot:hover{transform:translateY(-4px)}

.hi-hero__shot--1{width:58%;height:82%;right:2%;top:0;z-index:3}
.hi-hero__shot--2{width:42%;height:56%;left:0;bottom:0;z-index:2}
.hi-hero__shot--3{width:34%;height:46%;left:12%;top:6%;z-index:1;opacity:.95}
.hi-hero__shot--2:hover,
.hi-hero__shot--3:hover{z-index:4}

/* A gradient so the text never sits on a busy part of the ground. */
.hi-hero__art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(12,11,9,.96) 0%,rgba(12,11,9,.86) 34%,rgba(12,11,9,.48) 62%,rgba(12,11,9,.62) 100%);
}

@media (max-width:1180px){
  .hi-hero__shots{height:340px}
  .hi-hero__h{font-size:46px}
}

@media (max-width:1000px){
  .hi-hero__in{grid-template-columns:minmax(0,1fr);gap:26px;padding-top:48px;padding-bottom:48px}
  .hi-hero__shots{height:300px;max-width:520px}
}

@media (max-width:620px){
  .hi-hero__in{padding-top:38px;padding-bottom:38px}
  .hi-hero__shots{height:236px}
  .hi-hero__shot img{padding:10px}
  .hi-hero__shot--1{width:60%;height:84%}
  .hi-hero__shot--2{width:44%;height:56%}
  .hi-hero__tag{font-size:10.5px;padding:6px 9px}
}

/* The main visual carries more weight: taller band, larger parts. */
.hi-hero{min-height:566px}
.hi-hero__shots{height:442px}
.hi-hero__shot--1{width:62%;height:84%;right:0;top:0}
.hi-hero__shot--2{width:44%;height:58%;left:0;bottom:2%}
.hi-hero__shot--3{width:36%;height:48%;left:16%;top:5%}
.hi-hero__shot img{padding:16px}
.hi-hero__h{font-size:60px;max-width:14ch}

@media (max-width:1180px){
  .hi-hero{min-height:0}
  .hi-hero__shots{height:372px}
  .hi-hero__h{font-size:48px}
}
@media (max-width:1000px){
  .hi-hero__shots{height:322px}
}
@media (max-width:620px){
  .hi-hero__shots{height:250px}
  .hi-hero__h{font-size:31px}
}

/* ==========================================================================
   Home page, light: the words on the left, the production floor on the right
   ==========================================================================
   Replaces the dark band entirely. The ground is the page's own warm white, so
   the home page reads as one continuous sheet rather than a dark poster with a
   catalogue stapled underneath.

   The shop's product photographs are not in here. They belong on the category
   cards and the product cards, where each one answers a question about a part
   the visitor can actually buy.
   ========================================================================== */

.hi-hero{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  min-height:0;
  display:block;
  overflow:visible;
}

.hi-hero__in{
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:48px;
  align-items:center;
  padding-top:54px;
  padding-bottom:54px;
}
.hi-hero__txt{min-width:0;position:static}

.hi-hero__eyebrow{
  margin:0 0 15px;
  font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--ink-3);
}
.hi-hero__h{
  margin:0 0 16px;max-width:16ch;
  font-family:var(--font-head);font-size:56px;line-height:1.08;letter-spacing:-1.1px;
  color:var(--ink);
}
.hi-hero__sub{
  margin:0 0 26px;max-width:42ch;
  font-size:16px;line-height:1.65;color:var(--ink-2);
}
.hi-hero__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Buttons on a light ground: a solid dark one, and a hairline one. */
.hi-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:8px;
  background:var(--ink);border:1px solid var(--ink);color:var(--paper);
  font-size:14.5px;font-weight:600;
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.hi-btn:hover{background:#000;border-color:#000;color:var(--paper);transform:translateY(-1px)}
.hi-btn--line{background:transparent;border-color:var(--line-2);color:var(--ink)}
.hi-btn--line:hover{background:transparent;border-color:var(--ink);color:var(--ink)}

/* The picture, held to the right of the words. */
.hi-hero__scene{
  position:relative;
  height:452px;min-width:0;
  border-radius:14px;overflow:hidden;
  background:var(--tint);
  border:1px solid var(--line);
  will-change:transform;
}
.hi-hero__scene img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.95);
}

/* With no photograph in place the right half is plainly a held space: a pale
   panel and a faint grid. It is not dressed up to look like a factory. */
.hi-hero__scene--held{background:linear-gradient(135deg,#f6f3ec 0%,#efeade 100%)}
.hi-hero__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(31,30,27,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(31,30,27,.045) 1px,transparent 1px);
  background-size:46px 46px;
}

/* Amber, on a light ground: a warmer dot with a softer halo. */
.hi-sparks{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hi-spark{
  position:absolute;left:var(--x);top:var(--y);
  width:8px;height:8px;border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 4px rgba(227,173,58,.16),0 0 15px 5px rgba(227,173,58,.38);
  opacity:calc(.22 + var(--p,0) * .62);
  transform:translate3d(calc(var(--p,0) * var(--dx,14px)),calc(var(--p,0) * var(--dy,-20px)),0) scale(calc(.74 + var(--p,0) * .44));
}
.hi-spark--trail::after{
  content:"";position:absolute;left:50%;top:50%;
  width:52px;height:2px;transform:translate(-100%,-50%);border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(227,173,58,.5));
  opacity:calc(var(--p,0) * .75);
}

/* ==========================================================================
   The brand strip: six marks, three to a row on a phone
   ========================================================================== */

.hi-brands__rail{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  overflow:visible;
}
.hi-brand{
  min-width:0;height:auto;min-height:72px;padding:14px 12px;
  border-left:1px solid var(--line);
  font-size:19px;line-height:1.15;
  overflow-wrap:break-word;
}
.hi-brand:first-child{border-left:0}
.hi-brand img{max-height:30px;max-width:100%;width:auto;height:auto;object-fit:contain}

/* ==========================================================================
   Phone: two category columns, three brand columns -- never one long column
   ========================================================================== */

@media (max-width:1000px){
  .hi-hero__in{grid-template-columns:minmax(0,1fr);gap:26px;padding-top:42px;padding-bottom:42px}
  .hi-hero__h{font-size:42px;max-width:20ch}
  .hi-hero__scene{height:320px;order:-1;border-radius:12px}
  .hi-hero__sub{font-size:15px;max-width:46ch}
}

@media (max-width:920px){
  .hi-brands__rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px}
  .hi-brand{
    min-height:64px;padding:12px 8px;font-size:16px;
    border-left:0;border-top:1px solid var(--line);
  }
  .hi-brand:nth-child(-n+3){border-top:0}
  .hi-brand:nth-child(3n+1){border-left:0}
  .hi-brand:nth-child(3n+2),
  .hi-brand:nth-child(3n){border-left:1px solid var(--line)}
  .hi-brands__label{flex-basis:100%;margin:0 0 12px}
  .hi-brands__more{flex-basis:100%;margin:12px 0 0;padding-left:0}

  .hi-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hi-cat__shot{height:132px;margin:10px 12px 0;padding:8px}
  .hi-cat__t{padding:10px 12px 13px;font-size:12.5px}
  .hi-cat__top{padding:12px 12px 0;gap:8px}
  .hi-cat__n{font-size:15px}
}

@media (max-width:620px){
  /* Two, deliberately: a single column turns five categories into a long scroll. */
  .hi-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hi-cat__shot{height:112px;margin:8px 10px 0;padding:6px}
  .hi-cat__t{padding:9px 10px 11px;font-size:12px}
  .hi-cat__n{font-size:14px}

  .hi-brand{min-height:58px;font-size:14px;padding:10px 6px}
  .hi-brand img{max-height:22px}

  .hi-hero__h{font-size:32px}
  .hi-hero__scene{height:250px}
  .hi-btn{flex:1 1 100%;justify-content:center}
}

/* A brand name has to be allowed to wrap once the tiles get narrow. The strip was
   written as one nowrap line, so at three columns "Schneider Electric" and
   "Allen-Bradley" had nowhere to go and were cut off at the tile edge. */
@media (max-width:1180px){
  .hi-brand{
    white-space:normal;
    line-height:1.2;
    text-align:center;
    overflow-wrap:break-word;
    word-break:break-word;
    hyphens:auto;
  }
}

/* ==========================================================================
   Deep navy and restrained blue
   ==========================================================================
   The palette the owner asked for, set once at the token level so every
   WooCommerce screen -- cart, checkout, account -- follows it without being
   touched individually.

   Navy carries the type and the solid buttons; the blue is a link and hover
   accent and is not used for large areas. Amber survives in one place only:
   the small signal lights on the main visual, where a complementary warm point
   is what makes them read as live rather than as decoration.
   ========================================================================== */

:root{
  --ink:#0f2740;
  --ink-2:#42586f;
  --ink-3:#7d8d9e;

  --line:#e3e8ef;
  --line-2:#ccd7e3;

  --paper:#ffffff;
  --tint:#f3f6fa;

  --teal:#0f2740;
  --teal-dark:#081a2c;
  --teal-soft:#edf2f8;

  --lime:#1f5fa8;
  --lime-ink:#ffffff;
  --copper:#1f5fa8;

  --blue:#1f5fa8;
  --blue-dark:#17497f;
  --blue-soft:#eaf1f9;

  --ok:#1f7a45;   --ok-bg:#eaf6ef;   --ok-line:#c3e2ce;
  --warn:#8a6100; --warn-bg:#fbf3e0; --warn-line:#ecdcb0;
  --out:#6d7d8d;  --out-bg:#f1f4f8;  --out-line:#dde4ec;

  --steel:#0f2740;
  --steel-2:#17395c;
  --steel-deep:#081a2c;
  --amber:#e0a53a;
}

body{background:#f7f9fc;color:var(--ink)}

/* Navy headings, and the restrained blue on links. */
.acb-shead h2,.hi-cat__n,.acb-card__model,.hi-buy__h,.hi-help h3,.acb-empty b{color:var(--ink)}
.acb-shead a:hover,.hi-brands__more:hover,.hi-side__clear:hover{color:var(--blue)}

.acb-header{background:#fff;border-bottom:1px solid var(--line)}
.acb-logo__mark{background:var(--ink);color:#fff}

/* Solid buttons: navy. Line buttons: navy hairline that fills on hover. */
.hi-btn{background:var(--ink);border-color:var(--ink);color:#fff}
.hi-btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.hi-btn--line{background:#fff;border-color:var(--line-2);color:var(--ink)}
.hi-btn--line:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--blue-dark)}

.btn--solid,.acb-card__quote:hover{background:var(--ink);border-color:var(--ink)}
.btn--solid:hover{background:var(--blue);border-color:var(--blue)}

/* ==========================================================================
   The field in the first screen
   ========================================================================== */

.hi-search{
  position:relative;
  display:flex;align-items:center;
  max-width:520px;margin:0 0 12px;
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:10px;
  padding:6px 6px 6px 42px;
  box-shadow:0 2px 10px rgba(15,39,64,.05);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.hi-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,95,168,.12)}
.hi-search__ic{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--ink-3);display:flex;pointer-events:none;
}
.hi-search input[type="search"]{
  flex:1 1 auto;min-width:0;
  border:0;background:none;outline:none;
  padding:10px 8px;
  font:inherit;font-size:15px;color:var(--ink);
}
.hi-search input::placeholder{color:var(--ink-3)}
.hi-search button{
  flex:0 0 auto;
  padding:11px 20px;border:0;border-radius:7px;
  background:var(--ink);color:#fff;
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  transition:background .16s ease;
}
.hi-search button:hover{background:var(--blue)}
.hi-search .acb-suggest{left:-1px;right:-1px;top:calc(100% + 7px)}
.hi-hero__hint{margin:0 0 24px;font-size:12.5px;color:var(--ink-3)}

/* ==========================================================================
   The first screen arrives in layers, not in one fade
   ==========================================================================
   Each element rises on its own short delay. It is a small stagger of fifteen
   to twenty pixels -- enough to read as one thing settling after another, with
   nothing moving far enough to be watched instead of read.
   ========================================================================== */

@keyframes hi-rise{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:none}
}

.hi-hero__eyebrow,
.hi-hero__h,
.hi-hero__sub,
.hi-search,
.hi-hero__hint,
.hi-hero__cta,
.hi-hero__scene{
  animation:hi-rise .62s cubic-bezier(.22,.61,.36,1) both;
}

.hi-hero__eyebrow{animation-delay:.05s}
.hi-hero__h{animation-delay:.13s}
.hi-hero__sub{animation-delay:.21s}
.hi-search{animation-delay:.29s}
.hi-hero__hint{animation-delay:.36s}
.hi-hero__cta{animation-delay:.43s}
.hi-hero__scene{animation-delay:.16s;animation-duration:.78s}

/* ==========================================================================
   Cards and buttons: small, quick, and only on a pointer
   ========================================================================== */

@media (hover:hover) and (pointer:fine){
  .acb-card{transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease,border-color .2s ease}
  .acb-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(15,39,64,.10);border-color:var(--line-2)}
  .acb-card__frame img{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
  .acb-card:hover .acb-card__frame img{transform:scale(1.045)}

  .hi-cat{transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease,border-color .2s ease}
  .hi-cat:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,39,64,.09)}
  .hi-cat__shot img{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
  .hi-cat:hover .hi-cat__shot img{transform:scale(1.04)}
}

/* Pressed: a hair of scale, released on its own. */
.acb-card:active,.hi-cat:active{transform:translateY(-1px) scale(.994)}
.hi-btn:active,.acb-card__quote:active,.hi-search button:active{transform:scale(.985)}

.hi-brand{transition:color .16s ease,background .16s ease}
.hi-brand:hover{background:var(--blue-soft)}

/* ==========================================================================
   Phone and reduced motion
   ========================================================================== */

@media (max-width:1000px){
  .hi-search{max-width:none}
  /* The drift is expensive and barely visible on a small screen. */
  .hi-hero__scene{will-change:auto}
}

@media (max-width:620px){
  .hi-search{
    flex-wrap:wrap;padding:5px 5px 5px 38px;
  }
  .hi-search__ic{left:12px}
  .hi-search input[type="search"]{font-size:16px;padding:9px 6px}
  .hi-search button{padding:10px 16px;font-size:14px}
  .hi-hero__hint{font-size:12px;margin-bottom:18px}
}

@media (prefers-reduced-motion:reduce){
  .hi-hero__eyebrow,
  .hi-hero__h,
  .hi-hero__sub,
  .hi-search,
  .hi-hero__hint,
  .hi-hero__cta,
  .hi-hero__scene{animation:none !important;opacity:1 !important;transform:none !important}
  .hi-hero__scene{transform:none !important}
  .acb-card:hover,.hi-cat:hover,.acb-card:hover .acb-card__frame img,.hi-cat:hover .hi-cat__shot img{
    transform:none !important;
  }
}

/* ==========================================================================
   Eight brands, in one row on a desktop and three to a row on a phone
   ==========================================================================
   The strip was written for six, so eight of them wrapped as six and two and
   left a ragged second row. The count now matches the roster.

   The dividing lines are the grid's own 1px gaps showing a tinted background
   through, rather than a border-left on every tile. A border on each tile has
   to be removed again from the first of every row, which is a rule that has to
   know the column count; a gap does not.
   ========================================================================== */

.hi-brands__rail{
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  overflow:hidden;
}
.hi-brand{
  background:#fff;
  border-left:0;
  min-height:76px;
  padding:15px 10px;
  font-size:17px;
  letter-spacing:-.1px;
}
.hi-brand:hover{background:var(--blue-soft)}
.hi-brand img{max-height:28px}

@media (max-width:1180px){
  .hi-brands__rail{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hi-brand{font-size:16px;min-height:68px}
}

@media (max-width:720px){
  .hi-brands__rail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hi-brand{
    font-size:14px;min-height:60px;padding:11px 7px;
    white-space:normal;line-height:1.22;text-align:center;
    overflow-wrap:break-word;word-break:break-word;
  }
  .hi-brand img{max-height:22px}
}

@media (max-width:420px){
  .hi-brand{font-size:13px;min-height:56px;padding:10px 5px}
}

/* ==========================================================================
   Navy, carried further, and the dead space under the steps closed up
   ==========================================================================
   The palette was reading as navy type on white with almost no navy surface.
   Two places take it without turning the page dark: the brand strip sits on a
   navy ground, and the footer is navy throughout. Both are low-content areas
   where a solid block reads as structure rather than as heaviness.

   The band between the last step and the footer was the steps' own bottom
   padding stacked on the footer's top padding -- around 150 pixels of nothing
   at the end of the page.
   ========================================================================== */

.hi-steps{padding:56px 0 40px;background:#fff}
.hi-steps__foot{margin-top:28px}

/* Brands on navy: white marks, hairline separators. */
.hi-brands{
  background:var(--ink);
  border-bottom:0;
  padding:24px 0;
}
.hi-brands__label{color:rgba(255,255,255,.58)}
.hi-brands__rail{
  background:rgba(255,255,255,.16);
  border-left:1px solid rgba(255,255,255,.16);
  border-right:1px solid rgba(255,255,255,.16);
}
.hi-brand{
  background:transparent;
  color:rgba(255,255,255,.86);
}
.hi-brand:hover{background:rgba(255,255,255,.09);color:#fff}
.hi-brand--plain,.hi-brand--plain:hover{color:rgba(255,255,255,.62)}
.hi-brand__n{color:#8fbcf0}
.hi-brands__more{color:rgba(255,255,255,.78)}
.hi-brands__more:hover{color:#fff}

/* Footer on navy. */
.acb-footer{background:var(--ink);color:rgba(255,255,255,.72);border-top:0}
.acb-footer h4,.acb-footer__brand b{color:#fff}
.acb-footer a{color:rgba(255,255,255,.72)}
.acb-footer a:hover{color:#fff}
.acb-footer__cols,.acb-footer__base{border-color:rgba(255,255,255,.14)}
.acb-footer__base{color:rgba(255,255,255,.5)}

@media (max-width:720px){
  .hi-steps{padding:40px 0 28px}
  .hi-brands{padding:16px 0}
}

/* ==========================================================================
   Small text was too light to read
   ==========================================================================
   --ink-3 carried every piece of small secondary text: the eyebrow, the note
   under a price, the category line on a card, the freight note. At #7d8d9e it
   measured 3.40:1 against white and 3.22:1 against the page tint. WCAG AA asks
   for 4.5:1 for text this size, so eight places on the home page were below it
   -- and they were exactly the places a buyer reads to check a detail.

   #5f6d7c measures 5.02:1 on the page tint and 5.31:1 on white, keeps the same
   cool grey-navy cast, and is still clearly lighter than --ink-2 so the
   hierarchy between primary and secondary text is unchanged.
   ========================================================================== */

:root{
  --ink-3:#5f6d7c;
}

/* ==========================================================================
   Two defects that only show up on a narrow phone
   ==========================================================================
   1. The photograph box on a card carried a fixed height of 236 pixels from an
      earlier version of this layout. It was written when the phone grid was a
      single column, where a square box came out 280 pixels tall and pushed the
      card to 611 -- so the height was pinned to fit two cards a screen. The
      grid is two columns now, so the card is about 160 pixels wide while the
      box stayed 236 tall: squashed proportions and 62 pixels of overflow past
      the viewport. A square box is right again at this width.

   2. The header's action row -- USD, Account, Quote list, Request a quote --
      is a single non-wrapping row about 340 pixels wide. Below roughly 370
      pixels of viewport it pushed the page sideways. It now wraps onto its own
      line and the mark stays above it.
   ========================================================================== */

@media (max-width:620px){
  .acb-card__frame{
    aspect-ratio:1/1;
    height:auto;
    min-height:0;
    max-height:none;
    padding:10px;
  }
}

@media (max-width:420px){
  .acb-header__in{gap:9px}
  .acb-header__act{
    flex:1 1 100%;
    margin-left:0;
    flex-wrap:wrap;
    justify-content:space-between;
    row-gap:9px;
    gap:10px;
  }
  .acb-header__cta{flex:1 1 100%;justify-content:center;text-align:center}
  .acb-hact{font-size:13px}
  .acb-cur{font-size:11.5px}
}

@media (max-width:360px){
  .acb-hact span{display:none}
  .acb-header__cta{padding:10px 12px;font-size:13px}
}

/* ==========================================================================
   The parallax was being overwritten by the entrance, and never moved
   ==========================================================================
   The picture had the same entrance animation as the text -- a rise, ending on
   `transform: none`, with fill-mode `both` so the last keyframe sticks.

   A running animation outranks an inline style, and `both` keeps it running in
   effect forever. So every transform the scroll handler wrote onto the element
   was overridden by the animation's final `transform: none`, and the picture
   sat perfectly still while its amber light advanced. The effect the brief asks
   for -- a slight sense of depth as the page scrolls -- was not happening at
   all, and it looked like it was, because the light did move.

   The picture now fades in on opacity alone. Opacity is not what the scroll
   writes, so the two stop fighting.
   ========================================================================== */

@keyframes hi-fade{
  from{opacity:0}
  to{opacity:1}
}

.hi-hero__scene{
  animation-name:hi-fade;
  animation-duration:.7s;
  animation-timing-function:ease-out;
  animation-fill-mode:both;
  animation-delay:.16s;
}

/* The picture is the one thing the scroll handler moves, so nothing else may
   claim its transform. */
.hi-hero__scene{transform:translate3d(0,0,0)}

@media (prefers-reduced-motion:reduce){
  .hi-hero__scene{animation:none !important;opacity:1 !important;transform:none !important}
}

/* ==========================================================================
   Category entries that have nothing under them yet
   ==========================================================================
   Option C: the four entries are the owner's plan, so they are shown whether or
   not stock has arrived. An entry with nothing under it is not a link and has no
   photograph -- it says so plainly instead, which is the whole point.

   The photograph box is not removed for an idle entry, it is filled with the
   notice. Taking it out would make that card shorter than its neighbours and
   leave a ragged gap under the row, which is the "large blank area" the brief
   rules out.
   ========================================================================== */

.hi-cat--idle{
  background:#fff;
  border-style:dashed;
  cursor:default;
}
.hi-cat--idle:hover{
  transform:none;
  box-shadow:none;
  border-color:var(--line);
}
.hi-cat__idle-t{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.3px;
  color:var(--ink-3);
  text-align:center;
  line-height:1.35;
}
.hi-cat--idle .hi-cat__n{color:var(--ink-2)}

@media (max-width:620px){
  .hi-cat__idle-t{font-size:11.5px}
}

/* ==========================================================================
   Browse by brand
   ==========================================================================
   Was eight names on one line, about 164 pixels each, set small enough to read
   as a footnote. A brand is often the only thing a buyer knows before they know
   the number, so it gets a grid with room: four across on a desktop, two across
   on a phone, and a card big enough to read at arm's length.

   A brand with stock behind it is a white card and a link. A brand with nothing
   behind it is a translucent card with no number and no link -- legible, clearly
   not yet open, and not a door onto an empty page.
   ========================================================================== */

.acb-sec--brands{background:var(--ink);padding:52px 0}
.acb-shead--onDark h2{color:#fff}
.acb-shead--onDark p{color:rgba(255,255,255,.66)}
.acb-shead--onDark a{color:rgba(255,255,255,.82)}

.hi-bcards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:26px;
}

.hi-bcard{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  min-height:104px;
  padding:20px 22px;
  background:#fff;
  border-radius:12px;
  position:relative;
  transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s ease,background .18s ease;
}
.hi-bcard__n{
  font-family:var(--font-head);
  font-size:20px;
  font-weight:700;
  line-height:1.2;
  color:var(--ink);
  letter-spacing:-.2px;
  overflow-wrap:break-word;
}
.hi-bcard__c{font-size:12.5px;color:var(--ink-3)}
.hi-bcard__a{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  color:var(--ink-3);transition:transform .18s ease,color .18s ease;
}
.hi-bcard:hover .hi-bcard__a{transform:translateY(-50%) translateX(3px);color:var(--blue)}
.hi-bcard:active{transform:scale(.99)}

@media (hover:hover) and (pointer:fine){
  .hi-bcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(6,16,30,.28)}
}

@media (max-width:1180px){
  .hi-bcards{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .hi-bcard{min-height:96px;padding:17px 16px}
  .hi-bcard__n{font-size:17px}
}

@media (max-width:900px){
  /* Two across, four rows: eight brands without a ragged last line. */
  .hi-bcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hi-bcard{min-height:84px;padding:15px 15px}
  .hi-bcard__n{font-size:16px}
  .hi-bcard__a{display:none}
  .acb-sec--brands{padding:38px 0}
}

/* ==========================================================================
   Categories: as many as there are, filling the row
   ==========================================================================
   auto-fit rather than a fixed count. Five categories in a four-column grid
   left a lone card on a second row and a third of the page empty beside it.
   With auto-fit the tracks that would be empty are collapsed and the ones that
   hold a card share the width, so any number of categories fills its row.
   ========================================================================== */

.hi-cats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.hi-cat__shot{height:150px;margin:12px 14px 0;padding:9px}
.hi-cat__t{
  padding:11px 15px 14px;font-size:12.5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ==========================================================================
   Product cards on a phone: one per row, picture left, facts right
   ==========================================================================
   Two columns at 390 pixels gave each card about 160 pixels. The model number,
   which has to be read in full and cannot be shortened, wrapped to three lines;
   the price was the same size as the labels around it; the quote button was
   narrower than a fingertip. A single row per card is worth the scrolling.
   ========================================================================== */

@media (max-width:620px){
  .acb-cards,
  .acb-cards[data-cols],
  .acb-cards[data-cols="1"],
  .acb-cards[data-cols="2"],
  .acb-cards[data-cols="3"],
  .acb-cards[data-cols="4"]{grid-template-columns:minmax(0,1fr);gap:12px}

  .acb-card{
    display:grid;
    grid-template-columns:136px minmax(0,1fr);
    align-items:stretch;
    min-height:0;
  }
  .acb-card__shot{grid-column:1;grid-row:1;border-bottom:0;border-right:1px solid var(--line)}
  .acb-card__frame{aspect-ratio:auto;height:100%;min-height:150px;padding:9px}
  .acb-card__body{
    grid-column:2;grid-row:1;
    grid-template-rows:auto auto auto 1fr auto;
    gap:4px;padding:13px 14px 13px;
  }
  .acb-card__model{font-size:15px;line-height:1.25;overflow-wrap:break-word;white-space:normal}
  .acb-card__meta{font-size:12px}
  .acb-card__price{font-size:19px;margin:2px 0 0}
  .acb-card__ship{font-size:11.5px;line-height:1.35}
  .acb-card__quote{
    min-height:44px;margin-top:9px;font-size:14px;
    padding:11px 12px;
  }
  .acb-card__stock{font-size:12px}
  .acb-card__peek{
    grid-column:1;grid-row:1;align-self:start;justify-self:end;
    margin:7px;padding:0;width:32px;height:32px;
  }
  .acb-card__peek span{display:none}
}

/* ==========================================================================
   The first screen on a phone: the field before the picture
   ==========================================================================
   The picture was ordered first, so a buyer on a phone scrolled past a wide
   pale block before reaching the field they came to use. The words and the
   field come first now, and the picture follows them at a reduced height.
   ========================================================================== */

@media (max-width:1000px){
  .hi-hero__scene{order:0;height:280px}
  .hi-hero__in{gap:22px;padding-top:34px;padding-bottom:30px}
}

@media (max-width:620px){
  .hi-hero__scene{height:180px;border-radius:10px}
  .hi-hero__in{gap:18px;padding-top:26px;padding-bottom:24px}
  .hi-hero__h{font-size:29px;max-width:22ch;margin-bottom:12px}
  .hi-hero__sub{font-size:14px;margin-bottom:18px}
  .hi-hero__eyebrow{font-size:10.5px;letter-spacing:1.6px;margin-bottom:11px}
  .hi-hero__hint{display:none}
  .hi-hero__cta{display:none}
}

/* ==========================================================================
   Less air between sections
   ========================================================================== */

.acb-sec{padding:44px 0}
.acb-sec--tight{padding:30px 0}
.acb-shead{margin-bottom:22px}
.hi-steps{padding:44px 0 34px}
.hi-stepgrid{margin-top:26px}

@media (max-width:900px){
  .acb-sec{padding:32px 0}
  .hi-steps{padding:32px 0 24px}
  .acb-shead{margin-bottom:18px}
}

/* ==========================================================================
   Three things the width sweep turned up
   ==========================================================================
   1. Categories fell to a single column at 390 pixels -- minmax(200px, 1fr)
      cannot fit two tracks in 330 pixels -- so five categories became one long
      strip. Two across, as the brand grid is.
   2. The line under a model number ("Analog Input Modules · OMRON") was clipped
      at the same width. It wraps now: a category name is not a thing to shorten.
   3. The featured grid was a fixed three columns, so five products made 3 + 2
      and left a card-sized hole at the end of the row. auto-fit collapses the
      empty track and the cards that exist share the width, so any count fills
      its last row.
   ========================================================================== */

@media (max-width:620px){
  .hi-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hi-cat__shot{height:104px;margin:8px 10px 0;padding:6px}
  .hi-cat__n{font-size:14px}
  .hi-cat__t{padding:9px 11px 11px;font-size:11.5px;-webkit-line-clamp:3}

  .acb-card__meta{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:break-word;
    line-height:1.35;
  }
}

/* The home page grid, filled rather than fixed. */
/*
 * .acb-cards[data-cols="3"] is a class plus an attribute, which outweighs a
 * single class -- so the first attempt at this was quietly ignored and the grid
 * stayed at three columns. Matching that specificity and coming later in the
 * file is what makes it apply.
 */
/*
 * 228 rather than 252, so five products make one row at 1440 instead of four
 * plus a lone card with three empty slots beside it. Widening the last row to
 * fill would leave those cards a different size from the rest, which is the
 * other thing the brief rules out.
 */
.acb-cards.acb-cards--fill,
.acb-cards.acb-cards--fill[data-cols]{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}

@media (min-width:1181px){
  .acb-cards.acb-cards--fill{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
}

/* ==========================================================================
   Category cards: the photographs line up whichever way the name wraps
   ==========================================================================
   All five cards are the same height and all five notes sit on the same line,
   but the picture boxes did not: a name on one line put its picture 60 pixels
   above a name on three. The name area is given a fixed height so the pictures
   start together, and the type is set a little smaller so the one long name --
   "Serial Communications Option Board" -- still fits in two lines. Nothing is
   truncated: a category name is what the buyer is scanning for.
   ========================================================================== */

.hi-cat__top{
  align-items:flex-start;
  min-height:76px;
}
.hi-cat__n{font-size:14.5px;line-height:1.25}
.hi-cat__arw{margin-top:2px;flex:0 0 auto}

@media (max-width:900px){
  .hi-cat__top{min-height:62px}
  .hi-cat__n{font-size:13.5px}
}

/* ==========================================================================
   The top of the page: one picture across the whole band
   ==========================================================================
   Replaces the split layout -- a rounded box of picture on the right with the
   words beside it -- with the picture covering everything from under the
   navigation to the brand section. The words sit on the dark left of it.

   The photograph is bright, so the scrim is heaviest on the left where the type
   is and thins to the right where the machinery is. The crop is pushed right
   for the same reason: the machine and the operator are what the frame is of,
   and an empty floor is not.
   ========================================================================== */

.hi-hero{
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--ink);
  min-height:534px;
  border-bottom:0;
}
.hi-hero--bare{background:linear-gradient(135deg,#0f2740 0%,#17395c 100%)}

.hi-hero__art{
  position:absolute;
  inset:-5% 0;
  z-index:0;
  will-change:transform;
}
.hi-hero__art img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:70% center;
}

.hi-hero__scrim{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    90deg,
    rgba(8,22,38,.95) 0%,
    rgba(8,22,38,.90) 30%,
    rgba(8,22,38,.66) 52%,
    rgba(8,22,38,.30) 74%,
    rgba(8,22,38,.44) 100%
  );
}

.hi-hero__in{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  padding-top:74px;
  padding-bottom:74px;
}
.hi-hero__txt{max-width:592px;min-width:0}

.hi-hero__eyebrow{
  margin:0 0 15px;
  font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:rgba(255,255,255,.76);
}
.hi-hero__h{
  margin:0 0 15px;max-width:15ch;
  font-family:var(--font-head);
  font-size:54px;line-height:1.08;letter-spacing:-1px;
  color:#fff;
}
.hi-hero__sub{
  margin:0 0 24px;max-width:46ch;
  font-size:16px;line-height:1.62;
  color:rgba(255,255,255,.85);
}
.hi-hero__hint{
  margin:0;
  font-size:12.5px;
  color:rgba(255,255,255,.66);
}
.hi-hero__cta{display:none}

/* The field, on a dark ground. */
.hi-search{
  background:#fff;
  border-color:rgba(255,255,255,.24);
  box-shadow:0 10px 30px rgba(4,14,26,.34);
  margin-bottom:11px;
}
.hi-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(95,157,224,.34),0 10px 30px rgba(4,14,26,.34)}
.hi-search__ic{color:var(--ink-3)}
.hi-search input[type="search"]{color:var(--ink)}
.hi-search input::placeholder{color:var(--ink-3)}
.hi-search button{background:var(--ink);color:#fff}
.hi-search button:hover{background:var(--blue)}

/* The words arrive in a short stagger; the picture only fades. */
.hi-hero__h,.hi-hero__sub,.hi-search{animation-name:hi-rise}
.hi-hero__art{animation-name:hi-fade;animation-duration:.9s;animation-fill-mode:both}

@media (max-width:1180px){
  .hi-hero{min-height:472px}
  .hi-hero__h{font-size:44px;max-width:17ch}
  .hi-hero__in{padding-top:58px;padding-bottom:58px}
}

@media (max-width:900px){
  .hi-hero{min-height:0;align-items:stretch}
  .hi-hero__in{padding-top:38px;padding-bottom:34px}
  .hi-hero__txt{max-width:none}
  .hi-hero__h{font-size:34px;max-width:20ch;margin-bottom:12px}
  .hi-hero__sub{font-size:14.5px;max-width:42ch;margin-bottom:18px}
  .hi-hero__eyebrow{font-size:10.5px;letter-spacing:1.7px;margin-bottom:11px}
  .hi-hero__hint{display:none}

  /* The crop follows the machine rather than the empty floor, and the scrim
     runs top to bottom instead of left to right. */
  .hi-hero__art img{object-position:76% center}
  .hi-hero__scrim{
    background:linear-gradient(
      180deg,
      rgba(8,22,38,.90) 0%,
      rgba(8,22,38,.80) 42%,
      rgba(8,22,38,.88) 100%
    );
  }
}

/* ==========================================================================
   Browse by brand: one card shape, and the state said in words
   ==========================================================================
   The two states used to be a white card and a navy card with nothing to say
   what either meant, and the count was a bare numeral beside the name that read
   as a typo. Every card is the same size and shape now; the difference is a
   sentence -- "2 products" or "No stock yet" -- and only the first is a link.

   The mark sits in a fixed-height band so all eight sit on one optical line
   whatever the length of the name, and the name is set in the body face at one
   weight and size rather than in a display serif, which at this size read as a
   company logo that had been typed rather than drawn.
   ========================================================================== */

.hi-bcards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:24px;
}

.hi-bcard{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  height:122px;
  padding:18px 16px;
  background:#fff;
  border:1px solid #fff;
  border-radius:12px;
  text-align:center;
  overflow:hidden;
  transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s ease,background .18s ease;
}

.hi-bcard__mark{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  width:100%;
  font-family:var(--font-body);
  font-size:18px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.2px;
  color:var(--ink);
  text-wrap:balance;
  overflow-wrap:break-word;
}
.hi-bcard__mark img{max-height:40px;max-width:100%;width:auto;height:auto;object-fit:contain}

.hi-bcard__state{
  font-size:12px;
  line-height:1.2;
  color:var(--ink-3);
  white-space:nowrap;
}

/* No stock: same card, a hairline instead of a fill, and it says so. */
.hi-bcard--none{
  background:transparent;
  border-style:dashed;
  border-color:rgba(255,255,255,.30);
}
.hi-bcard--none .hi-bcard__mark{color:rgba(255,255,255,.92)}
.hi-bcard--none .hi-bcard__state{color:rgba(255,255,255,.58)}
.hi-bcard--none:hover{background:rgba(255,255,255,.05);transform:none;box-shadow:none}

@media (hover:hover) and (pointer:fine){
  .hi-bcard:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(5,14,26,.34)}
  .hi-bcard--none:hover{transform:none;box-shadow:none}
}
.hi-bcard:active{transform:translateY(-1px) scale(.995)}

@media (max-width:1180px){
  .hi-bcards{gap:13px}
  .hi-bcard{height:116px;padding:16px 13px}
  .hi-bcard__mark{font-size:16.5px;min-height:42px}
}

@media (max-width:900px){
  /* Two across, four rows. Long names wrap rather than shrink. */
  .hi-bcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:18px}
  .hi-bcard{height:108px;padding:14px 12px;gap:7px}
  .hi-bcard__mark{font-size:15.5px;min-height:40px;letter-spacing:-.1px}
  .hi-bcard__state{font-size:11.5px}
  .acb-sec--brands{padding:34px 0}
}

@media (max-width:400px){
  .hi-bcard__mark{font-size:14.5px}
}

/* ==========================================================================
   The featured grid: fewer, larger cards
   ==========================================================================
   The grid was tuned so five products would sit on one row at 1440, which made
   each card 246 pixels wide and left the model number and the price fighting
   for room. Filling the row is not worth shrinking the two things a buyer reads
   -- the part number and the figure. Three across at a desktop, and the last
   row of a five-item set carries a single gap, which is what five items in a
   three-column grid is.
   ========================================================================== */

.acb-cards.acb-cards--fill,
.acb-cards.acb-cards--fill[data-cols]{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.acb-cards--fill .acb-card__model{font-size:18px}
.acb-cards--fill .acb-card__price{font-size:20px}
.acb-cards--fill .acb-card__frame{padding:16px}

@media (max-width:1180px){
  .acb-cards.acb-cards--fill,
  .acb-cards.acb-cards--fill[data-cols]{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
}

@media (max-width:900px){
  .acb-cards.acb-cards--fill,
  .acb-cards.acb-cards--fill[data-cols]{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}

@media (max-width:620px){
  .acb-cards.acb-cards--fill,
  .acb-cards.acb-cards--fill[data-cols]{grid-template-columns:minmax(0,1fr);gap:12px}
}

/* ==========================================================================
   The two delivery routes
   ==========================================================================
   Both routes stated plainly and side by side, so a buyer who only wants the
   part sent to their own warehouse in China can see that this is a thing the
   shop does. Neither route is claimed to be quicker or cheaper than the other.
   ========================================================================== */

.hi-routes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:34px;
  padding-top:30px;
  border-top:1px solid var(--line-2);
}
.hi-route h3{
  margin:0 0 8px;
  font-family:var(--font-head);
  font-size:19px;
  font-weight:400;
  color:var(--ink);
}
.hi-route p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}

@media (max-width:900px){
  .hi-routes{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:26px;padding-top:22px}
  .hi-route h3{font-size:17px}
  .hi-route p{font-size:13px}
}

/* ==========================================================================
   Two refinements
   ==========================================================================
   1. The no-stock brand cards were dashed outlines on navy, which read as empty
      slots rather than as cards. They now have the same size, radius and border
      weight as the rest -- a solid hairline over a faint translucent fill -- so
      all eight read as one set, and the state is told by the words and by
      whether the card is a link. Uniformity was the point of the redesign.
   2. The scrim thinned too late to let the machinery show. It now clears further
      to the right, where the machine and the operator are, and keeps its weight
      only where the type is.
   ========================================================================== */

.hi-bcard--none{
  background:rgba(255,255,255,.055);
  border-style:solid;
  border-color:rgba(255,255,255,.17);
}
.hi-bcard--none:hover{background:rgba(255,255,255,.055)}
.hi-bcard--none .hi-bcard__mark{color:rgba(255,255,255,.90)}
.hi-bcard--none .hi-bcard__state{color:rgba(255,255,255,.52)}

.hi-hero__scrim{
  background:linear-gradient(
    90deg,
    rgba(8,22,38,.95) 0%,
    rgba(8,22,38,.88) 28%,
    rgba(8,22,38,.58) 48%,
    rgba(8,22,38,.16) 72%,
    rgba(8,22,38,.26) 100%
  );
}

.hi-hero__h{max-width:14ch}

/* ==========================================================================
   The top band, in dark type on the picture's own light side
   ==========================================================================
   The photograph is measured, not guessed: its left 42% averages 235 of 255
   with the brightest five per cent at 249. That is the blank part of the frame
   -- the blurred hall -- and it is where the owner asked for the words to sit.
   Over a ground that light, navy type measures about 13:1 and white type would
   be the unreadable choice, which is the opposite of what a dark scrim assumed.

   So the scrim is white and thins to nothing by three quarters of the width,
   the machinery on the right is left alone, and the type is the navy the rest of
   the site uses. The picture is doing the work instead of being covered up.
   ========================================================================== */

.hi-hero{background:#eef2f7}
.hi-hero--bare{background:linear-gradient(135deg,#f2f5f9 0%,#e3eaf2 100%)}

.hi-hero__scrim{
  background:linear-gradient(
    90deg,
    rgba(252,253,255,.95) 0%,
    rgba(252,253,255,.92) 30%,
    rgba(252,253,255,.74) 48%,
    rgba(252,253,255,.28) 68%,
    rgba(252,253,255,0) 84%
  );
}

.hi-hero__eyebrow{color:var(--ink-2)}
.hi-hero__h{color:var(--ink)}
.hi-hero__sub{color:var(--ink-2)}
.hi-hero__hint{color:var(--ink-3)}

.hi-search{
  background:#fff;
  border-color:var(--line-2);
  box-shadow:0 6px 22px rgba(15,39,64,.10);
}
.hi-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,95,168,.16),0 6px 22px rgba(15,39,64,.10)}
.hi-search__ic{color:var(--ink-3)}
.hi-search input[type="search"]{color:var(--ink)}
.hi-search input::placeholder{color:var(--ink-3)}
.hi-search button{background:var(--ink);color:#fff}
.hi-search button:hover{background:var(--blue)}

@media (max-width:900px){
  /* On a phone the words sit lower in the frame, over the machine rather than
     the empty hall, so the scrim runs top to bottom and keeps its weight. */
  .hi-hero__scrim{
    background:linear-gradient(
      180deg,
      rgba(252,253,255,.97) 0%,
      rgba(252,253,255,.93) 38%,
      rgba(252,253,255,.90) 66%,
      rgba(252,253,255,.72) 100%
    );
  }
  .hi-hero__h{color:var(--ink)}
  .hi-hero__sub{color:var(--ink-2)}
}

/* ==========================================================================
   The phone hero: let the machine show under the words
   ==========================================================================
   The scrim ran to .72 at the bottom of the block, which over a photograph that
   is already near white left the whole band reading as blank paper -- the
   picture was there and could not be seen. The band now keeps its weight only
   where the words are, and clears below them, and it is tall enough for that
   cleared part to be worth looking at.
   ========================================================================== */

@media (max-width:900px){
  .hi-hero{min-height:436px;align-items:flex-start}
  .hi-hero__in{padding-top:32px;padding-bottom:26px}
  .hi-hero__scrim{
    background:linear-gradient(
      180deg,
      rgba(252,253,255,.97) 0%,
      rgba(252,253,255,.95) 42%,
      rgba(252,253,255,.72) 62%,
      rgba(252,253,255,.24) 82%,
      rgba(252,253,255,.10) 100%
    );
  }
}

@media (max-width:400px){
  .hi-hero{min-height:412px}
}

/* ==========================================================================
   Browse by brand, as the reference lays it out
   ==========================================================================
   Eight separate white cards on the navy band, four across and two down on a
   desktop, two across on a phone. The mark sits centred in the upper part at one
   height across all eight; beneath it is one line saying what the card does.

   White for every card, including the brands with nothing listed yet. The first
   version made those translucent, which read as empty slots rather than as
   cards -- and the state is already said in words, so the fill does not have to
   say it too. What differs is the line and whether the card is a link.

   No card claims stock it does not have: a brand with nothing behind it says
   "No stock yet" and is a div, so it cannot be clicked into an empty listing.
   ========================================================================== */

.hi-bcards{gap:18px;margin-top:26px}

.hi-bcard{
  height:152px;
  padding:20px 18px;
  background:#fff;
  border:0;
  border-radius:10px;
  gap:0;
  justify-content:space-between;
  transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease;
}

.hi-bcard__mark{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  width:100%;
  font-family:var(--font-body);
  font-size:18px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.2px;
  color:var(--ink);
  overflow-wrap:break-word;
}
.hi-bcard__mark img{
  max-width:86%;
  max-height:52px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

.hi-bcard__state{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  font-size:12.5px;
  line-height:1.25;
  color:var(--ink-2);
  white-space:normal;
}
.hi-bcard__go{display:inline-flex;align-items:center;gap:4px}
.hi-bcard__chev{font-size:15px;line-height:1;color:var(--ink-3);transition:transform .18s ease}
.hi-bcard:hover .hi-bcard__chev{transform:translateX(2px)}
.hi-bcard__n{font-size:11.5px;color:var(--ink-3)}

/* Nothing listed yet: the same card, quieter wording, and not a link. */
.hi-bcard--none{background:#fff}
/*
 * No fade. Dimming the mark of a brand with nothing listed made six of the eight
 * logos read as washed out, which is a poor showing of artwork that is correct.
 * The state is already said in the line beneath it.
 */
.hi-bcard--none .hi-bcard__mark{color:var(--ink-2)}
.hi-bcard--none .hi-bcard__state{color:var(--ink-3)}
.hi-bcard--none:hover{transform:none;box-shadow:none}

@media (hover:hover) and (pointer:fine){
  .hi-bcard:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 18px 38px rgba(4,12,24,.36)}
}
.hi-bcard:active{transform:translateY(-1px) scale(.995)}
.hi-bcard--none:active{transform:none}

@media (max-width:1180px){
  .hi-bcards{gap:14px}
  .hi-bcard{height:138px;padding:17px 14px}
  .hi-bcard__mark img{max-height:44px}
}

@media (max-width:900px){
  .hi-bcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
  .hi-bcard{height:124px;padding:15px 12px}
  .hi-bcard__mark{font-size:15px}
  .hi-bcard__mark img{max-height:38px;max-width:90%}
  .hi-bcard__state{font-size:11.5px}
}

/* ==========================================================================
   Brand rails: two rows on a desktop, two swipes on a phone
   ==========================================================================
   The phone version was the desktop card shrunk -- eight of them two across,
   four rows deep, each about a hundred and twenty-four pixels tall with a line
   of text under every logo. That is a column of eight boxes on a phone, and it
   is more brand section than the page can afford before the products start.

   It is two rails now. On a desktop they stack and read as two rows of four. On
   a phone each rail scrolls sideways: cards 132 wide and 66 tall, four to a
   rail, so the third is always cut by the edge of the screen. That cut is the
   whole affordance -- no arrows, no dots, no autoplay, nothing moving on its
   own. The card that is half off the edge is what says the row can be swiped.

   Scroll snapping is 'proximity', not 'mandatory': a mandatory snap fights a
   short flick and makes the rail feel sticky. Proximity lets it settle when it
   is close and otherwise leaves the finger alone.
   ========================================================================== */

.hi-bcards{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:26px}

.hi-brail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}

.hi-bcard{
  height:152px;
  padding:20px 18px;
  background:#fff;
  border:0;
  border-radius:10px;
  gap:0;
  justify-content:space-between;
  transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease;
}

.hi-bcard__mark{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  width:100%;
  font-family:var(--font-body);
  font-size:18px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.2px;
  color:var(--ink);
  overflow-wrap:break-word;
}
.hi-bcard__mark img{
  max-width:86%;
  max-height:52px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

.hi-bcard__state{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  font-size:12.5px;
  line-height:1.25;
  color:var(--ink-2);
  white-space:normal;
}
.hi-bcard__go{display:inline-flex;align-items:center;gap:4px}
.hi-bcard__chev{font-size:15px;line-height:1;color:var(--ink-3);transition:transform .18s ease}
.hi-bcard:hover .hi-bcard__chev{transform:translateX(2px)}
.hi-bcard__n{font-size:11.5px;color:var(--ink-3)}

.hi-bcard--none{background:#fff}
.hi-bcard--none .hi-bcard__mark{color:var(--ink-2)}
.hi-bcard--none .hi-bcard__state{color:var(--ink-3)}

@media (hover:hover) and (pointer:fine){
  .hi-bcard:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 18px 38px rgba(4,12,24,.36)}
  .hi-bcard--none:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 18px 38px rgba(4,12,24,.36)}
  .hi-bcard:active{transform:translateY(-1px) scale(.995)}
}

@media (max-width:1180px){
  .hi-bcards{gap:14px}
  .hi-brail{gap:14px}
  .hi-bcard{height:138px;padding:17px 14px}
  .hi-bcard__mark img{max-height:44px}
}

@media (max-width:900px){
  .acb-sec--brands{padding:30px 0 26px}

  .hi-bcards{gap:10px;margin-top:18px}

  /*
   * Each rail scrolls on its own. The negative margin and the matching padding let a card sit
   * flush against the screen edge while still being able to scroll fully into view.
   */
  .hi-brail{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:132px;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:2px 0 6px;
  }
  .hi-brail::-webkit-scrollbar{display:none}
  .hi-brail > *{scroll-snap-align:start}

  .hi-bcard{
    height:66px;
    /* An earlier version of this block set min-height:84px, which held the card
       open at 84 however small the height was set. Both have to be cleared. */
    min-height:0;
    padding:8px 10px;
    justify-content:center;
    border-radius:8px;
  }

  /* The mark, and nothing else. */
  .hi-bcard__mark{flex:0 0 auto;min-height:0}
  .hi-bcard__mark img{max-height:36px;max-width:92%}
  .hi-bcard__mark{font-size:14px}
  .hi-bcard__state{display:none}

  /* No hover on a touch screen: a short press is the only feedback. */
  .hi-bcard:active{transform:scale(.97);transition:transform .09s ease}
}

@media (max-width:400px){
  .hi-brail{grid-auto-columns:126px}
  .hi-bcard{height:64px;min-height:0}
  .hi-bcard__mark img{max-height:34px}
}

/* At 320 pixels two 120-pixel cards and their gaps fill the rail exactly, so the
   third card starts precisely at the edge and nothing peeks -- and a rail with no
   visible next card looks like a row that has ended. Narrower cards let the third
   show. This is the one width where the card is below the 120-pixel mark. */
@media (max-width:344px){
  .hi-brail{grid-auto-columns:112px;gap:9px}
  .hi-bcard{height:62px;padding:7px 9px}
  .hi-bcard__mark img{max-height:32px}
}

/* ==========================================================================
   Phone layout: brands in three columns, products in two
   ==========================================================================
   Everything in this block is inside a max-width query, so the desktop is
   untouched. The owner asked for the phone only; the desktop grid, the product
   data and the prices are as they were.
   ========================================================================== */

@media (max-width:900px){

  /* -------- brands: a plain grid, nothing to swipe --------
     The two rails become one grid. display:contents takes the rail boxes out of
     the layout so their eight cards become direct children of the grid, which
     is what makes three columns come out as 3 + 3 + 2. Left as two rails of four
     it would be 3 + 1 + 3 + 1, which is not a grid anyone would draw. */
  .hi-bcards{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:14px;
  }
  .hi-brail{display:contents}

  .acb-sec--brands{padding:22px 0 20px}
  .acb-sec--brands .acb-shead h2{font-size:22px;margin-bottom:4px}
  .acb-sec--brands .acb-shead p{font-size:12.5px;line-height:1.4}

  .hi-bcard{
    height:52px;
    min-height:0;
    padding:5px 6px;
    border-radius:7px;
    justify-content:center;
  }
  /* contain, never cover: a mark that is cropped is a mark shown wrongly. */
  .hi-bcard__mark{flex:0 0 auto;min-height:0;width:100%}
  .hi-bcard__mark img{max-height:26px;max-width:92%;width:auto;height:auto;object-fit:contain}
  .hi-bcard__mark{font-size:12.5px;letter-spacing:-.1px}
  .hi-bcard__state{display:none}

  /* A touch screen has no hover; a short press is the only feedback. */
  .hi-bcard:active{transform:scale(.97);transition:transform .09s ease}

  /* -------- products: two compact cards across --------
     One card per row meant five screens of scrolling for five parts. The card
     is the picture on top and the words under it now, which is what fits in a
     hundred and fifty pixels. */
  .acb-cards.acb-cards--fill,
  .acb-cards.acb-cards--fill[data-cols]{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
  }

  .acb-cards--fill .acb-card{
    display:block;
    padding:9px;
    border-radius:10px;
  }

  .acb-cards--fill .acb-card__shot,
  .acb-cards--fill .acb-card__frame{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
    margin:0 0 8px;
  }
  .acb-cards--fill .acb-card__frame{padding:3px;border-radius:7px}
  .acb-cards--fill .acb-card__frame img{width:100%;height:100%;object-fit:contain}
  .acb-cards--fill .acb-card__nophoto{font-size:10.5px}

  /* The model first, and allowed to break: DS7-342SX081N0-N is nineteen
     characters and there is no width at which it fits on one line here. */
  .acb-cards--fill .acb-card__model{
    font-size:12.5px;
    line-height:1.28;
    margin:0 0 4px;
    overflow-wrap:anywhere;
    word-break:break-word;
    hyphens:none;
  }
  .acb-cards--fill .acb-card__meta{display:none}

  .acb-cards--fill .acb-card__price{
    font-size:15px;
    line-height:1.2;
    margin:0 0 5px;
  }

  /* The delivery sentence is the same on every card, so it is said once, under
     the grid, where it already is. Five repetitions of it cost five lines. */
  .acb-cards--fill .acb-card__ship{display:none}

  .acb-cards--fill .acb-card__foot{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    margin-top:auto;
  }
  .acb-cards--fill .acb-card__stock{font-size:11.5px}
  .acb-cards--fill .acb-card__quote{
    width:100%;
    min-height:40px;
    padding:9px 6px;
    font-size:12px;
    border-radius:7px;
  }
}

@media (max-width:344px){
  .hi-bcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:12px}
  .hi-bcard{height:54px}
  .hi-bcard__mark img{max-height:27px}

  .acb-cards.acb-cards--fill,
  .acb-cards.acb-cards--fill[data-cols]{gap:9px}
  .acb-cards--fill .acb-card{padding:8px}
  .acb-cards--fill .acb-card__model{font-size:11.5px}
  .acb-cards--fill .acb-card__price{font-size:14px}
}

/* The button label wrapped to two lines at 145 pixels with the icon beside it.
   One line fits with a smaller face and tighter padding, and the height stays at
   40 so the touch target does not shrink with it. */
@media (max-width:900px){
  .acb-cards--fill .acb-card__quote{
    font-size:11.5px;
    padding:8px 5px;
    gap:5px;
    white-space:nowrap;
  }
  .acb-cards--fill .acb-card__quote svg{width:13px;height:13px;flex:0 0 auto}
}
@media (max-width:344px){
  .acb-cards--fill .acb-card__quote{font-size:11px;padding:8px 3px}
}

/* ==========================================================================
   The heading: Industrial Automation Parts. / Your Trusted Supplier.
   ==========================================================================
   Two lines at every width, and the sizes are measured rather than guessed. In
   Georgia at the site's -1px tracking, "Industrial Automation Parts." is 609
   pixels wide at 50px and 431 at 36px -- about 12.2 pixels per point of type.
   Every size below is chosen so that the longer line still fits its column on
   ONE line, because the break between the two sentences is the whole point of
   the heading and a third line appearing inside the first sentence spoils it.

       desktop 1440   column 672   line 609 at 50px    fits
       desktop 1180   column 550   line 524 at 43px    fits
       phone   414    column 354   line 317 at 26px    fits
       phone   390    column 330   line 317 at 26px    fits
       phone   360    column 300   line 281 at 23px    fits
       phone   320    column 260   line 256 at 21px    fits

   The first line carries the weight and the second is set in the same face a
   little quieter, the way a company states what it does and then who it is.
   ========================================================================== */

.hi-hero__h{
  max-width:none;
  font-size:50px;
  line-height:1.12;
  letter-spacing:-1px;
  margin:0 0 18px;
}
.hi-hero__h-l1,
.hi-hero__h-l2{display:block}
.hi-hero__h-l1{color:var(--ink)}
.hi-hero__h-l2{color:var(--ink-2);font-weight:400}

/* The words get the room the heading needs; the scrim still covers it. */
.hi-hero__txt{max-width:672px}

@media (max-width:1180px){
  .hi-hero__h{font-size:43px;line-height:1.13;margin-bottom:15px}
  .hi-hero__txt{max-width:560px}
}

@media (max-width:900px){
  .hi-hero__txt{max-width:none}

  /*
   * 26px, not the 34 the old heading used. The old one was three lines and this
   * one is two, so the block is shorter even at a smaller size -- which is what
   * keeps the search field high on the screen instead of below the fold.
   */
  .hi-hero__h{
    font-size:26px;
    line-height:1.22;
    letter-spacing:-.4px;
    margin:0 0 13px;
  }
  .hi-hero__h-l2{color:var(--ink-2)}
}

@media (max-width:380px){
  .hi-hero__h{font-size:23px;letter-spacing:-.3px;line-height:1.24}
}

@media (max-width:340px){
  /*
   * 21px with the tracking pulled to -0.5px rather than -0.2. At -0.2 the long
   * line came to 262 pixels in a 260-pixel column and broke after "Automation",
   * putting "Parts." on a line of its own. The tighter tracking takes it to 254
   * and the two-line shape holds.
   */
  .hi-hero__h{font-size:21px;letter-spacing:-.5px}
}

/* ==========================================================================
   The search field on a phone: one row, always
   ==========================================================================
   An earlier version of this block set flex-wrap:wrap, from a design where the
   field and the button stacked on a small screen. The button has been inside the
   field's border for several revisions now, so wrapping no longer makes a smaller
   layout -- it just drops the button onto a line of its own and leaves a one-line
   field above it. Measured at 360px: input at y=394, button at y=438.

   nowrap, and the input is allowed to give up width rather than push. min-width:0
   is what makes that work; without it a flex item refuses to shrink past its
   content and the button is pushed out anyway.
   ========================================================================== */

@media (max-width:620px){
  .hi-search{
    flex-wrap:nowrap;
    padding:5px 5px 5px 38px;
  }
  .hi-search input[type="search"]{
    flex:1 1 auto;
    min-width:0;
    font-size:16px;
    padding:9px 6px;
  }
  .hi-search button{
    flex:0 0 auto;
    padding:10px 16px;
    font-size:14px;
    white-space:nowrap;
  }
}

@media (max-width:400px){
  .hi-search{padding:5px 5px 5px 34px}
  .hi-search__ic{left:11px}
  .hi-search input[type="search"]{font-size:16px;padding:9px 4px}
  .hi-search button{padding:10px 12px;font-size:13.5px}
}

/* ==========================================================================
   Part numbers, and the two card states
   ==========================================================================
   Three separate complaints, one block each.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The part number, in a face that tells 0 from O and 1 from I
   --------------------------------------------------------------------------
   It was set in the heading serif -- Georgia, 18px, weight 700. At that weight
   and size the serif's O and 0 are near enough identical, and its I and 1 are
   worse: DS7-342SX081N0-N and DS7-342SX08IN0-N read the same. A part number
   that can be misread is a wrong part ordered.

   Consolas is the first choice because its zero is slashed and its one carries a
   foot, so the two pairs separate at a glance. The rest of the stack is the same
   kind of face on other systems. slashed-zero is asked for explicitly as well,
   for fonts that offer it as an option rather than as the default.

   The number itself is untouched: same characters, same case, same hyphens, no
   ellipsis, no shortening. It wraps when it has to. Nothing is stretched,
   squeezed or scaled -- the tracking is 0 and stays 0.
   -------------------------------------------------------------------------- */
.acb-card__model,
.acb-cards--fill .acb-card__model{
  font-family:var(--mono);
  font-variant-numeric:slashed-zero;
  font-feature-settings:"zero" 1,"ss01" 0;
  font-weight:700;
  letter-spacing:0;
  font-stretch:normal;
  font-size:16px;
  line-height:1.35;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:none;
  white-space:normal;
  text-overflow:clip;
  overflow:visible;
  max-height:none;
  -webkit-line-clamp:none;
}
.acb-cards--fill .acb-card__model{font-size:16px;line-height:1.35}

/* --------------------------------------------------------------------------
   2. Nothing on a product card sinks, inverts or squashes
   --------------------------------------------------------------------------
   The card used to shift and shrink a hair under the press, and the part number
   turned teal when the pointer crossed it. Both are gone. What is left is an
   outer shadow and a border, which say "this opens" without the number ever
   moving or changing colour.
   -------------------------------------------------------------------------- */
.acb-card:active,
.acb-cards--fill .acb-card:active{
  transform:none;
  box-shadow:0 2px 8px rgba(20,32,31,.10);
  border-color:var(--blue);
}
.acb-card:hover .acb-card__model a,
.acb-card:focus-within .acb-card__model a,
.acb-card__model a:hover,
.acb-card__model a:active,
.acb-card__model a:focus{color:var(--ink)}
.acb-card__model a{text-decoration:none}
.acb-card__model a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}
.acb-card__quote:active{transform:none;background:var(--ink-2)}

/* --------------------------------------------------------------------------
   3. The brand cards keep their confirmed look in every state
   -------------------------------------------------------------------------- */

/* No tap flash. Android and iOS paint a translucent grey over a tapped link by
   default, which on a white card on a navy band reads exactly like the card
   turning dark. It is a highlight, it outlives the touch, and it is not
   something the rest of the stylesheet can override. */
.hi-bcard,
.hi-cat,
.acb-card,
.acb-card__quote,
.hi-search button{-webkit-tap-highlight-color:rgba(0,0,0,0)}

/*
 * Pinned in every state. Hover lifts the card and casts a shadow; press, focus
 * and the moment after a tap all leave it a white card with its mark in its own
 * colours. There is no dark fill, no inset, no white-on-navy inversion, and no
 * scale big enough to see.
 */
.hi-bcard,
.hi-bcard:hover,
.hi-bcard:active,
.hi-bcard:focus,
.hi-bcard:focus-within,
.hi-bcard:visited,
.hi-bcard.is-in{
  background:#fff;
  color:var(--ink);
}
.hi-bcard__mark,
.hi-bcard__state,
.hi-bcard__go,
.hi-bcard__n{color:inherit}
.hi-bcard__state{color:var(--ink-2)}
.hi-bcard__n{color:var(--ink-3)}
.hi-bcard__mark{color:var(--ink)}
.hi-bcard__mark img{opacity:1;filter:none}

@media (hover:hover) and (pointer:fine){
  .hi-bcard:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 26px rgba(4,12,24,.30);
    background:#fff;
  }
}

/* Press: the shadow tightens and the card settles a pixel. No shrink. */
.hi-bcard:active,
.hi-bcard:focus:active{
  transform:translateY(0);
  box-shadow:0 3px 10px rgba(4,12,24,.22);
  background:#fff;
}

/* Keyboard focus, stated plainly and only for the keyboard. */
.hi-bcard:focus-visible{
  outline:2px solid #7fb2e8;
  outline-offset:2px;
  box-shadow:0 6px 16px rgba(4,12,24,.24);
  background:#fff;
}
.hi-bcard:focus:not(:focus-visible){outline:none}

/* The marks are artwork. Nothing in this stylesheet dims or recolours them. */
.hi-bcard--none .hi-bcard__mark,
.hi-bcard--none .hi-bcard__state{color:inherit}
.hi-bcard--none .hi-bcard__state{color:var(--ink-3)}

@media (max-width:900px){
  .acb-cards--fill .acb-card__model{font-size:13px;line-height:1.42;letter-spacing:0}
  .acb-cards--fill .acb-card__model{font-weight:700}
}
@media (max-width:344px){
  .acb-cards--fill .acb-card__model{font-size:12.5px;line-height:1.4}
}

/* ==========================================================================
   The part number on a phone: Ubuntu Mono, and one line instead of two
   ==========================================================================
   Two problems, one font.

   1. THE ZERO. Consolas marks its zero with a diagonal slash. On a phone at 12
      or 13 pixels that slash reads as the letter O with a stroke through it --
      the owner spotted it -- and it cannot be turned off: asking Consolas for
      'zero' 0, 'ss19' 1 or 'cv99' 0 renders the identical glyph, because the
      slash is drawn into the outline rather than offered as an alternate.

      Ubuntu Mono marks its zero with a centre dot. Unmistakably a zero, never
      an O with a stroke. Its 1 has a foot, its I has serifs and its l has a
      tail, so those three separate too.

   2. THE LONE LETTER. DS7-340SX070N0-L is sixteen characters and the card
      leaves 108 pixels for them at 360px wide. Consolas needs 114 at 13px, so
      the line broke after the last hyphen that fitted and left "L" alone on the
      second line -- the same for the N on DS7-342SX081N0-N. text-wrap:balance
      does not help: with only the two hyphens available as break points it
      picks the same split.

      Ubuntu Mono is narrower. The same string is 104 pixels at 13px, so it fits
      on ONE line at both 360 and 390, and there is no second line to strand a
      letter on.

   The characters are untouched: same letters, same digits, same case, same
   hyphens, no ellipsis, no shortening. The tracking is 0 -- a part number is
   not a word and does not want to be set like one -- and nothing is stretched
   or condensed.

   Phone widths only. The desktop part number is left exactly as it was.
   ========================================================================== */

@font-face{
  font-family:'Ubuntu Mono Card';
  src:url('../fonts/ubuntu-mono-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Ubuntu Mono Card';
  src:url('../fonts/ubuntu-mono-700.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@media (max-width:900px){
  .acb-cards--fill .acb-card__model{
    font-family:'Ubuntu Mono Card','Ubuntu Mono',Consolas,'Cascadia Mono',monospace;
    font-variant-numeric:normal;
    font-feature-settings:normal;
    font-weight:700;
    font-size:13px;
    line-height:1.4;
    letter-spacing:0;
    font-stretch:normal;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
    white-space:normal;
    text-overflow:clip;
    overflow:visible;
  }
}
@media (max-width:344px){
  .acb-cards--fill .acb-card__model{font-size:12.5px;line-height:1.38}
}

/* ==========================================================================
   Two home-page bands: the catalogue block and the ordering block
   ==========================================================================
   Only these two. The top band, the brands, the footer, the photographs, the prices, the stock
   figures and every link are untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Categories and featured inventory: a cool grey-blue ground
   --------------------------------------------------------------------------
   Both sections sat on the same near-white as the rest of the page, so the
   catalogue read as one flat sheet and the white cards had nothing to sit
   against. They now share a cool grey-blue ground that is a shade deeper than
   the page, which is what gives the white cards their edge.

   The texture is engineering line work -- a light grid with a few right-angled
   traces and terminal dots -- drawn at about five per cent. It is confined to
   the outer edges by a mask that fades it to nothing before it reaches the
   middle, so it never passes behind a heading, a part number or a photograph.
   It is decoration on a background and nothing loads to see it.
   -------------------------------------------------------------------------- */
.home #categories,
.home #featured{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#e8eef5 0%,#edf2f7 34%,#edf2f7 66%,#e8eef5 100%);
}

.home #categories::before,
.home #featured::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'%3E%3Cg fill='none' stroke='%25230f2740' stroke-width='1' opacity='0.05'%3E%3Cpath d='M0 42h340M0 85h340M0 128h340M0 170h340M0 213h340M0 255h340M0 298h340'/%3E%3Cpath d='M42 0v340M85 0v340M128 0v340M170 0v340M213 0v340M255 0v340M298 0v340'/%3E%3C/g%3E%3Cg fill='none' stroke='%25231f5fa8' stroke-width='1.2' opacity='0.13'%3E%3Cpath d='M14 100h58V50h46'/%3E%3Ccircle cx='118' cy='50' r='3.2'/%3E%3Cpath d='M14 246h44v58'/%3E%3Ccircle cx='58' cy='304' r='3.2'/%3E%3Cpath d='M206 284h56v-42h52'/%3E%3Ccircle cx='314' cy='242' r='3.2'/%3E%3Cpath d='M244 92h58v76'/%3E%3Ccircle cx='302' cy='168' r='3.2'/%3E%3Cpath d='M96 176h60'/%3E%3Ccircle cx='156' cy='176' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size:340px 340px;
  background-repeat:repeat;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 16%,transparent 33%,transparent 67%,rgba(0,0,0,.55) 84%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 16%,transparent 33%,transparent 67%,rgba(0,0,0,.55) 84%,#000 100%);
}
.home #categories > .acb-wrap,
.home #featured > .acb-wrap{position:relative;z-index:1}

/* White cards, a hairline, and a soft shadow. */
.home #categories .hi-cat,
.home #featured .acb-card{
  background:#fff;
  border:1px solid rgba(15,39,64,.11);
  box-shadow:0 1px 2px rgba(15,39,64,.05),0 10px 22px rgba(15,39,64,.07);
}
.home #featured .acb-card__frame{border-color:rgba(15,39,64,.07)}

/* --------------------------------------------------------------------------
   1b. The last row of the catalogue, centred
   --------------------------------------------------------------------------
   Five cards in a three-column grid leaves two on the second row and a hole the
   width of a card on the right. The owner asked for those two to be centred
   rather than for the cards to be stretched to fill it.

   A grid cannot centre a partial row, so at desktop widths the grid becomes a
   centred flex row and each card is given exactly one third of the width minus
   the gaps. The cards stay the size they were; the row is what moves. At phone
   widths the two-column grid is left alone.
   -------------------------------------------------------------------------- */
@media (min-width:901px){
  .home .acb-cards.acb-cards--fill,
  .home .acb-cards.acb-cards--fill[data-cols]{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
    gap:22px;
  }
  .home .acb-cards--fill > .acb-card{
    flex:0 0 calc((100% - 44px) / 3);
    max-width:calc((100% - 44px) / 3);
  }
}

/* --------------------------------------------------------------------------
   2. How ordering works: a process, not a paragraph
   --------------------------------------------------------------------------
   It was white type on white, three columns of prose with nothing to say they
   were steps. It is now a band in a bluer grey than the catalogue above it, so
   the two read as different things, with three numbered nodes joined by a thin
   dashed run, and the two delivery routes in cards of their own.

   Three across on a desktop, stacked with a vertical run on a phone. The
   written content is exactly what it was.
   -------------------------------------------------------------------------- */
.home .hi-steps{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#e2eaf4 0%,#e7eef6 50%,#e2eaf4 100%);
  border-top:1px solid rgba(15,39,64,.07);
}
.home .hi-steps::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'%3E%3Cg fill='none' stroke='%25230f2740' stroke-width='1' opacity='0.05'%3E%3Cpath d='M0 42h340M0 85h340M0 128h340M0 170h340M0 213h340M0 255h340M0 298h340'/%3E%3Cpath d='M42 0v340M85 0v340M128 0v340M170 0v340M213 0v340M255 0v340M298 0v340'/%3E%3C/g%3E%3Cg fill='none' stroke='%25231f5fa8' stroke-width='1.2' opacity='0.13'%3E%3Cpath d='M14 100h58V50h46'/%3E%3Ccircle cx='118' cy='50' r='3.2'/%3E%3Cpath d='M14 246h44v58'/%3E%3Ccircle cx='58' cy='304' r='3.2'/%3E%3Cpath d='M206 284h56v-42h52'/%3E%3Ccircle cx='314' cy='242' r='3.2'/%3E%3Cpath d='M244 92h58v76'/%3E%3Ccircle cx='302' cy='168' r='3.2'/%3E%3Cpath d='M96 176h60'/%3E%3Ccircle cx='156' cy='176' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size:340px 340px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 26%,transparent 74%,#000 100%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 26%,transparent 74%,#000 100%);
}
.home .hi-steps > .acb-wrap{position:relative;z-index:1}

.home .hi-stepgrid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 26px;
  margin-top:30px;
}

/* The run the nodes sit on. Dashed, thin, and behind everything. */
.home .hi-stepgrid::before{
  content:"";
  position:absolute;
  left:16%;
  right:16%;
  top:57px;
  height:1px;
  z-index:0;
  background-image:repeating-linear-gradient(90deg,rgba(31,95,168,.38) 0 7px,transparent 7px 15px);
}

.home .hi-step{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  /* The old rule drew a rule across the top of each column and pushed the content
     down 26px. Both are cleared: the run belongs to the grid now, not to each
     column, so it is one line rather than three disconnected ones. */
  padding:0 6px;
  border-top:0;
}

/* The number, then the node, then the words. */
.home .hi-step__n{
  /*
   * position, top and left are reset here. An earlier version of this section put
   * the number in the top-left corner of the column with position:absolute, and
   * that rule is still in the stylesheet further up. Without this reset the
   * number stayed absolute at the left edge while the icon sat centred, and the
   * dashed run -- which is placed to pass through the icons -- missed them.
   */
  position:static;
  top:auto;
  left:auto;
  display:inline-block;
  margin:0 0 9px;
  padding:2px 9px;
  border-radius:999px;
  background:rgba(31,95,168,.10);
  color:var(--blue);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.9px;
  line-height:1.5;
}
.home .hi-step__ic{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  margin:0 0 16px;
  border-radius:50%;
  background:#e9eff6;
  border:1px solid rgba(31,95,168,.22);
  color:var(--blue);
  /* The disc is opaque so the dashed run passes behind it, not through it. */
  box-shadow:0 0 0 7px #e6edf5;
}
.home .hi-step__ic svg{width:24px;height:24px}
.home .hi-step h3{
  margin:0 0 8px;
  font-family:var(--font-head);
  font-size:19px;
  font-weight:400;
  color:var(--ink);
}
.home .hi-step p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:34ch}

/* The two delivery routes, as cards. */
.home .hi-routes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:34px;
  padding-top:0;
  border-top:0;
}
.home .hi-route{
  background:#fff;
  border:1px solid rgba(15,39,64,.11);
  border-radius:12px;
  padding:20px 22px;
  box-shadow:0 1px 2px rgba(15,39,64,.05),0 10px 22px rgba(15,39,64,.06);
}
.home .hi-route h3{margin:0 0 8px;font-size:17px}
.home .hi-route p{margin:0;font-size:13.5px;line-height:1.62;color:var(--ink-2)}

.home .hi-steps__foot{
  margin:26px 0 0;
  padding-top:18px;
  border-top:1px solid rgba(15,39,64,.08);
  font-size:12.5px;
  color:var(--ink-3);
}

/* --------------------------------------------------------------------------
   3. Phone: the same two bands, arranged for a narrow column
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .home #categories::before,
  .home #featured::before{
    /* The edges are a few pixels wide on a phone, so the fade runs top to
       bottom instead of left to right. */
    -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 22%,transparent 78%,#000 100%);
    mask-image:linear-gradient(180deg,#000 0%,transparent 22%,transparent 78%,#000 100%);
  }

  .home .hi-stepgrid{
    grid-template-columns:minmax(0,1fr);
    gap:0;
    margin-top:22px;
  }
  /* The run turns through ninety degrees and passes down the left. */
  .home .hi-stepgrid::before{
    left:27px;
    right:auto;
    top:30px;
    bottom:30px;
    width:1px;
    height:auto;
    background-image:repeating-linear-gradient(180deg,rgba(31,95,168,.38) 0 7px,transparent 7px 15px);
  }

  /*
   * A grid, not a flex row.
   *
   * The number, the icon, the heading and the paragraph are four sibling elements.
   * As a flex row that made the heading and the paragraph two items side by side:
   * the heading was squeezed into a seventy-pixel column and wrapped to three
   * lines while the paragraph sat beside it. As a grid the number and the icon
   * occupy the left column, the heading takes the right column's first row and
   * the paragraph the second, which is the arrangement the section was meant to
   * have.
   */
  .home .hi-step{
    display:grid;
    grid-template-columns:54px minmax(0,1fr);
    column-gap:15px;
    row-gap:0;
    align-items:start;
    text-align:left;
    padding:0 0 24px;
  }
  .home .hi-step:last-child{padding-bottom:0}

  .home .hi-step__n{
    position:static;
    grid-column:1;
    grid-row:1;
    justify-self:center;
    margin:0 0 5px;
    padding:1px 7px;
    font-size:10.5px;
  }
  .home .hi-step__ic{
    grid-column:1;
    grid-row:2;
    justify-self:center;
    width:46px;
    height:46px;
    margin:0;
    box-shadow:0 0 0 7px #e5ecf4;
  }
  .home .hi-step__ic svg{width:21px;height:21px}
  .home .hi-step h3{
    grid-column:2;
    grid-row:1;
    align-self:end;
    min-width:0;
    font-size:16.5px;
    line-height:1.25;
    margin:0 0 4px;
  }
  .home .hi-step p{
    grid-column:2;
    grid-row:2;
    min-width:0;
    font-size:13px;
    line-height:1.55;
    max-width:none;
  }

  .home .hi-routes{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:24px}
  .home .hi-route{padding:16px 17px;border-radius:10px}
  .home .hi-route h3{font-size:16px}
  .home .hi-route p{font-size:13px}

  .home .hi-steps__foot{margin-top:20px;padding-top:14px;font-size:12px}
}