/* :root:root wins over the inline theme-css-var :root block regardless of head order. */
:root:root {
  --bw-cream: #fcfcfa;
  --bw-ink: #06402d;
  --bw-accent: #51dc70;
  --bw-warm: #fef5ea;
  --bw-card: #f7f7f5;
  --bw-line: #ddddd8;
  --bw-muted: #686868;
  --bw-lime-pale: #f4f8b4;
  --bw-price-olive: #47510e;
  --bw-save-green: #477d06;
  --bw-green-deep: #1c3a13;
  --bw-error: #c20000;

  --bw-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --bw-font-heading: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --bw-font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --bw-font-ui: "Geist", "Helvetica Neue", Arial, sans-serif;
  --bw-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --bw-font-condensed: "Anton", "Arial Narrow", Impact, sans-serif;

  --bw-radius-card: 24px;
  --bw-radius-media: 16px;
  --bw-radius-chip: 20px;
  --bw-radius-pill: 100px;
  --bw-radius-nav: 99px;
  --bw-glass-blur: 24px;
  --bw-glass-nav-blur: 40px;
}

:root:root {
  --sort-title-font: var(--bw-font-display);
  --sort-title-font-style: normal;
  --sort-title-font-weight: 400;
  --sort-title0-font: var(--bw-font-display);
  --sort-title0-font-style: normal;
  --sort-title0-font-weight: 400;
  --sort-title1-font: var(--bw-font-display);
  --sort-title1-font-style: normal;
  --sort-title1-font-weight: 400;
  --sort-title2-font: var(--bw-font-heading);
  --sort-title3-font: var(--bw-font-heading);
  --sort-title4-font: var(--bw-font-heading);
  --sort-title5-font: var(--bw-font-heading);
  --sort-title6-font: var(--bw-font-heading);
  --sort-body-font: var(--bw-font-body);
  --sort-body0-font: var(--bw-font-body);
  --sort-body1-font: var(--bw-font-body);
  --sort-body2-font: var(--bw-font-body);
  --sort-body3-font: var(--bw-font-body);
  --sort-body4-font: var(--bw-font-body);
  --sort-body5-font: var(--bw-font-body);
  --sort-body6-font: var(--bw-font-body);
}

@media (min-width: 960px) {
  :root:root {
    --page-padding: 40px;
  }
}

.accent-italic {
  font-family: var(--bw-font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.bw-mono-label {
  font-family: var(--bw-font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bw-glass {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--bw-radius-card);
  backdrop-filter: blur(var(--bw-glass-blur));
  -webkit-backdrop-filter: blur(var(--bw-glass-blur));
}

.bw-glass--nav {
  background: rgba(169, 173, 165, 0.35);
  border-radius: var(--bw-radius-nav);
  backdrop-filter: blur(var(--bw-glass-nav-blur));
  -webkit-backdrop-filter: blur(var(--bw-glass-nav-blur));
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .bw-glass {
    background: rgba(6, 64, 45, 0.85);
  }

  .bw-glass--nav {
    background: rgba(86, 96, 82, 0.92);
  }
}

/* Instrument Serif ships weight 400 only: the theme's `+300` bold would render faux. */
:root h1.title-font-bold,
:root h1.body-font-bold,
:root .title0.title-font-bold,
:root .title0.body-font-bold,
:root .title1.title-font-bold,
:root .title1.body-font-bold {
  font-weight: 400 !important;
}

@media (max-width: 959px) {
  :root h1.title-font-bold,
  :root h1.body-font-bold,
  :root .title0.title-font-bold,
  :root .title0.body-font-bold,
  :root .title1.title-font-bold,
  :root .title1.body-font-bold {
    font-weight: 400 !important;
  }
}

/* `.button` reads --body-bold-font-weight, which no stylesheet in the theme ever defines, so a
   stock button falls back to the inherited weight instead of the bold the rule intends. */
:root:root {
  --body-bold-font-weight: var(--sort-body-font-weight-bold, 600);
}

/* `.field__input` sets font-size but no family, so form controls fall back to the UA font
   (Arial for input/select, monospace for textarea) on every form in the theme. */
input.field__input,
select.field__input,
textarea.field__input,
.field__input.textarea {
  font-family: var(--sort-body-font, var(--bw-font-body));
}

/* Touch targets. A control that reads as a button, pill, chip or summary gets a real 44px box;
   an icon control whose visual size the design fixes (the nav pill's 32px glyph buttons) keeps
   its box and grows an absolutely-positioned hit layer instead, so the pill geometry is unchanged.
   Inline links inside a sentence are deliberately excluded - WCAG 2.5.8 exempts them and padding
   them would break the text flow. */
@media (max-width: 959px) {
  .button:not(.button--icon),
  .shopline-element-buy-now,
  summary.facets-filtering__summary,
  summary.facets-sorting__summary,
  .facets-filtering__active-button,
  .share-button__button {
    min-height: 44px;
  }

  /* The pagination link sits inside the item, so sizing the item alone leaves a 34px target. The
     non-navigating ellipsis is a span and needs the same box to keep the row's rhythm. */
  .pagination-standard__item > a,
  .pagination-standard__item > .pagination-standard__label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .pagination-standard .pagination-standard__button {
    width: 44px;
    height: 44px;
  }

  a.button--icon,
  button.button--icon {
    position: relative;
  }

  /* The hit layer is only safe on icon controls whose subtree is a bare glyph: an absolutely
     positioned pseudo paints over static descendants, so a wrapper holding its own link
     (the cart bubble) extends its target on the link itself instead - see bellway-chrome.css. */
  a.button--icon::before,
  button.button--icon::before {
    position: absolute;
    inset: min(0px, calc((44px - 100%) / -2));
    content: "";
  }

  /* The number stepper is shared by the cart page, the drawer and the buy box; only the box
     grows - the padding and the ::after pill that draw it stay put (R-42). */
  theme-input-number {
    min-height: 44px;
  }

  /* Width is deliberately left alone: the stepper's own width is a fixed calc(), so widening the
     two buttons starves the number field between them (3px at 320) - the R-42 failure. */
  theme-input-number button[name="minus"],
  theme-input-number button[name="plus"] {
    min-height: 44px;
  }
}

/* Section stylesheets load after this file, so the ring needs a class-or-attribute selector to
   outrank the `outline: none` resets (`.field__input`, `input[type="number"]`) it has to undo. */
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="search"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="url"]:focus-visible,
input[type="number"]:focus-visible,
input[type="password"]:focus-visible,
input:not([type]):focus-visible,
textarea:focus-visible,
select:focus-visible,
.field__input:focus-visible {
  outline: 2px solid rgb(var(--color-text, 6, 64, 45));
  outline-offset: 2px;
}

/* A custom-section given an anchor id is an in-page destination: the root scroller animates only
   where such a section exists, and the landing point clears the sticky header's own box (82px at
   desktop, 80px at mobile). bellway-motion.css resets scroll-behavior under reduced motion. */
html:has(.custom-section[id]) {
  scroll-behavior: smooth;
}

.custom-section[id] {
  scroll-margin-top: 100px;
}

@media (max-width: 959px) {
  .custom-section[id] {
    scroll-margin-top: 88px;
  }
}

/* base/index.css draws every fill button's 1px stroke on ::after at the colour scheme's own
   --button-border-radius (40px), so any button we reskin to a different radius gets a ring with
   the wrong corners — bright green at r40 around the r16 card CTA. Pin the ring to the button's
   own radius everywhere; the two solid CTAs that carry no stroke in the mock drop it outright
   in bellway-plp.css / bellway-pdp.css. !important because section sheets emit after this one. */
.button:not(.button--link, .button--text, .button--icon)::after,
.button:not([disabled], .button--icon):hover::after,
.button:not([disabled], .button--icon):active::after,
.shopline-element-buy-now::after,
.shopline-element-buy-now:hover::after {
  border-radius: inherit !important;
}