/* ==========================================================================
   AOne Child — aone.css
   Replicates the reference storefront (Astra + Elementor) on GeneratePress.
   Values below are measured from the live reference at 1280x900 / 390x844
   (see ref/geo_*.json). One authoritative sheet; no inline duplicate rules.
   Bump AONE_CHILD_VERSION in functions.php on every change.
   ========================================================================== */

:root {
  --aone-navy:   #0b2341;   /* button / heading accent (ref rgb(11,35,65))   */
  --aone-gold:   #8d721c;   /* filled button (ref rgb(141,114,28))            */
  --aone-gold-l: #8d721c;   /* active nav link — was #d4af37, which is 2.10:1 on white
                               and fails WCAG AA; it also read as an accidental SECOND gold
                               beside the brand gold. The brand gold itself is 4.61:1 and
                               passes, so the active link now just uses it. */
  --aone-slate:  #1e293b;   /* card titles (ref rgb(30,41,59))                */
  --aone-ink:    #1a1a1a;   /* body text                                      */
  --aone-mist:   #f0f5fa;
  --aone-line:   #e6e9ee;
  --aone-container: 1140px;
  --aone-radius: 20px;      /* Elementor kit image radius */
}

/* ---------- Reset / base ------------------------------------------------- */

html, body { overflow-x: hidden; }
body {
  background: #fff;
  color: var(--aone-ink);
  font-family: Lato, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .entry-title {
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  color: var(--aone-ink);
  margin: 0 0 .5em;
  line-height: 1.3;
}
h1 { font-size: 3rem; }
h2 { font-size: 2.65625rem; }        /* 42.5px — ref section headings */
h3 { font-size: 1.5rem; font-family: Montserrat, sans-serif; font-weight: 600; }
h4 { font-size: 1.0625rem; font-family: Montserrat, sans-serif; font-weight: 600; }
p  { margin: 0 0 1rem; }
a  { color: var(--aone-gold); text-decoration: none; }
a:hover { color: var(--aone-navy); }
img { max-width: 100%; height: auto; }

/* ---------- Container ---------------------------------------------------- */

/* Measured model (reference @1280, scrollbar 1265):
   .site / header row  : full 1265, logo at x=35  -> header padding 0 35px
   content blocks      : 1140 centred (x=63..1203) -> .aone-inner
   The hero/tiles/featured bands are full-bleed; their inner text sits at 1140.
   GeneratePress ships a 1200 container with its own padding — replace it. */
.site.grid-container, .site {
  max-width: 1265px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.aone-inner { width: 100%; max-width: var(--aone-container); margin: 0 auto; }
/* Full-bleed band WITHOUT the 100vw trick.
   The old rule was `width:100vw` + `margin:0 calc(50% - 50vw)`. Inside GeneratePress's
   flex row the negative margin made the flex item's size circular, so `.site-main`
   resolved to 0 — every section (hero, tiles, featured grid) collapsed to width:0 and was
   invisible at 360-900px, with the hero text wrapping one character per line (docH 8191px
   at 390px). Above ~920px GP's layout masked it, which is why desktop looked fine.
   The 100vw trick was redundant in the first place: the GP container padding is already
   zeroed above, so the sections are full-bleed by themselves. `min-width:0` on the flex
   items is the standard guard against a flex child refusing to shrink. */
.aone-bleed { width: 100%; margin-left: 0; margin-right: 0; }
.site-content .content-area,
.site-main { width: 100%; flex: 1 1 auto; min-width: 0; }
.site-content, .site-main { padding: 0 !important; margin: 0 !important; }
.content-area { padding: 0 !important; }
.inside-article, .entry-content { padding: 0 !important; margin: 0 !important; }
.separate-containers .inside-article { padding: 0 !important; }
.entry-content > .wp-block-group,
.entry-content > section { margin-top: 0; margin-bottom: 0; }
.site-content .grid-container { padding-left: 0; padding-right: 0; }

/* Kill GeneratePress page-title bands — the reference has none. */
/* GP's page-title band doesn't exist on the reference, so it stays visually hidden — but as
   SCREEN-READER-ONLY rather than display:none. display:none drops the page's h1 out of the
   accessibility tree completely, which left cart/checkout/account/shop with no accessible
   page name at all (an audit found the h1 present in the DOM but reported visible:false).
   The clip pattern keeps the h1 reachable for assistive tech and SEO while occupying no
   space, so the visual design is untouched. Verified: exactly 1 h1 per page, none hidden. */
.page-header, .main-title { display: none !important; }
.entry-header {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%);
}

/* ---------- Header (ref: 82px single row, logo left, nav right) ----------- */

.site-header {
  background: #fff;
  border-bottom: 0;
  box-shadow: none;
}
.site-header .inside-header {
  max-width: 1265px !important;
  padding: 0 35px !important;      /* ref logo x=35 */
  display: flex;
  align-items: center;
  min-height: 82px;
}
.site-logo, .site-branding { margin: 0 !important; padding: 0 !important; }
.site-logo img, .custom-logo {
  width: auto;
  max-height: 44px !important;
  height: auto;
  border-radius: 0;
}
/* logo 80x36 in the ref; our source logo is 237x106 -> height 36 keeps it crisp */
.site-logo img { height: 36px; }

/* nav pushed to the right, exactly like Astra's single-row header */
.main-navigation, #site-navigation, .main-navigation.toggled {
  margin-left: auto !important;
  background: transparent !important;
  width: auto !important;
}
.main-navigation .main-nav ul,
.main-navigation ul.menu {
  display: flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0;
  list-style: none;
}
.main-navigation ul.menu > li > a,
.main-navigation ul.menu > li.menu-item > a {
  display: flex; align-items: center;
  height: 82px;
  padding: 0 1.1rem !important;
  font-family: Inter, sans-serif;
  font-size: 17px !important;
  font-weight: 400;
  color: var(--aone-ink) !important;
  text-transform: none;
  letter-spacing: 0;
  border: 0;
}
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current_page_item > a {
  color: var(--aone-gold-l) !important;
  background: transparent !important;
}

/* account / cart affordances (ref has an account icon at x=1212) */
/* The reference right-aligns the nav (~732-1192) and puts the account icon at the far right,
   x=1212-1230. Here .inside-navigation is space-between with the actions FIRST in source
   order, so they landed at the nav block's LEFT edge (x=680) and the icons floated in the
   middle of the header. Push the whole cluster right, menu first, icons last. */
.inside-navigation { justify-content: flex-end !important; align-items: center; }
.inside-navigation > .aone-header-actions { order: 2; margin-left: 1.1rem; margin-right: 0; }
.inside-navigation > .main-nav { order: 1; }
.aone-header-actions { display: flex; align-items: center; gap: .35rem; }
/* Selector is `.main-navigation .aone-hdr-btn` (0,2,0), NOT a bare `.aone-hdr-btn` (0,1,0):
   GeneratePress ships `.main-navigation a { display: block }` at (0,1,1), which outranked the
   bare selector, so these buttons computed to display:block. align-items:center has no effect
   outside a flex container, so the icon SVG (display:inline, vertical-align:baseline) sat on
   the text baseline at the TOP of the 40px circle — measured ink centre 30.5px against a
   button centre of 41px and a nav-text centre of 41px, i.e. every header icon rode ~10px high
   while the box geometry looked perfectly centred. */
.main-navigation .aone-hdr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--aone-gold); position: relative; line-height: 1;
}
.main-navigation .aone-hdr-btn > svg { display: block; }
.aone-hdr-btn:hover { background: var(--aone-mist); color: var(--aone-navy); }
.aone-cart-count {
  position: absolute; top: 2px; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--aone-navy); color: #fff;
  font: 600 10px/17px Inter, sans-serif; text-align: center;
}
/* GP mobile toggle — hidden on desktop, the only nav affordance on mobile */
.menu-toggle, .mobile-menu-control-wrapper { display: none; }
@media (max-width: 1024px) {
  /* Collapse the menu on mobile. The `display:flex !important` on .main-navigation ul.menu
     above applies at EVERY width, so the hamburger and the full four-link nav were both
     showing at once on a phone (measured 390px: toggle 55x60 visible AND #primary-menu
     320x164 visible). Only one of them may be on screen. GP's own JS still works — it
     toggles .toggled on the nav — it was just never given anything to hide. */
  .main-navigation ul.menu { display: none !important; }
  .main-navigation.toggled ul.menu { display: flex !important; flex-direction: column; }
  .main-navigation.toggled ul.menu > li > a {
    height: auto; padding: .7rem 1rem !important; width: 100%;
  }
  #site-navigation, .main-navigation { width: 100% !important; }
  .menu-toggle, .mobile-menu-control-wrapper {
    display: flex !important; align-items: center; justify-content: center;
    margin-left: auto; background: transparent; border: 0; cursor: pointer;
  }
  /* GP emits the toggle twice — once in #mobile-menu-control-wrapper and once inside
     #site-navigation — and both were showing, giving two stacked hamburgers (measured at
     390px: 320x15 and 320x60, both display:flex). The wrapper's is the squashed 15px one,
     so keep the nav's and drop the wrapper. */
  #mobile-menu-control-wrapper { display: none !important; }
  .main-navigation ul.menu > li > a { height: 56px; padding: 0 .8rem !important; }
  .site-header .inside-header { min-height: 64px; flex-wrap: wrap; }
}

/* ---------- Buttons ------------------------------------------------------ */

.aone-btn, .button, input[type=submit], button[type=submit] {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: Lato, sans-serif; font-weight: 500; font-size: 17px;
  line-height: 1; padding: 12px 20px !important;
  border-radius: 50px !important;
  border: 2px solid var(--aone-gold);
  background: var(--aone-gold); color: #fff !important;
  transition: opacity .18s ease, background .18s ease, color .18s ease;
  text-decoration: none;
}
.aone-btn:hover, .button:hover, input[type=submit]:hover { opacity: .88; }
.aone-btn--ghost, .aone-btn.is-style-outline {
  background: transparent !important; color: #fff !important;
  border: 2px solid #fff !important;
}
.aone-btn--ghost:hover { background: #fff !important; color: var(--aone-navy) !important; }
.aone-btn--dark {
  background: var(--aone-navy) !important; border-color: var(--aone-navy) !important;
  border-radius: 3px !important; font-size: 16px;
}
.aone-btn--outline-dark {
  background: transparent !important; color: var(--aone-ink) !important;
  border: 1px solid var(--aone-ink) !important; font-size: 17px;
}
.aone-btn--outline-dark:hover { background: var(--aone-ink) !important; color: #fff !important; }

/* ---------- Homepage sections (per-section classes + inline rhythm) ------- */

.aone-sec { width: 100%; }
.aone-sec--hero {
  position: relative;
  background-color: var(--aone-navy);   /* fallback behind the slides: never a white flash */
}
/* ---- Hero carousel ----------------------------------------------------------------
   Three stacked layers cross-faded by CSS alone (no JS, no requests beyond the images).
   ::before is generated as the FIRST child, so the slides and the scrim need explicit
   z-indexes or the scrim paints underneath the photographs and the white text loses its
   backing. Order: slides 0 -> scrim 1 -> content 2.
   18s cycle / 6s per slide. Each layer is visible 4%..33% of its own timeline and the
   next starts at 0% exactly when the previous begins fading, so the fades overlap by
   ~0.9s and the banner never fully empties. */
/* Grid, not absolutely-positioned layers. All three slides share ONE cell, so the band is as
   tall as the TALLEST caption and no caption can spill over the section below. Absolutely
   stacked layers cannot do that: nothing is in flow, so the band collapses to the section's own
   padding and a longer caption — which an editor will certainly write, since the slides are
   editable now — just overflows. Measured before this fix: 269px of caption in a 256px band at
   360-414px, spilling 6px. */
.aone-hero-slides { display: grid; }
.aone-hero-slide {
  position: relative;                      /* contains its own ::before scrim */
  grid-area: 1 / 1;                         /* all three stack in the same cell */
  display: flex; align-items: center;
  padding: 14rem 0;
  min-height: 34rem;                       /* a hero stays a hero when the copy is short */
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  opacity: 0;
  /* Longhands only: duration and delay depend on how many slides there are, so they are emitted
     per-request by the shortcode (see the <style id="aone-hero-timing"> it prints). */
  animation-name: aoneHeroFade;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
/* The scrim lives on the slide, not the section: it is then locked to its own photograph and
   fades with it, and it cannot end up painting over a caption. */
.aone-hero-slide::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(13, 20, 26, .66) 0%,
    rgba(13, 20, 26, .62) 58%,
    rgba(13, 20, 26, .30) 80%,
    rgba(13, 20, 26, .12) 100%);
}
.aone-hero-cap { position: relative; z-index: 1; }
/* @keyframes aoneHeroFade lives in the <style id="aone-hero-timing"> the shortcode prints —
   its percentage stops move with the number of slides. */
/* The scrim now lives on .aone-hero-slide (see the carousel block above) so it is locked to its
   own photograph and fades with it — and so it cannot paint over a caption. */
.aone-sec--hero .aone-inner { position: relative; z-index: 2; width: 100%; max-width: var(--aone-container); margin: 0 auto; }
.aone-eyebrow {
  font-family: Montserrat, sans-serif;
  font-size: .875rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--aone-ink); margin: 0 0 .6rem;
}
.aone-sec--hero .aone-eyebrow {
  font-family: Roboto, sans-serif; font-size: 1rem; font-weight: 400;
  letter-spacing: .12em; color: #fff;
}
/* Only slide 1 carries an <h1> (three h1s would wreck the outline), so slides 2-3 use a <p>
   and must state Manrope/700 themselves — inherited from the h1 rule they would render in
   Lato, and slide 1 would visibly differ from slides 2 and 3. */
.aone-sec--hero h1, .aone-sec--hero .aone-hero-title {
  color: #fff !important; font-size: 3.1875rem !important;   /* 51px */
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 700; line-height: 1.3; margin: 0 0 1rem; max-width: 46rem;
}
/* Was `.aone-sec--hero p, ...`: the bare `p` also matched p.aone-hero-title and fought the rule
   above. The eyebrow and the sub each carry their own class, so scope it to those. */
.aone-sec--hero .aone-hero-sub {
  color: #fff; font-family: Lato, sans-serif; font-weight: 400;
  font-size: 1rem; max-width: 36rem; margin: 0 0 1.75rem;
}
.aone-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---- Carousel position dots ---------------------------------------------------------
   One dot per slide. They animate on the SAME keyframes timeline as the slides, so they cannot
   drift out of step. Deliberately indicators, not controls: a clickable dot would need its own
   state machine to stay in sync with a CSS animation. They also take over the job the removed
   pause button had of telling you how many slides exist and where you are in the rotation. */
.aone-hero-dots {
  position: absolute; z-index: 4; left: 50%; transform: translateX(-50%);
  bottom: 1.25rem; display: flex; gap: .5rem;
  /* ponytail: white dots over an arbitrary photo need a ring to stay visible on light areas. */
  filter: drop-shadow(0 0 2px rgba(13, 20, 26, .8));
}
.aone-hero-dot {
  width: .5rem; height: .5rem; border-radius: 50%; background: #fff; opacity: .4;
  animation-name: aoneHeroDot;      /* duration + delay come from <style id="aone-hero-timing"> */
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
/* @media prefers-reduced-motion: the real block lives further down with the rest. */

/* ---- Carousel manual controls ------------------------------------------------------
   44px so they meet the minimum touch target, and 72% navy so the white glyph keeps its
   contrast over ANY photograph: composited over a pure-white pixel that is #515151,
   ~7.9:1, well clear of the 4.5:1 the glyph needs. A lighter disc would fail on the
   bright product shots. */
.aone-hero-nav {
  position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1; color: #fff;
  background: rgba(13, 20, 26, .72); border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.aone-hero-nav:hover { background: rgba(13, 20, 26, .88); border-color: #fff; }
.aone-hero-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-color: #fff; }
.aone-hero-nav--prev { left: 0; }
.aone-hero-nav--next { right: 0; }
/* Below 1300px the hero copy is gutter-flush at 1.25rem — the same offset as a mid-height arrow,
   so vertically-centred arrows land straight on top of the headline (measured: -44px overlap at
   1024 and 768). Under that width they drop to the foot of the band, flanking the dots, where the
   only thing behind them is the scrim. Verified collision-free from 360 to 1920. */
@media (max-width: 1299px) {
  .aone-hero-nav { top: auto; bottom: .75rem; transform: none; }
  .aone-hero-nav--prev { left: .75rem; }
  .aone-hero-nav--next { right: .75rem; }
}

/* "Shop With Confidence" heading band */
.aone-sec--tiles { padding: 5rem 0; }
.aone-sec--tiles .aone-head { text-align: center; margin: 0 0 3rem; }
.aone-sec--tiles h2 { margin: 0; }

/* one large tile + two stacked */
.aone-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 247px;
  gap: 20px;
}
.aone-tile {
  position: relative;
  border-radius: var(--aone-radius);
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  color: #fff;
}
.aone-tile--tall { grid-row: span 2; }
.aone-tile::before {                /* bottom-up gradient for text legibility */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.62) 100%);
  transition: opacity .2s ease;
}
.aone-tile > * { position: relative; z-index: 2; }
.aone-tile h3 { color: #fff !important; font-size: 1.5rem; margin: 0 0 .35rem; }
.aone-tile p  { color: #fff; font-size: 1rem; font-weight: 300; margin: 0 0 1rem; max-width: 30rem; }
.aone-tile .aone-btn { align-self: flex-start; font-size: 16px; padding: 10px 20px !important; }
.aone-tile--tall { padding: 2rem; }

/* ---- Tile backgrounds ---------------------------------------------------------------
   Real photographs now, set inline per tile by deploy/20-setup-site.php. They replaced the
   synthetic CSS gradients that used to live here: the gradients were chosen back when the
   only alternatives were JPEGs (a flat gradient bands under JPEG, so dithering grain was
   added and the grain WAS the file size — hcdn served 340 KB for three tiles). That tradeoff
   no longer applies once the art is genuinely photographic: a photograph is what the page
   was supposed to show, it belongs in a JPEG, and it reads as a real product rather than
   as decoration. The rules below are only a mid-tone fallback so a tile cannot flash white
   before its image paints; .aone-tile above already sets background-size/position. */
.aone-tile--stationery,
.aone-tile--executive,
.aone-tile--office { background-color: #28221b; background-repeat: no-repeat; }

/* About-page banner — same treatment, sized by aspect-ratio so it needs no asset. */
/* About-page banner. Was a synthetic gradient, which never rendered: `.aone-figure` below set
   the `background` SHORTHAND, and a shorthand resets background-image to none — at equal
   specificity (0,1,0) the later rule wins, so the gradients declared here were dead and the
   banner shipped as a flat empty #f0f5fa box. It is a real photograph now, and the shorthand
   that clobbered it has been narrowed to background-color so this cannot recur.
   The aspect-ratio stays as a layout guard: it reserves the box before the image loads (CLS). */
.aone-figure--hero { aspect-ratio: 16 / 7; }

@media (max-width: 700px) {
  .aone-tile--tall { grid-row: span 1; }
  .aone-tile { padding: 1.5rem; }
  .aone-tile h3 { font-size: 1.25rem; }
  .aone-figure--hero { aspect-ratio: 4 / 3; }
}
/* Content gutter on small screens. GP's container padding is zeroed globally above so the
   .aone-bleed bands can run edge-to-edge; those pages then get their gutter from
   .aone-inner. Every OTHER page — WC shop/archives/PDP, cart, checkout, about, corporate,
   the policy pages — uses neither, so without this their content sits flush against the
   screen edge (measured at 390px: product cards left=0, price text starting at x=0), and
   the text-based pages lose their side margin too. Selector keys off the real difference:
   does this page contain a full-bleed band? */
/* Breakpoint is 1300px, not 1140px: the container max-width is 1265px, so at a 1280px
   viewport (1265px once the scrollbar is subtracted) the container filled the screen exactly
   and the WC grid sat flush against BOTH edges — and 1280 is a very common desktop width.
   Above 1300 the container is centred in the viewport and provides its own gutter. */
@media (max-width: 1300px) {
  .aone-inner { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  /* !important is required: the GP container reset above sets `padding:0 !important`. */
  .site-main:not(:has(.aone-bleed)) { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  /* Corporate Solutions has BOTH: a full-bleed banner (which manages its own gutter via
     .aone-inner above) and a contained .aone-page body. The selector above sees the band and
     drops the page's gutter, so the body below ran flush to both screen edges — measured
     left=0 at 390/768/1024 where earlier cycles measured 20px. It also left banner text
     (x=83) and body text (x=63) 20px out of alignment at 1280.
     The real requirement is per-element, not per-page: a contained body needs its own gutter
     whenever the page above it is bleed. Keyed on both conditions so the About page, which
     has no band and already gets .site-main's gutter, is untouched (no double gutter). */
  .site-main:has(.aone-bleed) .aone-page { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ---- Shop filter bar ------------------------------------------------------------- */
.aone-shop-filters {
  display: grid; grid-template-columns: 1.5fr 1fr 1.4fr; gap: 1.25rem;
  align-items: start; margin: 0 0 1.75rem; padding: 1.1rem 1.35rem;
  background: var(--aone-mist); border: 1px solid var(--aone-line); border-radius: 12px;
}
.aone-filter__t {
  margin: 0 0 .45rem; font: 600 .75rem/1 Montserrat, sans-serif;
  letter-spacing: .07em; text-transform: uppercase; color: var(--aone-navy);
}
/* No button in the search row — it applies itself (JS in functions.php). Block, not flex, so
   the field keeps the full width now that nothing sits beside it. */
.aone-filter .woocommerce-product-search { display: block; }
.aone-filter .woocommerce-product-search .search-field { width: 100%; }
/* Every control is one 44px row of the same shape. The select2 replacement box defaulted to
   24px tall against 44px inputs, which is what made the Categories box look broken. */
.aone-filter .search-field,
.aone-filter input[type="text"],
.aone-filter input[type="search"],
.aone-filter select,
.aone-filter .select2-container .select2-selection--single {
  height: 44px; padding: 0 .7rem; border: 1px solid var(--aone-line);
  border-radius: 6px; background: #fff; font-size: .95rem; color: var(--aone-ink);
  display: flex; align-items: center; box-sizing: border-box;
}
.aone-filter .search-field, .aone-filter input[type="text"], .aone-filter input[type="search"] { width: 100%; }
.aone-filter .select2-container { width: 100% !important; }
.aone-filter .select2-selection--single .select2-selection__rendered {
  line-height: 1; padding: 0; color: var(--aone-ink); font-size: .95rem;
}
.aone-filter .select2-selection--single .select2-selection__arrow { height: 42px; right: .35rem; }
/* Kill select2's default offset focus ring, which read as a stray blue border. */
.aone-filter .select2-container--default.select2-container--focus .select2-selection--single,
.aone-filter .select2-container--default.select2-container--open .select2-selection--single,
.aone-filter .select2-container .select2-selection--single:focus {
  outline: none; border-color: var(--aone-gold); box-shadow: 0 0 0 3px rgba(141, 114, 28, .15);
}

/* jQuery UI ships no stylesheet in this build, so .ui-slider computed to height:0 and both
   handles to 0x0 — the price control rendered as two stray bars with no track at all.
   margin-top is tuned so the track sits on the same centreline as the other inputs. */
.aone-filter .price_slider_wrapper { margin-top: 0; }
.aone-filter .ui-slider {
  position: relative; height: 6px; border: 0; border-radius: 3px;
  /* #7f8a96 = 3.20:1 against the #f0f5fa panel. The previous var(--aone-line) was
     #e6e9ee = 1.11:1, which fails WCAG 1.4.11 (non-text UI needs 3:1) — the unfilled
     rail was only faintly discernible once a range was selected. */
  background: #7f8a96; margin: 1.2rem .6rem .9rem;
}
.aone-filter .ui-slider .ui-slider-range {
  position: absolute; height: 100%; border: 0; border-radius: 3px; background: var(--aone-gold);
}
.aone-filter .ui-slider .ui-slider-handle {
  position: absolute; top: -6px; width: 18px; height: 18px; margin-left: -9px;
  border: 2px solid var(--aone-gold); border-radius: 50%; background: #fff; cursor: ew-resize;
}
.aone-filter .ui-slider .ui-slider-handle:focus { outline: 2px solid var(--aone-gold); outline-offset: 2px; }
.aone-filter .price_slider_amount {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
/* WooCommerce emits the button BEFORE the price label; force label-left / button-right so
   this column reads the same way round as Search (control, then action). */
.aone-filter .price_slider_amount .price_label { order: 1; margin: 0; font-size: .9rem; color: var(--aone-ink); }
/* Auto-apply: the search and price submit buttons are hidden and JS submits the form instead
   (wp_footer block in functions.php). Search keeps native Enter-to-submit, so the form is
   still operable with JS off; the price slider needs JS to exist at all. */
.aone-filter button.button, .aone-filter .price_slider_wrapper .button,
.aone-filter .woocommerce-product-search button {
  display: none !important;
}
/* The price label then has the row to itself. */
.aone-filter .price_slider_amount { justify-content: flex-start; }
@media (max-width: 860px) {
  .aone-shop-filters { grid-template-columns: 1fr; gap: 1rem; }
}

/* Featured Essentials */
.aone-sec--featured { padding: 2.25rem 0 2.25rem; }
.aone-sec--featured h2 { text-align: center; margin: 0 0 2rem; }
.aone-sec--featured .aone-after { text-align: center; margin-top: 2.5rem; }

/* ---------- WooCommerce loop (grid, cards) ------------------------------- */

/* WC's classic loop floats; inside a block group that collapses the container.
   Force a real grid so paddings/rhythm actually apply and cards never overlap. */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  clear: both;
}
ul.products::before, ul.products::after { display: none !important; content: none !important; }
ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff;
  display: flex;
  flex-direction: column;
}
ul.products li.product .woocommerce-loop-product__link { display: block; text-decoration: none; }
ul.products li.product img,
ul.products li.product .attachment-woocommerce_thumbnail {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 0; background: var(--aone-mist);
  margin: 0;
}
/* card internals, matching the ref card order: img / title / price / button */
ul.products li.product .woocommerce-loop-product__title {
  font-family: Montserrat, sans-serif; font-size: 1.0625rem; font-weight: 600;
  color: var(--aone-slate); line-height: 1.3;
  padding: 14px 0 4px; margin: 0;
}
ul.products li.product .price {
  font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 500;
  color: var(--aone-ink); margin: 0 0 12px;
}
ul.products li.product .price del { opacity: .5; margin-right: .35rem; }
ul.products li.product .price ins { text-decoration: none; }
ul.products li.product .button,
ul.products li.product .added_to_cart {
  margin-top: auto;
  align-self: flex-start;
  background: var(--aone-navy) !important; border: 0 !important;
  color: #fff !important; border-radius: 3px !important;
  font-size: 16px; font-weight: 400; padding: 10px 20px !important;
}
ul.products li.product .button:hover { background: #102f55 !important; }
/* OUT OF STOCK ribbon — WC renders <p class="stock out-of-stock"> inside the link */
ul.products li.product .woocommerce-loop-product__link { position: relative; }
ul.products li.product .stock.out-of-stock {
  position: absolute; left: 0; bottom: 0;
  background: #fff; color: var(--aone-ink);
  font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 12px; margin: 0;
}
.woocommerce ul.products li.product .onsale {
  position: absolute; top: 12px; left: 12px;
  background: var(--aone-gold); color: #fff; border-radius: 3px;
  font: 600 12px/1 Montserrat, sans-serif; letter-spacing: .06em;
  text-transform: uppercase; padding: 6px 10px; min-height: 0;
}

/* ---------- Shop archive (left sidebar: search / price / categories) ----- */

body.woocommerce-shop .site-main,
body.post-type-archive-product .site-main,
body.tax-product_cat .site-main { display: block; }

#primary.content-area { display: flex; gap: 30px; align-items: flex-start; }
#main.site-main { flex: 1 1 auto; min-width: 0; }
#secondary.widget-area {
  flex: 0 0 250px; width: 250px; order: -1;
  background: transparent; padding: 0; border: 0;
}
#secondary .widget {
  background: #fff; border: 1px solid var(--aone-line); border-radius: 4px;
  padding: 18px; margin: 0 0 20px;
}
#secondary .widget-title,
#secondary .wp-block-heading {
  font-family: Montserrat, sans-serif; font-size: 1rem; font-weight: 600;
  color: var(--aone-slate); margin: 0 0 12px; padding: 0;
  border: 0; background: transparent;
}
#secondary ul { list-style: none; margin: 0; padding: 0; }
#secondary li { padding: 5px 0; font-size: .9375rem; }
#secondary li a { color: var(--aone-ink); }
#secondary li a:hover { color: var(--aone-gold); }
#secondary .count { color: #8a93a0; }
#secondary select, #secondary input[type=text], #secondary input[type=search] {
  width: 100%; border: 1px solid #cfd6de; border-radius: 4px;
  padding: 8px 10px; font-size: .9375rem;
}
.widget_price_filter .price_slider_wrapper { padding-top: .5rem; }
.widget_price_filter .ui-slider .ui-slider-range,
.widget_price_filter .ui-slider .ui-slider-handle { background: var(--aone-gold); }
.widget_price_filter .price_slider_amount .button { padding: 8px 14px !important; font-size: .875rem; border-radius: 4px !important; }
.widget_product_search button { border-radius: 4px !important; padding: 9px 14px !important; margin-top: 6px; }

/* count + sort row */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-result-count,
.woocommerce-ordering { margin: 0 0 18px; }
.woocommerce-result-count { float: left; font-size: .9375rem; color: var(--aone-ink); }
.woocommerce-ordering { float: right; }
.woocommerce-ordering select {
  border: 1px solid #cfd6de; border-radius: 4px; padding: 8px 12px;
  font-family: Lato, sans-serif; font-size: .9375rem; background: #fff;
}
/* Same reasoning as .entry-header above — keep the archive's h1 reachable instead of
   display:none, so /shop/ and the category archives have an accessible page name. */
.woocommerce-products-header {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%);
}
nav.woocommerce-pagination { margin: 2.5rem 0 0; }
nav.woocommerce-pagination ul { display: flex; gap: 6px; justify-content: center; border: 0; margin: 0; padding: 0; }
nav.woocommerce-pagination ul li { border: 0; }
nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--aone-line); border-radius: 4px; color: var(--aone-ink);
}
nav.woocommerce-pagination ul li span.current { background: var(--aone-navy); color: #fff; border-color: var(--aone-navy); }

/* archive gets no add-to-cart button on out-of-stock (WC already omits it) */

/* ---------- Single product ------------------------------------------------ */

.single-product div.product {
  display: grid;
  grid-template-columns: 613px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.single-product div.product .woocommerce-product-gallery {
  width: 100% !important; float: none !important; margin: 0 !important;
  border-radius: var(--aone-radius); overflow: hidden; background: var(--aone-mist);
}
.single-product div.product .summary {
  width: 100% !important; float: none !important; margin: 0 !important;
}
.single-product .woocommerce-breadcrumb {
  font-size: .875rem; color: #6b7280; margin: 0 0 .75rem;
}
.single-product .woocommerce-breadcrumb a { color: #6b7280; }
.single-product .single-product-category a {
  display: inline-block; font-size: .8125rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--aone-gold);
}
.single-product h1.product_title.entry-title {
  display: block !important;                      /* GP hides .entry-title; the PDP needs it */
  font-family: Montserrat, sans-serif; font-size: 20px; font-weight: 600;
  color: var(--aone-slate); margin: .35rem 0 .75rem;
}
.single-product .summary .price {
  font-family: Manrope, sans-serif; font-size: 1.75rem; font-weight: 700;
  color: var(--aone-navy); margin: 0 0 1rem;
}
.single-product .summary .price del { opacity: .45; font-size: 1.1rem; margin-right: .5rem; }
.single-product .summary .price ins { text-decoration: none; }
.single-product .summary .stock.in-stock { color: #1e7a45; font-weight: 600; }
.single-product .summary .stock.out-of-stock { color: #b3261e; font-weight: 600; }
.single-product .product_meta { font-size: .9375rem; color: #4b5563; margin: 1rem 0; }
.single-product .product_meta .sku { color: var(--aone-ink); font-weight: 600; }
.single-product form.cart { margin: 1.25rem 0; display: flex; gap: 12px; align-items: center; }
.single-product .quantity input.qty {
  width: 72px; height: 46px; border: 1px solid #cfd6de; border-radius: 4px;
  text-align: center; font-size: 1rem;
}
.single-product .single_add_to_cart_button {
  background: #fff !important; color: var(--aone-navy) !important;
  border: 1px solid var(--aone-navy) !important; border-radius: 4px !important;
  font-size: 1rem; font-weight: 600; padding: 12px 28px !important;
}
.single-product .single_add_to_cart_button:hover { background: var(--aone-navy) !important; color: #fff !important; }
.single-product .single_add_to_cart_button.disabled { opacity: .45; }
/* gallery: vertical thumbnail rail like the reference */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex; flex-direction: column; gap: 8px;
  position: absolute; top: 0; left: 0; width: 72px; margin: 0;
}
.single-product .woocommerce-product-gallery { position: relative; padding-left: 84px !important; }
.single-product .woocommerce-product-gallery .flex-viewport { border-radius: var(--aone-radius); overflow: hidden; }
.single-product .woocommerce-product-gallery .flex-control-thumbs img { border-radius: 6px; }

/* tabs */
.single-product .woocommerce-tabs { margin: 3.5rem 0 0; }
.single-product .woocommerce-tabs ul.tabs { display: flex; gap: 26px; padding: 0; margin: 0 0 1.5rem; border-bottom: 1px solid var(--aone-line); }
.single-product .woocommerce-tabs ul.tabs::before { display: none; }
.single-product .woocommerce-tabs ul.tabs li {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; margin: 0 !important; padding: 0 !important;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.single-product .woocommerce-tabs ul.tabs li a {
  font-family: Montserrat, sans-serif; font-size: 1rem; font-weight: 600;
  color: var(--aone-slate); padding: 12px 0; display: block;
}
.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--aone-gold); box-shadow: inset 0 -2px 0 var(--aone-gold); }
.single-product .woocommerce-tabs .panel { font-size: 1rem; color: #333; }

/* related — 4 across */
.single-product .related.products, .single-product .upsells.products { margin-top: 3.5rem; clear: both; }
.single-product .related.products > h2, .single-product .upsells.products > h2 {
  font-family: Montserrat, sans-serif; font-size: 2.5rem; font-weight: 700;
  color: var(--aone-slate); margin: 0 0 1.5rem;
}

/* ---------- Cart / checkout / account ------------------------------------ */

/* Vertical rhythm only — using the `padding` SHORTHAND here would also zero the
   horizontal padding, and because this rule sits later in the file at equal specificity it
   silently beat the mobile gutter rule, leaving cart/checkout content flush to the screen
   edge while /shop/ was fine. Longhands only. */
.woocommerce-cart .site-main, .woocommerce-checkout .site-main, .woocommerce-account .site-main {
  padding-top: 3rem !important; padding-bottom: 3rem !important;
}
.woocommerce table.shop_table { border: 1px solid var(--aone-line); border-radius: 4px; }
.woocommerce table.shop_table th { background: var(--aone-mist); font-family: Montserrat, sans-serif; font-size: .875rem; }
.woocommerce-cart .cart_totals h2, .woocommerce-checkout h3 {
  font-family: Montserrat, sans-serif; font-size: 1.25rem; font-weight: 600; color: var(--aone-slate);
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #place_order {
  background: var(--aone-gold) !important; color: #fff !important;
  border-radius: 50px !important; border: 0 !important; font-weight: 500; padding: 13px 28px !important;
}
.woocommerce-checkout .col2-set, .woocommerce-checkout #order_review_heading { width: 100%; }

/* ---------- Static pages (Corporate / About) ------------------------------ */

.aone-page { max-width: var(--aone-container); margin: 0 auto; padding: 3rem 0; }
.aone-page h1, .aone-page h2 { margin-top: 0; }
/* The reference (and the first build) opened these pages with an h2, leaving the document
   with no h1 at all — bad for both a11y and SEO. Promoted to h1 but pinned to the h2 size
   (42.5px vs the 48px default) so the pages look exactly as they did. */
.aone-page-title { font-size: 2.65625rem; }
.aone-figure {
  border-radius: var(--aone-radius); overflow: hidden;
  margin: 0 0 2.5rem;
  /* background-COLOR, not the `background` shorthand: the shorthand resets background-image
     to none, which silently killed the hero banner's gradient variant (see .aone-figure--hero). */
  background-color: var(--aone-mist);
}
.aone-figure img { width: 100%; display: block; border-radius: var(--aone-radius); }
.aone-imgrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 2.5rem 0; }
.aone-imgrow img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--aone-radius); }
.aone-prose { font-size: 1rem; color: #2b2f36; }
.aone-prose p { margin: 0 0 1.15rem; }

/* ---------- Corporate Solutions page ------------------------------------
   The banner is a full-bleed navy gradient rather than a photo: zero bytes, never bands,
   sharp at any DPR, no licensing question — and it reads as "corporate" next to the photo
   hero on the home page. It carries the page h1 and the primary CTA, so the quote form is
   one click from the top instead of ~2,000px down. */
.aone-corp-hero {
  background: linear-gradient(135deg, #0b2341 0%, #12335c 58%, #0b2341 100%);
  color: #fff; padding: 4.5rem 0 3.5rem; position: relative; overflow: hidden;
}
/* soft gold glow, no image */
.aone-corp-hero::after {
  content: ""; position: absolute; inset: -30% -10% auto auto; width: 46rem; height: 46rem;
  background: radial-gradient(circle, rgba(141,114,28,.34) 0%, rgba(141,114,28,0) 62%);
  pointer-events: none;
}
.aone-corp-hero .aone-inner { position: relative; z-index: 1; }
/* .aone-eyebrow is dark ink by default — invisible on navy. */
.aone-corp-hero .aone-eyebrow {
  color: #e6c766; margin: 0 0 .7rem;
  font-family: Montserrat, sans-serif; font-size: .875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.aone-corp-hero__t { color: #fff; margin: 0 0 .85rem; max-width: 40rem; }
.aone-corp-hero__sub {
  color: rgba(255,255,255,.86); font-family: Lato, sans-serif;
  font-size: 1.0625rem; line-height: 1.6; max-width: 44rem; margin: 0 0 1.75rem;
}
.aone-corp-hero .aone-hero-actions { margin-bottom: 2.25rem; }
.aone-corp-hero__stats {
  display: flex; flex-wrap: wrap; gap: 0 3rem; list-style: none; padding: 1.5rem 0 0; margin: 0;
  border-top: 1px solid rgba(255,255,255,.18);
}
.aone-corp-hero__stats li { display: flex; flex-direction: column; }
.aone-corp-hero__stats strong {
  font-family: Montserrat, sans-serif; font-size: 1.6rem; font-weight: 700; color: #fff;
  line-height: 1.15;
}
.aone-corp-hero__stats span { font-size: .8125rem; color: rgba(255,255,255,.72); }

/* The anchor target sits under a sticky header — keep the heading clear of it. */
.aone-page h2[id] { scroll-margin-top: 6rem; }

/* --- What we supply: link cards, not a flat list ------------------------- */
.aone-supplies {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px;
}
.aone-supplies a {
  display: flex; flex-direction: column; height: 100%; box-sizing: border-box;
  padding: 1.05rem 1.15rem 1.2rem; background: #fff;
  border: 1px solid var(--aone-line); border-radius: 14px; text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.aone-supplies a:hover, .aone-supplies a:focus-visible {
  border-color: var(--aone-gold);
  box-shadow: 0 10px 26px rgba(11,35,65,.09);
  transform: translateY(-2px);
}
.aone-supplies__n {
  align-self: flex-start; margin-bottom: .7rem; padding: .3rem .55rem; border-radius: 999px;
  background: rgba(141,114,28,.10); color: #6f5a16;   /* 5.91:1 on the tinted pill */
  font: 700 .6875rem/1 Montserrat, sans-serif; letter-spacing: .05em; text-transform: uppercase;
}
.aone-supplies__name { display: block; font-weight: 700; font-size: 1rem; color: var(--aone-navy); }
.aone-supplies__d { display: block; font-size: .875rem; line-height: 1.45; color: #5b6470; margin-top: .3rem; }
/* Full-width closing cell: closes the ragged last row and adds a mid-page route to the shop. */
.aone-supplies li.aone-supplies__all { grid-column: 1 / -1; }
.aone-supplies li.aone-supplies__all a {
  background: var(--aone-navy); border-color: var(--aone-navy); padding: 1.15rem 1.35rem;
}
.aone-supplies li.aone-supplies__all a:hover,
.aone-supplies li.aone-supplies__all a:focus-visible { border-color: var(--aone-gold); }
.aone-supplies li.aone-supplies__all .aone-supplies__name { color: #fff; font-size: 1.0625rem; }
.aone-supplies li.aone-supplies__all .aone-supplies__d { color: rgba(255,255,255,.78); }

/* --- audience chips ------------------------------------------------------ */
.aone-chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.aone-chips li {
  background: var(--aone-mist); border: 1px solid var(--aone-line); border-radius: 999px;
  padding: .5rem .95rem; font-size: .9rem; color: #2b2f36;
}

/* --- highlighted "not in the catalogue" note ----------------------------- */
.aone-callout {
  background: var(--aone-mist); border-left: 3px solid var(--aone-gold);
  border-radius: 10px; padding: 1.05rem 1.2rem; margin: 0 0 1.75rem;
}
.aone-callout p { margin: 0; font-size: .95rem; line-height: 1.6; color: #2b2f36; }
.aone-callout strong { color: var(--aone-navy); }

/* --- 3-step ordering flow ----------------------------------------------- */
.aone-steps {
  counter-reset: aone-step; list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem;
}
.aone-steps li {
  counter-increment: aone-step;
  background: #fff; border: 1px solid var(--aone-line); border-radius: 14px;
  padding: 1.25rem 1.25rem 1.35rem; font-size: .95rem; color: #2b2f36;
}
.aone-steps li::before {
  content: counter(aone-step);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: .7rem;
  background: var(--aone-gold); color: #fff;
  font: 700 .9rem/1 Montserrat, sans-serif;
}
.aone-steps li strong { color: var(--aone-navy); }

/* --- "Why teams consolidate" cards (share the steps card treatment) ----- */
.aone-cards {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem;
}
.aone-cards li {
  background: #fff; border: 1px solid var(--aone-line); border-radius: 14px;
  border-top: 3px solid var(--aone-gold); padding: 1.25rem 1.25rem 1.35rem;
}
.aone-cards h3 { margin: 0 0 .4rem; font-size: 1rem; color: var(--aone-navy); }
.aone-cards p { margin: 0; font-size: .925rem; line-height: 1.55; color: #4b5563; }

@media (prefers-reduced-motion: reduce) {
  .aone-supplies a { transition: none; }
  .aone-supplies a:hover, .aone-supplies a:focus-visible { transform: none; }
  /* No rotation: pin the first hero slide and drop the other layers entirely. Without the
     `display:none` the hidden slides still animate (harmlessly invisible) and, worse, a
     user with reduced-motion set would still have the page's largest element repainting. */
  .aone-hero-slide { animation: none; opacity: 0; }
  .aone-hero-slide:nth-child(1) { opacity: 1; }
  /* The dots are a position indicator for a rotation that is no longer happening, so they go
     with it — and the first dot would otherwise sit there permanently lit and meaningless. */
  .aone-hero-dots { display: none; }
}

/* ---------- Enquiry form (Corporate Solutions) ---------------------------
   The previous selector was `.aone-form form input[...]` — it required a <form> *nested inside*
   .aone-form, which the markup never had (the form element carries .aone-form itself). So the
   rule matched nothing and every field fell back to the theme/browser default: transparent
   background, 1px #f0f0f0 border (~1.05:1 — effectively invisible) and square corners. That
   is what "bland" was: unstyled, not under-designed.
   Now: a real card surface, visible field affordance, brand focus ring, two columns on
   desktop, full-width primary action. */
.aone-form {
  display: grid; grid-template-columns: 1fr; gap: 1.05rem 1.25rem;
  max-width: 760px; margin: 1.75rem 0 0; padding: 2rem;
  background: #fff; border: 1px solid var(--aone-line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(11,35,65,.04), 0 14px 34px rgba(11,35,65,.07);
}
.aone-form > p { margin: 0; }
.aone-form label {
  display: block; margin-bottom: .4rem;
  font: 600 .75rem/1.2 Montserrat, sans-serif;
  letter-spacing: .07em; text-transform: uppercase; color: var(--aone-navy);
}
.aone-form input[type=text], .aone-form input[type=email], .aone-form input[type=tel],
.aone-form textarea {
  width: 100%; padding: .78rem .9rem; font: inherit; font-size: 1rem; color: var(--aone-ink);
  /* #848c9a is 3.39:1 on white — WCAG 1.4.11 wants 3:1 for a field boundary, and my first
     pass at a "soft" border (#cfd4dd) measured 1.49:1, i.e. still effectively invisible. */
  background: #fbfbfa; border: 1px solid #848c9a; border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.aone-form input::placeholder, .aone-form textarea::placeholder {
  color: #6b7280; opacity: 1;   /* 4.67:1 on #fbfbfa; opacity:1 stops Firefox dimming it */
}
.aone-form input[type=text]:hover, .aone-form input[type=email]:hover,
.aone-form input[type=tel]:hover, .aone-form textarea:hover { border-color: #767f8d; }  /* 4.05:1 — hover darkens */
/* :focus-visible rings are gold-on-white at 4.61:1 and never rely on colour alone. */
.aone-form input:focus, .aone-form textarea:focus {
  outline: none; background: #fff; border-color: var(--aone-gold);
  box-shadow: 0 0 0 3px rgba(141,114,28,.16);
}
.aone-form textarea { min-height: 150px; resize: vertical; }

@media (min-width: 720px) {
  .aone-form { grid-template-columns: 1fr 1fr; }
  /* The long field and the action span the full width; the four short fields pair up. */
  .aone-form > p:has(textarea), .aone-form > p:has(button) { grid-column: 1 / -1; }
}
.aone-form .aone-btn {
  width: 100%; min-height: 52px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--aone-gold); color: #fff !important;
  font: 600 .95rem/1 Montserrat, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  transition: background .15s ease, transform .06s ease;
}
.aone-form .aone-btn:hover { background: #6f5a16; }
.aone-form .aone-btn:active { transform: translateY(1px); }
.aone-notice { border-radius: 10px; padding: .85rem 1rem; margin: 0 0 1.25rem; font-size: .95rem; }
.aone-notice--ok  { background: #eef7ee; border: 1px solid #bfe0bf; color: #1f5231; }
.aone-notice--err { background: #fdf1f1; border: 1px solid #e9c3c3; color: #7a2222; }

/* ---------- Footer (ref: 125px, one row) ---------------------------------- */

.site-footer, .site-info {
  background: #fff; border-top: 1px solid var(--aone-line);
  padding: 0; margin: 0;
}
.site-footer .inside-site-info,
.site-footer .grid-container {
  max-width: var(--aone-container) !important;
  min-height: 124px; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0 !important; font-size: .875rem; color: #4b5563;
}
/* The social icons are a widget now (Appearance > Widgets > Footer Bar). GP renders that area
   in .footer-bar, immediately BEFORE .copyright-bar, inside the already-flex .inside-site-info —
   which gives the row its second child, so `space-between` finally does its job: icons left,
   copyright right. Core's block styles are overridden down to the theme palette. */
.footer-bar { display: flex; align-items: center; }
.footer-bar .wp-block-social-links { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; }
.footer-bar .wp-block-social-links .wp-block-social-link { margin: 0; }
/* Core's default social-links style paints each icon as a brand-coloured filled disc with a white
   glyph (facebook = #0866ff, border-radius 9999px) — on this white bar that read as four solid
   dots, nothing like the bare navy glyphs the design calls for. The `:where()` wrapper in core's
   rule means it carries only 0,1,0, so these win without needing !important, and the owner can
   still switch the block style in the editor if they actually want the discs. Note `color` goes
   on the <li>, not the anchor: the anchor is `color: currentcolor` and the glyph is
   `fill: currentColor`, so the li is the only place that propagates to both. */
.footer-bar .wp-block-social-links .wp-social-link { background-color: transparent; border-radius: 0; }
.footer-bar .wp-block-social-links .wp-social-link,
.footer-bar .wp-block-social-links .wp-block-social-link-anchor { color: var(--aone-navy); }
.footer-bar .wp-block-social-links .wp-social-link:hover,
.footer-bar .wp-block-social-links .wp-social-link:focus-within { color: var(--aone-gold); }
.footer-bar .wp-block-social-links .wp-block-social-link-anchor { padding: 0; }
.footer-bar .wp-block-social-links .wp-block-social-link-anchor svg { width: 18px; height: 18px; }
.copyright-bar .aone-group { margin-left: 1.5rem; }
@media (max-width: 768px) {
  .site-footer .inside-site-info { flex-direction: column; justify-content: center; text-align: center; padding: 1.5rem 0 !important; gap: .8rem; }
  .footer-bar { justify-content: center; }
  /* Stacked and centred on small screens — a left margin there would just look off-centre. */
  .copyright-bar .aone-copy, .copyright-bar .aone-group { display: block; margin-left: 0; }
  .copyright-bar .aone-group { margin-top: .35rem; }
}

/* ---------- Responsive --------------------------------------------------- */

@media (max-width: 1100px) {
  ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .single-product div.product { grid-template-columns: 1fr; }
  .single-product .woocommerce-product-gallery { padding-left: 0 !important; }
  .single-product .woocommerce-product-gallery .flex-control-thumbs {
    position: static; flex-direction: row; width: auto; margin-top: 10px;
  }
}
@media (max-width: 900px) {
  #primary.content-area { flex-direction: column; }
  #secondary.widget-area { order: 0; width: 100%; flex: 0 0 auto; }
  #secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 820px) {
  h2 { font-size: 2rem; }
  .aone-sec--hero .aone-hero-slide { padding: 5rem 0; min-height: 0; }
  .aone-sec--hero h1, .aone-sec--hero .aone-hero-title { font-size: 2.25rem !important; }
  .aone-tiles { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .aone-tile--tall { grid-row: auto; }
  .aone-imgrow { grid-template-columns: 1fr 1fr; }
  ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  #secondary { grid-template-columns: 1fr; }
  ul.products { grid-template-columns: 1fr !important; }
  .aone-imgrow { grid-template-columns: 1fr; }
  .aone-sec--tiles, .aone-sec--featured { padding: 3rem 0; }
}

/* ---------- Utilities ---------------------------------------------------- */

.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.aone-clear::after { content: ""; display: block; clear: both; }