/* Artium dry-hire shop — builds on the brand-site shared.css (red route) */
:root { --header-h: 68px; --max: 1280px; --bg-soft: #F6F6F6; --ok: #0F8A43; --warn: #C77700; --bad: #E30613; }
body { background: #fff; }
.loading { padding: 6rem 0; color: var(--muted); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Demo ribbon + utility bar. The promo bar below stays in the stylesheet, switched off in shop/promo.js. */
.demo-ribbon { background: var(--brand); color: #fff; text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .4rem 1rem; }
/* Promo bar — copy lives in shop/promo.js */
[data-shop-promo]:empty { display: none; }
.shop-promo {
  display: flex; align-items: stretch; background: var(--ink); color: #fff; min-height: 2rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.shop-promo-link {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .55rem;
  min-height: 2rem; padding-right: .35rem; color: #fff; text-decoration: none;
}
.shop-promo-link:hover { color: #fff; }
.shop-promo-img {
  width: 2.15rem; height: 2rem; object-fit: cover; object-position: center 42%; flex-shrink: 0; display: block;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.shop-promo-copy {
  flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 700;
  font-size: .68rem; letter-spacing: .02em; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shop-promo-cta {
  flex-shrink: 0; background: var(--brand); color: #fff;
  font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .28rem .5rem; line-height: 1;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.shop-promo-link:hover .shop-promo-cta { background: var(--brand-dark); }
.shop-promo-x {
  flex: 0 0 1.7rem; border: 0; background: transparent; color: #fff; cursor: pointer;
  font-size: .95rem; line-height: 1; padding: 0; opacity: .72;
}
.shop-promo-x:hover { opacity: 1; color: #fff; }
@media (min-width: 720px) {
  .shop-promo { min-height: 2.75rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
  .shop-promo-link { min-height: 2.75rem; gap: .75rem; padding-right: .65rem; }
  .shop-promo-img { width: 3.4rem; height: 2.75rem; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
  .shop-promo-copy { font-size: .92rem; letter-spacing: .03em; }
  .shop-promo-cta { font-size: .68rem; padding: .38rem .7rem; }
  .shop-promo-x { flex-basis: 2.1rem; font-size: 1.05rem; }
}
.util-bar { background: var(--ink); color: rgba(255,255,255,.72); font-size: .74rem; letter-spacing: .04em; }
.util-bar .inner { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; flex-wrap: wrap; }
.util-bar a:hover { color: #fff; }
.util-bar .sep { margin: 0 .5rem; color: var(--brand); }

/* Header */
.shop-header { height: auto; }
.shop-header > .inner { height: var(--header-h); gap: 1.25rem; }
.brand-lockup { --lockup-rule-gap: 0.85rem; gap: var(--lockup-rule-gap); padding: 0; border: 0; background: transparent; clip-path: none; }
.brand-lockup > a:first-child { display: inline-flex; align-items: center; gap: calc(.55rem * 0.65); min-width: 0; }
.brand-lockup .mark { width: 15px; height: 30px; flex-shrink: 0; }
/* The wordmark is tight to the i-dot, so the x-height sits 13.174% below the bitmap centre. */
.brand-lockup .wordmark { width: 92px; min-width: 0; height: auto; display: block; transform: translateY(-13.174%); }
.lockup-tag { font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border-left: 1px solid var(--line); padding-left: var(--lockup-rule-gap); margin-left: 0; }
@media (prefers-reduced-motion: no-preference) {
  .shop-header .brand-lockup .mark {
    transform-origin: center center;
    animation:
      artium-mark-flicker 0.8s linear 0.4s 1 both,
      artium-mark-pulse 4.5s ease-in-out 1.2s infinite;
  }
}
@keyframes artium-mark-flicker {
  0%, 100% { opacity: 1; }
  8% { opacity: 0.12; }
  14% { opacity: 0.12; }
  22% { opacity: 1; }
  28% { opacity: 0.04; }
  36% { opacity: 0.04; }
  46% { opacity: 1; }
  52% { opacity: 0.45; }
  58% { opacity: 1; }
  64% { opacity: 0.08; }
  72% { opacity: 0.08; }
  82% { opacity: 0.7; }
  90% { opacity: 1; }
}
@keyframes artium-mark-pulse {
  0%, 18%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(227, 6, 19, 0));
  }
  4% {
    transform: scale(1.04);
    filter: drop-shadow(0 0 2.5px rgba(227, 6, 19, 0.55));
  }
  9% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(227, 6, 19, 0));
  }
  13% {
    transform: scale(1.028);
    filter: drop-shadow(0 0 1.5px rgba(227, 6, 19, 0.35));
  }
}
.shop-footer a.footer-brand { color: inherit; }
.header-search { flex: 1; max-width: 520px; position: relative; }
.header-search input { width: 100%; height: 42px; border: 1.5px solid var(--ink); padding: 0 2.6rem 0 .95rem; font-size: .92rem; outline: none; background: #fff;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.header-search input:focus { border-color: var(--brand); }
.header-search kbd { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); font: 600 .7rem var(--font-body); border: 1px solid var(--line); padding: .05rem .4rem; color: var(--muted); }
.header-actions { display: flex; align-items: center; gap: .6rem; }
.basket-btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--brand); color: #fff; height: 42px; padding: 0 .95rem; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: background .15s; }
.basket-btn:hover { background: var(--brand-dark); }
.basket-count { background: #fff; color: var(--brand); min-width: 1.4rem; height: 1.4rem; display: inline-grid; place-items: center; font-size: .72rem; border-radius: 0; padding: 0 .3rem; }
.basket-count.bump { animation: bump .4s ease; }
@keyframes bump { 50% { transform: scale(1.35); } }
.dept-nav { border-top: 1px solid var(--line); background: #fff; }
.dept-nav .inner { display: flex; gap: .25rem 1.6rem; overflow-x: auto; scrollbar-width: none; }
.dept-nav .inner::-webkit-scrollbar { display: none; }
.dept-nav a { white-space: nowrap; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: .8rem 0; border-bottom: 2px solid transparent; color: var(--ink); opacity: .85; }
.dept-nav a:hover, .dept-nav a.active { color: var(--brand); border-bottom-color: var(--brand); opacity: 1; }

/* Buttons */
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-white { background: #fff; color: var(--ink); }
.btn-lg { padding: 1rem 1.6rem; font-size: .82rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-block { width: 100%; }

/* Hero */
.shop-hero { background: var(--ink); color: #fff; padding: 3.25rem 0 3.5rem; position: relative; overflow: hidden; }
.shop-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 85% 20%, rgba(227,6,19,.35), transparent 60%); pointer-events: none; }
.shop-hero .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem 3rem; position: relative; }
.shop-hero .eyebrow { color: rgba(255,255,255,.6); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 1.1rem; display: flex; align-items: center; gap: .6rem; }
.shop-hero .eyebrow i { width: 26px; height: 2px; background: var(--brand); display: inline-block; }
.shop-hero .tagline { font-size: clamp(1.9rem, 3.7vw, 3.3rem); color: #fff; margin-bottom: 1.25rem; }
.shop-hero .tagline span:nth-child(2) { color: var(--brand); }
.shop-hero .hero-lead { color: rgba(255,255,255,.78); max-width: 62ch; font-size: 1.05rem; line-height: 1.5; }
.hub-intro-short,
.how-hiring { display: none; }
.hero-search { display: flex; background: #fff; max-width: 620px; margin: 0 0 1rem;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
.hero-search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 1.05rem 1.2rem; font-size: 1rem; color: var(--ink); }
.hero-search button { border: 0; background: var(--brand); color: #fff; padding: 0 1.5rem; font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.hero-search button:hover { background: var(--brand-dark); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { font-size: .75rem; font-weight: 600; border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.85); padding: .35rem .75rem; transition: all .15s; }
.chip:hover { border-color: var(--brand); color: #fff; background: rgba(227,6,19,.2); }
.shop-hero .hero-visual { min-height: 420px; }
.shop-hero .hero-visual picture { position: absolute; inset: 0; }
/* The photograph is already --brand, with a short shade on its own bottom edge. */
.shop-hero .hero-visual .wash { background: none; }
.hero-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 2.25rem; margin-top: 2rem; }
.hero-stats b { display: block; font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: #fff; }
.hero-stats span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* Sections */
.shop-section { padding: 4rem 0; }
.shop-section.soft { background: var(--bg-soft); }
.section-head .more { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); white-space: nowrap; }

/* Category tiles */
.cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
.cat-tile { position: relative; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.cat-tile:hover { border-color: var(--brand); box-shadow: 0 14px 40px rgba(0,0,0,.08); transform: translateY(-2px); }
.cat-tile .img { aspect-ratio: 4/3; background: #fff; display: grid; place-items: center; padding: 1rem; border-bottom: 1px solid var(--line); }
.cat-tile .img img { max-height: 100%; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cat-tile .body { padding: .95rem 1.1rem 1.05rem; display: flex; justify-content: space-between; align-items: end; gap: .75rem; }
.cat-tile .dept { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.cat-tile h3 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; margin: .15rem 0 0; line-height: 1.2; letter-spacing: -.01em; }
.cat-tile .count { font-size: .78rem; color: var(--muted); white-space: nowrap; text-align: right; }
.cat-tile .count b { display: block; color: var(--ink); font-size: .95rem; }
.cat-tile::after { content: "→"; position: absolute; top: .7rem; right: 1.6rem; font-weight: 700; color: var(--brand); opacity: 0; transition: opacity .2s; }
.cat-tile:hover::after { opacity: 1; }

/* Product cards */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.card-p { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; position: relative; transition: border-color .2s, box-shadow .2s;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.card-p:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: 0 12px 34px rgba(0,0,0,.07); }
.card-p .img { aspect-ratio: 1/1; display: grid; place-items: center; padding: 1.25rem; background: #fff; border-bottom: 1px solid var(--line); }
.card-p .img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s; }
.card-p:hover .img img { transform: scale(1.04); }
.card-p .body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.card-p .brand { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); min-height: .9rem; }
.card-p h3 { font-size: .98rem; font-weight: 600; line-height: 1.3; margin: 0; }
.card-p .blurb { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-p .foot { margin-top: auto; padding-top: .6rem; display: flex; align-items: end; justify-content: space-between; gap: .5rem; }
.price { font-size: .78rem; color: var(--muted); }
.price b { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); font-weight: 700; }
.price.por b { font-family: var(--font-body); font-size: .9rem; font-weight: 600; }
.stock-cue { font-size: .68rem; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); }
.stock-cue::before { content: ""; width: 7px; height: 7px; background: var(--ok); display: inline-block; }
.stock-cue.sub::before { background: var(--warn); }
.stock-cue.pkg::before { background: var(--ink); }
.add-mini { border: 1.5px solid var(--ink); background: #fff; width: 36px; height: 36px; font-size: 1.2rem; font-weight: 600; cursor: pointer; flex-shrink: 0; transition: all .15s; }
.add-mini:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.add-mini.done { background: var(--ink); color: #fff; border-color: var(--ink); }
.variant-size { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; margin: .15rem 0 .2rem; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.variant-size select { height: 40px; min-width: 7.5rem; width: 100%; border: 1.5px solid var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .7rem center; color: var(--ink); font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 0 2rem 0 .75rem; cursor: pointer; appearance: none; }
.pdp-info .variant-size { margin: .2rem 0 1rem; max-width: 16rem; }
.pdp-info .variant-size select { font-size: 1.05rem; }

/* Branded placeholder for missing images */
.ph { width: 100%; height: 100%; min-height: 120px; display: grid; place-items: center; align-content: center; gap: .6rem; background:
  repeating-linear-gradient(135deg, #111 0 14px, #161616 14px 28px); color: rgba(255,255,255,.55); text-align: center; padding: 1rem;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
.card-p .img:has(.ph), .cat-tile .img:has(.ph), .gallery-main:has(.ph) { padding: 0; }
.ph img { width: 34px; height: auto; mix-blend-mode: normal !important; }
.ph span { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

/* Steps / how it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: s; }
.step { border: 1px solid var(--line); background: #fff; padding: 1.6rem 1.4rem; position: relative; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.step h3 { font-family: var(--font-display); margin: 0 0 .4rem; font-size: 1.12rem; }
.step p { margin: 0; color: var(--muted); font-size: .94rem; }

/* CTA band */
.cta-band { background: var(--brand); color: #fff; padding: 3rem 0; }
.cta-band .inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; }
.cta-band h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 0 0 .3rem; letter-spacing: -.02em; }
.cta-band p { margin: 0; color: rgba(255,255,255,.85); max-width: 56ch; }
.cta-band .actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.cta-band .btn-ghost { color: #fff; border-color: #fff; }
.cta-band .btn-ghost:hover { color: var(--ink); background: #fff; border-color: #fff; }

/* Breadcrumb + page head */
.page-nav { padding-top: .85rem; }
.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  padding: 0 1.05rem;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.back-btn:hover, .back-btn:focus-visible { background: var(--brand); border-color: var(--brand); color: #fff; outline: none; }
.crumbs { font-size: .76rem; color: var(--muted); padding: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.page-nav .crumbs { padding-top: .55rem; }
@media (max-width: 780px) {
  .back-btn { width: 100%; }
}
.crumbs a:hover { color: var(--brand); }
.crumbs .sep { color: var(--brand); }
.page-head { padding: 1.2rem 0 1.6rem; border-bottom: 1px solid var(--line); margin-bottom: 1.75rem; display: flex; justify-content: space-between; align-items: end; gap: 1rem 2rem; flex-wrap: wrap; }
.page-head h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.7rem); letter-spacing: -.025em; line-height: 1.05; margin: .2rem 0 .4rem; }
.page-head p { margin: 0; color: var(--muted); max-width: 60ch; }
.page-head .count-big { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; color: var(--brand); line-height: 1; text-align: right; }
.page-head .count-big small { display: block; font-family: var(--font-body); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Listing layout */
.listing { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 2rem; padding-bottom: 4rem; align-items: start; }
.filters { position: sticky; top: calc(var(--header-h) + 60px); display: grid; gap: 1.5rem; }
.filters h4 { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .6rem; color: var(--ink); }
.filters .cat-list a { display: flex; justify-content: space-between; font-size: .88rem; padding: .32rem 0 .32rem .7rem; border-left: 2px solid var(--line); color: var(--ink-soft); }
.filters .cat-list a:hover { color: var(--brand); }
.filters .cat-list a.active { border-left-color: var(--brand); color: var(--brand); font-weight: 600; }
.filters .cat-list a span { color: var(--muted); font-size: .78rem; }
.filters .cat-list a.sub-child { padding-left: 1.35rem; font-size: .82rem; }
.filters .cat-dept { margin: .15rem 0 .35rem; }
.filters .cat-dept-head { display: flex; align-items: center; justify-content: space-between; gap: .25rem; }
.filters .cat-list .cat-dept-head > a {
  flex: 1;
  border-left: 0;
  padding: .55rem 0 .2rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.filters .cat-list .cat-dept-head > a.active { border-left: 0; color: var(--brand); }
.filters .cat-dept-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: .15rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.filters .cat-dept-toggle svg { display: block; transition: transform .15s ease; }
.filters .cat-dept.is-open .cat-dept-toggle svg { transform: rotate(180deg); }
.filters .cat-dept-list { display: none; }
.filters .cat-dept.is-open > .cat-dept-list { display: block; }
.filters .cat-dept-list a.sub-child { padding-left: 1.85rem; }
.cat-section { margin: 0 0 2.25rem; }
.cat-section .section-head { margin-bottom: 1rem; }
.cat-section .section-head h2 { font-size: clamp(1.25rem, 2vw, 1.65rem); }
.cat-section .section-head h2 a { color: inherit; }
.filters label.chk { display: flex; gap: .55rem; align-items: center; font-size: .88rem; padding: .2rem 0; cursor: pointer; }
.filters label.chk span.n { margin-left: auto; color: var(--muted); font-size: .78rem; }
.filters input[type=checkbox] { accent-color: var(--brand); width: 16px; height: 16px; }
.filters .brand-list { max-height: 260px; overflow: auto; padding-right: .25rem; }
.filters .clear { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); background: none; border: 0; padding: 0; cursor: pointer; justify-self: start; }
.hire-notice { display: flex; gap: .85rem; align-items: flex-start; background: #fff; color: var(--ink); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); border-left: 4px solid var(--brand); padding: .95rem 1.05rem .95rem .95rem; margin: 0 0 1.15rem; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.hire-notice svg { flex: 0 0 auto; color: var(--brand); margin-top: .15rem; }
.hire-notice h2 { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; margin: 0 0 .35rem; letter-spacing: -.015em; color: var(--ink); }
.hire-notice p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.summary .hire-notice { margin: .35rem 0 1rem; }
.summary .hire-notice h2 { color: var(--ink); }
.summary .hire-notice p { color: var(--ink-soft); }
@media (max-width: 780px) {
  .hire-notice { padding: .85rem .85rem .9rem .8rem; gap: .7rem; }
  .hire-notice h2 { font-size: 1rem; }
  .hire-notice p { font-size: .88rem; }
  .dj-modal .submit-row { flex-direction: column; }
  .dj-modal .submit-row .btn { flex: 1 1 auto; width: 100%; }
  .dj-modal h2 { font-size: 1.25rem; }
}
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar .results { font-size: .86rem; color: var(--muted); }
.toolbar .results b { color: var(--ink); }
.toolbar .tools { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.select, .input { height: 40px; border: 1.5px solid var(--line); padding: 0 .75rem; background: #fff; font-size: .86rem; outline: none; color: var(--ink); }
.select:focus, .input:focus { border-color: var(--ink); }
.filter-toggle { display: none; }
.empty { border: 1px dashed var(--line); padding: 3rem 1.5rem; text-align: center; color: var(--muted); }
.cant-find { margin-top: 1.5rem; background: var(--ink); color: #fff; padding: 1.4rem 1.5rem; display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
.cant-find b { font-family: var(--font-display); font-size: 1.1rem; }
.cant-find p { margin: .15rem 0 0; color: rgba(255,255,255,.7); font-size: .9rem; }

/* Product page */
.pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem 3rem; padding: 1.25rem 0 3rem; align-items: start; }
.gallery { position: sticky; top: calc(var(--header-h) + 60px); }
.gallery-main { background: #fff; border: 1px solid var(--line); aspect-ratio: 1/1; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 2.5rem; position: relative; overflow: hidden;
  clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px); cursor: zoom-in; }
.gallery-main img.main { grid-area: 1 / 1; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: center; mix-blend-mode: multiply; transition: transform .3s; }
.gallery-main.zoom img.main { transform: scale(1.8); }
.gallery-main .badge-corner { position: absolute; left: 0; bottom: 0; background: var(--ink); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .45rem .8rem .45rem 1.6rem; }
.gallery-thumbs { display: flex; gap: .6rem; margin-top: .75rem; }
.gallery-thumbs button { width: 76px; height: 76px; border: 1.5px solid var(--line); background: #fff; padding: .35rem; cursor: pointer; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; overflow: hidden; }
.gallery-thumbs button:not(.brandtile) img { grid-area: 1 / 1; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: center; }
.gallery-thumbs button.active { border-color: var(--brand); }
.gallery-thumbs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gallery-thumbs img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gallery-thumbs .brandtile { background: var(--brand); border-color: var(--brand); }
.gallery-thumbs .brandtile img { width: 22px; mix-blend-mode: normal; }
.pdp-info .brand { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.pdp-info h1 { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.08; letter-spacing: -.025em; margin: .35rem 0 .9rem; overflow-wrap: anywhere; }
.pdp-price { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.pdp-price .amt { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; line-height: 1; }
.pdp-price .unit { font-size: .9rem; color: var(--muted); }
.pdp-price .vat { font-size: .72rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.pdp-price .por { font-size: 1.2rem; font-weight: 600; }
.rate-note { font-size: .78rem; color: var(--muted); margin: -.4rem 0 1rem; max-width: 36rem; }
.pdp-lead { color: var(--ink-soft); margin: 1.1rem 0 1.3rem; font-size: 1rem; }
.avail-card { border: 1.5px solid var(--ink); padding: 1.3rem 1.3rem 1.2rem; background: #fff; margin-bottom: 1.25rem;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.avail-card h2 { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .9rem; display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.date-row { display: grid; grid-template-columns: 1fr 1fr 110px; gap: .7rem; }
.fld label { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.fld input, .fld select, .fld textarea { width: 100%; height: 44px; border: 1.5px solid var(--line); padding: 0 .75rem; font-size: .92rem; background: #fff; outline: none; color: var(--ink); }
.fld textarea { height: 96px; padding: .65rem .75rem; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--ink); }
.qty { display: flex; height: 44px; border: 1.5px solid var(--line); }
.qty button { width: 34px; border: 0; background: var(--bg-soft); font-size: 1.1rem; cursor: pointer; flex-shrink: 0; }
.qty button:hover { background: var(--ink); color: #fff; }
.qty input { border: 0 !important; text-align: center; width: 100%; min-width: 0; height: 100% !important; padding: 0 !important; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.days-note { font-size: .78rem; color: var(--muted); margin: .6rem 0 0; }
.avail-result { margin-top: 1rem; display: none; gap: .9rem; align-items: center; padding: .85rem 1rem; background: var(--bg-soft); border-left: 4px solid var(--muted); }
.avail-result.show { display: flex; }
.avail-result.available { border-left-color: var(--ok); }
.avail-result.limited { border-left-color: var(--warn); }
.avail-result.unavailable { border-left-color: var(--bad); }
.avail-result.on_request { border-left-color: var(--ink); }
.avail-result .txt { font-size: .86rem; color: var(--ink-soft); }
.avail-result .txt b { display: block; font-size: .98rem; color: var(--ink); }
.badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .38rem .6rem; color: #fff; background: var(--muted); white-space: nowrap; }
.badge.available { background: var(--ok); }
.badge.limited { background: var(--warn); }
.badge.unavailable { background: var(--bad); }
.badge.on_request { background: var(--ink); }
.badge.pending { background: #BDBDBD; }
.mode-note { font-size: .66rem; letter-spacing: .04em; color: var(--muted); font-weight: 500; text-transform: none; display: inline-flex; align-items: center; gap: .35rem; }
.mode-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.mode-note.live::before { background: var(--ok); }
.addon-tick { display: flex; gap: .65rem; align-items: flex-start; margin: 0 0 1rem; padding: .75rem .85rem; border: 1px solid var(--line); background: var(--bg-soft); cursor: pointer; font-size: .95rem; }
.addon-tick + .addon-tick { margin-top: -.35rem; }
.addon-tick input { accent-color: var(--brand); width: 18px; height: 18px; margin-top: .15rem; flex: 0 0 auto; }
.addon-qty { margin: 0 0 1rem; padding: .75rem .85rem; border: 1px solid var(--line); background: var(--bg-soft); }
.addon-qty-row { display: flex; gap: .75rem; align-items: center; justify-content: space-between; }
.addon-qty-row > span { font-size: .95rem; }
.addon-qty-row .qty { width: 124px; flex: 0 0 auto; }
.addon-note, .supply-note { font-size: .82rem; color: var(--muted); margin: .55rem 0 0; line-height: 1.4; }
.supply-note { margin: 0 0 .75rem; }
.addon-with { color: var(--ink-soft); }
.pdp-actions { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; margin: .85rem 0 1.4rem; }
.avail-card:has(+ .pdp-actions) { margin-bottom: 0; }
.pdp-actions .btn { flex: 1 1 200px; }
.pdp-actions .fld-qty { flex: 0 0 148px; }
.pdp-actions .fld-qty .qty { width: 100%; }
.facts { border-top: 1px solid var(--line); margin: 0; padding: 0; display: grid; }
.facts div { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.facts dt { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: .15rem; }
.facts dd { margin: 0; }
.facts dd a { color: var(--brand); font-weight: 600; }
.pdp-desc { padding: 2.5rem 0 1rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 1rem 3rem; }
.pdp-desc h2 { font-family: var(--font-display); font-size: 1.35rem; margin: 0; letter-spacing: -.01em; }
.pdp-desc .copy { font-size: 1rem; color: var(--ink-soft); max-width: 70ch; }
.pdp-desc .copy p { margin: 0 0 .8rem; }
.pdp-desc .muted { color: var(--muted); font-size: .9rem; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 150%); background: var(--ink); color: #fff; padding: .85rem 1.1rem; display: flex; gap: 1rem; align-items: center; z-index: 90; transition: transform .3s; font-size: .9rem; max-width: calc(100% - 2rem);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.toast.show { transform: translate(-50%, 0); }
.toast a { color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid var(--brand); white-space: nowrap; }

/* Basket */
.checkout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 2rem 2.5rem; padding-bottom: 4rem; align-items: start; }
.panel { border: 1px solid var(--line); background: #fff; padding: 1.4rem; margin-bottom: 1.25rem; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
.panel h2 { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 1rem; display: flex; align-items: center; gap: .6rem; letter-spacing: -.01em; }
.panel h2 .n { background: var(--brand); color: #fff; font-family: var(--font-body); font-size: .72rem; width: 1.6rem; height: 1.6rem; display: inline-grid; place-items: center; }
.panel .dates { display: grid; grid-template-columns: 1fr 1fr auto; gap: .7rem; align-items: end; }
.line { display: grid; grid-template-columns: 84px minmax(0,1fr) 120px 90px; gap: 1rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--line); }
.line:first-of-type { border-top: 0; }
.line .thumb { width: 84px; height: 84px; border: 1px solid var(--line); display: grid; place-items: center; padding: .4rem; background: #fff; }
.line .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.line .thumb .ph { min-height: 0; }
.line .name { font-weight: 600; line-height: 1.3; }
.line .name a:hover { color: var(--brand); }
.line .sub { font-size: .8rem; color: var(--muted); margin-top: .2rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.line .qty { height: 38px; }
.line .tot { text-align: right; font-weight: 700; font-size: .95rem; }
.line .remove { background: none; border: 0; color: var(--muted); font-size: .72rem; text-decoration: underline; cursor: pointer; padding: 0; }
.line .remove:hover { color: var(--brand); }
.summary { position: sticky; top: calc(var(--header-h) + 60px); background: var(--ink); color: #fff; border: 0; }
.summary h2 { color: #fff; }
.summary .row { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.summary .row span:first-child { color: rgba(255,255,255,.65); }
.summary .row span:last-child { text-align: right; }
.summary .total { font-family: var(--font-body); font-size: 1.55rem; font-weight: 700; margin: .9rem 0 0; letter-spacing: 0; }
.summary .small { font-size: .76rem; color: rgba(255,255,255,.55); margin: 0 0 1rem; }
.summary .small.total-label { margin: .15rem 0 .85rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.form-grid .full { grid-column: 1 / -1; }
.radio-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.radio-row label { flex: 1 1 180px; border: 1.5px solid var(--line); padding: .75rem .9rem; display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; font-size: .9rem; }
.radio-row label:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, white); }
.radio-row input { accent-color: var(--brand); margin-top: .2rem; }
.radio-row small { display: block; color: var(--muted); font-size: .76rem; }
.demo-notice { display: flex; gap: .8rem; align-items: flex-start; background: #FFF4F4; border: 1.5px dashed var(--brand); padding: .9rem 1rem; font-size: .88rem; margin: 1rem 0; }
.demo-notice b { color: var(--brand); }
.demo-notice svg { flex-shrink: 0; color: var(--brand); }
.delivery-estimate { border: 1px solid var(--line); background: var(--bg-soft); padding: .85rem 1rem; }
.delivery-estimate[hidden] { display: none !important; }
.delivery-estimate .amt { display: block; font-family: var(--font-body); font-size: 1.25rem; font-weight: 700; line-height: 1.15; }
.delivery-estimate .split { margin: .25rem 0 0; font-size: .88rem; }
.delivery-estimate .note { margin: .2rem 0 0; color: var(--muted); font-size: .8rem; }
.chk-line { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; color: var(--ink-soft); }
.chk-line input { accent-color: var(--brand); margin-top: .2rem; }
.address-step { display: grid; gap: .85rem; }
.address-step[hidden], .address-fields[hidden], .address-summary[hidden], .address-area[hidden], [data-venue-tbc-fields][hidden], [data-address-select-wrap][hidden], [data-address-lookup][hidden], [data-collect-wrap][hidden], [data-business-address][hidden], [data-venue-address][hidden] { display: none !important; }
[data-business-address], [data-venue-address] { display: grid; gap: .85rem; }
.business-missing { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.45; }
.business-missing-action { margin: 0; }
.business-missing-action .btn { min-height: 44px; }
.address-step .fld { margin: 0; }
.postcode-row { display: flex; gap: .6rem; align-items: flex-end; }
.postcode-row .fld { flex: 1 1 auto; min-width: 0; }
.postcode-row .btn { flex: 0 0 auto; min-height: 44px; }
.address-fields { display: grid; gap: .7rem; }
.address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.address-area, .address-summary { background: #fff; color: var(--ink); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); border-left: 4px solid var(--brand); padding: .85rem 1rem; margin: 0; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.address-area { font-size: .95rem; font-weight: 700; }
@media (max-width: 780px) {
  .postcode-row { flex-direction: column; align-items: stretch; }
  .postcode-row .btn { width: 100%; }
  .address-grid { grid-template-columns: 1fr; }
  .address-actions { flex-direction: column; align-items: stretch; }
  .address-summary .linkish { text-align: center; }
}
.address-summary h3 { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; margin: 0 0 .35rem; }
.address-summary p { margin: 0; font-size: .92rem; line-height: 1.45; }
.address-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-top: .85rem; }
.address-actions .btn { min-height: 44px; }
.address-summary .linkish { background: none; border: 0; padding: 0; color: var(--brand); font-weight: 700; font-size: .85rem; cursor: pointer; text-decoration: underline; min-height: 44px; }
.address-confirmed { margin-top: .65rem !important; color: var(--brand); font-weight: 700; font-size: .82rem !important; letter-spacing: .04em; }
.field-error { color: var(--brand); font-size: .82rem; line-height: 1.4; margin: 0; }
.address-step .fld.is-invalid input, .address-step .fld.is-invalid select { border-color: var(--brand); }
[data-venue-tbc-fields] { display: grid; gap: .7rem; }
body.modal-open { overflow: hidden; }
.dj-modal .box { max-width: 520px; padding-bottom: 1.85rem; }
.dj-modal .submit-row .btn { min-height: 44px; }
.dj-modal p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.submit-row { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }
.submit-row .btn { flex: 1 1 220px; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; place-items: center; z-index: 100; padding: 1rem; }
.modal.show { display: grid; }
.modal .box { background: #fff; max-width: 620px; width: 100%; max-height: calc(100vh - 2rem); overflow: auto; padding: 2rem 1.75rem 1.6rem; position: relative;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); border-top: 6px solid var(--brand); }
.modal h2 { font-family: var(--font-display); font-size: 1.5rem; margin: .3rem 0 .6rem; letter-spacing: -.02em; }
.modal .kicker { margin: 0; }
.modal pre { background: var(--ink); color: #eaeaea; padding: 1rem; font-size: .74rem; overflow: auto; max-height: 260px; margin: 1rem 0; }
.modal ul { padding-left: 1.1rem; margin: .5rem 0; font-size: .92rem; }
.basket-empty { text-align: center; padding: 4rem 1rem 5rem; }
.basket-empty h1 { font-family: var(--font-display); font-size: 2rem; margin: 1rem 0 .5rem; }
.basket-empty h2 { font-family: var(--font-display); font-size: 1.6rem; margin: .8rem 0 .4rem; }
.basket-empty p { color: var(--muted); margin: 0 0 1.5rem; }
.basket-empty img { width: 40px; margin: 0 auto; }
.request-sent { padding-top: 1.25rem; }
.request-sent h1 { font-family: var(--font-display); font-size: 2rem; margin: .2rem 0 .6rem; }
.request-ref { font-size: 1.05rem; margin: .2rem 0 1rem; }
.request-history { color: var(--muted); margin: 0 0 .75rem; }
.request-sent + .basket-empty { padding-top: 1.25rem; }

/* Footer */
.shop-footer { background: var(--ink); color: rgba(255,255,255,.7); border-top: 0; padding: 0 0 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; padding: 2.25rem 0 2rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.shop-footer .footer-brand { gap: calc(.6rem * 0.65); }
.shop-footer .footer-brand .mark { width: 12px; height: 24px; }
.shop-footer .footer-brand .wordmark,
.shop-footer .footer-brand img[alt=artium] { width: 82px; height: auto; display: block; filter: none; transform: translateY(-13.174%); }
.footer-tag { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); margin: .9rem 0 0; max-width: 24ch; line-height: 1.7; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.footer-cols h4 { color: #fff; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .8rem; }
.footer-cols a, .footer-cols span { display: block; font-size: .86rem; padding: .18rem 0; }
.footer-cols a:hover { color: var(--brand); }
.shop-footer .footer-meta { color: rgba(255,255,255,.45); font-size: .76rem; padding-top: 1.25rem; }
.shop-footer .footer-meta a { color: inherit; text-decoration: underline; text-underline-offset: .14em; }
.legal-consent { margin: .2rem 0 0; font-size: .85rem; line-height: 1.45; max-width: 72ch; }
.legal-consent a { text-decoration: underline; text-underline-offset: .14em; }

/* Responsive */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .cat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 960px) {
  .shop-hero .hero-grid { grid-template-columns: 1fr; }
  .shop-hero .hero-visual { min-height: 260px; order: 2; }
  .listing { grid-template-columns: 1fr; }
  .filters { position: static; display: none; border: 1px solid var(--line); padding: 1.1rem; }
  .filters.open { display: grid; }
  .filter-toggle { display: inline-flex; }
  .pdp { grid-template-columns: 1fr; }
  .gallery { position: static; }
  .gallery-main { aspect-ratio: 4/3; }
  .pdp-desc { grid-template-columns: 1fr; }
  .checkout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .header-search { display: none; }
  .shop-header > .inner { justify-content: space-between; }
  .nav-toggle { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .dept-nav { display: none; }
  .grid, .grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; }
  .cat-tile .body { flex-direction: column; align-items: start; gap: .3rem; padding: .75rem .8rem .85rem; }
  .cat-tile .count { text-align: left; }
  .cat-tile .count b { display: inline; }
  .card-p .img { padding: .75rem; }
  .card-p .body { padding: .7rem .75rem .8rem; }
  .card-p h3 { font-size: .88rem; }
  .price b { font-size: 1rem; }
  .shop-section { padding: 2.75rem 0; }
  .hero-stats { gap: 1.25rem; }
  .hero-stats b { font-size: 1.45rem; }
  .date-row { grid-template-columns: 1fr 1fr; }
  .date-row .fld-qty { grid-column: 1 / -1; }
  .pdp-actions { flex-direction: column; align-items: stretch; }
  .pdp-actions .btn { flex: none; width: 100%; }
  .pdp-actions .fld-qty { flex: none; width: 148px; }
  .facts div { grid-template-columns: 1fr; gap: .2rem; }
  .line { grid-template-columns: 64px minmax(0,1fr); gap: .5rem .85rem; }
  .line .thumb { width: 64px; height: 64px; grid-row: span 2; }
  .line .qty { width: 120px; }
  .line .tot { text-align: left; }
  .line .qtycell { display: flex; align-items: center; gap: 1rem; justify-content: space-between; grid-column: 2; }
  .form-grid { grid-template-columns: 1fr; }
  .panel .dates { grid-template-columns: 1fr 1fr; }
  .panel .dates .btn { grid-column: 1 / -1; }
  .submit-row { flex-direction: column; }
  .submit-row .btn { flex: none; width: 100%; }
  .cta-band .actions, .cta-band .actions .btn { width: 100%; }
  .cta-band .actions { flex-direction: column; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .util-bar .inner { flex-wrap: nowrap; align-items: center; gap: .5rem; }
  .util-bar .inner > span:first-child { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
  .util-bar .util-right { display: block; flex: 0 0 auto; white-space: nowrap; }
  .basket-label { display: none; }
  .shop-header > .inner { flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: .4rem; min-width: 0; }
  .brand-lockup { flex: 0 0 auto; min-width: max-content; gap: .35rem; overflow: visible; }
  .brand-lockup > a:first-child { flex: 0 0 auto; min-width: max-content; }
  .brand-lockup .mark { width: 15px; min-width: 15px; max-width: none; height: 30px; flex: 0 0 15px; }
  .brand-lockup .wordmark { width: 76px; min-width: 76px; max-width: none; height: auto; flex: 0 0 76px; }
  .lockup-tag {
    display: inline-flex;
    align-items: center;
    align-self: center;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: .6rem;
    letter-spacing: .1em;
    padding-left: .45rem;
  }
  .header-actions { flex: 0 0 auto; margin-left: auto; gap: .15rem; }
  .header-phone { display: none; }
  .basket-btn { padding: 0 .55rem; gap: .3rem; }
  .page-head .count-big { display: none; }
  .hero-search button { padding: 0 1rem; }
  .toolbar .tools { width: 100%; }
  .toolbar .tools .select, .toolbar .tools .input { flex: 1 1 140px; }
}
@media (max-width: 380px) {
  .shop-header > .inner { gap: .2rem; }
  .shop-header .brand-lockup { gap: .25rem; }
  .shop-header .lockup-tag { letter-spacing: .04em; padding-left: .28rem; }
  .shop-header .header-actions { gap: .08rem; }
  .shop-header .basket-btn { padding-left: .35rem; padding-right: .35rem; }
  .shop-header .nav-toggle { padding-left: .4rem; padding-right: .4rem; }
}
@media (max-width: 340px) {
  .brand-lockup .wordmark { width: 68px; min-width: 68px; flex-basis: 68px; }
  .shop-header > .inner { gap: .25rem; }
  .basket-btn { padding-left: .4rem; padding-right: .4rem; }
}
@media (max-width: 420px) {
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
}
.mobile-search { display: none; padding: .75rem 0 0; }
.mobile-search input { width: 100%; height: 44px; border: 1.5px solid var(--ink); padding: 0 .9rem; font-size: 1rem; outline: none; }

/* Overflow guards (grid children must be allowed to shrink) */
.fld, .fld input, .fld select { min-width: 0; }
input[type=date] { min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; }
@media (max-width: 960px) {
  .shop-hero .hero-grid, .pdp, .checkout, .listing, .pdp-desc { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .date-row, .panel .dates { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Bevel edge lines — clip-path hides borders on the cut corner, so redraw the diagonal */
.bv, .bv-tr, .bv-tlbr { position: relative; }
.bv::before, .bv-tr::before, .bv-tlbr::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; --g: linear-gradient(to top right, transparent calc(50% - 1px), var(--bvc, var(--line)) calc(50% - 1px), var(--bvc, var(--line)) calc(50% + .5px), transparent calc(50% + .5px)); }
.bv-tr::before { background: var(--g) top right / var(--bvs, 18px) var(--bvs, 18px) no-repeat; }
.bv::before { background: var(--g) top right / 22px 22px no-repeat, var(--g) bottom left / 22px 22px no-repeat; }
.bv-tlbr::before { --g: linear-gradient(to top left, transparent calc(50% - 1px), var(--bvc, var(--line)) calc(50% - 1px), var(--bvc, var(--line)) calc(50% + .5px), transparent calc(50% + .5px));
  background: var(--g) top left / 28px 28px no-repeat, var(--g) bottom right / 28px 28px no-repeat; }
.step, .panel { --bvs: 22px; }
.panel { --bvs: 20px; }
.avail-card { --bvs: 22px; --bvc: var(--ink); }
.avail-card::before { --g: linear-gradient(to top right, transparent calc(50% - 1.3px), var(--ink) calc(50% - 1.3px), var(--ink) calc(50% + 1px), transparent calc(50% + 1px)); }
.summary::before { display: none; }
.card-p:hover { --bvc: color-mix(in srgb, var(--brand) 55%, var(--line)); }
.cat-tile:hover { --bvc: var(--brand); }
.cat-tile::after { content: none; }
.cat-tile .arrow { position: absolute; top: .7rem; right: 1.7rem; font-weight: 700; color: var(--brand); opacity: 0; transition: opacity .2s; z-index: 3; }
.cat-tile:hover .arrow { opacity: 1; }

/* Fixed-ratio media boxes */
.cat-tile .img, .card-p .img { overflow: hidden; }
.cat-tile .img img, .card-p .img img { width: 100%; height: 100%; object-fit: contain; }
.cat-tile .img { aspect-ratio: 4 / 3; }
.card-p .img { aspect-ratio: 1 / 1; }
.cat-tile.big { grid-column: span 2; grid-row: span 2; }
.cat-tile.big .img { aspect-ratio: auto; flex: 1; min-height: 0; padding: 2rem; }
.cat-tile.big h3 { font-size: 1.5rem; }
.cat-tile.big .count b { font-size: 1.4rem; }
.big-blurb { margin: -0.4rem 1.1rem 1.1rem; color: var(--muted); font-size: .92rem; }

/* Hero tagline must never clip ("UNFORGETTABLE" is the longest word) */
.shop-hero .tagline { font-size: clamp(1.6rem, 3.15vw, 2.85rem); }
.shop-hero .hero-copy { min-width: 0; }

/* Department nav with dropdowns */
.dept-nav .inner { overflow: visible; align-items: stretch; gap: 0 2rem; }
.dn { position: relative; }
.dn > a { display: block; }
.dn .drop { position: absolute; top: 100%; left: -1rem; min-width: 250px; background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--brand); padding: .5rem 0; display: none; z-index: 60; box-shadow: 0 18px 40px rgba(0,0,0,.1); }
@media (min-width: 781px) {
  .dn:hover .drop, .dn:focus-within .drop { display: block; }
}
.dn .drop a { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 1rem; font-size: .76rem; letter-spacing: .06em; border: 0; }
.dn .drop a.sub-child { padding-left: 1.85rem; }
.dn .drop a span { color: var(--muted); }
.dn .drop a:hover { background: var(--bg-soft); }
.dn-cta { margin-left: auto; color: var(--brand) !important; }
@media (max-width: 1100px) { .cat-tile.big { grid-row: span 1; } .cat-tile.big .img { aspect-ratio: 4/3; flex: none; } }
@media (max-width: 780px) {
  .cat-tile.big { grid-column: span 2; }
  .cat-tile.big h3 { font-size: 1.2rem; }
  .big-blurb { display: none; }
}
/* media: absolute-fit images so tall images never crop */
.cat-tile .img, .card-p .img { position: relative; }
.cat-tile .img img, .card-p .img img { position: absolute; inset: 1rem; width: calc(100% - 2rem); height: calc(100% - 2rem); }
.cat-tile.big .img img { inset: 2rem; width: calc(100% - 4rem); height: calc(100% - 4rem); }
.cat-tile .img .ph img, .card-p .img .ph img { position: static; width: 34px; height: auto; }
.dept-nav .inner { align-items: center; }
@media (max-width: 780px) { .card-p .img img { inset: .6rem; width: calc(100% - 1.2rem); height: calc(100% - 1.2rem); } }
.step::before { counter-increment: none; }
.step .num::before { counter-increment: s; content: "0" counter(s); font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--brand); line-height: 1; display: block; margin-bottom: .8rem; }
/* Size UNFORGETTABLE from the copy column so it keeps a margin at phone widths. */
.shop-hero .hero-copy {
  min-width: 0;
  container-type: inline-size;
  container-name: shop-hero;
}
.shop-hero .tagline {
  font-size: clamp(1.15rem, 6cqi, 2.85rem);
  max-width: 100%;
}
.shop-hero .tagline span { display: block; max-width: 100%; }
@media (max-width: 960px) {
  .checkout > div:first-child { display: contents; }
  .checkout .summary { order: 4; margin-bottom: 1.25rem; }
  .checkout form.panel { order: 5; }
}
/* radio cards inside .fld: undo the field-label/input styling */
.fld .radio-row label { display: flex; text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 600; color: var(--ink); margin: 0; }
.fld .radio-row small { font-weight: 400; }
.fld .radio-row input { width: 16px; height: 16px; flex-shrink: 0; padding: 0; }

/* Mobile drawer pieces stay out of the desktop mega-menu */
.m-bar, .dn-acc, .m-home { display: none; }

/* Shop mobile menu: full-width drawer. Desktop hover panels must not show here. */
@media (max-width: 780px) {
  html.nav-lock, html.nav-lock body { overflow: hidden; height: 100%; }
  .shop-header .nav-toggle {
    background: #fff;
    border: 1.5px solid var(--ink);
    color: var(--ink);
    font-weight: 700;
    letter-spacing: .08em;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  }
  .shop-header .nav-toggle.is-open {
    width: 44px;
    padding: 0;
    font-size: 1.55rem;
    line-height: 1;
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
  }
  .shop-header { overflow: visible; }
  .dept-nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 40;
    background: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-top: 3px solid var(--brand);
    box-shadow: 0 24px 48px rgba(0,0,0,.18);
  }
  .dept-nav.open .inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: .85rem 1.15rem calc(1.5rem + env(safe-area-inset-bottom));
    overflow: visible;
  }
  .dept-nav.open .m-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    margin-bottom: .35rem;
  }
  .dept-nav.open .m-bar span {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .m-close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--ink);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    padding: 0;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  }
  .dept-nav.open .mobile-search { display: block; padding: .2rem 0 .85rem; }
  .dept-nav.open .mobile-search input {
    width: 100%;
    height: 48px;
    border: 1.5px solid var(--ink);
    padding: 0 .95rem;
    font-size: 1rem;
    outline: none;
    background: #fff;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  }
  .dept-nav.open a.m-all {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0 0 .35rem;
    padding: 0 1rem;
    background: var(--brand);
    color: #fff !important;
    opacity: 1 !important;
    border: 0 !important;
    font-size: .82rem;
    letter-spacing: .12em;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  }
  .dept-nav.open a.m-all:hover,
  .dept-nav.open a.m-all.active { background: var(--brand-dark); color: #fff !important; }
  .dept-nav.open .dn-link,
  .dept-nav.open .dn-cta { display: none; }
  .dept-nav.open a.dn-auto {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: .7rem .15rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    font: 700 .92rem/1.2 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: 1;
    color: var(--ink);
  }
  .dept-nav.open a.dn-auto:hover,
  .dept-nav.open a.dn-auto.active { color: var(--brand); border-bottom-color: var(--line); }
  .dept-nav.open .dn-acc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 48px;
    padding: .7rem .15rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font: 700 .92rem/1.2 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
  }
  .dept-nav.open .dn.is-open > .dn-acc,
  .dept-nav.open .dn.is-current > .dn-acc { color: var(--brand); }
  .dept-nav.open .chev { flex: 0 0 20px; width: 20px; height: 20px; display: block; overflow: visible; }
  .dept-nav.open .chev-up { display: none; }
  .dept-nav.open .dn.is-open .chev-down { display: none; }
  .dept-nav.open .dn.is-open .chev-up { display: block; }
  .dept-nav.open .dn.is-open .chev { color: var(--brand); }
  .dept-nav.open .dn .drop,
  .dept-nav.open .dn:hover .drop,
  .dept-nav.open .dn:focus-within .drop {
    display: none;
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }
  .dept-nav.open .dn.is-open > .drop,
  .dept-nav.open .dn-all > .drop {
    display: block;
    background: var(--bg-soft);
    margin: 0 -1.15rem;
    padding: .15rem 1.15rem .2rem 1.35rem;
  }
  .dept-nav.open .dn .drop a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
    padding: .65rem 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: normal;
    opacity: 1;
    color: var(--ink);
  }
  .dept-nav.open .dn .drop a.sub-child { padding-left: 1.15rem; }
  .dept-nav.open .dn .drop a:hover { background: transparent; color: var(--brand); }
  .dept-nav.open .sub-name { min-width: 0; }
  .dept-nav.open .sub-count {
    margin-left: auto;
    color: var(--muted);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
  }
  .dept-nav.open .m-home {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin-top: .85rem;
    padding: 0;
    border: 0;
    color: var(--brand) !important;
    opacity: 1 !important;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
}

/* Hire desk enquiry */
.enquiry-modal { z-index: 120; }
.enquiry-modal .box { max-width: 560px; }
.enquiry-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .35rem; }
.enquiry-head h2 { margin: .2rem 0 0; }
.enquiry-x { width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); font-size: 1.7rem; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.enquiry-x:hover { color: var(--brand); }
.enquiry-form { display: grid; gap: .85rem; }
.enquiry-subject { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.enquiry-subject b { color: var(--ink); }
.enquiry-grid, .enquiry-dates { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
.enquiry-form .opt { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.enquiry-link { margin: .4rem 0 0; font-size: .85rem; }
.enquiry-link a { color: var(--brand); font-weight: 700; }
.enquiry-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.enquiry-fallback { margin: 0; font-size: .9rem; }
.enquiry-fallback a { color: var(--brand); font-weight: 700; }
.enquiry-success p { margin: .4rem 0 0; font-size: 1.05rem; line-height: 1.45; }
.dept-landing { padding-top: 0; padding-bottom: 3.5rem; }
.dept-landing .page-head { border-bottom: 0; margin-bottom: .35rem; padding-bottom: .2rem; }
/* White frame so a white product photo meets the tile. The border and
   clipped corner stay on .cat-tile. Home tiles and product cards use the
   same white. */
.dept-landing .cat-tile .img { background: #fff; }
.dept-landing .cat-tile .img img { mix-blend-mode: normal; }
.dept-landing .cat-tile .img .tile-primary { z-index: 1; opacity: 0; }
.dept-landing .cat-tile .img.is-ready .tile-primary { opacity: 1; }
.dept-landing .cat-tile .img.is-ready .tile-fallback { visibility: hidden; }
/* Prepared 8x4 deck file: the whole platform and legs, with white around them.
   Contain so the tile never clips a corner at any width. */
.cat-tile .img img.stage-deck {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: none;
}
/* Seven category tiles: four on the first row, three centred on the second. */
.home-depts { padding: 2.5rem 0 1.25rem; }
.home-depts .section-head { margin-bottom: 1.35rem; }
.home-dept-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.home-dept-grid .cat-tile {
  flex: 0 0 auto;
  width: calc((100% - 3rem) / 4);
  min-width: 0;
}
.home-dept-grid .cat-tile .body {
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
}
.home-dept-grid .cat-tile h3 { font-size: clamp(.92rem, 1.05vw, 1.12rem); }
.home-dept-grid .cat-tile .count { text-align: left; white-space: normal; }
.home-dept-grid .cat-tile .count b { display: inline; margin-right: .2rem; }
@media (max-width: 780px) {
  .home-depts { padding: 1.6rem 0 .5rem; }
  .home-dept-grid { justify-content: flex-start; gap: .7rem; }
  .home-dept-grid .cat-tile { width: calc((100% - .7rem) / 2); }
}

@media (max-width: 640px) {
  .enquiry-modal { padding: .5rem; align-items: stretch; }
  .enquiry-modal .box { max-height: calc(100dvh - 1rem); padding: 1.15rem 1rem 1rem; }
  .enquiry-grid, .enquiry-dates { grid-template-columns: 1fr; }
  .enquiry-modal .submit-row { flex-direction: column; }
  .enquiry-modal .submit-row .btn { width: 100%; flex-basis: auto; }
}

.shop-hero h1.hub-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.8vw, 2.55rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  text-transform: none;
  color: #fff;
  margin: 0 0 1.1rem;
  max-width: 18ch;
}
.cat-intro { max-width: 68ch; margin: .35rem 0 .8rem; font-size: 1rem; line-height: 1.5; }
.cat-intro a { color: inherit; text-decoration: underline; text-underline-offset: .14em; }
.cat-intro a:hover { color: var(--brand); }
.collect-line { margin: 0 0 .8rem; font-weight: 650; }
.header-phone { display: none; }
.hire-dock { display: none; }
.trust-strip {
  width: 100%;
  margin: 0;
  padding: .95rem 1.25rem;
  background: var(--ink);
  color: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.trust-strip p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem 1.35rem;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.trust-strip span { font-size: .92rem; font-weight: 650; white-space: nowrap; }
.trust-strip .trust-note { margin: 0; letter-spacing: .01em; }

@media (max-width: 780px) {
  .header-phone { display: none; }
  .util-bar .util-right a[href^="mailto:"],
  .util-bar .util-right .sep { display: none; }
  body { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
  .hire-dock {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    background: var(--ink);
    color: #fff;
    gap: .5rem;
    padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
  }
  .hire-dock a, .hire-dock button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255,255,255,.35);
  }
  .hire-dock button { background: var(--brand); border-color: var(--brand); cursor: pointer; }
  .toast { bottom: 5.2rem; }
  .kicker,
  .strip,
  .strip .inner,
  .header-search kbd,
  .demo-ribbon,
  .util-bar,
  .dept-nav a,
  .basket-btn,
  .basket-count,
  .shop-hero .eyebrow,
  .hero-search button,
  .chip,
  .hero-stats span,
  .section-head .more,
  .cat-tile .dept,
  .card-p .brand,
  .stock-cue,
  .variant-size,
  .ph span,
  .page-head .count-big small,
  .filters h4,
  .filters .clear,
  .crumbs,
  .footer-tag,
  .footer-cols h4,
  .shop-footer .footer-meta,
  .gallery-main .badge-corner,
  .pdp-info .brand,
  .pdp-price .vat,
  .avail-card h2,
  .fld label,
  .badge,
  .mode-note,
  .facts dt,
  .toast a,
  .panel h2 .n,
  .line .remove,
  .summary .small,
  .cat-dept-toggle,
  .back-btn,
  .nav-toggle,
  .trust-strip span,
  .trust-strip .trust-note,
  .header-phone,
  .hire-dock a,
  .hire-dock button,
  .card-p .brand,
  .stock-cue,
  .pdp-info .brand { font-size: 12px; }
  .header-search-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); padding: 0; }
  .shop-header.search-open .header-search { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin: 0; max-width: none; padding: .65rem 1rem 1rem; background: #fff; border-bottom: 1px solid var(--line); }
  .shop-hero { padding: 1.35rem 0 1.3rem; }
  .shop-hero .hero-visual,
  .shop-hero .chips,
  .shop-hero .hero-stats,
  .shop-hero .eyebrow { display: none; }
  .hub-intro-full { display: none; }
  .hub-intro-short { display: block; }
  .shop-hero .hub-intro-short { font-size: .98rem; line-height: 1.65; margin: 0 0 1.2rem; }
  .shop-hero .tagline, .shop-hero h1.hub-title { margin-bottom: 1.05rem; }
  .shop-hero .hero-search { margin-bottom: 0; }
  .how-hiring {
    display: block;
    padding: .2rem 0 1.4rem;
    color: var(--ink);
  }
  .how-hiring h2 {
    margin: 0 0 .5rem;
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .how-hiring ul { margin: 0; padding-left: 1.15rem; }
  .how-hiring li { margin: .28rem 0; font-size: .92rem; line-height: 1.45; }
  .how-hiring a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .14em; }
  .home-depts { padding-top: .85rem; }
  .pdp-sticky { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 1rem 0 0; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); max-width: 100%; }
  .pdp-sticky .btn { min-height: 44px; }
}
@media (max-width: 420px) {
  .shop-hero h1.hub-title {
    font-size: 1.42rem;
    line-height: 1.16;
    max-width: 100%;
  }
}
.header-search-btn { display: none; }
@media (max-width: 780px) {
  .header-search-btn { display: inline-flex; }
}
.spec-list { margin: 0 0 1rem; padding-left: 1.15rem; }
.spec-list li { margin: .4rem 0; }
.subcat-filters { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; }
.subcat-filters button { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: .45rem .85rem; font: 600 .85rem var(--font-body); cursor: pointer; }
.subcat-filters button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.shop-missing { padding: 2.5rem 0 4rem; max-width: 46rem; }
.shop-missing h1 { margin: .3rem 0 .6rem; }
.shop-missing h2 { font-size: 1rem; margin: 1.4rem 0 .5rem; }
.dept-nav .drop .view-all { font-weight: 700; }
.type-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 0 0 1.5rem; }
.type-tile { display: flex; flex-direction: column; gap: .2rem; min-height: 5.5rem; padding: .9rem 1rem; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; }
.type-tile b { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.02em; }
.type-tile small, .type-sublabel, .sub-label { display: block; color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .04em; }
.type-tile span { margin-top: auto; color: var(--muted); font-size: .78rem; }
.type-sublabel { margin: .15rem 0 .35rem; }
.sub-label { font-weight: 600; letter-spacing: .02em; }
.cross-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.cross-links a { display: inline-flex; align-items: center; min-height: 36px; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-weight: 700; font-size: .85rem; text-decoration: none; background: #fff; }
.cross-links a:hover { border-color: var(--ink); }
.brand-sections { display: flex; flex-direction: column; gap: 48px; min-width: 0; }
.brand-section { padding: 0; min-width: 0; }
.brand-section h2 { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.02em; margin: 0 0 .75rem; overflow-wrap: anywhere; }
.brand-section .grid { min-width: 0; }
@media (max-width: 780px) {
  .type-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-section .grid, .brand-section .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-p { min-width: 0; }
  .card-p h3, .card-p .blurb, .price { overflow-wrap: anywhere; }
  .card-p .foot, .price { min-width: 0; }
}
@media (max-width: 420px) {
  .type-tiles { grid-template-columns: 1fr; }
  .brand-section .grid, .brand-section .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

[data-trade-slot] { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; min-width: 0; }
.account-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--ink);
  text-decoration: none;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.account-icon { display: block; flex: 0 0 auto; }
.account-menu { display: none; }
.account-menu > summary { list-style: none; cursor: pointer; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 2px #fff;
}
.trade-login, .trade-logout {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}
.trade-account { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; max-width: 11rem; text-align: right; color: inherit; text-decoration: none; }
.trade-name { font-size: .78rem; font-weight: 700; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-rate { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); }
.trade-price .was, .tot .was { color: var(--muted); font-weight: 650; text-decoration: line-through; margin-right: .35rem; }
.trade-only-note, .trade-applied { display: block; margin: .25rem 0 0; font-size: .75rem; line-height: 1.35; color: var(--muted); font-weight: 500; }
.trade-login-line { display: block; margin: .28rem 0 0; color: var(--brand); font-size: .72rem; font-weight: 700; line-height: 1.3; text-decoration: underline; text-underline-offset: .12em; overflow-wrap: anywhere; }
.pdp-price .trade-login-line { flex: 1 0 100%; margin-top: .4rem; font-size: .8rem; }
.card-p .foot .price { flex: 1 1 auto; min-width: 0; }
.trade-page .trade-auth { max-width: 32rem; margin: 2.5rem auto 4rem; }
.trade-page .trade-auth-wide, .trade-page .trade-admin { max-width: 52rem; }
.trade-page h1 { font-family: var(--font-display); letter-spacing: -.03em; margin: .2rem 0 .6rem; }
.trade-page .lead { color: var(--ink-soft); }
.trade-page .trade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
.trade-page .trade-links { display: flex; justify-content: space-between; gap: 1rem; margin: .2rem 0 .8rem; font-weight: 650; }
.trade-page .trade-error { color: var(--brand); font-weight: 650; }
.trade-page .chk-line { display: flex; gap: .5rem; align-items: flex-start; margin: .8rem 0; }
.trade-page .app-list { display: grid; gap: 1rem; padding-bottom: 3rem; }
.trade-page .app-card { border: 1px solid var(--line); padding: 1rem 1.1rem 1.15rem; background: #fff; }
.trade-page .trade-readonly { display: grid; gap: .35rem; margin: 0 0 1rem; }
.trade-page .trade-readonly p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.trade-page .trade-readonly span { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.trade-page .trade-saved { margin: 0 0 1rem; font-weight: 700; }
.trade-page .panel h2 { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 .8rem; }
.trade-page .panel + .panel { margin-top: 1rem; }
.account-requests { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: inherit; text-decoration: none; white-space: nowrap; }
.account-panel .account-settings,
.account-panel .account-requests { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; font-size: .78rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: inherit; text-decoration: none; }
.trade-page .history-list { display: grid; gap: .75rem; margin: 1.1rem 0 1.5rem; }
.trade-page .history-card { border: 1px solid var(--line); background: #fff; padding: .85rem 1rem 1rem; }
.trade-page .history-card header { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.trade-page .history-card h2 { font-family: var(--font-display); font-size: 1.15rem; margin: .15rem 0 0; }
.trade-page .history-ref { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.trade-page .history-status { margin: .15rem 0 0; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.trade-page .history-dates, .trade-page .history-items, .trade-page .history-note { margin: .35rem 0 0; }
.trade-page .history-actions { margin: .7rem 0 0; }
.trade-page .history-actions .btn { min-height: 44px; }
.trade-page .history-pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 1.5rem; font-weight: 700; }
.history-status.is-received { color: var(--brand); }
.history-status.is-confirmed { color: #0d5c32; }
.history-status.is-completed { color: var(--muted); }
.history-status.is-cancelled { color: #8f1020; }
.history-status.is-postponed { color: #5c4a00; }
@media (min-width: 800px) {
  .trade-page .history-list { grid-template-columns: 1fr 1fr; }
}
.trade-page .app-card header { display: flex; justify-content: space-between; gap: 1rem; }
.trade-page .app-card h2 { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 .25rem; }
.trade-page .status-chip { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .5rem; }
.trade-page .status-chip.is-pending { background: #fff3bf; color: #5c4a00; }
.trade-page .status-chip.is-approved { background: #d8f5e4; color: #0d5c32; }
.trade-page .status-chip.is-declined { background: #fde2e4; color: #8f1020; }
.trade-page .app-actions { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .4rem 1rem; align-items: end; margin-top: .9rem; }
.trade-page .app-buttons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem; }
.trade-page .app-delete { margin-top: 1rem; }
.trade-page .app-delete > .btn,
.trade-page .app-delete-confirm .btn { min-height: 44px; }
.trade-page .app-delete-confirm { padding: .85rem .95rem; border: 1px solid var(--line); background: #fff; }
.trade-page .app-delete-confirm p { margin: 0 0 .75rem; }
.trade-page .current-preview { grid-column: 1 / -1; margin: 0; padding: .85rem .95rem; border: 1px solid var(--line); background: #fff; }
.trade-page .current-preview p { margin: 0 0 .75rem; }
.trade-page .current-preview .app-buttons { margin: 0; }
.opt { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.trade-page .field-help { margin: .35rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.trade-page .fld input[type=file] { height: auto; min-height: 44px; padding: .55rem .75rem; }
.trade-page .insurance-link { font-weight: 700; }
@media (max-width: 780px) {
  .trade-login, .trade-rate, .trade-name { font-size: 11px; letter-spacing: 0; }
  .trade-account { max-width: 16rem; }
  .trade-name { max-width: 16rem; }
  .trade-page .trade-grid, .trade-page .app-actions { grid-template-columns: 1fr; }
  .header-phone { display: none; }
  .account-word, .account-desktop { display: none; }
  /* Phone only: account stays in the main row, immediately left of the basket.
     Search takes the thin right-aligned row the account icon used to occupy. */
  .shop-header > .inner:has([data-trade-slot]) {
    position: relative;
    height: auto;
    min-height: var(--header-h);
    padding-bottom: 44px;
  }
  .shop-header > .inner:has([data-trade-slot]) .header-search-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 44px;
    height: 44px;
  }
  [data-trade-slot] {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
  }
  .account-link,
  .account-menu { display: block; position: relative; flex: 0 0 auto; }
  .account-link,
  .account-menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--ink);
    background: none;
    border: 0;
  }
  .account-menu > summary { position: relative; }
  .account-dot { position: absolute; top: 9px; right: 9px; }
  .account-panel {
    position: absolute;
    top: calc(100% + .25rem);
    right: 0;
    left: auto;
    z-index: 70;
    width: max-content;
    min-width: 12.5rem;
    max-width: min(16rem, calc(100vw - 10rem));
    padding: .75rem .9rem .85rem;
    background: #fff;
    border: 1px solid var(--line);
    text-align: right;
  }
  .account-panel .trade-name { max-width: 100%; }
  .account-panel .trade-logout { display: inline-flex; margin-top: .55rem; min-height: 44px; align-items: center; }
}