/* ==========================================================================
   IRONBEASTS - DESIGN SYSTEM  (base.css)
   Prototype for client review. Tokens map 1:1 to future WP/WooCommerce theme.
   ========================================================================== */

/* ---- The two faces -------------------------------------------------------
   Served from this theme, not from Google.

   Loading them from fonts.googleapis.com meant a stylesheet on somebody
   else's host in front of the first paint: a DNS lookup, a TLS handshake and
   a round trip, all before the browser even learned which font files to ask
   for -- and then a second origin to reach for those. Here the rules arrive
   inside base.css, which the page is already waiting on, and the files sit
   next to it.

   One file per family. Both are variable fonts, so what Google returned for
   400, 500, 600 and 700 was four references to the same bytes; `font-weight`
   below is the range the single file covers, and the browser draws every
   weight in it from that one download.

   Two subsets, split on the same unicode ranges Google uses. A page of
   Portuguese, Spanish or English needs only `latin`; `latin-ext` is fetched
   only if a character in its range is actually drawn.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/oswald-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Brand palette - sampled from the IronBeasts bull logo */
  --ib-ink: #2a2828;
  /* deep forest green-black (shield)   */
  --ib-ink-2: #262626;
  /* raised dark surface               */
  --ib-red: #d8272f;

  /* The countdown strip. Deeper than --ib-red on purpose: it is a full-width
     band behind white text, and the accent red is too loud at that size.
     Both carried over from the old store so the band looks the same. */
  --countdown-bg: #ad2d2d;
  --countdown-chip: #9d2525;
  /* bull red - primary action / sale  */
  --ib-red-dark: #b31f26;
  /* wine red - the Stock-Off notice on the product page */
  --ib-wine: #b00020;
  --ib-green: #6ba62d;
  /* grass green accent                */
  --ib-green-dark: #588a22;
  --ib-gold: #c9a44a;
  --ib-blue: #0073aa;
  --ib-measure: #0088cc;
  /* the L and A drawn on a size diagram   */
  /* new-arrival badge                 */
  /* horn gold - premium accent        */

  /* Neutrals */
  --ib-white: #ffffff;
  --ib-cream: #f6f6f5;
  /* page background - neutral off-white */
  --ib-100: #ededec;
  --ib-200: #e3e2e0;
  --ib-300: #cbc7bd;
  --ib-400: #9a968c;
  --ib-500: #6f6b62;
  --ib-700: #3c3a34;
  --ib-900: #1a1916;

  /* Semantic */
  --bg: var(--ib-cream);
  --surface: var(--ib-white);
  --surface-2: var(--ib-100);

  /* The dark bands on the home page. */
  --band: var(--ib-ink);

  /* The footer's own ground. The same ink as the bands on a light page; on a
     dark one it goes to black, because the footer is where the page ends and
     that edge should be unmistakable. */
  --footer-bg: var(--ib-ink);

  /* A surface that sits *above* the page rather than below it -- the category
     cards. On a light page that is white; on a dark one it is a grey light
     enough to read as lifted, not as another panel. */
  --surface-3: var(--ib-white);

  /* The light band on the home page -- the sale strip.
     They are the page's own light grey here; on a dark page they go to a
     grey light enough to still read as the lighter part of the page, which
     is the whole reason they exist.

     Separate from --surface-2 on purpose: that one is the checkout's order
     panel and the drawer, which want a tone below the page, not above it. */
  --band-light: var(--ib-100);

  /* The primary button under the pointer: it deepens, which is the ordinary
     way of showing a press. */
  --btn-hover: var(--ib-900);
  --btn-hover-fg: var(--bg);
  --btn-hover-border: var(--ib-900);
  --text: var(--ib-900);
  --text-muted: var(--ib-500);

  /* The chevron on a <select>. A token because it carries its own colour: an
     SVG in a background-image cannot read currentColor. */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a1916' stroke-width='1.8'/%3E%3C/svg%3E");
  --heading: var(--ib-ink);
  --border: var(--ib-200);
  --header-bg: #191919;
  --accent: var(--ib-red);
  --focus-ring: var(--ib-ink);
  color-scheme: light;

  /* Typography */
  /* One family for the whole site. Headings, buttons and labels are set in
     the same face as the text, and told apart by weight, size and tracking
     instead of by a second typeface.

     Oswald was here first and is what made everything read as stretched
     upward -- it is a condensed face, narrow and tall by design. Montserrat
     replaced it and was not it either.

     All three are declared above and their files are in assets/fonts, so
     trying another is this line and nothing else. */
  --font-display: var(--font-body);
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale - whole pixels at a 16px root, in rem so it still
     respects the reader's own font size. Every font-size in the theme
     comes from here. */
  --fs-8: 0.5rem;
  --fs-10: 0.625rem;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;

  /* Headings that scale with the viewport. A fixed step cannot do this, so
     these stay fluid rather than being flattened into the ramp above. */
  --fs-fluid-md: clamp(1.1rem, .9rem + .55vw, 1.5rem);
  --fs-fluid-lg: clamp(1.2rem, 1rem + 0.85vw, 1.65rem);
  --fs-fluid-xl: clamp(1.6rem, .7rem + 1.7vw, 2.4rem);
  --fs-fluid-2xl: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  --fs-fluid-hero: clamp(2.6rem, 1.7rem + 3.2vw, 4.6rem);

  /* Text typed into a field. 14px with a mouse; see the touch rule below. */
  --fs-field: var(--fs-14);

  /* Black at a given weight - gradient scrims over photography, overlays and
     shadow colours. One ramp, because they are all "black, this heavy". */
  --shade-1: rgba(0, 0, 0, .05);
  --shade-2: rgba(0, 0, 0, .1);
  --shade-3: rgba(0, 0, 0, .2);
  --shade-4: rgba(0, 0, 0, .5);
  --shade-5: rgba(0, 0, 0, .85);
  --shade-6: rgba(0, 0, 0, .9);

  /* Two opaque-enough surfaces that are not "black at a weight": the sold-out
     veil is --ib-900 at 72%, and the badge chip is white at 92%. */
  --veil-soldout: rgba(26, 25, 22, .72);
  --badge-bg: rgba(255, 255, 255, .92);

  /* White on a dark surface. Eighteen ad-hoc opacities were in use, which is
     why the header, the footer and the dark bands did not read as one
     surface. They do three different jobs, so they collapse to three ramps
     rather than one: text, lines, fills. */
  --on-dark-text: rgba(255, 255, 255, .72);
  --on-dark-muted: rgba(255, 255, 255, .5);

  --on-dark-line-1: rgba(255, 255, 255, .12);
  --on-dark-line-2: rgba(255, 255, 255, .5);
  /* Heavy enough to hold its own over photography - see .btn--ghost. */
  --on-dark-line-3: rgba(255, 255, 255, .75);

  --on-dark-fill-1: rgba(255, 255, 255, .08);
  --on-dark-fill-2: rgba(255, 255, 255, .14);
  --on-dark-fill-3: rgba(255, 255, 255, .28);

  /* Tracking. Uppercase display type needs it; body text does not, which is
     why the ramp starts wide rather than at zero. --ls-display is tight on
     purpose: it belongs to type large enough that the default reads loose. */
  --ls-display: -.01em;
  --ls-1: .02em;
  --ls-2: .04em;
  --ls-3: .06em;
  --ls-4: .08em;
  --ls-5: .1em;
  --ls-6: .12em;
  --ls-7: .16em;
  --ls-8: .22em;
  --ls-9: .3em;

  /* Leading. --lh-display is exact rather than rounded: it is set on the one
     word in the theme that reaches 73.6px, where rounding to 1 would grow the
     hero by six pixels. */
  --lh-display: .92;
  --lh-tight: 1;
  --lh-snug: 1.1;
  --lh-heading: 1.3;
  --lh-body: 1.5;
  --lh-loose: 1.6;


  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* UI */
  /* Every control a shopper can press is this tall -- size chips, the
     quantity stepper, buttons. They sit in one column on a product page and
     four different heights read as four unrelated things. */
  --control-h: 48px;

  --radius: 4px;
  --radius-lg: 10px;
  --radius-xl: 18px;
  --shadow-sm: 0 1px 3px rgba(22, 35, 26, .08);
  --shadow-md: 0 8px 24px rgba(22, 35, 26, .10);
  --shadow-lg: 0 20px 50px rgba(22, 35, 26, .16);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .16s var(--ease);
  --t: .28s var(--ease);

  --container: 1280px;
  --container-narrow: 960px;
  --header-h: 90px;

  --z-header: 100;
  --z-drawer: 300;
  --z-overlay: 290;

  /* Above the drawer: a message about the cart is often raised from inside
     it, and one that renders behind it may as well not have been sent. */
  --z-notice: 310;
}

/* ---- Reset --------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Every select in the theme, rather than the sort control alone.
   The browser draws its own arrow where it likes and differently in each one,
   which is why the shop's sort box had a chevron of its own and every other
   select on the site did not. The room on the right is part of the rule:
   without it the arrow lands against the border, or on top of a long option. */
select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

/* Radios, everywhere. The browser draws them in its own blue, which is the one
   colour on the checkout that belongs to nobody -- the shipping choices read as
   a system dialog dropped into the order summary.

   `accent-color` recolours the native control and leaves its behaviour alone:
   still a real radio, still keyboard-operable, still announced properly. The
   alternative is hiding it and drawing a circle, which costs all three.

   Sized to match the checkboxes in checkout.css and account.css. */
input[type="radio"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--heading);
}

/* The shipping choices. The same list on the cart and the checkout, from the
   same WooCommerce template, so it is described once. Light on purpose: no
   box, a thin line between choices and one above the first and under the
   last, setting the section apart; radio, name, and the price at the right
   (the name and price are split in functions.php). The chosen one is bold.
   The label fills the row beside the radio, so a tap on the name or the price
   picks it. */
.woocommerce-shipping-methods {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  border-block: 1px solid var(--border);
}

.woocommerce-shipping-methods li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
}

.woocommerce-shipping-methods li + li {
  border-top: 1px solid var(--border);
}

.woocommerce-shipping-methods li:has(input:checked) label {
  font-weight: 600;
}

.woocommerce-shipping-methods input {
  flex: none;
  margin: 0;
}

.woocommerce-shipping-methods label {
  display: flex;
  flex: 1;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  color: var(--heading);
  cursor: pointer;
}

.shipping-option__price {
  flex: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

/* On a touch screen, fields at 16px: iOS Safari zooms the whole page into any
   field whose text is smaller when it is tapped, and leaves it zoomed. Not
   solved by forbidding zoom, which would take pinch-zoom away from everyone. */
@media (pointer: coarse) {
  :root {
    --fs-field: var(--fs-16);
  }
}

/* Shorter where the header holds the burger (header.css, same
   breakpoint). A token, so everything placed below the header follows. */
@media (max-width: 1024px) {
  :root {
    --header-h: 72px;
  }
}

/* The keyboard has to be able to show where it is. The colour is a token so it
   can follow the surface rather than fight it: near-black on the page, white on
   anything dark. Both sit far above the 3:1 the ring needs to be legible, and
   neither can clash, because they are the two colours the theme is built from. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* A field already draws its own 1px border, so the ring is 1px too and lies
   exactly on it: focus reads as the border turning dark, not as a heavier
   edge. A field with no border of its own (the cart's quantity, the price
   filter) gets the same thin line where its border would be.

   Buttons and links keep the ring above -- they have nothing of their own
   for it to sit on. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-width: 1px;
  outline-offset: -1px;
}

/* Dark whatever the theme is. The rule of thumb: anywhere the theme already
   puts white text, the ring is white too -- the header and footer, a dark
   band, the drawer (a sibling of the header, not a child), the lightbox, the
   hero, which is always photography, and the ghost button, which exists to
   sit over photography. */
.site-header,
.site-footer,
.section--dark,
.mobile-nav,
.product-lightbox,
.hero-slider,
.btn--ghost {
  --focus-ring: var(--ib-white);
}

/* ---- Typography ---------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-1);
  text-transform: uppercase;
  color: var(--heading);
}

.eyebrow {
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-8);
  text-transform: uppercase;
  color: var(--ib-red);
  display: inline-block;
}

.section-head {
  text-align: center;
  margin-bottom: var(--sp-6);
}

.section-title {
  font-size: clamp(1.2rem, 1rem + 0.85vw, 1.65rem);
}

.section-head p {
  color: var(--text-muted);
  margin-top: var(--sp-2);
}

/* ---- Page head -----------------------------------------------------------
   Emitted by template-parts/page-head.php, which the archive, the product page
   and anything after them share -- so it is styled here rather than in one
   page's stylesheet. It lived in shop.css, which meant the product page drew
   an unstyled breadcrumb.

   No band and no divider: the homepage has neither, and the heading beside it
   uses .section-title so it matches every section heading on the site. */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  font-size: var(--fs-13);
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

.breadcrumb a:hover {
  color: var(--ib-red);
}

.breadcrumb__sep {
  opacity: .5;
}

.pagehead__desc {
  color: var(--text-muted);
  margin-top: var(--sp-2);
  max-width: 70ch;
}

.pagehead__meta {
  color: var(--text-muted);
  font-size: var(--fs-14);
  margin: 0;
}

/* ---- Layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--wide {
  max-width: 1760px;
}

.section {
  padding-block: clamp(3rem, 6vw, 6rem);
}

.section--tight {
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.section--dark {
  background: var(--band);
  color: var(--ib-cream);
}

.section--dark .section-title,
.section--dark h2,
.section--dark h3 {
  color: var(--ib-white);
}

.section--dark .section-head p {
  color: var(--on-dark-text);
}

/* Reveal-on-scroll (progressive enhancement) */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--heading);
  --btn-fg: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-weight: 600;
  font-size: var(--fs-14);
  letter-spacing: var(--ls-4);
  text-transform: uppercase;
  padding: .9rem 2rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  transition: background var(--t), border-color var(--t), color var(--t);
}

.btn--lg {
  padding: 1rem 2.75rem;
  font-size: var(--fs-15);
}

.btn--sm {
  padding: .6rem 1.1rem;
  font-size: var(--fs-13);
}

.btn--red {
  --btn-bg: var(--ib-red);
  --btn-fg: var(--ib-white);
}

.btn--red:hover,
.btn--red:focus-visible {
  background: var(--ib-red-dark);
  border-color: var(--ib-red-dark);
}

/* Solid light button, for dark bands. */
.btn--light {
  --btn-bg: var(--ib-white);
  --btn-fg: var(--ib-ink);
}

.btn--light:hover,
.btn--light:focus-visible {
  --btn-bg: var(--ib-cream);
  border-color: var(--ib-cream);
}

/* Outline on a light page: a secondary action beside a primary one. Not
   .btn--ghost, which is white text meant for sitting over a photograph and is
   invisible on anything pale. */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--heading);
  border-color: var(--heading);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  --btn-bg: var(--heading);
  --btn-fg: var(--bg);
}

/* Outline button for sitting over photography. */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ib-white);
  border-color: var(--on-dark-line-3);
  backdrop-filter: blur(2px);
}

/* The last two: a ghost button that is the label of a larger link -- a photo
   tile -- lights up when the tile is pointed at, not only when the button
   itself is. */
.btn--ghost:hover,
.btn--ghost:focus-visible,
a:hover > .btn--ghost,
a:focus-visible > .btn--ghost {
  background: var(--ib-white);
  border-color: var(--ib-white);
  color: var(--ib-ink);
}

/* ---- WooCommerce notices --------------------------------------------------
   Shared, not cart-only: these appear on product and listing pages too. The
   icon is what separates a refusal from a confirmation, so the difference does
   not rest on colour -- the border carries it as well, and neither is the only
   signal. */
/* Floating, not in the flow. In the flow it pushed everything below it down
   when it appeared and pulled it back up when it went -- the cart jumped
   twice for one message. Fixed, it says its piece over the page and leaves
   without moving anything. */
.wc-notices {
  position: fixed;
  top: calc(var(--header-h) + var(--sp-3));
  right: var(--sp-4);
  z-index: var(--z-notice);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: min(26rem, calc(100vw - var(--sp-5)));
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-14);
  color: var(--text);
  animation: wc-notice-in var(--t) both;
}

@keyframes wc-notice-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* One under the next, rather than on top of it. */
.wc-notices ~ .wc-notices {
  top: calc(var(--header-h) + var(--sp-3) + 4.5rem);
}

@media (max-width: 640px) {
  .wc-notices {
    left: var(--sp-3);
    right: var(--sp-3);
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wc-notices {
    animation: none;
  }
}

/* Drawn here rather than sent as an inline SVG. This markup goes through
   wp_kses on its way out, which strips <circle> outright and drops fill,
   stroke and the class from the <svg> -- the browser received a bare <path>,
   and a path with no fill is solid black. A pseudo-element cannot be filtered:
   it never travels as markup. */
.wc-notices::before {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: var(--fs-11);
  line-height: var(--lh-tight);
  color: var(--text-muted);
}

/* The glyph is what separates the two, so the difference does not rest on
   colour: a tick for something that happened, an exclamation for something
   that did not. */
.wc-notices--success::before {
  content: "\2713";
  color: var(--heading);
}

.wc-notices--error::before {
  content: "!";
  color: var(--ib-red);
}

.wc-notices--notice::before {
  content: "i";
  font-style: italic;
}

.wc-notices__list {
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.wc-notices__list li + li {
  margin-top: var(--sp-2);
}

/* No green: the theme is ink, cream and one red, and a green rule was the only
   green left on the site. A confirmation is the ordinary state; only a refusal
   is worth colouring. */
.wc-notices--error {
  border-color: var(--ib-red);
}

/* Added by the script, not by the template -- <button> does not survive the
   kses filter the notice markup passes through. */
.wc-notices__close {
  flex: none;
  margin-left: auto;
  padding: 0 0 0 var(--sp-3);
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-tight);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t);
}

.wc-notices__close:hover {
  color: var(--heading);
}

/* Fades out once it has been read, so a second message does not arrive to find
   the first still sitting there. */
.wc-notices.is-going {
  opacity: 0;
  transition: opacity var(--t);
}

/* WooCommerce puts a "View cart" link inside the message it just added, and a
   "Confirm email address" one inside the message on the orders screen. They
   are links in a sentence, not calls to action -- a filled button dropped into
   the middle of a line breaks the line and takes the eye off the message.
 
   `a.button` rather than `.button`: as a class on its own this was losing to
   WooCommerce's own `.woocommerce a.button` wherever their stylesheet is still
   loaded, and to the account page's button rule where it is not. */
.wc-notices a.button,
.wc-notices a.button:hover,
.wc-notices a.button:focus-visible {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-6);
  text-transform: uppercase;
  color: var(--heading);
  text-decoration: underline;
}

/* ---- How far from free delivery -----------------------------------------
   Drawn in the drawer, the cart and the checkout -- three places with three
   stylesheets and no one of them loaded on the other two, which is why this
   lives here.

   Monochrome. The amount carries the weight, not a colour: a bar that is
   orange while you are short and green when you are not turns a small nudge
   into a traffic light, and the page has one accent already.
   -------------------------------------------------------------------------- */
/* WooCommerce puts the tax breakdown inside the total's own cell, as a <small>
   after the amount -- "(includes 13,47EUR VAT)". Left alone it inherits the
   total's display font and size and reads as a second total. It is a footnote
   to the number above it, and it appears on both the cart and the checkout,
   which is why it lives here rather than in either stylesheet. */
.includes_tax {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-11);
  letter-spacing: var(--ls-1);
  line-height: var(--lh-heading);
  color: var(--text-muted);
}

/* The pickup panel, under the order table when a collection order is waiting at
   a shop. It shows on the customer's own view of the order and on the
   order-received page, which load account.css and checkout.css respectively --
   so like `.includes_tax` above it, it lives here rather than in either. */
.ib-pickup {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-2);
  border-left: 3px solid var(--ib-green);
}

.ib-pickup h2 {
  margin-top: 0;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-16);
  letter-spacing: var(--ls-3);
  text-transform: uppercase;
}

.ib-pickup p {
  margin: 0 0 var(--sp-2);
}

.ib-pickup p:last-child {
  margin-bottom: 0;
  color: var(--text-muted);
  font-size: var(--fs-14);
}

.ship-bar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
  background: var(--surface-2);
}

.ship-bar__text {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-13);
  line-height: var(--lh-snug);
  color: var(--text);
}

.ship-bar__icon {
  flex: 0 0 auto;
  color: var(--text-muted);
}

/* The number is the message. Everything around it is the sentence it needs to
   make sense. */
.ship-bar__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-15);
  font-variant-numeric: tabular-nums;
  color: var(--heading);
}

.ship-bar__track {
  height: 6px;
  border-radius: 99px;
  background: var(--border);
  overflow: hidden;
}

.ship-bar__fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--heading);
  transition: width var(--t);
}

/* Earned. The tick is the whole announcement -- the line is already full, and
   a second signal would be shouting. */
.ship-bar--done .ship-bar__text {
  font-weight: 600;
  color: var(--heading);
}

.ship-bar--done .ship-bar__icon {
  color: var(--heading);
}

@media (prefers-reduced-motion: reduce) {
  .ship-bar__fill {
    transition: none;
  }
}

/* ---- Helpers ------------------------------------------------------------- */

/*
 * `.sr-only` is ours; `.screen-reader-text` is what WordPress and WooCommerce
 * emit. Both must hide visually while staying readable to assistive tech --
 * without this rule, WooCommerce's hidden labels show up as loose text on the
 * cart, checkout and product pages.
 */
.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip links: hidden until tabbed to, then visible. */
.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: .75rem 1.5rem;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-16);
  z-index: 100000;
}

.text-red {
  color: var(--ib-red);
}

.text-muted {
  color: var(--text-muted);
}

/* The one !important the theme allows itself. The `hidden` attribute has to
   beat whatever display a component sets, or a control shipped hidden for
   progressive enhancement shows up anyway inside a flex row. */
[hidden] {
  display: none !important;
}

/* ---- WordPress content ----------------------------------------------------
   Classes the editor and WooCommerce emit into post content. Previously
   supplied by Hello Elementor's theme.css, which the theme no longer loads.
   -------------------------------------------------------------------------- */
.alignleft {
  float: left;
  margin-right: var(--sp-4);
}

.alignright {
  float: right;
  margin-left: var(--sp-4);
}

.aligncenter {
  clear: both;
  display: block;
  margin-inline: auto;
}

.alignwide {
  margin-inline: -80px;
}

.alignfull {
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
}

.alignfull,
.alignfull img {
  width: 100vw;
}

.wp-caption {
  max-width: 100%;
  margin-block-end: var(--sp-5);
}

.wp-caption img {
  display: block;
  margin-inline: auto;
}

.wp-caption-text,
.gallery-caption {
  display: block;
  margin: 0;
  padding: var(--sp-3) 0;
  font-size: var(--fs-14);
  color: var(--text-muted);
}