/* Storefront layer.
   ---------------------------------------------------------------------------
   What makes a site read as a print shop rather than a brochure site: a thin
   promo strip, a category bar with a mega panel deep enough to reach a leaf
   product in one move, product tiles that are photograph-first with the price
   directly under the name, and a lot of white between things. The colour is
   Harbor's own red.
   --------------------------------------------------------------------------- */

:root{
  --red:#e11b22; --red-d:#b3131a; --red-w:#fdeced;
  --char:#14161a; --sand:#f7f6f4; --line:#e2e0dc; --mut:#63636b; --faint:#9aa0ac;
}

/* ---------------------------------------------------------- promo strip */
.promo{background:var(--char);color:#fff;font-size:.83rem;text-align:center;
  padding-block:9px;letter-spacing:.01em}
.promo .hl{color:#ff5a60;font-weight:700}
.promo a{text-decoration:underline;text-underline-offset:3px;color:#c9ccd3}
.promo a:hover{color:#fff}
@media(max-width:400px){.promo{font-size:.74rem;padding-inline:10px}}

/* -------------------------------------------------------------- header */
.shhd{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid var(--line)}
.shhd .bar{max-width:1320px;margin-inline:auto;display:flex;align-items:center;
  gap:clamp(14px,2.4vw,32px);padding:14px clamp(16px,3vw,36px)}
.shhd .lgimg{display:block;height:38px;width:auto}
@media(max-width:600px){.shhd .lgimg{height:29px}}
.shhd .search{flex:1;position:relative;min-width:0}
.shhd .search input{width:100%;border:1.5px solid var(--line);border-radius:8px;
  padding:11px 14px 11px 38px;font:inherit;font-size:.92rem;background:var(--sand)}
.shhd .search input:focus{outline:2.5px solid var(--red);outline-offset:-1px;
  background:#fff}
.shhd .search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;stroke:var(--mut);fill:none;stroke-width:2;
  stroke-linecap:round;pointer-events:none}
.shhd .tel{font-weight:800;font-size:.92rem;white-space:nowrap}
.shhd .tel span{color:var(--mut);font-weight:500;display:block;font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase}
@media(max-width:1080px){.shhd .tel{display:none}}
.shhd .quote{background:var(--red);color:#fff;padding:11px 20px;border-radius:8px;
  font-weight:700;font-size:.89rem;white-space:nowrap}
.shhd .quote:hover{background:var(--red-d)}
/* Search moves to its own row rather than disappearing. Hiding it was the easy
   way to stop the header crowding, but search is how a phone shopper gets to one
   product out of a hundred and twenty, so it is the last thing to cut. */
@media(max-width:640px){
  .shhd .bar{flex-wrap:wrap;row-gap:11px}
  .shhd .search{order:3;flex-basis:100%}
  .shhd .quote{margin-left:auto}
}

/* ------------------------------------------------------- category bar */
.catbar{border-top:1px solid var(--line);background:#fff}
.catbar > ul{list-style:none;margin:0 auto;padding:0 clamp(16px,3vw,36px);
  max-width:1320px;display:flex;gap:clamp(10px,1.8vw,26px);overflow:visible}
/* Deliberately NOT position:relative. The panel is absolutely positioned against
   .catbar so it can span the full header width; a positioned .nitem would become
   the offset parent and shrink every panel to the width of its own nav link. */
.nitem{position:static}
.nitem > .ntop{display:block;padding:13px 2px;font-size:.9rem;font-weight:600;
  color:var(--char);white-space:nowrap;border-bottom:3px solid transparent}
.nitem:hover > .ntop, .nitem:focus-within > .ntop{color:var(--red);
  border-bottom-color:var(--red)}
.nitem.on > .ntop{border-bottom-color:var(--char);font-weight:800}

/* The panel spans the whole header rather than hanging off its nav item. Anchored
   to the item it overflowed the viewport twice over: the right-hand categories
   pushed a panel 400px past the edge, and because a hidden element still occupies
   layout, the PAGE picked up 700px of horizontal scroll even with every menu shut.
   Full width removes both problems and there is no per-item positioning to get
   wrong. `display:none` while closed, not just `visibility`, so it contributes
   nothing to scroll width. */
.catbar{position:relative}
.mega{display:none;position:absolute;left:0;right:0;top:100%;z-index:90}
.nitem:hover .mega, .nitem:focus-within .mega{display:block}
/* Flex, not a fixed grid. Categories have three or four groups, and a five-track
   grid left a dead column on every three-group menu. Flex lets the link columns
   share whatever is left after the promo panel takes its 230px. */
.mwrap{display:flex;gap:clamp(18px,2.4vw,34px);
  max-width:1320px;margin-inline:auto;background:#fff;
  border:1px solid var(--line);border-top:3px solid var(--red);
  border-radius:0 0 12px 12px;box-shadow:0 22px 50px rgba(16,17,20,.16);
  padding:26px clamp(16px,3vw,36px)}
.mcol{flex:1 1 0;min-width:120px}
.promoCol{flex:0 0 230px}
@media(max-width:1180px){
  .promoCol{flex:0 0 200px}
  .mwrap .mcol:nth-of-type(4):not(.promoCol){display:none}
}

.mcol h4{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 11px;font-weight:800;font-family:Inter}
.mcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.mcol li{margin:0}
.mcol li a{font-size:.87rem;color:var(--char);line-height:1.35}
.mcol li a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px}
/* The core-lines panel: one link per line, name in bold with its starting price,
   laid out in as many columns as fit so a short list does not leave a hole. */
.mfeat{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));column-gap:30px;align-content:start;align-items:start}
.mgrp{break-inside:avoid;margin:0 0 18px}
.mgrp h4{margin:0 0 7px;font-family:Archivo;font-weight:900;font-size:.95rem;letter-spacing:0;
  text-transform:none;color:var(--char)}
.mgrp h4 a{color:inherit}
.mgrp h4 a:hover{color:var(--red)}
.mgrp ul{gap:5px}
.mgrp li a{font-size:.85rem;color:var(--mut)}
.promoCol{border-left:1px solid var(--line);padding-left:22px;display:flex;
  flex-direction:column;gap:5px;min-width:0}
.promoCol img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:8px;margin-bottom:6px;display:block}
.promoCol b{font-family:Archivo;font-weight:900;font-size:.96rem;line-height:1.25}
.promoCol span{font-size:.8rem;color:var(--mut);line-height:1.5}
.mgo{margin-top:auto;padding-top:8px;font-size:.82rem;font-weight:800;color:var(--red)}

/* Hover menus do not work on a touch screen, so below the breakpoint the bar
   becomes a scrolling row of plain links straight to the category pages. */
@media(max-width:1000px){
  .catbar > ul{overflow-x:auto;scrollbar-width:none}
  .catbar > ul::-webkit-scrollbar{display:none}
  /* Beats the :hover rule above, which would otherwise still open a panel on a
     tap-and-hold. On a touch screen the top link goes straight to the category. */
  .mega, .nitem:hover .mega, .nitem:focus-within .mega{display:none}
  .nitem > .ntop{padding:12px 2px;font-size:.86rem}
}

/* ------------------------------------------------------------- buttons */
/* .btn.red lived in the old visuals sheet, which the storefront pages no longer
   load, so the primary call to action was rendering as bare text. */
.btn{display:inline-block;padding:14px 26px;border-radius:8px;font-weight:700;
  font-size:.92rem;border:2px solid transparent;cursor:pointer;transition:.18s;
  font-family:Inter,-apple-system,sans-serif;text-align:center}
.btn.red{background:var(--red);color:#fff;border-color:var(--red)}
.btn.red:hover{background:var(--red-d);border-color:var(--red-d)}
.btn.dark{background:var(--char);color:#fff;border-color:var(--char)}
.btn.dark:hover{background:var(--red);border-color:var(--red)}
.btn.line{border-color:var(--char);color:var(--char);background:#fff}
.btn.line:hover{background:var(--char);color:#fff}
.btn.ghost{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.btn.ghost:hover{background:#fff;color:var(--char);border-color:#fff}

/* ---------------------------------------------------------------- hero */
.shero{background:var(--char);color:#fff;display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
.shero .in{align-self:center;padding:clamp(46px,5.5vw,80px) clamp(20px,4vw,60px)}
.shero .eyebrow{color:#ff6b70;font-size:.7rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase}
.shero h1{font-size:clamp(2.1rem,4.2vw,3.3rem);font-weight:900;max-width:15ch;
  margin:15px 0 16px;text-wrap:balance;line-height:1.05}
.shero h1 em{font-style:normal;color:#ff4a52}
.shero p{color:#c3c8d1;max-width:46ch;font-size:1.03rem;margin:0 0 26px}
.shero .btns{display:flex;gap:11px;flex-wrap:wrap}
.shero .shot{position:relative;min-height:clamp(320px,38vw,520px)}
.shero .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shero .shot::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--char) 0%,rgba(20,22,26,.5) 8%,
    rgba(20,22,26,0) 24%)}
.shero .credit{position:absolute;right:12px;bottom:9px;z-index:2;font-size:.7rem;
  color:rgba(255,255,255,.6)}
.shero .fact{display:flex;flex-direction:column;gap:8px;margin-top:30px;color:#a8adb8;
  font-size:.77rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.shero .fact b{color:#fff}
@media(max-width:900px){
  .shero{grid-template-columns:1fr}
  .shero .shot{min-height:250px;order:2}
  .shero .shot::before{background:linear-gradient(180deg,var(--char) 0%,
    rgba(20,22,26,.45) 9%,rgba(20,22,26,0) 28%)}
}

/* --------------------------------------------------------------- tiles */
.wrap{max-width:1320px;margin-inline:auto;padding-inline:clamp(16px,3vw,36px)}
.grp{padding-block:clamp(26px,3.4vw,44px)}
.grp h2{font-family:Archivo;font-weight:900;font-size:clamp(1.3rem,2.4vw,1.75rem);
  margin:0 0 20px;letter-spacing:-.02em}

.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1080px){.tgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.tgrid{grid-template-columns:1fr}}

.tile{display:flex;flex-direction:column;background:#fff;border-radius:10px;
  scroll-margin-top:150px}
.tile .shot{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  border-radius:10px;background:var(--sand)}
.tile .shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s ease}
.tile:hover .shot img{transform:scale(1.04)}
.tile .flag{position:absolute;left:9px;top:9px;background:var(--red);color:#fff;
  font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 8px;border-radius:4px}
.tile .meta{display:flex;flex-direction:column;gap:4px;padding:12px 2px 0}
.tile .meta b{font-size:.98rem;font-weight:700;line-height:1.25}
.tile:hover .meta b{color:var(--red)}
.tile .d{font-size:.82rem;color:var(--mut);line-height:1.45}
.tile .p{font-size:.87rem;color:var(--char);margin-top:2px}
.tile .p b{font-weight:800}
.tile .per{color:var(--mut)}
.tile .q{color:var(--red);font-weight:700}

/* Spec tile: a cut shape drawn at its real size, where no photograph exists. */
.tile .spec{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;padding:clamp(16px,3.4vw,34px);background:var(--sand)}
.tile .spec .sheet{position:relative;display:flex;align-items:flex-end;
  justify-content:center;width:100%;max-width:100%;max-height:100%;background:#fff;
  border:1px solid var(--line);border-radius:4px;
  box-shadow:0 7px 20px rgba(16,17,20,.1)}
.tile .spec .sheet > span{font-size:.66rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);padding:7px 0}

/* -------------------------------------------------------- finish swatches */
.swgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:14px}
@media(max-width:1080px){.swgrid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:780px){.swgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:420px){.swgrid{grid-template-columns:repeat(3,1fr)}}
.sw{display:flex;flex-direction:column;gap:7px;scroll-margin-top:150px}
.sw img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;
  background:var(--sand);display:block}
.sw b{font-size:.76rem;font-weight:600;color:var(--mut);text-align:center;
  line-height:1.3}

/* ------------------------------------------------------ category tiles */
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1080px){.cgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.cgrid{grid-template-columns:repeat(2,1fr)}}
.ctile{display:flex;flex-direction:column;border-radius:10px;scroll-margin-top:150px}
.ctile .shot{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:10px;
  background:var(--sand)}
.ctile .shot img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.ctile:hover .shot img{transform:scale(1.04)}
.ctile .meta{padding:12px 2px 0;display:flex;flex-direction:column;gap:3px}
.ctile .meta b{font-family:Archivo;font-weight:900;font-size:1rem;line-height:1.2}
.ctile:hover .meta b{color:var(--red)}
.ctile .p{font-size:.83rem;font-weight:700;color:var(--red)}
.ctile.local .p{color:var(--mut)}

/* ------------------------------------------------------ category header */
.chead{background:var(--sand);border-bottom:1px solid var(--line);
  padding-block:clamp(26px,3.4vw,44px)}
.crumb{font-size:.8rem;color:var(--mut);margin-bottom:10px}
.crumb a{color:var(--red);font-weight:600}
.crumb span{margin-inline:6px;color:var(--faint)}
.chead h1{font-family:Archivo;font-weight:900;font-size:clamp(1.9rem,3.6vw,2.7rem);
  margin:0 0 10px;letter-spacing:-.02em}
.chead .lead{font-size:1.02rem;color:var(--mut);max-width:60ch;margin:0 0 12px}
.chead .note{font-size:.84rem;color:var(--faint);max-width:64ch;margin:0}
.chead .note.local{color:var(--red)}

/* -------------------------------------------------------- trust strip */
.trust{border-block:1px solid var(--line);background:#fff}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  padding-block:0}
@media(max-width:880px){.trust .wrap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.trust .wrap{grid-template-columns:1fr}}
.trust div{padding:24px 22px 24px 0;display:flex;flex-direction:column;gap:5px}
.trust svg{width:24px;height:24px;stroke:var(--red);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:7px}
.trust b{font-family:Archivo;font-weight:900;font-size:.98rem}
.trust span{font-size:.85rem;color:var(--mut);line-height:1.5}

/* ------------------------------------------------------- in-house band */
.local-band{background:var(--char);color:#fff}
.local-band .wrap{padding-block:clamp(50px,7vw,86px)}
.local-band .eyebrow{color:#ff6b70;font-size:.7rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase}
.local-band h2{font-family:Archivo;font-weight:900;
  font-size:clamp(1.7rem,3.4vw,2.5rem);margin:11px 0 12px;max-width:22ch}
.local-band .sub{color:#a8adb8;max-width:58ch;margin:0 0 34px}
.jobs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1080px){.jobs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.jobs{grid-template-columns:repeat(2,1fr)}}
.job{margin:0;position:relative;border-radius:10px;overflow:hidden;background:#22252b;
  aspect-ratio:1/1}
.job img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s}
.job:hover img{transform:scale(1.05)}
.job figcaption{position:absolute;inset:auto 0 0 0;padding:30px 13px 12px;
  background:linear-gradient(to top,rgba(8,9,11,.94),rgba(8,9,11,0));
  display:flex;flex-direction:column;gap:2px}
.job figcaption b{font-size:.84rem;font-weight:800;line-height:1.25}
.job figcaption span{font-size:.74rem;color:#b9bec7;line-height:1.4}
.local-band .after{margin-top:26px;display:flex;gap:11px;flex-wrap:wrap}

/* ------------------------------------------------------------- lanes */
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.lanes{grid-template-columns:1fr}}
.lane{border-radius:12px;padding:clamp(24px,3.2vw,36px);display:flex;
  flex-direction:column;gap:11px}
.lane.a{background:var(--red);color:#fff}
.lane.b{background:var(--char);color:#fff}
.lane h3{font-family:Archivo;font-weight:900;font-size:1.35rem}
.lane p{margin:0;font-size:.93rem;line-height:1.6}
.lane.a p{color:#ffe0e1}
.lane.b p{color:#b9bec7}
.lane .btn{align-self:flex-start;margin-top:6px}
.lane.a .btn{background:#fff;color:var(--red)}
.lane.b .btn{background:var(--red);color:#fff}
.lane.b .btn:hover{background:var(--red-d)}

@media(prefers-reduced-motion:reduce){
  .tile .shot img,.ctile .shot img,.job img,.mega{transition:none}
  .tile:hover .shot img,.ctile:hover .shot img,.job:hover img{transform:none}
}

/* ---------------------------------------------------------------------------
   Carried over from the pre-storefront sheet under new names. `.tgrid` and
   `.cgrid` now mean "product grid" and "category grid" in this file, and
   shop.css loads last, so the old testimonial and contact grids had to be
   renamed rather than left to inherit product-tile layout silently.
   --------------------------------------------------------------------------- */
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;margin-bottom:26px}
.sechead h2{font-family:Archivo;font-weight:900;
  font-size:clamp(1.5rem,2.8vw,2.1rem);letter-spacing:-.02em}
.sechead a{color:var(--red);font-weight:700;font-size:.9rem;white-space:nowrap}

.tband{background:var(--sand);border-block:1px solid var(--line)}
.tgrid-rev{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 24px}
.tcard p{margin:0 0 12px;font-size:.94rem;color:#2a2d34;line-height:1.65}
.tcard b{font-size:.82rem;color:var(--mut)}
.tcard .stars{color:var(--red);letter-spacing:2px;margin-bottom:10px;font-size:.9rem}

.cgrid2{display:grid;grid-template-columns:5fr 6fr;gap:clamp(24px,4vw,54px);
  align-items:start}
@media(max-width:860px){.cgrid2{grid-template-columns:1fr}}
.crow{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:14px 0;
  border-top:1px solid var(--line);font-size:.94rem}
.crow b{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);padding-top:3px}
.mapbox iframe{width:100%;height:330px;border:0;border-radius:12px;
  box-shadow:0 10px 30px rgba(16,17,20,.1)}

/* ---------- full footer ---------- */
.hgxf{background:var(--char);color:#e7e9ee;border-top:1px solid #2a2d34}
.hgxf a{color:#e7e9ee}
.hgxf a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hgxf .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:40px;
  padding-block:56px 42px}
@media(max-width:900px){.hgxf .cols{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:560px){.hgxf .cols{grid-template-columns:1fr}}
.hgxf .lgf{display:block;height:34px;width:auto;margin-bottom:16px;
  filter:brightness(0) invert(1)}
.hgxf p{margin:0;font-size:.89rem;color:#aab0bd;line-height:1.75}
.hgxf p a{color:#e7e9ee;font-weight:600}
.hgxf h4{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#8b919e;
  margin:2px 0 14px;font-weight:700;font-family:Inter}
.hgxf ul{list-style:none;margin:0;padding:0}
.hgxf li{margin-bottom:9px;font-size:.89rem}
.hgxf .bar{border-top:1px solid #2a2d34;padding-block:20px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.82rem;color:#8b919e}
.hgxf .bar .by{display:inline-flex;align-items:center;gap:8px;color:#aab0bd}
.hgxf .bar .by svg{display:block}

section{padding-block:clamp(40px,5.5vw,72px)}

/* ---------- all-products index ---------- */
.acat{border-top:1px solid var(--line);padding-block:clamp(30px,4vw,52px)}
.acat:first-child{border-top:0}
.ahead{display:flex;gap:22px;align-items:flex-start;margin-bottom:26px}
.ahead img{width:132px;height:100px;object-fit:cover;border-radius:10px;flex:0 0 auto;
  background:var(--sand)}
.ahead h2{font-family:Archivo;font-weight:900;font-size:clamp(1.3rem,2.4vw,1.8rem);
  margin:0 0 6px;letter-spacing:-.02em;scroll-margin-top:150px}
.ahead p{margin:0 0 8px;color:var(--mut);font-size:.9rem;max-width:60ch;line-height:1.55}
.ago{font-size:.85rem;font-weight:800;color:var(--red)}
@media(max-width:560px){.ahead img{width:88px;height:70px}}
.acols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media(max-width:1000px){.acols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.acols{grid-template-columns:1fr}}
.acol h3{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 11px;font-weight:800;font-family:Inter}
.acol h3 a{color:inherit}
.acol h3 a:hover{color:var(--red)}
.acol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.acol li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-size:.88rem;border-bottom:1px solid var(--line);padding-bottom:8px}
.acol li a{color:var(--char);font-weight:600}
.acol li a:hover{color:var(--red)}
.acol .pr{font-size:.78rem;color:var(--mut);white-space:nowrap;text-align:right}
.acol .pr b{color:var(--char);font-weight:800}
.acol .pr .per{display:none}
.acol .pr .q{color:var(--red);font-weight:700;font-size:.72rem}

/* ---------------------------------------------------- subcategory boxes */
/* A category page opens on these: one box per subcategory, each its own page.
   Taller than a plain category tile because it carries a line of description
   and a count, which is what makes the box worth clicking over a bare heading. */
.gtile .meta{gap:5px}
.gtile .meta b{font-size:1.05rem}
.gtile .d{font-size:.83rem;color:var(--mut);line-height:1.45}
.gtile .n{font-size:.76rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--faint)}
.gtile .p{font-size:.85rem;font-weight:700;color:var(--red)}

/* Back out of a subcategory to the grid it came from. */
.backto{margin:36px 0 0}
.backto a{font-size:.89rem;font-weight:800;color:var(--red)}
.backto a:hover{text-decoration:underline;text-underline-offset:3px}

/* Mega-panel headings are links to the subcategory pages now. */
.mcol h4 a{color:inherit}
.mcol h4 a:hover{color:var(--red)}
.mcol li.more a{font-weight:800;color:var(--red)}

/* Paper stocks: names, not photographs. */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);border-radius:999px;padding:8px 15px;
  font-size:.86rem;font-weight:600;background:#fff;scroll-margin-top:150px}

/* ==========================================================================
   Storefront layer 2, the big-online-printer layout.
   ==========================================================================
   What a national print site does that a brochure site does not, and what is
   copied here: a utility strip above the logo, a header that is mostly one
   very large search field, a category bar whose labels wrap to two lines, a
   full-width offer strip, a hero that is a solid card sitting on a photograph,
   and rows of square product tiles with the name UNDER the tile rather than on
   it. The palette stays Harbor's own.
   ========================================================================== */

:root{
  --navy:#2f3f57; --navy-d:#243449;
  --cream:#f3f0e9; --tileBg:#f2efe9; --util:#f6f6f6;
}

/* --------------------------------------------------------- utility strip */
.util{background:var(--util);border-bottom:1px solid var(--line)}
.util .wrap{display:flex;gap:22px;align-items:center;
  padding-block:9px;font-size:.79rem;flex-wrap:wrap}
.util a{color:#3a3a40}
.util a:hover{text-decoration:underline;text-underline-offset:3px}
.util .sep{margin-left:auto;color:var(--mut)}
@media(max-width:720px){.util .wrap{gap:14px;font-size:.72rem}
  .util .hideSm{display:none}}

/* ------------------------------------------------------------ big search */
.shhd .bar{gap:clamp(14px,2.2vw,30px)}
.shhd .search input{height:48px;border-radius:8px;border-color:#8a8a90;
  padding-inline:18px 52px;font-size:.95rem}
.shhd .search svg{left:auto;right:0;width:48px;height:100%;top:0;transform:none;
  background:var(--char);color:#fff;stroke:#fff;border-radius:0 7px 7px 0;
  padding:14px;box-sizing:border-box;pointer-events:none}
.shhd .acct{display:flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:.86rem;font-weight:600}
.shhd .acct svg{width:22px;height:22px;fill:none;stroke:var(--char);stroke-width:1.7}
@media(max-width:900px){.shhd .acct{display:none}}

/* -------------------------------------------------------- two-line navbar */
.catbar > ul{gap:clamp(10px,1.7vw,26px)}
.nitem > .ntop{padding:12px 0;font-size:.88rem;font-weight:500;line-height:1.25;
  max-width:11ch;text-align:center}
.nitem.hot > .ntop{color:var(--red);font-weight:700}

/* ------------------------------------------------------- offer strip */
.deal{background:var(--char);color:#fff}
.deal .wrap{display:flex;align-items:center;justify-content:center;gap:10px;
  padding-block:15px;font-size:.9rem;text-align:center;position:relative}
.deal a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:700}
.deal .chev{position:absolute;right:clamp(16px,3vw,36px);width:9px;height:9px;
  border-right:2px solid #fff;border-top:2px solid #fff;transform:rotate(45deg)}
@media(max-width:620px){.deal .wrap{font-size:.78rem;padding-inline:34px}}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;background:var(--sand);overflow:hidden}
.hero .shot{position:absolute;inset:0}
.hero .shot img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(34px,4.4vw,58px)}
.hero .card{background:var(--navy);color:#fff;border-radius:10px;max-width:620px;
  padding:clamp(26px,3.4vw,42px)}
.hero h1{font-family:Archivo;font-weight:900;line-height:1.06;margin:0 0 14px;
  font-size:clamp(1.85rem,3.6vw,2.9rem)}
.hero h1 em{font-style:normal;color:#ffd7a1}
.hero p{color:#cfd6e2;font-size:1rem;line-height:1.55;margin:0 0 16px;max-width:46ch}
.hero .code{font-size:.92rem;margin:0 0 20px}
.hero .code b{font-weight:800}
.hero .pills{display:flex;gap:10px;flex-wrap:wrap}
.hero .pills a{background:#fff;color:var(--char);border-radius:7px;
  padding:12px 20px;font-weight:700;font-size:.9rem}
.hero .pills a:hover{background:var(--cream)}
.hero .fine{margin:18px 0 0;font-size:.74rem;color:#9fabbe}
@media(max-width:820px){
  .hero .shot{position:relative;height:230px}
  .hero .shot img{object-position:center 45%}
  .hero .wrap{padding-block:0 26px;margin-top:-46px}
  .hero .card{max-width:none}
}

/* ------------------------------------------------------------ cream band */
.band{background:var(--cream);text-align:center}
.band .wrap{padding-block:20px}
.band b{font-family:Archivo;font-weight:900;font-size:clamp(1.05rem,2vw,1.35rem);
  display:block;margin-bottom:5px}
.band a{text-decoration:underline;text-underline-offset:3px;font-weight:600;
  font-size:.92rem}

/* ------------------------------------------------- section head + rails */
.sec{padding-block:clamp(30px,3.8vw,52px)}
.sec.tight{padding-top:0}
.sechd{display:flex;align-items:baseline;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.sechd h2{font-family:Archivo;font-weight:900;margin:0;
  font-size:clamp(1.35rem,2.7vw,1.95rem)}
.sechd p{margin:0;color:var(--mut);font-size:.92rem;flex-basis:100%}
.sechd a{font-size:.9rem;font-weight:700;color:var(--red);white-space:nowrap}
.sechd a:hover{text-decoration:underline;text-underline-offset:3px}

/* The rail scrolls sideways with snap points and a pair of round buttons, the
   way a catalogue row does on a big storefront. On a phone it is a plain swipe
   and the buttons hide, because an arrow button under a thumb is a mis-tap. */
.crailwrap{position:relative}
.crail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);
  gap:16px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:4px}
.crail::-webkit-scrollbar{display:none}
.crail > *{scroll-snap-align:start}
.crailwrap.n6 .crail{grid-auto-columns:minmax(150px,calc((100% - 5*16px)/6))}
.crailwrap.n4 .crail{grid-auto-columns:minmax(200px,calc((100% - 3*16px)/4))}
@media(max-width:900px){
  .crailwrap.n6 .crail{grid-auto-columns:minmax(132px,38vw)}
  .crailwrap.n4 .crail{grid-auto-columns:minmax(180px,62vw)}
}
.rnav{position:absolute;top:calc(50% - 34px);transform:translateY(-50%);z-index:5;
  width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);
  box-shadow:0 3px 14px rgba(16,17,20,.17);cursor:pointer;display:none;
  align-items:center;justify-content:center;padding:0}
.rnav:hover{background:var(--sand)}
.rnav.on{display:flex}
.rnav.prev{left:-14px}
.rnav.next{right:-14px}
.rnav i{width:9px;height:9px;border-right:2.4px solid var(--char);
  border-top:2.4px solid var(--char);display:block}
.rnav.next i{transform:rotate(45deg);margin-left:-3px}
.rnav.prev i{transform:rotate(-135deg);margin-right:-3px}
@media(max-width:820px){.rnav{display:none!important}}

/* --------------------------------------------------------- square tiles */
/* Name under the tile, not on it: a photograph with text laid over it reads as
   an advert, and a shopper scanning a row wants to compare names and prices. */
.sqtile{display:block}
.sqtile .shot{display:block;aspect-ratio:1/1;background:var(--tileBg);
  border-radius:9px;overflow:hidden;position:relative}
.sqtile .shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s}
.sqtile:hover .shot img{transform:scale(1.045)}
.sqtile > b{display:block;margin-top:10px;font-size:.93rem;font-weight:700;
  line-height:1.3;color:var(--char)}
.sqtile .p{display:block;margin-top:3px;font-size:.85rem;color:var(--mut)}
.sqtile .p em,.sqtile .p b{font-style:normal;font-weight:800;color:var(--char)}
.sqtile .p .per{color:var(--mut);font-weight:500}
.sqtile .p .q{font-weight:700;color:var(--char)}
.sqtile:hover > b{text-decoration:underline;text-underline-offset:3px}
.sqtile .flag{position:absolute;left:8px;top:8px;background:var(--red);color:#fff;
  font-size:.62rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 8px;border-radius:4px}

/* ------------------------------------------------------------ big footer */
.foot{background:var(--navy);color:#fff;margin-top:clamp(30px,4vw,56px)}
.foot .wrap{padding-block:clamp(34px,4vw,54px)}
.foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:clamp(20px,3vw,44px)}
@media(max-width:900px){.foot .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot .cols{grid-template-columns:1fr}}
.foot .lgf{height:34px;width:auto;filter:brightness(0) invert(1)}
.foot .rule{border:0;border-top:1px solid rgba(255,255,255,.28);margin:18px 0}
.foot p{color:#c6cede;font-size:.9rem;line-height:1.6;margin:0 0 10px}
.foot h4{font-size:.98rem;font-weight:800;margin:0 0 14px;font-family:Archivo}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot a{color:#c6cede;font-size:.9rem}
.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot .stars{color:#ffc046;font-size:1.05rem;letter-spacing:2px}
.foot .rate{color:#c6cede;font-size:.84rem;margin-top:7px}
.footbar{background:var(--navy-d)}
.footbar .wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  padding-block:16px;font-size:.82rem;color:#a9b4c6}
.footbar a{color:#c6cede;text-decoration:underline;text-underline-offset:3px}
.footbar .by{margin-left:auto;display:flex;align-items:center;gap:7px;color:#8d99ad}
@media(max-width:700px){.footbar .by{margin-left:0}}

/* --- fixes after first render ------------------------------------------- */
/* Nav labels are two words long and must wrap, not collide. Each item gets an
   equal share of the bar and centres its own label inside it. */
.catbar > ul{justify-content:space-between;align-items:stretch}
.nitem{flex:1 1 0;min-width:0;display:flex}
.nitem > .ntop{white-space:normal;overflow-wrap:break-word;max-width:none;
  width:100%;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:11px 4px;hyphens:none}
/* An equal share of a phone-width bar is about 55px, narrower than the word
   "Promotional", so the labels ran into each other. Below the breakpoint each
   item takes the width of its own label and the row scrolls sideways. */
@media(max-width:1000px){
  .catbar > ul{justify-content:flex-start}
  .nitem{flex:0 0 auto}
  .nitem > .ntop{white-space:nowrap;padding:11px 6px}
}

/* On a rail tile the quantity belongs on the product page, not under a 200px
   thumbnail where "from / $10 / for 50" breaks across three lines. */
.sqtile .p .per{display:none}
.sqtile .p{white-space:nowrap}
/* the price's <b> is inline; only the product name is a block. */
.sqtile .p b{display:inline;margin:0;font-size:inherit}

/* ==========================================================================
   Category page, breadcrumb, cream masthead with a standing subcategory
   sidebar, and product cards whose name and description sit inside the card.
   ========================================================================== */

.crumbbar{background:#fff;border-bottom:1px solid var(--line)}
.crumbbar .wrap{display:flex;align-items:center;gap:9px;padding-block:14px;
  font-size:.86rem;color:var(--mut);flex-wrap:wrap}
.crumbbar a{color:var(--char)}
.crumbbar a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbbar i{width:6px;height:6px;border-right:1.8px solid var(--faint);
  border-top:1.8px solid var(--faint);transform:rotate(45deg);display:block}

/* The cream band is only as tall as the intro and its photograph. The sidebar
   is lifted out of the grid so a long subcategory list overflows DOWN past the
   cream into the white below, instead of stretching a 1000px block of cream. */
.cathero{background:var(--cream)}
.cathero .wrap{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(20px,2.6vw,40px);padding-block:clamp(22px,2.8vw,34px);
  align-items:center;padding-left:calc(300px + clamp(20px,2.6vw,40px) +
    clamp(16px,3vw,36px))}
.catnav{position:absolute;left:clamp(16px,3vw,36px);
  top:clamp(22px,2.8vw,34px);width:300px}
#cbody > .wrap{padding-left:calc(300px + clamp(20px,2.6vw,40px) +
  clamp(16px,3vw,36px))}
/* a search has no sidebar and no category photo: a short header, full width */
.cathero.search .wrap, #cbody.search > .wrap{padding-left:clamp(16px,3vw,36px)}
.cathero.search{padding-block:0}
.cathero.search .wrap{grid-template-columns:minmax(0,1fr);padding-block:30px}
.cathero.search .catshot{display:none}
.cathero.search h1{font-size:clamp(1.6rem,2.8vw,2.2rem);margin-bottom:6px}
@media(max-width:1180px){
  .cathero .wrap{grid-template-columns:minmax(0,1fr)}
  .catshot{display:none}
}
@media(max-width:900px){
  .cathero .wrap,#cbody > .wrap{padding-left:clamp(16px,3vw,36px)}
  .catnav{display:none}
}

/* The sidebar is the whole category in one glance, which is what stops a
   shopper from having to walk back up to the mega menu to change their mind. */
.catnav{background:#fff;border-radius:12px;padding:24px 22px}
.catnav > b{display:block;font-family:Archivo;font-weight:900;
  font-size:1.3rem;line-height:1.2;padding-bottom:16px;
  border-bottom:1px solid var(--line)}
.catnav section{padding:15px 0;border-bottom:1px solid var(--line)}
.catnav section:last-child{border-bottom:0;padding-bottom:0}
.catnav h5{margin:0 0 10px;font-family:Archivo;font-weight:900;font-size:.98rem}
.catnav h5 a{color:var(--char)}
.catnav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.catnav li a{font-size:.89rem;color:#3d3d44}
.catnav li a:hover,.catnav h5 a:hover{color:var(--red);text-decoration:underline;
  text-underline-offset:3px}
.catnav .all a{font-weight:700;color:var(--char)}

.catintro .rev{font-size:.88rem;color:var(--mut);margin:0 0 6px}
.catintro .rev b{color:#e8a51c;letter-spacing:1px}
.catintro h1{font-family:Archivo;font-weight:900;margin:0 0 12px;
  font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.1}
.catintro p{margin:0 0 12px;font-size:1rem;line-height:1.55;color:#3d3d44;max-width:46ch}
.catintro .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.catintro .cta a{border-radius:7px;padding:13px 22px;font-weight:700;font-size:.92rem;
  border:1.6px solid var(--char)}
.catintro .cta a.solid{background:var(--char);color:#fff}
.catintro .cta a.solid:hover{background:var(--red);border-color:var(--red)}
.catintro .cta a.hollow{background:#fff;color:var(--char)}
.catintro .cta a.hollow:hover{background:var(--sand)}

.catshot{border-radius:12px;overflow:hidden;aspect-ratio:4/3}
.catshot img{width:100%;height:100%;object-fit:cover;display:block}

/* ------------------------------------------------------- product cards */
.psec{padding-block:clamp(28px,3.6vw,48px)}
.psec + .psec{padding-top:0}
.psec h2{font-family:Archivo;font-weight:900;margin:0 0 6px;
  font-size:clamp(1.3rem,2.5vw,1.85rem)}
.psec .sub{margin:0 0 22px;color:var(--mut);font-size:.95rem;max-width:70ch}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* the category page: product boxes only (2026-10-18) */
.sqgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 18px}
@media(max-width:980px){.sqgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.sqgrid{grid-template-columns:repeat(2,1fr);gap:16px 12px}}
.acol .vs{display:block;font-size:.8rem;color:var(--mut);margin:2px 0 6px}
.psec .methods{margin:26px 0 0;font-size:.95rem;color:var(--mut)}
.psec .methods a{color:var(--char);font-weight:700}
.psec .methods a:hover{color:var(--red)}
.acol .vs a{color:var(--mut)}
.acol .vs a:hover{color:var(--red)}
@media(max-width:980px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pgrid{grid-template-columns:1fr}}

.pcard{display:flex;flex-direction:column;background:var(--tileBg);
  border-radius:11px;overflow:hidden;position:relative}
.pcard .shot{display:block;aspect-ratio:16/11;overflow:hidden;background:#e9e5dd}
.pcard .shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s}
.pcard:hover .shot img{transform:scale(1.04)}
.pcard .info{padding:16px 18px 20px}
.pcard b{display:block;font-size:1.02rem;font-weight:800;margin-bottom:5px}
.pcard .d{display:block;font-size:.89rem;color:#4a4a52;line-height:1.5}
.pcard .p{display:block;margin-top:11px;font-size:.92rem;color:var(--char)}
.pcard .p b{display:inline;font-weight:800;margin:0}
.pcard .p .per{color:var(--mut)}
.pcard:hover b{text-decoration:underline;text-underline-offset:3px}
.pcard .flag{position:absolute;left:11px;top:11px;background:var(--red);color:#fff;
  font-size:.63rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 9px;border-radius:5px;z-index:2}
.pcard .spec{display:flex;align-items:center;justify-content:center;
  aspect-ratio:16/11;background:#e9e5dd}
.pcard .sheet{background:#fff;border:1.5px dashed var(--faint);border-radius:5px;
  display:flex;align-items:center;justify-content:center;max-height:74%;max-width:62%;
  min-width:96px;color:var(--mut);font-size:.76rem;font-weight:700}

.backto{margin:26px 0 0;font-weight:700}
.backto a{color:var(--red)}
.backto a:hover{text-decoration:underline;text-underline-offset:3px}

/* A simpler masthead for the pages with no sidebar: same cream band, same
   breadcrumb, so contact and the product index sit in the same system. */
.pagehero{background:var(--cream)}
.pagehero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(20px,3vw,44px);padding-block:clamp(26px,3.4vw,44px);align-items:center}
.pagehero h1{font-family:Archivo;font-weight:900;margin:0 0 12px;
  font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.08}
.pagehero p{margin:0;color:#3d3d44;font-size:1.02rem;line-height:1.55;max-width:56ch}
.pagehero .shot{border-radius:12px;overflow:hidden;aspect-ratio:16/10}
.pagehero .shot img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){
  .pagehero .wrap{grid-template-columns:1fr}
  .pagehero .shot{display:none}
}

/* ===================================================================== *
 * Product page (product.html): gallery left, decisions right.
 * ===================================================================== */
.pdp .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);padding-block:clamp(20px,3vw,40px)}
@media(max-width:860px){.pdp .wrap{grid-template-columns:1fr}}
.pgal .main{position:relative;border-radius:14px;overflow:hidden;background:#f0ede7;aspect-ratio:1/1}
.pgal .main img{width:100%;height:100%;object-fit:cover;display:block}
.pgal .flag{position:absolute;left:14px;top:14px;background:var(--red);color:#fff;
  font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:6px 9px;border-radius:5px}
.pgal .thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pgal .thumbs button{width:84px;height:84px;padding:0;border:2px solid transparent;border-radius:8px;
  overflow:hidden;background:#f0ede7;cursor:pointer}
.pgal .thumbs button.on{border-color:var(--char)}
.pgal .thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.pbuy h1{font-family:Archivo;font-weight:900;font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.1;margin:0 0 8px}
.pbuy .rev{font-size:.9rem;color:var(--mut);margin:0 0 10px}
.pbuy .rev b{color:#e8a51c;letter-spacing:1px}
.pbuy .pills{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.pbuy .pills span{font-size:.78rem;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:5px 11px;background:#f6f7f9}
.pbuy .desc{font-size:1rem;line-height:1.55;color:#2a2d34;margin:0 0 18px}
.pbuy .desc a{color:var(--char);text-decoration:underline;text-underline-offset:3px}
.pbuy .price{margin:0 0 18px}
.pbuy .price b{display:block;font-family:Archivo;font-weight:900;font-size:1.9rem;line-height:1.1}
.pbuy .price span{font-size:.92rem;color:var(--mut)}
.pbuy .pickup{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:0 0 18px;
  display:flex;flex-direction:column;gap:8px}
.pbuy .pickup div{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:#2a2d34}
.pbuy .pickup svg{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:var(--char);stroke-width:1.7;stroke-linejoin:round}
.pbuy .pickup b{font-weight:700;margin-right:6px}
/* vehicle wraps and lettering: no designer, the mockup is made at the shop */
.pbuy .inperson{border:1.5px solid #f3c4c6;background:var(--red-w);border-radius:10px;
  padding-block:14px;padding-inline:16px;margin:0 0 18px;font-size:.92rem;color:#2a2d34}
.pbuy .inperson b{display:block;font-family:Archivo;font-weight:900;font-size:1.05rem;color:var(--char);margin-bottom:4px}
.pbuy .inperson p{margin:0 0 6px;line-height:1.5}
.pbuy .inperson .where{margin:0;font-weight:600}
.pbuy .inperson .where a{color:var(--red);font-weight:800}
.pbuy .opt{margin:0 0 16px}
.pbuy .opt > label{display:block;font-weight:800;font-size:.98rem;margin-bottom:7px}
.pbuy .selwrap{position:relative}
.pbuy select{width:100%;appearance:none;-webkit-appearance:none;border:1.6px solid var(--char);border-radius:8px;
  padding:14px 44px 14px 14px;font:inherit;font-size:.98rem;font-weight:600;background:#fff;color:var(--char)}
.pbuy .selwrap::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--char);border-bottom:2px solid var(--char);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.pbuy .od{display:block;font-size:.82rem;color:var(--mut);margin-top:6px}
.qtable{display:flex;flex-direction:column;gap:8px}
.qrow{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;
  border:1.6px solid var(--line);border-radius:9px;padding:13px 16px;cursor:pointer;background:#fff}
.qrow:hover{border-color:var(--char)}
.qrow.on{border-color:#1a6bd8;background:#eaf3ff;box-shadow:inset 0 0 0 1px #1a6bd8}
.qrow input{position:absolute;opacity:0;width:0;height:0}
.qrow .qn{font-weight:700;font-size:1rem;display:flex;align-items:center;gap:8px}
.qrow .qn em{font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid #1a6bd8;color:#1a6bd8;border-radius:999px;padding:2px 8px}
.qrow .qp b{font-weight:800;font-size:1rem}
.qrow .qp small{color:var(--mut);font-size:.82rem;margin-left:4px}
.qrow .qs{font-size:.84rem;color:var(--green);font-weight:700;min-width:84px;text-align:right}
@media(max-width:480px){.qrow{grid-template-columns:1fr auto}.qrow .qs{grid-column:1/-1;text-align:left;min-width:0}}
.pcta{display:flex;flex-direction:column;gap:9px;margin:20px 0 10px}
.pcta a{text-align:center;border-radius:8px;padding:15px 22px;font-weight:800;font-size:.98rem;border:1.6px solid var(--char)}
.pcta .solid{background:var(--red);border-color:var(--red);color:#fff}
.pcta .solid:hover{background:var(--red-d);border-color:var(--red-d)}
.pcta .hollow{background:#fff;color:var(--char)}
.pcta .hollow:hover{background:var(--sand)}
.pbuy .fine{font-size:.8rem;color:var(--faint);margin:0}
.pdetails{background:var(--sand);border-top:1px solid var(--line)}
.pdetails .wrap{padding-block:clamp(26px,3.5vw,44px)}
.pdetails h2{font-family:Archivo;font-weight:900;font-size:1.5rem;margin:0 0 16px}
.dcols{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:900px){.dcols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.dcols{grid-template-columns:1fr}}
.dcols h3{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 8px}
.dcols p{margin:0;font-size:.92rem;line-height:1.6;color:#2a2d34}

/* your designs (2026-10-19) */
/* on a phone the link is its icon and the count, so the logo, it and "Get a quote" share one row */
@media(max-width:900px){
  .shhd .acct.mine{display:flex;margin-left:auto;font-size:0;gap:4px}
  .shhd .acct.mine svg{width:24px;height:24px}
  .shhd .acct.mine #mine-n{font-size:.86rem;font-weight:700}
  .shhd .quote{margin-left:0}
}
.dcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.dcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dcard .pic{display:block;background:#eef0f3;aspect-ratio:4/3;overflow:hidden}
.dcard .pic img{width:100%;height:100%;object-fit:contain;display:block;padding:14px;box-sizing:border-box}
.dcard .tx{padding:16px 18px 18px}
.dcard .tx > b{display:block;font-family:Archivo;font-weight:900;font-size:1.08rem}
.dcard .w b{display:inline;font-weight:800;color:var(--char)}
.dcard .w{display:block;color:var(--mut);font-size:.9rem;margin:4px 0 12px}
.dcard .w i{font-style:normal;color:var(--mut)}
.dcard .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dcard .acts .btn{padding:9px 14px;font-size:.88rem}
.dcard .acts .lnk{background:none;border:0;padding:6px 4px;font:inherit;font-size:.86rem;font-weight:700;color:var(--mut);cursor:pointer}
.dcard .acts .lnk:hover{color:var(--red)}
.dempty{background:#fff;border:1px dashed var(--line);border-radius:14px;padding:28px;color:var(--mut)}
.dempty .starts a{font-weight:700;color:var(--char)}
/* account box on "Your designs": sign in by email, or who is signed in */
.acct{background:#fff;border:1px solid var(--line);border-radius:14px;padding-inline:22px;padding-block:18px;margin-block-end:22px}
.acct p{margin:0;color:var(--mut)}
.acct p b{color:var(--char)}
.acct .row{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:12px}
.acct input{flex:1 1 220px;min-width:0;height:44px;border:1px solid var(--line);border-radius:10px;padding-inline:12px;font:inherit}
.acct .msg{margin-block-start:10px;color:#b42318}
.acct.on{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.dempty .starts a:hover{color:var(--red)}
.samerow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.samerow a{display:block;text-align:center;color:var(--char);font-weight:700;font-size:.92rem}
.samerow canvas{display:block;width:100%;height:auto;border-radius:12px;background:#eef0f3;margin-bottom:8px}
@media(max-width:700px){.samerow{grid-template-columns:repeat(2,1fr)}}
#resume{background:#fff;border-bottom:1px solid var(--line)}
.resume{display:flex;align-items:center;gap:18px;padding-block:14px;flex-wrap:wrap}
.resume .thumbs{display:flex;gap:8px}
.resume .thumbs img{width:64px;height:48px;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:#eef0f3}
.resume p{margin:0;flex:1 1 220px;color:var(--mut)}
.resume p b{color:var(--char)}
.resume .btn{padding:10px 18px;font-size:.9rem}

/* families: the main product large, its branches beside it (2026-10-19) */
.fam{padding-block:22px 6px}
.fam h2{font-family:Archivo;font-weight:900;margin:0 0 4px;font-size:clamp(1.25rem,2vw,1.6rem)}
.fam h2 a{color:var(--char)}
.fam h2 a:hover{color:var(--red)}
.fam .sub{margin:0 0 14px;color:var(--mut);font-size:.93rem;max-width:70ch}
.famrow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;grid-auto-flow:dense}
.famrow .sqtile.lead{grid-column:span 2;grid-row:span 2}
.famrow .sqtile.lead > b{font-size:1.15rem}
@media(max-width:980px){.famrow{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.famrow{grid-template-columns:repeat(2,1fr);gap:12px}.famrow .sqtile.lead{grid-column:span 2;grid-row:auto}.famrow .sqtile.lead .shot{aspect-ratio:16/10}}

/* category: shop by type cards (2026-10-19) */
.tgrid2{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px}
@media(max-width:980px){.tgrid2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tgrid2{grid-template-columns:1fr}}
.tcard2{display:block;color:var(--char)}
.tcard2 .shot{display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--tileBg);position:relative}
.tcard2 .shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.tcard2 .shot canvas{position:absolute;inset:0;width:100%;height:100%}
.tcard2:hover .shot img{transform:scale(1.035)}
.tcard2 > b{display:block;font-family:Archivo;font-weight:900;font-size:1.15rem;margin-top:12px}
.tcard2:hover > b{color:var(--red)}
.tcard2 .ln{display:block;font-size:.88rem;color:var(--mut);margin-top:3px;line-height:1.45}
.tcard2 .p{display:block;font-size:.88rem;margin-top:6px;color:var(--char)}
.tcard2 .p b{font-weight:800}
.catintro .cta{gap:8px}
.catintro .cta a.pill{padding:9px 15px;border-radius:999px;font-size:.85rem}

/* the sidebar: square top flush with the breadcrumb bar, red edge (2026-10-19) */
.catnav{border-radius:0 0 12px 12px;border-top:4px solid var(--red)}
.cathero .wrap{padding-top:clamp(22px,2.8vw,34px)}
.subrail .subcat{display:block;color:var(--char)}
.subcat .shot{display:block;position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--tileBg)}
.subcat .shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.subcat .shot canvas{position:absolute;inset:0;width:100%;height:100%}
.subcat:hover .shot img{transform:scale(1.04)}
.subcat > b{display:block;margin-top:9px;font-family:Archivo;font-weight:900;font-size:1rem}
.subcat:hover > b{color:var(--red)}
.subcat .p{display:block;font-size:.84rem;color:var(--mut);margin-top:2px}

/* smaller product tiles on department pages: six across */
#cbody .psec .sqgrid{grid-template-columns:repeat(6,1fr);gap:18px 14px}
#cbody .psec .sqgrid .sqtile > b{font-size:.86rem}
@media(max-width:1180px){#cbody .psec .sqgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){#cbody .psec .sqgrid{grid-template-columns:repeat(2,1fr)}}
.cathero.search .wrap, #cbody.search > .wrap{padding-left:clamp(16px,3vw,36px)}
/* a tighter department header: no section padding, a shorter photo (2026-10-19) */
.cathero{padding-block:0}
.cathero .wrap{padding-block:22px}
.catnav{top:22px}
.catshot{aspect-ratio:16/9}
.catintro h1{margin-bottom:8px}
.catintro p{margin-bottom:8px}

/* ===========================================================================
   2026-10-28 site-wide tidy: header controls one height, department rows that
   line up with the grid under them.
   =========================================================================== */
.shhd .acct, .shhd .quote{height:48px;box-sizing:border-box;display:inline-flex;align-items:center}
.shhd .quote{padding-block:0;padding-inline:22px;font-size:.92rem}
@media(max-width:900px){.shhd .acct:not(.mine){display:none}}
@media(max-width:640px){.shhd .acct, .shhd .quote{height:42px}}
/* the "Shop <department>" row: same columns, gap and square shape as Best sellers below it */
#cbody .crailwrap.n6 .subrail{gap:18px 14px;grid-auto-columns:calc((100% - 5*14px) / 6)}
#cbody .subrail .subcat .shot{aspect-ratio:1/1}
#cbody .subrail .subcat > b{font-size:.92rem}
@media(max-width:1180px){#cbody .crailwrap.n6 .subrail{grid-auto-columns:calc((100% - 3*14px) / 4)}}
@media(max-width:560px){#cbody .crailwrap.n6 .subrail{grid-auto-columns:calc((100% - 14px) / 2)}}
/* the holiday link in the category bar */
.nitem.ndeals > .ntop{color:var(--red);font-weight:800}
.deal[hidden]{display:none}