/* ==========================================================================
   hike-base component kit (Theme Library, HK-ECOM-THEMES-LIB-01)
   Structural variants a theme composes into its own identity: headers, heroes, product cards, home sections and
   footers. Every theme loads this file, so a kit section added to an older theme is styled; rules that would change
   a whole page are scoped to body.hike-kit (themes with design.layout.kit or card_style), so older themes render as before.
   Colours, fonts, radii and widths are design tokens (see base.css). Mobile first; breakpoints 600 / 900 / 1200 px.
   Card variants are chosen by the design token layout.card_style (partials/product_card.hiketl).
   ========================================================================== */

/* ---------- Shared helpers ---------- */
.kit-eyebrow { display: inline-block; font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-text); margin-bottom: 14px; }
.kit-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.kit-tiles { display: grid; gap: var(--layout-grid-gap, 16px); }
.kit-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.kit-placeholder { background: var(--color-background-alt); }
.kit-link { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.kit-link:hover { text-decoration: underline; }

/* ==========================================================================
   Headers
   ========================================================================== */

/* Split: the menu on both sides of a centred logo, or all on one side (menu_align); drawer on phones. */
.hdr-split .site-header__inner { grid-template-columns: auto 1fr auto; }
.hdr-split__side { display: none; }
@media (min-width: 900px) {
  .hdr-split .site-header__inner { grid-template-columns: 1fr auto 1fr; }
  .hdr-split__side { display: flex; flex-wrap: wrap; gap: 4px clamp(14px, 2vw, 32px); align-items: center; list-style: none; margin: 0; padding: 0; }
  .hdr-split__side--left { justify-content: flex-start; }
  .hdr-split__side--right { justify-content: flex-end; }
  .hdr-split__side > li > a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-weight: 500; letter-spacing: .04em; color: inherit; padding: 8px 0; }
  .hdr-split__side > li > a:hover, .hdr-split__side > li > a[aria-current=page] { text-decoration: underline; text-underline-offset: 6px; }
  .hdr-split__side .site-nav__dropdown { z-index: 1; }
  .hdr-split__side--right .site-nav__dropdown { left: auto; right: 0; }
  /* All on the right: half the bar beside a centred logo is too narrow for a whole menu, so the logo moves left. */
  .hdr-split.site-header--menu-right .hdr-split__side--left { display: none; }
  .hdr-split.site-header--menu-right .site-header__inner { grid-template-columns: auto 1fr auto; }
  .hdr-split.site-header--menu-right .site-header__logo { grid-column: 1; justify-self: start; }
  .hdr-split.site-header--menu-right .hdr-split__side--right { grid-column: 2; padding-right: 8px; }
  .hdr-split .site-header__logo { justify-self: center; }
  .hdr-split .site-header__actions { grid-column: 3; grid-row: 1; justify-self: end; }
  .hdr-split .hdr-split__side--right { grid-column: 3; grid-row: 1; justify-self: end; padding-right: 150px; }
}

/* The base header with a centred logo (logo_position: center): keep account and cart at the right. base.css leaves
   them unplaced, so they flow left of the logo; library themes get the fix here (older themes keep base.css as is). */
@media (min-width: 900px) { .hike-kit .site-header--center .site-header__actions { grid-column: 3; grid-row: 1; justify-self: end; } }

/* Split header: the right half of the menu and the icons (search, account, cart) sit side by side in one row, so a
   search box or a long menu never covers the links. This replaces the older fixed gap (padding-right) for the icons,
   also where a theme's own CSS still sets it. */
.hdr-split__end { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: clamp(12px, 1.6vw, 28px); }
.hdr-split .hdr-split__end .hdr-split__side--right { grid-column: auto; grid-row: auto; justify-self: auto; padding-right: 0; }
.hdr-split .hdr-split__end .site-header__actions { grid-column: auto; grid-row: auto; justify-self: auto; flex: none; }
.hdr-split .hdr-split__end .hdr-split__side--right { flex-wrap: nowrap; white-space: nowrap; }
.hdr-split .hdr-split__end .site-search__form input { width: clamp(96px, 9vw, 180px); }

/* Minimal: logo, a menu button that always opens the drawer, and the cart. Nothing else. */
.hdr-minimal .site-header__inner { grid-template-columns: auto 1fr auto; min-height: 64px; }
.hdr-minimal .site-header__toggle { display: inline-flex; }
.hdr-minimal .site-header__logo { justify-self: center; }
.hdr-minimal .site-nav { display: none; }
.hdr-minimal__menu-label { display: none; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-left: 6px; }
@media (min-width: 900px) { .hdr-minimal__menu-label { display: inline; } }
/* show_menu_links: on computers the menu's links replace the Menu button, the logo stays centred between two equal
   halves, and search, account and cart keep the right edge. A menu too long even for "More" brings the button back
   (site-header--compact, theme.js). */
@media (min-width: 900px) {
  .hdr-minimal--links .site-header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .hdr-minimal--links .site-header__toggle { display: none; justify-self: start; }
  .hdr-minimal--links .site-nav { display: flex; justify-content: flex-start; min-width: 0; }
  .hdr-minimal--links .site-nav__list { flex-wrap: nowrap; }
  .hdr-minimal--links .site-nav__link { white-space: nowrap; }
  .hdr-minimal--links .site-header__actions { justify-self: end; }
}

/* Masthead: the store name set huge across the page, a line of small print, then the menu between rules. */
.hdr-masthead { border-bottom: 0; }
.hdr-masthead__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 10px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--color-outline); }
.hdr-masthead__top .site-header__actions { gap: 4px; }
.hdr-masthead__name { display: block; text-align: center; text-decoration: none; color: inherit; font-family: var(--font-heading-family); font-weight: var(--font-heading-weight, 700); font-size: clamp(2.6rem, 1rem + 9vw, 7.5rem); line-height: .95; letter-spacing: -.03em; padding-block: 18px 12px; overflow-wrap: anywhere; }
.hdr-masthead__name img { max-height: 90px; width: auto; }
.hdr-masthead__nav { border-top: 1px solid var(--color-heading); border-bottom: 1px solid var(--color-heading); }
.hdr-masthead__nav .site-nav { display: none; }
.hdr-masthead__nav .site-header__toggle { display: inline-flex; margin: 6px 0; }
@media (min-width: 900px) {
  .hdr-masthead__nav .site-nav { display: flex; justify-content: center; }
  .hdr-masthead__nav .site-nav__link { padding: 12px 18px; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
  .hdr-masthead__nav .site-header__toggle { display: none; }
}

/* Pill: a rounded bar floating inside a margin, sticky, with a solid shadow. */
.hdr-pill { background: transparent; border: 0; padding: 12px var(--layout-spacing, 16px) 0; }
.hdr-pill .site-header__inner { background: var(--color-header-background); border: 2px solid var(--color-heading); border-radius: 999px; min-height: 60px; padding-inline: 12px 8px; box-shadow: 4px 4px 0 var(--color-heading); }
.hdr-pill .site-header__logo { font-weight: 900; }
.hdr-pill .site-nav__link { border-radius: 999px; padding: 8px 14px; font-weight: 700; }
.hdr-pill .site-nav__link:hover, .hdr-pill .site-nav__link[aria-current=page] { background: var(--color-accent); color: var(--color-on-accent); }
.hdr-pill .icon-button { border-radius: 999px; }
.hdr-pill.is-scrolled { box-shadow: none; }
@media (min-width: 900px) { .hdr-pill .site-header__inner { padding-inline: 24px 12px; } }

/* Marketplace: a utility strip, logo + a big search box + account/cart, and the categories in a bar below. */
.hdr-market__strip { font-size: .78rem; background: var(--color-sub-footer-background); color: var(--color-footer-text, #eee); }
.hdr-market__strip .container { display: flex; justify-content: space-between; gap: 16px; min-height: 30px; align-items: center; }
.hdr-market__strip a { color: inherit; text-decoration: none; }
.hdr-market .site-header__inner { grid-template-columns: auto 1fr auto; min-height: 68px; gap: 10px 16px; }
.hdr-market__search { grid-column: 1 / -1; grid-row: 2; padding-bottom: 12px; }
.hdr-market__search form { display: flex; border: 2px solid var(--color-primary); border-radius: var(--shape-input-radius, 8px); overflow: hidden; background: var(--color-background); }
.hdr-market__search input { flex: 1; min-width: 0; border: 0; padding: 10px 14px; font: inherit; background: transparent; color: var(--color-text); }
.hdr-market__search input:focus { outline: none; }
.hdr-market__search button { border: 0; background: var(--color-primary); color: var(--color-on-primary); padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.hdr-market .site-nav { display: none; }
.hdr-market__cats { background: var(--color-primary); color: var(--color-on-primary); }
.hdr-market__cats .container > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.hdr-market__cats .container > ul::-webkit-scrollbar { display: none; }
.hdr-market__cats .container > ul > li > a { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; white-space: nowrap; text-decoration: none; color: inherit; font-size: .88rem; font-weight: 600; }
.hdr-market__cats .container > ul > li > a:hover, .hdr-market__cats .container > ul > li > a[aria-current=page] { background: rgba(255, 255, 255, .14); }
.hdr-market__cats .site-header__toggle { display: inline-flex; color: inherit; }
/* menu_align: auto margins rather than justify-content, so a bar too long for the screen still scrolls from its start. */
.site-header--menu-center .hdr-market__cats .container > ul, .site-header--menu-right .hdr-market__cats .container > ul { flex: 1 1 auto; }
.site-header--menu-center .hdr-market__cats .container > ul > li:first-child, .site-header--menu-right .hdr-market__cats .container > ul > li:first-child { margin-left: auto; }
.site-header--menu-center .hdr-market__cats .container > ul > li:last-child { margin-right: auto; }
@media (min-width: 900px) {
  .hdr-market .site-header__inner { grid-template-columns: auto minmax(280px, 1fr) auto; }
  .hdr-market__search { grid-column: 2; grid-row: 1; padding: 0 24px; }
  .hdr-market__cats .site-header__toggle { display: none; }
}

/* Transparent: over a full-screen first section (full-screen hero or slideshow) it is see-through and white, below the
   announcement bar, with the section slid up beneath it; it turns solid once the page scrolls. Over any other first
   section it is an ordinary solid header, so it is always readable. theme.js sets --header-height. */
.hdr-transparent { transition: background .25s ease, color .25s ease, border-color .25s ease; }
body:has(.hdr-transparent):has(.hike-region--main > .hike-section:first-child:is(.hike-section--hero_full, .hike-section--slideshow)) .hike-region--main > .hike-section:first-child { margin-top: calc(-1 * var(--header-height, 72px)); }
body:has(.hike-region--main > .hike-section:first-child:is(.hike-section--hero_full, .hike-section--slideshow)) .hdr-transparent:not(.is-scrolled) { background: transparent; border-color: transparent; color: #fff; }
body:has(.hike-region--main > .hike-section:first-child:is(.hike-section--hero_full, .hike-section--slideshow)) .hdr-transparent:not(.is-scrolled) :is(.site-header__logo, .site-nav__link, .icon-button) { color: inherit; }
body:has(.hike-region--main > .hike-section:first-child:is(.hike-section--hero_full, .hike-section--slideshow)) .hdr-transparent:not(.is-scrolled) .site-nav__link:hover { background: rgba(255, 255, 255, .14); }
body:has(.hike-region--main > .hike-section:first-child:is(.hike-section--hero_full, .hike-section--slideshow)) .hdr-transparent:not(.is-scrolled) .site-search__form { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); color: inherit; }
body:has(.hike-region--main > .hike-section:first-child:is(.hike-section--hero_full, .hike-section--slideshow)) .hdr-transparent:not(.is-scrolled) .site-search__form input { color: inherit; }
body:has(.hike-region--main > .hike-section:first-child:is(.hike-section--hero_full, .hike-section--slideshow)) .hdr-transparent:not(.is-scrolled) .site-search__form input::placeholder { color: inherit; opacity: .8; }
.hdr-transparent.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .08); }
.hdr-transparent .site-nav__dropdown { color: var(--color-text); }

/* Two-row: logo and actions in the first row, a full-width navigation bar in a second colour beneath. */
.hdr-tworow .site-header__inner { grid-template-columns: auto 1fr auto; }
.hdr-tworow .site-header__inner .site-nav { display: none; }
.hdr-tworow__bar { background: var(--color-primary); color: var(--color-on-primary); }
.hdr-tworow__bar .container { display: flex; align-items: center; gap: 8px; }
.hdr-tworow__bar .site-nav { display: none; }
.hdr-tworow__bar .site-header__toggle { display: inline-flex; color: inherit; margin-block: 4px; }
.hdr-tworow__bar .site-nav__link { color: inherit; border-radius: 0; padding: 12px 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; }
.hdr-tworow__bar .site-nav__link:hover, .hdr-tworow__bar .site-nav__link[aria-current=page] { background: rgba(0, 0, 0, .18); }
.hdr-tworow__bar .site-nav__dropdown { color: var(--color-text); }
.hdr-tworow__note { margin-left: auto; font-size: .82rem; opacity: .9; white-space: nowrap; }
@media (min-width: 900px) {
  .hdr-tworow__bar .site-nav { display: flex; flex: 1 1 auto; }
  .hdr-tworow__bar .site-header__toggle { display: none; }
}

/* ==========================================================================
   Heroes
   ========================================================================== */

/* Split: text beside an image. --split-ratio sets the text column; the image shape is a token (shape.card_radius). */
.hero-split { display: grid; gap: 32px; align-items: center; padding-block: clamp(32px, 6vw, 72px); }
.hero-split__media { border-radius: var(--hero-split-radius, var(--shape-card-radius, 12px)); overflow: hidden; aspect-ratio: var(--hero-split-ratio, 4 / 3); background: var(--color-background-alt); }
.hero-split__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-split__content h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, var(--font-heading-size, 56px)); margin-bottom: .4em; }
.hero-split__content p { font-size: 1.1rem; max-width: 48ch; }
.hero-split__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.hero-split__list li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.hero-split__list .icon { color: var(--color-accent-text); flex: none; }
.hero-split--reverse .hero-split__media { order: -1; }
@media (min-width: 900px) {
  .hero-split { grid-template-columns: var(--hero-split-columns, 1fr 1fr); gap: 64px; }
  .hero-split--reverse .hero-split__media { order: 0; }
  .hero-split--reverse .hero-split__content { order: 2; }
}

/* Masthead (editorial): an issue line, a headline across the page, a column of text beside the picture. */
.hero-masthead { padding-block: clamp(28px, 5vw, 56px) 0; }
.hero-masthead__issue { display: flex; justify-content: space-between; gap: 12px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--color-heading); padding-bottom: 10px; margin-bottom: 24px; }
.hero-masthead h1 { font-size: clamp(2.4rem, 1.5rem + 5vw, 5.2rem); line-height: 1; letter-spacing: -.025em; margin-bottom: 28px; max-width: 18ch; }
.hero-masthead__grid { display: grid; gap: 28px; align-items: start; }
.hero-masthead__media { aspect-ratio: var(--hero-masthead-ratio, 16 / 10); background: var(--color-background-alt); overflow: hidden; }
.hero-masthead__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-masthead__text { font-size: 1.02rem; column-gap: 32px; }
.hero-masthead__text p:first-of-type::first-letter { font-family: var(--font-heading-family); font-size: 3.4em; float: left; line-height: .8; padding: .06em .1em 0 0; color: var(--color-heading); }
.hero-masthead__caption { font-size: .8rem; color: var(--color-subheading); margin-top: 8px; letter-spacing: .04em; }
@media (min-width: 900px) {
  .hero-masthead__grid { grid-template-columns: 2fr 1fr; }
  .hero-masthead__text { columns: 1; }
}
@media (min-width: 1200px) { .hero-masthead__text { font-size: 1.06rem; } }

/* Bento: a big tile with the picture and headline, and small tiles for facts, links and a product. */
.hero-bento { padding-block: clamp(20px, 3vw, 36px); }
.hero-bento__grid { display: grid; gap: var(--layout-grid-gap, 16px); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(120px, auto); }
.bento-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; border-radius: var(--shape-card-radius, 12px); background: var(--color-background-alt); overflow: hidden; min-height: 150px; text-decoration: none; color: inherit; isolation: isolate; }
.bento-tile--main { grid-column: 1 / -1; min-height: 340px; color: #fff; background: var(--color-primary); }
.bento-tile--main h1 { color: inherit; font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); max-width: 16ch; margin-bottom: .3em; }
.bento-tile--main p { color: inherit; max-width: 46ch; font-size: 1.05rem; opacity: .92; }
.bento-tile__media { position: absolute; inset: 0; z-index: -2; }
.bento-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.bento-tile--main::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .62) 100%); }
.bento-tile--primary { background: var(--color-primary); color: var(--color-on-primary); }
.bento-tile--accent { background: var(--color-accent); color: var(--color-on-accent); }
.bento-tile--dark { background: var(--color-heading); color: var(--color-background); }
.bento-tile__value { font-family: var(--font-heading-family); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.bento-tile__label { font-size: .86rem; opacity: .85; margin-top: 6px; }
.bento-tile h2, .bento-tile h3 { color: inherit; font-size: 1.15rem; margin: 0 0 4px; }
.bento-tile .price { color: inherit; }
.bento-tile--image { padding: 0; }
.bento-tile--image img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.bento-tile a.kit-link { color: inherit; margin-top: 8px; }
/* A number or text tile with a picture: the picture fills the tile and a shade keeps the words readable, whatever the tile colour or theme */
.bento-tile.bento-tile--photo { color: #fff; border-color: transparent; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.bento-tile--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .66) 100%); }
.bento-tile.bento-tile--photo .bento-tile__value, .bento-tile.bento-tile--photo .bento-tile__label, .bento-tile.bento-tile--photo a.kit-link { color: inherit; opacity: 1; }
.hero-bento .bento-tile--wide { grid-column: 1 / -1; } /* phones and tablets: a wide tile takes the whole row */
@media (min-width: 900px) {
  .hero-bento__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); }
  .bento-tile--main { grid-column: span 2; grid-row: span 2; min-height: 420px; }
  .hero-bento .bento-tile--wide { grid-column: span 2; }
}

/* Sticker: lines of huge type, an accent sticker rotated over them, buttons beneath. */
.hero-sticker { position: relative; overflow: hidden; padding-block: clamp(40px, 8vw, 96px); text-align: left; }
.hero-sticker__lines { font-family: var(--font-heading-family); font-weight: var(--font-heading-weight, 900); font-size: clamp(2.8rem, 1rem + 9vw, 8rem); line-height: .92; letter-spacing: -.04em; color: var(--color-heading); text-transform: uppercase; margin: 0; }
.hero-sticker__lines span { display: block; }
.hero-sticker__lines .is-outline { color: transparent; -webkit-text-stroke: 2px var(--color-heading); }
.hero-sticker__lines .is-accent { color: var(--color-accent-text); }
.hero-sticker p { font-size: 1.15rem; max-width: 42ch; margin-top: 20px; }
.hero-sticker__badge { position: absolute; right: clamp(8px, 6vw, 80px); top: clamp(16px, 5vw, 60px); width: clamp(96px, 16vw, 170px); aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent); display: grid; place-items: center; text-align: center; font-weight: 800; font-size: clamp(.78rem, .6rem + .6vw, 1rem); line-height: 1.15; padding: 14px; transform: rotate(var(--sticker-rotate, 12deg)); box-shadow: 4px 4px 0 var(--color-heading); border: 2px solid var(--color-heading); z-index: 1; }
.hero-sticker__media { position: absolute; right: -4%; bottom: -10%; width: min(46%, 520px); aspect-ratio: 1; opacity: .95; pointer-events: none; }
.hero-sticker__media img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 899px) { .hero-sticker__media { display: none; } }

/* Spotlight: a tall, narrow picture in the centre; small eyebrow above, headline and buttons below. */
.hero-spotlight { text-align: center; padding-block: clamp(28px, 5vw, 64px) clamp(24px, 4vw, 48px); }
.hero-spotlight__media { width: min(100%, var(--hero-spotlight-width, 520px)); aspect-ratio: var(--hero-spotlight-ratio, 4 / 5); margin: 0 auto 28px; overflow: hidden; background: var(--color-background-alt); border-radius: var(--shape-card-radius, 0); }
.hero-spotlight__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-spotlight h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, var(--font-heading-size, 48px)); max-width: 20ch; margin-inline: auto; }
.hero-spotlight p { max-width: 48ch; margin-inline: auto; }
.hero-spotlight .kit-actions { justify-content: center; }
.hero-spotlight__rule { width: 56px; height: 1px; background: var(--color-accent); margin: 18px auto; }

/* Full-screen: the picture fills the viewport, text sits at the bottom, a scroll cue. */
.hero-full { position: relative; min-height: var(--hero-full-height, 92vh); display: grid; align-items: end; color: #fff; isolation: isolate; overflow: hidden; }
.hero-full__media { position: absolute; inset: 0; z-index: -2; background: var(--color-heading); }
.hero-full__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-full::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, var(--hero-overlay, .5)) 100%); }
.hero-full__content { padding-block: clamp(40px, 8vw, 96px); max-width: 720px; }
.hero-full--center .hero-full__content { margin-inline: auto; text-align: center; }
.hero-full--center .kit-actions { justify-content: center; }
.hero-full h1, .hero-full .kit-eyebrow { color: #fff; }
.hero-full h1 { font-size: clamp(2.4rem, 1.4rem + 4.5vw, var(--font-heading-size, 72px)); margin-bottom: .3em; }
.hero-full p { font-size: 1.15rem; max-width: 50ch; opacity: .95; }
.hero-full__cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 14px; }
.hero-full__cue::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: kit-cue 1.6s ease-in-out infinite; }
@keyframes kit-cue { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }

/* Twin: one large promotion tile and two stacked beside it. */
.hero-twin { padding-block: clamp(16px, 3vw, 32px); }
.hero-twin__grid { display: grid; gap: var(--layout-grid-gap, 16px); }
.promo-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; padding: 22px; border-radius: var(--shape-card-radius, 12px); overflow: hidden; background: var(--color-accent); color: var(--color-on-accent); text-decoration: none; isolation: isolate; }
.promo-tile--main, .hero-twin__grid > .promo-tile:first-child { min-height: 360px; }
.promo-tile__media { position: absolute; inset: 0; z-index: -2; }
.promo-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.promo-tile--has-image { color: #fff; }
.promo-tile--has-image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .6) 100%); }
.promo-tile h1, .promo-tile h2, .promo-tile h3 { color: inherit; margin: 0 0 4px; font-size: 1.3rem; }
.promo-tile--main h2, .hero-twin__grid > .promo-tile:first-child h2 { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.8rem); }
.promo-tile p { margin: 0; opacity: .92; }
.promo-tile .btn { margin-top: 14px; align-self: flex-start; }
.promo-tile--tint { background: var(--color-background-alt); color: var(--color-heading); }
.promo-tile--primary { background: var(--color-primary); color: var(--color-on-primary); }
@media (min-width: 900px) {
  .hero-twin__grid { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
  .hero-twin__grid > .promo-tile:first-child { grid-row: 1 / 3; min-height: 440px; }
}

/* ==========================================================================
   Product card variants (layout.card_style)
   ========================================================================== */
.pc { position: relative; display: flex; flex-direction: column; height: 100%; }
.pc__media { position: relative; display: block; aspect-ratio: var(--card-image-ratio, 1); overflow: hidden; background: var(--color-background-alt); }
.pc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pc:hover .pc__media img { transform: scale(1.04); }
.pc__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pc__body { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; flex: 1; }
.pc__brand { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--color-subheading); margin: 0; }
.pc__title { font-size: 1rem; font-weight: 600; margin: 0; line-height: 1.35; font-family: var(--font-body-family); letter-spacing: 0; }
.pc__title a { text-decoration: none; color: var(--color-heading); }
.pc__title a::after { content: ""; position: absolute; inset: 0; }
.pc__title a:focus-visible { outline: none; }
.pc:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pc .price { margin-top: auto; padding-top: 4px; }
.pc--sold-out .pc__media img { opacity: .6; }
.pc__button { margin-top: 12px; pointer-events: none; }
.pc__index { font-family: var(--font-heading-family); font-size: .8rem; letter-spacing: .1em; color: var(--color-subheading); }

/* minimal: no frame, square image, left-aligned small type */
.pc--minimal .pc__body { padding-top: 10px; gap: 2px; }
.pc--minimal .pc__title { font-weight: 500; font-size: .94rem; }
.pc--minimal .price { font-size: .92rem; }

/* portrait: 3:4 image, centred, serif name */
.pc--portrait .pc__media { --card-image-ratio: 3 / 4; }
.pc--portrait .pc__body { text-align: center; align-items: center; }
.pc--portrait .pc__title { font-family: var(--font-heading-family); font-weight: 500; font-size: 1.05rem; }
.pc--portrait .pc__brand { order: -1; }

/* overlay: name and price on the picture, revealed on a dark gradient */
.pc--overlay { border-radius: var(--shape-card-radius, 0); overflow: hidden; color: #fff; }
.pc--overlay .pc__media { --card-image-ratio: 4 / 5; }
.pc--overlay .pc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .7) 100%); }
.pc--overlay .pc__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; z-index: 1; flex: none; }
.pc--overlay .pc__title a, .pc--overlay .price, .pc--overlay .pc__brand { color: #fff; }
.pc--overlay .price__compare { color: rgba(255, 255, 255, .7); }
.pc--overlay .price__current, .pc--overlay .price__from, .pc--overlay .price--on-sale .price__current { color: #fff; } /* base price colours are for light cards */
.pc--overlay .pc__title { font-size: 1.05rem; }

/* boxed: a bordered card with a button, built to convert */
.pc--boxed { border: 1px solid var(--color-outline); border-radius: var(--shape-card-radius, 12px); background: var(--color-card-background, var(--color-background)); overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; }
.pc--boxed:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, .08); border-color: var(--color-primary); }
.pc--boxed .pc__body { padding: 12px 14px 14px; }
.pc--boxed .pc__button { width: 100%; }
.pc--boxed:hover .pc__button { background: var(--color-primary); color: var(--color-on-primary); }
.pc--boxed .pc__rating { color: var(--color-accent-text); font-size: .8rem; letter-spacing: .05em; }

/* editorial: a numbered index, a hairline above, the name in the display face */
.pc--editorial .pc__body { border-top: 1px solid var(--color-heading); margin-top: 12px; padding-top: 10px; }
.pc--editorial .pc__head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.pc--editorial .pc__title { font-family: var(--font-heading-family); font-weight: 500; font-size: 1.15rem; letter-spacing: -.01em; }
.pc--editorial .pc__media { --card-image-ratio: 4 / 5; }
.pc--editorial .pc:hover .pc__media img { transform: none; }

/* dense: compact marketplace tile, small image, price first and bold */
.pc--dense { border: 1px solid var(--color-outline); border-radius: var(--shape-card-radius, 6px); background: var(--color-background); padding: 10px; }
.pc--dense .pc__media { border-radius: 4px; }
.pc--dense .pc__body { padding-top: 8px; gap: 2px; }
.pc--dense .pc__title { font-size: .88rem; font-weight: 500; order: 2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc--dense .price { order: 1; margin-top: 0; padding-top: 0; font-weight: 800; font-size: 1.05rem; }
.pc--dense .pc__brand { order: 3; }
.pc--dense .pc__stock { order: 4; font-size: .76rem; color: var(--color-success, #15803d); font-weight: 600; }
.pc--dense:hover { border-color: var(--color-primary); }

/* soft: a rounded colour block behind the picture, friendly and chunky */
.pc--soft .pc__media { border-radius: var(--shape-card-radius, 24px); background: var(--color-background-alt); padding: 14%; }
.pc--soft .pc__media img { object-fit: contain; border-radius: calc(var(--shape-card-radius, 24px) / 2); }
.pc--soft .pc__title { font-weight: 700; }
.pc--soft .pc__body { padding-inline: 6px; }
.pc--soft .price { font-weight: 700; }
.pc--soft .pc__button { align-self: flex-start; border-radius: 999px; }

/* cover: a 2:3 "book cover" with a lifted shadow and a spine edge */
.pc--cover .pc__media { --card-image-ratio: 2 / 3; box-shadow: 10px 10px 24px rgba(0, 0, 0, .14), inset 6px 0 8px -6px rgba(0, 0, 0, .35); border-radius: 2px 6px 6px 2px; }
.pc--cover .pc__media img { object-fit: cover; }
.pc--cover .pc__body { padding-top: 14px; }
.pc--cover .pc__title { font-family: var(--font-heading-family); font-weight: 600; }
.pc--cover .pc__brand { font-style: italic; text-transform: none; letter-spacing: 0; }

/* ==========================================================================
   Home sections
   ========================================================================== */

/* Marquee: a band of text repeating across the page (pauses on hover and with reduced motion). */
.marquee { overflow: hidden; background: var(--color-marquee-background, var(--color-heading)); color: var(--color-marquee-text, var(--color-background)); padding-block: 12px; border-block: var(--marquee-border, 0); white-space: nowrap; }
.marquee--accent { --color-marquee-background: var(--color-accent); --color-marquee-text: var(--color-on-accent); }
.marquee--outline { --color-marquee-background: transparent; --color-marquee-text: var(--color-heading); --marquee-border: 1px solid var(--color-heading); }
.marquee__track { display: inline-flex; gap: 0; animation: kit-marquee var(--marquee-seconds, 28s) linear infinite; will-change: transform; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: 28px; padding-inline: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: var(--marquee-size, .92rem); }
.marquee__item::after { content: "✦"; opacity: .6; }
@keyframes kit-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* Lookbook: a mosaic of pictures, some double size, with captions and links. */
.lookbook { display: grid; gap: var(--layout-grid-gap, 16px); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
.look { position: relative; display: block; overflow: hidden; background: var(--color-background-alt); border-radius: var(--shape-card-radius, 0); text-decoration: none; color: inherit; aspect-ratio: 1; }
.look img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.look:hover img { transform: scale(1.03); }
.look--tall { grid-row: span 2; aspect-ratio: auto; }
.look--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.look__caption { position: absolute; left: 14px; bottom: 14px; background: var(--color-background); color: var(--color-heading); padding: 6px 12px; font-size: .82rem; font-weight: 600; letter-spacing: .04em; border-radius: var(--shape-radius, 0); }
@media (min-width: 900px) { .lookbook { grid-template-columns: repeat(var(--lookbook-columns, 4), minmax(0, 1fr)); } }

/* Trust bar: a slim band of icon + text promises. */
.trust-bar { background: var(--color-background-alt); border-block: 1px solid var(--color-outline); }
.trust-bar--primary { background: var(--color-primary); color: var(--color-on-primary); border: 0; }
.trust-bar--plain { background: transparent; }
.trust-bar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); padding-block: 14px; }
.trust-bar li { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: .9rem; font-weight: 600; text-align: left; }
.trust-bar li .icon { flex: none; color: var(--color-accent-text); }
.trust-bar--primary li .icon { color: inherit; }
.trust-bar li h3 { font-size: inherit; margin: 0; color: inherit; font-family: inherit; }
.trust-bar li p { display: none; margin: 0; }
.trust-bar--detailed li { flex-direction: column; align-items: flex-start; gap: 6px; }
.trust-bar--detailed li p { display: block; font-weight: 400; color: var(--color-subheading); font-size: .86rem; }
.trust-bar--detailed ul { padding-block: 28px; }
/* A column with a link is clickable all over (the link's ::before covers the item); an image takes the icon's place. */
.trust-bar li { position: relative; }
.trust-bar__link { color: inherit; text-decoration: none; }
.trust-bar__link::before { content: ''; position: absolute; inset: 0; }
.trust-bar__link:focus-visible { outline: none; }
.trust-bar__link:focus-visible::before { outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--shape-radius, 4px); }
.trust-bar li:has(.trust-bar__link):hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.trust-bar__more { display: inline-flex; align-items: center; gap: .35em; margin-top: 2px; font-size: .84rem; text-decoration: underline; text-underline-offset: 3px; }
.trust-bar__more::after { content: ''; width: .42em; height: .42em; border: solid currentColor; border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); }
.trust-bar__image { flex: none; display: block; width: auto; height: 40px; max-width: 96px; object-fit: contain; }

/* Testimonials: cards of quotes with a star row and the customer's name. */
.testimonials { display: grid; gap: var(--layout-grid-gap-desktop, 24px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.quote { padding: 26px; border-radius: var(--shape-card-radius, 12px); background: var(--color-background-alt); display: flex; flex-direction: column; gap: 12px; }
.quote--outline { background: transparent; border: 1px solid var(--color-outline); }
.quote__stars { color: var(--color-accent-text); letter-spacing: 2px; font-size: .95rem; }
.quote blockquote { margin: 0; font-size: 1.05rem; line-height: 1.55; }
.quote blockquote::before { content: "“"; font-family: var(--font-heading-family); font-size: 2.2em; line-height: 0; vertical-align: -.35em; margin-right: 4px; color: var(--color-accent-text); }
.quote figcaption { margin-top: auto; font-weight: 600; font-size: .9rem; }
.quote figcaption span { display: block; font-weight: 400; color: var(--color-subheading); font-size: .82rem; }
.testimonials--row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 8px; }
.testimonials--row .quote { flex: 0 0 min(82%, 340px); scroll-snap-align: start; }

/* Category circles: round pictures in a row that scrolls on phones. */
.cat-circles { list-style: none; margin: 0; padding: 4px 0 8px; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.cat-circles::-webkit-scrollbar { display: none; }
.cat-circles li { flex: 0 0 auto; scroll-snap-align: start; width: clamp(96px, 14vw, 150px); text-align: center; }
.cat-circle { display: block; text-decoration: none; color: var(--color-heading); font-weight: 600; font-size: .9rem; }
.cat-circle__media { display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--color-background-alt); border: var(--cat-circle-border, 3px solid transparent); margin-bottom: 10px; transition: border-color .2s ease, transform .2s ease; }
.cat-circle__media img { width: 100%; height: 100%; object-fit: cover; }
.cat-circle:hover .cat-circle__media { border-color: var(--color-accent); transform: translateY(-3px); }
@media (min-width: 900px) { .cat-circles { justify-content: var(--cat-circles-justify, center); flex-wrap: wrap; overflow: visible; } }

/* Stats band: large numbers with labels. */
.stats { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { text-align: center; padding: 12px; }
.stat__value { display: block; font-family: var(--font-heading-family); font-weight: 700; font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); letter-spacing: -.03em; line-height: 1; color: var(--color-heading); font-variant-numeric: tabular-nums; }
.stat__label { display: block; margin-top: 8px; color: var(--color-subheading); font-size: .9rem; }
.stats--divided .stat:nth-child(even) { border-left: 1px solid var(--color-outline); } /* two columns on phones and tablets */
@media (min-width: 900px) { .stats--divided .stat:nth-child(even) { border-left: 0; } .stats--divided .stat + .stat { border-left: 1px solid var(--color-outline); } }
.stats-band--dark { background: var(--color-heading); color: var(--color-background); }
.stats-band--dark .stat__value { color: var(--color-accent); }
.stats-band--dark .stat__label { color: inherit; opacity: .8; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(var(--stats-columns, 4), minmax(0, 1fr)); } }

/* Twin promo: two promotion tiles side by side (reuses the promo tile of the twin hero). */
.twin-promo { display: grid; gap: var(--layout-grid-gap, 16px); }
.twin-promo .promo-tile { min-height: 260px; }
@media (min-width: 900px) { .twin-promo { grid-template-columns: var(--twin-columns, 1fr 1fr); } }

/* Press strip: "as seen in" names set in the display face, or small logos. */
.press { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 40px; padding-block: 8px; }
.press__label { width: 100%; text-align: center; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--color-subheading); margin-bottom: 4px; }
.press__item { font-family: var(--font-heading-family); font-weight: 700; font-size: 1.3rem; letter-spacing: -.01em; color: var(--color-heading); opacity: .55; white-space: nowrap; }
.press__item img { max-height: 32px; width: auto; filter: grayscale(1); opacity: .7; }

/* Steps: how it works, 1-2-3 */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; counter-reset: kit-step; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.step { counter-increment: kit-step; position: relative; padding-top: 8px; }
.step::before { content: counter(kit-step, decimal-leading-zero); display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent); font-weight: 800; font-family: var(--font-heading-family); margin-bottom: 14px; }
.steps--line .step::after { content: ""; position: absolute; top: 30px; left: 56px; right: -12px; border-top: 2px dashed var(--color-outline); }
.steps--line .step:last-child::after { display: none; }
.step h3 { margin-bottom: .3em; }
.step p { color: var(--color-subheading); margin: 0; }
.steps--cards .step { background: var(--color-background-alt); padding: 24px; border-radius: var(--shape-card-radius, 12px); }
.steps--cards .step::before { position: static; }
@media (max-width: 599px) { .steps--line .step::after { display: none; } }

/* Statement: a big line of text on its own. */
.statement { text-align: center; padding-block: clamp(24px, 5vw, 56px); }
.statement p { font-family: var(--font-heading-family); font-weight: var(--font-heading-weight, 500); font-size: clamp(1.4rem, 1rem + 2.2vw, 2.6rem); line-height: 1.25; letter-spacing: -.01em; max-width: 28ch; margin: 0 auto; color: var(--color-heading); }
.statement--left { text-align: left; }
.statement--left p { margin-left: 0; }
.statement .kit-actions { justify-content: center; }
.statement--left .kit-actions { justify-content: flex-start; }

/* Product list: products as rows (a menu board or price list) with a dotted leader to the price. */
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.plist__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--color-outline); position: relative; }
.plist__item:first-child { border-top: 1px solid var(--color-outline); }
.plist__media { width: 64px; aspect-ratio: 1; border-radius: var(--shape-radius, 8px); overflow: hidden; background: var(--color-background-alt); }
.plist__media img { width: 100%; height: 100%; object-fit: cover; }
.plist__name { font-weight: 600; margin: 0; font-size: 1rem; font-family: var(--font-heading-family); }
.plist__name a { text-decoration: none; color: var(--color-heading); }
.plist__name a::after { content: ""; position: absolute; inset: 0; }
.plist__desc { margin: 2px 0 0; font-size: .86rem; color: var(--color-subheading); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.plist__price { font-weight: 700; white-space: nowrap; }
.plist__price .price { display: flex; flex-direction: column; align-items: flex-end; }
.plist--two { grid-template-columns: 1fr; column-gap: 48px; }
.plist--no-image .plist__item { grid-template-columns: minmax(0, 1fr) auto; }
.plist--no-image .plist__media { display: none; }
@media (min-width: 900px) { .plist--two { grid-template-columns: 1fr 1fr; } .plist--two .plist__item:nth-child(2) { border-top: 1px solid var(--color-outline); } }

/* ==========================================================================
   Footers
   ========================================================================== */

/* Minimal: one row with the brand, the menu inline, social, and the small print under a hairline. */
.ftr-minimal { background: var(--color-background); color: var(--color-text); margin-top: var(--layout-section-spacing, 56px); border-top: 1px solid var(--color-outline); }
.ftr-minimal__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 28px; }
.ftr-minimal__brand { font-family: var(--font-heading-family); font-weight: 700; font-size: 1.1rem; color: var(--color-heading); text-decoration: none; }
.ftr-minimal nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ftr-minimal nav a { text-decoration: none; font-size: .88rem; }
.ftr-minimal nav a:hover { text-decoration: underline; }
.ftr-minimal__social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ftr-minimal__social a { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--color-outline); }
.ftr-minimal__small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 14px 24px; border-top: 1px solid var(--color-outline); font-size: .8rem; color: var(--color-subheading); }
.ftr-minimal__small ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* Wordmark: columns, then the store name set as large as the page allows. */
.ftr-wordmark { background: var(--color-footer-background); color: var(--color-footer-text, #eee); margin-top: var(--layout-section-spacing, 56px); overflow: hidden; }
.ftr-wordmark a { color: inherit; text-decoration: none; }
.ftr-wordmark a:hover { text-decoration: underline; }
.ftr-wordmark__grid { display: grid; gap: 28px; padding-block: 48px 32px; }
.ftr-wordmark h2 { color: inherit; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; opacity: .75; }
.ftr-wordmark ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ftr-wordmark__name { display: block; font-family: var(--font-heading-family); font-weight: var(--font-heading-weight, 800); font-size: min(13rem, calc((100vw - 2 * var(--layout-spacing, 16px)) / (var(--wordmark-chars, 12) * var(--wordmark-em, 0.66)))); line-height: .85; letter-spacing: -.04em; text-transform: uppercase; white-space: nowrap; opacity: .92; margin: 8px 0 -.12em; overflow: hidden; }
.ftr-wordmark__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 16px; font-size: .8rem; opacity: .75; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.ftr-wordmark .newsletter-form input { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); }
.ftr-wordmark__social { display: flex !important; gap: 8px; }
.ftr-wordmark__social a { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
@media (min-width: 600px) { .ftr-wordmark__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .ftr-wordmark__grid { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; } }

/* Centred: everything on one axis — brand, a line about the store, newsletter, menu, social. */
.ftr-centered { background: var(--color-footer-background); color: var(--color-footer-text, #eee); margin-top: var(--layout-section-spacing, 56px); text-align: center; }
.ftr-centered a { color: inherit; text-decoration: none; }
.ftr-centered a:hover { text-decoration: underline; }
.ftr-centered__inner { padding-block: 56px 32px; display: grid; gap: 22px; justify-items: center; }
.ftr-centered__brand { font-family: var(--font-heading-family); font-weight: 700; font-size: 1.8rem; letter-spacing: -.01em; }
.ftr-centered__about { max-width: 52ch; opacity: .85; margin: 0; }
.ftr-centered nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; font-size: .9rem; letter-spacing: .04em; }
.ftr-centered .newsletter-form { max-width: 460px; width: 100%; margin: 0 auto; }
.ftr-centered .newsletter-form input { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); }
.ftr-centered__social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ftr-centered__social a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.ftr-centered__contact { font-size: .88rem; opacity: .8; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
.ftr-centered__bottom { border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); padding-block: 16px; font-size: .8rem; opacity: .7; }

/* ==========================================================================
   Motion: sections ease in as they scroll into view (scroll-driven, no script). Only where the browser supports it and
   the visitor has not asked for reduced motion; everything is fully visible otherwise.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hike-kit .hike-main > .hike-section + .hike-section { animation: kit-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}
@keyframes kit-reveal { from { opacity: .001; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }

/* ==========================================================================
   Menus that do not fit (every header, theme.js): the links that would wrap move into a "More" drop-down at the end
   of the menu; when even that does not fit, the header shows the menu button (site-header--compact), as on a phone.
   ========================================================================== */
.site-nav__item--more > .site-nav__dropdown { left: auto; right: 0; max-height: min(70vh, 560px); overflow-y: auto; }
.site-nav__more-button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
.hdr-split__side > .site-nav__item--more > .site-nav__more-button { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; letter-spacing: .04em; padding: 8px 0; }
.hdr-market__cats .site-nav__more-button { display: flex; align-items: center; gap: 4px; padding: 10px 14px; white-space: nowrap; font-size: .88rem; font-weight: 600; }
/* The category bar lets its drop-downs out on a computer; on a phone it scrolls sideways and the drawer has the links. */
@media (min-width: 900px) { .site-header.nav-fit .hdr-market__cats .container > ul { overflow: visible; } }
@media (max-width: 899px) { .hdr-market__cats .site-nav__dropdown { display: none; } }
.hdr-market__cats .site-nav__dropdown { color: var(--color-text); }
.site-nav__more .site-nav__item { position: static; }
/* A moved link looks like the theme's own drop-down links (.site-nav__dropdown a); a parent is set a little bolder. */
.site-nav__more > .site-nav__item:has(> .site-nav__dropdown) > a { font-weight: 600; }
.site-nav__more .site-nav__item > .site-nav__dropdown { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; margin: 0 0 4px; padding: 0 0 0 12px; border: 0; box-shadow: none; background: none; }
.site-nav__more .icon--chevron-down { display: none; }
@media (min-width: 900px) {
  .site-header.site-header--compact .site-nav, .site-header.site-header--compact .hdr-split__side, .site-header.site-header--compact .hdr-market__cats .container > ul { display: none; }
  .site-header.site-header--compact .site-header__toggle { display: inline-flex; }
}


/* ==========================================================================
   Kit round 2 (HK-ECOM-THEMES-LIB-03): new headers, heroes, footers, cards and sections.
   ========================================================================== */

/* ---------- Headers ---------- */
/* Kit round 2 headers: side column, mega menu, frosted glass, page frame, news ticker, floating dock, corner name.
   Each keeps the shared drawer (menu button below 900 px), header_actions and .site-header__logo. Rules that change
   the whole page (the side column, the frame, the glass overlap, room for the dock) apply to kit themes only. */

/* Side column: a fixed column at the side from 1100 px (kit themes); below that, or in older themes, a top bar with
   the menu button and drawer. The vertical menu is its own list, so the "More" folding leaves it alone. */
.hdr-sidebar .site-header__toggle { display: inline-flex; }
.hdr-sidebar__nav, .hdr-sidebar__note { display: none; }
.hdr-sidebar__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hdr-sidebar__link { display: flex; align-items: center; gap: 0; padding: 7px 0; font-family: var(--font-heading-family); font-weight: 600; font-size: 1.06rem; line-height: 1.25; color: var(--color-navigation); text-decoration: none; }
.hdr-sidebar__link::before { content: ""; flex: none; width: 0; height: 2px; margin-right: 0; background: var(--color-primary); transition: width .2s ease, margin .2s ease; }
.hdr-sidebar__link:hover, .hdr-sidebar__link[aria-current=page] { color: var(--color-navigation); }
.hdr-sidebar__link:hover::before, .hdr-sidebar__link[aria-current=page]::before, .hdr-sidebar__link:focus-visible::before { width: 14px; margin-right: 10px; }
.hdr-sidebar .hdr-sidebar__sub { list-style: none; margin: 0 0 8px 1px; padding: 0 0 0 14px; border-left: 1px solid color-mix(in srgb, var(--color-navigation) 20%, transparent); display: grid; }
.hdr-sidebar__sub a { display: block; padding: 4px 0; font-size: .9rem; line-height: 1.35; text-decoration: none; color: color-mix(in srgb, var(--color-navigation) 80%, transparent); }
.hdr-sidebar__sub a:hover, .hdr-sidebar__sub a[aria-current=page] { color: var(--color-navigation); text-decoration: underline; }
@media (min-width: 1100px) {
  body.hike-kit:has(.hdr-sidebar) { --hdr-sidebar-width: clamp(240px, 19vw, 284px); }
  body.hike-kit:has(.hdr-sidebar--left) { padding-left: var(--hdr-sidebar-width); }
  body.hike-kit:has(.hdr-sidebar--right) { padding-right: var(--hdr-sidebar-width); }
  /* The column is fixed, so only the announcement bar is left in the header region: it scrolls away with the page. */
  body.hike-kit .hike-region--header:has(.hdr-sidebar) { position: relative; top: auto; }
  body.hike-kit .hdr-sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--hdr-sidebar-width); border-bottom: 0; border-right: 1px solid var(--color-outline); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  body.hike-kit .hdr-sidebar--right { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--color-outline); }
  body.hike-kit .hdr-sidebar.is-scrolled { box-shadow: none; }
  body.hike-kit .hdr-sidebar .site-header__inner { display: flex; flex-direction: column; align-items: stretch; gap: 28px; min-height: 100%; max-width: none; padding: 36px 28px 28px; }
  body.hike-kit .hdr-sidebar .site-header__toggle { display: none; }
  body.hike-kit .hdr-sidebar .site-header__logo { font-size: 1.6rem; line-height: 1.05; overflow-wrap: anywhere; }
  body.hike-kit .hdr-sidebar .site-header__logo img { max-height: 120px; }
  body.hike-kit .hdr-sidebar__nav { display: block; }
  body.hike-kit .hdr-sidebar .site-header__actions { margin-top: auto; flex-wrap: wrap; justify-content: flex-start; gap: 2px; padding-top: 18px; border-top: 1px solid var(--color-outline); }
  body.hike-kit .hdr-sidebar .site-header__actions > .icon-button:first-of-type { margin-left: -10px; }
  body.hike-kit .hdr-sidebar .site-search { flex: 1 0 100%; margin-bottom: 8px; }
  body.hike-kit .hdr-sidebar .site-search__form input { width: 100%; }
  /* The page is narrower by the column: the footer wordmark (sized from the screen width) is sized to fit. */
  body.hike-kit:has(.hdr-sidebar) .ftr-wordmark__name { font-size: min(13rem, calc((100vw - var(--hdr-sidebar-width) - 2 * var(--layout-spacing, 16px)) / (var(--wordmark-chars, 12) * var(--wordmark-em, 0.66)))); }
  body.hike-kit .hdr-sidebar__note { display: block; margin: -14px 0 0; font-size: .8rem; line-height: 1.45; color: color-mix(in srgb, currentColor 72%, transparent); }
}

/* Mega menu: a link with drop-down links opens a panel the width of the header, its links in columns, with an
   optional promotion. The menu items fill the bar's height, so the pointer never leaves them on its way down. */
.hdr-mega .site-nav__item.hdr-mega__item { position: static; }
.hdr-mega__panel { top: 100%; left: 0; right: 0; min-width: 0; padding: 0; border-width: 1px 0; border-radius: 0; box-shadow: 0 28px 40px -20px rgba(0, 0, 0, .22); }
.hdr-mega__inner { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 24px 40px; padding-block: 28px 34px; }
.hdr-mega__inner:has(.hdr-mega__promo) { grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) minmax(200px, 280px); }
.hdr-mega__title { margin: 0 0 10px; font-family: var(--font-heading-family); font-weight: var(--font-heading-weight, 700); font-size: 1.5rem; line-height: 1.1; color: var(--color-heading); }
.hdr-mega__panel a.hdr-mega__all { display: inline-flex; align-items: center; gap: 6px; padding: 0; font-weight: 600; font-size: .9rem; text-decoration: underline; text-underline-offset: 4px; }
.hdr-mega__cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 2px 28px; align-content: start; }
.hdr-mega__panel .hdr-mega__col > a { padding: 8px 0; border-radius: 0; font-weight: 600; border-bottom: 1px solid var(--color-outline); }
.hdr-mega__panel .hdr-mega__col > a:hover, .hdr-mega__panel .hdr-mega__sub a:hover { background: none; text-decoration: underline; text-underline-offset: 4px; }
.hdr-mega__panel .hdr-mega__sub { list-style: none; margin: 6px 0 10px; padding: 0; }
.hdr-mega__panel .hdr-mega__sub a { padding: 4px 0; font-size: .9rem; color: color-mix(in srgb, currentColor 78%, transparent); }
.hdr-mega__panel a.hdr-mega__promo { display: grid; gap: 6px; align-content: start; padding: 0; border-radius: 0; text-decoration: none; color: var(--color-heading); }
.hdr-mega__panel a.hdr-mega__promo:hover { background: none; }
.hdr-mega__promo-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--shape-card-radius, 10px); background: var(--color-background-alt); }
.hdr-mega__promo-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.hdr-mega__promo:hover .hdr-mega__promo-media img { transform: scale(1.04); }
.hdr-mega__promo-heading { margin-top: 6px; font-family: var(--font-heading-family); font-weight: var(--font-heading-weight, 700); font-size: 1.1rem; line-height: 1.2; }
.hdr-mega__promo-cta { font-size: .88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; color: var(--color-text); }
@media (min-width: 900px) {
  .hdr-mega .site-header__inner { align-items: stretch; }
  .hdr-mega .site-header__inner > * { align-self: center; }
  .hdr-mega .site-header__inner > .site-nav { align-self: stretch; }
  .hdr-mega .site-nav__list > .site-nav__item { display: flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .hdr-mega__promo-media img { transition: none; } }
/* A short drop-down (three links or fewer) with the promotion: the list and a small promotion card side by side, under
   the link; at the right of the link when it would run off the screen (assets/theme.js). */
.hdr-mega__short { display: flex; align-items: flex-start; gap: 16px; min-width: 0; padding: 12px; }
.hdr-mega__short.hdr-mega__short--end { left: auto; right: 0; }
.hdr-mega__short-list { list-style: none; margin: 0; padding: 0; min-width: 160px; }
.hdr-mega__short a.hdr-mega__promo { flex: none; display: grid; gap: 4px; align-content: start; width: 200px; padding: 0; border-radius: 0; text-decoration: none; color: var(--color-heading); }
.hdr-mega__short a.hdr-mega__promo:hover { background: none; }
.hdr-mega__short a.hdr-mega__promo:not(:has(> *)) { display: none; }
.hdr-mega__short .hdr-mega__promo-heading { margin-top: 4px; font-size: 1rem; }
/* A panel moved into "More": its links only, as a plain list. */
.site-nav__more .hdr-mega__short { display: block; }
.site-nav__more .hdr-mega__intro, .site-nav__more .hdr-mega__promo { display: none; }
.site-nav__more .hdr-mega__inner { display: block; max-width: none; padding: 0; }
.site-nav__more .hdr-mega__cols { display: block; }
.site-nav__more .hdr-mega__panel .hdr-mega__col > a { padding: 8px 12px; border: 0; border-radius: 6px; font-weight: 400; }

/* Frosted glass: a see-through, blurred bar floating inside the page margins; logo centred, menu left, icons right.
   In kit themes it floats over a full-width picture at the top of the page; it turns more solid on scroll. */
.hdr-glass { background: transparent; border-bottom: 0; padding-top: 12px; }
.hdr-glass.is-scrolled { box-shadow: none; }
.hdr-glass__bar { min-height: 62px; padding-inline: 6px; background: color-mix(in srgb, var(--color-header-background) 72%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border: 1px solid color-mix(in srgb, var(--color-header-background) 55%, transparent); border-radius: calc(var(--shape-radius, 6px) + 8px); box-shadow: 0 12px 32px -16px rgba(0, 0, 0, .35); transition: background-color .3s ease, box-shadow .3s ease; }
.hdr-glass.is-scrolled .hdr-glass__bar { background: color-mix(in srgb, var(--color-header-background) 90%, transparent); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .4); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hdr-glass__bar { background: var(--color-header-background); } }
.hdr-glass .site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
.hdr-glass .site-header__logo { justify-self: center; text-align: center; }
.hdr-glass .site-nav__link { font-weight: 600; }
@media (min-width: 900px) {
  .hdr-glass { padding-top: 16px; }
  .hdr-glass .site-header__inner { grid-template-columns: 1fr auto 1fr; padding-inline: 10px 8px; }
  .hdr-glass .site-nav { grid-column: 1; grid-row: 1; min-width: 0; }
  .hdr-glass .site-header__logo { grid-column: 2; grid-row: 1; max-width: 26vw; }
  .hdr-glass .site-header__actions { grid-column: 3; grid-row: 1; }
  .hdr-glass .site-search__form input { width: clamp(120px, 12vw, 220px); }
}
body.hike-kit:has(.hdr-glass):has(.hike-region--main > .hike-section:first-child:is(.hike-section--hero_full, .hike-section--slideshow, .hike-section--hero_banner, .hike-section--hero_booking, .hike-section--hero_quote)) .hike-region--main > .hike-section:first-child { margin-top: calc(-1 * var(--header-height, 80px)); }
@media (prefers-reduced-motion: reduce) { .hdr-glass__bar { transition: none; } }

/* Page frame: a fixed coloured outline round the whole page (kit themes), with the header inside it at the top. The
   frame width and colour come from the header's classes, so the page can make room for it. */
.hdr-frame { border-bottom: 2px solid var(--hdr-frame-c, var(--color-primary)); }
.hdr-frame .site-nav { justify-content: center; }
.hdr-frame .site-nav__link { font-weight: 600; }
.hdr-frame__edge { display: none; }
body.hike-kit:has(.hdr-frame) { --hdr-frame-c: var(--color-primary); --hdr-frame: var(--hdr-frame-w, 16px); padding: 0 var(--hdr-frame) var(--hdr-frame); }
body.hike-kit:has(.hdr-frame--heading) { --hdr-frame-c: var(--color-heading); }
body.hike-kit:has(.hdr-frame--accent) { --hdr-frame-c: var(--color-accent); }
body.hike-kit:has(.hdr-frame--w8) { --hdr-frame-w: 8px; }
body.hike-kit:has(.hdr-frame--w12) { --hdr-frame-w: 12px; }
body.hike-kit:has(.hdr-frame--w16) { --hdr-frame-w: 16px; }
body.hike-kit:has(.hdr-frame--w20) { --hdr-frame-w: 20px; }
body.hike-kit:has(.hdr-frame--w24) { --hdr-frame-w: 24px; }
@media (max-width: 599px) { body.hike-kit:has(.hdr-frame) { --hdr-frame: min(var(--hdr-frame-w, 16px), 8px); } }
body.hike-kit .hdr-frame { padding-top: var(--hdr-frame); }
body.hike-kit .hike-region--header:has(.hdr-frame) > .hike-section:first-child:not(:has(.hdr-frame)) { padding-top: var(--hdr-frame); }
body.hike-kit:has(.hdr-frame) .ftr-wordmark__name { font-size: min(13rem, calc((100vw - 2 * var(--hdr-frame) - 2 * var(--layout-spacing, 16px)) / (var(--wordmark-chars, 12) * var(--wordmark-em, 0.66)))); }
body.hike-kit .hdr-frame__edge { display: block; position: fixed; inset: 0; z-index: 60; border: var(--hdr-frame) solid var(--hdr-frame-c); pointer-events: none; }

/* News ticker: a solid bar in the heading colour with a running news line at its foot. */
.hdr-ticker { background: var(--color-heading); color: var(--color-background); border-bottom: 0; }
.hdr-ticker :focus-visible { outline-color: currentColor; }
.hdr-ticker .site-header__logo { font-weight: 900; text-transform: uppercase; letter-spacing: .01em; }
.hdr-ticker .site-nav__link { color: inherit; font-weight: 700; font-size: .84rem; letter-spacing: .07em; text-transform: uppercase; }
.hdr-ticker .site-nav__link:hover, .hdr-ticker .site-nav__link[aria-current=page] { color: inherit; background: color-mix(in srgb, currentColor 14%, transparent); }
.hdr-ticker .site-nav__dropdown { color: var(--color-text); }
.hdr-ticker .site-search__form input { background: color-mix(in srgb, currentColor 10%, transparent); border-color: color-mix(in srgb, currentColor 35%, transparent); }
.hdr-ticker .site-search__form input::placeholder { color: inherit; opacity: .72; }
.hdr-ticker .site-search__form .icon { color: inherit; opacity: .8; }
.hdr-ticker__line { border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); font-size: .8rem; }
.hdr-ticker__row { display: flex; align-items: center; gap: 14px; min-height: 36px; }
.hdr-ticker__label { flex: none; padding: 3px 10px; border-radius: var(--shape-button-radius, 6px); background: var(--color-accent); color: var(--color-on-accent); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hdr-ticker__window { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.hdr-ticker__track { display: flex; width: max-content; animation: hdr-ticker-run var(--hdr-ticker-seconds, 40s) linear infinite; }
.hdr-ticker__line:hover .hdr-ticker__track { animation-play-state: paused; }
.hdr-ticker__group { display: flex; flex: none; }
.hdr-ticker__item { display: inline-flex; align-items: center; white-space: nowrap; font-weight: 600; letter-spacing: .04em; }
.hdr-ticker__item::after { content: ""; width: 5px; height: 5px; margin-inline: 22px; border-radius: 50%; background: var(--color-accent); }
@keyframes hdr-ticker-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hdr-ticker__track { animation: none; } }

/* Floating dock: a slim top row; on computers the menu sits in a rounded dock at the bottom centre of the screen,
   its drop-downs opening upwards. Phones keep the menu button and drawer. */
.hdr-dock .site-header__inner { min-height: 60px; }
.hdr-dock__dock { display: none; }
@media (min-width: 900px) {
  .hdr-dock .site-header__logo { grid-column: 1; grid-row: 1; }
  .hdr-dock .site-header__actions { grid-column: 3; grid-row: 1; }
  .hdr-dock.site-header--compact .site-header__logo { grid-column: 2; }
  .hdr-dock.site-header--compact .hdr-dock__dock { display: none; }
  .hdr-dock__dock { display: block; position: fixed; left: 0; right: 0; bottom: 20px; z-index: 40; width: fit-content; max-width: calc(100vw - 48px); margin-inline: auto; padding: 6px; border: 1px solid var(--color-outline); border-radius: 22px; background: color-mix(in srgb, var(--color-header-background) 86%, transparent); color: var(--color-header-text, var(--color-navigation)); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 18px 48px -12px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .08); }
  .hdr-dock__dock--dark { border-color: transparent; background: var(--color-heading); color: var(--color-background); }
  .hdr-dock__dock--dark :focus-visible { outline-color: currentColor; }
  .hdr-dock__dock .site-nav__list { gap: 2px; }
  .hdr-dock__dock .site-nav__link { color: inherit; border-radius: 16px; padding: 10px 16px; font-weight: 600; }
  .hdr-dock__dock .site-nav__link:hover { color: inherit; background: color-mix(in srgb, currentColor 10%, transparent); }
  .hdr-dock__dock .site-nav__link[aria-current=page] { background: var(--color-primary); color: var(--color-on-primary); }
  .hdr-dock__dock .site-nav__dropdown { top: auto; bottom: calc(100% + 12px); transform: translateY(-6px); color: var(--color-text); }
  .hdr-dock__dock .site-nav__dropdown:not(.site-nav__more)::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
  /* The dock floats over the last of the page: the footer gets room under its last row. */
  body.hike-kit:has(.hdr-dock__dock) .hike-region--footer footer > :last-child { padding-bottom: 96px; }
}

/* Corner name: no bar; the store name set large at the top left, a short vertical menu at the top right with the
   icons in a small row under it. Drop-down links open beside their parent. */
.hdr-corner { background: transparent; border-bottom: 0; }
.hdr-corner.site-header--sticky { background: var(--color-header-background); }
.hdr-corner .site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
.hdr-corner__brand { min-width: 0; }
.hdr-corner__name { font-size: clamp(1.4rem, 1rem + 2vw, 1.9rem); font-weight: var(--font-heading-weight, 800); line-height: .95; letter-spacing: -.035em; color: var(--color-heading); overflow-wrap: anywhere; }
.hdr-corner__tagline, .hdr-corner__nav { display: none; }
.hdr-corner__side { display: flex; justify-content: flex-end; }
.hdr-corner__menu { list-style: none; margin: 0; padding: 0; display: grid; justify-items: end; gap: 1px; text-align: right; }
.hdr-corner__menu:has(> li:nth-child(6)) { grid-template-columns: repeat(2, auto); column-gap: 28px; }
.hdr-corner__item { position: relative; }
.hdr-corner__link { display: inline-block; padding: 3px 0; color: var(--color-navigation); font-size: .86rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.hdr-corner__link:hover, .hdr-corner__link[aria-current=page] { color: var(--color-navigation); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.hdr-corner__item:has(> .hdr-corner__sub) > .hdr-corner__link::before { content: "+"; display: inline-block; margin-right: 6px; opacity: .55; font-weight: 400; }
.hdr-corner .hdr-corner__sub { position: absolute; top: -8px; right: 100%; z-index: 5; min-width: 200px; margin: 0; padding: 8px; list-style: none; text-align: left; background: var(--color-background); color: var(--color-text); border: 1px solid var(--color-outline); border-radius: var(--shape-card-radius, 10px); box-shadow: 0 16px 40px rgba(0, 0, 0, .12); opacity: 0; visibility: hidden; transform: translateX(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.hdr-corner__item:hover > .hdr-corner__sub, .hdr-corner__item:focus-within > .hdr-corner__sub { opacity: 1; visibility: visible; transform: none; }
.hdr-corner__sub a { display: block; padding: 7px 10px; border-radius: 6px; font-size: .92rem; text-decoration: none; }
.hdr-corner__sub a:hover { background: var(--color-background-alt); }
@media (min-width: 900px) {
  .hdr-corner .site-header__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 24px 48px; padding-block: clamp(24px, 3vw, 44px) clamp(20px, 2.4vw, 36px); }
  .hdr-corner__brand { grid-column: 1; grid-row: 1; }
  .hdr-corner__side { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-end; gap: 12px; }
  .hdr-corner__name { display: block; max-width: 14ch; font-size: clamp(2.6rem, 1rem + 5vw, 6.25rem); }
  .hdr-corner__name img { max-height: 160px; }
  .hdr-corner__tagline { display: block; margin: 14px 0 0; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-subheading, var(--color-text)); }
  .hdr-corner__nav { display: block; }
  .hdr-corner .site-header__actions { gap: 0; margin-right: -9px; }
  .hdr-corner .site-header__actions .icon-button { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .hdr-corner__sub, .hdr-sidebar__link::before { transition: none; } }

/* ---------- Heroes (editorial) ---------- */
/* Arch: the picture inside an arch (the top radius is half the frame width, a container unit), large text beside it,
   an optional small round picture over the arch's edge and a hairline arch echoing the frame behind it. */
.hero-arch { padding-block: clamp(32px, 6vw, 88px); }
.hero-arch--tint { background: var(--color-background-alt); }
.hero-arch__inner { display: grid; gap: clamp(36px, 5vw, 88px); align-items: center; }
.hero-arch__content h1 { font-size: clamp(2.3rem, 1.1rem + 4.2vw, calc(var(--font-heading-size, 56px) * 1.12)); line-height: 1.02; margin-bottom: .4em; max-width: 13ch; }
.hero-arch__content > p { font-size: 1.12rem; max-width: 42ch; }
.hero-arch__content .kit-actions { margin-top: 28px; }
.hero-arch__content > p.hero-arch__note { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; font-size: .86rem; color: var(--color-subheading); }
.hero-arch__note::before { content: ""; flex: none; width: 32px; height: 1px; background: currentColor; }
.hero-arch__figure { position: relative; container-type: inline-size; width: min(78%, 340px); justify-self: center; order: -1; margin-top: 14px; }
.hero-arch__figure::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--color-accent); border-radius: 50cqi 50cqi 0 0; translate: 14px -14px; pointer-events: none; }
.hero-arch__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 50cqi 50cqi 0 0; background: var(--color-background-alt); }
.hero-arch--tint .hero-arch__frame { background: var(--color-background); }
.hero-arch__frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-arch__badge { position: absolute; left: -14%; bottom: 9%; width: 36%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: clamp(4px, 2cqi, 8px) solid var(--color-background); background: var(--color-background-alt); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .45); }
.hero-arch--tint .hero-arch__badge { border-color: var(--color-background-alt); }
.hero-arch__badge img { width: 100%; height: 100%; object-fit: cover; }
.hero-arch--left .hero-arch__figure::before { translate: -14px -14px; }
.hero-arch--left .hero-arch__badge { left: auto; right: -14%; }
@media (min-width: 600px) {
  .hero-arch__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .hero-arch__figure { width: min(88%, 500px); order: 0; margin-top: 18px; }
  .hero-arch--left .hero-arch__inner { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .hero-arch--left .hero-arch__figure { order: -1; }
  .hero-arch__figure::before { translate: 22px -22px; }
  .hero-arch--left .hero-arch__figure::before { translate: -22px -22px; }
}

/* Columns (newspaper): a dateline between rules, the headline across the top, three ruled columns beneath. */
.hero-columns { padding-block: clamp(20px, 3vw, 40px) clamp(32px, 5vw, 64px); }
.hero-columns__dateline { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding-block: 8px; border-top: 3px double var(--color-heading); border-bottom: 1px solid var(--color-heading); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-heading); }
.hero-columns__dateline > :last-child { text-align: right; }
.hero-columns__dateline-center { font-family: var(--font-heading-family); font-size: clamp(.92rem, .8rem + .4vw, 1.1rem); font-style: italic; font-weight: 400; letter-spacing: .02em; text-transform: none; }
.hero-columns__head { text-align: center; padding-block: clamp(22px, 3.4vw, 44px); border-bottom: 1px solid var(--color-heading); margin-bottom: clamp(22px, 3vw, 36px); }
.hero-columns__head .kit-eyebrow { margin-bottom: 12px; }
.hero-columns h1 { font-size: clamp(2.1rem, .9rem + 4vw, 4.9rem); line-height: .98; letter-spacing: -.03em; max-width: 22ch; margin: 0 auto; text-wrap: balance; }
.hero-columns__grid { display: grid; gap: 28px; }
.hero-columns__kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-text); }
.hero-columns__kicker::after { content: ""; flex: 1; height: 1px; background: var(--color-outline); }
.hero-columns__text { font-family: var(--font-heading-family); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.42; color: var(--color-heading); margin: 0; }
.hero-columns__lead .kit-actions { margin-top: 26px; }
.hero-columns__figure { margin: 0; }
.hero-columns__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-background-alt); }
.hero-columns__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero-columns__figure figcaption { margin-top: 10px; font-size: .8rem; font-style: italic; color: var(--color-subheading); }
.hero-columns__items { list-style: none; margin: 0; padding: 0; counter-reset: hero-columns; }
.hero-columns__items li { counter-increment: hero-columns; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); column-gap: 10px; padding-block: 16px; border-top: 1px solid var(--color-outline); }
.hero-columns__items li:first-child { border-top: 0; padding-top: 4px; }
.hero-columns__items li::before { content: counter(hero-columns, decimal-leading-zero); grid-row: span 2; font-family: var(--font-heading-family); font-size: 1.5rem; line-height: 1; color: var(--color-accent-text); }
.hero-columns__items h2 { font-size: 1.12rem; margin: 0 0 4px; }
.hero-columns__items p { margin: 0; font-size: .92rem; color: var(--color-subheading); }
@media (min-width: 600px) {
  .hero-columns__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 0; }
  .hero-columns__figure { grid-column: 1 / -1; grid-row: 1; }
  .hero-columns__figure .hero-columns__media { aspect-ratio: 16 / 9; }
  .hero-columns__lead { padding-right: 28px; }
  .hero-columns__side { padding-left: 28px; border-left: 1px solid var(--color-outline); }
}
@media (min-width: 900px) {
  .hero-columns__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr); gap: 0; }
  .hero-columns__figure { grid-column: auto; grid-row: auto; padding-inline: clamp(24px, 2.6vw, 36px); border-left: 1px solid var(--color-outline); }
  .hero-columns__figure .hero-columns__media { aspect-ratio: 5 / 6; }
  .hero-columns__lead { padding-right: clamp(24px, 2.6vw, 36px); }
  .hero-columns__side { padding-left: clamp(24px, 2.6vw, 36px); }
}

/* Diagonal: the picture cut on a slant (clip-path), an accent stripe along the cut, an uppercase headline on solid
   slabs that overlaps the cut. --hero-diagonal-cut is how far the cut leans (gentle or steep). */
.hero-diagonal { --hero-diagonal-cut: 16%; --hero-diagonal-band: 16px; --hero-diagonal-gap: 12px; position: relative; isolation: isolate; overflow: hidden; }
.hero-diagonal--steep { --hero-diagonal-cut: 34%; --hero-diagonal-band: 22px; }
.hero-diagonal__media { position: relative; height: clamp(280px, 70vw, 480px); }
.hero-diagonal__stripe, .hero-diagonal__picture { position: absolute; inset: 0; }
.hero-diagonal__stripe { background: var(--color-accent); clip-path: polygon(0 calc(100% - var(--hero-diagonal-band)), 100% calc(82% - var(--hero-diagonal-band)), 100% 82%, 0 100%); }
.hero-diagonal__picture { background: var(--color-background-alt); clip-path: polygon(0 0, 100% 0, 100% calc(82% - var(--hero-diagonal-band) - var(--hero-diagonal-gap)), 0 calc(100% - var(--hero-diagonal-band) - var(--hero-diagonal-gap))); }
.hero-diagonal--left .hero-diagonal__stripe { clip-path: polygon(0 calc(82% - var(--hero-diagonal-band)), 100% calc(100% - var(--hero-diagonal-band)), 100% 100%, 0 82%); }
.hero-diagonal--left .hero-diagonal__picture { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hero-diagonal-band) - var(--hero-diagonal-gap)), 0 calc(82% - var(--hero-diagonal-band) - var(--hero-diagonal-gap))); }
.hero-diagonal__picture img { width: 100%; height: 100%; object-fit: cover; }
.hero-diagonal__inner { position: relative; padding-bottom: clamp(32px, 6vw, 56px); margin-top: -64px; }
.hero-diagonal .kit-eyebrow { background: var(--color-background); padding: 6px 10px 5px; margin-bottom: 10px; }
.hero-diagonal h1 { font-size: clamp(2.2rem, .9rem + 5.6vw, 6rem); line-height: 1.12; letter-spacing: -.02em; text-transform: uppercase; margin-bottom: .45em; }
.hero-diagonal h1 span { background: var(--color-background); padding: 0 .14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-diagonal p { font-size: 1.08rem; max-width: 40ch; }
@media (min-width: 900px) {
  .hero-diagonal { display: grid; align-items: center; min-height: clamp(540px, 80vh, 760px); }
  .hero-diagonal__media { position: absolute; inset: 0 0 0 auto; width: 58%; height: auto; z-index: -1; }
  .hero-diagonal--left .hero-diagonal__media { inset: 0 auto 0 0; }
  .hero-diagonal__stripe { clip-path: polygon(var(--hero-diagonal-cut) 0, calc(var(--hero-diagonal-cut) + var(--hero-diagonal-band)) 0, var(--hero-diagonal-band) 100%, 0 100%); }
  .hero-diagonal__picture { clip-path: polygon(calc(var(--hero-diagonal-cut) + var(--hero-diagonal-band) + var(--hero-diagonal-gap)) 0, 100% 0, 100% 100%, calc(var(--hero-diagonal-band) + var(--hero-diagonal-gap)) 100%); }
  .hero-diagonal--left .hero-diagonal__stripe { clip-path: polygon(calc(100% - var(--hero-diagonal-cut) - var(--hero-diagonal-band)) 0, calc(100% - var(--hero-diagonal-cut)) 0, 100% 100%, calc(100% - var(--hero-diagonal-band)) 100%); }
  .hero-diagonal--left .hero-diagonal__picture { clip-path: polygon(0 0, calc(100% - var(--hero-diagonal-cut) - var(--hero-diagonal-band) - var(--hero-diagonal-gap)) 0, calc(100% - var(--hero-diagonal-band) - var(--hero-diagonal-gap)) 100%, 0 100%); }
  .hero-diagonal__inner { margin-top: 0; padding-block: clamp(48px, 7vw, 96px); }
  .hero-diagonal__content { width: 46%; }
  .hero-diagonal--left .hero-diagonal__content { margin-left: auto; }
  .hero-diagonal h1 { width: calc(100% + 18vw); }
  .hero-diagonal--left h1 { margin-left: -18vw; text-align: right; }
  .hero-diagonal--left .hero-diagonal__content { text-align: right; }
  .hero-diagonal--left p { margin-left: auto; }
  .hero-diagonal--left .kit-actions { justify-content: flex-end; }
}

/* Collage: three or four overlapping photos placed on a 12 x 12 grid ("side": beside the heading; "row": a staggered
   row under a centred heading); a tidy 2 x 2 grid on phones. */
.hero-collage { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; padding-block: clamp(28px, 5vw, 72px); }
.hero-collage__content h1 { font-size: clamp(2.2rem, 1.1rem + 3.8vw, calc(var(--font-heading-size, 56px) * 1.08)); line-height: 1.03; margin-bottom: .4em; }
.hero-collage__content p { font-size: 1.1rem; max-width: 44ch; }
.hero-collage__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hero-collage__photo { aspect-ratio: 1; overflow: hidden; border-radius: var(--shape-card-radius, 0); background: var(--color-background-alt); }
.hero-collage__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-collage--three .hero-collage__photo--1 { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
@media (min-width: 600px) {
  .hero-collage__photos { position: relative; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); gap: 0; aspect-ratio: 1 / .9; }
  .hero-collage__photos::before { content: ""; grid-column: 1 / 5; grid-row: 1 / 5; align-self: center; justify-self: center; width: 86%; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); opacity: .85; }
  .hero-collage__photo { aspect-ratio: auto; box-shadow: 0 0 0 clamp(4px, .6vw, 8px) var(--color-background), 0 24px 44px -24px rgba(0, 0, 0, .45); }
  .hero-collage--three .hero-collage__photo--1 { aspect-ratio: auto; }
  .hero-collage__photo--1 { grid-column: 3 / 10; grid-row: 1 / 11; z-index: 1; }
  .hero-collage__photo--2 { grid-column: 1 / 7; grid-row: 8 / 13; z-index: 3; }
  .hero-collage__photo--3 { grid-column: 8 / 12; grid-row: 2 / 6; z-index: 2; }
  .hero-collage__photo--4 { grid-column: 9 / 13; grid-row: 6 / 12; z-index: 2; }
  .hero-collage--three .hero-collage__photo--1 { grid-column: 3 / 11; }
  .hero-collage--three .hero-collage__photo--3 { grid-column: 9 / 13; grid-row: 6 / 11; }
  /* Row: a centred heading above a staggered, overlapping row of photos. */
  .hero-collage--row .hero-collage__content { text-align: center; max-width: 760px; margin-inline: auto; }
  .hero-collage--row .hero-collage__content p { margin-inline: auto; }
  .hero-collage--row .kit-actions { justify-content: center; }
  .hero-collage--row .hero-collage__photos { grid-template-rows: repeat(10, minmax(0, 1fr)); aspect-ratio: 2.7 / 1; }
  .hero-collage--row .hero-collage__photos::before { grid-column: 11 / 13; grid-row: 7 / 11; width: 90%; }
  .hero-collage--row .hero-collage__photo--1 { grid-column: 1 / 4; grid-row: 2 / 11; z-index: 1; }
  .hero-collage--row .hero-collage__photo--2 { grid-column: 3 / 8; grid-row: 1 / 9; z-index: 2; }
  .hero-collage--row .hero-collage__photo--3 { grid-column: 7 / 10; grid-row: 3 / 11; z-index: 3; }
  .hero-collage--row .hero-collage__photo--4 { grid-column: 9 / 13; grid-row: 1 / 8; z-index: 2; }
  .hero-collage--row.hero-collage--three .hero-collage__photo--1 { grid-column: 1 / 5; grid-row: 2 / 11; }
  .hero-collage--row.hero-collage--three .hero-collage__photo--2 { grid-column: 4 / 10; grid-row: 1 / 9; }
  .hero-collage--row.hero-collage--three .hero-collage__photo--3 { grid-column: 9 / 13; grid-row: 3 / 11; }
  .hero-collage--row.hero-collage--three .hero-collage__photos::before { grid-column: 8 / 10; grid-row: 8 / 11; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .hero-collage--side .hero-collage__photos { aspect-ratio: 1 / .74; }
}
@media (min-width: 900px) {
  .hero-collage--side { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* Story: the text column stays in place (sticky) while three photos scroll past; a swipeable row on phones. */
.hero-story { display: grid; gap: 28px; padding-block: clamp(28px, 5vw, 64px); }
.hero-story h1 { font-size: clamp(2.2rem, 1.1rem + 3.6vw, var(--font-heading-size, 56px)); line-height: 1.04; margin-bottom: .4em; }
.hero-story__sticky > p { font-size: 1.1rem; max-width: 42ch; }
.hero-story__sticky .hero-story__index { list-style: none; margin: 36px 0 0; padding: 0; max-width: 360px; border-top: 1px solid var(--color-outline); display: none; }
.hero-story__index a { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--color-outline); text-decoration: none; font-weight: 600; color: var(--color-heading); }
.hero-story__index a:hover { color: var(--color-primary); }
.hero-story__index span, .hero-story__photo figcaption span { font-size: .74rem; font-weight: 700; letter-spacing: .12em; color: var(--color-accent-text); }
.hero-story__photos { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--layout-spacing, 16px)); padding-inline: var(--layout-spacing, 16px); scroll-padding-inline: var(--layout-spacing, 16px); padding-bottom: 6px; scrollbar-width: thin; }
.hero-story__photo { flex: 0 0 min(78%, 340px); margin: 0; scroll-snap-align: start; }
.hero-story__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--shape-card-radius, 0); background: var(--color-background-alt); }
.hero-story__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-story__photo figcaption { display: flex; gap: 12px; align-items: baseline; margin-top: 12px; font-family: var(--font-heading-family); font-size: 1.08rem; color: var(--color-heading); }
.hero-story__photo figcaption span { font-family: var(--font-body-family, inherit); }
@media (min-width: 900px) {
  .hero-story { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .hero-story--right { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hero-story--right .hero-story__text { order: 2; }
  .hero-story__text { position: sticky; top: calc(var(--header-height, 72px) + 16px); }
  .hero-story__sticky { min-height: calc(100vh - var(--header-height, 72px) - 32px); display: flex; flex-direction: column; justify-content: center; padding-block: 24px; }
  .hero-story__sticky .hero-story__index { display: block; }
  .hero-story__photos { display: grid; gap: clamp(48px, 7vh, 88px); overflow: visible; margin: 0; padding: 0; }
  .hero-story__photo { width: 76%; }
  .hero-story__photo:nth-child(2) { width: 60%; justify-self: end; }
  .hero-story--right .hero-story__photo:nth-child(odd) { justify-self: end; }
  .hero-story--right .hero-story__photo:nth-child(2) { justify-self: start; }
}

/* Strip: a centred headline over an endless strip of photos in mixed shapes that drifts sideways. The list holds the
   photos four times and moves by half its width, so the loop has no seam; pauses on hover and focus; still (and
   scrollable by hand, copies hidden) with reduced motion. */
.hero-strip { padding-block: clamp(40px, 7vw, 96px) clamp(28px, 5vw, 64px); overflow: hidden; }
.hero-strip__head { text-align: center; }
.hero-strip__head h1 { font-size: clamp(2.3rem, 1.1rem + 4.6vw, calc(var(--font-heading-size, 56px) * 1.2)); line-height: 1.02; max-width: 16ch; margin: 0 auto .35em; text-wrap: balance; }
.hero-strip__head p { font-size: 1.12rem; max-width: 52ch; margin-inline: auto; }
.hero-strip__head .kit-actions { justify-content: center; }
.hero-strip__viewport { margin-top: clamp(36px, 5vw, 64px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.hero-strip__track { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; animation: hero-strip-drift var(--hero-strip-seconds, 60s) linear infinite; }
.hero-strip__viewport:hover .hero-strip__track, .hero-strip:focus-within .hero-strip__track { animation-play-state: paused; }
.hero-strip__item { --hero-strip-h: clamp(210px, 27vw, 380px); flex: none; height: var(--hero-strip-h); padding-right: clamp(12px, 1.6vw, 22px); }
.hero-strip__item img { height: 100%; width: auto; max-width: none; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--shape-card-radius, 0); background: var(--color-background-alt); }
.hero-strip__item--2 { height: calc(var(--hero-strip-h) * .7); align-self: flex-start; }
.hero-strip__item--2 img { aspect-ratio: 3 / 2; }
.hero-strip__item--3 img { aspect-ratio: 3 / 4; }
.hero-strip__item--4 { height: calc(var(--hero-strip-h) * .78); align-self: flex-end; }
.hero-strip__item--4 img { aspect-ratio: 1; }
.hero-strip__item--5 { height: calc(var(--hero-strip-h) * .74); }
.hero-strip__item--5 img { aspect-ratio: 4 / 3; }
@keyframes hero-strip-drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .hero-strip__track { animation: none !important; }
  .hero-strip__item--copy { display: none; }
  .hero-strip__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-inline: var(--layout-spacing, 16px); }
}

/* Polaroid: three white photo prints with handwritten-feeling captions, tilted and scattered on a coloured ground
   (tint, primary or accent), the heading and buttons beside them. Prints are paper, so they stay white with dark ink. */
.hero-polaroid { --hero-polaroid-ground: var(--color-background-alt); --hero-polaroid-ink: var(--color-heading); --hero-polaroid-text: var(--color-text); background: var(--hero-polaroid-ground); color: var(--hero-polaroid-text); padding-block: clamp(40px, 7vw, 96px); overflow: hidden; }
.hero-polaroid--primary { --hero-polaroid-ground: var(--color-primary); --hero-polaroid-ink: var(--color-on-primary); --hero-polaroid-text: var(--color-on-primary); }
.hero-polaroid--accent { --hero-polaroid-ground: var(--color-accent); --hero-polaroid-ink: var(--color-on-accent); --hero-polaroid-text: var(--color-on-accent); }
.hero-polaroid__inner { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
.hero-polaroid h1 { color: var(--hero-polaroid-ink); font-size: clamp(2.3rem, 1.1rem + 4vw, calc(var(--font-heading-size, 56px) * 1.1)); line-height: 1.02; margin-bottom: .4em; max-width: 13ch; }
.hero-polaroid__content > p { font-size: 1.12rem; max-width: 40ch; }
.hero-polaroid:is(.hero-polaroid--primary, .hero-polaroid--accent) .kit-eyebrow { color: var(--hero-polaroid-ink); opacity: .85; }
.hero-polaroid--primary .btn--primary { background: var(--color-on-primary); border-color: var(--color-on-primary); color: var(--color-primary); }
.hero-polaroid--primary :is(.btn--secondary, .btn--link) { border-color: var(--color-on-primary); color: var(--color-on-primary); }
.hero-polaroid--primary .btn--secondary:hover { background: var(--color-on-primary); color: var(--color-primary); }
.hero-polaroid--accent .btn--accent { background: var(--color-on-accent); border-color: var(--color-on-accent); color: var(--color-accent); }
.hero-polaroid--accent :is(.btn--secondary, .btn--link) { border-color: var(--color-on-accent); color: var(--color-on-accent); }
.hero-polaroid--accent .btn--secondary:hover { background: var(--color-on-accent); color: var(--color-accent); }
.hero-polaroid__prints { position: relative; width: min(100%, 580px); justify-self: center; aspect-ratio: 1.28 / 1; }
.hero-polaroid__print { position: absolute; margin: 0; padding: 4.5% 4.5% 0; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 22px 40px -18px rgba(0, 0, 0, .42); transform: rotate(var(--hero-polaroid-tilt, 0deg)); transition: transform .35s ease; }
.hero-polaroid__print:hover { transform: rotate(0deg) translateY(-6px); z-index: 5; }
.hero-polaroid__photo { aspect-ratio: 1; overflow: hidden; background: #ecebe8; }
.hero-polaroid__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-polaroid__print figcaption { padding: .55em .2em .75em; font-family: var(--font-heading-family); font-size: clamp(.8rem, .6rem + .7vw, 1.12rem); font-style: italic; font-weight: 500; letter-spacing: 0; line-height: 1.2; text-align: center; color: #26231f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-polaroid__print:not(:has(figcaption)) { padding-bottom: 14%; }
.hero-polaroid__print--1 { --hero-polaroid-tilt: -2deg; width: 48%; left: 26%; top: 2%; z-index: 3; }
.hero-polaroid__print--2 { --hero-polaroid-tilt: -8deg; width: 40%; left: 1%; top: 24%; z-index: 1; }
.hero-polaroid__print--3 { --hero-polaroid-tilt: 6deg; width: 40%; right: 1%; top: 31%; z-index: 2; }
.hero-polaroid__print--1::before { content: ""; position: absolute; top: -12px; left: 50%; z-index: 1; width: 38%; height: 24px; translate: -50% 0; rotate: -3deg; background: rgba(255, 255, 255, .6); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
@media (min-width: 900px) {
  .hero-polaroid__inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .hero-polaroid--left .hero-polaroid__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .hero-polaroid--left .hero-polaroid__prints { order: -1; }
}

/* Quote: a large quotation over a soft, tinted full-width photo; the small heading (h1) sits above it. */
.hero-quote { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: clamp(520px, 78vh, 760px); color: #fff; }
.hero-quote__media { position: absolute; inset: 0; z-index: -3; background: var(--color-heading); }
.hero-quote__media img { width: 100%; height: 100%; object-fit: cover; filter: blur(1.5px) saturate(.85); transform: scale(1.05); }
.hero-quote::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--color-primary); mix-blend-mode: multiply; opacity: .5; }
.hero-quote::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, var(--hero-quote-overlay, .55)); }
.hero-quote__inner { padding-block: clamp(48px, 8vw, 104px); }
.hero-quote__content { max-width: 900px; }
.hero-quote--center .hero-quote__content { margin-inline: auto; text-align: center; }
.hero-quote .kit-eyebrow { color: #fff; opacity: .8; margin-bottom: 10px; }
.hero-quote h1 { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(18px, 3vw, 32px); font-family: var(--font-body-family, inherit); font-size: clamp(.8rem, .74rem + .2vw, .92rem); font-weight: 700; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; color: #fff; }
.hero-quote h1::after { content: ""; flex: 0 0 40px; height: 1px; background: currentColor; opacity: .6; }
.hero-quote--center h1 { justify-content: center; }
.hero-quote--center h1::before { content: ""; flex: 0 0 40px; height: 1px; background: currentColor; opacity: .6; }
.hero-quote__figure { margin: 0; }
.hero-quote__mark { display: block; height: .5em; margin-bottom: .04em; font-family: var(--font-heading-family); font-size: clamp(5.5rem, 3rem + 8vw, 10rem); line-height: .9; color: var(--color-accent); }
.hero-quote__text { margin: 0; }
.hero-quote__text p { margin: 0; font-family: var(--font-heading-family); font-size: clamp(1.6rem, .9rem + 2.6vw, 3.2rem); font-weight: var(--font-heading-weight, 600); line-height: 1.16; letter-spacing: -.015em; color: #fff; text-wrap: balance; }
.hero-quote__by { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: clamp(18px, 2.4vw, 28px); font-size: .95rem; }
.hero-quote--center .hero-quote__by { justify-content: center; }
.hero-quote__by strong::before { content: "\2014\00a0"; }
.hero-quote__by span { opacity: .8; }
.hero-quote .kit-actions { margin-top: clamp(26px, 3.4vw, 40px); }
.hero-quote--center .kit-actions { justify-content: center; }
.hero-quote :is(.btn--secondary, .btn--link) { border-color: #fff; color: #fff; }
.hero-quote .btn--secondary:hover { background: #fff; color: #111; }

/* Type: a giant headline in staggered lines that fills the page width, a small photo set into the words, then the
   text and buttons under a hairline. */
.hero-type { padding-block: clamp(24px, 4vw, 56px) clamp(32px, 5vw, 64px); }
.hero-type .kit-eyebrow { display: flex; align-items: center; gap: 10px; }
.hero-type .kit-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); }
.hero-type__lines { margin: 0; font-size: clamp(3.4rem, 16vw, 15rem); line-height: .9; letter-spacing: -.05em; }
.hero-type--large .hero-type__lines { font-size: clamp(2.6rem, 11vw, 10.5rem); }
.hero-type__line { display: block; }
.hero-type__line:nth-child(2) { text-align: right; }
.hero-type__line:nth-child(3) { padding-left: 12%; }
@media (max-width: 599px) {
  .hero-type__lines { font-size: 17vw; }
  .hero-type--large .hero-type__lines { font-size: 12.5vw; }
}
.hero-type__photo { display: inline-block; position: relative; top: -.04em; width: 1.7em; height: .74em; vertical-align: middle; overflow: hidden; border-radius: 999px; background: var(--color-background-alt); }
.hero-type--circle .hero-type__photo { width: .78em; height: .78em; }
.hero-type__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.hero-type__photo:hover img { transform: scale(1.06); }
.hero-type__foot { display: grid; gap: 4px 48px; align-items: end; margin-top: clamp(24px, 4vw, 48px); padding-top: clamp(16px, 2vw, 24px); border-top: 1px solid var(--color-heading); }
.hero-type__foot p { margin: 0; font-size: 1.08rem; max-width: 46ch; }
@media (min-width: 900px) {
  .hero-type__foot { grid-template-columns: minmax(0, 1fr) auto; }
  .hero-type__foot .kit-actions { margin-top: 0; justify-content: flex-end; }
}

/* ---------- Heroes (commerce) ---------- */
/* Product: one product as the hero. A big picture with up to three more in a column, the name as the page heading. */
.hero-product { padding-block: clamp(24px, 4vw, 56px); }
.hero-product--tint { background: var(--color-background-alt); }
.hero-product--split { background: linear-gradient(180deg, var(--color-background-alt) 0 52%, transparent 52%); }
.hero-product__inner { display: grid; gap: 28px; align-items: center; }
.hero-product__gallery { position: relative; min-width: 0; }
.hero-product__main { position: relative; display: block; aspect-ratio: 1; border-radius: var(--shape-card-radius, 12px); overflow: hidden; background: var(--color-background); box-shadow: 0 24px 60px -32px rgba(0, 0, 0, .35); }
.hero-product__main img { width: 100%; height: 100%; object-fit: cover; }
.hero-product__flag { position: absolute; top: 16px; left: 16px; padding: 7px 14px; border-radius: 999px; background: var(--color-sale); color: #fff; font-weight: 800; font-size: .85rem; letter-spacing: .02em; }
.hero-product__thumbs { position: absolute; left: clamp(10px, 1.6vw, 18px); bottom: clamp(10px, 1.6vw, 18px); list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(6px, 1vw, 10px); }
.hero-product__thumbs li { width: clamp(56px, 13vw, 96px); aspect-ratio: 1; border-radius: var(--shape-radius, 8px); overflow: hidden; background: var(--color-background); border: 3px solid var(--color-background); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45); }
.hero-product__thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--shape-radius, 8px) - 3px); }
.hero-product__info { min-width: 0; }
.hero-product__brand { margin: 0 0 8px; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-subheading); }
.hero-product__info .kit-eyebrow { display: table; }
.hero-product__name { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.9rem); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 .35em; max-width: 15ch; hyphens: auto; }
.hero-product__name--long { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); max-width: 22ch; }
.hero-product__price .price { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); gap: 4px 14px; }
.hero-product__text { font-size: 1.06rem; max-width: 46ch; margin: 18px 0 0; }
.hero-product__stock { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: .9rem; font-weight: 600; color: var(--color-heading); }
.hero-product__stock::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--color-success, #2e8b57); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success, #2e8b57) 22%, transparent); }
.hero-product__stock.is-low::before { background: var(--color-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 30%, transparent); }
.hero-product__stock.is-out::before { background: var(--color-sale); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-sale) 22%, transparent); }
.hero-product .kit-actions { margin-top: 26px; }
.hero-product__note { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--color-outline); font-size: .86rem; color: var(--color-subheading); max-width: 46ch; }
@media (min-width: 700px) {
  .hero-product__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 88px); }
  .hero-product--flip .hero-product__gallery { order: 2; }
  .hero-product--split { background: linear-gradient(90deg, var(--color-background-alt) 0 50%, transparent 50%); }
  .hero-product--split:has(.hero-product--flip) { background: linear-gradient(270deg, var(--color-background-alt) 0 50%, transparent 50%); }
}

/* Category tiles: a coloured headline tile and 4 to 6 category tiles, one tall and the others square. */
.hero-tiles { padding-block: clamp(16px, 2.5vw, 32px); }
.hero-tiles__grid { display: grid; gap: var(--layout-grid-gap, 16px); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: clamp(150px, 40vw, 250px); grid-auto-flow: row dense; }
.hero-tiles__lead { grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: clamp(22px, 3vw, 40px); border-radius: var(--shape-card-radius, 12px); background: var(--color-primary); color: var(--color-on-primary); min-width: 0; }
.hero-tiles__lead h1 { color: inherit; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.3rem); line-height: 1.04; margin: 0 0 .3em; max-width: 16ch; }
.hero-tiles__lead p { margin: 0; max-width: 40ch; opacity: .9; }
.hero-tiles__lead .kit-eyebrow { color: inherit; opacity: .85; }
.hero-tiles__lead .kit-actions { margin-top: 20px; }
.hero-tiles__lead--primary .btn--primary { background: var(--color-on-primary); border-color: var(--color-on-primary); color: var(--color-primary); }
.hero-tiles__lead--primary .btn--secondary, .hero-tiles__lead--dark .btn--secondary { border-color: currentColor; color: inherit; }
.hero-tiles__lead--accent { background: var(--color-accent); color: var(--color-on-accent); }
.hero-tiles__lead--dark { background: var(--color-heading); color: var(--color-background); }
.hero-tiles__lead--dark .btn--primary { background: var(--color-background); border-color: var(--color-background); color: var(--color-heading); }
.hero-tiles__lead--tint { background: var(--color-background-alt); color: var(--color-text); }
.hero-tiles__lead--tint h1 { color: var(--color-heading); }
.hero-tiles__lead--tint .kit-eyebrow { color: var(--color-accent-text); opacity: 1; }
.hero-tiles__tile { position: relative; display: block; min-width: 0; border-radius: var(--shape-card-radius, 12px); overflow: hidden; background: var(--color-background-alt); color: #fff; text-decoration: none; isolation: isolate; }
.hero-tiles__tile:hover { color: #fff; }
.hero-tiles__media { position: absolute; inset: 0; z-index: -2; }
.hero-tiles__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.hero-tiles__tile:hover .hero-tiles__media img, .hero-tiles__tile:focus-visible .hero-tiles__media img { transform: scale(1.07); }
.hero-tiles__tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 100%); }
.hero-tiles__tile:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.hero-tiles__name { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; font-family: var(--font-heading-family); font-weight: var(--font-heading-weight, 700); font-size: clamp(1rem, .85rem + .5vw, 1.3rem); line-height: 1.15; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.hero-tiles__name > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.hero-tiles__name .icon { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: #fff; color: #111; transition: transform .25s ease; }
.hero-tiles__tile:hover .icon, .hero-tiles__tile:focus-visible .icon { transform: translateX(3px); }
@media (max-width: 599px) {
  .hero-tiles__name { left: 10px; right: 10px; bottom: 10px; gap: 6px; font-size: .95rem; }
  .hero-tiles__name .icon { width: 28px; height: 28px; padding: 6px; }
}
/* Phones and tablets: the headline across, then the first category tall beside two, an odd last one wide. */
.hero-tiles__grid > .hero-tiles__tile:nth-child(2) { grid-row: span 2; }
.hero-tiles__grid--n2 > .hero-tiles__tile:nth-child(2) { grid-row: auto; }
.hero-tiles__grid--n1 > .hero-tiles__tile:nth-child(2), .hero-tiles__grid--n4 > .hero-tiles__tile:nth-child(5), .hero-tiles__grid--n6 > .hero-tiles__tile:nth-child(7) { grid-column: 1 / -1; }
.hero-tiles__grid--n1 > .hero-tiles__tile:nth-child(2) { grid-row: auto; }
@media (min-width: 600px) and (max-width: 899px) {
  .hero-tiles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 26vw, 220px); }
  .hero-tiles__grid--n4 > .hero-tiles__tile:nth-child(5) { grid-column: span 2; }
  .hero-tiles__grid--n2 > .hero-tiles__tile:nth-child(2), .hero-tiles__grid--n3 > .hero-tiles__tile:nth-child(3), .hero-tiles__grid--n3 > .hero-tiles__tile:nth-child(4) { grid-column: span 2; }
}
@media (min-width: 900px) {
  .hero-tiles__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(clamp(210px, 19vw, 270px), auto)); grid-auto-rows: minmax(clamp(210px, 19vw, 270px), auto); }
  .hero-tiles__grid > * { grid-column: auto; grid-row: auto; }
  .hero-tiles__grid > .hero-tiles__tile:nth-child(n) { grid-column: auto; grid-row: auto; }
  .hero-tiles__lead { grid-column: 1 / 3; grid-row: 1; }
  .hero-tiles__grid > .hero-tiles__tile:nth-child(2) { grid-column: 3; grid-row: 1 / 3; }
  /* 4: tall, two squares, one wide under the headline. */
  .hero-tiles__grid--n4 > .hero-tiles__tile:nth-child(3) { grid-column: 4; grid-row: 1; }
  .hero-tiles__grid--n4 > .hero-tiles__tile:nth-child(4) { grid-column: 4; grid-row: 2; }
  .hero-tiles__grid--n4 > .hero-tiles__tile:nth-child(5) { grid-column: 1 / 3; grid-row: 2; }
  /* 5: tall and four squares. */
  .hero-tiles__grid--n5 > .hero-tiles__tile:nth-child(3) { grid-column: 4; grid-row: 1; }
  .hero-tiles__grid--n5 > .hero-tiles__tile:nth-child(4) { grid-column: 1; grid-row: 2; }
  .hero-tiles__grid--n5 > .hero-tiles__tile:nth-child(5) { grid-column: 2; grid-row: 2; }
  .hero-tiles__grid--n5 > .hero-tiles__tile:nth-child(6) { grid-column: 4; grid-row: 2; }
  /* 6: five columns; tall, four squares and one wide under the headline. */
  .hero-tiles__grid--n6 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hero-tiles__grid--n6 > .hero-tiles__tile:nth-child(3) { grid-column: 4; grid-row: 1; }
  .hero-tiles__grid--n6 > .hero-tiles__tile:nth-child(4) { grid-column: 5; grid-row: 1; }
  .hero-tiles__grid--n6 > .hero-tiles__tile:nth-child(5) { grid-column: 4; grid-row: 2; }
  .hero-tiles__grid--n6 > .hero-tiles__tile:nth-child(6) { grid-column: 5; grid-row: 2; }
  .hero-tiles__grid--n6 > .hero-tiles__tile:nth-child(7) { grid-column: 1 / 3; grid-row: 2; }
  /* Fewer than 4 categories: one row, the headline wider. */
  .hero-tiles__grid--n0, .hero-tiles__grid--n1, .hero-tiles__grid--n2, .hero-tiles__grid--n3 { grid-template-rows: minmax(clamp(260px, 26vw, 380px), auto); }
  .hero-tiles__grid--n0 { grid-template-columns: minmax(0, 1fr); }
  .hero-tiles__grid--n0 .hero-tiles__lead { grid-column: 1; min-height: 300px; }
  .hero-tiles__grid--n1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .hero-tiles__grid--n2 { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
  .hero-tiles__grid--n1 .hero-tiles__lead, .hero-tiles__grid--n2 .hero-tiles__lead, .hero-tiles__grid--n3 .hero-tiles__lead { grid-column: 1; }
  .hero-tiles__grid--n1 > .hero-tiles__tile:nth-child(n), .hero-tiles__grid--n2 > .hero-tiles__tile:nth-child(n), .hero-tiles__grid--n3 > .hero-tiles__tile:nth-child(n) { grid-column: auto; grid-row: 1; }
}

/* Search first: a big heading, a large search box, popular searches and category chips. */
.hero-search { position: relative; isolation: isolate; overflow: hidden; background-color: var(--color-background-alt); background-image: radial-gradient(color-mix(in srgb, var(--color-heading) 13%, transparent) 1.3px, transparent 1.6px); background-size: 24px 24px; background-position: 12px 12px; color: var(--color-text); text-align: center; }
.hero-search__inner { position: relative; padding-block: clamp(40px, 7vw, 96px) clamp(28px, 4vw, 48px); display: flex; flex-direction: column; align-items: center; }
.hero-search h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.025em; max-width: 18ch; margin: 0 0 .3em; }
.hero-search__text { font-size: 1.1rem; max-width: 52ch; margin: 0; }
.hero-search__form { position: relative; display: flex; align-items: center; gap: 8px; width: min(100%, 760px); margin-top: clamp(22px, 3vw, 34px); padding: 7px 7px 7px 52px; border-radius: var(--shape-input-radius, var(--shape-button-radius, 8px)); background: var(--color-background); border: 2px solid var(--color-heading); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .45); }
.hero-search__form:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent), 0 18px 40px -22px rgba(0, 0, 0, .45); }
.hero-search__form > .icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--color-subheading); pointer-events: none; }
.hero-search__form input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; color: var(--color-heading); font-size: clamp(1rem, .9rem + .4vw, 1.2rem); outline: none; }
.hero-search__form input::placeholder { color: var(--color-subheading); opacity: 1; }
.hero-search__form .btn { flex: none; min-height: 52px; padding-inline: clamp(16px, 2.4vw, 32px); border-radius: calc(var(--shape-input-radius, var(--shape-button-radius, 8px)) - 4px); }
.hero-search__popular { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; margin-top: 18px; max-width: 820px; }
.hero-search__popular ul, .hero-search__cats ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hero-search__label { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-subheading); }
.hero-search__chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--color-outline); background: var(--color-background); color: var(--color-heading); font-size: .92rem; font-weight: 600; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.hero-search__chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.hero-search__chip .icon { opacity: .55; }
.hero-search .hero-search__facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; font-size: .92rem; font-weight: 600; color: var(--color-heading); }
.hero-search__facts li { display: inline-flex; align-items: center; gap: 7px; }
.hero-search__facts .icon { color: var(--color-accent-text); }
.hero-search__cats { position: relative; border-top: 1px solid var(--color-outline); background: color-mix(in srgb, var(--color-background) 55%, transparent); padding-block: 16px; }
.hero-search__cats .container { display: flex; align-items: center; gap: 10px 16px; }
.hero-search__cats .hero-search__label { flex: none; }
.hero-search__cats ul { flex: 1; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px; min-width: 0; }
.hero-search__cats ul::-webkit-scrollbar { display: none; }
.hero-search__cats li { flex: none; scroll-snap-align: start; }
.hero-search__cat { display: inline-flex; align-items: center; gap: 10px; max-width: 240px; padding: 5px 16px 5px 5px; border-radius: 999px; background: var(--color-background); border: 1px solid var(--color-outline); color: var(--color-heading); font-size: .92rem; font-weight: 600; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.hero-search__cat:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.hero-search__cat-media { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--color-background-alt); }
.hero-search__cat-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-search__cat-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-search__cat--all { padding: 12px 16px; gap: 6px; background: transparent; }
/* Primary colour and picture backgrounds: light text. */
.hero-search--primary { background-color: var(--color-primary); background-image: radial-gradient(color-mix(in srgb, var(--color-on-primary) 16%, transparent) 1.3px, transparent 1.6px); color: var(--color-on-primary); }
.hero-search--image { background: var(--color-heading); color: #fff; }
.hero-search--primary h1, .hero-search--primary .kit-eyebrow, .hero-search--primary .hero-search__facts, .hero-search--primary .hero-search__facts .icon, .hero-search--primary .hero-search__label { color: inherit; }
.hero-search--image h1, .hero-search--image .kit-eyebrow, .hero-search--image .hero-search__facts, .hero-search--image .hero-search__facts .icon, .hero-search--image .hero-search__label { color: #fff; }
.hero-search--primary .hero-search__label, .hero-search--image .hero-search__label { opacity: .8; }
.hero-search--primary .hero-search__form, .hero-search--image .hero-search__form { border-color: transparent; }
.hero-search--primary .hero-search__chip, .hero-search--image .hero-search__chip { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 40%, transparent); }
.hero-search--primary .hero-search__chip:hover, .hero-search--image .hero-search__chip:hover { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
.hero-search--primary .hero-search__cats, .hero-search--image .hero-search__cats { border-top-color: color-mix(in srgb, currentColor 22%, transparent); background: rgba(0, 0, 0, .16); }
.hero-search--primary .hero-search__cat--all, .hero-search--image .hero-search__cat--all { color: inherit; border-color: color-mix(in srgb, currentColor 40%, transparent); }
.hero-search--primary .hero-search__form .btn--primary { background: var(--color-heading); border-color: var(--color-heading); color: var(--color-background); }
.hero-search__media { position: absolute; inset: 0; z-index: -2; }
.hero-search__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-search--image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, var(--hero-overlay, .6)); }
@media (max-width: 599px) {
  .hero-search__form { padding-left: 44px; }
  .hero-search__form > .icon { left: 14px; }
  .hero-search__form .btn { padding-inline: 14px; }
  .hero-search__cats .container { flex-direction: column; align-items: flex-start; padding-inline: 0; }
  .hero-search__cats .hero-search__label { padding-inline: var(--layout-spacing, 16px); }
  .hero-search__cats ul { width: 100%; padding-inline: var(--layout-spacing, 16px); scroll-padding-inline: var(--layout-spacing, 16px); }
}

/* Card fan: the heading beside a fanned hand of product cards that straighten on hover; a swipe row on phones. */
.hero-cards { overflow: hidden; }
.hero-cards--tint { background: var(--color-background-alt); }
.hero-cards--primary { background: var(--color-primary); color: var(--color-on-primary); }
.hero-cards--primary h1, .hero-cards--primary .kit-eyebrow { color: inherit; }
.hero-cards--primary .btn--primary { background: var(--color-on-primary); border-color: var(--color-on-primary); color: var(--color-primary); }
.hero-cards--primary .btn--secondary { border-color: currentColor; color: inherit; }
.hero-cards__inner { display: grid; gap: 28px; align-items: center; padding-block: clamp(32px, 5vw, 72px); }
.hero-cards__content { min-width: 0; }
.hero-cards__content h1 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.2rem); line-height: 1.02; letter-spacing: -.025em; margin: 0 0 .35em; max-width: 14ch; }
.hero-cards__content p { font-size: 1.1rem; max-width: 42ch; margin: 0; }
.hero-cards--text-only .hero-cards__content { max-width: 760px; }
.hero-cards .hero-cards__fan { list-style: none; margin: 0 calc(var(--layout-spacing, 16px) * -1); padding: 8px var(--layout-spacing, 16px) 18px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--layout-spacing, 16px); scrollbar-width: none; }
.hero-cards__fan::-webkit-scrollbar { display: none; }
/* Phones: two whole cards in view, tablets three; the rest swipe in (no card is cut at the edge). */
.hero-cards__item { flex: 0 0 calc((100% - 14px) / 2); scroll-snap-align: start; }
@media (min-width: 600px) and (max-width: 899px) { .hero-cards__item { flex-basis: calc((100% - 28px) / 3); } }
.hero-cards__card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 10px 10px 14px; border-radius: calc(var(--shape-card-radius, 12px) + 4px); background: var(--color-background); color: var(--color-text); text-decoration: none; box-shadow: 0 1px 0 var(--color-outline), 0 18px 40px -24px rgba(0, 0, 0, .45); border: 1px solid var(--color-outline); }
.hero-cards__card:hover { color: var(--color-text); }
.hero-cards__card:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.hero-cards__media { display: block; aspect-ratio: 1; border-radius: var(--shape-card-radius, 12px); overflow: hidden; background: var(--color-background-alt); }
.hero-cards__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-cards__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 4px 0; flex: 1; }
.hero-cards__name { font-weight: 700; color: var(--color-heading); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.hero-cards__body .price { margin-top: auto; }
@media (min-width: 900px) {
  .hero-cards__inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 4vw, 64px); }
  .hero-cards--text-only .hero-cards__inner { grid-template-columns: minmax(0, 1fr); }
  .hero-cards--flip .hero-cards__content { order: 2; }
  /* The fan fills its column: cards up to 300 px wide, spread to the column's width, centred on the heading. */
  .hero-cards .hero-cards__fan { container-type: inline-size; position: relative; height: calc(min(300px, 22vw) + 200px); margin: 0; padding: 0; overflow: visible; display: block; }
  .hero-cards__fan::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(100%, 560px); aspect-ratio: 1; max-height: 115%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent) 55%, transparent), transparent); transform: translate(-50%, -50%); opacity: .5; pointer-events: none; }
  .hero-cards__item { --card: min(300px, 22vw, 50cqi); --step: min(150px, calc((100cqi - var(--card) - 64px) / max(var(--n) - 1, 1))); --o: calc(var(--i) - (var(--n) - 1) / 2); --rot: calc(var(--o) * 6deg); --drop: calc(var(--o) * var(--o) * 10px - 12px); position: absolute; left: 50%; top: 50%; width: var(--card); z-index: var(--z, 1); transform: translate(-50%, -50%) translateX(calc(var(--o) * var(--step))) translateY(var(--drop)) rotate(var(--rot)); transform-origin: 50% 85%; transition: transform .45s cubic-bezier(.2, .8, .2, 1), z-index 0s .1s; }
  .hero-cards__item.is-front { --rot: 0deg; --drop: -22px; }
  /* Only the front card shows its name and price; the others show their picture until they come forward. */
  .hero-cards__body { transition: opacity .25s ease; }
  .hero-cards__item:not(.is-front) .hero-cards__body { opacity: 0; }
  .hero-cards__item:hover, .hero-cards__item:focus-within { z-index: 20; transform: translate(-50%, -50%) translateX(calc(var(--o) * var(--step))) translateY(-34px) rotate(0deg) scale(1.03); transition: transform .45s cubic-bezier(.2, .8, .2, 1), z-index 0s; }
  .hero-cards__item:hover .hero-cards__body, .hero-cards__item:focus-within .hero-cards__body { opacity: 1; }
  .hero-cards__fan:has(.hero-cards__item:not(.is-front):hover, .hero-cards__item:not(.is-front):focus-within) .is-front .hero-cards__body { opacity: 0; }
  .hero-cards__item:hover .hero-cards__card, .hero-cards__item:focus-within .hero-cards__card { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .5); }
}
@media (prefers-reduced-motion: reduce) { .hero-cards__item, .hero-cards__item:hover, .hero-cards__item:focus-within, .hero-cards__body { transition: none; } }

/* Photo mosaic: four photos of different spans with a coloured text block in one cell. */
.hero-mosaic { padding-block: clamp(16px, 2.5vw, 32px); }
.hero-mosaic__grid { display: grid; gap: var(--layout-grid-gap, 16px); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: clamp(130px, 34vw, 240px); }
.hero-mosaic__text { grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(24px, 3.4vw, 48px); border-radius: var(--shape-card-radius, 12px); background: var(--color-accent); color: var(--color-on-accent); min-width: 0; }
.hero-mosaic__text h1 { color: inherit; font-size: clamp(2rem, 1.2rem + 2.8vw, 3.6rem); line-height: 1.02; letter-spacing: -.025em; margin: 0 0 .3em; max-width: 15ch; }
.hero-mosaic__text p { margin: 0; max-width: 42ch; font-size: 1.05rem; }
.hero-mosaic__text .kit-eyebrow { color: inherit; opacity: .8; }
.hero-mosaic__text .kit-actions { margin-top: 20px; }
.hero-mosaic__text--accent .btn--primary { background: var(--color-on-accent); border-color: var(--color-on-accent); color: var(--color-accent); }
.hero-mosaic__text--accent .btn--secondary { border-color: currentColor; color: inherit; }
.hero-mosaic__text--primary { background: var(--color-primary); color: var(--color-on-primary); }
.hero-mosaic__text--primary .btn--primary { background: var(--color-on-primary); border-color: var(--color-on-primary); color: var(--color-primary); }
.hero-mosaic__text--primary .btn--secondary, .hero-mosaic__text--dark .btn--secondary { border-color: currentColor; color: inherit; }
.hero-mosaic__text--dark { background: var(--color-heading); color: var(--color-background); }
.hero-mosaic__text--dark .btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.hero-mosaic__text--tint { background: var(--color-background-alt); color: var(--color-text); }
.hero-mosaic__text--tint h1 { color: var(--color-heading); }
.hero-mosaic__text--tint .kit-eyebrow { color: var(--color-accent-text); opacity: 1; }
.hero-mosaic__photo { position: relative; display: block; min-width: 0; border-radius: var(--shape-card-radius, 12px); overflow: hidden; background: var(--color-background-alt); color: var(--color-heading); text-decoration: none; }
.hero-mosaic__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
a.hero-mosaic__photo:hover img, a.hero-mosaic__photo:focus-visible img { transform: scale(1.05); }
a.hero-mosaic__photo:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.hero-mosaic__label { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--color-background); color: var(--color-heading); font-size: .86rem; font-weight: 700; line-height: 1.2; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .35); }
.hero-mosaic__photo--1 { grid-row: span 2; }
.hero-mosaic__photo--4 { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .hero-mosaic__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(clamp(220px, 21vw, 300px), auto)); grid-auto-rows: auto; }
  .hero-mosaic__text { grid-column: 2 / 4; grid-row: 1; }
  .hero-mosaic__photo--1 { grid-column: 1; grid-row: 1 / 3; }
  .hero-mosaic__photo--2 { grid-column: 4; grid-row: 1 / 3; }
  .hero-mosaic__photo--3 { grid-column: 2; grid-row: 2; }
  .hero-mosaic__photo--4 { grid-column: 3; grid-row: 2; }
  .hero-mosaic--text-bottom .hero-mosaic__text { grid-row: 2; }
  .hero-mosaic--text-bottom .hero-mosaic__photo--3, .hero-mosaic--text-bottom .hero-mosaic__photo--4 { grid-row: 1; }
}

/* Framed picture: a photo in a thick mat and a thin frame, a museum label beneath, the text beside on a calm wall. */
.hero-frame { position: relative; isolation: isolate; overflow: hidden; }
.hero-frame--tint { background: var(--color-background-alt); }
.hero-frame__inner { display: grid; gap: clamp(32px, 5vw, 48px); align-items: center; padding-block: clamp(36px, 6vw, 88px); }
.hero-frame__content { min-width: 0; }
.hero-frame__content h1 { font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4.2rem); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 .4em; max-width: 14ch; }
.hero-frame__content p { font-size: 1.1rem; max-width: 44ch; margin: 0; }
.hero-frame__content::after { content: ""; display: block; width: 64px; height: 2px; margin-top: 30px; background: var(--color-accent); }
.hero-frame__piece { position: relative; margin: 0 auto; width: min(100%, 520px); }
.hero-frame__piece::before { content: ""; position: absolute; left: 50%; top: -12%; width: 130%; height: 70%; transform: translateX(-50%); z-index: -1; background: radial-gradient(50% 50% at 50% 30%, rgba(255, 255, 255, .55), transparent 70%); pointer-events: none; }
.hero-frame__frame { padding: clamp(22px, 3.8vw, 48px); background: #fbfaf7; border: clamp(6px, .8vw, 10px) solid var(--color-heading); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), inset 0 2px 10px rgba(0, 0, 0, .1), 0 2px 0 rgba(0, 0, 0, .06), 0 34px 60px -30px rgba(0, 0, 0, .55), 0 12px 24px -16px rgba(0, 0, 0, .3); }
.hero-frame__frame--tint { background: color-mix(in srgb, var(--color-background-alt) 70%, #fff); }
.hero-frame__frame--dark { background: #1b1a19; border-color: #0e0d0c; }
.hero-frame__photo { aspect-ratio: var(--hero-frame-ratio, 4 / 5); overflow: hidden; background: var(--color-background-alt); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(0, 0, 0, .1); outline: 1px solid rgba(255, 255, 255, .6); outline-offset: 3px; }
.hero-frame__frame--dark .hero-frame__photo { outline-color: rgba(255, 255, 255, .18); }
.hero-frame__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-frame__label { position: relative; display: grid; gap: 2px; width: fit-content; max-width: min(100%, 300px); margin: 22px 0 0 auto; padding: 12px 16px; background: var(--color-background); border: 1px solid var(--color-outline); box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .35); font-size: .82rem; line-height: 1.4; color: var(--color-text); text-align: left; }
.hero-frame__label strong { font-family: var(--font-heading-family); font-size: .98rem; color: var(--color-heading); }
.hero-frame__label em { color: var(--color-subheading); }
.hero-frame__label span { margin-top: 4px; }
@media (min-width: 700px) {
  .hero-frame__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 100px); }
  .hero-frame__piece { margin: 0 0 0 auto; width: min(100%, 460px); }
  .hero-frame--flip .hero-frame__piece { order: -1; margin: 0 auto 0 0; }
  .hero-frame--flip .hero-frame__label { margin: 22px auto 0 0; }
}

/* Sale: an offer ticket with a huge figure and a perforated edge, four products beside or under it. */
.hero-sale { --sale-bg: var(--color-accent); --sale-ink: var(--color-on-accent); display: grid; gap: clamp(16px, 2vw, 24px); padding-block: clamp(16px, 2.5vw, 32px); }
.hero-sale--primary { --sale-bg: var(--color-primary); --sale-ink: var(--color-on-primary); }
.hero-sale--dark { --sale-bg: var(--color-heading); --sale-ink: var(--color-background); }
.hero-sale__ticket { position: relative; display: grid; min-width: 0; border-radius: var(--shape-card-radius, 12px); background-color: var(--sale-bg); background-image: repeating-linear-gradient(-45deg, transparent 0 22px, color-mix(in srgb, var(--sale-ink) 7%, transparent) 22px 44px); color: var(--sale-ink); overflow: hidden; }
.hero-sale__offer { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(26px, 4vw, 52px); min-width: 0; }
.hero-sale__offer .kit-eyebrow { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--sale-ink); color: var(--sale-bg); margin-bottom: 18px; }
.hero-sale__figure { display: flex; align-items: flex-start; gap: .06em; margin: 0; font-family: var(--font-heading-family); font-weight: 900; line-height: .82; letter-spacing: -.05em; color: inherit; }
.hero-sale__value { font-size: clamp(5rem, 2.6rem + 10vw, 10.5rem); font-variant-numeric: tabular-nums; text-shadow: .045em .045em 0 color-mix(in srgb, var(--sale-ink) 22%, transparent); }
.hero-sale__suffix { font-size: clamp(1.6rem, 1rem + 2.4vw, 3rem); letter-spacing: -.02em; text-transform: uppercase; margin-top: .3em; padding: .1em .3em; border: 3px solid currentColor; border-radius: 8px; transform: rotate(-6deg); }
.hero-sale h1 { color: inherit; font-size: clamp(1.7rem, 1.1rem + 2vw, 2.7rem); line-height: 1.05; margin: 18px 0 .3em; max-width: 18ch; }
.hero-sale__text { margin: 0; max-width: 44ch; font-size: 1.05rem; opacity: .92; }
.hero-sale__stub { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: clamp(20px, 2.6vw, 30px) clamp(26px, 4vw, 52px); border-top: 3px dashed color-mix(in srgb, var(--sale-ink) 45%, transparent); background: color-mix(in srgb, var(--sale-ink) 9%, transparent); }
.hero-sale__stub::before, .hero-sale__stub::after { content: ""; position: absolute; top: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--color-background); }
.hero-sale__stub::before { left: -14px; }
.hero-sale__stub::after { right: -14px; }
.hero-sale__stub .countdown-widget .eyebrow { color: inherit; opacity: .85; }
.hero-sale__stub .countdown { margin: 4px 0 0; gap: 8px; }
.hero-sale__stub .countdown__unit { min-width: 66px; background: var(--sale-ink); color: var(--sale-bg); border-radius: var(--shape-radius, 8px); }
.hero-sale__stub .kit-actions { margin-top: 0; }
.hero-sale--accent .hero-sale__stub .btn--secondary, .hero-sale--primary .hero-sale__stub .btn--secondary, .hero-sale--dark .hero-sale__stub .btn--secondary { border-color: currentColor; color: inherit; }
.hero-sale--primary .hero-sale__stub .btn--primary, .hero-sale--dark .hero-sale__stub .btn--primary { background: var(--sale-ink); border-color: var(--sale-ink); color: var(--sale-bg); }
.hero-sale__products { min-width: 0; display: flex; flex-direction: column; }
.hero-sale__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.hero-sale__head h2 { margin: 0; font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); }
.hero-sale__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--layout-grid-gap, 16px); flex: 1; }
.hero-sale__item { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 10px 10px 14px; border-radius: var(--shape-card-radius, 12px); border: 2px solid var(--color-heading); background: var(--color-background); color: var(--color-heading); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.hero-sale__item:hover { color: var(--color-heading); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--sale-bg), 6px 6px 0 2px var(--color-heading); }
.hero-sale__item:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.hero-sale__media { position: relative; display: block; aspect-ratio: 5 / 4; border-radius: calc(var(--shape-card-radius, 12px) - 4px); overflow: hidden; background: var(--color-background-alt); }
.hero-sale__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-sale__badge { position: absolute; top: 8px; right: 8px; padding: 5px 9px; border-radius: 999px; background: var(--color-sale); color: #fff; font-size: .78rem; font-weight: 800; transform: rotate(4deg); }
.hero-sale__name { font-weight: 700; font-size: .95rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.hero-sale__item .price { margin-top: auto; font-size: .95rem; }
@media (min-width: 900px) {
  .hero-sale--beside { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
  .hero-sale--beside .hero-sale__ticket { grid-template-rows: 1fr auto; }
  .hero-sale--under .hero-sale__ticket { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .hero-sale--under .hero-sale__stub, .hero-sale--solo .hero-sale__stub { flex-direction: column; align-items: flex-start; justify-content: center; border-top: 0; border-left: 3px dashed color-mix(in srgb, var(--sale-ink) 45%, transparent); }
  .hero-sale--under .hero-sale__stub::before, .hero-sale--solo .hero-sale__stub::before { top: -14px; left: -15px; }
  .hero-sale--under .hero-sale__stub::after, .hero-sale--solo .hero-sale__stub::after { top: auto; bottom: -14px; right: auto; left: -15px; }
  .hero-sale--solo .hero-sale__ticket { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .hero-sale--under .hero-sale__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .hero-sale__item, .hero-sale__item:hover { transition: none; transform: none; } }

/* Lens: a round photo with a ring of text turning slowly around it, an optional small second photo. */
.hero-lens { overflow: hidden; }
.hero-lens--tint { background: var(--color-background-alt); }
.hero-lens__inner { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; padding-block: clamp(32px, 5vw, 80px); }
.hero-lens__content { min-width: 0; }
.hero-lens__content h1 { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.6rem); line-height: 1; letter-spacing: -.03em; margin: 0 0 .35em; max-width: 13ch; }
.hero-lens__content p { font-size: 1.1rem; max-width: 42ch; margin: 0; }
.hero-lens__stage { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin-inline: auto; }
.hero-lens__photo { position: absolute; inset: 11%; border-radius: 50%; overflow: hidden; background: var(--color-background-alt); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); }
.hero-lens__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-lens__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--color-heading); animation: hero-lens-turn 40s linear infinite; }
.hero-lens__ring text { fill: currentColor; font-family: var(--font-heading-family); font-weight: 700; font-size: 22px; letter-spacing: 1px; text-transform: uppercase; }
.hero-lens__ring path { fill: none; }
.hero-lens__stage::before { content: ""; position: absolute; inset: 3%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--color-heading) 30%, transparent); pointer-events: none; }
.hero-lens__stage::after { content: ""; position: absolute; inset: 17.5%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); pointer-events: none; }
.hero-lens__mini { position: absolute; left: -2%; bottom: 0; width: 34%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: clamp(5px, .8vw, 9px) solid var(--color-background); background: var(--color-background-alt); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .5); z-index: 1; }
.hero-lens--tint .hero-lens__mini { border-color: var(--color-background-alt); }
.hero-lens__mini img { width: 100%; height: 100%; object-fit: cover; }
.hero-lens__dot { position: absolute; right: 1%; top: 1%; width: 8%; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 clamp(5px, .8vw, 9px) var(--color-background); }
.hero-lens--tint .hero-lens__dot { box-shadow: 0 0 0 clamp(5px, .8vw, 9px) var(--color-background-alt); }
@keyframes hero-lens-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-lens__ring { animation: none; } }
@media (max-width: 599px) { .hero-lens__stage { width: min(88%, 420px); } }
@media (min-width: 700px) {
  .hero-lens__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-lens__stage { margin: 0 0 0 auto; }
  .hero-lens--flip .hero-lens__stage { order: -1; margin: 0 auto 0 0; }
}

/* Reduced motion: the hover zooms and lifts of the heroes above stand still. */
@media (prefers-reduced-motion: reduce) {
  .hero-tiles__media img, .hero-tiles__name .icon, .hero-mosaic__photo img { transition: none; }
  .hero-tiles__tile:hover .hero-tiles__media img, .hero-tiles__tile:focus-visible .hero-tiles__media img, a.hero-mosaic__photo:hover img, a.hero-mosaic__photo:focus-visible img { transform: none; }
}

/* ---------- Footers, menu board, booking and price lists ---------- */
/* ---------- Price list items (widget price_item): name, tag, dotted leader, price, note ---------- */
.price-list__items { display: block; }
.price-list__item { padding-block: 12px; break-inside: avoid; }
.price-list__row { display: flex; align-items: baseline; gap: 10px; }
.price-list__name { flex: 0 1 auto; min-width: 0; font-weight: 700; color: var(--color-heading); overflow-wrap: anywhere; }
.price-list__tag { display: inline-block; vertical-align: .12em; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: var(--color-accent); color: var(--color-on-accent); font-family: var(--font-body-family, inherit); font-size: .66rem; font-weight: 700; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; white-space: nowrap; }
.price-list__lead { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted color-mix(in srgb, currentColor 38%, transparent); transform: translateY(-.28em); }
.price-list__price { flex: none; font-weight: 700; color: var(--color-heading); white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-list__note { margin: 2px 0 0; font-size: .88rem; color: var(--color-subheading); }

/* ---------- Price list section: grouped items (heading widgets), 1 or 2 columns, optional photo ---------- */
.price-list { display: grid; gap: 32px; align-items: start; }
.price-list--narrow .price-list__body { width: 100%; max-width: 760px; margin-inline: auto; }
.price-list__intro { max-width: 60ch; margin-bottom: 20px; }
.price-list__intro h2 { margin-bottom: .3em; }
.price-list__intro p { color: var(--color-subheading); margin: 0; }
.price-list__items--two { column-gap: 56px; }
.price-list__items .widget-heading { margin: 28px 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--color-outline); font-size: 1.3rem; break-after: avoid; break-inside: avoid; }
.price-list__items > .widget-heading:first-child { margin-top: 0; }
.price-list__footnote { margin: 24px 0 0; font-size: .86rem; font-style: italic; color: var(--color-subheading); }
.price-list__media { border-radius: var(--shape-card-radius, 12px); overflow: hidden; background: var(--color-background-alt); aspect-ratio: 4 / 3; }
.price-list__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .price-list__items--two { column-count: 2; }
  .price-list--with-image { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 72px); }
  .price-list--image-right { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .price-list--image-right .price-list__media { order: 2; }
  .price-list--with-image .price-list__media { aspect-ratio: 3 / 4; position: sticky; top: 24px; }
}

/* ---------- Hero: menu board (chalk, paper or plain) beside a tall photo ---------- */
.hero-menu { display: grid; gap: var(--layout-grid-gap, 16px); padding-block: clamp(16px, 3vw, 32px); }
.hero-menu__board { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 4.5vw, 64px); border-radius: var(--shape-card-radius, 12px); }
.hero-menu h1 { font-size: clamp(2rem, 1.2rem + 2.8vw, var(--font-heading-size, 56px)); max-width: 17ch; margin-bottom: .35em; }
.hero-menu__text { font-size: 1.05rem; max-width: 52ch; }
.hero-menu__items { margin-top: 6px; }
.hero-menu__items:empty { display: none; }
.hero-menu .price-list__name { font-family: var(--font-heading-family); font-size: 1.12rem; }
.hero-menu .price-list__price { font-size: 1.05rem; }
.hero-menu__footnote { margin: 14px 0 0; font-size: .86rem; font-style: italic; opacity: .8; }
.hero-menu__media { border-radius: var(--shape-card-radius, 12px); overflow: hidden; background: var(--color-background-alt); aspect-ratio: 4 / 3; }
.hero-menu__media img { width: 100%; height: 100%; object-fit: cover; }
/* Chalkboard: the heading colour as the board, page colour as the chalk, a hand-drawn frame. */
.hero-menu--chalk .hero-menu__board { background-color: var(--color-heading); background-image: radial-gradient(ellipse at 18% 8%, rgba(255, 255, 255, .09), transparent 55%), radial-gradient(ellipse at 85% 95%, rgba(255, 255, 255, .06), transparent 50%); color: var(--color-background); outline: 1.5px dashed color-mix(in srgb, var(--color-background) 30%, transparent); outline-offset: -14px; }
.hero-menu--chalk h1, .hero-menu--chalk .price-list__name, .hero-menu--chalk .price-list__price { color: var(--color-background); }
.hero-menu--chalk .kit-eyebrow { color: var(--color-accent); }
.hero-menu--chalk .price-list__note { color: color-mix(in srgb, var(--color-background) 72%, transparent); }
.hero-menu--chalk .btn--primary { background: var(--color-background); border-color: var(--color-background); color: var(--color-heading); }
.hero-menu--chalk .btn--secondary, .hero-menu--chalk .btn--link { color: var(--color-background); border-color: var(--color-background); }
.hero-menu--chalk .btn--secondary:hover { background: var(--color-background); color: var(--color-heading); }
.hero-menu--chalk :focus-visible { outline-color: currentColor; }
/* Paper: a light card with a ruled inner border, the heading centred like a printed menu. */
.hero-menu--paper .hero-menu__board { background: var(--color-background); color: var(--color-text); border: 1px solid var(--color-outline); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .4); outline: 1px solid var(--color-outline); outline-offset: -12px; text-align: center; }
.hero-menu--paper h1, .hero-menu--paper .hero-menu__text { margin-inline: auto; }
.hero-menu--paper .hero-menu__items { text-align: left; border-top: 1px solid var(--color-outline); margin-top: 14px; padding-top: 6px; }
.hero-menu--paper .kit-actions { justify-content: center; }
/* Plain: no board, the list straight on the page. */
.hero-menu--plain .hero-menu__board { padding-inline: 0; }
@media (min-width: 900px) {
  .hero-menu { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
  .hero-menu--reverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .hero-menu--reverse .hero-menu__media { order: -1; }
  .hero-menu__media { aspect-ratio: auto; min-height: 560px; }
  .hero-menu--plain .hero-menu__board { padding-right: clamp(24px, 4vw, 56px); }
  .hero-menu--plain.hero-menu--reverse .hero-menu__board { padding-right: 0; padding-left: clamp(24px, 4vw, 56px); }
}

/* ---------- Hero: booking card over a full-width photo ---------- */
.hero-booking { position: relative; display: grid; isolation: isolate; }
.hero-booking__media { aspect-ratio: 4 / 3; background: var(--color-background-alt); }
.hero-booking__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-booking__inner { position: relative; margin-top: -56px; }
.hero-booking__card { background: var(--color-background); color: var(--color-text); border-radius: var(--shape-card-radius, 12px); padding: clamp(22px, 3vw, 40px); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .5); }
.hero-booking h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 3.1rem); margin-bottom: .3em; }
.hero-booking__text { margin-bottom: 0; }
.hero-booking__services { margin-top: 18px; }
.hero-booking__label { margin: 0 0 2px; font-family: var(--font-body-family, inherit); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-subheading); }
.hero-booking .price-list__item { padding-block: 10px; border-bottom: 1px solid var(--color-outline); }
.hero-booking .price-list__item:last-child { border-bottom: 0; }
.hero-booking .price-list__note { font-size: .82rem; }
.hero-booking__facts { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--color-outline); display: grid; gap: 8px; font-size: .93rem; }
.hero-booking__facts li { display: flex; gap: 10px; align-items: center; }
.hero-booking__facts .icon { flex: none; color: var(--color-accent-text); }
.hero-booking__facts a { font-weight: 700; text-decoration: none; }
.hero-booking__facts a:hover { text-decoration: underline; }
.hero-booking__button { width: 100%; margin-top: 20px; }
@media (min-width: 700px) {
  .hero-booking { min-height: min(88vh, 780px); align-items: center; }
  .hero-booking__media { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; }
  .hero-booking__inner { margin-top: 0; padding-block: 56px; display: flex; }
  .hero-booking--right .hero-booking__inner { justify-content: flex-end; }
  .hero-booking__card { width: min(100%, 470px); }
}

/* ---------- Opening hours: hours table, address, directions, photo or map ---------- */
.hours { display: grid; gap: var(--layout-grid-gap, 16px); }
.hours__card { padding: clamp(24px, 4vw, 52px); border-radius: var(--shape-card-radius, 12px); background: var(--color-background); border: 1px solid var(--color-outline); }
.hours__card h2 { margin-bottom: .4em; }
.hours__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours__table th, .hours__table td { padding: 11px 0; border-bottom: 1px dashed color-mix(in srgb, currentColor 22%, transparent); text-align: left; vertical-align: top; }
.hours__table th { padding-right: 16px; font-weight: 700; color: var(--color-heading); }
.hours__table td { text-align: right; white-space: nowrap; }
.hours__table td.hours__line { text-align: left; white-space: normal; font-size: .9rem; font-style: italic; opacity: .85; }
.hours__note { margin: 12px 0 0; font-size: .88rem; color: var(--color-subheading); }
.hours__contact { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.hours__contact li { display: flex; gap: 10px; align-items: flex-start; }
.hours__contact .icon { flex: none; margin-top: 3px; color: var(--color-accent-text); }
.hours__contact a { text-decoration: none; font-weight: 600; }
.hours__contact a:hover { text-decoration: underline; }
.hours .kit-actions { margin-top: 22px; }
.hours__media { border-radius: var(--shape-card-radius, 12px); overflow: hidden; background: var(--color-background-alt); aspect-ratio: 4 / 3; }
.hours__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .hours { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .hours--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hours--reverse .hours__media { order: -1; }
  .hours__media { aspect-ratio: auto; min-height: 420px; }
}

/* ---------- Booking band: heading, text, phone set large, a booking button, an optional photo ---------- */
.booking-band { --booking-pad: clamp(24px, 4vw, 48px); display: grid; gap: 24px; align-items: center; padding: var(--booking-pad); border-radius: var(--shape-card-radius, 12px); overflow: hidden; }
.booking-band--primary { background: var(--color-primary); color: var(--color-on-primary); --booking-fg: var(--color-on-primary); --booking-bg: var(--color-primary); }
.booking-band--accent { background: var(--color-accent); color: var(--color-on-accent); --booking-fg: var(--color-on-accent); --booking-bg: var(--color-accent); }
.booking-band--tint { background: var(--color-background-alt); color: var(--color-text); --booking-fg: var(--color-primary); --booking-bg: var(--color-on-primary); }
.booking-band h2 { color: inherit; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); margin: 0 0 .3em; }
.booking-band--tint h2 { color: var(--color-heading); }
.booking-band__copy p { margin: 0; max-width: 50ch; opacity: .9; }
.booking-band__eyebrow { display: inline-block; margin-bottom: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.booking-band__media { margin: calc(var(--booking-pad) * -1) calc(var(--booking-pad) * -1) 0; aspect-ratio: 16 / 9; background: color-mix(in srgb, currentColor 10%, transparent); }
.booking-band__media img { width: 100%; height: 100%; object-fit: cover; }
.booking-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.booking-band__phone { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.booking-band__phone:hover { color: inherit; }
.booking-band__phone .icon { box-sizing: content-box; flex: none; padding: 12px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, currentColor 40%, transparent); }
.booking-band__phone > span { display: grid; white-space: nowrap; font-family: var(--font-heading-family); font-size: clamp(1.1rem, .85rem + 1vw, 1.4rem); font-weight: 700; line-height: 1.2; }
.booking-band__phone:hover > span { text-decoration: underline; }
.booking-band__phone-label { font-family: var(--font-body-family, inherit); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.booking-band__button, .booking-band__button:hover { background: var(--booking-fg); border-color: var(--booking-fg); color: var(--booking-bg); }
.booking-band :focus-visible { outline-color: currentColor; }
@media (min-width: 900px) {
  .booking-band { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
  .booking-band--with-image { grid-template-columns: 240px minmax(0, 1fr) auto; }
  .booking-band__media { align-self: stretch; margin: calc(var(--booking-pad) * -1) 0 calc(var(--booking-pad) * -1) calc(var(--booking-pad) * -1); aspect-ratio: auto; min-height: 240px; }
  .booking-band__actions { flex-direction: column; align-items: flex-start; }
}

/* ---------- Footer: newsletter first (a big sign-up band, then one compact row of links) ---------- */
.ftr-newsletter { background: var(--color-footer-background); color: var(--color-footer-text, #eee); margin-top: var(--layout-section-spacing, 56px); padding-top: clamp(20px, 4vw, 48px); }
.ftr-newsletter a { color: inherit; text-decoration: none; }
.ftr-newsletter a:hover { text-decoration: underline; }
.ftr-newsletter :focus-visible { outline-color: currentColor; }
.ftr-newsletter__band { display: grid; border-radius: var(--shape-card-radius, 12px); overflow: hidden; background: var(--ftr-band-bg); color: var(--ftr-band-fg); }
.ftr-newsletter__band--primary { --ftr-band-bg: var(--color-primary); --ftr-band-fg: var(--color-on-primary); }
.ftr-newsletter__band--accent { --ftr-band-bg: var(--color-accent); --ftr-band-fg: var(--color-on-accent); }
.ftr-newsletter__band--tint { --ftr-band-bg: var(--color-background-alt); --ftr-band-fg: var(--color-heading); }
.ftr-newsletter__band--footer { --ftr-band-bg: var(--color-footer-background); --ftr-band-fg: var(--color-footer-text, #eee); border: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
.ftr-newsletter__copy { padding: clamp(26px, 5vw, 64px); }
.ftr-newsletter__eyebrow { display: inline-block; margin-bottom: 14px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.ftr-newsletter__heading { color: inherit; font-size: clamp(2rem, 1.1rem + 3.4vw, 4.2rem); line-height: 1.02; letter-spacing: -.03em; max-width: 14ch; margin: 0 0 .3em; }
.ftr-newsletter__text { font-size: 1.1rem; max-width: 46ch; opacity: .9; margin: 0; }
.ftr-newsletter__form { margin-top: 26px; max-width: 620px; }
.ftr-newsletter__field { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: var(--shape-button-radius, 6px); background: color-mix(in srgb, currentColor 7%, transparent); }
.ftr-newsletter__field:focus-within { border-color: currentColor; outline: 2px solid currentColor; outline-offset: 2px; }
.ftr-newsletter__field input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 14px; border: 0; background: transparent; color: inherit; font-size: 1.1rem; }
.ftr-newsletter__field input:focus-visible { outline: none; }
.ftr-newsletter__field input::placeholder { color: inherit; opacity: .65; }
.ftr-newsletter__field .btn, .ftr-newsletter__field .btn:hover { flex: none; background: var(--ftr-band-fg); border-color: var(--ftr-band-fg); color: var(--ftr-band-bg); }
.ftr-newsletter__form .form-status { margin: 8px 0 0; font-size: .9rem; }
.ftr-newsletter__form .form-status:empty { display: none; }
.ftr-newsletter__fine { margin: 12px 0 0; font-size: .82rem; opacity: .75; }
.ftr-newsletter__media { display: none; background: color-mix(in srgb, currentColor 10%, transparent); }
.ftr-newsletter__media img { width: 100%; height: 100%; object-fit: cover; }
.ftr-newsletter__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; padding-block: 32px 24px; }
.ftr-newsletter__brand { font-family: var(--font-heading-family); font-weight: var(--font-heading-weight, 700); font-size: 1.35rem; letter-spacing: -.01em; }
.ftr-newsletter__row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .92rem; }
.ftr-newsletter__row .ftr-newsletter__social { margin-left: auto; gap: 8px; }
.ftr-newsletter__social a { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.ftr-newsletter__small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-block: 16px 24px; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); font-size: .8rem; opacity: .78; }
.ftr-newsletter__small ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (max-width: 599px) {
  .ftr-newsletter__row { display: grid; justify-items: start; }
  .ftr-newsletter__row .ftr-newsletter__social { margin-left: 0; }
}
@media (min-width: 600px) {
  .ftr-newsletter__row nav + nav { padding-left: 20px; border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent); margin-left: -20px; }
}
@media (max-width: 479px) {
  .ftr-newsletter__field { flex-wrap: wrap; border-radius: min(var(--shape-button-radius, 6px), 18px); }
  .ftr-newsletter__field input { flex-basis: 100%; }
  .ftr-newsletter__field .btn { width: 100%; }
}
@media (min-width: 900px) {
  .ftr-newsletter__band--with-image { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .ftr-newsletter__media { display: block; }
  /* Without a picture, the field sits beside the heading instead of under it. */
  .ftr-newsletter__band:not(.ftr-newsletter__band--with-image) .ftr-newsletter__copy { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); }
  .ftr-newsletter__band:not(.ftr-newsletter__band--with-image) .ftr-newsletter__copy > * { grid-column: 1; }
  .ftr-newsletter__band:not(.ftr-newsletter__band--with-image) .ftr-newsletter__form { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin-top: 0; }
  .ftr-newsletter__band:not(.ftr-newsletter__band--with-image) .ftr-newsletter__fine { grid-column: 2; grid-row: 4; }
}

/* ---------- Footer: visit us (address, hours, contact beside a map or shopfront, then the menus) ---------- */
.ftr-visit { background: var(--color-footer-background); color: var(--color-footer-text, #eee); margin-top: var(--layout-section-spacing, 56px); }
.ftr-visit a { color: inherit; text-decoration: none; }
.ftr-visit a:hover { text-decoration: underline; }
.ftr-visit :focus-visible { outline-color: currentColor; }
.ftr-visit__top { display: grid; gap: 32px; padding-block: clamp(40px, 6vw, 72px) 40px; }
.ftr-visit__label { display: block; margin: 0 0 12px; font-family: var(--font-body-family, inherit); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: inherit; opacity: .72; }
.ftr-visit__heading { color: inherit; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem); max-width: 16ch; margin: 0 0 32px; }
.ftr-visit__cols { display: grid; gap: 28px 36px; }
.ftr-visit__address { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.ftr-visit .hours__table { font-size: .95rem; }
.ftr-visit .hours__table th, .ftr-visit .hours__table td { padding: 7px 0; border-bottom-style: solid; border-bottom-color: color-mix(in srgb, currentColor 16%, transparent); }
.ftr-visit .hours__table th { color: inherit; font-weight: 600; }
.ftr-visit__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr-visit__contact li { display: flex; gap: 10px; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.ftr-visit__contact .icon { flex: none; opacity: .8; }
.ftr-visit__social { list-style: none; margin: 18px 0 0; padding: 0; display: flex; gap: 8px; }
.ftr-visit__social a { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.ftr-visit__map { position: relative; border-radius: var(--shape-card-radius, 12px); overflow: hidden; aspect-ratio: 4 / 3; background: color-mix(in srgb, currentColor 10%, transparent); }
.ftr-visit__map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ftr-visit a.ftr-visit__directions { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--shape-button-radius, 6px); background: var(--color-background); color: var(--color-heading); font-weight: 700; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); }
.ftr-visit a.ftr-visit__directions:focus-visible { outline-color: var(--color-background); }
.ftr-visit__links { display: grid; gap: 28px; padding-block: 32px; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.ftr-visit__links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ftr-visit .newsletter-form { justify-content: flex-start; margin-top: 0; }
.ftr-visit .newsletter-form input { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); }
.ftr-visit .newsletter-form .form-status { flex-basis: 100%; margin: 0; }
.ftr-visit__small { display: flex; flex-wrap: wrap; gap: 6px 24px; padding-block: 16px 24px; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); font-size: .8rem; opacity: .78; }
.ftr-visit__small span:first-child { font-weight: 700; }
@media (min-width: 600px) {
  .ftr-visit__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); }
  .ftr-visit__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr-visit__news { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .ftr-visit__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 72px); }
  .ftr-visit__map { aspect-ratio: auto; min-height: 340px; }
  .ftr-visit__links { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); }
  .ftr-visit__news { grid-column: auto; }
}

/* ---------- Footer: over a photo (tinted, strength set in the editor) ---------- */
.ftr-image { position: relative; isolation: isolate; overflow: hidden; color: #fff; margin-top: var(--layout-section-spacing, 56px); }
.ftr-image__media { position: absolute; inset: 0; z-index: -2; background: var(--color-footer-background); }
.ftr-image__media img { width: 100%; height: 100%; object-fit: cover; }
.ftr-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: color-mix(in srgb, #000 var(--ftr-image-overlay, 60%), transparent); background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .3) 100%); }
.ftr-image--footer { color: var(--color-footer-text, #eee); }
.ftr-image--footer::before { background-color: color-mix(in srgb, var(--color-footer-background) var(--ftr-image-overlay, 60%), transparent); background-image: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--color-footer-background) 40%, transparent) 100%); }
.ftr-image a { color: inherit; text-decoration: none; }
.ftr-image a:hover { text-decoration: underline; }
.ftr-image :focus-visible { outline-color: currentColor; }
.ftr-image__inner { padding-top: clamp(56px, 9vw, 120px); }
.ftr-image__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.ftr-image__brand, .ftr-image__news { grid-column: 1 / -1; }
.ftr-image__name { display: block; margin-bottom: 14px; font-family: var(--font-heading-family); font-weight: var(--font-heading-weight, 700); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); line-height: 1.05; letter-spacing: -.02em; }
.ftr-image p { max-width: 40ch; opacity: .92; margin: 0; }
.ftr-image h2 { color: inherit; margin: 0 0 14px; font-family: var(--font-body-family, inherit); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.ftr-image ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr-image .ftr-image__social { display: flex; gap: 8px; margin-top: 20px; }
.ftr-image__social a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.ftr-image__news { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--shape-card-radius, 12px); background: color-mix(in srgb, currentColor 12%, transparent); border: 1px solid color-mix(in srgb, currentColor 28%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ftr-image .ftr-image__news h2 { font-family: var(--font-heading-family); font-size: 1.45rem; letter-spacing: -.01em; text-transform: none; opacity: 1; margin-bottom: 6px; }
.ftr-image .newsletter-form { justify-content: flex-start; }
.ftr-image .newsletter-form input { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 45%, transparent); }
.ftr-image .newsletter-form input::placeholder { color: inherit; opacity: .7; }
.ftr-image .newsletter-form .form-status { flex-basis: 100%; margin: 0; }
.ftr-image__small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: clamp(48px, 7vw, 96px); padding-block: 18px 24px; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); font-size: .82rem; }
.ftr-image .ftr-image__small ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (min-width: 900px) {
  .ftr-image__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.5fr); gap: 40px; align-items: start; }
  .ftr-image__brand, .ftr-image__news { grid-column: auto; }
}

/* ---------- Footer: index (menu links set large, numbered, between hairlines; a narrow side column) ---------- */
.ftr-index { background: var(--color-footer-background); color: var(--color-footer-text, #eee); margin-top: var(--layout-section-spacing, 56px); padding-block: clamp(48px, 7vw, 96px) 32px; }
.ftr-index a { color: inherit; text-decoration: none; }
.ftr-index :focus-visible { outline-color: currentColor; }
.ftr-index__grid { display: grid; gap: 48px; }
.ftr-index__lists { display: grid; gap: 40px; }
.ftr-index__label { display: block; margin: 0 0 12px; font-family: var(--font-body-family, inherit); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: inherit; opacity: .68; }
.ftr-index__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.ftr-index__list li { border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.ftr-index__list a { display: flex; align-items: baseline; gap: clamp(12px, 2vw, 24px); padding-block: clamp(10px, 1.3vw, 16px); font-family: var(--font-heading-family); font-weight: var(--font-heading-weight, 700); font-size: clamp(1.5rem, .9rem + 1.9vw, 2.6rem); line-height: 1.08; letter-spacing: -.02em; }
.ftr-index__num { display: none; flex: none; min-width: 2.2em; font-family: var(--font-body-family, inherit); font-size: .8rem; font-weight: 600; letter-spacing: .08em; opacity: .6; font-variant-numeric: tabular-nums; }
.ftr-index--numbered .ftr-index__num { display: inline-block; }
.ftr-index__text { min-width: 0; overflow-wrap: anywhere; padding-bottom: 2px; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: background-size .35s ease; }
.ftr-index__list a:hover .ftr-index__text, .ftr-index__list a:focus-visible .ftr-index__text { background-size: 100% 2px; }
.ftr-index__list .icon { flex: none; align-self: center; margin-left: auto; opacity: 0; transform: translateX(-8px); transition: opacity .25s ease, transform .25s ease; }
.ftr-index__list a:hover .icon, .ftr-index__list a:focus-visible .icon { opacity: 1; transform: none; }
.ftr-index__side { display: grid; gap: 22px; align-content: start; }
.ftr-index__brand { font-family: var(--font-heading-family); font-weight: var(--font-heading-weight, 700); font-size: 1.6rem; line-height: 1.1; }
.ftr-index__about { margin: 0; opacity: .82; max-width: 42ch; }
.ftr-index .newsletter-form { justify-content: flex-start; margin-top: 0; }
.ftr-index .newsletter-form input { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); }
.ftr-index .newsletter-form .form-status { flex-basis: 100%; margin: 0; }
.ftr-index__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-weight: 700; }
.ftr-index__social a { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.ftr-index__social a:hover { text-decoration-thickness: 2px; }
.ftr-index__small { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); display: grid; gap: 4px; font-size: .82rem; opacity: .75; }
.ftr-index__small a:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .ftr-index__grid { grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr); gap: clamp(48px, 6vw, 96px); }
  .ftr-index__lists { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
}

/* ---------- Footer: grid (everything in cells with hairline borders, labels numbered unless turned off) ---------- */
.ftr-grid { --ftr-grid-line: color-mix(in srgb, currentColor 24%, transparent); background: var(--color-footer-background); color: var(--color-footer-text, #eee); margin-top: var(--layout-section-spacing, 56px); padding-block: clamp(28px, 5vw, 64px); }
.ftr-grid--page { background: var(--color-background); color: var(--color-text); border-top: 1px solid var(--color-outline); }
.ftr-grid--page .ftr-grid__brand { color: var(--color-heading); }
.ftr-grid a { color: inherit; text-decoration: none; }
.ftr-grid a:hover { text-decoration: underline; }
.ftr-grid :focus-visible { outline-color: currentColor; }
/* Rows of 2, 4 then 6 columns: a menu, social or payment cell asks for one column on phones, a menu for one
   column above that, every other cell for two (the small print for the whole row). The cells of a row then grow
   to fill it, so a cell that is not shown (no footer menu, no social links) never leaves a gap. The 1px keeps
   rounding from wrapping a full row early. */
.ftr-grid__cells { display: flex; flex-wrap: wrap; border-top: 1px solid var(--ftr-grid-line); border-left: 1px solid var(--ftr-grid-line); counter-reset: ftr-grid; }
.ftr-grid__cell { flex: 1 1 calc(100% - 1px); min-width: 0; padding: clamp(16px, 2vw, 26px); border-right: 1px solid var(--ftr-grid-line); border-bottom: 1px solid var(--ftr-grid-line); overflow-wrap: anywhere; }
.ftr-grid__cell--menu, .ftr-grid__cell--social, .ftr-grid__cell--pay { flex-basis: calc(50% - 1px); }
.ftr-grid__label { display: block; margin: 0 0 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: inherit; opacity: .72; }
.ftr-grid--numbered .ftr-grid__label::before { counter-increment: ftr-grid; content: counter(ftr-grid, decimal-leading-zero) " / "; }
.ftr-grid__brand { display: inline-block; margin-bottom: 10px; font-family: var(--font-heading-family); font-weight: var(--font-heading-weight, 700); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.05; letter-spacing: -.02em; }
.ftr-grid p { margin: 0; opacity: .85; max-width: 48ch; }
.ftr-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ftr-grid__form { display: flex; flex-wrap: wrap; margin-top: 14px; border: 1px solid var(--ftr-grid-line); }
.ftr-grid__form:focus-within { outline: 2px solid currentColor; outline-offset: 2px; }
.ftr-grid__form input { flex: 1 1 140px; min-width: 0; min-height: 46px; padding: 0 12px; border: 0; background: transparent; color: inherit; }
.ftr-grid__form input:focus-visible { outline: none; }
.ftr-grid__form input::placeholder { color: inherit; opacity: .6; }
.ftr-grid__submit { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 16px; border: 0; border-left: 1px solid var(--ftr-grid-line); background: var(--color-accent); color: var(--color-on-accent); font-weight: 700; cursor: pointer; }
.ftr-grid__submit:hover { filter: brightness(1.08); }
.ftr-grid__form .form-status { flex-basis: 100%; margin: 0; padding: 0 12px; font-size: .85rem; }
.ftr-grid__form .form-status:empty { display: none; }
.ftr-grid__social a { display: inline-flex; align-items: center; gap: 8px; }
.ftr-grid .ftr-grid__pay { display: flex; flex-wrap: wrap; gap: 6px; }
.ftr-grid__pay li { padding: 3px 8px; border: 1px solid var(--ftr-grid-line); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.ftr-grid__cell--small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .76rem; opacity: .8; }
@media (min-width: 600px) {
  .ftr-grid__cell, .ftr-grid__cell--social, .ftr-grid__cell--pay { flex-basis: calc(50% - 1px); }
  .ftr-grid__cell--menu { flex-basis: calc(25% - 1px); }
  .ftr-grid__cell--small { flex-basis: calc(100% - 1px); }
}
@media (min-width: 900px) {
  .ftr-grid__cell, .ftr-grid__cell--social, .ftr-grid__cell--pay { flex-basis: calc(100% / 3 - 1px); }
  .ftr-grid__cell--menu { flex-basis: calc(100% / 6 - 1px); }
  .ftr-grid__cell--small { flex-basis: calc(100% - 1px); }
}

/* ---------- Footer: call to action (a full-width coloured band first, then the links) ---------- */
.ftr-cta { background: var(--color-footer-background); color: var(--color-footer-text, #eee); margin-top: var(--layout-section-spacing, 56px); }
.ftr-cta a:not(.btn) { color: inherit; text-decoration: none; }
.ftr-cta a:not(.btn):hover { text-decoration: underline; }
.ftr-cta :focus-visible { outline-color: currentColor; }
.ftr-cta__band { padding-block: clamp(56px, 8vw, 112px); background: var(--ftr-cta-bg); color: var(--ftr-cta-fg); }
.ftr-cta__band--primary { --ftr-cta-bg: var(--color-primary); --ftr-cta-fg: var(--color-on-primary); }
.ftr-cta__band--accent { --ftr-cta-bg: var(--color-accent); --ftr-cta-fg: var(--color-on-accent); }
.ftr-cta__band--tint { --ftr-cta-bg: var(--color-background-alt); --ftr-cta-fg: var(--color-heading); }
.ftr-cta__band-inner { display: grid; gap: 28px; align-items: end; }
.ftr-cta__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.ftr-cta__eyebrow::before { content: ""; width: 28px; height: 1.5px; background: currentColor; }
.ftr-cta__heading { color: inherit; font-size: clamp(2.3rem, 1.1rem + 4.6vw, 5.4rem); line-height: .98; letter-spacing: -.035em; max-width: 15ch; margin: 0 0 .25em; }
.ftr-cta__text { margin: 0; max-width: 48ch; font-size: 1.15rem; opacity: .9; }
.ftr-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ftr-cta__button, .ftr-cta__button:hover { min-height: 54px; padding-inline: 1.8em; font-size: 1.05rem; background: var(--ftr-cta-fg); border-color: var(--ftr-cta-fg); color: var(--ftr-cta-bg); }
.ftr-cta__button--ghost, .ftr-cta__button--ghost:hover { background: transparent; color: var(--ftr-cta-fg); border-color: color-mix(in srgb, var(--ftr-cta-fg) 55%, transparent); }
.ftr-cta__button--ghost:hover { border-color: var(--ftr-cta-fg); }
.ftr-cta__band--center { text-align: center; }
.ftr-cta__band--center .ftr-cta__band-inner { justify-items: center; }
.ftr-cta__band--center .ftr-cta__heading, .ftr-cta__band--center .ftr-cta__text { margin-inline: auto; }
.ftr-cta__band--center .ftr-cta__actions { justify-content: center; }
.ftr-cta__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding-block: 48px 36px; }
.ftr-cta__brand, .ftr-cta__news { grid-column: 1 / -1; }
.ftr-cta__grid h2 { color: inherit; margin: 0 0 14px; font-family: var(--font-body-family, inherit); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.ftr-cta__name { display: inline-block; margin-bottom: 10px; font-family: var(--font-heading-family); font-weight: var(--font-heading-weight, 700); font-size: 1.5rem; }
.ftr-cta__brand p { opacity: .82; max-width: 40ch; margin: 0; }
.ftr-cta__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ftr-cta .ftr-cta__social { display: flex; gap: 8px; margin-top: 16px; }
.ftr-cta__social a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.ftr-cta .newsletter-form { justify-content: flex-start; margin-top: 0; }
.ftr-cta .newsletter-form input { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); }
.ftr-cta .newsletter-form .form-status { flex-basis: 100%; margin: 0; }
.ftr-cta__small { background: var(--color-sub-footer-background, var(--color-footer-background)); font-size: .82rem; }
.ftr-cta__small .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-block: 16px; opacity: .8; }
.ftr-cta__small ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (min-width: 900px) {
  .ftr-cta__band--split .ftr-cta__band-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
  .ftr-cta__band--split .ftr-cta__actions { justify-content: flex-end; }
  .ftr-cta__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); }
  .ftr-cta__brand, .ftr-cta__news { grid-column: auto; }
}

/* Tablets: shorter pictures where they sit full width above or below the text. */
@media (min-width: 600px) and (max-width: 899px) {
  .hero-menu__media, .hours__media { aspect-ratio: 16 / 9; }
  .price-list__media { aspect-ratio: 16 / 9; }
  .booking-band__media { aspect-ratio: 21 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  .ftr-index__text, .ftr-index__list .icon { transition: none; }
}

/* ---------- Product cards (swap, list, circle, polaroid, sticker, brutal) and sections (shop the look, timeline, photo wall, collection tabs, product carousel) ---------- */
/* ==========================================================================
   Product cards, round 2 (layout.card_style: swap, list, circle, polaroid, sticker, brutal). Markup in
   partials/product_card_kit.hiketl; the shared .pc rules above (stretched title link, focus ring, price at the
   bottom, sold-out fade) apply to these too.
   ========================================================================== */

/* Swap: a tall picture; a second picture (product.images[1]) fades in on hover, and a "View product" bar slides up.
   Name and price share one line. */
.pc--swap .pc__media { --card-image-ratio: 3 / 4; border-radius: var(--shape-card-radius, 0); }
.pc--swap .pc__media img { transition: opacity .5s ease, transform .8s ease; }
.pc--swap .pc__media .pc__alt { position: absolute; inset: 0; opacity: 0; }
.pc--swap:hover .pc__alt, .pc--swap:focus-within .pc__alt { opacity: 1; }
.pc--swap:hover .pc__media--swap img { transform: none; }
.pc--swap .pc__peek { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 11px 12px; text-align: center; background: var(--color-background); color: var(--color-heading); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border-radius: var(--shape-button-radius, 0); transform: translateY(calc(100% + 14px)); transition: transform .35s ease; }
.pc--swap:hover .pc__peek, .pc--swap:focus-within .pc__peek { transform: none; }
.pc--swap .badge { border-radius: 0; background: var(--color-background); color: var(--color-heading); font-weight: 600; letter-spacing: .1em; padding: 5px 8px; }
.pc--swap .badge--sale { color: var(--color-sale-text, var(--color-sale)); }
.pc--swap .pc__body { padding-top: 12px; gap: 2px; }
.pc--swap .pc__line { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; }
.pc--swap .pc__title { font-weight: 500; font-size: .95rem; }
.pc--swap .price { flex-direction: column; align-items: flex-end; gap: 0; margin: 0; padding: 0; text-align: right; flex: none; font-size: .95rem; }
.pc--swap .price__current { font-weight: 500; }
@media (max-width: 599px) {
  .pc--swap .pc__line { flex-direction: column; align-items: flex-start; }
  .pc--swap .price { flex-direction: row; align-items: baseline; gap: 6px; text-align: left; }
}

/* List: a horizontal card, picture left and details right; stacks when the card is narrow. Grids of list cards
   choose their own columns (cards at least 400 px wide): one on phones and tablets, two on a desktop page. */
.pc--list { container-type: inline-size; border: 1px solid var(--color-outline); border-radius: var(--shape-card-radius, 0); background: var(--color-background); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.pc--list:hover { border-color: var(--color-heading); box-shadow: 0 10px 28px rgba(0, 0, 0, .08); }
.pc--list .pc__row { display: grid; grid-template-columns: minmax(0, min(40%, 240px)) minmax(0, 1fr); height: 100%; }
.pc--list .pc__media { aspect-ratio: auto; min-height: 150px; height: 100%; }
.pc--list .pc__media img { position: absolute; inset: 0; }
.pc--list .pc__body { padding: 16px 18px; gap: 4px; justify-content: center; }
.pc--list .pc__title { font-family: var(--font-heading-family); font-weight: var(--font-heading-weight, 600); font-size: 1.08rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pc--list .pc__desc { margin: 2px 0 0; font-size: .86rem; line-height: 1.45; color: var(--color-subheading); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc--list .pc__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: auto; padding-top: 12px; }
.pc--list .pc__foot .price { margin: 0; padding: 0; }
.pc--list .pc__button { margin: 0; }
.pc--list:hover .pc__button { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
@container (max-width: 300px) {
  .pc--list .pc__row { grid-template-columns: minmax(0, 1fr); }
  .pc--list .pc__media { aspect-ratio: 1; min-height: 0; height: auto; }
  .pc--list .pc__body { padding: 12px 14px 14px; justify-content: flex-start; }
  .pc--list .pc__desc { display: none; }
}
@container (max-width: 420px) { .pc--list .pc__button { display: none; } }
.product-grid__items:has(> li > .pc--list) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.product-grid--scroll .product-grid__items:has(> li > .pc--list) { grid-template-columns: none; grid-auto-columns: min(86%, 440px); }

/* Circle: the picture in a round tinted disc, name and price centred. */
.pc--circle { text-align: center; }
.pc--circle .pc__media { background: none; overflow: visible; }
.pc--circle .pc__disc { display: block; width: 100%; height: 100%; border-radius: 50%; padding: 9%; background: color-mix(in srgb, var(--color-accent) 24%, var(--color-background)); transition: transform .35s ease, background-color .35s ease; }
.pc--circle .pc__disc img { border-radius: 50%; }
.pc--circle .pc__media img { transition: transform .5s ease; }
.pc--circle:hover .pc__disc { transform: translateY(-4px); background: color-mix(in srgb, var(--color-accent) 42%, var(--color-background)); }
.pc--circle:hover .pc__media img { transform: scale(1.05); }
.pc--circle .pc__badges { top: auto; bottom: 4%; left: 50%; transform: translateX(-50%); flex-direction: row; align-items: center; }
.pc--circle .badge { white-space: nowrap; padding: 6px 10px; box-shadow: 0 0 0 3px var(--color-background); }
.pc--circle .pc__body { align-items: center; padding-top: 14px; gap: 2px; }
.pc--circle .pc__title { font-weight: 700; font-size: 1rem; }
.pc--circle .price { justify-content: center; }
.pc--circle.pc--sold-out .pc__disc { background: var(--color-background-alt); }

/* Polaroid: a white-framed print with a strip of tape, slightly tilted (alternating), straightening on hover. The
   print stays white with dark ink on every theme, like a photo. */
.pc--polaroid { --pc-print: color-mix(in srgb, #fff 90%, var(--color-background)); --pc-ink: #24201c; --pc-ink-soft: #6b645c; background: var(--pc-print); padding: 10px 10px 6px; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 12px 26px -10px rgba(0, 0, 0, .32); rotate: -1.6deg; transition: rotate .35s ease, translate .35s ease, box-shadow .35s ease; }
li:nth-child(even) > .pc--polaroid { rotate: 1.3deg; }
li:nth-child(3n) > .pc--polaroid { rotate: -.7deg; }
.pc--polaroid:hover, .pc--polaroid:focus-within, li > .pc--polaroid:hover, li > .pc--polaroid:focus-within { rotate: 0deg; translate: 0 -4px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 20px 36px -12px rgba(0, 0, 0, .36); }
.pc--polaroid::before { content: ""; position: absolute; z-index: 1; top: -8px; left: 50%; width: 30%; max-width: 76px; height: 20px; translate: -50% 0; rotate: -3deg; background: color-mix(in srgb, var(--color-accent) 50%, transparent); }
.pc--polaroid .pc__media { border-radius: 0; background: var(--color-background-alt); }
.pc--polaroid .pc__body { align-items: center; text-align: center; padding: 12px 4px 8px; gap: 2px; }
.pc--polaroid .pc__title { font-family: var(--font-heading-family); font-weight: var(--font-heading-weight, 400); font-size: 1.12rem; line-height: 1.2; }
.pc--polaroid .pc__title a, .pc--polaroid .price__current { color: var(--pc-ink); }
.pc--polaroid .price--on-sale .price__current { color: #b42318; }
.pc--polaroid .pc__brand, .pc--polaroid .price__compare, .pc--polaroid .price__from { color: var(--pc-ink-soft); }
.pc--polaroid .price { justify-content: center; font-size: .92rem; }
.pc--polaroid mark { color: var(--pc-ink); }

/* Sticker: big round stickers, the price over the picture's corner and the sale or sold-out state at the top. */
.pc--sticker { container-type: inline-size; }
.pc--sticker .pc__media { border-radius: var(--shape-card-radius, 20px); background: color-mix(in srgb, var(--color-accent) 18%, var(--color-background-alt)); }
.pc--sticker .pc__badges { top: 8px; left: 8px; }
.pc__sticker { display: grid; place-items: center; width: 4.4rem; aspect-ratio: 1; padding: 6px; border-radius: 50%; font-weight: 800; font-size: 1.05rem; line-height: 1; text-align: center; text-transform: uppercase; letter-spacing: -.01em; rotate: -12deg; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.pc__sticker--sale { background: var(--color-sale); color: #fff; }
.pc__sticker--out { background: var(--color-heading); color: var(--color-background); font-size: .68rem; letter-spacing: .02em; }
.pc--sticker .pc__price-sticker { position: absolute; z-index: 1; right: 8px; top: calc(100cqi - 5.8rem - 8px); display: grid; place-items: center; width: 5.8rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent); border: 3px solid var(--color-background); rotate: 8deg; box-shadow: 0 4px 0 rgba(0, 0, 0, .18); transition: rotate .3s ease, scale .3s ease; }
.pc--sticker:hover .pc__price-sticker { rotate: -4deg; scale: 1.06; }
.pc--sticker .pc__price-sticker .price { flex-direction: column; align-items: center; justify-content: center; gap: 0; margin: 0; padding: 0; line-height: 1.1; text-align: center; }
.pc--sticker .pc__price-sticker .price__current, .pc--sticker .pc__price-sticker .price--on-sale .price__current { color: inherit; font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; }
.pc--sticker .pc__price-sticker .price__compare, .pc--sticker .pc__price-sticker .price__from { color: inherit; opacity: .78; font-size: .72rem; }
.pc--sticker .pc__body { padding-top: 12px; }
.pc--sticker .pc__title { font-weight: 800; font-size: 1.02rem; }
@container (max-width: 210px) {
  .pc--sticker .pc__price-sticker { width: 4.3rem; top: calc(100cqi - 4.3rem - 6px); right: 6px; border-width: 2px; }
  .pc--sticker .pc__price-sticker .price__current { font-size: .8rem; }
  .pc--sticker .pc__price-sticker .price__compare, .pc--sticker .pc__price-sticker .price__from { font-size: .6rem; }
  .pc__sticker { width: 3.3rem; padding: 4px; font-size: .82rem; }
  .pc__sticker--out { font-size: .56rem; }
}
@container (min-width: 400px) {
  .pc--sticker .pc__price-sticker { width: 7rem; top: calc(100cqi - 7rem - 14px); right: 14px; }
  .pc--sticker .pc__price-sticker .price__current { font-size: 1.35rem; }
  .pc--sticker .pc__price-sticker .price__compare, .pc--sticker .pc__price-sticker .price__from { font-size: .82rem; }
  .pc--sticker .pc__badges { top: 14px; left: 14px; }
  .pc__sticker { width: 5.4rem; font-size: 1.25rem; }
  .pc__sticker--out { font-size: .8rem; }
  .pc--sticker .pc__title { font-size: 1.15rem; }
}

/* Brutal: thick borders, a hard offset shadow, the name in capitals and a price bar with an arrow block. */
.pc--brutal { border: 3px solid var(--color-heading); border-radius: 0; background: var(--color-background); box-shadow: 6px 6px 0 var(--color-heading); margin: 0 6px 6px 0; height: calc(100% - 6px); transition: translate .15s ease, box-shadow .15s ease; }
.pc--brutal:hover, .pc--brutal:focus-within { translate: -3px -3px; box-shadow: 9px 9px 0 var(--color-primary); }
.pc--brutal .pc__media { border-bottom: 3px solid var(--color-heading); }
.pc--brutal:hover .pc__media img { transform: none; }
.pc--brutal .badge { border-radius: 0; border: 2px solid var(--color-heading); padding: 5px 8px; font-size: .74rem; }
.pc--brutal.pc--sold-out .pc__media img { filter: grayscale(1); }
.pc--brutal .pc__body { padding: 12px 14px 0; gap: 4px; }
.pc--brutal .pc__brand { color: var(--color-text); font-weight: 700; }
.pc--brutal .pc__title { font-family: var(--font-heading-family); font-weight: var(--font-heading-weight, 800); text-transform: uppercase; letter-spacing: .02em; font-size: 1rem; line-height: 1.15; }
.pc--brutal .pc__title { margin-bottom: 12px; }
.pc--brutal .pc__foot { display: flex; align-items: stretch; justify-content: space-between; margin: auto -14px 0; border-top: 3px solid var(--color-heading); }
.pc--brutal .pc__foot .price { margin: 0; padding: 9px 14px; font-weight: 800; align-items: center; }
.pc--brutal .pc__arrow { display: grid; place-items: center; flex: none; width: 46px; border-left: 3px solid var(--color-heading); background: var(--color-accent); color: var(--color-on-accent); transition: background-color .15s ease, color .15s ease; }
.pc--brutal:hover .pc__arrow { background: var(--color-heading); color: var(--color-background); }
.pc--brutal { container-type: inline-size; }
@container (max-width: 240px) {
  .pc--brutal .pc__foot .price { min-height: 4.1em; min-height: calc(2lh + 16px); align-content: center; padding: 8px 10px; gap: 0 6px; font-size: .88rem; }
  .pc--brutal .pc__arrow { width: 36px; }
}

/* Long names: three lines at most on the stacked cards (the full name stays in the link). */
.pc--swap .pc__title, .pc--circle .pc__title, .pc--polaroid .pc__title, .pc--sticker .pc__title, .pc--brutal .pc__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ==========================================================================
   Home sections, round 2
   ========================================================================== */

/* Shop the look: a photo with numbered hotspot dots (name and price on hover/focus) beside the list of products. */
.shop-look { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) {
  .shop-look { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .shop-look--right .shop-look__media { order: 2; }
}
.shop-look__media { position: relative; aspect-ratio: var(--shop-look-ratio, 4 / 5); container-type: inline-size; overflow-x: clip; }
.shop-look__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--shape-card-radius, 0); background: var(--color-background-alt); }
.shop-look__dot { position: absolute; z-index: 1; left: var(--x, 50%); top: var(--y, 50%); translate: -50% -50%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-background); color: var(--color-heading); text-decoration: none; font-weight: 800; font-size: .82rem; box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-background) 40%, transparent), 0 6px 18px rgba(0, 0, 0, .28); transition: background-color .2s ease, color .2s ease; }
.shop-look__dot:hover, .shop-look__dot:focus-visible { z-index: 3; background: var(--color-primary); color: var(--color-on-primary); }
.shop-look__dot:focus-visible { outline: 3px solid var(--color-background); outline-offset: 3px; }
.shop-look__tip { position: absolute; left: calc(100% + 12px); top: 50%; width: max-content; max-width: min(230px, 40cqi); padding: 10px 14px; border-radius: var(--shape-radius, 6px); background: var(--color-background); color: var(--color-heading); box-shadow: 0 12px 30px rgba(0, 0, 0, .22); text-align: left; font-size: .86rem; font-weight: 600; line-height: 1.3; opacity: 0; transform: translate(-6px, -50%); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.shop-look__dot--flip .shop-look__tip { left: auto; right: calc(100% + 12px); transform: translate(6px, -50%); }
.shop-look__dot:hover .shop-look__tip, .shop-look__dot:focus-visible .shop-look__tip { opacity: 1; transform: translate(0, -50%); }
.shop-look__tip-name { display: block; margin-bottom: 2px; }
.shop-look__tip .price { font-size: .84rem; font-weight: 400; }
@media (prefers-reduced-motion: no-preference) {
  .shop-look__dot::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--color-background); animation: kit2-hotspot 2.4s ease-out infinite; pointer-events: none; }
}
@keyframes kit2-hotspot { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.7; } }
.shop-look__heading { margin: 0 0 .3em; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
.shop-look__text { margin: 0 0 22px; max-width: 46ch; color: var(--color-subheading); }
.shop-look__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-outline); }
.shop-look__item { position: relative; display: grid; grid-template-columns: 30px 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--color-outline); }
.shop-look__num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--color-heading); color: var(--color-heading); font-size: .8rem; font-weight: 700; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.shop-look__thumb { display: block; width: 64px; aspect-ratio: 1; overflow: hidden; border-radius: var(--shape-radius, 6px); background: var(--color-background-alt); }
.shop-look__thumb img { width: 100%; height: 100%; object-fit: cover; }
.shop-look__item--sold-out .shop-look__thumb img { opacity: .55; }
.shop-look__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shop-look__name { font-weight: 600; color: var(--color-heading); text-decoration: none; line-height: 1.3; }
.shop-look__name::after { content: ""; position: absolute; inset: 0; }
.shop-look__item:hover .shop-look__name { text-decoration: underline; text-underline-offset: 3px; }
.shop-look__name:focus-visible { outline: none; }
.shop-look__item:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.shop-look__item .price { font-size: .92rem; }
.shop-look__out { font-size: .78rem; font-weight: 600; color: var(--color-sale-text, var(--color-sale)); }
.shop-look__item:hover .shop-look__num,
.shop-look:has(.shop-look__dot--1:hover, .shop-look__dot--1:focus-visible) .shop-look__item--1 .shop-look__num,
.shop-look:has(.shop-look__dot--2:hover, .shop-look__dot--2:focus-visible) .shop-look__item--2 .shop-look__num,
.shop-look:has(.shop-look__dot--3:hover, .shop-look__dot--3:focus-visible) .shop-look__item--3 .shop-look__num,
.shop-look:has(.shop-look__dot--4:hover, .shop-look__dot--4:focus-visible) .shop-look__item--4 .shop-look__num { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

/* Timeline: moments on a vertical line; alternating sides with the year set large opposite on desktop. */
.timeline { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; }
.timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 11px; width: 2px; background: var(--color-outline); }
.timeline__item { position: relative; padding: 0 0 32px 46px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before { content: ""; position: absolute; left: 3px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-background); border: 4px solid var(--color-primary); box-sizing: border-box; }
.section--alt .timeline__item::before { background: var(--color-background-alt); }
.timeline__year { display: block; margin-bottom: 8px; font-family: var(--font-heading-family); font-weight: var(--font-heading-weight, 700); font-size: clamp(1.35rem, 1rem + 1.2vw, 1.8rem); line-height: 1.1; letter-spacing: -.02em; color: var(--color-heading); }
.timeline__card { padding: 20px 22px; border-radius: var(--shape-card-radius, 0); background: var(--color-background-alt); }
.section--alt .timeline__card { background: var(--color-background); }
.timeline__media { display: block; margin: -6px -8px 16px; overflow: hidden; border-radius: calc(var(--shape-card-radius, 0px) * .6); background: var(--color-background-alt); }
.timeline__media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.timeline__title { margin: 0 0 6px; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.25; }
.timeline__text { margin: 0; }
@media (min-width: 900px) {
  .timeline:not(.timeline--left)::before { left: 50%; translate: -1px 0; }
  .timeline:not(.timeline--left) .timeline__item { display: grid; grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); align-items: start; padding: 0 0 56px; }
  .timeline:not(.timeline--left) .timeline__item:last-child { padding-bottom: 0; }
  .timeline:not(.timeline--left) .timeline__item::before { left: 50%; top: 16px; width: 22px; height: 22px; translate: -50% 0; }
  .timeline:not(.timeline--left) .timeline__year { grid-row: 1; grid-column: 1; justify-self: end; text-align: right; margin: 0; font-size: clamp(2.4rem, 1.2rem + 2.6vw, 4.2rem); line-height: 1; color: var(--color-accent-text, var(--color-primary)); }
  .timeline:not(.timeline--left) .timeline__card { grid-row: 1; grid-column: 3; }
  .timeline:not(.timeline--left) .timeline__item:nth-child(even) .timeline__year { grid-column: 3; justify-self: start; text-align: left; }
  .timeline:not(.timeline--left) .timeline__item:nth-child(even) .timeline__card { grid-column: 1; }
  .timeline--left { max-width: 820px; }
  .timeline--left::before { left: 15px; }
  .timeline--left .timeline__item { padding-left: 64px; }
  .timeline--left .timeline__item::before { left: 4px; width: 24px; height: 24px; }
  .timeline--left .timeline__card:has(.timeline__media) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: 1fr auto 1fr; column-gap: 28px; align-items: start; }
  .timeline--left .timeline__card:has(.timeline__media) .timeline__media { grid-column: 1; grid-row: 1 / span 3; margin: -6px 0 -6px -8px; }
  .timeline--left .timeline__card:has(.timeline__media) .timeline__title { grid-column: 2; grid-row: 2; }
  .timeline--left .timeline__card:has(.timeline__media) .timeline__text { grid-column: 2; grid-row: 3; }
}

/* Photo wall: a masonry wall (columns of photos of different heights) with captions on or under the photos. */
.photo-wall { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--layout-grid-gap, 16px); }
@media (min-width: 900px) { .photo-wall { columns: var(--photo-wall-columns, 3); column-gap: var(--layout-grid-gap-desktop, 24px); } }
.photo-wall__item { break-inside: avoid; margin-bottom: var(--layout-grid-gap, 16px); }
@media (min-width: 900px) { .photo-wall__item { margin-bottom: var(--layout-grid-gap-desktop, 24px); } }
.photo-wall--tight { column-gap: 4px; }
.photo-wall--tight .photo-wall__item { margin-bottom: 4px; }
.photo-wall__link, .photo-wall__figure { position: relative; display: block; margin: 0; color: inherit; text-decoration: none; }
.photo-wall__media { display: block; overflow: hidden; border-radius: var(--shape-card-radius, 0); background: var(--color-background-alt); }
.photo-wall--tight .photo-wall__media { border-radius: 0; }
.photo-wall__media img { display: block; width: 100%; height: auto; transition: transform .7s ease; }
.photo-wall__item--tall .photo-wall__media img { aspect-ratio: 2 / 3; object-fit: cover; }
.photo-wall__item--square .photo-wall__media img { aspect-ratio: 1; object-fit: cover; }
.photo-wall__item--wide .photo-wall__media img { aspect-ratio: 3 / 2; object-fit: cover; }
.photo-wall__link:hover .photo-wall__media img { transform: scale(1.04); }
.photo-wall__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.photo-wall--overlay .photo-wall__caption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 6px 12px; border-radius: var(--shape-radius, 0); background: color-mix(in srgb, var(--color-heading) 82%, transparent); color: var(--color-background); font-size: .82rem; font-weight: 600; letter-spacing: .03em; }
.photo-wall--below .photo-wall__caption { display: block; padding: 8px 2px 0; font-size: .88rem; color: var(--color-subheading); }

/* Collection tabs: radio buttons styled as tabs (pills or underlined); the checked one shows its product grid. */
.ctabs__labels { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.ctabs--center .ctabs__labels { justify-content: center; }
.ctabs__label { position: relative; display: inline-flex; cursor: pointer; }
.ctabs__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ctabs__label span { display: inline-flex; align-items: center; min-height: 42px; padding: .45em 1.25em; border: 1px solid var(--color-outline); border-radius: var(--shape-button-radius, 999px); color: var(--color-heading); font-weight: 600; font-size: .95rem; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.ctabs__label:hover span { border-color: var(--color-heading); }
.ctabs__label:has(:checked) span { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.ctabs__label:has(:focus-visible) span { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.ctabs--underline .ctabs__labels { gap: 0 28px; border-bottom: 1px solid var(--color-outline); }
.ctabs--underline .ctabs__label span { min-height: 46px; padding: .5em 0; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--color-subheading); }
.ctabs--underline .ctabs__label:hover span { color: var(--color-heading); }
.ctabs--underline .ctabs__label:has(:checked) span { background: none; color: var(--color-heading); border-bottom-color: var(--color-primary); }
@media (max-width: 599px) {
  .ctabs__labels { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--layout-spacing, 16px)); padding: 4px var(--layout-spacing, 16px); }
  .ctabs__labels::-webkit-scrollbar { display: none; }
  .ctabs--center .ctabs__labels { justify-content: flex-start; }
  .ctabs__label { flex: none; }
  .ctabs__label span { white-space: nowrap; }
}
.ctabs__panel { display: none; }
.ctabs--single .ctabs__panel,
.ctabs:has(.ctabs__input--1:checked) .ctabs__panel--1,
.ctabs:has(.ctabs__input--2:checked) .ctabs__panel--2,
.ctabs:has(.ctabs__input--3:checked) .ctabs__panel--3,
.ctabs:has(.ctabs__input--4:checked) .ctabs__panel--4,
.ctabs:has(.ctabs__input--5:checked) .ctabs__panel--5,
.ctabs:has(.ctabs__input--6:checked) .ctabs__panel--6 { display: block; }
@media (prefers-reduced-motion: no-preference) { .ctabs__panel { animation: kit2-panel-in .35s ease both; } }
@keyframes kit2-panel-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@supports not selector(:has(*)) {
  .ctabs__labels { display: none; }
  .ctabs__panel { display: block; }
  .ctabs__panel + .ctabs__panel { margin-top: 40px; }
}

/* Product carousel: one row that scrolls sideways and snaps card by card; the edges fade where there is more to see
   (scroll-driven where supported), a slim bar shows the position and the row scrolls with the arrow keys. */
.pcarousel { --pcarousel-count: 2.25; --pcarousel-gap: var(--layout-grid-gap, 16px); --pcarousel-pad: var(--layout-spacing, 16px); --pcarousel-bg: var(--color-background); position: relative; container-type: inline-size; timeline-scope: --kit2-pcarousel; }
.pcarousel--small { --pcarousel-count: 2.6; }
.pcarousel--large { --pcarousel-count: 1.35; }
.pcarousel:has(.pc--list) { --pcarousel-count: 1.12; }
@media (min-width: 600px) {
  .pcarousel { --pcarousel-count: 3.3; }
  .pcarousel--small { --pcarousel-count: 4.3; }
  .pcarousel--large { --pcarousel-count: 2.3; }
  .pcarousel:has(.pc--list) { --pcarousel-count: 1.6; }
}
@media (min-width: 900px) {
  .pcarousel { --pcarousel-count: 4.25; --pcarousel-gap: var(--layout-grid-gap-desktop, 24px); --pcarousel-pad: 0px; }
  .pcarousel--small { --pcarousel-count: 5.3; }
  .pcarousel--large { --pcarousel-count: 3.25; }
  .pcarousel:has(.pc--list) { --pcarousel-count: 2.3; }
}
.section--alt .pcarousel { --pcarousel-bg: var(--color-background-alt); }
.pcarousel__track { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-timeline: --kit2-pcarousel x; scrollbar-width: thin; scrollbar-color: var(--color-primary) color-mix(in srgb, var(--color-outline) 70%, transparent); padding-bottom: 6px; }
.pcarousel__track:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.pcarousel .pcarousel__items { list-style: none; margin: 0; padding: 14px 2px 16px; display: flex; gap: var(--pcarousel-gap); }
.pcarousel__item { flex: 0 0 max(132px, calc((100cqi - var(--pcarousel-pad)) / var(--pcarousel-count) - var(--pcarousel-gap))); scroll-snap-align: start; }
.pcarousel::before, .pcarousel::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 22px; width: clamp(28px, 5vw, 64px); pointer-events: none; }
.pcarousel::before { left: 0; background: linear-gradient(to right, var(--pcarousel-bg), transparent); opacity: 0; }
.pcarousel::after { right: 0; background: linear-gradient(to left, var(--pcarousel-bg), transparent); }
.pcarousel:has(.pcarousel__hint)::before, .pcarousel:has(.pcarousel__hint)::after { bottom: 52px; }
@supports (animation-timeline: scroll()) {
  .pcarousel::before { animation: kit2-fade-in linear both; animation-timeline: --kit2-pcarousel; animation-range: 0% 6%; }
  .pcarousel::after { animation: kit2-fade-out linear both; animation-timeline: --kit2-pcarousel; animation-range: 94% 100%; }
}
@keyframes kit2-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kit2-fade-out { from { opacity: 1; } to { opacity: 0; } }
.pcarousel__hint { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 10px 0 0; font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-subheading); }
@media (prefers-reduced-motion: no-preference) { .pcarousel__hint .icon { animation: kit2-nudge 1.6s ease-in-out infinite; } }
@keyframes kit2-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 5px 0; } }
@media (max-width: 899px) {
  .pcarousel { margin-inline: calc(-1 * var(--layout-spacing, 16px)); }
  .pcarousel__track { scroll-padding-inline: var(--layout-spacing, 16px); }
  .pcarousel .pcarousel__items { padding-inline: var(--layout-spacing, 16px); width: max-content; }
  .pcarousel__hint { padding-inline: var(--layout-spacing, 16px); }
}

/* ---------- Shop all products: category links (to the shop page) over a product grid, and a button under it ---------- */
.shopall__cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.shopall__cats--center { justify-content: center; }
.shopall__cat { display: inline-flex; align-items: center; min-height: 40px; padding: .4em 1.15em; border: 1px solid var(--color-outline); border-radius: var(--shape-button-radius, 999px); color: var(--color-heading); font-weight: 600; font-size: .92rem; text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.shopall__cat:hover { border-color: var(--color-heading); }
.shopall__cat[aria-current="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.shopall__more { display: flex; justify-content: center; margin-top: 36px; }
@media (max-width: 899px) {
  .shopall__cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--layout-spacing, 16px)); padding: 4px var(--layout-spacing, 16px); }
  .shopall__cats::-webkit-scrollbar { display: none; }
  .shopall__cats--center { justify-content: flex-start; }
  .shopall__cat { flex: none; white-space: nowrap; }
}

/* ---------- Shop by brand: name tiles linking to the shop page filtered by brand ---------- */
.brandgrid { display: grid; grid-template-columns: repeat(var(--columns, 4), minmax(0, 1fr)); gap: var(--layout-grid-gap-desktop, 16px); margin: 0; padding: 0; list-style: none; }
.brandgrid__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 18px 22px; border: 1px solid var(--color-outline); border-radius: var(--shape-card-radius, 12px); background: var(--color-background); color: var(--color-heading); font-family: var(--font-heading-family, inherit); font-size: 1.08rem; font-weight: 600; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.brandgrid__item .icon { flex: none; color: var(--color-subheading); transition: translate .2s ease; }
.brandgrid__item:hover { border-color: var(--color-heading); }
.brandgrid__item:hover .icon { translate: 4px 0; color: var(--color-heading); }
@media (max-width: 899px) { .brandgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .brandgrid > li:last-child:nth-child(odd) { grid-column: 1 / -1; } .brandgrid__item { min-height: 60px; padding: 14px 16px; font-size: 1rem; } }

/* ---------- Shop by price: price-band tiles linking to the shop page with a price filter ---------- */
.pricebands { display: grid; grid-template-columns: repeat(var(--columns, 4), minmax(0, 1fr)); gap: var(--layout-grid-gap-desktop, 16px); margin: 0; padding: 0; list-style: none; }
.priceband { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 100%; min-height: 128px; padding: 22px 54px 22px 24px; border: 1px solid var(--color-outline); border-radius: var(--shape-card-radius, 12px); background: var(--color-background-alt, var(--color-background)); color: var(--color-heading); text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.priceband__label { font-family: var(--font-heading-family, inherit); font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 700; line-height: 1.2; }
.priceband__text { color: var(--color-subheading); font-size: .93rem; }
.priceband .icon { position: absolute; right: 22px; top: 50%; translate: 0 -50%; transition: translate .2s ease; }
.priceband:hover { border-color: var(--color-heading); }
.priceband:hover .icon { translate: 4px -50%; }
.pricebands--primary .priceband { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.pricebands--primary .priceband__text { color: inherit; opacity: .8; }
.pricebands--primary .priceband:hover { border-color: var(--color-on-primary); }
@media (max-width: 899px) { .pricebands { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pricebands > li:last-child:nth-child(odd) { grid-column: 1 / -1; } .priceband { min-height: 104px; padding: 16px 44px 16px 16px; } .priceband .icon { right: 14px; } }

/* ---------- Category spotlight: a category photo panel beside a 2-column product grid ---------- */
.spotlight { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--layout-grid-gap-desktop, 16px) * 1.5); align-items: stretch; }
.spotlight--reverse .spotlight__media { order: 2; }
.spotlight__media { position: relative; display: block; overflow: hidden; min-height: 420px; border-radius: var(--shape-card-radius, 12px); background: var(--color-background-alt, #eee); color: #fff; text-decoration: none; }
.spotlight__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .6s ease; }
.spotlight__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .62), rgb(0 0 0 / 0) 60%); }
.spotlight__media:hover img { scale: 1.04; }
.spotlight__content { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(20px, 3vw, 36px); }
.spotlight__eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.spotlight__title { font-family: var(--font-heading-family, inherit); font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: var(--font-heading-weight, 700); line-height: 1.05; color: #fff; }
.spotlight__text { max-width: 36ch; opacity: .92; }
.spotlight__content .btn { margin-top: 6px; }
.spotlight__products { align-content: start; }
@media (max-width: 899px) {
  .spotlight { grid-template-columns: 1fr; }
  .spotlight--reverse .spotlight__media { order: 0; }
  .spotlight__media { min-height: 0; aspect-ratio: 4 / 5; }
  .spotlight__media::after { background: linear-gradient(to top, rgb(0 0 0 / .72), rgb(0 0 0 / .1) 75%); }
}

/* ---------- Kit round 2: layout fixes found while building the themes ---------- */
/* Image with text: the widgets (buttons) after the text get room to breathe. */
.image-with-text__content .rte + * { margin-top: 24px; }
/* Trust bar with four promises: 2 + 2 on tablets, not 3 + 1. */
@media (min-width: 600px) and (max-width: 999px) {
  .trust-bar ul:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Circle cards: three to a row on tablets (two would make each disc about 360 px). */
@media (min-width: 600px) and (max-width: 899px) {
  .product-grid__items:has(.pc--circle) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Visit footer: the contact column is wide enough for an email address on one line. */
@media (min-width: 1100px) {
  .ftr-visit__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(16rem, 1fr); }
}
/* Testimonials: a quote card is a <figure>; drop the browser's default 40 px side margins. */
.quote { margin: 0; }
/* Category cards in a row are the same height when a name wraps. */
.category-grid .category-card { height: 100%; }
/* Swap cards on phones: the price sits at the foot, so prices in a row line up when titles wrap. */
@media (max-width: 599px) {
  .pc--swap .pc__line { flex: 1; }
  .pc--swap .pc__line .price { margin-top: auto; }
}
/* Product page perks: the list reset (ul[role=list]) outranks .product-main__perks; restore the box's padding. */
.product-main__perks[role=list] { padding: 16px; margin: 24px 0; }
/* Newsletter: an empty status line adds no space under the form. */
.newsletter .form-status:empty { display: none; }
/* Tablets: no card left alone on a row. Three testimonials sit 3 across; four steps sit 2 x 2. */
@media (min-width: 700px) and (max-width: 999px) {
  .testimonials:not(.testimonials--row):has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 999px) {
  .steps:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Product page: the add-to-cart label stays on one line (wide or tracked fonts wrapped it on phones). */
.product-main__buy [data-add-to-cart] { white-space: nowrap; }
/* Price list in two columns: a group heading never ends a column on its own. */
.price-list h3 { break-after: avoid; break-inside: avoid; }
/* Quote hero under the glass header: room for the floating bar above the quote. */
body.hike-kit:has(.hdr-glass) .hike-region--main > .hike-section--hero_quote:first-child .hero-quote__inner { padding-top: calc(var(--header-height, 80px) + clamp(32px, 6vw, 72px)); }
/* Loyalty badge icon: the accent colour checked against the background (a light accent was unreadable). */
.loyalty-badge .icon { color: var(--color-accent-text); }
/* Transparent header over a hero: the search input itself is see-through too, so its placeholder shows. */
body:has(.hike-region--main > .hike-section:first-child:is(.hike-section--hero_full, .hike-section--slideshow)) .hdr-transparent:not(.is-scrolled) .site-search__form input { background: transparent; }
/* Boxed cards: price and button sit at the foot, so neighbours line up when a title wraps. */
.pc--boxed { display: flex; flex-direction: column; }
.pc--boxed .pc__body { flex: 1; display: flex; flex-direction: column; }
.pc--boxed .pc__body > .price { margin-top: auto; }
.pc--boxed .pc__button { margin-top: 10px; }
/* Promo tiles: the small label takes the tile's text colour (was an inline style, which themes could not restyle). */
.kit-eyebrow.promo-eyebrow { color: inherit; opacity: .85; margin-bottom: 6px; }
/* Visit footer without a photo: a tinted panel with a pin keeps the "Get directions" button in place. */
.ftr-visit__map--blank { min-height: 220px; display: grid; place-items: center; background: color-mix(in srgb, currentColor 8%, transparent); border-radius: var(--shape-card-radius, 12px); }
.ftr-visit__pin { opacity: .55; }
/* Menu drop-downs: the list reset (ul[role=list]) outranks .site-nav__dropdown and removed its padding, so a hovered
   link's highlight reached the rounded corners and poked out square. Restore the inset. */
.site-nav__dropdown[role=list] { padding: 8px; }
/* Shop page "Sort by" and "Per page": a calm control that matches the square list the browser opens (radius at most
   10 px, own chevron), and a focus ring only for keyboard users (it stayed on after a mouse choice). */
.listing__sort select { -webkit-appearance: none; appearance: none; border-radius: min(var(--shape-radius, 6px), 10px); padding: 6px 34px 6px 12px; color: var(--color-text); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 14px; }
.listing__sort select:hover { border-color: color-mix(in srgb, var(--color-text) 45%, var(--color-outline)); }
.listing__sort select:focus { outline: none; box-shadow: none; }
.listing__sort select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---------- Logo width (the headers' "Logo width" setting, style="--logo-width: Npx" on the logo image): the logo fits a
   box that wide and a third of that tall, replacing base.css's fixed 48 px height cap, so the setting changes the size of
   any logo: a 3:1 logo fills the width, a square one is a third of it. 70% on phones (at most 46% of the screen).
   object-fit keeps the shape where a logo is wider than 3:1 or a header caps the height (sidebar). ---------- */
.site-header__logo img[style*="--logo-width"] { width: auto; height: calc(var(--logo-width) / 3); max-width: var(--logo-width); max-height: none; object-fit: contain; }
@media (max-width: 899px) { .site-header__logo img[style*="--logo-width"] { height: calc(var(--logo-width) * .7 / 3); max-width: min(calc(var(--logo-width) * .7), 46vw); } }
/* A logo taller than the bar made the bar exactly as tall as the logo: it touched the announcement bar above and hid a
   rule drawn inside the header's bottom edge (Lathe's inset line). A logo over 50 px tall (width setting over 150) gets
   up to 8 px above and below it, so the header grows around it; the default sizes are unchanged. The sidebar and corner
   headers have their own padding. */
.site-header:not(.hdr-sidebar, .hdr-corner) .site-header__logo img[style*="--logo-width"] { margin-block: clamp(0px, calc(var(--logo-width) / 3 - 50px), 8px); }
/* ---------- Logo position (the headers' logo_position setting, on computers; each header leaves the class off for its
   own default, and phones keep each header's row of menu button, logo and icons). Centre: the menu takes the left half,
   the logo the middle and search and icons the right half; a menu too long for its half folds into "More", and the
   menu button of a compact header takes the empty left cell. The market header puts its search box in the left half;
   the two-row and dock headers keep their menu in its own bar. Left: logo, the menu, then search and icons (a compact
   header keeps its own layout). The split header puts its whole menu after the logo; the minimal header keeps its Menu
   button first. ---------- */
@media (min-width: 900px) {
  .site-header.site-header--logo-center .site-header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .site-header.site-header--logo-center .site-header__logo { grid-column: 2; grid-row: 1; justify-self: center; }
  .site-header.site-header--logo-center .site-header__inner > .site-nav { grid-column: 1; grid-row: 1; min-width: 0; }
  .site-header.site-header--logo-center .site-header__actions { grid-column: 3; grid-row: 1; justify-self: end; }
  .site-header.hdr-market.site-header--logo-center .hdr-market__search { grid-column: 1; grid-row: 1; padding: 0 24px 0 0; }
  .site-header.hdr-pill.site-header--logo-center .site-header__inner { padding-inline: 18px; }
  .site-header.site-header--logo-left:not(.site-header--compact) .site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
  .site-header.site-header--logo-left:not(.site-header--compact) .site-header__logo { grid-column: 1; grid-row: 1; justify-self: start; text-align: left; }
  .site-header.site-header--logo-left:not(.site-header--compact) :is(.site-header__inner > .site-nav, .hdr-split__side--left) { grid-column: 2; grid-row: 1; min-width: 0; }
  .site-header.site-header--logo-left:not(.site-header--compact) :is(.site-header__inner > .site-header__actions, .hdr-split__end) { grid-column: 3; grid-row: 1; justify-self: end; }
  .site-header.hdr-split.site-header--logo-left .hdr-split__side--left { padding-left: clamp(12px, 2vw, 32px); }
  .site-header.hdr-minimal.site-header--logo-left:not(.hdr-minimal--links) .site-header__logo { grid-column: 2; }
}
/* Footer sign-up forms: email field and button side by side when the column has room, otherwise stacked with the
   button as wide as the field (it used to wrap and sit centred under the field). Low specificity (:where), so the
   kit footers' own form designs still win. */
.site-footer :where(.newsletter-form) { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; justify-content: stretch; }
:where(.site-footer .newsletter-form) > input { min-width: 0; width: 100%; }
:where(.site-footer .newsletter-form) > .form-status { grid-column: 1 / -1; margin: 0; }
@container (max-width: 359px) {
  :where(.site-footer .newsletter-form) > :is(input, button) { grid-column: 1 / -1; }
}
/* Footer accent buttons use the footer-safe accent from the layout, so they never vanish into a footer of the same
   colour (e.g. an accent equal to the footer background). */
.site-footer .btn--accent { background: var(--color-footer-accent, var(--color-accent)); border-color: var(--color-footer-accent, var(--color-accent)); color: var(--color-on-footer-accent, var(--color-on-accent, #111)); }

/* ---------- Fixes of 8 Oct 2026 (HK-ECOM-THEMES-POLISH-01): each rule changes only the case that was broken ---------- */
/* B1 Editorial cards keep their picture still on hover (the old rule looked for a card inside the card). */
.pc--editorial:hover .pc__media img { transform: none; }
/* B7 Product carousel: theme.js hides the "scroll for more" hint when every card already fits. */
.pcarousel__hint[hidden] { display: none; }
.pcarousel:has(.pcarousel__hint[hidden])::before, .pcarousel:has(.pcarousel__hint[hidden])::after { bottom: 22px; }
/* B19 Full-screen hero: on phones the height leaves out the browser bars, so the buttons stay on screen. */
@supports (height: 1svh) { .hero-full { min-height: var(--hero-full-height-s, 92svh); } }
/* B20 Sale hero: a long figure (more than 4 characters, such as "2 for 1") is set smaller so it fits a phone. */
.hero-sale__figure--long { flex-wrap: wrap; }
.hero-sale__figure--long .hero-sale__value { font-size: clamp(3.2rem, 1.6rem + 7vw, 7.5rem); }
/* B22 No lone item: on phones and tablets the last of an odd number of figures spans the row; a single quote keeps a
   readable width; four steps in 2 x 2 draw no line off the end of the first row. */
@media (max-width: 899px) { .stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.testimonials:not(.testimonials--row):has(> :only-child) { max-width: 760px; margin-inline: auto; }
@media (min-width: 600px) and (max-width: 999px) { .steps--line:has(> :nth-child(4):last-child) > .step:nth-child(2)::after { display: none; } }
/* B24 Wordmark footer: the sign-up button lines up with the field instead of sitting centred under it. */
.ftr-wordmark .newsletter-form { justify-content: flex-start; }
/* B32 Minimal header on computers: the Menu button widens to hold its icon and label (the icon was squeezed to nothing). */
@media (min-width: 900px) { .hdr-minimal .site-header__toggle { width: auto; padding: 0 14px 0 10px; border-radius: 999px; } }
/* B33 Marketplace header on phones: "All categories" drops its menu icon, so two menu icons don't sit side by side. */
@media (max-width: 899px) { .hdr-market__all > a > .icon { display: none; } }
/* B35 Keyboard focus shows on bars in the main colour; on phones a long note in the two-row header wraps instead of
   widening the page (a note that fits is unchanged). */
.hdr-tworow__bar :focus-visible, .hdr-market__cats :focus-visible { outline-color: currentColor; }
@media (max-width: 899px) { .hdr-tworow__note { min-width: 0; white-space: normal; text-align: right; } }
/* B13 Bento hero without a picture on a light main colour: the main colour's own text colour, no dark shade. */
.bento-tile--main.bento-tile--on-light { color: var(--color-on-primary); }
.bento-tile--main.bento-tile--on-light::after { display: none; }

/* ---------- Header: utility strip (a strip in the primary colour with the welcome line, phone, wishlist and account;
   the logo row with a search button and the cart; the menu in its own bar). The strip is outside [data-header], so it
   scrolls away and the sticky header stays. Reuses the two-row header's bar (.hdr-tworow__bar). ---------- */
.hdr-utility__strip { background: var(--color-primary); color: var(--color-on-primary); font-size: .84rem; line-height: 1.3; }
.hdr-utility__strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 4px 20px; min-height: 34px; padding-block: 6px; }
.hdr-utility__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; margin: 0; min-width: 0; }
.hdr-utility__strip a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.hdr-utility__strip a:hover { text-decoration: underline; }
.hdr-utility__links { display: flex; align-items: center; gap: 22px; flex: none; }
.hdr-utility .site-header__inner { grid-template-columns: auto 1fr auto; }
.hdr-utility .site-header__actions { grid-column: 3; }
.hdr-utility__search { position: relative; }
.hdr-utility__search > summary { list-style: none; }
.hdr-utility__search > summary::-webkit-details-marker { display: none; }
.hdr-utility__search-form { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; display: flex; gap: 8px; width: min(440px, calc(100vw - 32px)); padding: 12px; background: var(--color-background); color: var(--color-text); border: 1px solid var(--color-outline); border-radius: var(--shape-card-radius, 10px); box-shadow: 0 16px 40px rgba(0, 0, 0, .12); }
.hdr-utility__search-form .input { flex: 1 1 auto; min-width: 0; }
.hdr-utility--bar-tint .hdr-tworow__bar { background: var(--color-background-alt); color: var(--color-navigation); }
.hdr-utility--bar-plain .hdr-tworow__bar { background: var(--color-header-background); color: var(--color-navigation); border-top: 1px solid var(--color-outline); }
.hdr-utility--bar-tint .hdr-tworow__bar .site-nav__link:hover, .hdr-utility--bar-tint .hdr-tworow__bar .site-nav__link[aria-current=page],
.hdr-utility--bar-plain .hdr-tworow__bar .site-nav__link:hover, .hdr-utility--bar-plain .hdr-tworow__bar .site-nav__link[aria-current=page] { background: none; color: var(--color-primary); }
.hdr-utility.site-header--menu-center .hdr-tworow__bar .site-nav { justify-content: center; }
.hdr-utility.site-header--menu-right .hdr-tworow__bar .site-nav { justify-content: flex-end; }
@media (max-width: 899px) {
  .hdr-utility .hdr-tworow__bar { display: none; }
  .hdr-utility .site-header__inner { min-height: 60px; }
}
@media (max-width: 599px) {
  .hdr-utility .site-header__inner { position: relative; }
  .hdr-utility__search { position: static; }
  .hdr-utility__search-form { left: var(--layout-spacing, 16px); right: var(--layout-spacing, 16px); top: calc(100% - 4px); width: auto; }
  .hdr-utility__welcome { display: none; }
  .hdr-utility__account { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Page title band: the page's name on the left, breadcrumbs on the right, across the top of a page ---------- */
.page-band { padding-block: 28px; }
.page-band--tint { background: var(--color-background-alt); }
.page-band--primary { background: var(--color-primary); color: var(--color-on-primary); }
.page-band--plain { border-block: 1px solid var(--color-outline); }
.page-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; }
.page-band__title { margin: 0; font-family: var(--font-heading-family); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; color: var(--color-heading); }
.page-band .breadcrumbs { padding: 0; font-weight: 600; text-transform: uppercase; color: var(--color-heading); }
.page-band .breadcrumbs a { color: inherit; }
.page-band .breadcrumbs [aria-current=page] { color: var(--color-primary); }
.page-band--primary .page-band__title, .page-band--primary .breadcrumbs, .page-band--primary .breadcrumbs [aria-current=page] { color: inherit; }

/* ---------- Footer: sign-up strip and columns (a full-width strip with the sign-up on one line, four columns with
   headings, then the small print with the ways to pay) ---------- */
.ftr-band { background: var(--color-footer-background); color: var(--color-footer-text, var(--color-text)); }
.ftr-band a { color: inherit; text-decoration: none; }
.ftr-band a:hover { color: var(--color-primary); }
.ftr-band__strip { padding-block: 26px; }
.ftr-band__strip--primary { background: var(--color-primary); color: var(--color-on-primary); }
.ftr-band__strip--accent { background: var(--color-accent); color: var(--color-on-accent); }
.ftr-band__strip--tint { background: var(--color-background-alt); border-block: 1px solid var(--color-outline); }
.ftr-band__strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; text-align: center; }
.ftr-band__signup-heading { margin: 0; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: inherit; }
.ftr-band__signup-text { margin: 0; font-size: .92rem; opacity: .92; }
.ftr-band__form { flex: 0 1 460px; min-width: min(100%, 280px); margin: 0; }
.ftr-band__form .form-status:empty { display: none; }
.ftr-band__field { display: flex; background: var(--color-background); border-radius: var(--shape-input-radius, 0); overflow: hidden; }
.ftr-band__field input { flex: 1 1 auto; min-width: 0; border: 0; padding: 11px 16px; font: inherit; color: var(--color-text); background: transparent; }
.ftr-band__field .btn { border-radius: 0; background: var(--color-heading); color: var(--color-background); border-color: var(--color-heading); flex: none; }
.ftr-band__grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding-block: 52px 40px; }
@media (min-width: 700px) { .ftr-band__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ftr-band__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; } }
.ftr-band__brand { display: inline-block; font-family: var(--font-heading-family); font-weight: 700; font-size: 1.4rem; color: var(--color-heading); margin-bottom: 14px; }
.ftr-band__brand img { display: block; max-width: 160px; max-height: 72px; width: auto; height: auto; }
.ftr-band__about p { margin: 0 0 16px; max-width: 44ch; color: var(--color-subheading); }
.ftr-band__heading { margin: 0 0 16px; font-size: .95rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-heading); }
.ftr-band__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ftr-band__grid nav a { color: var(--color-subheading); }
.ftr-band__grid nav a:hover { color: var(--color-primary); }
.ftr-band__social { display: flex !important; gap: 18px !important; }
.ftr-band__contact li { display: flex; gap: 10px; align-items: flex-start; color: var(--color-subheading); }
.ftr-band__contact .icon { flex: none; margin-top: 4px; color: var(--color-heading); }
.ftr-band__bottom { background: var(--color-sub-footer-background); border-top: 1px solid var(--color-outline); font-size: .85rem; }
.ftr-band__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 16px; }
.ftr-band__pay { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ftr-band__pay li { padding: 2px 8px; border: 1px solid var(--color-outline); border-radius: 4px; background: var(--color-background); font-size: .75rem; font-weight: 700; color: var(--color-subheading); }

/* ==========================================================================
   Kit round 4 (12 Oct 2026, built for Grove, the look of the legacy Razor Theme_25): the stacked header, picture
   banners for the Multi-column section, the three-panel footer.
   ========================================================================== */

/* ---------- Header: strip, centred logo, menu below. The strip is the utility header's (.hdr-utility__strip, here in a
   gradient of the primary and accent colours); the row has the menu button on every screen size, the logo in the
   middle and search and cart on the right; the menu is the two-row header's bar, plain, under a hairline. ---------- */
.hdr-stacked__strip--gradient { background: linear-gradient(to right, var(--color-primary), var(--color-accent)); color: var(--color-on-primary); }
.hdr-stacked__strip--accent { background: var(--color-accent); color: var(--color-on-accent); }
.site-header.hdr-stacked { border-bottom: 0; }
.hdr-stacked .site-header__inner.hdr-stacked__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 120px; }
.hdr-stacked .hdr-stacked__toggle { display: inline-flex; grid-column: 1; justify-self: start; }
.hdr-stacked .hdr-stacked__row .site-header__logo { grid-column: 2; justify-self: center; text-align: center; }
.hdr-stacked .hdr-stacked__row .site-header__actions { grid-column: 3; justify-self: end; }
.hdr-stacked .hdr-stacked__row .icon-button .icon { width: 26px; height: 26px; }
.hdr-stacked .hdr-tworow__bar { background: var(--color-header-background); color: var(--color-navigation); }
.hdr-stacked .hdr-tworow__bar .container { justify-content: center; border-top: 1px solid var(--color-outline); }
.hdr-stacked .hdr-tworow__bar .site-nav { justify-content: center; }
.hdr-stacked .hdr-tworow__bar .site-nav__link { padding: 20px 22px; font-size: .98rem; font-weight: 400; letter-spacing: .1em; }
.hdr-stacked .hdr-tworow__bar .site-nav__link:hover, .hdr-stacked .hdr-tworow__bar .site-nav__link[aria-current=page] { background: none; color: var(--color-primary); }
.hdr-stacked.site-header--compact .hdr-tworow__bar { display: none; }
@media (max-width: 899px) {
  .hdr-stacked .hdr-tworow__bar { display: none; }
  .hdr-stacked .site-header__inner.hdr-stacked__row { min-height: 64px; }
}
/* The drawer's category list (header_drawer with categories), above the menu. */
.drawer__cats { margin-bottom: 18px; }
.drawer__label { margin: 6px 0 2px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-subheading); }

/* ---------- Multi-column "Picture banners" (style: banners): each column's image fills its banner, the text sits over
   it on the left (the column text small and above, the title large), and the column's link covers the banner, like the
   Razor collection banners. Without an image a banner is a tinted panel. ---------- */
.multicolumn--banners { gap: var(--layout-grid-gap-desktop, 24px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.multicolumn--banners .multicolumn__item { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: clamp(190px, 20vw, 290px); padding: 24px clamp(20px, 3.5vw, 44px); overflow: hidden; border-radius: var(--shape-card-radius, 0); background: var(--color-background-alt); }
.multicolumn--banners .multicolumn__item img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; transition: transform .6s ease; }
.multicolumn--banners .multicolumn__item:has(> img)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--color-background) 55%, transparent), transparent 70%); }
.multicolumn--banners .multicolumn__item:hover img { transform: scale(1.05); }
.multicolumn--banners .multicolumn__icon { display: none; }
.multicolumn--banners .multicolumn__item h3 { margin: 0; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); font-weight: 700; line-height: 1.1; letter-spacing: .08em; text-transform: uppercase; color: var(--color-heading); }
.multicolumn--banners .multicolumn__item p { order: -1; margin: 0 0 6px; font-size: .95rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); }
.multicolumn--banners .multicolumn__link { position: absolute; inset: 0; z-index: 1; overflow: hidden; font-size: 0; color: transparent; }
.multicolumn--banners .multicolumn__link .icon { display: none; }
.multicolumn--banners .multicolumn__link:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .multicolumn--banners .multicolumn__item img { transition: none; } .multicolumn--banners .multicolumn__item:hover img { transform: none; } }

/* ---------- Footer: three panels (a coloured band; the store, the sign-up and the store information side by side
   between thin rules; then the menus in a row and the small print). The rules and the small-print line take the text
   colour, so they suit any band colour. ---------- */
.ftr-trio { --ftr-trio-bg: var(--color-footer-background); --ftr-trio-fg: var(--color-footer-text, var(--color-text)); background: var(--ftr-trio-bg); color: var(--ftr-trio-fg); }
.ftr-trio--gradient { --ftr-trio-bg: linear-gradient(to right, var(--color-primary), var(--color-accent)); --ftr-trio-fg: var(--color-on-primary); }
.ftr-trio--primary { --ftr-trio-bg: var(--color-primary); --ftr-trio-fg: var(--color-on-primary); }
.ftr-trio--accent { --ftr-trio-bg: var(--color-accent); --ftr-trio-fg: var(--color-on-accent); }
.ftr-trio a { color: inherit; text-decoration: none; }
.ftr-trio a:hover { text-decoration: underline; }
.ftr-trio__panels { display: flex; flex-direction: column; padding-block: 40px 28px; text-align: center; }
.ftr-trio__panel { padding: 22px 0; }
.ftr-trio__panel + .ftr-trio__panel { border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
@media (min-width: 900px) {
  .ftr-trio__panels { flex-direction: row; align-items: stretch; padding-block: 64px 44px; }
  .ftr-trio__panel { flex: 1 1 0; min-width: 0; padding: 6px 32px; }
  .ftr-trio__signup { flex-grow: 2; }
  .ftr-trio__panel + .ftr-trio__panel { border-top: 0; border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
}
.ftr-trio__brand { display: inline-block; font-family: var(--font-heading-family); font-size: 1.5rem; font-weight: 700; color: inherit; }
.ftr-trio__brand--logo { padding: 8px 10px; background: var(--color-background); }
.ftr-trio__brand img { display: block; max-width: 150px; max-height: 90px; width: auto; height: auto; }
.ftr-trio__store p { max-width: 36ch; margin: 16px auto 0; opacity: .92; }
.ftr-trio__social { display: flex; justify-content: center; gap: 26px; list-style: none; margin: 22px 0 0; padding: 0; }
.ftr-trio__heading { margin: 0 0 16px; font-size: 1.15rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: inherit; }
.ftr-trio__signup p { max-width: 46ch; margin: 0 auto 18px; line-height: 1.9; }
.ftr-trio__form { display: grid; justify-items: center; gap: 16px; max-width: 360px; margin: 0 auto; }
.ftr-trio__form input { width: 100%; padding: 13px 16px; border: 0; border-radius: var(--shape-input-radius, 0); background: var(--color-background); color: var(--color-text); font: inherit; letter-spacing: .14em; text-align: center; }
.ftr-trio__form .btn { border-color: transparent; background: rgba(0, 0, 0, .28); color: inherit; }
.ftr-trio__form .btn:hover { background: rgba(0, 0, 0, .4); }
.ftr-trio--footer .ftr-trio__form .btn { background: var(--color-primary); color: var(--color-on-primary); }
.ftr-trio--footer .ftr-trio__form input { border: 1px solid var(--color-outline); }
.ftr-trio__form .form-status { margin: 0; }
.ftr-trio__form .form-status:empty { display: none; }
.ftr-trio__contact ul { display: grid; justify-items: center; gap: 12px; list-style: none; margin: 0; padding: 0; }
.ftr-trio__contact li { display: flex; align-items: flex-start; gap: 8px; }
.ftr-trio__contact .icon { flex: none; margin-top: 4px; }
.ftr-trio__menus { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 56px; padding-block: 0 28px; text-align: center; }
.ftr-trio__menu-heading { margin: 0 0 8px; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: inherit; opacity: .8; }
.ftr-trio__menus ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; list-style: none; margin: 0; padding: 0; }
.ftr-trio__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 18px 22px; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); font-size: .88rem; }
.ftr-trio__pay { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ftr-trio__pay li { padding: 2px 8px; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 3px; font-size: .75rem; font-weight: 700; }

/* ==========================================================================
   Kit round 5 (13 Oct 2026, built for Axle, the look of the legacy Razor Theme_52 "Car Accessories"): the strip
   header, the framed product card, a band in the primary colour for a category collection.
   ========================================================================== */

/* ---------- Header: light strip, menu beside the icons. The strip is the utility header's (.hdr-utility__strip) with
   "Sign in", "Register" and the social links on the right; the row is the classic one (logo left, then the menu and
   the icons on the right) with the utility header's search button. ---------- */
.hdr-strip__strip { font-size: .8rem; font-weight: 600; }
.hdr-strip__strip--light { background: var(--color-header-background); color: var(--color-heading); border-bottom: 1px solid var(--color-outline); }
.hdr-strip__strip--accent { background: var(--color-accent); color: var(--color-on-accent); }
.hdr-strip__strip .hdr-utility__links { gap: 18px; }
.hdr-utility__social { display: flex; align-items: center; gap: 14px; list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.hdr-utility__social a { display: inline-flex; }
.hdr-strip .site-header__inner { min-height: 100px; column-gap: 24px; }
.hdr-strip .site-nav__link { padding: 10px 18px; }
.hdr-strip .site-nav__link:hover, .hdr-strip .site-nav__link[aria-current=page] { background: none; color: var(--color-primary); }
.hdr-strip .site-header__actions { gap: 8px; }
.hdr-strip .site-header__actions .icon { width: 26px; height: 26px; }
.hdr-strip .cart-count { background: var(--color-primary); color: var(--color-on-primary); }
@media (max-width: 899px) {
  .hdr-strip .site-header__inner { min-height: 64px; }
  .hdr-strip .site-header__actions .icon { width: 24px; height: 24px; }
  .hdr-strip__account, .hdr-strip__wishlist { display: none; }
}
@media (max-width: 599px) {
  .hdr-strip .site-header__inner { position: relative; }
  .hdr-strip__strip .hdr-utility__strip-inner { justify-content: flex-end; }
}

/* ---------- Product card "framed": the picture in a hairline frame on the page colour, a cart badge in its lower corner
   on hover (decoration: the card's one link is its name); the name in small capitals on one line, a bold price. ------- */
.pc--framed .pc__media { border: 1px solid var(--color-outline); background: var(--color-background); }
.pc--framed:hover .pc__media { border-color: color-mix(in srgb, var(--color-heading) 28%, var(--color-outline)); }
.pc--framed .pc__cart { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--shape-button-radius, 0); background: var(--color-primary); color: var(--color-on-primary); opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.pc--framed:hover .pc__cart { opacity: 1; transform: none; }
.pc--framed.pc--sold-out .pc__cart { display: none; }
@media (hover: none) { .pc--framed .pc__cart { display: none; } }
.pc--framed .pc__body { gap: 2px; padding-top: 12px; }
.pc--framed .pc__title { overflow: hidden; font-size: .75rem; font-weight: 400; letter-spacing: .02em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.pc--framed .pc__title a { color: var(--color-subheading); }
.pc--framed .pc__brand { font-size: .68rem; }
.pc--framed .price { padding-top: 6px; font-family: var(--font-heading-family); font-size: 1.1rem; font-weight: 600; }
.pc--framed .price__current { color: var(--color-heading); }
@media (prefers-reduced-motion: reduce) { .pc--framed .pc__cart { transition: none; transform: none; } }

/* ---------- A band in the primary colour (category collection, background "primary"): the heading, text and link in
   the colour on primary; the category cards keep their own colours. ---------- */
.section--primary { background: var(--color-primary); color: var(--color-on-primary); }
.section--primary .section-heading h2, .section--primary .section-heading p, .section--primary .section-heading__link { color: inherit; }

/* ==========================================================================
   Kit round 6 (14 Oct 2026, built for Ridge, the look of the legacy Razor Theme_5 "Furniture Store"): the subscribe-bar
   footer.
   ========================================================================== */

/* ---------- Footer "subscribe bar and columns": the sign-up words on the left and the field on the right with a thin
   rule between them, then four columns, then the small print with the ways to pay. ---------- */
.ftr-subscribe { background: var(--color-footer-background); color: var(--color-footer-text, var(--color-text)); }
.ftr-subscribe a { color: inherit; text-decoration: none; }
.ftr-subscribe a:hover { color: var(--color-primary); }
.ftr-subscribe__bar { padding-block: 30px; }
.ftr-subscribe__bar--tint { background: var(--color-background-alt); border-bottom: 1px solid var(--color-outline); color: var(--color-heading); }
.ftr-subscribe__bar--primary { background: var(--color-primary); color: var(--color-on-primary); }
.ftr-subscribe__bar--accent { background: var(--color-accent); color: var(--color-on-accent); }
.ftr-subscribe__bar-inner { display: grid; gap: 18px; align-items: center; }
@media (min-width: 900px) { .ftr-subscribe__bar-inner { grid-template-columns: 1fr 1fr; gap: 0; } .ftr-subscribe__copy { padding-right: 40px; border-right: 1px solid color-mix(in srgb, currentColor 18%, transparent); } .ftr-subscribe__form { padding-left: 40px; } }
.ftr-subscribe__signup-heading { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: inherit; }
.ftr-subscribe__copy p { margin: 0; font-size: .92rem; opacity: .85; }
.ftr-subscribe__form { margin: 0; }
.ftr-subscribe__form .form-status:empty { display: none; }
.ftr-subscribe__field { display: flex; gap: 10px; }
.ftr-subscribe__field input { flex: 1 1 auto; min-width: 0; padding: 11px 16px; border: 1px solid var(--color-outline); border-radius: var(--shape-input-radius, 0); background: var(--color-background); color: var(--color-text); font: inherit; }
.ftr-subscribe__field .btn { flex: none; }
.ftr-subscribe__bar--primary .ftr-subscribe__field .btn, .ftr-subscribe__bar--accent .ftr-subscribe__field .btn { background: var(--color-heading); border-color: var(--color-heading); color: var(--color-background); }
.ftr-subscribe__grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding-block: 56px 44px; }
@media (min-width: 700px) { .ftr-subscribe__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ftr-subscribe__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 44px; } }
.ftr-subscribe__brand { display: inline-block; margin-bottom: 16px; font-family: var(--font-heading-family); font-size: 1.4rem; font-weight: 700; color: var(--color-heading); }
.ftr-subscribe__brand img { display: block; width: auto; height: auto; max-width: 170px; max-height: 80px; }
.ftr-subscribe__about p { max-width: 42ch; margin: 0 0 18px; color: var(--color-subheading); }
.ftr-subscribe__heading { margin: 0 0 18px; font-size: .95rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-heading); }
.ftr-subscribe__grid ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ftr-subscribe__grid nav a { color: var(--color-subheading); }
.ftr-subscribe__grid nav a:hover { color: var(--color-primary); }
.ftr-subscribe__social { display: flex !important; flex-wrap: wrap; gap: 10px !important; }
.ftr-subscribe__social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--color-outline); border-radius: 50%; color: var(--color-heading); }
.ftr-subscribe__social a:hover { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }
.ftr-subscribe__contact li { display: flex; gap: 10px; align-items: flex-start; color: var(--color-subheading); }
.ftr-subscribe__contact .icon { flex: none; margin-top: 4px; color: var(--color-primary); }
.ftr-subscribe__bottom { background: var(--color-sub-footer-background); border-top: 1px solid var(--color-outline); font-size: .85rem; }
.ftr-subscribe__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 18px; }
.ftr-subscribe__pay { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ftr-subscribe__pay li { padding: 2px 8px; border: 1px solid var(--color-outline); border-radius: 4px; background: var(--color-background); color: var(--color-subheading); font-size: .75rem; font-weight: 700; }