/* (C)2026 Badger Commerce Limited, a subsidiary of Kedos Consulting Limited */

/* ==========================================================================================
   BROCK
   A conversion-first storefront theme. Layered over Nova: Nova's bdgr.css loads first, this
   file second, the Design Brief's theme.css (brand colours / font / shape) last.

   Principles
   1. One colour means "buy". --color-primary (the brand colour from the Design Brief) is
      reserved for the purchase path: add to basket, checkout, pay. Everything else - links,
      navigation, secondary buttons, badges - is ink on paper, so the next step is always the
      one thing on the page that stands out.
   2. Search is a field, not an icon, on every screen size.
   3. Every price, saving and promise is stated plainly, in the same place, every time.
   4. Neutral image tiles: packshots and lifestyle photography sit in one even grid.

   Nova token re-points come first (so un-migrated Nova templates pick up the Brock look),
   then Brock's own role tokens, which are defined in terms of Nova's names so the Design
   Brief keeps working (it only ever writes Nova's token names).
   ========================================================================================== */

:root {
  /* ── Nova tokens, re-pointed ─────────────────────────────────────────────────────────── */
  --color-primary: #0B6E4F;
  --color-primary-dark: #075A40;
  --color-primary-light: #8CCFB5;
  --color-primary-50: #E7F3EE;
  --color-primary-ring: rgba(11, 110, 79, 0.18);
  --color-primary-tint: rgba(11, 110, 79, 0.06);
  --color-on-primary: #FFFFFF;           /* text on the buy colour */

  /* A barely-green neutral ramp: warmer than slate, cooler than the beige defaults. */
  --color-gray-50: #F6F7F6;
  --color-gray-100: #EEF0EE;
  --color-gray-200: #E1E4E1;
  --color-gray-300: #CAD0CB;
  --color-gray-400: #9AA29C;
  --color-gray-500: #646C66;
  --color-gray-600: #4B534D;
  --color-gray-700: #343A36;
  --color-gray-800: #212623;
  --color-gray-900: #131714;
  --color-gray-950: #0B0E0C;

  --color-success: #0B6E4F;
  --color-error: #B42318;
  --color-error-dark: #912018;
  --color-warning: #B54708;

  --font-weight-heading: 700;
  --letter-spacing-heading: -0.02em;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 20px;

  --shadow-xs: 0 1px 2px rgba(19, 23, 20, 0.05);
  --shadow-sm: 0 1px 3px rgba(19, 23, 20, 0.08), 0 1px 2px rgba(19, 23, 20, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(19, 23, 20, 0.12);
  --shadow-lg: 0 16px 32px -8px rgba(19, 23, 20, 0.16);
  --shadow-xl: 0 28px 56px -12px rgba(19, 23, 20, 0.22);

  --product-image-ratio: 4 / 5;
  --container-max-width: 1360px;
  --container-padding: clamp(16px, 3.2vw, 40px);

  /* ── Brock roles ─────────────────────────────────────────────────────────────────────── */
  --b-ink: var(--color-text-strong);
  --b-text: var(--color-gray-700);
  --b-muted: var(--color-gray-500);
  --b-line: var(--color-gray-200);
  --b-line-strong: var(--color-gray-300);
  --b-tile: var(--color-gray-100);
  --b-subtle: var(--color-gray-50);
  --b-surface: var(--color-surface);
  --b-dark: var(--color-gray-950);       /* not inverted by a dark Design Brief surface */

  --b-buy: var(--color-primary);
  --b-buy-hover: var(--color-primary-dark);
  --b-on-buy: var(--color-on-primary);
  --b-sale: var(--color-error);

  --b-focus-ring: 0 0 0 2px var(--b-surface), 0 0 0 4px var(--b-ink);
  --b-control: 48px;
  --b-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --b-header-offset: 0px;                /* set by brock.js to the sticky header's height */
  --rm-sticky-top: var(--b-header-offset);      /* the restaurant menu's tabs stick under the header */
}

/* ==========================================================================================
   BASE
   ========================================================================================== */

body {
  background: var(--b-surface);
  color: var(--b-text);
  font-feature-settings: "cv11";          /* Inter: single-storey a, friendlier at small sizes */
  text-rendering: optimizeLegibility;
}

a { color: var(--b-ink); }
a:hover { color: var(--b-ink); }
/* Links inside running copy (tenant content) stay recognisable without the brand colour. */
:where(p, li, dd, td) > a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--b-focus-ring);
  border-radius: var(--radius-sm);
}

.brock-wrap {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.brock-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.brock-num { font-variant-numeric: tabular-nums; }

.brock-icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.brock-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 2000;
  padding: 10px 16px;
  background: var(--b-ink);
  color: var(--b-surface);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: top 150ms var(--b-ease);
}
.brock-skip:focus { top: 12px; color: var(--b-surface); }
#brock-content:focus { outline: none; }

/* ==========================================================================================
   BUTTONS
   The shared button (ui/button.html, bdgr.css "ui: button"), whose defaults are Brock's look; this
   maps them onto Brock's palette. The icon inside a button is Brock's own (.brock-icon).
   ========================================================================================== */

.nova-button {
  --button-height: var(--b-control);
  --button-sm-height: 38px;
  --button-lg-height: 56px;
  --button-transition: background-color 150ms var(--b-ease), border-color 150ms var(--b-ease),
                       color 150ms var(--b-ease), transform 150ms var(--b-ease);
  --button-buy-bg: var(--b-buy);
  --button-buy-color: var(--b-on-buy);
  --button-buy-hover-bg: var(--b-buy-hover);
  --button-ink-bg: var(--b-ink);
  --button-ink-color: var(--b-surface);
  --button-ink-hover-bg: var(--color-gray-800);
  --button-outline-bg: var(--b-surface);
  --button-outline-border-color: var(--b-ink);
  --button-outline-color: var(--b-ink);
  --button-outline-hover-bg: var(--b-ink);
  --button-outline-hover-color: var(--b-surface);
  --button-quiet-bg: var(--b-subtle);
  --button-quiet-border-color: var(--b-line);
  --button-quiet-color: var(--b-ink);
  --button-quiet-hover-bg: var(--b-tile);
  --button-quiet-hover-border-color: var(--b-line-strong);
}
.nova-button .brock-icon { font-size: 18px; }

.brock-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--b-ink);
  font-size: 24px;
  cursor: pointer;
}
.brock-iconbtn:hover { background: var(--b-subtle); }

/* ==========================================================================================
   HEADER: announcement, promise strip, bar, category row
   ========================================================================================== */

.brock-announce {
  background: var(--b-dark);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  padding-block: 9px;
}
.brock-announce a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; }

.brock-promise {
  background: var(--b-subtle);
  border-bottom: 1px solid var(--b-line);
  font-size: 13px;
  color: var(--color-gray-600);
}
.brock-promise__list {
  display: flex;
  justify-content: center;
  gap: 8px 40px;
  margin: 0 auto;
  padding-block: 8px;
  list-style: none;
}
.brock-promise__item { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.brock-promise__item .brock-icon { font-size: 17px; color: var(--b-ink); }
@media (max-width: 719px) {
  .brock-promise__item:not(:first-child) { display: none; }
}

.brock-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--b-surface);
  border-bottom: 1px solid var(--b-line);
}

.brock-header__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand search actions";
  align-items: center;
  column-gap: clamp(20px, 3vw, 48px);
  min-height: 76px;
}
.brock-header__menu { display: none; grid-area: menu; margin-left: -10px; }

.brock-header__brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: min(360px, 30vw);
  text-decoration: none;
  color: var(--b-ink);
}
.brock-header__logo {
  display: block;
  flex: none;
  height: 40px;
  max-width: 200px;
  width: auto;
  object-fit: contain;
}
/* A long site name wraps onto a second line and is clipped after that, so it never pushes
   into the search field or the account/basket buttons. */
.brock-header__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-width: 0;
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.brock-header__name--with-logo { font-size: 17px; }

.brock-header__search {
  grid-area: search;
  width: 100%;
  max-width: 720px;
  justify-self: center;
}

.brock-header__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: -10px;
}

/* Account + basket */
.brock-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  color: var(--b-ink);
  text-decoration: none;
  transition: background-color 150ms var(--b-ease);
}
.brock-action:hover { background: var(--b-subtle); color: var(--b-ink); }
.brock-action__icon { font-size: 24px; }
.brock-action__iconwrap { position: relative; display: inline-flex; }
.brock-action__text { display: flex; flex-direction: column; line-height: 1.2; }
.brock-action__label { font-size: 14px; font-weight: 600; white-space: nowrap; }
.brock-action__caption { font-size: 12px; color: var(--b-muted); white-space: nowrap; }
.brock-action__count {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--b-ink);
  color: var(--b-surface);
  box-shadow: 0 0 0 2px var(--b-surface);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.brock-action--basket:not(.has-items) .brock-action__count { display: none; }

/* Search field (fallback form and the searchBar extension share these classes) */
.brock-searchbar { position: relative; }
.brock-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  padding: 0 4px 0 14px;
  gap: 10px;
  background: var(--b-surface);
  border: 1.5px solid var(--b-line-strong);
  border-radius: var(--radius-md);
  transition: border-color 150ms var(--b-ease), box-shadow 150ms var(--b-ease);
}
.brock-search:hover { border-color: var(--color-gray-400); }
.brock-search:focus-within {
  border-color: var(--b-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-ink) 12%, transparent);
}
.brock-search__icon { font-size: 20px; color: var(--b-muted); }
.brock-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--b-ink);
  font-size: 16px;                        /* 16px stops iOS zooming the page on focus */
  outline: none;
}
.brock-search__input::placeholder { color: var(--b-muted); opacity: 1; }
/* the header search scope (fragment/search-scope) reads like the text it sits beside */
.brock-search__scope { color: var(--b-ink); }
.brock-search__input:focus-visible { box-shadow: none; }
.brock-search__input::-webkit-search-decoration,
.brock-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.brock-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--b-muted);
  font-size: 18px;
  cursor: pointer;
}
.brock-search__clear[hidden] { display: none; }
.brock-search__clear:hover { background: var(--b-tile); color: var(--b-ink); }
.brock-search__submit {
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: calc(var(--radius-md) - 2px);
  background: var(--b-ink);
  color: var(--b-surface);
  font: 600 14px/1 var(--font-family-base);
  cursor: pointer;
  transition: background-color 150ms var(--b-ease);
}
.brock-search__submit:hover { background: var(--color-gray-800); }

/* Suggestions panel (rendered by Nova's searchBar.js) */
.brock-search__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1100;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 6px;
  background: var(--b-surface);
  border: 1px solid var(--b-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}
.brock-search__panel[hidden] { display: none; }
.brock-searchbar .nova-searchbar__section-title {
  padding: 10px 12px 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--b-muted);
}
.brock-searchbar .nova-searchbar__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: var(--b-ink);
  text-decoration: none;
}
.brock-searchbar .nova-searchbar__option:hover,
.brock-searchbar .nova-searchbar__option.is-active { background: var(--b-subtle); }
.brock-searchbar .nova-searchbar__thumb {
  width: 48px;
  height: 60px;
  flex: none;
  object-fit: contain;
  background: var(--b-tile);
  border-radius: var(--radius-sm);
  mix-blend-mode: multiply;
}
.brock-searchbar .nova-searchbar__cat-icon {
  width: 48px;
  height: 48px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--b-tile);
  color: var(--b-ink);
}
.brock-searchbar .nova-searchbar__option-text { flex: 1 1 auto; min-width: 0; }
.brock-searchbar .nova-searchbar__name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brock-searchbar .nova-searchbar__brand {
  font-size: 12px;
  color: var(--b-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brock-searchbar .nova-searchbar__price-row { display: flex; align-items: baseline; gap: 8px; flex: none; }
.brock-searchbar .nova-searchbar__price { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.brock-searchbar .nova-searchbar__compare { font-size: 12px; color: var(--b-muted); text-decoration: line-through; }
.brock-searchbar .nova-searchbar__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 12px;
  border-top: 1px solid var(--b-line);
  color: var(--b-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.brock-searchbar .nova-searchbar__footer:hover,
.brock-searchbar .nova-searchbar__footer.is-active { background: var(--b-subtle); }
.brock-searchbar .nova-searchbar__empty { padding: 20px 12px; text-align: center; color: var(--b-muted); font-size: 14px; }

/* Category row + mega menu (desktop) */
.brock-header__nav { position: relative; }
.brock-header__nav .nova-menu {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 0 0 0 -12px;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.brock-header__nav .nova-menu::-webkit-scrollbar { display: none; }
.brock-header__nav .nova-menu__item { position: static; }
.brock-header__nav .nova-menu__row {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
}
.brock-header__nav .nova-menu__link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  color: var(--b-ink);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.nova-menu__link--button {
  gap: 6px;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}
.brock-header__nav .has-panel .nova-menu__link--button { padding-right: 12px; }
.nova-menu__caret { font-size: 15px; color: var(--b-muted); transition: transform 200ms var(--b-ease); }
.nova-menu__item.is-open .nova-menu__caret { transform: rotate(180deg); }
.brock-drawer .nova-menu__link--button { justify-content: space-between; width: 100%; text-align: left; }
.brock-drawer .nova-menu__link--button .nova-menu__caret { font-size: 20px; color: var(--b-ink); }
.brock-header__nav .nova-menu__row::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: var(--b-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--b-ease);
}
.brock-header__nav .nova-menu__item:hover .nova-menu__row::after,
.brock-header__nav .nova-menu__item.is-open .nova-menu__row::after,
.brock-header__nav .nova-menu__item.is-current .nova-menu__row::after { transform: scaleX(1); }

.brock-header__nav .nova-menu__panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1020;
  max-height: calc(100vh - var(--b-header-offset) - 24px);
  overflow-y: auto;
  background: var(--b-surface);
  border-top: 1px solid var(--b-line);
  box-shadow: 0 28px 40px -28px rgba(19, 23, 20, 0.28);
}
.brock-header__nav .nova-menu__item.is-open > .nova-menu__panel { display: block; animation: brock-drop 180ms var(--b-ease); }
html:not(.brock-js) .brock-header__nav .nova-menu__item:hover > .nova-menu__panel,
html:not(.brock-js) .brock-header__nav .nova-menu__item:focus-within > .nova-menu__panel { display: block; }
@keyframes brock-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.nova-menu__inner { padding-block: 28px 24px; }
.nova-menu__groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 28px 40px;
}
.nova-menu__group--leaves:has(.nova-menu__list--flow) { grid-column: 1 / -1; }
/* A heading-less list of links sits beside headed columns: start it on their first link's line. */
.brock-header__nav .nova-menu__group--leaves:not(:has(.nova-menu__heading)) { padding-top: 26px; }
.nova-menu__heading {
  display: block;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--b-muted);
  text-decoration: none;
}
.nova-menu__heading--link { color: var(--b-ink); }
.nova-menu__heading--link:hover { text-decoration: underline; text-underline-offset: 3px; }
.nova-menu__list { margin: 0; padding: 0; list-style: none; }
.nova-menu__list--flow { columns: 180px auto; column-gap: 40px; }
.nova-menu__list li { break-inside: avoid; }
.nova-menu__sublink,
.nova-menu__more {
  display: block;
  padding: 5px 0;
  color: var(--b-text);
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
}
.nova-menu__sublink:hover { color: var(--b-ink); text-decoration: underline; text-underline-offset: 3px; }
.nova-menu__more { color: var(--b-ink); font-weight: 600; }
.nova-menu__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--b-line);
  color: var(--b-ink);
  font-weight: 600;
  text-decoration: none;
}
.nova-menu__all .brock-icon { transition: transform 150ms var(--b-ease); }
.nova-menu__all:hover .brock-icon { transform: translateX(3px); }
.brock-header__nav .nova-menu__all { display: flex; width: 100%; }

/* ==========================================================================================
   MOBILE / TABLET HEADER + DRAWER
   ========================================================================================== */

@media (max-width: 1023px) {
  .brock-header__bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "menu brand actions"
      "search search search";
    column-gap: 8px;
    row-gap: 0;
    min-height: 0;
    padding-top: 6px;
  }
  .brock-header__menu { display: inline-flex; }
  .brock-header__brand { justify-self: start; max-width: 100%; min-height: 48px; gap: 10px; }
  .brock-header__logo { height: 32px; max-width: 150px; }
  .brock-header__name { font-size: 19px; }
  .brock-header__search {
    max-width: none;
    padding-block: 6px 12px;
    transition: margin-top 220ms var(--b-ease), opacity 220ms var(--b-ease);
  }
  .brock-search { height: 44px; }
  .brock-search__submit { display: none; }
  .brock-action { padding: 0; width: 44px; min-height: 44px; justify-content: center; }
  /* visually hidden, not display: none, so an icon-only action keeps its words as its name */
  .brock-action__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* the store link is in the drawer on small screens; the bar keeps room for the shop's name */
  .brock-action--in-drawer { display: none; }
  .brock-header__nav { display: none; }

  /* Scrolling down the page tucks the search row away; scrolling up brings it back. */
  .brock-header.is-tucked .brock-header__search {
    margin-top: -62px;
    opacity: 0;
    pointer-events: none;
  }
  /* ...unless the shopper is typing in it (or reading its suggestions). */
  .brock-header.is-tucked .brock-header__search:focus-within { margin-top: 0; opacity: 1; pointer-events: auto; }
}

@media (max-width: 479px) {
  .brock-header__logo { height: 28px; max-width: 96px; }
  .brock-header__name { font-size: 17px; }
  .brock-header__name--with-logo { font-size: 15px; }
}

@media (min-width: 1024px) {
  .brock-drawer { display: none !important; }
}

.brock-drawer { position: fixed; inset: 0; z-index: 1060; }
.brock-drawer[hidden] { display: none; }
.brock-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 14, 12, 0.5);
  opacity: 0;
  transition: opacity 240ms var(--b-ease);
}
.brock-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(420px, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--b-surface);
  box-shadow: var(--shadow-xl);
  transform: translateX(-100%);
  transition: transform 280ms var(--b-ease);
}
.brock-drawer.is-open .brock-drawer__scrim { opacity: 1; }
.brock-drawer.is-open .brock-drawer__panel { transform: none; }
.brock-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 0 8px 0 20px;
  border-bottom: 1px solid var(--b-line);
}
.brock-drawer__title { font-size: 17px; font-weight: 650; color: var(--b-ink); }
.brock-drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.brock-drawer__foot { border-top: 1px solid var(--b-line); padding: 8px 0; background: var(--b-subtle); }
.brock-drawer__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  color: var(--b-ink);
  font-weight: 500;
  text-decoration: none;
}
.brock-drawer__link .brock-icon { font-size: 22px; }

.brock-drawer .nova-menu { margin: 0; padding: 0; list-style: none; }
.brock-drawer .nova-menu__item { border-bottom: 1px solid var(--b-line); }
.brock-drawer .nova-menu__row { display: flex; align-items: stretch; }
.brock-drawer .nova-menu__link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 20px;
  color: var(--b-ink);
  font-size: 17px;
  font-weight: 550;
  text-decoration: none;
}
.brock-drawer .nova-menu__panel { display: none; background: var(--b-subtle); border-top: 1px solid var(--b-line); }
.brock-drawer .nova-menu__item.is-open > .nova-menu__panel { display: block; }
.brock-drawer .nova-menu__inner { padding: 16px 20px 20px; }
.brock-drawer .nova-menu__groups { display: block; }
.brock-drawer .nova-menu__group + .nova-menu__group { margin-top: 20px; }
.brock-drawer .nova-menu__list--flow { columns: 2 130px; column-gap: 20px; }
.brock-drawer .nova-menu__sublink { padding: 8px 0; font-size: 16px; }
/* The item itself is a button, so its own page is a plain link in the accordion, styled like its siblings (first or last, per nav-all-link-position) */
.brock-drawer .nova-menu__inner { display: flex; flex-direction: column; }
.brock-drawer .nova-menu__all { margin: 0; padding: 8px 0; border: 0; font-family: inherit; font-size: 16px; font-weight: 400; letter-spacing: normal; text-transform: none; }
/* nav-all-link-position = first (the default): the item's own page leads the accordion; "last" leaves it after the links */
.brock-drawer .nova-menu__all[data-all-position="first"] { order: -1; }
.brock-drawer .nova-menu__all .brock-icon { display: none; }

html.brock-drawer-open { overflow: hidden; }

/* ==========================================================================================
   BREADCRUMB (Nova markup)
   ========================================================================================== */

.nova-breadcrumb { margin: 20px 0 4px; }
.nova-breadcrumb__list { font-size: 13px; }
.nova-breadcrumb__item { color: var(--b-muted); }
.nova-breadcrumb__item + .nova-breadcrumb__item::before { content: "/"; color: var(--b-line-strong); font-weight: 400; }
.nova-breadcrumb__link { color: var(--b-muted); }
.nova-breadcrumb__link:hover,
.nova-breadcrumb__link:focus-visible { color: var(--b-ink); text-decoration: underline; text-underline-offset: 3px; }
.nova-breadcrumb__current { color: var(--b-ink); }

/* Content-page (/p/...) trail: sits between the header and any hero, so keep it tight. */
.nova-page-crumbs .nova-breadcrumb { margin: 12px 0; }

/* ==========================================================================================
   LISTING: heading, chips, toolbar, grid
   ========================================================================================== */

.brock-main { padding-bottom: 72px; }

.brock-plp-head { margin: 8px 0 20px; }
.brock-plp-head__title {
  margin: 0;
  font-size: clamp(30px, 2.4vw + 18px, 48px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--b-ink);
}

.brock-chips {
  display: flex;
  gap: 8px;
  margin: 0 calc(var(--container-padding) * -1) 8px;
  padding: 2px var(--container-padding) 10px;
  overflow-x: auto;
  scroll-padding-inline: var(--container-padding);
  scrollbar-width: none;
}
.brock-chips::-webkit-scrollbar { display: none; }
/* Fade the trailing edge so an overflowing row reads as "scroll for more", not as cut off. */
@supports (mask-image: linear-gradient(#000, #000)) {
  .brock-chips {
    mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent);
  }
}
.brock-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 0 16px;
  border: 1.5px solid var(--b-line);
  border-radius: 999px;
  background: var(--b-surface);
  color: var(--b-ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 150ms var(--b-ease), background-color 150ms var(--b-ease);
}
.brock-chip:hover { border-color: var(--b-ink); color: var(--b-ink); }
.brock-chip--up { background: var(--b-subtle); padding-left: 10px; }
.brock-chip--up .brock-icon { font-size: 16px; }

.brock-toolbar {
  position: sticky;
  top: var(--b-header-offset);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  margin-bottom: 24px;
  background: var(--b-surface);
  border-bottom: 1px solid var(--b-line);
  transition: top 220ms var(--b-ease);
}
.brock-toolbar__count { margin: 0; font-size: 14px; font-weight: 500; color: var(--b-muted); }

/* The shared sort control (ui/sort.html), re-skinned through its --sort-* tokens. */
.nova-sort {
  --sort-label-color: var(--b-muted);
  --sort-control-border: 1.5px solid var(--b-line-strong);
  --sort-control-bg: var(--b-surface);
  --sort-control-color: var(--b-ink);
  --sort-chevron-color: var(--b-ink);
}

.brock-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 12px;
}
@media (min-width: 720px)  { .brock-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; } }
@media (min-width: 1100px) { .brock-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; } }
/* Fixed wide-screen column count, set by the collectionProductGrid extension's "columns" option */
@media (min-width: 1100px) { .brock-grid.brock-grid--cols { grid-template-columns: repeat(var(--brock-grid-columns, 4), minmax(0, 1fr)); } }

.brock-empty {
  max-width: 480px;
  margin: 48px auto;
  padding: 48px 24px;
  text-align: center;
  color: var(--b-muted);
}
.brock-empty__title { font-size: 24px; margin: 0 0 8px; }
.brock-empty .nova-button { margin-top: 16px; }

/* ==========================================================================================
   PRODUCT CARD
   ========================================================================================== */

.brock-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brock-card__media {
  position: relative;
  display: block;
  aspect-ratio: var(--product-image-ratio);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--b-tile);
  isolation: isolate;
}
.brock-card__img,
.brock-card__img > div,
.brock-card__placeholder {
  position: absolute;
  inset: 0;
}
.brock-card__img img,
.brock-card__placeholder {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  mix-blend-mode: multiply;               /* white packshot backgrounds melt into the tile */
  transition: transform 500ms var(--b-ease), opacity 300ms var(--b-ease);
}
/* Scrub frames follow the card's own image treatment: letterboxed and melted into the tile. */
.brock-card__media .nova-scrub__frame {
  object-fit: contain;
  mix-blend-mode: multiply;
}
.brock-card__img--alt { opacity: 0; transition: opacity 300ms var(--b-ease); }
@media (hover: hover) {
  .brock-card:hover .brock-card__img img { transform: scale(1.03); }
  .brock-card__media.has-alt:hover .brock-card__img--alt { opacity: 1; }
}
.brock-card.is-unavailable .brock-card__img img { opacity: 0.55; }

.brock-card__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
}
.brock-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.brock-badge--sale { background: var(--b-sale); color: #FFFFFF; }
.brock-badge--muted { background: var(--b-surface); color: var(--b-ink); box-shadow: inset 0 0 0 1px var(--b-line-strong); }

.brock-card__body { flex: 1 1 auto; padding-top: 12px; }
.brock-card__brand {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--b-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brock-card__title {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.brock-card__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* a one-line title is a 24px target (WCAG 2.5.8) without moving anything: the extra 4px sits
     above the text, taken back by the margin (below it would show the clamped third line) */
  padding-top: 4px;
  margin-top: -4px;
  color: var(--b-ink);
  text-decoration: none;
}
.brock-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.brock-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--b-muted);
}
.brock-card__desc * { font-size: inherit; margin: 0; }
.brock-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 8px 0 0;
  color: var(--b-ink);
}
.brock-card__from { font-size: 13px; color: var(--b-muted); }
.brock-card__now { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.brock-card__now.is-sale { color: var(--b-sale); }
.brock-card__was { font-size: 13px; color: var(--b-muted); }

.brock-card__actions { padding-top: 14px; }
.brock-card__actions .nova-button { --button-height: 42px; --button-font-size: 14px; }
@media (max-width: 479px) {
  .brock-card__actions .nova-button { --button-padding: 0 10px; }
  .brock-card__actions .nova-button .brock-icon { display: none; }
}

.brock-card--compact .brock-card__title { font-size: 14px; }

/* ==========================================================================================
   PAGINATION
   ========================================================================================== */

/* The shared pager (ui/pager.html), re-skinned through its --pager-* tokens. */
.nova-pager {
  --pager-summary-color: var(--b-muted);
  --pager-item-border: 1.5px solid var(--b-line);
  --pager-item-color: var(--b-ink);
  --pager-item-transition: border-color 150ms var(--b-ease);
  --pager-hover-border: var(--b-ink);
  --pager-hover-color: var(--b-ink);
  --pager-current-bg: var(--b-ink);
  --pager-current-border: var(--b-ink);
  --pager-current-color: var(--b-surface);
  --pager-gap-color: var(--b-muted);
}
/* ==========================================================================================
   FOOTER
   ========================================================================================== */

/* Footer tokens for the shared footer (ui/footer.html): Brock's look is the component's defaults. */
.nova-sitefooter {
  --footer-assure-border-top: 1px solid var(--b-line);
  --footer-assure-color: var(--b-ink);
  --footer-main-bg: var(--b-dark);
  --footer-base-bg: var(--b-dark);
}

/* ==========================================================================================
   NOVA COMPATIBILITY
   Nova templates Brock hasn't replaced yet still render. These keep them on-system: buttons
   follow the one-colour rule and page sections sit on Brock's grid.
   ========================================================================================== */

.nova-container { max-width: var(--container-max-width); padding-inline: var(--container-padding); }
.nova-btn {
  --button-radius: var(--radius-md);
  --button-font-weight: 600;
  --button-secondary-color: var(--b-ink);
  --button-outline-color: var(--b-ink);
  --button-outline-border-color: var(--b-ink);
}
/* below Nova's :hover:not(:disabled), so it shows only on a disabled outline button */
.nova-btn-outline:hover { background: var(--b-ink); color: var(--b-surface); }

/* ==========================================================================================
   MOTION
   ========================================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* ==========================================================================================
   FORMS (Nova's .nova-input is used by quantity, checkout and account forms)
   ========================================================================================== */

.nova-input,
.brock-input {
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid var(--b-line-strong);
  border-radius: var(--radius-md);
  background-color: var(--b-surface);
  color: var(--b-ink);
  font-size: 16px;                        /* no iOS zoom on focus */
}
.nova-input:hover,
.brock-input:hover { border-color: var(--color-gray-400); }
.nova-input:focus,
.brock-input:focus {
  outline: none;
  border-color: var(--b-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-ink) 12%, transparent);
}
select.nova-input { min-height: 48px; }

/* ==========================================================================================
   PRODUCT PAGE
   ========================================================================================== */

.brock-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 8px;
}
@media (min-width: 1024px) {
  .brock-pdp {
    grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }
  /* The buy box travels with the page while the gallery scrolls past. */
  .brock-pdp__info {
    position: sticky;
    top: calc(var(--b-header-offset) + 24px);
  }
}
@media (max-width: 1023px) {
  /* Edge-to-edge gallery on phones: every pixel of width goes to the product. */
  .brock-pdp__gallery { margin-inline: calc(var(--container-padding) * -1); }
  .brock-pdp__gallery #main-slider .splide__slide { border-radius: 0; }
  .brock-pdp__gallery #thumb-slider { padding-inline: var(--container-padding); }
}

/* Gallery (Nova's carousel / grid / stack markup) */
.brock-pdp #main-slider .splide__slide,
.brock-pdp .nova-gallery__grid-item,
.brock-pdp .nova-gallery__stack-item {
  background: var(--b-tile);
  border-radius: var(--radius-sm);
}
.brock-pdp .nova-gallery__image { mix-blend-mode: multiply; }
.brock-pdp #thumb-slider .splide__slide {
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--b-tile);
  opacity: 0.7;
}
.brock-pdp #thumb-slider .splide__slide.is-active { border-color: var(--b-ink); opacity: 1; }
.brock-pdp .nova-gallery__thumb { object-fit: contain; mix-blend-mode: multiply; }

/* Buy box */
.brock-buybox__brand {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--b-muted);
}
.brock-buybox__title {
  margin: 0 0 12px;
  font-size: clamp(24px, 1.2vw + 16px, 32px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--b-ink);
}

.brock-rating { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; color: var(--b-muted); }
.brock-rating__stars { display: inline-flex; gap: 1px; font-size: 17px; color: var(--b-line-strong); }
.brock-icon--star { fill: currentColor; stroke-width: 1.2; }
.brock-rating__stars .is-on { color: var(--b-ink); }

.brock-price { margin: 0 0 24px; }
.brock-price__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0;
  color: var(--b-ink);
}
.brock-price__from { font-size: 15px; color: var(--b-muted); }
.brock-price__from:empty { display: none; }
.brock-price__now { font-size: 28px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; }
.brock-price__now.is-sale { color: var(--b-sale); }
.brock-price__was { font-size: 16px; color: var(--b-muted); }
.brock-price__note { margin: 4px 0 0; font-size: 13px; color: var(--b-muted); }

/* Variant pickers (markup built by Nova's variants.js) */
.brock-pdp #variantSelector { margin-bottom: 8px; min-height: 0; }
.brock-pdp .nova-variant-group { margin-bottom: 20px; }
.brock-pdp .nova-variant-label-row { margin-bottom: 10px; }
.brock-pdp .nova-variant-label {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: var(--b-ink);
}
.brock-pdp .nova-variant-label-value { font-size: 14px; color: var(--b-text); }
.brock-pdp .nova-variant-label-value:empty::after { content: "choose one"; font-style: normal; color: var(--b-sale); font-weight: 600; }
.brock-pdp .nova-variant-btn {
  min-width: 52px;
  height: 46px;
  padding: 0 16px;
  font-size: 15px;
  color: var(--b-ink);
  background: var(--b-surface);
  border: 1.5px solid var(--b-line-strong);
  border-radius: var(--radius-md);
}
.brock-pdp .nova-variant-btn:hover:not(.nova-variant-btn--disabled):not(.nova-variant-btn--selected) {
  border-color: var(--b-ink);
  transform: none;
  box-shadow: none;
}
.brock-pdp .nova-variant-btn:focus-visible { outline: none; box-shadow: var(--b-focus-ring); }
/* Selected is ink, not the brand colour: the brand colour is reserved for the button that buys. */
.brock-pdp .nova-variant-btn--selected,
.brock-pdp .nova-variant-btn--disabled.nova-variant-btn--selected {
  background: var(--b-ink);
  border-color: var(--b-ink);
  color: var(--b-surface);
  box-shadow: none;
}
.brock-pdp .nova-variant-btn--disabled { background: var(--b-subtle); color: var(--color-gray-400); border-color: var(--b-line); }
.brock-pdp #notAvailable {
  padding: 10px 14px !important;
  margin-bottom: 16px !important;
  background: color-mix(in srgb, var(--b-sale) 8%, var(--b-surface)) !important;
  color: var(--b-sale) !important;
  border: 1px solid color-mix(in srgb, var(--b-sale) 30%, transparent);
  border-radius: var(--radius-md) !important;
  font-weight: 600;
}
.brock-pdp .nova-variant-attention .nova-variant-group { animation: brock-nudge 600ms var(--b-ease); }
@keyframes brock-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Quantity + add to basket */
.brock-buybox__purchase { margin-top: 4px; }
.brock-buybox__row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.brock-buybox__qty { flex: none; }
.brock-buybox__qty .nova-quantity-selector { margin: 0; }
.brock-buybox__qty .nova-quantity-select { height: 56px; min-width: 132px; font-weight: 600; }
.brock-buybox__qty .nova-quantity-selector--amount label { font-weight: 600; color: var(--b-ink); }
.brock-buybox__add { flex: 1 1 220px; }
.nova-button--lg .brock-icon { font-size: 20px; }

.brock-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 550;
  color: var(--b-ink);
}
.brock-stock__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--color-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 18%, transparent); }
.brock-stock.is-low .brock-stock__dot { background: var(--color-warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-warning) 18%, transparent); }
.brock-stock.is-low { color: var(--color-warning); }
.brock-stock.is-out .brock-stock__dot { background: var(--b-muted); box-shadow: none; }
.brock-buybox__unavailable { margin: 12px 0 0; font-size: 14px; color: var(--b-muted); }

/* Promises at the point of decision */
.brock-promises {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 16px 18px;
  list-style: none;
  background: var(--b-subtle);
  border: 1px solid var(--b-line);
  border-radius: var(--radius-lg);
  font-size: 14px;
  color: var(--b-ink);
}
.brock-promises:not(:has(li)) { display: none; }
.brock-promises li { display: flex; align-items: center; gap: 12px; }
.brock-promises .brock-icon { font-size: 20px; }

/* Collapsible detail sections */
.brock-details { margin-top: 28px; border-top: 1px solid var(--b-line); }
.brock-details__item { border-bottom: 1px solid var(--b-line); }
.brock-details__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 650;
  color: var(--b-ink);
}
.brock-details__summary::-webkit-details-marker { display: none; }
.brock-details__chevron { font-size: 20px; transition: transform 200ms var(--b-ease); }
.brock-details__item[open] .brock-details__chevron { transform: rotate(180deg); }
.brock-details__body { padding: 0 0 24px; }

.brock-prose { font-size: 15px; line-height: 1.65; color: var(--b-text); }
.brock-prose > :first-child { margin-top: 0; }
.brock-prose > :last-child { margin-bottom: 0; }
.brock-prose :is(h1, h2, h3, h4) { font-size: 16px; margin: 1.4em 0 0.5em; letter-spacing: -0.01em; }
.brock-prose ul, .brock-prose ol { padding-left: 1.2em; }
.brock-prose li + li { margin-top: 4px; }
.brock-prose img { max-width: 100%; height: auto; }

.brock-buybox__social { margin-top: 24px; }
.brock-pdp-lower { margin-top: 72px; }

/* Docked buy bar (mobile only - on desktop the buy box itself stays in view) */
.brock-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1020;
  background: var(--b-surface);
  border-top: 1px solid var(--b-line);
  box-shadow: 0 -8px 24px -12px rgba(19, 23, 20, 0.2);
  padding: 10px var(--container-padding) calc(10px + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform 260ms var(--b-ease);
}
.brock-dock.nova-sticky-buybar--visible { transform: none; }
.brock-dock__inner { display: flex; align-items: center; gap: 12px; }
.brock-dock__details { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.brock-dock__name { display: none; }
.brock-dock__variant {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--b-text);
  text-align: left;
  cursor: pointer;
}
.brock-dock__change { color: var(--b-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.brock-dock__price { font-size: 18px; font-weight: 750; color: var(--b-ink); }
.brock-dock__btn { flex: none; min-height: 50px; }
.brock-dock__btn[aria-disabled="true"] { opacity: 0.5; }
@media (min-width: 1024px) { .brock-dock { display: none; } }
@media (max-width: 1023px) { body.nova-buybar-active { padding-bottom: 76px; } }

/* ==========================================================================================
   FILTERED LISTINGS (search, merchandising nodes)
   ========================================================================================== */

.brock-plp-head--search { margin-top: 28px; }
.brock-plp-head__eyebrow { margin: 0 0 4px; font-size: 14px; font-weight: 550; color: var(--b-muted); }

.brock-toolbar__filters { position: relative; }
.brock-toolbar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--b-ink);
  color: var(--b-surface);
  font-size: 12px;
  font-weight: 700;
}
.nova-button--outline:hover .brock-toolbar__badge { background: var(--b-surface); color: var(--b-ink); }
.brock-toolbar__filters + .brock-toolbar__count { margin-right: auto; }

.brock-applied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -8px 0 24px;
  padding: 0;
  list-style: none;
}
.brock-chip--applied { background: var(--b-subtle); border-color: var(--b-line-strong); gap: 8px; padding-right: 12px; }
.brock-chip--applied .brock-icon { font-size: 15px; }
.brock-applied__clear { font-size: 14px; font-weight: 600; color: var(--b-ink); text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; }

.brock-listing { display: block; }
@media (min-width: 1024px) {
  .brock-listing.has-rail { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 40px; align-items: start; }
  .brock-listing.has-rail .brock-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brock-toolbar__filters { display: none; }
  .brock-filters { position: sticky; top: calc(var(--b-header-offset) + 76px); max-height: calc(100vh - var(--b-header-offset) - 96px); overflow-y: auto; scrollbar-width: thin; }
  .brock-filters__head, .brock-filters__foot, .brock-filters__scrim { display: none; }
}
@media (min-width: 1440px) {
  .brock-listing.has-rail .brock-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Small screens: the rail is a slide-in panel */
@media (max-width: 1023px) {
  .brock-filters { position: fixed; inset: 0; z-index: 1060; visibility: hidden; }
  .brock-filters.is-open { visibility: visible; }
  .brock-filters__scrim { position: absolute; inset: 0; background: rgba(11, 14, 12, 0.5); opacity: 0; transition: opacity 240ms var(--b-ease); }
  .brock-filters.is-open .brock-filters__scrim { opacity: 1; }
  .brock-filters__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    display: flex;
    flex-direction: column;
    background: var(--b-surface);
    box-shadow: var(--shadow-xl);
    transform: translateX(100%);
    transition: transform 280ms var(--b-ease);
  }
  .brock-filters.is-open .brock-filters__panel { transform: none; }
  .brock-filters__head { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 0 8px 0 20px; border-bottom: 1px solid var(--b-line); }
  .brock-filters__title { font-size: 17px; font-weight: 650; color: var(--b-ink); }
  .brock-filters__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px; }
  .brock-filters__foot { display: flex; gap: 10px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--b-line); }
  .brock-filters__done { flex: 1 1 auto; }
}

/* Facet rail (ui/facet-rail.html, styled in bdgr.css "ui: facet rail"): Brock's look is the default; this maps the palette. */
.nova-facetrail {
  --facet-rail-ink: var(--b-ink);
  --facet-rail-text: var(--b-text);
  --facet-rail-muted: var(--b-muted);
  --facet-rail-line: var(--b-line);
  --facet-rail-line-strong: var(--b-line-strong);
  --facet-rail-surface: var(--b-surface);
  --facet-rail-ease: var(--b-ease);
  --facet-rail-focus-ring: var(--b-focus-ring);
}

/* Category nav above the filters: parent, then sub-categories with counts or a leaf's siblings */
/* The shared category nav (ui/category-nav.html), re-skinned through its --catnav-* tokens. */
.nova-cat-nav {
  --catnav-text: var(--b-text);
  --catnav-title-color: var(--b-ink);
  --catnav-current-color: var(--b-ink);
  --catnav-hover-color: var(--b-ink);
  --catnav-list-border: 1px solid var(--b-line);
  --catnav-count-color: var(--b-muted);
  --catnav-phone-min: 44px;
  --catnav-phone-item-align: center;
}
.nova-cat-nav + .nova-facetrail { border-top: 1px solid var(--b-line); }

/* Category page: "Results for … in …", the description, and the search-in-this-category box */
.brock-plp-head__scope { margin: 8px 0 0; font-size: 15px; color: var(--b-text); }
.brock-plp-head__desc { max-width: 70ch; margin: 10px 0 0; font-size: 15px; color: var(--b-text); }
.brock-scope-search { display: flex; align-items: stretch; max-width: 420px; margin: 14px 0 0; border: 1px solid var(--b-line-strong); border-radius: var(--radius-md); background: var(--b-surface); }
.brock-scope-search:focus-within { border-color: var(--b-ink); box-shadow: var(--b-focus-ring); }
.brock-scope-search__input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--b-ink); font-size: 16px; outline: none; }
.brock-scope-search__btn { flex: none; width: 44px; border: 0; background: transparent; color: var(--b-ink); cursor: pointer; }
.brock-scope-search__btn .brock-icon { font-size: 18px; }
.brock-toolbar__count { white-space: nowrap; }
@media (max-width: 519px) {
  /* Filter + sort need the room; the filter panel's "Show N products" button carries the count. */
  .brock-toolbar__filters + .brock-toolbar__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .brock-toolbar__filters { margin-right: auto; }
}

/* ==========================================================================================
   PRODUCT RAILS (trending, featured, recently viewed)
   ========================================================================================== */

/* The shared rail (ui/rail.html), re-skinned through its --rail-* tokens. */
.nova-rail {
  --rail-title-color: var(--b-ink);
  --rail-subtitle-color: var(--b-muted);
}
.brock-card--rail .brock-card__title { font-size: 14px; }

/* ==========================================================================================
   BASKET + CHECKOUT
   ========================================================================================== */

.brock-page-title {
  margin: 28px 0 20px;
  font-size: clamp(28px, 1.6vw + 18px, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--b-ink);
}

.brock-two-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 960px) {
  .brock-two-col { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: clamp(32px, 4vw, 64px); align-items: start; }
  .brock-two-col__sticky { position: sticky; top: calc(var(--b-header-offset) + 24px); }
}
.brock-two-col__sticky > * + * { margin-top: 16px; }

.brock-alert {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: 14px;
  font-weight: 550;
}
.brock-alert--error { color: var(--b-sale); border-color: color-mix(in srgb, var(--b-sale) 30%, transparent); background: color-mix(in srgb, var(--b-sale) 6%, var(--b-surface)); }
.brock-alert--warning { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); background: color-mix(in srgb, var(--color-warning) 7%, var(--b-surface)); }
.brock-alert--success { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); background: var(--color-primary-50); }

/* Repricing placeholders written by Nova's basket-v2.js: the number only, currency from data-currency */
.currency-symbol[data-currency]::before { content: attr(data-currency); }
.currency-symbol[data-currency-after]::after { content: attr(data-currency-after); }
.loading-price { display: inline-block; min-width: 2.5em; color: var(--b-muted); }
.price-update { animation: brock-flash 300ms var(--b-ease); }
@keyframes brock-flash { from { background: var(--color-primary-50); } to { background: transparent; } }

.brock-basket-head { display: flex; align-items: baseline; gap: 12px; }
.brock-basket-head .brock-page-title { margin-bottom: 8px; }
.brock-basket-head__count { margin: 0; font-size: 15px; color: var(--b-muted); }

.brock-basket-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 56px 24px;
  text-align: center;
  color: var(--b-muted);
  border: 1px dashed var(--b-line-strong);
  border-radius: var(--radius-lg);
}
.brock-basket-empty__icon { display: inline-flex; padding: 16px; border-radius: 999px; background: var(--b-subtle); color: var(--b-ink); font-size: 28px; }
.brock-basket-empty__title { margin: 8px 0 0; font-size: 20px; color: var(--b-ink); }
.brock-basket-empty p { margin: 0 0 12px; }

.brock-lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--b-line); }
.brock-line {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--b-line);
}
@media (min-width: 720px) { .brock-line { grid-template-columns: 128px minmax(0, 1fr); gap: 24px; } }
.brock-line__media { position: relative; display: block; aspect-ratio: var(--product-image-ratio); overflow: hidden; border-radius: var(--radius-sm); background: var(--b-tile); }
.brock-line__img, .brock-line__img > div, .brock-line__placeholder { position: absolute; inset: 0; }
.brock-line__img img, .brock-line__placeholder { width: 100% !important; height: 100% !important; object-fit: contain !important; mix-blend-mode: multiply; }
.brock-line__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "info price" "donation donation" "controls controls";
  gap: 8px 16px;
  align-content: start;
}
.brock-line__info { grid-area: info; min-width: 0; }
.brock-line__price { grid-area: price; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.brock-line__donation { grid-area: donation; }
.brock-line__controls { grid-area: controls; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.brock-line__title { margin: 0; font-family: var(--font-family-base); font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.brock-line__title a { color: var(--b-ink); text-decoration: none; }
.brock-line__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.brock-line__meta, .brock-line__each { margin: 4px 0 0; font-size: 14px; color: var(--b-text); }
.brock-line__each { color: var(--b-muted); }
.brock-line__stock { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; font-weight: 550; color: var(--b-ink); }
.brock-line__stock.is-low { color: var(--color-warning); }
.brock-line__stock--note { align-items: flex-start; line-height: 1.4; }
.brock-line__stock--note.is-out { color: var(--color-error); }
.brock-line__note-icon { flex: none; margin-top: 2px; }
.brock-line__stock.is-low .brock-stock__dot { background: var(--color-warning); box-shadow: none; }
.brock-line__stock.is-out { color: var(--b-sale); }
.brock-line__stock.is-out .brock-stock__dot { background: var(--b-sale); box-shadow: none; }
.brock-line__tag { display: inline-block; margin: 8px 0 0; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--b-subtle); font-size: 12px; font-weight: 600; color: var(--b-ink); }
.brock-line__total { font-size: 17px; font-weight: 700; color: var(--b-ink); white-space: nowrap; }
.brock-line__total.is-sale { color: var(--b-sale); }
.brock-line__was { font-size: 13px; color: var(--b-muted); white-space: nowrap; }
.brock-line__qty-fixed { margin: 0; font-size: 14px; color: var(--b-muted); }
.brock-line__links { display: flex; gap: 20px; margin-left: auto; }
.brock-line__links form { margin: 0; }

.brock-linkbtn {
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--b-text);
  font: 500 14px/1.2 var(--font-family-base);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--b-line-strong);
  cursor: pointer;
}
.brock-linkbtn:hover { color: var(--b-ink); text-decoration-color: currentColor; }

.brock-stepper {
  display: inline-flex;
  align-items: center;
  margin: 0;
  border: 1.5px solid var(--b-line-strong);
  border-radius: var(--radius-md);
  background: var(--b-surface);
}
.brock-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--b-ink);
  font-size: 18px;
  cursor: pointer;
}
.brock-stepper__btn:hover:not([disabled]) { background: var(--b-subtle); }
.brock-stepper__btn[disabled] { color: var(--color-gray-400); cursor: not-allowed; }
.brock-stepper__value { --qty-input-width: 40px; min-width: 36px; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--b-ink); }

.brock-amount { display: flex; align-items: center; gap: 8px; margin: 0; }
.brock-amount__frame { display: inline-flex; align-items: center; height: 44px; border: 1.5px solid var(--b-line-strong); border-radius: var(--radius-md); padding: 0 10px; background: var(--b-surface); }
.brock-amount__prefix { color: var(--b-muted); font-weight: 600; }
.brock-amount__input { width: 72px; border: 0; background: none; font-size: 16px; font-weight: 650; color: var(--b-ink); outline: none; }

/* Summary card */
.brock-summary {
  padding: 24px;
  border: 1px solid var(--b-line);
  border-radius: var(--radius-lg);
  background: var(--b-surface);
}
.brock-page--basket .brock-summary { margin-top: 28px; }
.brock-summary__title { margin: 0 0 16px; font-family: var(--font-family-base); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--b-ink); }
.brock-totals { margin: 0; }
.brock-totals__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; font-size: 15px; }
.brock-totals__row dt { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; color: var(--b-text); }
.brock-totals__row dd { margin: 0; color: var(--b-ink); font-weight: 550; }
.brock-totals__row--muted dd { color: var(--b-muted); font-weight: 500; font-size: 14px; }
.brock-totals__free { color: var(--color-success); font-weight: 650; }
.brock-totals__info { display: inline-flex; padding: 0; border: 0; background: none; color: var(--b-muted); font-size: 16px; cursor: help; }
.brock-totals__row--grand { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--b-line); }
.brock-totals__row--grand dt { color: var(--b-ink); font-weight: 700; font-size: 16px; }
.brock-totals__row--grand dd { font-size: 22px; font-weight: 750; letter-spacing: -0.02em; }
.brock-summary__cta { margin-top: 20px; }
.brock-summary__continue { display: block; margin-top: 14px; text-align: center; font-size: 14px; font-weight: 600; color: var(--b-ink); text-decoration: underline; text-underline-offset: 3px; }
.brock-summary__promises { margin-top: 20px; }

.brock-summary--checkout { padding: 20px; background: var(--b-subtle); }
.brock-summary__items { margin: 0 0 12px; border-bottom: 1px solid var(--b-line); }
.brock-summary__toggle { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; list-style: none; cursor: pointer; }
.brock-summary__toggle::-webkit-details-marker { display: none; }
.brock-summary__toggle .brock-summary__title { margin: 0; flex: 1 1 auto; font-size: 16px; }
.brock-summary__edit { font-size: 14px; font-weight: 600; color: var(--b-ink); text-decoration: underline; text-underline-offset: 3px; }
.brock-summary__chevron { font-size: 18px; transition: transform 200ms var(--b-ease); }
.brock-summary__items[open] .brock-summary__chevron { transform: rotate(180deg); }
@media (min-width: 960px) { .brock-summary__chevron { display: none; } .brock-summary__toggle { cursor: default; pointer-events: none; } .brock-summary__edit { pointer-events: auto; } }
.brock-mini-lines { margin: 0; padding: 0 0 12px; list-style: none; display: grid; gap: 14px; }
.brock-mini-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: start; font-size: 14px; }
.brock-mini-line__media { position: relative; display: block; aspect-ratio: var(--product-image-ratio); border-radius: var(--radius-sm); background: var(--b-tile); }
.brock-mini-line__media .brock-line__img { overflow: hidden; border-radius: var(--radius-sm); }
.brock-mini-line__qty { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--b-ink); color: var(--b-surface); font-size: 12px; font-weight: 700; box-shadow: 0 0 0 2px var(--b-subtle); }
.brock-mini-line__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brock-mini-line__name { font-weight: 600; color: var(--b-ink); line-height: 1.3; }
.brock-mini-line__meta { color: var(--b-muted); }
.brock-mini-line__price { font-weight: 600; color: var(--b-ink); white-space: nowrap; }
#basket-summary.uc-is-repricing { opacity: 0.6; transition: opacity 200ms; }

/* Basket on phones: total + checkout pinned to the bottom once the summary's own button is off screen. */
.brock-bar-spacer, .brock-bar { display: none; }
@media (max-width: 959px) {
  .brock-bar-spacer { display: block; height: 80px; }
  .brock-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--b-surface);
    border-top: 1px solid var(--b-line);
    box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 200ms var(--b-ease), visibility 0s linear 200ms;
  }
  .brock-bar.is-visible { transform: none; visibility: visible; transition: transform 200ms var(--b-ease), visibility 0s; }
  .brock-bar__total { display: flex; flex-direction: column; margin: 0; line-height: 1.2; }
  .brock-bar__label { font-size: 12px; color: var(--b-muted); }
  .brock-bar__amount { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; color: var(--b-ink); }
  .brock-bar__cta { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .brock-bar, .brock-bar.is-visible { transition: none; } }

.brock-accepts { padding: 4px 4px 0; }
.brock-accepts__title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--b-text); }
.brock-accepts__title .brock-icon { font-size: 16px; }
.brock-accepts__marks { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 26px; color: var(--color-gray-500); }
.brock-accepts__marks .nova-icon { height: 1em; width: auto; fill: currentColor; }

/* Enclosed checkout header */
.brock-header--enclosed { position: sticky; }
.brock-enclosed {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 68px;
  gap: 16px;
}
.brock-enclosed__back { justify-self: start; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--b-ink); text-decoration: none; }
.brock-enclosed__back .brock-icon { font-size: 18px; }
.brock-enclosed__back:hover span { text-decoration: underline; text-underline-offset: 3px; }
.brock-enclosed__brand { justify-self: center; }
.brock-enclosed__secure { justify-self: end; display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: var(--b-ink); }
.brock-enclosed__secure .brock-icon { font-size: 18px; color: var(--color-success); }
@media (max-width: 559px) { .brock-enclosed__secure span, .brock-enclosed__back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.brock-page--checkout .nova-sitefooter__base { margin-top: 64px; }
@media (max-width: 959px) {
  /* Phones: the order summary sits above the checkout form, folded to one line. */
  .brock-page--checkout .brock-two-col__side { order: -1; }
}

/* ==========================================================================================
   CHECKOUT STEPS + FORMS
   ========================================================================================== */

.brock-page--checkout .brock-two-col__main { counter-reset: brock-step; }
.brock-step {
  counter-increment: brock-step;
  margin: 0 0 16px;
  padding: 20px 24px;
  border: 1px solid var(--b-line);
  border-radius: var(--radius-lg);
  background: var(--b-surface);
}
.brock-step.is-current { border-color: var(--b-ink); box-shadow: 0 0 0 1px var(--b-ink); padding-bottom: 28px; }
.brock-step.is-upcoming { background: var(--b-subtle); }
.brock-step.is-upcoming .brock-step__title { color: var(--b-muted); }
.brock-step__head { display: flex; align-items: center; gap: 12px; }
.brock-step__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1.5px solid var(--b-line-strong);
  color: var(--b-muted);
  font-size: 13px;
  font-weight: 700;
}
.brock-step__num::before { content: counter(brock-step); }
.brock-step.is-current .brock-step__num { background: var(--b-ink); border-color: var(--b-ink); color: var(--b-surface); }
.brock-step.is-done .brock-step__num { background: var(--color-success); border-color: var(--color-success); color: #FFFFFF; }
.brock-step.is-done .brock-step__num::before { content: "✓"; }
.brock-step__title { flex: 1 1 auto; margin: 0; font-family: var(--font-family-base); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--b-ink); }
.brock-step__change { flex: none; }
.brock-step__body { margin-top: 20px; }
.brock-step__intro { margin: 0 0 16px; color: var(--b-text); }
.brock-step__recap { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 0 40px; font-size: 15px; font-style: normal; color: var(--b-text); }
.brock-step__recap p { margin: 0; }
.brock-step__recap strong { color: var(--b-ink); font-weight: 600; }
p.brock-step__recap { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }

.brock-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 0; }
.brock-field { grid-column: span 6; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* a full-width field spans the grid at every width: on a phone it used to fall into one of the six columns
   (the delivery options shrank to a 36px sliver) */
.brock-field--full { grid-column: 1 / -1; }
@media (min-width: 560px) {
  .brock-field { grid-column: span 3; }
  .brock-field--full { grid-column: 1 / -1; }
  .brock-field--title { grid-column: span 6; }
  .brock-field--postcode { grid-column: span 3; }
}
@media (min-width: 720px) {
  .brock-field--title { grid-column: span 2; }
  .brock-field--title ~ .brock-field:not(.brock-field--full) { grid-column: span 2; }
}
.brock-form__submit { grid-column: 1 / -1; margin-top: 8px; }
@media (min-width: 560px) { .brock-form__submit { justify-self: start; min-width: 240px; } }
.brock-form__note { margin: 0; font-size: 14px; color: var(--b-text); }
.brock-label { font-size: 14px; font-weight: 600; color: var(--b-ink); }
.brock-hint { margin: 0; font-size: 13px; color: var(--b-muted); }
.brock-error { margin: 0; font-size: 13px; font-weight: 600; color: var(--b-sale); }
.brock-input.is-error, .nova-input-error { border-color: var(--b-sale) !important; }
.brock-input.is-error:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-sale) 15%, transparent); }
select.brock-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131714' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}
/* postcode-validation.js marks the postcode with Bootstrap's classes */
.brock-input.is-invalid { border-color: var(--b-sale); }
.brock-input.is-valid { border-color: var(--color-success); }

.brock-check { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; color: var(--b-ink); }
.brock-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.brock-check__box {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--b-line-strong);
  border-radius: var(--radius-sm);
  color: transparent;
  font-size: 15px;
}
.brock-check__box .brock-icon { stroke-width: 2.5; }
.brock-check input:checked + .brock-check__box { background: var(--b-ink); border-color: var(--b-ink); color: var(--b-surface); }
.brock-check input:focus-visible + .brock-check__box { box-shadow: var(--b-focus-ring); }

.brock-options { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.brock-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1.5px solid var(--b-line-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 150ms var(--b-ease), background-color 150ms var(--b-ease);
}
.brock-option:hover { border-color: var(--b-ink); }
.brock-option:has(:checked) { border-color: var(--b-ink); box-shadow: 0 0 0 1px var(--b-ink); background: var(--b-subtle); }
.brock-option__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.brock-option__radio { flex: none; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--b-line-strong); background: var(--b-surface); }
.brock-option:has(:checked) .brock-option__radio { border: 6px solid var(--b-ink); }
.brock-option:has(:focus-visible) { box-shadow: var(--b-focus-ring); }
.brock-option__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brock-option__name { font-weight: 650; color: var(--b-ink); }
.brock-option__desc { font-size: 14px; color: var(--b-muted); }
.brock-option__price { flex: none; font-weight: 650; color: var(--b-ink); }

/* Payment step (Nova markup inside a Brock step) */
#payment-card.brock-step { padding-bottom: 28px; }
#payment-card > div { margin-top: 20px; }
#payment-card #card-element,
#payment-card .StripeElement {
  padding: 14px;
  border: 1.5px solid var(--b-line-strong);
  border-radius: var(--radius-md);
  background: var(--b-surface);
}
#payment-card .StripeElement--focus { border-color: var(--b-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-ink) 12%, transparent); }
#payment-card .StripeElement--invalid { border-color: var(--b-sale); }
#payment-card .nova-input { min-height: 48px; }
#payment-card .nova-button--buy .fas { font-size: 16px; }
#payment-card form > div:last-of-type { font-size: 13px; }
#payment-card form > div:last-of-type .brock-icon { font-size: 16px; color: var(--color-success); }
.brock-enclosed .brock-header__brand { grid-area: auto; }
.brock-enclosed .brock-header__logo { height: 36px; }
.brock-step.is-upcoming { padding-block: 16px; }
.brock-step.is-upcoming > div:not(.brock-step__head) { display: none; }

/* ==========================================================================================
   ORDER CONFIRMATION
   ========================================================================================== */

.brock-confirm { padding-top: 32px; }
.brock-confirm__hero { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.brock-confirm__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: var(--color-success);
  color: #FFFFFF;
  font-size: 32px;
  animation: brock-pop 420ms var(--b-ease) both;
}
.brock-confirm__tick .brock-icon { stroke-width: 2.5; }
@keyframes brock-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.brock-confirm__title { margin: 0 0 8px; font-size: clamp(28px, 2vw + 18px, 44px); letter-spacing: -0.03em; color: var(--b-ink); }
.brock-confirm__status { margin: 0; font-size: 17px; color: var(--b-text); }
.brock-confirm__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin: 28px 0 0; padding: 20px 24px; border: 1px solid var(--b-line); border-radius: var(--radius-lg); background: var(--b-subtle); }
.brock-confirm__facts dt { font-size: 13px; font-weight: 600; color: var(--b-muted); }
.brock-confirm__facts dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; color: var(--b-ink); overflow-wrap: anywhere; }
/* the store a shop's own van or driver leaves from, under the delivery method */
.brock-confirm__from { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--b-muted); }
.brock-confirm__next { margin: 16px 0 0; color: var(--b-text); }
.brock-confirm__track { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 16px; }
.brock-confirm__track p { margin: 0; color: var(--b-text); }
.brock-confirm__account { max-width: 640px; margin: -16px auto 48px; padding: 24px; border: 1px solid var(--b-line); border-radius: var(--radius-lg); background: var(--b-subtle); text-align: center; }
.brock-confirm__account-title { margin: 0 0 8px; font-size: 20px; color: var(--b-ink); }
.brock-confirm__account p { margin: 0 0 16px; color: var(--b-text); }
.brock-confirm__account .brock-confirm__account-note { margin: 12px 0 0; font-size: 14px; color: var(--b-muted); }
.brock-confirm__grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .brock-confirm__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 48px; } }
.brock-confirm__order .brock-summary__title { display: flex; align-items: center; gap: 12px; }
.brock-confirm__saved { margin: 12px 0 0; font-weight: 600; color: var(--color-success); }
.brock-confirm__details { display: grid; gap: 24px; }
@media (min-width: 560px) { .brock-confirm__details { grid-template-columns: 1fr 1fr; } .brock-confirm__actions { grid-column: 1 / -1; } }
.brock-detail__title { margin: 0 0 8px; font-family: var(--font-family-base); font-size: 14px; font-weight: 650; letter-spacing: 0.02em; text-transform: uppercase; color: var(--b-muted); }
.brock-detail__body { display: flex; flex-direction: column; gap: 2px; margin: 0; font-style: normal; font-size: 15px; color: var(--b-text); }
.brock-detail__body strong { color: var(--b-ink); }
.brock-detail__note { margin-top: 6px; font-style: italic; }
.brock-confirm__actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }

/* ==========================================================================================
   SINGLE-PAGE CHECKOUT (Nova's unifiedCheckout extension inside Brock's checkout layout)
   Nova's template and checkout.js are used unchanged; these rules bring it onto Brock's system:
   ink for focus/selection, the brand colour only on the pay button, Brock's field styling.
   ========================================================================================== */

:root { --checkout-accent: var(--b-ink); }   /* read by checkout.js for the Stripe Payment Element */
/* The checkout steps Brock does not replace (details, address, delivery, payment, confirmation) are Nova's
   templates, skinned by tokens (see templates/nova/fragment/commerceTokens.html). Brock's: hairline cards on the
   white page, ink type, and the buy colour on the one button. Its basket and unified checkout have their own rules. */
:root {
  --nb-card-border: 1px solid var(--b-line);
  --nb-card-radius: var(--radius-lg);
  --nb-rule: var(--b-line);
  --nb-head-bg: var(--b-subtle);
  --nb-control-border: 1.5px solid var(--b-line-strong);
  --nb-card-title-size: 1.125rem;
  --nb-title-weight: 700;
  --nb-cta-bg: var(--b-buy);
  --nb-cta-fg: var(--b-on-buy);
  --nb-cta-hover-bg: var(--b-buy-hover);
  --nb-cta-radius: var(--radius-md);
  --nb-cta-weight: 650;
}

.brock-page--checkout:has(#uc-shell) .brock-page-title { display: none; }  /* the shell has its own h1 */
.brock-page #uc-shell { max-width: none !important; margin: 0 !important; padding: 0 !important; }
.brock-page #uc-shell > header { margin: 28px 0 24px !important; }
.brock-page #uc-shell > header h1 {
  font-size: clamp(28px, 1.6vw + 18px, 40px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  color: var(--b-ink) !important;
}
.brock-page #uc-shell .uc-block {
  margin-bottom: 16px;
  padding: 20px 24px;
  border: 1px solid var(--b-line);
  border-radius: var(--radius-lg);
  background: var(--b-surface);
}
.brock-page #uc-shell .uc-legend { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--b-ink); }
.brock-page #uc-shell .uc-label { font-size: 14px; font-weight: 600; color: var(--b-ink); }
.brock-page #uc-shell .uc-input {
  min-height: 48px;
  border: 1.5px solid var(--b-line-strong);
  border-radius: var(--radius-md);
  font-size: 16px;
  color: var(--b-ink);
}
.brock-page #uc-shell .uc-input:focus { border-color: var(--b-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-ink) 12%, transparent); }
.brock-page #uc-shell .uc-delivery-option { border: 1.5px solid var(--b-line-strong); border-radius: var(--radius-md); }
.brock-page #uc-shell .uc-delivery-option:hover { border-color: var(--b-ink); }
.brock-page #uc-shell .uc-delivery-option[data-selected="true"] { border-color: var(--b-ink); box-shadow: 0 0 0 1px var(--b-ink); background: var(--b-subtle); }
.brock-page #uc-shell .uc-delivery-option input[type="radio"],
.brock-page #uc-shell #uc-billing-same { accent-color: var(--b-ink); }
.brock-page #uc-shell .uc-panel-spinner { color: var(--b-ink); }
.brock-page #uc-shell .uc-returning-steps li.is-active::before { border-color: var(--b-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-ink) 15%, transparent); animation: none; }
/* The pay button is the one thing in the brand colour. */
.brock-page #uc-shell .uc-cta:not(.is-not-ready) { background: var(--b-buy); color: var(--b-on-buy); }
.brock-page #uc-shell .uc-cta:not(.is-not-ready):hover { background: var(--b-buy-hover); filter: none; }
.brock-page #uc-shell .uc-cta { min-height: 56px; font-size: 16px; }
/* Only one step is ever current: anything after the step being filled in reads as upcoming, even when
   its extension renders its full form (payment does as soon as the gateway is ready). */
.brock-step.is-current ~ .brock-step.is-current { border-color: var(--b-line); box-shadow: none; background: var(--b-subtle); padding-block: 16px; }
.brock-step.is-current ~ .brock-step.is-current > :not(.brock-step__head) { display: none; }
.brock-step.is-current ~ .brock-step.is-current .brock-step__num { background: none; border-color: var(--b-line-strong); color: var(--b-muted); }
.brock-step.is-current ~ .brock-step.is-current .brock-step__title { color: var(--b-muted); }
.brock-field[hidden] { display: none; }
.brock-form__more { grid-column: 1 / -1; justify-self: start; margin-top: -6px; }
/* Single-page checkout: its title lives inside the shell, so start both columns on the same line. */
.brock-page--checkout:has(#uc-shell) .brock-two-col { margin-top: 28px; }
.brock-page #uc-shell > header { margin-top: 0 !important; }
/* State badges from the shared generic/ fragments: keep them compact inside the flex column. */
.brock-detail__body > .badge,
.brock-detail__body > .label { align-self: flex-start; margin-bottom: 4px; }
@media (max-width: 959px) { .brock-page--checkout .brock-accepts { display: none; } }

/* ==========================================================================================
   ACCOUNT + CONTENT PAGES (Nova templates inside Brock's page.html)
   Account actions aren't purchases, so their primary buttons are ink, not the brand colour.
   ========================================================================================== */
.brock-page--account .nova-btn-primary,
.brock-page--account .btn-primary {
  background: var(--b-ink) !important;
  border-color: var(--b-ink) !important;
  color: var(--b-surface) !important;
}
.brock-page--account .nova-btn-primary:hover,
.brock-page--account .btn-primary:hover { background: var(--color-gray-800) !important; }
.brock-pdp .nova-variant-group--missing .nova-variant-label { color: var(--b-sale); }
.brock-pdp .nova-variant-group--missing .nova-variant-btn:not(.nova-variant-btn--disabled):not(.nova-variant-btn--selected) { border-color: var(--b-sale); }
.brock-pdp .nova-variant-label-value:empty::after { content: none; }

/* ==========================================================================================
   "ADDED TO BASKET" PANEL (pop-over under the header basket on desktop, bottom sheet on phones)
   It confirms one item, so it is kept visibly unlike the mini basket below: compact, hung from the
   basket icon by a green notch, a success rule along its top, and a light scrim that leaves the page
   readable. brock.js sets --b-added-top / --b-added-right / --b-added-notch from the basket's position.
   ========================================================================================== */

.brock-added { position: fixed; inset: 0; z-index: 1070; }
.brock-added[hidden] { display: none; }
.brock-added__scrim { position: absolute; inset: 0; background: rgba(11, 14, 12, 0.45); opacity: 0; transition: opacity 240ms var(--b-ease); }
.brock-added.is-open .brock-added__scrim { opacity: 1; }
.brock-added__panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 24px 24px;
  background: var(--b-surface);
  box-shadow: var(--shadow-xl);
  transition: transform 280ms var(--b-ease);
}
@media (min-width: 720px) {
  .brock-added__scrim { background: rgba(11, 14, 12, 0.14); }
  .brock-added__panel {
    top: var(--b-added-top, 88px);
    right: var(--b-added-right, 24px);
    width: 380px;
    max-height: calc(100vh - var(--b-added-top, 88px) - 16px);
    overflow-y: auto;
    gap: 16px;
    padding: 16px 20px 20px;
    border: 1px solid var(--b-line);
    border-top: 3px solid var(--color-success);
    border-radius: var(--radius-lg);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    transition: transform 220ms var(--b-ease), opacity 180ms var(--b-ease);
  }
  .brock-added.is-open .brock-added__panel { opacity: 1; }
  /* The notch sits behind the panel, so only its upper half shows, pointing at the basket. */
  .brock-added::before {
    content: "";
    position: absolute;
    top: calc(var(--b-added-top, 88px) - 6px);
    right: var(--b-added-notch, 40px);
    width: 12px;
    height: 12px;
    background: var(--color-success);
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 180ms var(--b-ease);
  }
  .brock-added.is-open::before { opacity: 1; }
  .brock-added__item { padding: 12px 0; }
}
@media (max-width: 719px) {
  .brock-added__panel {
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88vh;
    overflow-y: auto;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(100%);
  }
}
.brock-added.is-open .brock-added__panel { transform: none; }
.brock-added__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-right: -10px; }
.brock-added__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 700; color: var(--b-ink); }
.brock-added__title:focus { outline: none; }
.brock-added__tick { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--color-success); color: #FFFFFF; font-size: 16px; }
.brock-added__tick .brock-icon { stroke-width: 2.5; }
.brock-added__item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 0; border-block: 1px solid var(--b-line); }
.brock-added__media { display: block; aspect-ratio: var(--product-image-ratio); border-radius: var(--radius-sm); background: var(--b-tile); overflow: hidden; }
.brock-added__img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.brock-added__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.brock-added__name { font-weight: 600; color: var(--b-ink); line-height: 1.35; }
.brock-added__meta { font-size: 14px; color: var(--b-muted); }
.brock-added__price { font-weight: 700; color: var(--b-ink); white-space: nowrap; }
.brock-added__totals { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 15px; }
.brock-added__totals[hidden] { display: none; }
.brock-added__totals dt { font-weight: 500; color: var(--b-text); }
.brock-added__count { color: var(--b-muted); }
.brock-added__totals dd { margin: 0; font-size: 18px; font-weight: 750; color: var(--b-ink); }
.brock-added__actions { display: grid; gap: 10px; }
.brock-added__continue { justify-self: center; }
.brock-added__promise { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border-radius: var(--radius-md); background: var(--b-subtle); font-size: 14px; color: var(--b-ink); }
.brock-added__promise .brock-icon { font-size: 18px; }
.brock-added__title:focus-visible { box-shadow: none; }
.brock-added__others {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: -6px;
  padding: 10px 12px;
  border: 1px solid var(--b-line);
  border-radius: var(--radius-md);
  background: var(--b-subtle);
  color: var(--b-ink);
  font: 500 14px/1.3 var(--font-family-base);
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms var(--b-ease), background-color 150ms var(--b-ease);
}
.brock-added__others:hover { border-color: var(--b-line-strong); background: var(--b-tile); }
.brock-added__others[hidden] { display: none; }
.brock-added__others .brock-icon { flex: none; font-size: 18px; color: var(--b-muted); }

/* ==========================================================================================
   MINI BASKET (the whole basket, opened from the header basket)
   A full-height drawer on every screen size: titled "Your basket" with an item count, each line
   editable in place, subtotal and checkout pinned to the foot. Prices still being worked out show a
   shimmer (.is-loading) until brock.js fills them from /rest/order/prices.
   ========================================================================================== */

/* The shared mini basket (ui/mini-basket.html), re-skinned through its --mini-basket-* tokens.
   Defaults are Brock's; only its palette and link-button colour are set here. */
.nova-mini-basket,
.nova-mini-basket__content {
  --mini-basket-ink: var(--b-ink);
  --mini-basket-muted: var(--b-muted);
  --mini-basket-sale: var(--b-sale);
  --mini-basket-line: var(--b-line);
  --mini-basket-line-strong: var(--b-line-strong);
  --mini-basket-tile: var(--b-tile);
  --mini-basket-subtle: var(--b-subtle);
  --mini-basket-surface: var(--b-surface);
  --mini-basket-ease: var(--b-ease);
  --mini-basket-remove-color: var(--b-text);
}


/* A table in page content (markdown) scrolls sideways inside the page instead of widening it on a phone */
@media (max-width: 640px) {
  .brock-wrap > table:not([class]) { display: block; max-width: 100%; overflow-x: auto; }
}

/* Clear basket on the basket page: a quiet toggle under the lines that opens the question in place */
.brock-clear { display: flex; justify-content: flex-end; padding-top: 8px; }
.brock-clear__box { text-align: right; }
.brock-clear__toggle { display: inline-block; cursor: pointer; list-style: none; font-size: 14px; color: var(--b-muted); text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; }
.brock-clear__toggle::-webkit-details-marker { display: none; }
.brock-clear__toggle:hover { color: var(--b-ink); }
.brock-clear__close, .brock-clear__box[open] .brock-clear__open { display: none; }
.brock-clear__box[open] .brock-clear__close { display: inline; }
.brock-clear__form { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px; margin: 0; }
.brock-clear__form p { margin: 0; font-weight: 600; }

/* Account pages (ui/auth-head.html: sign in, register, password pages), Brock's variant */
:root {
  --auth-page-bg: var(--b-subtle);
  --auth-card-border: 1px solid var(--b-line);
  --auth-input-border: 1.5px solid var(--b-line-strong);
  --auth-focus: var(--b-ink);
  --auth-focus-ring: color-mix(in srgb, var(--b-ink) 12%, transparent);
  --auth-link: var(--b-ink);
  --auth-primary-bg: var(--b-ink);
  --auth-primary-ink: var(--b-surface);
}

/* Language menu (ui/language-menu.html) */
.nova-lang {
  --lang-toggle-color: var(--b-ink);
  --lang-toggle-hover-bg: var(--b-subtle);
  --lang-focus: var(--b-ink);
  --lang-menu-bg: var(--b-surface);
  --lang-menu-border: var(--b-line);
  --lang-option-color: var(--b-ink);
  --lang-option-hover-bg: var(--b-subtle);
  --lang-option-hover-color: var(--b-ink);
}

/* JSON components: the warning background is a dark orange here, so its text and headings are white
   (Nova's default is dark text, for its amber). The status colours are dark enough for white text, so a
   primary button on them is white with the status colour as its label (Nova's text is ink). See
   "JSON components: semantic tokens" in bdgr.css. */
:root {
  --json-bg-warning-text: white;
  --json-bg-success-text: white;
  --json-bg-error-text: white;
}