/* SarTrade Public site — this build's own additions only. UI/css/{style,app,
   fallback}.css are the prototype's own files, copied unmodified (CLAUDE.md
   trap #6) — never edit those here. */

/* The prototype's inventory-card "Enquire for Price" link and hero carousel
   track transition were expressed as inline style="..." on specific elements
   (UI/index.html) — mandatory rule 2 forbids inline style=, so those two
   rules move here instead. */
.equip-card__meta a,
.equip-card__link {
  color: var(--blue);
  font-weight: 700;
}

.hero-car__track,
.deliv-car__track {
  transition: transform 0.38s ease;
}

/* UI/category-*.html expresses these two spacing values as inline style=
   attributes (the "Others" panel's intro paragraph, the manufacturer-grouping
   notice below the accordion) — mandatory rule 2 forbids inline style=, so
   they become small one-off utilities here instead, matching Admin's own
   u-mb-*/u-mt-* convention (admin.css) but scoped to this build's Public CSS. */
.u-mb-14 {
  margin-bottom: 14px;
}

.u-mt-26 {
  margin-top: 26px;
}

/* UI/equipment-detail.html and UI/rfq-submitted.html express nearly every
   spacing value on the page as an inline style="margin-…"/style="..." attribute
   (mandatory rule 2 forbids inline style=) — same treatment as the two rules
   above, extended to every value those two prototype pages need. */
.u-m-0 { margin: 0; }
.u-mb-6 { margin-bottom: 6px; }
.u-mt-8 { margin-top: 8px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-18 { margin-top: 18px; }
.u-mt-40 { margin-top: 40px; }
.u-mt-48 { margin-top: 48px; }
.u-fs-20 { font-size: 20px; }
.u-fs-24 { font-size: 24px; }
.u-fs-26 { font-size: 26px; }
.u-text-left { text-align: left; }

/* UI/sell.html expresses the "two ways to sell" grid's vertical alignment and
   a handful of spacing values as inline style= attributes too — same
   treatment, extended for this page. */
.u-align-start { align-items: start; }
.u-mb-18 { margin-bottom: 18px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-52 { margin-top: 52px; }
.u-link-blue { color: var(--blue); }

.btn-row--center { justify-content: center; }

/* UI/about.html and UI/contact.html express a few more one-off spacing values
   as inline style= attributes (kv table's top margin, the sidebar panels'
   own margin-top, a <hr> before "Other locations"/"Want to unsubscribe?").
   Same treatment as every u-* rule above. */
.u-mt-14 { margin-top: 14px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-28 { margin-top: 28px; }
.u-hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

/* UI/careers.html's job card header (title/badges + Apply button) — inline
   style="display:flex;align-items:flex-start;justify-content:space-between;
   gap:16px;flex-wrap:wrap" ported as a class, same treatment as the rules
   above. */
.careers-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* UI/contact.html and UI/subscribe.html express a few more panel-title font
   sizes as inline style="font-size:…" attributes. Same treatment. */
.u-fs-15 { font-size: 15px; }
.u-fs-16 { font-size: 16px; }
.u-fs-22 { font-size: 22px; }

.st-container--narrow { max-width: 680px; }

/* UI/careers.html and UI/subscribe.html express their own section max-widths
   as inline style="max-width:…" too — same treatment, two more sizes on the
   same --narrow-style convention. */
.st-container--medium { max-width: 900px; }
.st-container--form { max-width: 720px; }

/* UI/rfq-submitted.html's checkmark glyph and "what happens next" list. */
.rfq-submitted__check {
  font-size: 46px;
  line-height: 1;
  color: var(--green);
}

.rfq-submitted__list {
  margin: 8px 0 0;
  padding-left: 20px;
  list-style: disc;
}

/* UI/faqs.html's "Still need an answer?" panel expresses its top margin as
   inline style="margin-top:30px" too — same treatment as every u-mt-* rule
   above. */
.u-mt-30 { margin-top: 30px; }

/* ---------------------------------------------------------------------
   Submit-button busy state (js/public/loading.js). Identical to the rule
   admin.css already carries for the Admin/Vendor portals — repeated here
   rather than referenced because the Public layout deliberately doesn't
   load admin.css.
   --------------------------------------------------------------------- */
.btn-st { position: relative; }

.btn-st.is-loading {
  pointer-events: none;
  opacity: .85;
}

.btn-st.is-loading .btn-st__label { visibility: hidden; }

.btn-st.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: st-spin .6s linear infinite;
}

@keyframes st-spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------- equipment card imagery
   In list view app.css gives .prod__media `height:auto`, which breaks the
   image's own `height:100%` — a percentage height needs a resolved parent
   height to size against — so `object-fit` has nothing to act on and the photo
   renders at its intrinsic size inside the 240px-wide box. Pinning the image to
   the (already position:relative) media box makes the fit apply in both views,
   whatever the container height resolves to. app.css is the prototype's own
   file and is never edited; this override lives here, per the CSS split. */
.results.is-list .prod__media { position: relative; }
.results.is-list .prod__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Equipment card photos show the whole machine instead of filling the box with
   a centre crop — sellers upload product shots at wildly different aspect
   ratios, and `cover` was cutting the top and bottom off the wider ones. The
   grey the media box already carries becomes the letterbox, and a little
   padding keeps the machine off the card edges. Overrides app.css's
   .prod__media img (prototype file, never edited). */
.prod {
    border-radius: 12px;
    overflow: hidden; /* clips the image to the card's rounded corners */
}

.prod__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* pick whatever ratio matches your design */
    background: #f4f5f7; /* fallback bg only shows if image is transparent */
    overflow: hidden;
}

    .prod__media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* fills the box, cropping instead of letterboxing */
    }

        /* Icon tiles (category fallback icon) usually look better NOT cropped.
           width/height must be restated here: app.css's
           `.prod__media img.is-icon { width:auto; height:74% }` outranks the
           plain `.prod__media img` rule above, so the icon kept a shrunken box
           and the percentage padding (20% of the card WIDTH, ~51px each side)
           then ate almost all of it. The /Categories fallback icon rendered as
           a ~22x31px speck in the corner, which looked like a missing image
           (fixed 2026-09-24). Full box + fixed inset: the icon sits centred at
           a readable size. Padding trimmed 26px -> 10px (2026-09-28) so the
           uploaded category pictograms read bigger inside the tile. */
        .prod__media img.is-icon {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 10px; /* keeps small icons from touching edges */
        }
/* ------------------------------------------------ "Photos coming soon" panel
   The client's placeholder is a flat panel of lettering, not a photo, so the
   detail gallery must not apply app.css's `object-fit:fill` to it — stretching
   the box's ~1.65 ratio over the artwork's 4:3 visibly distorts the letters.
   `cover` crops a few pixels of its own margin instead and lets it read as one
   clean panel; `contain` was tried first and left it as a lighter rectangle
   floating inside the darker grey box. Only the detail gallery needs this —
   .prod__media and .equip-card__img already use cover. */
.gallery__main img.is-placeholder { object-fit: cover; }

/* -------------------------------------------- Recent Deliveries image fill
   Engineering Implementation Review (10 Sep 2026) §5. app.css sizes the
   delivery thumbnail with `max-width/max-height:100%; width:auto; height:auto;
   object-fit:contain` inside a fixed-height grey panel, so anything smaller
   than the panel — or of a different aspect ratio — rendered at its intrinsic
   size with visible grey margin on all four sides. That `contain` was a
   deliberate choice at the time (an admin may upload line art as well as a
   photo); the client's decision on 2026-09-10 was to fill the panel instead.

   `cover` + explicit 100% width/height is what actually fills it. `fill` would
   also remove the margin but squashes any image whose ratio does not match the
   panel, and §5 explicitly says not to distort — so edges are cropped instead.
   The panel's own padding goes too, since padding is itself margin around the
   image, which is precisely what §5 asks to remove.

   Scoped to `.deliv-car` (the home-page carousel) so the shared `.delivery`
   rules in style.css, and every other image on the site, are untouched. */
.deliv-car .delivery__icon {
  padding: 0;
  overflow: hidden;
}

.deliv-car .delivery__icon img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ------------------------------------------------- Mobile submenu background
   Engineering Implementation Review (10 Sep 2026) §13. Below 992px, style.css
   (the prototype's own untouched file) tints the open dropdown with
   `background: rgba(255,227,0,.12)`. The client asked for that tint to go.

   Overriding here rather than editing style.css is CLAUDE.md trap #6. The
   media query has to be repeated because the rule being overridden only exists
   inside one — an unscoped rule here would also strip the desktop dropdown's
   white panel, which is still wanted. Hover/active/focus states are untouched
   (they come from the --bs-dropdown-link-* custom properties, not from this
   background), so the items stay legible and obviously clickable. */
@media (max-width: 991.98px) {
    .st-dropdown {
        background: rgba(255, 227, 0, 1);
    }
}

/* ------------------------------------------------- footer social-media links
   Engineering Implementation Review 18. Sits between the "about" paragraph and
   the legal line in the footer's brand column; the prototype's footer has no
   social row, so this is the one place a new element is added rather than
   ported. Uses the already-vendored Bootstrap Icons font (bi-twitter-x,
   bi-facebook, bi-linkedin) rather than three new SVG assets.

   Inherits the footer's own link colour so it stays correct if the footer is
   ever re-themed, and gets a hover/focus tint from the design's yellow. */
.site-footer__social {
  display: flex;
  gap: 14px;
  align-items: center;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  color: inherit;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  color: var(--navy);
  background: var(--yellow);
  border-color: var(--yellow);
}

/* --------------------------------------------------- key-figures phrase tile
   2026-09-11: the fourth key-figures tile is back at the client's request, so
   the 4 -> 3 column override that stood here from 2026-09-10 is gone and
   style.css's own `repeat(4, 1fr)` is once again correct at every width —
   nothing to override.

   What the tile needs instead is a type size. It carries a phrase ("Safe and
   secure delivery") in the slot the other three use for a number, and
   style.css sets `.stat-card__value` to 40px/800. At that size the phrase wraps
   to four lines, and because the grid's rows are equal-height it stretched all
   four cards and left the numeric three sitting in a tall block of empty
   yellow. 22px wraps it to two or three lines, which measures within a few
   pixels of a 40px number over its 12px label, so the row stays even. */
.stat-card__value--phrase {
  font-size: 22px;
  line-height: 1.3;
}

/* ------------------------------------------------------ hero: photo first
   Client feedback 30 Sep 2026: highlight the photo. It stays full-bleed
   (app.css's `cover`, no split, no blur). All of this overrides app.css rather
   than editing it (trap #6):

   1. app.css's `.hero__overlay::before` scrim tinted the WHOLE photo navy. It is
      replaced by a soft shade anchored to the top-left corner only, behind
      the copy, that fades out well before the middle of the photo. The caption's
      own bottom gradient (below) is removed too.
   2. The copy is solid white/yellow with a firm shadow. A see-through version
      (text at .82–.88 alpha) was tried the same day and rejected: the text
      became too hard to read. */
.hero--full .hero__overlay::before {
  background: radial-gradient(ellipse 70% 85% at 0% 0%,
    rgba(1, 25, 50, .62) 0%, rgba(1, 25, 50, .36) 45%, rgba(1, 25, 50, 0) 100%);
}

.hero--full .hero__title,
.hero--full .hero__lede {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 2px 18px rgba(0, 0, 0, .45);
}

/* 3. The copy sits top-left instead of vertically centred, so the middle of
      the photo — where the machine usually is — stays clear, and it is set a
      step smaller than style.css's 50/42px title and 16px lede. The bottom
      padding below 1200px (further down, "hero delivery caption") still
      reserves room for the caption band, so the two never collide. */
.hero--full .hero__overlay { align-items: flex-start; }

.hero--full .hero__overlay-inner {
  justify-content: flex-start;
  gap: 22px;
  padding-block: 44px;
}

.hero--full .hero__text { gap: 12px; max-width: 520px; }
.hero--full .hero__title { font-size: 32px; }
.hero--full .hero__lede { font-size: 15px; max-width: 500px; }

/* Compact buttons: style.css's .btn-st is 200px min-wide with 12/16 padding
   and a 26–28px icon; the hero pair is set a size down. */
.hero--full .hero__buttons { gap: 12px; }
.hero--full .hero__buttons .btn-st {
  min-width: 0;
  gap: 6px;
  padding: 7px 14px;
  font-size: 14px;
}
.hero--full .hero__buttons .btn-st img { width: auto; height: 20px; }

/* Further left: on wide screens the copy no longer follows the centred
   1280px page column — it hugs the hero's left edge, just clear of the prev
   arrow (14px inset + 40px wide, app.css). Below 1280 the column already
   spans the viewport, so the normal gutter applies. */
@media (min-width: 1280px) {
  .hero--full .hero__overlay-inner {
    max-width: none;
    padding-inline: 76px var(--gutter);
  }
  /* The delivery caption mirrors it on the right (next arrow: 14px inset +
     40px wide), so both blocks sit the same distance from their edge. */
  .hero--full .hero-delivery .st-container {
    max-width: none;
    padding-inline: var(--gutter) 76px;
  }
}

/* The caption sits 44px from the bottom, mirroring the copy's 44px from the
   top (it was lined up with the buttons while they were bottom-left). Below 992 the arrows move into that bottom strip
   and the caption's own spacing (further down) takes over. */
@media (min-width: 992px) {
  .hero--full .hero-delivery { padding-bottom: 44px; }
}

@media (max-width: 1199.98px) {
  .hero--full .hero__title { font-size: 30px; }
}

@media (max-width: 767.98px) {
  .hero--full .hero__title { font-size: 25px; }
  .hero--full .hero__lede { font-size: 14px; }
  /* The copy spans the full width on a phone, so a corner shade would leave
     its right half bare — tint evenly instead, still far lighter than
     app.css's original .66–.84. */
  .hero--full .hero__overlay::before { background: rgba(1, 25, 50, .42); }
}

/* ------------------------------------------------- hero delivery caption (19.7)
   The Home hero now carries a recent delivery per slide instead of a plain
   marketing image, so each slide needs its own caption.

   Placement is bottom-RIGHT deliberately. app.css's `.hero__overlay::before`
   scrim runs strongest on the LEFT (94% -> 0% across the width) because that is
   where the existing headline, lede and buttons sit; putting the caption on the
   right keeps the two blocks from colliding and lands it where the scrim is
   nearly clear. The caption carries its own panel so it stays legible against a
   bright photograph regardless.

   The caption lives inside `.hero-car__slide`, not in the overlay, because it
   has to travel with the carousel. That puts it under the overlay's stacking
   context, which is fine: the scrim is almost transparent at this end. */
.hero-delivery {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  bottom: 0;
  padding-block: 20px 28px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 2px 14px rgba(0, 0, 0, .55);
  pointer-events: none;
}

/* Only the caption matching the active slide is shown. display, not opacity,
   so the hidden ones leave the accessibility tree too. */
.hero-delivery__item { display: none; }

.hero-delivery__item.is-on {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.hero-delivery__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--yellow);
}

.hero-delivery__what {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.hero-delivery__meta {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  opacity: .92;
}

.hero-delivery__detail {
  /* One short line; anything longer wraps to at most ~2 lines at this width
     rather than growing the hero. */
  max-width: 48ch;
  margin: 4px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  opacity: .88;
}

/* The caption is an overlay on the same area the hero headline, lede and
   buttons occupy, so space has to be RESERVED for it or the two collide. On
   desktop they simply sit side by side — the copy is capped at 660px on the
   left, the caption is right-aligned — but as the viewport narrows the caption
   goes full-width and lands straight on top of the buttons.

   Measured, not guessed: at 390/600/768/1024px the caption's box and the
   buttons' box overlapped vertically in every case before these rules existed.
   The extra bottom padding on `.hero__overlay-inner` pushes the hero copy up by
   the height of the caption band; the caption's own bottom padding clears the
   carousel arrows, which app.css moves to the bottom-right below 768px.

   Re-measured 30 Sep 2026 once the copy moved bottom-left and its column was
   capped at 560px: at 992–1199 the copy and the right-aligned caption no longer
   share any horizontal space, so no reservation is needed there (the original
   190px left the copy stranded mid-hero). Below 992 they do overlap, so the
   band is reserved — sized to the caption, not the old centred layout. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero--full .hero__overlay-inner { padding-bottom: 140px; }
}

@media (max-width: 767.98px) {
  .hero-delivery { padding-bottom: 76px; }
  .hero-delivery__item.is-on { align-items: center; text-align: center; }
  .hero-delivery__detail { max-width: none; }
  /* Taller band here: centred text wraps to more lines than right-aligned text
     at this width, and the arrows sit inside the same strip. */
  .hero--full .hero__overlay-inner { padding-bottom: 176px; }
}

/* ------------------------------------------------ Home search: Location column
   app.css's .home-search grid is sized for the prototype's three fields + the
   button (2fr 1fr 1fr auto). The Location filter added 2026-09-25 is a fourth
   field, so desktop gets one more 1fr column. Scoped to the same breakpoint
   app.css's two-column / one-column layouts start below, so those still win
   on tablet and phone. */
@media (min-width: 992px) {
  .home-search { grid-template-columns: 2fr 1fr 1fr 1fr auto; }
}

/* -------------------------------------------- monthly delivery counts (19.8)
   "September: 10 / August: 20" under the Recent Deliveries heading. Sits on the
   section's navy background, so it borrows the same yellow the eyebrow uses. */
.deliv-months {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.deliv-months__item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
}

.deliv-months__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

.deliv-months__count {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--yellow);
}

.dropdown-menu[data-bs-popper] {
    top: 35px;
}

/* Page header + first-section spacing: the 18px/20px "small lift" that stood
   here from 2026-09-22 is superseded by the spacing scale in the UI
   enhancement block at the end of this file (plan item 04, approved
   2026-09-23). */

/* Align About page two-column detail: remove any top margin from the first
   element in the left column so it lines up with the right column panels. */
.detail .rich > :first-child,
.detail .rich h1:first-child,
.detail .rich h2:first-child,
.detail .rich h3:first-child,
.detail .rich p:first-child {
  margin-top: 0 !important;
}

/* Small nudge if you want the left column slightly higher than the panel top */
.detail { gap: 28px; } /* smaller gap brings columns closer */

/* =========================================================================
   UI ENHANCEMENT PLAN — approved 2026-09-23 (Project_Status.md, session 61)
   -------------------------------------------------------------------------
   Implements the plan reviewed in the "SarTrade UI Enhancement Plan"
   artifact. No colour changes: every value reuses the existing navy / blue /
   yellow tokens. Shared components (floating labels, empty states) live in
   css/components.css and the phone widget in css/phone-field.css. Numbers
   match the plan's items.
   ========================================================================= */

/* ---------------------------------------------- 04. spacing + type rhythm
   One 8-point scale instead of one-off margins: larger gaps between
   sections, a taller page header, larger long-form copy capped at a readable
   line length, and tighter display headings. */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;
  --sp-9: 96px;
}

.section { padding-block: var(--sp-8) 88px; }
.section--tight { padding-block: var(--sp-7); }

.pagehead + .section,
.pagehead + .section--tight { padding-top: 56px; }

.pagehead { padding-block: 44px 48px; }
.pagehead__crumbs { margin-bottom: 14px; }

.pagehead__title {
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.pagehead__lede {
  max-width: 62ch;
  margin-top: 12px;
  font-size: 19px;
  line-height: 1.5;
}

.section__title {
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.rich p,
.rich li {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.65;
}

p.body-copy {
  font-size: 16px;
  line-height: 1.65;
}

.panel { padding: 32px; }
.panel__title { text-wrap: balance; }
.field { margin-bottom: 22px; }

@media (max-width: 767.98px) {
  .section { padding-block: 44px 56px; }
  .section--tight { padding-block: 32px; }
  .pagehead + .section,
  .pagehead + .section--tight { padding-top: 36px; }
  .pagehead { padding-block: 30px 34px; }
  .pagehead__title { font-size: 32px; }
  .pagehead__lede { font-size: 16.5px; }
  .panel { padding: 22px; }
  .rich p, .rich li { font-size: 16px; }
}

/* ---------------------------------------------- 08. global polish
   One consistent focus ring (a soft blue halo instead of app.css's yellow
   outline, which on these yellow-accented forms read like a highlight rather
   than focus), a sticky header, and a hover lift on everything clickable. */
.input-st:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 97, 160, .18);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  transition: box-shadow .2s ease;
}

.site-header.is-scrolled { box-shadow: 0 6px 18px rgba(1, 51, 99, .08); }

/* Buttons that carry an icon (arrow, chat, cross). */
.btn-st--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-st--icon .bi { font-size: 1.05em; line-height: 1; }
.btn-st--icon .bi-arrow-right { transition: transform .18s ease; }
.btn-st--icon:hover .bi-arrow-right { transform: translateX(3px); }

.prod:hover,
.choice-card:hover {
  box-shadow: 0 18px 40px rgba(1, 51, 99, .10), 0 4px 10px rgba(1, 51, 99, .06);
  transform: translateY(-2px);
}

/* Carousel arrows: the prototype's large yellow clip-path triangles become
   round chevron buttons. Same elements and the same data-carousel wiring
   (site.js); only the drawing changes. style.css is never edited (trap #6). */
.carousel-arrow {
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px rgba(1, 51, 99, .12);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.carousel-arrow--prev,
.carousel-arrow--next { clip-path: none; }

.carousel-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 2.5px solid var(--navy-deep);
  border-right: 2.5px solid var(--navy-deep);
}

.carousel-arrow--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.carousel-arrow--next::before { transform: translate(-70%, -50%) rotate(45deg); }

.carousel-arrow:hover {
  opacity: 1;
  border-color: var(--yellow);
  background: var(--yellow);
  transform: scale(1.05);
}

.carousel-arrow:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

@media (max-width: 767.98px) {
  .carousel-arrow { width: 36px; height: 36px; }
}

/* Equipment cards: "Enquire for price" was a second yellow element competing
   with the yellow Request Quote button. It becomes a quiet text tag, leaving
   Request Quote as the card's one yellow call to action. */
.enquire-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--blue);
}

.enquire-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 2px rgba(255, 227, 0, .35);
}

/* Home "Browse by category" tiles. Each tile is an .equip-card (style.css: a
   fixed-height 135px ROW) wrapping a .prod card (a COLUMN), so the .prod
   shrank to its content width, left a blank white strip beside it, and its
   media box collapsed to 0px — the category icon never showed. Laid out here
   as one horizontal card: icon panel on the left, name/count/button on the
   right, filling the whole tile. */
.equip-card > .prod {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.equip-card > .prod:hover { transform: none; box-shadow: none; }

.equip-card:has(> .prod) {
  border: 1px solid var(--line);
  transition: box-shadow .2s ease, border-color .2s ease;
}

.equip-card:has(> .prod:hover) {
  border-color: rgba(0, 97, 160, .22);
  box-shadow: 0 10px 24px rgba(1, 51, 99, .10);
}

.equip-card > .prod .prod__media {
  grid-row: 1 / -1;
  height: 100%;
  aspect-ratio: auto;
  background: rgba(0, 97, 160, .07);
}

.equip-card > .prod .prod__media img.is-icon { padding: 10px; } /* trimmed 26px -> 10px (2026-09-28), bigger icons on the Home carousel */

.equip-card > .prod .prod__body { padding: 16px 16px 6px; }
.equip-card > .prod .prod__foot { padding: 0 16px 14px; }

/* Home "Browse by category": the listing count becomes a pill badge. */
.prod__meta--count {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 97, 160, .10);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue);
}

/* ---------------------------------------------- shared small pieces */
.icon-circle {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 97, 160, .09);
  color: var(--navy-deep);
  font-size: 19px;
  line-height: 1;
}

.icon-circle--sm { width: 34px; height: 34px; font-size: 15px; }
.icon-circle--lg { width: 56px; height: 56px; font-size: 24px; }
.icon-circle--yellow { background: var(--yellow); color: var(--navy-deep); }

.eyebrow-st {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(27, 107, 74, .10);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
}

.status-pill__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag-list__item {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-deep);
}

/* ---------------------------------------------- 03. Contact page */
.contact-layout { gap: 28px; }

.contact-form__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 22px;
}

.contact-aside {
  display: grid;
  gap: 18px;
  align-content: start;
}

.contact-card__intro {
  margin: 6px 0 8px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-soft);
}

.contact-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.contact-rows .contact-row:first-child { border-top: 0; }
.contact-row--solo { padding: 0; border-top: 0; }
.contact-row .panel__title { margin-bottom: 4px; }

.contact-row__title {
  margin: 2px 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--navy-deep);
}

.contact-row__text {
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-soft);
}

.contact-row__link {
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-row__link:hover { text-decoration: underline; text-underline-offset: 3px; }

.contact-row__meta {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
}

.contact-card__locations {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.contact-card__subhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-deep);
}

.contact-card__subhead .bi { color: var(--navy); }

/* Below the two-column breakpoint the aside dissolves into the layout grid,
   so the contact-information card can sit ABOVE the form (tap-to-call first
   on a phone) while the DPO and opening-hours cards stay below it. */
@media (max-width: 1199.98px) {
  .contact-aside { display: contents; }
  .contact-card--info { order: -1; }
}

/* ---------------------------------------------- 05. Sell: How selling works */
/* 2026-09-24: restyled to the client's mockup — white band, left-aligned
   heading with "selling" picked out in blue, pale-blue step circles with navy
   line icons and yellow number badges, thin arrows between the steps. */
.how-band {
  padding-block: 56px 64px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.how-band__title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--navy-deep);
}

.how-band__title-accent { color: var(--blue); }

.how-band__lede {
  max-width: 56ch;
  margin: 10px 0 0;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--ink-soft);
}

.how-steps {
  --how-circle: 80px;
  --how-gap: 16px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--how-gap);
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.how-steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-inline: 6px;
  text-align: center;
}

/* The arrow to the next step: a hairline shaft (::before) and a chevron head
   (::after), spanning the space between this circle and the next one with
   ~22px clear on each side. */
.how-steps__item:not(:last-child)::before,
.how-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--how-circle) / 2);
}

.how-steps__item:not(:last-child)::before {
  left: calc(50% + var(--how-circle) / 2 + 22px);
  width: calc(100% + var(--how-gap) - var(--how-circle) - 44px);
  border-top: 1.5px solid rgba(0, 97, 160, .22);
}

.how-steps__item:not(:last-child)::after {
  left: calc(150% + var(--how-gap) - var(--how-circle) / 2 - 22px - 8px);
  width: 8px;
  height: 8px;
  margin-top: -3.25px;
  border-top: 1.5px solid rgba(0, 97, 160, .22);
  border-right: 1.5px solid rgba(0, 97, 160, .22);
  transform: rotate(45deg);
  transform-origin: center;
}

.how-steps__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--how-circle);
  height: var(--how-circle);
  margin-bottom: 10px;
  border-radius: 50%;
  /* Same tint as the site's shared .icon-circle. */
  background: rgba(0, 97, 160, .09);
  color: var(--navy-deep);
  font-size: 30px;
  transition: transform .2s ease, background-color .2s ease;
}

.how-steps__item:hover .how-steps__icon {
  transform: translateY(-3px);
  background: rgba(0, 97, 160, .13);
}

.how-steps__num {
  position: absolute;
  top: -2px;
  right: -4px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 3px var(--white);
  color: var(--navy-deep);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
}

.how-steps__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--navy-deep);
}

.how-steps__text {
  max-width: 22ch;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-soft);
}

.how-band__note {
  margin: 40px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
}

.how-band__note a {
  color: var(--navy-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tablet and phone: the five steps stack into a list, circle on the left, and
   the arrows become a thin line running down between the circles. */
@media (max-width: 991.98px) {
  .how-steps {
    --how-circle: 64px;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 520px;
    margin-top: 32px;
  }

  .how-steps__item {
    display: grid;
    grid-template-columns: var(--how-circle) 1fr;
    column-gap: 18px;
    row-gap: 2px;
    align-items: center;
    padding: 0;
    text-align: left;
  }

  .how-steps__item:not(:last-child)::before {
    top: calc(var(--how-circle) + 6px);
    left: calc(var(--how-circle) / 2);
    width: 0;
    height: calc(100% - var(--how-circle) + 24px - 12px);
    border-top: 0;
    border-left: 1.5px solid rgba(0, 97, 160, .22);
  }

  .how-steps__item:not(:last-child)::after { display: none; }

  .how-steps__icon { grid-row: span 2; margin: 0; font-size: 26px; }
  .how-steps__title { align-self: end; }
  .how-steps__text { align-self: start; max-width: none; }
}

.section-intro { max-width: 760px; margin-bottom: 28px; }

.section-intro__lede {
  margin: 12px 0 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink-soft);
}

.choice-grid { align-items: stretch; }

.choice-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--card-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}

.choice-card__title {
  margin: 6px 0 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--navy-deep);
}

.choice-card__text {
  flex: 1 1 auto;
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* scroll-margin clears the sticky header when "Request a valuation" jumps
   here. */
.valuation-panel { margin-top: 48px; scroll-margin-top: 110px; }

@media (max-width: 767.98px) {
  .choice-card { padding: 24px; }
  .how-band { padding-block: 40px 44px; }
  .how-band__title { font-size: 26px; }
}

/* ---------------------------------------------- 07. About page
   The left column is CMS content (admin-edited HTML: h2 + paragraphs), so the
   icon beside each section is drawn from the <h2>'s position rather than
   written into the content. The four icons match today's four sections in
   order (Who we are, Worldwide shipping, How we make money, Why prices are
   not published); a fifth or later section gets the neutral info icon. If
   the About content is ever reordered in the CMS, reorder these to match.
   Codepoints are Bootstrap Icons' own (lib/bootstrap-icons). */
.about-rich {
  --about-icon: 56px;
  --about-gap: 20px;
  padding-left: calc(var(--about-icon) + var(--about-gap));
}

.about-rich h2 {
  position: relative;
  min-height: var(--about-icon);
  margin: 0 0 10px calc(-1 * (var(--about-icon) + var(--about-gap)));
  padding: 14px 0 0 calc(var(--about-icon) + var(--about-gap));
  font-size: 24px;
  letter-spacing: -.02em;
  color: var(--navy-deep);
}

.about-rich h2:not(:first-child) {
  margin-top: 30px;
  padding-top: 44px;
  border-top: 1px solid var(--line);
}

.about-rich h2::before {
  content: "\f431"; /* bi-info-circle: any section past the fourth */
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--about-icon);
  height: var(--about-icon);
  border-radius: 50%;
  background: rgba(0, 97, 160, .09);
  color: var(--navy-deep);
  font-family: bootstrap-icons;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.about-rich h2:not(:first-child)::before { top: 30px; }

.about-rich h2:nth-of-type(1)::before { content: "\f4d0"; } /* bi-people */
.about-rich h2:nth-of-type(2)::before { content: "\f3ef"; } /* bi-globe2 */
.about-rich h2:nth-of-type(3)::before { content: "\f632"; } /* bi-cash-coin */
.about-rich h2:nth-of-type(4)::before { content: "\f52f"; } /* bi-shield-check */

@media (max-width: 575.98px) {
  .about-rich { --about-icon: 44px; --about-gap: 14px; }
  .about-rich h2 { padding-top: 8px; font-size: 21px; }
  .about-rich h2::before { font-size: 19px; }
  .about-rich h2:not(:first-child) { padding-top: 36px; }
  .about-rich h2:not(:first-child)::before { top: 28px; }
}

.glance-card { background: rgba(0, 97, 160, .06); }

.glance-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.glance-card__title .bi { font-size: 20px; color: var(--navy); }

.kv--icons th .bi {
  margin-right: 10px;
  font-size: 16px;
  color: var(--navy);
  vertical-align: -2px;
}

.selling-card .icon-circle { margin-bottom: 12px; }

/* ---------------------------------------------- 06. Quick-links launcher */
.quick-links {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 1060;
}

.quick-links__toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--navy-deep);
  color: var(--yellow);
  /* White ring: over the navy bands (page header, deliveries, footer) a plain navy circle would disappear. */
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 10px 24px rgba(1, 51, 99, .35);
  cursor: pointer;
  transition: transform .2s ease;
}

.quick-links__toggle:hover { transform: scale(1.06); }
.quick-links__toggle:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.quick-links__icon { font-size: 24px; line-height: 1; }
.quick-links__icon--close { display: none; font-size: 20px; }
.quick-links.is-open .quick-links__icon--open { display: none; }
.quick-links.is-open .quick-links__icon--close { display: block; }

.quick-links__panel {
  position: absolute;
  right: 0;
  bottom: 72px;
  width: min(340px, calc(100vw - 40px));
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(1, 51, 99, .22), 0 4px 12px rgba(1, 51, 99, .08);
  transform-origin: bottom right;
  animation: quick-links-pop .2s ease;
}

.quick-links__panel[hidden] { display: none; }

@keyframes quick-links-pop {
  from { opacity: .4; transform: scale(.95) translateY(8px); }
  to { opacity: 1; transform: none; }
}

.quick-links__head {
  padding: 18px 20px;
  background: var(--navy-deep);
  color: #fff;
}

.quick-links__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.quick-links__sub {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .75);
}

.quick-links__list {
  margin: 0;
  padding: 8px;
  list-style: none;
}

.quick-links__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy-deep);
  text-decoration: none;
}

.quick-links__item:hover,
.quick-links__item:focus-visible {
  outline: none;
  background: rgba(0, 97, 160, .08);
  color: var(--navy-deep);
}

.quick-links__chev { margin-left: auto; font-size: 13px; color: var(--ink-soft); }

.quick-links__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 11px 20px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
}

/* On a phone, get out of the way while the on-screen keyboard is up. */
@media (max-width: 767.98px) {
  .quick-links { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .quick-links__toggle { width: 52px; height: 52px; }
  body:has(input:focus, textarea:focus, select:focus) .quick-links:not(.is-open) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .how-steps__icon,
  .choice-card,
  .prod,
  .carousel-arrow,
  .quick-links__toggle { transition: none; }
  .quick-links__panel { animation: none; }
}

.filters {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: none;
}

    .filters::-webkit-scrollbar {
        display: none;
    }

.car-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}