/* =========================================================================
   Freewheel — an adaptive SitePack theme for sport & outdoor shops
   Every colour, radius and width comes from a merchant setting (CSS variable).
   No hardcoded colours: derive shades with color-mix()/filter instead.
   ========================================================================= */

/* Settings added after the first publish are only emitted once the theme is published again;
   these layered defaults keep the header right until then (an unlayered platform value wins). */
@layer defaults {
    :root {
        --logo-max-height: 44px;
        --logo-max-width: 240px;
    }
}

/* One page gutter for every block (header, trail, page-builder elements, footer), so all
   content shares the same left and right edge at every viewport width. */
:root {
    --fw-gutter: clamp(20px, 3vw, 40px);
    --fw-ease: cubic-bezier(.2, .7, .2, 1);
    /* Per-block reveal delay; theme.js sets it on siblings in a row. */
    --fw-delay: 0ms;
}

* {
    box-sizing: border-box;
}

body {
    line-height: 1.6;
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

h1, h2, h3 {
    letter-spacing: -0.015em;
}

h1 {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.05;
}

a {
    color: var(--anchor-color);
    text-decoration: none;
}

a:hover, a:active, a:focus {
    color: var(--anchor-hover-color);
}

/* Shared content wrapper: same width and gutter as the header and grids. */
.container-element {
    max-width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--fw-gutter);
    padding-right: var(--fw-gutter);
}

/* Page-builder hero: the platform gives its inner wrapper a narrower max-width than the
   rest of the content, so the hero text does not line up with the headings, columns and
   forms below it. Pin the inner column to the theme's container width and gutter — the
   band itself can stay full-bleed — so every content block shares one left edge. */
.element-hero-inner {
    max-width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--fw-gutter);
    padding-right: var(--fw-gutter);
}

main {
    padding: 0;
    margin: 0 auto;
    background-color: var(--content-background-color);
}

.text-center {
    text-align: center;
}

/* =========================
   Buttons & chips
   ========================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.85rem 1.75rem;
    border-radius: var(--button-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, filter 0.2s, transform 0.2s;
}

.btn:hover, .btn:active, .btn:focus {
    text-decoration: none;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--brand-color);
    color: var(--brand-text-color);
    border: 1px solid var(--brand-color);
    padding: 0.85rem 1.75rem;
    border-radius: var(--button-radius);
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s, filter 0.2s, transform 0.2s;
}

.btn-primary:hover, .btn-primary:focus {
    filter: brightness(92%);
    color: var(--brand-text-color);
}

.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--disabled-color);
    border-color: var(--disabled-color);
    cursor: not-allowed;
    filter: none;
}

/* Light / outline pill on dark or accent panels */
.btn-ghost {
    background-color: var(--card-background-color);
    color: var(--text-color);
    border: 1px solid var(--card-background-color);
}

.btn-ghost:hover, .btn-ghost:focus {
    background-color: var(--text-color);
    color: var(--background-color);
}

.btn-dark {
    background-color: var(--dark-surface-color);
    color: var(--dark-surface-text-color);
    border: 1px solid var(--dark-surface-color);
}

.btn-dark:hover, .btn-dark:focus {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
    color: var(--brand-text-color);
}

.btn-secondary {
    background-color: var(--accent-surface-color);
    color: var(--accent-surface-text-color);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--button-radius);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

/* Full width, but still a flex row: as a block the button lost the centring from .btn and an
   inline icon inside it stretched to the whole width. */
.btn-block {
    display: flex;
    width: 100%;
}

/* Inline SVG icons carry a viewBox and no intrinsic size, so a button has to give them one. */
.btn svg,
.btn-primary svg,
.btn-dark svg,
.btn-ghost svg {
    width: 16px;
    height: 16px;
    flex: none;
    fill: currentColor;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.05rem;
}

.btn-success {
    background-color: var(--success-color);
    color: var(--success-text-color);
    border: none;
    padding: 8px 16px;
    border-radius: var(--button-radius);
    cursor: pointer;
    font-weight: 600;
    transition: filter 0.2s;
    white-space: nowrap;
}

.btn-success:hover {
    filter: brightness(92%);
}

.btn-default {
    background-color: var(--surface-color);
    border: 1px solid var(--input-border-color);
    color: var(--text-color);
    padding: 0.6rem 1.25rem;
    border-radius: var(--button-radius);
    cursor: pointer;
}

/* =========================
   Top bar
   ========================= */
.topbar {
    background-color: var(--header-topbar-color);
    color: var(--header-topbar-text-color);
    font-size: 13px;
    letter-spacing: 0.02em;
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 11px;
    padding-bottom: 11px;
    gap: 1rem;
}

.topbar__left {
    display: flex;
    align-items: center;
    gap: 28px;
}

.topbar__usp {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-color);
    flex: none;
}

.topbar__muted {
    opacity: 0.6;
}

.topbar__right {
    display: flex;
    align-items: center;
    gap: 24px;
    opacity: 0.85;
}

.topbar__right a {
    color: var(--header-topbar-text-color);
}

.topbar__right a:hover {
    color: var(--header-topbar-text-color);
    opacity: 0.7;
}

/* The merchant-managed topbar from core (SPD-2028) renders one of two layouts into
   .topbar__inner. */
.topbar__inner > * {
    min-width: 0;
}

/* Standard: USPs on the left, a location's contact on the right. */
.topbar-standard {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    width: 100%;
}

.topbar-standard__usps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
}

.topbar-standard__contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    opacity: 0.85;
}

.topbar-usp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.topbar-usp__icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
}

.topbar-usp__icon svg {
    width: 100%;
    height: 100%;
}

/* Text: a single centered line. */
.topbar-text {
    width: 100%;
    text-align: center;
}

.topbar-text p {
    margin: 0;
}

/* =========================
   Header
   ========================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    /* An opaque background (no backdrop-filter): a filter on the sticky header would make it
       the containing block for the fixed cart drawer, breaking its full-height slide-in and
       pushing the page wider than the viewport. */
    background-color: var(--header-background-color);
    border-bottom: 1px solid var(--border-color);
}

.site-header__main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 40px;
    padding-top: 18px;
    padding-bottom: 18px;
}

.brand {
    display: flex;
    flex-direction: column;
    /* Don't stretch the logo to the column width (the default in a column flex): that widens the
       image box beyond its natural ratio when the brand sits in a wide grid cell. */
    align-items: flex-start;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
}

.brand img {
    height: 46px;
    width: auto;
    /* Keep the logo's aspect ratio at every size: without this the global img{max-width:100%}
       caps the width while the height stays fixed, squashing the logo when space is tight. */
    max-width: none;
    object-fit: contain;
}

.brand .site-name {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--brand-color);
}

.brand .site-tagline {
    font-size: 10px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--muted-text-color);
    margin-top: 4px;
}

/* Search field in the middle of the header */
.header-search {
    justify-self: center;
    width: 100%;
    max-width: 558px;
}

.header-search .sitepack-live-search-container,
.header-search .sitepack-live-search,
.header-search form {
    width: 100%;
    /* The widget caps its container at max-width: 400px; lift it so the pill fills .header-search. */
    max-width: none;
}

/* Render the live-search widget as the rounded pill from the design: the wrapper is the pill,
   the input sits borderless inside it, the icon to its left. */
.header-search .sitepack-live-search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: var(--card-background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--button-radius);
    padding: 11px 20px;
    position: relative;
}

.header-search .sitepack-live-search-input-wrapper:focus-within {
    border-color: var(--brand-color);
}

/* The widget styles the input (border + radius + fixed height) and absolutely-positions the icon
   at the right, each at 0,3,0. Match that specificity (…container …wrapper …el) so the input can
   go borderless and the icon can flow to the left as a normal flex child. */
.header-search .sitepack-live-search-container .sitepack-live-search-input-wrapper .sitepack-live-search-input {
    flex: 1;
    width: 100%;
    border: none;
    border-radius: 0;
    outline: none;
    background: transparent;
    padding: 0;
    height: auto;
    font-size: 14px;
    color: var(--text-color);
    box-shadow: none;
}

.header-search .sitepack-live-search-container .sitepack-live-search-input-wrapper .sitepack-live-search-icon {
    position: static;
    right: auto;
    transform: none;
    order: -1;
    display: flex;
    align-items: center;
    flex: none;
}

/* Higher specificity than the widget's own icon rule so the search glyph is small, not 24px. */
.header-search .sitepack-live-search-input-wrapper .sitepack-live-search-icon img {
    width: 15px;
    height: 15px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: end;
}

.header-actions .header-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--header-text-color);
    padding: 10px 14px;
    border-radius: var(--button-radius);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.header-actions .header-link:hover {
    background: var(--surface-color);
    color: var(--header-text-color);
}

.header-cart {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--brand-color);
    color: var(--brand-text-color);
    font-size: 14px;
    font-weight: 700;
    padding: 6px 8px 6px 20px;
    border-radius: var(--button-radius);
}

.header-cart:hover {
    /* Darken via background, not filter: the fixed cart drawer lives inside this pill, and a
       filter here would make the pill its containing block and collapse the drawer on hover. */
    background-color: color-mix(in srgb, var(--brand-color) 88%, var(--shadow-color));
    color: var(--brand-text-color);
}

/* The whole pill is clickable (theme.js opens the cart), so show the pointer everywhere. */
.header-cart,
.header-cart .sitepack-shopping-cart-trigger {
    cursor: pointer;
}

.header-cart .sitepack-shopping-cart-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* The widget renders the count as an absolute circular badge on the icon; make it an inline pill
   badge inside the button so it lines up with the label. Selector matches the widget's own
   specificity (…container …trigger …count) so it wins. */
.header-cart .sitepack-shopping-cart-container .sitepack-shopping-cart-trigger .sitepack-cart-count {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    height: auto;
    background: color-mix(in srgb, var(--brand-text-color) 22%, transparent);
    color: var(--brand-text-color);
    border-radius: var(--button-radius);
    padding: 1px 8px;
    font-size: 12px;
    line-height: 1.5;
    min-width: 0;
}

/* The drawer is a DOM descendant of the white-text pill, so it inherits white text (white on a
   white sidebar = unreadable). Reset it to the readable body text colour. */
.sitepack-cart-sidebar,
.sitepack-cart-sidebar .sitepack-cart-sidebar-header h3 {
    color: var(--text-color);
}

.header-cart .nav-icon,
.header-cart .sitepack-shopping-cart-trigger {
    color: var(--brand-text-color);
}

.header-cart svg {
    color: var(--brand-text-color);
    fill: currentColor;
}

/* Nav row — constrained to the same container/gutter as .site-header__main so the menu
   lines up with the logo and the page sections instead of hugging the viewport edge. */
.site-nav {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 40px 14px;
}

.site-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-nav__list .nav-link,
.site-nav__list .dropdown {
    position: relative;
}

.site-nav__list .nav-link a,
.site-nav__list .dropdown > a {
    color: var(--muted-text-color);
    white-space: nowrap;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s, border-color 0.2s;
}

.site-nav__list .nav-link a:hover,
.site-nav__list .dropdown > a:hover,
.site-nav__list .nav-link.active a,
.site-nav__list .nav-link a.active {
    color: var(--brand-color);
    border-bottom-color: var(--brand-color);
}

/* A nav item the merchant set as a button (e.g. Contact) comes through as
   <a class="btn btn-primary">. The design shows it as a plain link in normal case, pushed to
   the far right — so strip the button look rather than rendering a pill. */
.site-nav__list .nav-link a.btn {
    background: none;
    border: none;
    border-radius: 0;
    color: var(--muted-text-color);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    padding: 0 0 4px;
}

.site-nav__list .nav-link a.btn:hover,
.site-nav__list .nav-link a.btn:focus {
    background: none;
    color: var(--brand-color);
    border-bottom-color: transparent;
}

/* Push the button-type item (Contact) to the far right, like the design. */
.site-nav__list .nav-link:has(a.btn) {
    margin-left: auto;
}

/* Hamburger */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: transparent;
    border: none;
}

.nav-toggle span {
    display: block;
    height: 2px;
    width: 22px;
    margin: 2px 0;
    background-color: var(--header-text-color);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

.nav-toggle.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.nav-icon {
    display: inline-flex;
    align-items: center;
}

/* Dropdown menu */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--card-background-color);
    min-width: 200px;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow-color) 10%, transparent);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    list-style: none;
    padding: 0.5rem 0;
    margin: 0.5rem 0 0;
    z-index: 1001;
    text-transform: none;
    letter-spacing: 0;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li a {
    padding: 0.55rem 1rem;
    color: var(--text-color);
    display: block;
    font-weight: 500;
    border: none;
}

.dropdown-menu li a:hover {
    background-color: var(--surface-color);
    color: var(--brand-color);
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* =========================
   Home — hero
   ========================= */
.home-section {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 72px 40px 0;
}

.home-section--first {
    padding-top: 32px;
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 26px;
}

.section-head h2 {
    font-size: 2.25rem;
    font-weight: 600;
    margin: 0;
}

.section-head p {
    font-size: 15px;
    color: var(--muted-text-color);
    margin: 8px 0 0;
}

.section-head__link {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 20px;
    align-items: stretch;
}

.hero__panel {
    background: var(--accent-surface-color);
    color: var(--accent-surface-text-color);
    border-radius: var(--radius);
    padding: 64px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 520px;
}

.hero__eyebrow {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    background: var(--card-background-color);
    border-radius: var(--button-radius);
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-color);
}

.hero__title {
    font-size: 4rem;
    line-height: 1.02;
    margin: 22px 0 0;
}

.hero__text {
    font-size: 17px;
    line-height: 1.55;
    color: color-mix(in srgb, var(--accent-surface-text-color) 82%, transparent);
    max-width: 420px;
    margin: 20px 0 0;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.hero__media {
    display: grid;
    grid-template-rows: 1.35fr 1fr;
    gap: 20px;
}

.hero__media-top {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--image-background-color);
    min-height: 0;
}

.hero__media-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    min-height: 0;
}

.media-fill {
    position: relative;
}

.hero__media img,
.media-fill img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* A highlighted product filling an otherwise empty media slot: image full-bleed, with the
   product name and price over a scrim, the whole tile linking to the product. */
.highlight-media {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
    color: inherit;
}

.highlight-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.highlight-media__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 1rem 1.25rem;
    color: var(--dark-surface-text-color);
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--dark-surface-color) 92%, transparent),
        color-mix(in srgb, var(--dark-surface-color) 45%, transparent) 60%,
        transparent
    );
}

.highlight-media__eyebrow {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
}

.highlight-media__name {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
}

.highlight-media__price {
    font-weight: 700;
    font-size: 0.95rem;
}

.hero__thumb {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--image-background-color);
}

.hero__stat {
    border-radius: var(--radius);
    background: var(--dark-surface-color);
    color: var(--dark-surface-text-color);
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* The product-fallback variant is a link, so keep it looking like the stat card and add a
   subtle lift on hover. */
a.hero__stat {
    text-decoration: none;
    transition: filter 0.2s, transform 0.2s;
}

a.hero__stat:hover,
a.hero__stat:focus {
    filter: brightness(1.12);
    transform: translateY(-2px);
}

.hero__stat-eyebrow {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.6;
}

.hero__stat-value {
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1;
}

.hero__stat-label {
    font-size: 14px;
    opacity: 0.7;
    margin-top: 6px;
}

/* Full-width image hero: one campaign image spanning the hero, with the eyebrow, title,
   paragraph and CTA laid over it. Same footprint as the default hero (container width,
   ~520px tall). A left-to-right scrim keeps the text readable over any image. */
.hero--image {
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 520px;
}

.hero--image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero__overlay {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 520px;
    padding: 64px 56px;
    max-width: 620px;
    color: var(--dark-surface-text-color);
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--shadow-color) 78%, transparent),
        color-mix(in srgb, var(--shadow-color) 52%, transparent) 45%,
        color-mix(in srgb, var(--shadow-color) 12%, transparent) 78%,
        transparent
    );
}

.hero--image .hero__text {
    color: color-mix(in srgb, var(--dark-surface-text-color) 88%, transparent);
    max-width: 460px;
}

/* =========================
   Home — USP strip
   ========================= */
.usp-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

.usp-strip__item {
    background: var(--background-color);
    padding: 22px 26px;
}

.usp-strip__title {
    font-size: 14px;
    font-weight: 700;
}

.usp-strip__text {
    font-size: 13px;
    color: var(--muted-text-color);
    margin-top: 4px;
}

/* =========================
   Home — category showcase
   ========================= */
.category-showcase {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.showcase-card {
    color: var(--text-color);
}

.showcase-card__image {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    background: var(--image-background-color);
    overflow: hidden;
}

.showcase-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.showcase-card:hover .showcase-card__image img {
    transform: scale(1.05);
}

.showcase-card__title {
    font-size: 14px;
    font-weight: 700;
    margin-top: 12px;
}

.showcase-card__count {
    font-size: 12.5px;
    color: var(--subtle-text-color);
}

.showcase-card--accent .showcase-card__image {
    background: var(--accent-surface-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
}

.showcase-card--accent .showcase-card__accent-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-color);
}

/* =========================
   Home — product section chips
   ========================= */
.product-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted-text-color);
    background: var(--surface-color);
    padding: 9px 16px;
    border-radius: var(--button-radius);
}

.chip--active {
    background: var(--dark-surface-color);
    color: var(--dark-surface-text-color);
    font-weight: 700;
}

/* =========================
   Home — agenda
   ========================= */
.agenda {
    background: var(--accent-surface-color);
    color: var(--accent-surface-text-color);
    border-radius: var(--radius);
    padding: 52px 56px;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
}

.agenda__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-color);
}

.agenda__title {
    font-size: 2.25rem;
    line-height: 1.1;
    margin: 14px 0 0;
}

.agenda__text {
    font-size: 16px;
    line-height: 1.55;
    color: color-mix(in srgb, var(--accent-surface-text-color) 82%, transparent);
    margin: 16px 0 0;
}

.agenda__cta {
    margin-top: 26px;
}

.agenda__list {
    display: flex;
    flex-direction: column;
}

.agenda__row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 18px 4px;
    border-top: 1px solid color-mix(in srgb, var(--accent-surface-text-color) 14%, transparent);
}

.agenda__row:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--accent-surface-text-color) 14%, transparent);
}

.agenda__date {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-color);
    width: 74px;
    flex: none;
}

.agenda__name {
    font-size: 17px;
    font-weight: 600;
}

.agenda__location {
    margin-left: auto;
    font-size: 13px;
    color: color-mix(in srgb, var(--accent-surface-text-color) 78%, transparent);
}

/* =========================
   Home — newsletter
   ========================= */
.promo-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.promo-duo__image {
    border-radius: var(--radius);
    background: var(--image-background-color);
    min-height: 300px;
    overflow: hidden;
}

.promo-duo__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.newsletter {
    background: var(--dark-surface-color);
    color: var(--dark-surface-text-color);
    border-radius: var(--radius);
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.newsletter__title {
    font-size: 2rem;
    line-height: 1.12;
    margin: 0;
}

.newsletter__text {
    font-size: 15px;
    line-height: 1.55;
    opacity: 0.72;
    margin: 14px 0 0;
    max-width: 400px;
}

/* The form itself is rendered by the platform (sitepack_newsletter_form), so it ships
   with its own .sitepack-newsletter-form* classes. The theme styles those directly —
   the markup carries no theme classes we can hook onto. */
.sitepack-newsletter-form {
    margin-top: 26px;
    max-width: 440px;
}

/* The platform prints its own "Subscribe to our newsletter" intro; the panel already
   shows the merchant's title and text right above the form, so hide the duplicate. */
.sitepack-newsletter-form__intro {
    display: none;
}

.sitepack-newsletter-form__row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sitepack-newsletter-form__email {
    width: 100%;
    border: none;
    outline: none;
    font: inherit;
    font-size: 15px;
    padding: 14px 20px;
    border-radius: var(--button-radius);
    background: color-mix(in srgb, var(--dark-surface-text-color) 12%, transparent);
    color: var(--dark-surface-text-color);
}

.sitepack-newsletter-form__email::placeholder {
    color: color-mix(in srgb, var(--dark-surface-text-color) 55%, transparent);
}

/* btn-primary + btn-block: the submit button is a native <button> with no theme class,
   so it needs the primary look, full width, and font-family: inherit (unlike the theme's
   <a> buttons it does not inherit the merchant font on its own). */
.sitepack-newsletter-form__button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    background-color: var(--brand-color);
    color: var(--brand-text-color);
    border: 1px solid var(--brand-color);
    padding: 0.85rem 1.75rem;
    border-radius: var(--button-radius);
    cursor: pointer;
    transition: background-color 0.2s, filter 0.2s, transform 0.2s;
}

.sitepack-newsletter-form__button:hover,
.sitepack-newsletter-form__button:focus {
    filter: brightness(92%);
    color: var(--brand-text-color);
}

/* =========================
   Product grid & cards
   ========================= */
.product-grid, .products-wrapper, .category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: var(--page-width);
    margin: 1rem auto;
    padding: 0 var(--fw-gutter);
}

.home-section .product-grid,
.home-section .products-wrapper {
    margin: 0;
    padding: 0;
    max-width: none;
}

.product-card {
    display: flex;
    flex-direction: column;
    background-color: transparent;
    text-align: left;
    height: 100%;
}

.product-card a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card .product-image {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--image-background-color);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.5s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.04);
}

.product-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--button-radius);
    background: var(--label-background-color);
    color: var(--label-text-color);
    z-index: 1;
}

.product-badge--sale {
    background: var(--dark-surface-color);
    color: var(--dark-surface-text-color);
}

.product-information {
    padding: 0;
}

.product-title .product-brand {
    text-transform: uppercase;
    font-size: 12px;
    color: var(--brand-color);
    line-height: 18px;
    display: block;
}

.product-title h3 {
    margin: 4px 0 0;
    font-size: 15px;
    color: var(--text-color);
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-meta {
    font-size: 13px;
    color: var(--subtle-text-color);
    margin-top: 2px;
}

.product-price {
    margin: 8px 0 0;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    align-items: baseline;
}

/* A price never breaks between the euro sign and the amount; in a narrow card the old
   price moves under the new one instead. */
.product-price > * {
    white-space: nowrap;
}

.product-price .new-price {
    color: var(--text-color);
}

.product-price .promo .new-price,
.product-price .new-price.is-promo {
    color: var(--promo-price-color);
}

.product-price .old-price {
    text-decoration: line-through;
    color: var(--subtle-text-color);
    font-weight: 400;
    font-size: 13px;
}

.product-rating {
    margin: 10px 0 0;
}

.product-rating svg {
    height: 15px;
    width: 15px;
    margin-right: -3px;
    fill: var(--rating-color);
}

.product-rating span.review-count {
    font-size: 12px;
    color: var(--subtle-text-color);
}

.product-stock-info {
    font-size: 0.85rem;
    color: var(--muted-text-color);
    margin: 6px 0 0;
}

.product-stock-info.in-stock {
    color: var(--success-color);
}

.product-stock-info.backorder {
    color: var(--stock-warning-color);
}

.product-stock-info.out-of-stock {
    color: var(--stock-error-color);
}

.product-cta {
    margin-top: auto;
}

.label, .badge {
    background-color: var(--label-background-color);
    color: var(--label-text-color);
    padding: 0.2rem 0.6rem;
    border-radius: var(--button-radius);
    font-size: 0.8rem;
}

/* =========================
   Category listing pages
   ========================= */
.category-main-layout {
    display: flex;
    gap: 2rem;
    max-width: var(--page-width);
    margin: 2rem auto;
    padding: 0 var(--fw-gutter);
}

.category-sidebar {
    flex: 0 0 280px;
}

.category-products-content {
    flex: 1;
}

.category-products-content .products-wrapper {
    margin: 0;
    max-width: none;
    padding: 0;
}

.category-description {
    background-color: var(--category-background-color);
    padding: 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.category-sub-categories {
    margin-bottom: 2rem;
}

.category-sub-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.category-quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: var(--page-width);
    margin: 0 auto 1.5rem;
    padding: 0 var(--fw-gutter);
}

/* Category Card — a full-bleed image tile with the label overlaid on top of it,
   so the image always fills the whole box. */
.category-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--category-background-color);
    transition: box-shadow 0.3s ease;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--border-color);
}

.category-card:hover {
    box-shadow: 0 10px 20px color-mix(in srgb, var(--shadow-color) 8%, transparent);
}

.category-card__link {
    position: absolute;
    inset: 0;
    text-decoration: none;
    color: inherit;
    display: block;
}

.category-card__link:hover, .category-card__link:focus {
    text-decoration: none;
}

/* Fills the whole card, behind the label. */
.category-card__image-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: var(--image-background-color);
}

.category-card__image {
    width: 100%;
    height: 100%;
}

.category-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.category-card:hover .category-card__image img {
    transform: scale(1.05);
}

.category-card__image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--image-background-color);
}

/* Label sits over the image, with a scrim so it stays readable on any photo. */
.category-card__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--dark-surface-color) 90%, transparent),
        color-mix(in srgb, var(--dark-surface-color) 45%, transparent) 55%,
        transparent
    );
}

.category-card__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark-surface-text-color);
    flex-grow: 1;
}

.category-card__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--image-background-color);
    color: var(--text-color);
    transition: all 0.3s ease;
    margin-left: 10px;
    flex-shrink: 0;
}

.category-card__arrow svg {
    height: 20px;
}

.category-card:hover .category-card__arrow {
    background-color: var(--brand-color);
    color: var(--brand-text-color);
    transform: translateX(4px);
}

/* =========================================================================
   Product detail page (Stack)
   Gallery + sticky buy column, exactly like the category page's two-column
   rhythm: same gutters, same container width, same chip and accordion shapes.
   ========================================================================= */
.pdp {
    padding-top: 24px;
}

.pdp__breadcrumb {
    margin-bottom: 20px;
}

.pdp__main {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: start;
}

/* ---------- Gallery ---------- */
.pdp-gallery {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 16px;
    align-items: start;
    /* A grid child defaults to min-content width, which lets a wide photo push the
       whole page sideways; min-width:0 keeps the stage inside its column. */
    min-width: 0;
}

/* One photo means no rail. The stage keeps the width it would have had next to one
   rather than growing into it: a 3:4 frame that wide turns into a metre of page. */
.pdp-gallery:not(:has(.pdp-gallery__thumbs)) {
    grid-template-columns: 1fr;
}

.pdp-gallery:not(:has(.pdp-gallery__thumbs)) .pdp-gallery__stage {
    max-width: 600px;
}

.pdp-gallery__thumbs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pdp-gallery__thumb {
    aspect-ratio: 3 / 4;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    background: var(--image-background-color);
    border: 2px solid transparent;
    border-radius: calc(var(--radius) - 10px);
    transition: border-color 0.2s;
}

.pdp-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pdp-gallery__thumb.is-active,
.pdp-gallery__thumb:hover {
    border-color: var(--text-color);
}

.pdp-gallery__stage {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: calc(var(--radius) + 4px);
    overflow: hidden;
    background: var(--image-background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.pdp-gallery__stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pdp-gallery__badge {
    top: 18px;
    left: 18px;
}

.pdp-gallery__placeholder svg {
    width: 64px;
    height: 64px;
    fill: color-mix(in srgb, var(--text-color) 14%, transparent);
}

/* ---------- Buy column ---------- */
.pdp-info {
    position: sticky;
    top: 150px;
    min-width: 0;
}

.pdp-info__brand {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--subtle-text-color);
}

.pdp-info__title {
    margin: 10px 0 0;
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1.08;
}

.pdp-info__price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.pdp-price {
    font-size: 1.75rem;
    font-weight: 700;
}

.pdp-price--promo {
    color: var(--promo-price-color);
}

.pdp-price__old {
    font-size: 1rem;
    color: var(--subtle-text-color);
    text-decoration: line-through;
}

.pdp-price__vat {
    font-size: 14px;
    color: var(--muted-text-color);
}

.pdp-info__intro {
    font-size: 16px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--text-color) 82%, transparent);
    margin: 18px 0 0;
    max-width: 480px;
}

/* ---------- Variant chips ---------- */
.pdp-option {
    margin-top: 28px;
}

.pdp-option__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.pdp-option__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pdp-option__link {
    font-size: 13.5px;
    font-weight: 600;
}

.pdp-option__values {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.pdp-option__value {
    min-width: 56px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 14px;
    border: 1px solid var(--input-border-color);
    border-radius: calc(var(--radius) - 10px);
    background: var(--card-background-color);
    color: var(--text-color);
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

a.pdp-option__value:hover,
a.pdp-option__value:focus {
    border-color: var(--text-color);
    color: var(--text-color);
}

.pdp-option__value.is-active {
    background: var(--text-color);
    border-color: var(--text-color);
    color: var(--background-color);
}

.pdp-option__value.is-unavailable {
    border-color: var(--border-color);
    background: transparent;
    color: var(--subtle-text-color);
    text-decoration: line-through;
    cursor: not-allowed;
}

/* ---------- Quantity + add to cart ---------- */
.pdp-buy {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 28px;
}

.pdp-qty {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    background: var(--input-background-color);
    border: 1px solid var(--input-border-color);
    border-radius: var(--button-radius);
    flex: none;
}

.pdp-qty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--muted-text-color);
    transition: background-color 0.2s, color 0.2s;
}

.pdp-qty__btn:hover {
    background: var(--surface-color);
    color: var(--text-color);
}

.pdp-qty__btn svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
}

/* Reset the global input styling: inside the pill the field is just the number. */
.pdp-qty .pdp-qty__input,
.pdp-qty input[type="number"] {
    width: 34px;
    padding: 0;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    -moz-appearance: textfield;
    appearance: textfield;
}

.pdp-qty input[type="number"]:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

.pdp-qty input[type="number"]::-webkit-outer-spin-button,
.pdp-qty input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pdp-buy__submit {
    flex: 1 1 auto;
}

.pdp-buy__error {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--stock-error-color);
}

/* ---------- Promises ---------- */
.pdp-usps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    font-size: 14.5px;
    color: color-mix(in srgb, var(--text-color) 82%, transparent);
}

.pdp-usps__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pdp-usps__dot {
    width: 6px;
    height: 6px;
    margin-top: 9px;
    border-radius: 50%;
    background: var(--brand-color);
    flex: none;
}

/* The stock line lives inside a promise row, so it carries no margin of its own. */
.pdp-usps .product-stock-info {
    margin: 0;
    font-size: inherit;
    color: inherit;
}

/* ---------- Accordions ---------- */
.pdp-accordions {
    margin-top: 30px;
    border-top: 1px solid var(--border-color);
}

.pdp-accordion {
    border-bottom: 1px solid var(--border-color);
}

.pdp-accordion__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.pdp-accordion__head::-webkit-details-marker {
    display: none;
}

.pdp-accordion .accordion-icon {
    color: var(--subtle-text-color);
    font-weight: 500;
}

.pdp-accordion .accordion-icon::before {
    content: "+";
    font-size: 1.25rem;
    line-height: 1;
}

.pdp-accordion[open] .accordion-icon::before {
    content: "\2212";
}

.pdp-accordion__body {
    padding: 0 0 20px;
    font-size: 14.5px;
    line-height: 1.65;
    color: color-mix(in srgb, var(--text-color) 82%, transparent);
}

.pdp-accordion__body p:first-child {
    margin-top: 0;
}

.pdp-specs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 24px;
}

.pdp-specs__label {
    color: var(--subtle-text-color);
}

/* ---------- Try-before-you-buy band ---------- */
.pdp-stall-wrap {
    margin-top: 80px;
}

.pdp-stall {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    background: var(--accent-surface-color);
    color: var(--accent-surface-text-color);
    border-radius: calc(var(--radius) + 6px);
    padding: 44px 48px;
}

.pdp-stall__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-color);
}

.pdp-stall__title {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.12;
    margin: 12px 0 0;
}

.pdp-stall__text {
    font-size: 15.5px;
    line-height: 1.55;
    color: color-mix(in srgb, var(--accent-surface-text-color) 82%, transparent);
    margin: 12px 0 0;
    max-width: 460px;
}

.pdp-stall__action {
    flex: none;
}

/* ---------- Recommendations ---------- */
.pdp-related {
    margin-top: 80px;
}

.pdp-related__title {
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 24px;
}

.pdp-related__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    max-width: none;
}

@media (max-width: 992px) {
    .pdp__main {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .pdp-info {
        position: static;
        top: auto;
    }

    /* Stacked, the gallery has the whole page to grow into and a 3:4 frame that wide
       becomes a screen and a half of photo. Cap it and centre it instead. */
    .pdp-gallery {
        width: 100%;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    .pdp-gallery:not(:has(.pdp-gallery__thumbs)) .pdp-gallery__stage {
        max-width: none;
    }

    .pdp-info__title {
        font-size: 2.1rem;
    }

    .pdp-related__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .pdp,
    .pdp-stall-wrap,
    .pdp-related {
        padding-left: var(--fw-gutter);
        padding-right: var(--fw-gutter);
    }

    .pdp-stall-wrap,
    .pdp-related {
        margin-top: 56px;
    }

    /* Photo first, thumbnails as a swipeable strip underneath it. `align-items: stretch`
       is not the default here: the desktop grid sets `start`, and a flex column that
       inherits it shrinks the photo to the width of its own placeholder. */
    .pdp-gallery {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .pdp-gallery__stage {
        order: -1;
        width: 100%;
        max-width: none;
        border-radius: var(--radius);
    }

    .pdp-gallery:not(:has(.pdp-gallery__thumbs)) .pdp-gallery__stage {
        max-width: none;
    }

    .pdp-gallery__thumbs {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pdp-gallery__thumbs::-webkit-scrollbar {
        display: none;
    }

    .pdp-gallery__thumb {
        flex: 0 0 68px;
        scroll-snap-align: start;
    }

    .pdp-info__title {
        font-size: 1.9rem;
    }

    .pdp-info__intro {
        max-width: none;
    }

    .pdp-stall {
        flex-direction: column;
        align-items: flex-start;
        padding: 32px 24px;
    }

    .pdp-stall__title {
        font-size: 1.6rem;
    }

    .pdp-stall__action .btn {
        width: 100%;
    }

    .pdp-related__title {
        font-size: 1.6rem;
    }

    .pdp-related__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .pdp-info__title {
        font-size: 1.65rem;
    }

    /* The pill and the button share one row until the button loses its wording;
       below this the quantity sits on its own line, full width. */
    .pdp-buy {
        flex-wrap: wrap;
    }

    .pdp-qty {
        flex: 1 1 120px;
        justify-content: space-between;
    }

    .pdp-buy__submit {
        flex: 1 1 180px;
    }

    .pdp-related__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================
   Forms
   ========================= */
label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    font: inherit;
    color: var(--text-color);
    background-color: var(--input-background-color);
    border: 1px solid var(--input-border-color);
    border-radius: var(--radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color) 22%, transparent);
}

textarea {
    resize: vertical;
}

.form-group {
    margin-bottom: 1rem;
}


::placeholder {
    color: var(--subtle-text-color);
}

/* =========================
   Cart
   ========================= */
.cart-form table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.cart-form th, .cart-form td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--input-border-color);
}

.cart-item-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cart-item-info img {
    max-width: 50px;
    height: auto;
    border-radius: var(--radius);
}

.cart-summary {
    text-align: right;
    margin-top: 2rem;
}

.cart-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.checkout-button {
    background: var(--brand-color);
    color: var(--brand-text-color);
    padding: 0.85rem 1.75rem;
    text-decoration: none;
    border-radius: var(--button-radius);
    border: none;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
}

.checkout-button:hover {
    filter: brightness(92%);
    color: var(--brand-text-color);
}

/* =========================
   Account
   ========================= */
/* The account page is rendered by {{ sitepack_account() }}, which ships base styling
   for the canonical .account* classes. Override those classes here to restyle it. */

/* =========================
   Breadcrumbs
   ========================= */
/* A trail that holds only the home link says nothing; the platform still renders it on the
   products, search, cart and account pages. */
#breadcrumbs:has(.breadcrumb > li:only-child) {
    display: none;
}

#breadcrumbs {
    max-width: var(--page-width);
    margin: 1rem auto;
    padding: 0 var(--fw-gutter);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0.9rem;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin: 0 0.5rem;
    color: var(--subtle-text-color);
}

.breadcrumb li a {
    color: var(--anchor-color);
    text-decoration: none;
}

.breadcrumb li a:hover {
    color: var(--anchor-hover-color);
}

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

.breadcrumb li a span {
    color: inherit;
}

/* =========================
   Copyright & footer
   ========================= */
#copyright {
    margin-top: 0;
    padding: 1.5rem var(--fw-gutter);
    font-size: 0.85rem;
    color: var(--copyright-text-color);
    background-color: var(--copyright-background-color);
}

#copyright p {
    margin: 0;
    line-height: 1.6;
    max-width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
}

#copyright a {
    color: var(--copyright-text-color);
    text-decoration: none;
}

#copyright a:hover {
    color: var(--brand-color);
}

/* =========================
   Sitemap
   ========================= */
.sitemap section {
    max-width: var(--page-width);
    margin: 0 auto 2rem;
    padding: 0 var(--fw-gutter);
}

.sitemap h1 {
    max-width: var(--page-width);
    margin: 0 auto 1rem;
    padding: 0 var(--fw-gutter);
}

.sitemap h2 {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.sitemap ul {
    list-style: none;
    padding-left: 0;
}

.sitemap li {
    margin-bottom: 0.5rem;
}

.sitemap a {
    text-decoration: none;
    color: var(--anchor-color);
}

.sitemap a:hover {
    color: var(--anchor-hover-color);
}

/* =========================
   Filters
   ========================= */
.category-filters {
    margin: 0;
    padding: 0;
}

.category-filters-title {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 700;
}

#sidebar-filter-toggle {
    margin: 0 0 1rem 0;
    display: none;
}

.products-filter {
    background: var(--card-background-color);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
}

.products-filter h4 {
    margin: 0;
    padding: 0.5rem 0;
    font-size: 1rem;
}

.filter-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    color: inherit;
    text-decoration: none;
}

.filter-link:hover,
.filter-link:focus {
    text-decoration: none;
    color: var(--brand-color);
}

.filter-icon {
    margin-left: .5rem;
    display: inline-flex;
    align-items: center;
}

.filter-link .if-opened {
    display: none;
}

.filter-link .if-closed {
    display: inline-flex;
}

.filter-link:not(.collapsed) .if-opened {
    display: inline-flex;
}

.filter-link:not(.collapsed) .if-closed {
    display: none;
}

.collapse {
    display: none;
}

.collapse.in, .collapse.show {
    display: block;
}

.category-filter-options {
    list-style: none;
    padding: 0.25rem 0 0.75rem 0;
    margin: 0;
}

.category-filter-options li {
    margin: 0.25rem 0;
}

.category-filter-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .35rem;
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
}

.category-filter-link:hover,
.category-filter-link:focus {
    background: var(--surface-color);
    color: var(--brand-color);
    text-decoration: none;
}

.category-filter-options .nested-level-0 { padding-left: 0; }
.category-filter-options .nested-level-1 { padding-left: 0.75rem; }
.category-filter-options .nested-level-2 { padding-left: 1.5rem; }
.category-filter-options .nested-level-3 { padding-left: 2.25rem; }

.category-filter-link i {
    color: var(--subtle-text-color);
}

/* =========================
   Modals
   ========================= */
#translationsModal .modal-body-translations {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
}

#translationsModal .modal-body-translations a {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: background-color 0.2s, border-color 0.2s;
}

#translationsModal .modal-body-translations a:hover {
    background-color: var(--surface-color);
    border-color: var(--brand-color);
    color: var(--brand-color);
}

#translationsModal .navigation-flag {
    width: 24px;
    height: auto;
    margin-right: 1rem;
    border-radius: 2px;
}

#translationsModal .language-text {
    font-weight: 500;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: color-mix(in srgb, var(--shadow-color) 50%, transparent);
    z-index: 2000;
}

.modal.fade.in, .modal.show {
    display: block;
}

.modal-dialog {
    margin: 2rem auto;
    max-width: 500px;
    background: var(--card-background-color);
    border-radius: var(--radius);
    box-shadow: 0 5px 15px color-mix(in srgb, var(--shadow-color) 30%, transparent);
}

.modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header .close {
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.modal-title {
    margin: 0;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    text-align: right;
}

/* =========================
   Cookie bar
   ========================= */
#cookiebar {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: var(--card-background-color);
    padding: 15px 25px;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow-color) 15%, transparent);
    z-index: 9999;
    max-width: 400px;
}

#cookiebar p {
    margin: 0;
    font-size: 14px;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    text-align: left;
}

/* =========================
   Landing page template
   ========================= */
.landing-hero {
    padding: 4rem 0;
}

.landing-hero__inner {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.landing-hero__content {
    flex: 1;
}

.landing-hero__title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1rem;
}

.landing-hero__sub-head {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--brand-color);
}

.landing-hero__text {
    color: var(--muted-text-color);
    margin: 0 0 1.5rem;
}

.landing-hero__content .btn-primary {
    width: auto;
}

.landing-hero__image {
    flex: 1;
}

.landing-hero__image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: 0 20px 40px color-mix(in srgb, var(--shadow-color) 10%, transparent);
}

.landing-usps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.landing-usps li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.landing-usps li::before {
    content: "\2713";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--brand-color);
    color: var(--brand-text-color);
    font-size: 0.7rem;
    flex-shrink: 0;
}

.landing-features {
    padding: 4rem 0;
    text-align: center;
}

.landing-features__title {
    margin: 0 0 2.5rem;
}

.landing-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: left;
}

.feature-card {
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background-color: var(--card-background-color);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.feature-card:hover {
    box-shadow: 0 10px 20px color-mix(in srgb, var(--shadow-color) 8%, transparent);
    transform: translateY(-2px);
}

.feature-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
}

.feature-card__text {
    margin: 0;
    color: var(--muted-text-color);
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 992px) {
    body { min-width: 0; }

    .hero,
    .agenda,
    .promo-duo {
        grid-template-columns: 1fr;
    }

    .hero__panel {
        padding: 40px 32px;
        min-height: 0;
    }

    .hero--image,
    .hero__overlay {
        min-height: 420px;
    }

    .hero__overlay {
        padding: 40px 32px;
        max-width: 100%;
        /* Narrower viewports: the image sits behind full-width text, so darken from the
           bottom up instead of only from the left. */
        background: linear-gradient(
            to top,
            color-mix(in srgb, var(--shadow-color) 82%, transparent),
            color-mix(in srgb, var(--shadow-color) 45%, transparent) 55%,
            color-mix(in srgb, var(--shadow-color) 20%, transparent)
        );
    }

    .hero__title { font-size: 2.75rem; }

    .category-showcase {
        grid-template-columns: repeat(3, 1fr);
    }

    .usp-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-main-layout {
        flex-direction: column;
    }

    .category-sidebar {
        flex: none;
        width: 100%;
    }

    .category-filters-title {
        display: none;
    }

    #sidebar-filter-toggle {
        display: block;
    }

    #sidebar-category-filters {
        display: none;
    }

    #sidebar-category-filters.show {
        display: block;
    }

    .product-grid, .products-wrapper, .category-grid,
    .category-sub-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .container-element,
    .element-hero-inner,
    .site-nav,
    .home-section,
    .product-grid, .products-wrapper, .category-grid,
    .category-main-layout,
    .category-quick-filters,
    #breadcrumbs,
    #copyright {
        padding-left: var(--fw-gutter);
        padding-right: var(--fw-gutter);
    }

    .home-section {
        padding-top: 48px;
    }

    /* Only the first topbar item survives on a phone: several items together are wider
       than a phone and wrapped into a multi-line band. Applies to the fallback USPs and
       to a merchant-managed (core) topbar alike. Merchants: put your most important item
       first. */
    .topbar__muted,
    .topbar__right,
    .topbar__inner > *:not(:first-child),
    .topbar__left .topbar__usp:not(:first-child) {
        display: none;
    }

    /* Header collapses to one row + hamburger: logo left, actions right, search on its own row. */
    .site-header__main {
        grid-template-columns: 1fr auto;
        gap: 16px;
    }

    .header-search {
        order: 3;
        grid-column: 1 / -1;
        max-width: none;
    }

    .header-actions .header-link {
        display: none;
    }

    /* Icon-only cart so the row stays roomy and the logo keeps its full width. */
    .header-cart__label {
        display: none;
    }

    .header-cart {
        padding: 8px 12px;
    }

    .nav-toggle {
        display: flex;
    }

    .site-nav {
        display: none;
    }

    .site-nav .site-nav__list.menu-open,
    .site-nav__list.menu-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    /* When the toggle opens the list, reveal the nav wrapper */
    .site-header:has(.site-nav__list.menu-open) .site-nav {
        display: block;
    }

    .site-nav__list.menu-open .nav-link,
    .site-nav__list.menu-open .dropdown {
        width: 100%;
        border-bottom: 1px solid var(--border-color);
    }

    .site-nav__list.menu-open .nav-link a,
    .site-nav__list.menu-open .dropdown > a {
        display: block;
        padding: 0.9rem 0;
        border-bottom: none;
    }

    .dropdown-menu {
        position: static;
        display: none;
        width: 100%;
        box-shadow: none;
        border: none;
        margin: 0;
        padding: 0 0 0.5rem 1rem;
        background: transparent;
    }

    .dropdown.active .dropdown-menu {
        display: block;
    }

    .dropdown:hover .dropdown-menu {
        display: none;
    }

    .dropdown.active:hover .dropdown-menu {
        display: block;
    }

    .hero__title { font-size: 2.25rem; }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .section-head h2,
    .agenda__title,
    .newsletter__title { font-size: 1.75rem; }

    .agenda,
    .newsletter {
        padding: 32px 24px;
    }

    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

}

@media (max-width: 560px) {
    .category-showcase,
    .usp-strip,
    .product-grid, .products-wrapper, .category-grid,
    .category-sub-categories-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================================================================
   Category listing page (Stack)
   ========================================================================= */
.category-page {
    padding-top: 24px;
    padding-bottom: 0;
}

/* Breadcrumb */
.category-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
    font-size: 13px;
    color: var(--subtle-text-color);
}

.category-breadcrumb a {
    color: var(--subtle-text-color);
}

.category-breadcrumb a:hover {
    color: var(--brand-color);
}

.category-breadcrumb__current {
    color: var(--text-color);
}

/* Hero banner */
.category-hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px;
    align-items: center;
    background: var(--accent-surface-color);
    color: var(--accent-surface-text-color);
    border-radius: calc(var(--radius) + 6px);
    padding: 44px 48px;
    margin-top: 16px;
}

.category-hero__title {
    margin: 0;
    font-size: 3rem;
    line-height: 1.05;
}

.category-hero__meta {
    font-size: 16px;
    line-height: 1.55;
    color: color-mix(in srgb, var(--accent-surface-text-color) 78%, transparent);
    margin: 14px 0 0;
    max-width: 460px;
}

.category-hero__quick {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.category-hero__chip {
    background: var(--card-background-color);
    color: var(--text-color);
    font-size: 13.5px;
    font-weight: 700;
    padding: 11px 18px;
    border-radius: var(--button-radius);
    transition: background-color 0.2s, color 0.2s;
}

.category-hero__chip:hover {
    background: var(--text-color);
    color: var(--background-color);
}

/* Two-column layout */
.category-layout {
    display: grid;
    grid-template-columns: 248px 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 36px;
}

.category-sidebar {
    position: sticky;
    top: 150px;
    flex: none;
}

.category-filter-groups {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Filter groups */
.filter-group {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.filter-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.filter-group__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: var(--text-color);
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-chip {
    border: 1px solid var(--input-border-color);
    background: var(--card-background-color);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: calc(var(--radius) - 12px);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.filter-chip:hover {
    border-color: var(--text-color);
    color: var(--text-color);
}

.filter-chip.is-active {
    background: var(--text-color);
    border-color: var(--text-color);
    color: var(--background-color);
}

.filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--muted-text-color);
}

.filter-option:hover {
    color: var(--brand-color);
}

.filter-option__check {
    visibility: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex: none;
}

.filter-option__check svg {
    width: 13px;
    height: 13px;
    fill: var(--brand-color);
}

.filter-option.is-active .filter-option__check {
    visibility: visible;
}

.filter-option.is-active .filter-option__label {
    color: var(--brand-color);
    font-weight: 600;
}

.filter-option__label {
    flex: 1 1 auto;
}

.filter-option__count {
    margin-left: auto;
    color: var(--subtle-text-color);
    font-size: 13px;
}

.filter-option--category {
    gap: 6px;
}

.filter-list--categories .nested-level-1 { padding-left: 0.75rem; }
.filter-list--categories .nested-level-2 { padding-left: 1.5rem; }
.filter-list--categories .nested-level-3 { padding-left: 2.25rem; }

/* Price range slider (two overlaid range inputs, only the thumbs interactive) */
.price-filter__track {
    position: relative;
    height: 15px;
    margin: 6px 6px 12px;
}

.price-filter__track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 6px;
    height: 3px;
    border-radius: var(--button-radius);
    background: var(--border-color);
}

.price-filter__fill {
    position: absolute;
    top: 6px;
    height: 3px;
    border-radius: var(--button-radius);
    background: var(--brand-color);
}

.price-filter__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}

.price-filter__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--brand-color);
    border: 2px solid var(--card-background-color);
    box-shadow: 0 0 0 1px var(--brand-color);
    cursor: pointer;
}

.price-filter__input::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--brand-color);
    border: 2px solid var(--card-background-color);
    box-shadow: 0 0 0 1px var(--brand-color);
    cursor: pointer;
}

.price-filter__input::-webkit-slider-runnable-track {
    background: transparent;
}

.price-filter__input::-moz-range-track {
    background: transparent;
}

.price-filter__input--max {
    z-index: 2;
}

.price-filter__values {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--muted-text-color);
}

/* Content column */
.category-content {
    min-width: 0;
}

.category-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 26px;
}

.category-toolbar__filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.active-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--dark-surface-color);
    color: var(--dark-surface-text-color);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--button-radius);
    transition: filter 0.2s;
}

.active-chip:hover {
    filter: brightness(85%);
    color: var(--dark-surface-text-color);
}

.active-chip__x {
    display: inline-flex;
    opacity: 0.6;
}

.active-chip__x svg {
    width: 10px;
    height: 10px;
    fill: currentColor;
}

.active-chip__clear {
    font-size: 13px;
    font-weight: 600;
    color: var(--subtle-text-color);
}

.active-chip__clear:hover {
    color: var(--brand-color);
}

.category-toolbar__meta {
    display: flex;
    align-items: center;
    gap: 18px;
}

.category-toolbar__count {
    font-size: 13.5px;
    color: var(--muted-text-color);
    white-space: nowrap;
}

.category-sort {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--card-background-color);
    border: 1px solid var(--border-color);
    padding: 9px 16px;
    border-radius: var(--button-radius);
    cursor: pointer;
}

.category-sort__label {
    font-size: 13.5px;
    color: var(--muted-text-color);
}

.category-sort__select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
    outline: none;
    padding: 0 2px 0 0;
}

.category-sort__chevron {
    display: inline-flex;
    pointer-events: none;
}

.category-sort__chevron svg {
    width: 12px;
    height: 12px;
    fill: var(--muted-text-color);
}

/* Product grid inside a category: three across */
.category-products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    max-width: none;
}

/* Sizing-help promo band, spans the whole grid width */
.category-help {
    grid-column: 1 / -1;
    background: var(--accent-surface-color);
    color: var(--accent-surface-text-color);
    border-radius: var(--radius);
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.category-help__title {
    font-size: 18px;
    font-weight: 700;
}

.category-help__text {
    font-size: 14.5px;
    margin-top: 4px;
    color: color-mix(in srgb, var(--accent-surface-text-color) 82%, transparent);
}

.category-empty {
    color: var(--muted-text-color);
    padding: 1rem 0;
}

/* Pagination / load more */
.category-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 44px;
}

.category-pagination__bar {
    width: 220px;
    height: 4px;
    background: var(--border-color);
    border-radius: var(--button-radius);
    overflow: hidden;
}

.category-pagination__bar span {
    display: block;
    height: 100%;
    background: var(--brand-color);
}

.category-pagination__label {
    font-size: 13.5px;
    color: var(--muted-text-color);
}

@media (max-width: 992px) {
    .category-hero {
        grid-template-columns: 1fr;
    }

    .category-hero__quick {
        justify-content: flex-start;
    }

    .category-layout {
        grid-template-columns: 1fr;
        /* Stacked, the 40px column gap turns into a hole between the filter button and
           the toolbar right under it. */
        gap: 24px;
        margin-top: 24px;
    }

    .category-sidebar {
        position: static;
        top: auto;
    }

    .category-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .category-page {
        padding-left: var(--fw-gutter);
        padding-right: var(--fw-gutter);
    }

    .category-hero {
        padding: 32px 24px;
    }

    .category-hero__title {
        font-size: 2.25rem;
    }

    .category-help {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .category-products-grid {
        grid-template-columns: 1fr 1fr;
    }

    .category-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================================================
   FREEWHEEL LAYER
   The sport & outdoor look on top of the shared base above: display typography,
   pill controls, sharper cards and the home sections (.fw-*). Everything stays on the
   merchant's tokens; shades are color-mix() of those tokens.
   ========================================================================= */

/* ---------- Type ---------- */
body {
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    color: inherit;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.02;
    text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; }

p { text-wrap: pretty; }

::selection {
    background: var(--accent-color);
    color: var(--accent-text-color);
}

:focus-visible {
    outline: 2px solid var(--brand-color);
    outline-offset: 3px;
}

.container-element,
.element-hero-inner,
.site-nav {
    padding-left: var(--fw-gutter);
    padding-right: var(--fw-gutter);
}

/* The platform bundle caps every direct child of <main> at the core container width
   (1200px) and pads it; the theme's own page width and gutters apply instead. */
main > .fw-home,
main > .pdp,
main > .category-page {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Page-builder elements that sit directly in <main> get the platform's 1.5rem gutter
   (`main > .container:not(.container-element-columns)` is 0,2,1) or none at all; put them
   on the theme gutter so they line up with the header and the page heads. */
main > :is(.container, .container-element, .text-center, .text-left, .quote, .social-media-buttons, .list-navigation, .element-line):not(.container-element-columns):not(.fw-home) {
    max-width: var(--page-width);
    padding-left: var(--fw-gutter);
    padding-right: var(--fw-gutter);
}

/* `main > .container-element` (platform, 0,1,1) pads page wrappers 1.5rem; keep the
   theme gutter so search, products, tag and 404 line up with the header. */
main > .container-element,
main > .pdp,
main > .category-page {
    max-width: var(--page-width);
    padding-left: var(--fw-gutter);
    padding-right: var(--fw-gutter);
}

/* ---------- Buttons ---------- */
.btn,
.btn-primary,
.fw-btn {
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: var(--button-radius);
    transition: transform 0.18s ease, background-color 0.2s, color 0.2s, box-shadow 0.2s, filter 0.2s;
}

.btn:hover,
.btn-primary:hover,
.fw-btn:hover {
    transform: translateY(-1px);
}

.fw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.85rem 1.6rem;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.3;
}

.fw-btn--lg {
    padding: 1.05rem 1.9rem;
    font-size: 1.02rem;
}

.fw-btn__arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.fw-btn:hover .fw-btn__arrow {
    transform: translateX(4px);
}

.fw-btn--brand,
.fw-btn--brand:hover,
.fw-btn--brand:focus {
    background-color: var(--brand-color);
    color: var(--brand-text-color);
}

.fw-btn--brand:hover {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-color) 35%, transparent);
}

.fw-btn--accent,
.fw-btn--accent:hover,
.fw-btn--accent:focus {
    background-color: var(--accent-color);
    color: var(--accent-text-color);
}

.fw-btn--accent:hover {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.fw-btn--glass,
.fw-btn--glass:hover,
.fw-btn--glass:focus {
    background-color: color-mix(in srgb, var(--dark-surface-text-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--dark-surface-text-color) 35%, transparent);
    color: var(--dark-surface-text-color);
    backdrop-filter: blur(10px);
}

.fw-btn--glass:hover {
    background-color: color-mix(in srgb, var(--dark-surface-text-color) 22%, transparent);
}

/* ---------- Eyebrows, links, heads ---------- */
.fw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-text-color);
}

.fw-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-color);
    flex: none;
}

.fw-eyebrow--accent { color: inherit; opacity: 0.9; }
.fw-eyebrow--accent::before { background: var(--accent-color); }

.fw-eyebrow--pill {
    padding: 0.45rem 0.9rem 0.45rem 0.75rem;
    border-radius: var(--button-radius);
    background: color-mix(in srgb, var(--dark-surface-text-color) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--dark-surface-text-color) 25%, transparent);
    color: var(--dark-surface-text-color);
    backdrop-filter: blur(8px);
}

.fw-eyebrow--pill::before { background: var(--accent-color); }

.fw-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-color);
    white-space: nowrap;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--brand-color);
}

.fw-link-arrow:hover {
    color: var(--brand-color);
}

.fw-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 32px;
}

.fw-head__title {
    margin: 0.6rem 0 0;
    font-family: var(--heading-font);
    font-size: clamp(2rem, 3.6vw, 3.1rem);
}

.fw-head__text {
    margin: 0.75rem 0 0;
    max-width: 560px;
    color: var(--muted-text-color);
}


/* ---------- Top bar & header ---------- */
.topbar {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.site-header {
    border-bottom: 1px solid color-mix(in srgb, var(--header-text-color) 10%, transparent);
    color: var(--header-text-color);
}

.site-header__main,
.site-nav {
    max-width: var(--page-width);
}

.site-header__main {
    gap: 32px;
    padding-top: 16px;
    padding-bottom: 14px;
}

.brand .site-name {
    font-family: var(--heading-font);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--header-text-color);
}

.brand .site-name::after {
    content: "";
    display: inline-block;
    width: 0.32em;
    height: 0.32em;
    margin-left: 0.08em;
    border-radius: 50%;
    background: var(--brand-color);
}

.header-search .sitepack-live-search-input-wrapper {
    background: color-mix(in srgb, var(--header-text-color) 6%, var(--header-background-color));
    border-color: transparent;
    padding: 12px 20px;
}

.header-search .sitepack-live-search-input-wrapper:focus-within {
    background: var(--card-background-color);
    border-color: var(--brand-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-color) 15%, transparent);
}

.header-actions .header-link:hover {
    background: color-mix(in srgb, var(--header-text-color) 7%, transparent);
}

.header-cart {
    background: var(--header-text-color);
    color: var(--header-background-color);
}

.header-cart:hover {
    background-color: var(--brand-color);
}

.header-cart .nav-icon,
.header-cart .sitepack-shopping-cart-trigger,
.header-cart svg {
    color: inherit;
}

.header-cart .sitepack-shopping-cart-container .sitepack-shopping-cart-trigger .sitepack-cart-count {
    background: var(--accent-color);
    color: var(--accent-text-color);
    font-weight: 700;
}

.site-nav {
    padding-bottom: 0;
}

.site-nav__list {
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.site-nav .site-nav__list > li > a {
    color: var(--header-text-color);
    padding: 12px 12px 14px;
    border-bottom: 3px solid transparent;
}

.site-nav__list > li:first-child > a {
    padding-left: 0;
}

/* Only the top-level links get the underline: dropdown children sit inside .nav-link too,
   and the base rule's border-bottom would otherwise paint under every child. */
.site-nav .site-nav__list > li > a:hover,
.site-nav .site-nav__list > li:hover > a,
.site-nav .site-nav__list > li.active > a,
.site-nav .site-nav__list > li > a.active {
    color: var(--header-text-color);
    border-bottom-color: var(--brand-color);
}

.site-nav__list .nav-link a.btn {
    color: var(--header-text-color);
    padding: 12px 0 14px;
    font-weight: 700;
}

/* Dropdown flush under the menu row (no gap, so it stays open while the pointer moves
   into it); the children are plain rows with a soft hover surface. */
@media (min-width: 769px) {
    .site-nav__list .dropdown-menu {
        top: 100%;
        margin: 0;
        min-width: 220px;
        padding: 0.5rem;
        border: 0;
        border-radius: var(--radius);
        background: var(--card-background-color);
        box-shadow: 0 24px 60px color-mix(in srgb, var(--shadow-color) 16%, transparent);
    }
}

.site-nav__list .dropdown-menu li a {
    display: block;
    padding: 0.6rem 0.9rem;
    border: 0;
    border-radius: calc(var(--radius) * 0.5);
    color: var(--text-color);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.site-nav__list .dropdown-menu li a:hover,
.site-nav__list .dropdown-menu li a:focus-visible {
    background: var(--surface-color);
    color: var(--brand-color);
}

/* ---------- Contact form (core module, page-builder "contact" element) ----------
   Core renders `<form action="/modules/contact-form">` (or the Vue variant inside
   .container-contact-form-v2) with .form-group / label / .form-control, a hidden
   honeypot group and .alert messages. Freewheel look: two columns, bold labels, filled
   rounded fields with a brand focus ring, a pill button. */
:is(form[action*="contact-form"], .container-contact-form-v2 form) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    max-width: 820px;
    margin: 0;
}

:is(form[action*="contact-form"], .container-contact-form-v2 form) .form-group {
    margin: 0;
}

:is(form[action*="contact-form"], .container-contact-form-v2 form) .form-group:has(textarea),
:is(form[action*="contact-form"], .container-contact-form-v2 form) .alert,
:is(form[action*="contact-form"], .container-contact-form-v2 form) > .btn {
    grid-column: 1 / -1;
}

:is(form[action*="contact-form"], .container-contact-form-v2 form) label {
    display: block;
    margin: 0 0 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-color);
}

:is(form[action*="contact-form"], .container-contact-form-v2 form) .form-control {
    width: 100%;
    height: auto;
    min-height: 52px;
    padding: 12px 16px;
    border: 1.5px solid var(--input-border-color);
    border-radius: calc(var(--radius) * 0.6);
    background: var(--input-background-color);
    box-shadow: none;
    color: var(--text-color);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

:is(form[action*="contact-form"], .container-contact-form-v2 form) .form-control:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-color) 18%, transparent);
    outline: none;
}

:is(form[action*="contact-form"], .container-contact-form-v2 form) textarea.form-control {
    min-height: 160px;
}

:is(form[action*="contact-form"], .container-contact-form-v2 form) > .btn {
    justify-self: start;
    min-height: 54px;
    padding: 0.95rem 2.2rem;
    border: 0;
    border-radius: var(--button-radius);
    background: var(--brand-color);
    color: var(--brand-text-color);
    font-size: 1rem;
    font-weight: 700;
}

:is(form[action*="contact-form"], .container-contact-form-v2 form) > .btn:hover {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-color) 35%, transparent);
    transform: translateY(-1px);
}

:is(form[action*="contact-form"], .container-contact-form-v2 form) > .btn[disabled] {
    background: var(--disabled-color);
    color: var(--text-color);
    box-shadow: none;
    transform: none;
}

/* Form messages (the contact form prepends them; other platform forms use them too). */
.container-element .alert,
:is(form[action*="contact-form"], .container-contact-form-v2 form) .alert {
    margin: 0;
    padding: 14px 18px;
    border: 0;
    border-radius: calc(var(--radius) * 0.6);
    font-size: 0.95rem;
    font-weight: 600;
}

.container-element .alert-success {
    background: color-mix(in srgb, var(--success-color) 14%, transparent);
    color: var(--success-color);
}

.container-element .alert-danger {
    background: color-mix(in srgb, var(--stock-error-color) 12%, transparent);
    color: var(--stock-error-color);
}

@media (max-width: 640px) {
    :is(form[action*="contact-form"], .container-contact-form-v2 form) {
        grid-template-columns: 1fr;
    }

    :is(form[action*="contact-form"], .container-contact-form-v2 form) > .btn {
        justify-self: stretch;
    }
}

/* ---------- Live search results ----------
   The widget's own rules are 0,2,0–0,5,0 with fixed greys and white; the .header-search
   prefix outranks them so the dropdown follows the theme. */
.header-search .sitepack-live-search-container .sitepack-live-search-results-dropdown {
    margin-top: 8px;
    padding: 6px;
    min-width: 340px;
    max-height: min(460px, 70vh);
    border: 0;
    border-radius: var(--radius);
    background: var(--card-background-color);
    color: var(--text-color);
    box-shadow: 0 24px 60px color-mix(in srgb, var(--shadow-color) 16%, transparent);
}

.header-search .sitepack-live-search-container .sitepack-live-search-results-dropdown .sitepack-live-search-result-item {
    gap: 14px;
    padding: 8px 10px;
    border-bottom: 0;
    border-radius: calc(var(--radius) * 0.5);
    color: var(--text-color);
}

.header-search .sitepack-live-search-container .sitepack-live-search-results-dropdown .sitepack-live-search-result-item:hover {
    background-color: var(--surface-color);
}

.header-search .sitepack-live-search-container .sitepack-live-search-results-dropdown .sitepack-live-search-result-image {
    flex: none;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: calc(var(--radius) * 0.5);
    background: var(--image-background-color);
}

.header-search .sitepack-live-search-container .sitepack-live-search-results-dropdown .sitepack-live-search-result-info .sitepack-live-search-result-title {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
}

.header-search .sitepack-live-search-container .sitepack-live-search-results-dropdown .sitepack-live-search-result-info .sitepack-live-search-result-price {
    display: block;
    margin-top: 2px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--brand-color);
}

.header-search .sitepack-live-search-container .sitepack-live-search-results-dropdown .sitepack-live-search-no-results,
.header-search .sitepack-live-search-container .sitepack-live-search-results-dropdown .sitepack-live-search-loading {
    padding: 18px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--muted-text-color);
}

@media (max-width: 768px) {
    .header-search .sitepack-live-search-container .sitepack-live-search-results-dropdown {
        min-width: 0;
    }
}

/* ---------- Product cards ---------- */
.product-grid,
.products-wrapper {
    gap: 28px 20px;
}

.product-card {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.product-card .product-image {
    border-radius: var(--radius);
    background: var(--image-background-color);
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.product-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(.2, .7, .2, 1);
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.product-badge,
.product-badge--sale {
    top: 12px;
    left: 12px;
    border-radius: var(--button-radius);
    background: var(--label-background-color);
    color: var(--label-text-color);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.3rem 0.7rem;
}

.product-information {
    padding: 14px 4px 0;
}

.product-meta {
    order: -1;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-text-color);
}

.product-title h3 {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--text-color);
}

.product-price .new-price {
    font-weight: 700;
    color: var(--text-color);
}

.product-price .new-price.is-promo {
    color: var(--promo-price-color);
}

/* ---------- Category cards (products page, page-builder) ---------- */
.category-card {
    border-radius: var(--radius);
}

.category-card__title {
    font-family: var(--heading-font);
    font-weight: 700;
    letter-spacing: -0.02em;
}


/* ---------- Page-builder grid ----------
   The platform still emits Bootstrap container/row/col markup for columns, stats, steps
   and similar elements but ships a table-based .row with clearfix pseudo elements. A
   flex grid replaces it so columns line up with the theme's gutters. */
.row {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    margin-left: -14px !important;
    margin-right: -14px !important;
}

.row::before,
.row::after {
    display: none;
}

.row > .col,
.row > [class*="col-"] {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 14px;
    padding-right: 14px;
    float: none;
}

.row > .col-sm-12, .row > .col-md-12, .row > .col-lg-12 { flex: 0 0 100%; }

@media (min-width: 769px) {
    .row > .col-md-2, .row > .col-lg-2 { flex: 0 0 16.6667%; }
    .row > .col-md-3, .row > .col-lg-3 { flex: 0 0 25%; }
    .row > .col-md-4, .row > .col-lg-4 { flex: 0 0 33.3333%; }
    .row > .col-md-6, .row > .col-lg-6 { flex: 0 0 50%; }
    .row > .col-md-8, .row > .col-lg-8 { flex: 0 0 66.6667%; }
    .row > .col-md-9, .row > .col-lg-9 { flex: 0 0 75%; }
}

@media (max-width: 768px) {
    .row > .col,
.row > [class*="col-"] { flex: 0 0 100%; }
}

/* Element wrappers the platform emits around columns, stats, steps and the footer. */
.container {
    width: 100%;
    max-width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--fw-gutter);
    padding-right: var(--fw-gutter);
}

.container-fluid {
    width: 100%;
}

/* The platform bundle centres every <ul> with `margin: 0 auto !important`, which pushed
   the menu in from the logo's left edge. */
.site-nav .site-nav__list {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    max-width: none;
}

/* Core pins --main-color, --secondary-color, --border-radius and --container-width to its
   own defaults for custom themes, and the platform's widgets (cart drawer, variant chips,
   cookie bar, mega menu, element buttons) paint with them. Point those core variables at
   the theme's own merchant-editable tokens so every widget follows the Freewheel palette.
   `html:root` outranks the platform's plain `:root` block. */
html:root {
    --main-color: var(--brand-color);
    --main-color-text: var(--brand-text-color);
    --secondary-color: var(--accent-color);
    --secondary-color-text: var(--accent-text-color);
    --link-color: var(--anchor-color);
    --link-active-color: var(--anchor-hover-color);
    --border-radius: var(--radius);
    --container-width: var(--page-width);
}

/* ---------- Page heads (products, search) ---------- */
.fw-page-head.fw-page-head {
    padding-top: 48px;
    padding-bottom: 28px;
}

.fw-page-head__title {
    margin: 0.6rem 0 0;
    font-family: var(--heading-font);
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.fw-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: var(--button-radius);
    background: var(--accent-color);
    color: var(--accent-text-color);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fw-chip:hover {
    color: var(--accent-text-color);
    filter: brightness(95%);
}

.fw-btn--ghost,
.fw-btn--ghost:hover {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-color);
}

.fw-btn--ghost:hover {
    border-color: var(--text-color);
}

/* ---------- Search ---------- */
.search-results__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 28px 20px;
}

.search-result {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.search-result__image {
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--image-background-color);
    margin-bottom: 0.5rem;
}

.search-result__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(.2, .7, .2, 1);
}

.search-result:hover .search-result__image img {
    transform: scale(1.05);
}

.search-result__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.search-result__title a {
    color: var(--text-color);
}

.search-result__description {
    margin: 0;
    font-size: 0.88rem;
    color: var(--muted-text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result__price {
    margin: 0;
    font-weight: 700;
}

/* ---------- Blog post ---------- */
.fw-article {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 56px var(--fw-gutter) 0;
}

.fw-article__head {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.fw-article__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.fw-article__title {
    margin: 1.25rem 0 0;
    font-family: var(--heading-font);
    font-size: clamp(2.4rem, 5.4vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.fw-article__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 1.5rem 0 0;
    color: var(--muted-text-color);
    font-size: 0.92rem;
    font-weight: 600;
}

.fw-article__avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--dark-surface-color);
    color: var(--dark-surface-text-color);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.fw-article__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.fw-article__image {
    margin: 44px 0 0;
    border-radius: calc(var(--radius) * 1.4);
    overflow: hidden;
    aspect-ratio: 21 / 9;
    background: var(--image-background-color);
}

.fw-article__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fw-article__body {
    max-width: 760px;
    margin: 48px auto 0;
    font-size: 1.08rem;
    line-height: 1.75;
}

.fw-article__body .container-element {
    padding-left: 0;
    padding-right: 0;
}

.fw-article__pager {
    max-width: 760px;
    margin: 56px auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.fw-article__pager a:only-child {
    margin-left: auto;
}

/* ---------- Tag overview ---------- */
.fw-story__more {
    justify-self: start;
    margin-top: 0.35rem;
    font-size: 0.88rem;
}

/* ---------- 404 ---------- */
.fw-404 {
    position: relative;
    min-height: min(62vh, 620px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: 64px;
    padding-bottom: 64px;
    overflow: hidden;
}

.fw-404__code {
    position: absolute;
    right: var(--fw-gutter);
    bottom: -0.12em;
    font-family: var(--heading-font);
    font-size: clamp(10rem, 30vw, 26rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.06em;
    color: var(--accent-color);
    opacity: 0.55;
    z-index: -1;
    pointer-events: none;
}

.fw-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 2rem;
}

/* ---------- Sitemap ---------- */
.sitemap {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 48px var(--fw-gutter) 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
}

/* In the grid every section is a cell; the base rules' page-width margins and 40px
   padding pushed each column in by a different amount on phones. */
.sitemap section,
.sitemap > h1 {
    max-width: none;
    margin: 0;
    padding: 0;
}

.sitemap h1 {
    grid-column: 1 / -1;
    margin: 0;
    font-family: var(--heading-font);
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.sitemap h2 {
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-text-color);
    border-bottom: 2px solid var(--brand-color);
    padding-bottom: 0.6rem;
}

.sitemap ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.sitemap a {
    color: var(--text-color);
}

.sitemap a:hover {
    color: var(--brand-color);
}

/* The section already carries the gutter; the shared grid's own padding would indent the
   cards past the section heading. */
.fw-section .product-grid {
    padding: 0;
    margin: 0;
    max-width: none;
}

/* Column elements (footer and page-builder) carry `.container-element-columns`, which the
   platform resets to no padding; give them the theme gutter so they align with the page. */
.container.container-element-columns,
.container-element-background .container.container-element-columns {
    padding-left: var(--fw-gutter);
    padding-right: var(--fw-gutter);
}

/* The platform pads custom-theme columns 15px but zeroes the first one
   (`.container-element-columns.container-custom-theme .col:first-child`), which put the first
   column half a gutter outside the page line. Same padding on every column instead. */
@media (min-width: 768px) {
    .container.container-element-columns.container-custom-theme > .row > .col,
    .container.container-element-columns.container-custom-theme > .row > [class*="col-"] {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* =========================================================================
   Footer
   The footer is the merchant's footer elements (Instellingen > Footer). Every colour —
   backgrounds, headings, text, links, icons — comes from that editor, so the theme only
   shapes it: rhythm, type, list and link behaviour, rounded top. No colour is set here;
   lines and hovers derive from currentColor.
   ========================================================================= */
footer {
    margin-top: var(--section-spacing);
    border-radius: calc(var(--radius) * 1.6) calc(var(--radius) * 1.6) 0 0;
    overflow: hidden;
}

footer a {
    color: inherit;
}

footer .container-element-columns > .row {
    padding-top: clamp(28px, 3.5vw, 48px);
    padding-bottom: clamp(32px, 4vw, 56px);
    row-gap: 36px;
}

footer .container-element-heading h1,
footer .container-element-heading h2,
footer .container-element-heading h3,
footer .container-element-heading h4 {
    margin: 0 0 1.1rem;
    font-family: var(--heading-font);
    font-size: 0.8rem;
    line-height: 1.3;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.72;
}

footer .container-element {
    padding-left: 0;
    padding-right: 0;
}

footer .container-element + .container-element {
    margin-top: 0;
}

/* Contact / opening-times block */
footer .container-element-opening-times h5 {
    margin: 0 0 0.6rem;
    font-family: var(--heading-font);
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

footer .container-element-opening-times p {
    margin: 0 0 0.85rem;
    line-height: 1.7;
}

/* Navigation lists */
footer .list-navigation {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

footer .navigation-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

footer .navigation-link:hover,
footer .container-element-opening-times a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

footer .navigation-link:hover {
    transform: translateX(3px);
}

/* USP lists */
footer .list-usp {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

footer .list-usp .navigation-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

footer .usp-icon {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    flex: none;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 10%, transparent);
}

/* Images and social links inside footer columns */
footer img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

footer .social-media-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* A thin divider between stacked footer blocks, in the text colour of the footer. */
footer .container-element-background + .container-element-background .container-element-columns > .row {
    border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

#copyright {
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

@media (max-width: 768px) {
    footer {
        border-radius: var(--radius) var(--radius) 0 0;
    }

    footer .container-element-columns > .row {
        row-gap: 28px;
    }
}

/* =========================================================================
   Cookie bar (sitepack_cookies)
   The platform renders the markup and toggles it with inline `display`; the theme only
   restyles it as a floating dark panel: display heading, options as pill chips, accent CTA.
   ========================================================================= */
.sitepack-cookiebar {
    position: fixed;
    left: 20px;
    right: auto;
    bottom: 20px;
    z-index: 2000;
    width: min(460px, calc(100vw - 40px));
    max-width: none;
    margin: 0;
    padding: 26px 26px 22px;
    border: 1px solid color-mix(in srgb, var(--dark-surface-text-color) 10%, transparent);
    border-radius: calc(var(--radius) * 1.2);
    background: var(--dark-surface-color);
    color: var(--dark-surface-text-color);
    box-shadow: 0 30px 80px color-mix(in srgb, var(--shadow-color) 35%, transparent);
    animation: fw-cookie-in 0.5s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes fw-cookie-in {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

.sitepack-cookiebar .sitepack-cookiebar-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.75rem;
    font-family: var(--heading-font);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--dark-surface-text-color);
}

.sitepack-cookiebar .sitepack-cookiebar-title::before {
    content: "";
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    background: var(--accent-color);
}

.sitepack-cookiebar p {
    margin: 0 0 1.1rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--dark-surface-text-color) 72%, transparent);
}

.sitepack-cookiebar .cookie-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 1.25rem;
}

.sitepack-cookiebar .cookie-options label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.45rem 0.85rem 0.45rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--dark-surface-text-color) 22%, transparent);
    border-radius: var(--button-radius);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--dark-surface-text-color);
    cursor: pointer;
    transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}

.sitepack-cookiebar .cookie-options label:hover {
    border-color: color-mix(in srgb, var(--dark-surface-text-color) 45%, transparent);
}

.sitepack-cookiebar .cookie-options label:has(input:checked) {
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    border-color: var(--accent-color);
}

.sitepack-cookiebar .cookie-options label.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* A round check in the accent colour instead of the native square. */
.sitepack-cookiebar .cookie-options label input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin: 0;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--dark-surface-text-color) 45%, transparent);
    background: transparent;
    cursor: inherit;
}

.sitepack-cookiebar .cookie-options label input[type=checkbox]:checked {
    border-color: var(--accent-color);
    background: var(--accent-color);
}

.sitepack-cookiebar .cookie-options label input[type=checkbox]:checked::after {
    content: "";
    width: 4px;
    height: 7px;
    margin-top: -2px;
    border: solid var(--accent-text-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.sitepack-cookiebar .cookie-actions {
    display: flex;
    gap: 8px;
    justify-content: stretch;
}

.sitepack-cookiebar .cookie-actions .btn {
    flex: 1 1 0;
    padding: 0.8rem 1rem;
    border-radius: var(--button-radius);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}

.sitepack-cookiebar .cookie-actions .btn-default,
.sitepack-cookiebar .cookie-actions .btn-default:hover {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--dark-surface-text-color) 30%, transparent);
    color: var(--dark-surface-text-color);
}

.sitepack-cookiebar .cookie-actions .btn-default:hover {
    border-color: var(--dark-surface-text-color);
}

.sitepack-cookiebar .cookie-actions .btn-success,
.sitepack-cookiebar .cookie-actions .btn-success:hover {
    background: var(--accent-color);
    border: 1px solid var(--accent-color);
    color: var(--accent-text-color);
    filter: none;
}

.sitepack-cookiebar .cookie-actions .btn-success:hover {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

@media (max-width: 767px) {
    .sitepack-cookiebar {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        border-radius: calc(var(--radius) * 1.2) calc(var(--radius) * 1.2) 0 0;
        padding: 22px 18px 18px;
    }
}

@media (max-width: 420px) {
    .sitepack-cookiebar .cookie-actions {
        flex-direction: column-reverse;
    }
}

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

/* =========================================================================
   Mobile polish (≤ 768px)
   ========================================================================= */
@media (max-width: 768px) {
    /* Page heads and article */
    .fw-page-head.fw-page-head {
        padding-top: 28px;
        padding-bottom: 20px;
    }

    .fw-article {
        padding-top: 28px;
    }

    .fw-article__image {
        margin-top: 28px;
        aspect-ratio: 4 / 3;
    }

    .fw-article__body {
        margin-top: 28px;
        font-size: 1rem;
    }
}

/* Category and product titles in the theme's display voice. */
.category-hero__title {
    font-family: var(--heading-font);
    letter-spacing: -0.02em;
}

@media (max-width: 768px) {
    .search-results__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 14px;
    }

    .search-result__title {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .category-card__arrow {
        display: none;
    }
}

/* ---------- Landing page in the Freewheel voice ---------- */
.landing-hero__title {
    font-family: var(--heading-font);
    font-size: clamp(2.4rem, 5.4vw, 4.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.landing-hero__sub-head {
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.landing-hero__image img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: calc(var(--radius) * 1.4);
}

.landing-usps {
    padding-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .landing-hero {
        padding: 1.75rem 0 2.5rem;
    }

    .landing-hero__inner {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 1.5rem;
    }

    .landing-hero__content .btn-primary {
        display: flex;
        width: 100%;
    }
}

/* On small screens the platform forces `.container-custom-theme .row .col { padding: 0
   !important }`; drop the row's negative gutter there too so text keeps the page gutter. */
@media (max-width: 767px) {
    .container-custom-theme > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* =========================================================================
   Page-builder elements in the Freewheel voice
   Colours arrive inline from each element's own settings and are left alone; the theme
   shapes them: display headings, pills, rounded cards, rhythm and hover states.
   ========================================================================= */

/* ---------- Hero & CTA banner: inset rounded panels with display type ---------- */
main > .element-hero,
main > .element-cta-banner,
.element-hero,
.element-cta-banner {
    width: calc(100% - 2 * clamp(10px, 1.4vw, 20px));
    max-width: calc(var(--page-width) + 2 * var(--fw-gutter));
    margin: 16px auto 0;
    border-radius: calc(var(--radius) * 1.4);
    overflow: hidden;
}

.element-hero-inner {
    padding-top: clamp(56px, 8vw, 112px);
    padding-bottom: clamp(56px, 8vw, 112px);
}

.element-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--button-radius);
    background: color-mix(in srgb, currentColor 14%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.element-hero-title,
.element-cta-banner-title {
    margin: 1.1rem 0 0;
    font-family: var(--heading-font);
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-transform: none;
}

.element-cta-banner-title {
    margin-top: 0;
    font-size: clamp(2rem, 4.4vw, 3.6rem);
}

.element-hero-subtitle,
.element-cta-banner-description {
    margin: 1.25rem auto 0;
    max-width: 620px;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    opacity: 0.88;
}

.element-hero-actions {
    gap: 12px;
    margin-top: 2rem;
}

.element-hero .btn,
.element-cta-banner .btn,
.container-element-button .btn {
    border-radius: var(--button-radius);
    padding: 1rem 1.9rem;
    font-weight: 700;
}

.element-cta-banner-inner {
    padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px);
    gap: 24px;
}

/* ---------- Badge ---------- */
.element-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.element-badge-pill {
    border-radius: var(--button-radius);
}

/* ---------- Image ---------- */
main .content-image-responsive {
    border-radius: var(--radius) !important;
}

/* ---------- Quote ---------- */
.quote blockquote {
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    font-family: var(--heading-font);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.quote blockquote small {
    display: block;
    margin-top: 1rem;
    font-family: inherit;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.quote blockquote i {
    font-size: 0.7em;
    opacity: 0.35;
}

/* ---------- USP list (horizontal) ---------- */
.list-usp-horizontal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
}

.list-usp .usp-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

/* ---------- Feature grid ---------- */
.element-feature-grid {
    gap: 16px;
}

.element-feature-card {
    padding: 32px 28px;
    border-radius: var(--radius);
    transition: transform 0.25s cubic-bezier(.2, .7, .2, 1), box-shadow 0.25s;
}

.element-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px color-mix(in srgb, var(--shadow-color) 12%, transparent);
}

.element-feature-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1.1rem;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 12%, transparent);
    font-size: 1.3rem;
}

.element-feature-title {
    margin: 0 0 0.5rem;
    font-family: var(--heading-font);
    font-size: 1.3rem;
    letter-spacing: -0.02em;
}

/* ---------- Stats ---------- */
.element-stat-value {
    font-family: var(--heading-font);
    font-size: clamp(2.4rem, 4.4vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.045em;
}

.element-stat-label {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ---------- Steps ---------- */
.element-step-number {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 50%;
    font-family: var(--heading-font);
    font-size: 1.15rem;
    font-weight: 700;
}

.element-step-title {
    margin: 0.9rem 0 0.35rem;
    font-family: var(--heading-font);
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

/* ---------- Alert ---------- */
.element-alert {
    border-radius: var(--radius);
    padding: 18px 22px;
    gap: 14px;
}

.element-alert-title {
    font-family: var(--heading-font);
}

/* ---------- Accordion & FAQ ---------- */
.element-accordion {
    display: grid;
    gap: 10px;
}

.element-accordion-item {
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.element-accordion-item[open] {
    box-shadow: 0 16px 40px color-mix(in srgb, var(--shadow-color) 8%, transparent);
}

.element-accordion-summary {
    padding: 20px 24px;
    font-family: var(--heading-font);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
}

.element-accordion-content {
    padding: 0 24px 22px;
}

.container-element-faq .btn-faq {
    width: 100%;
    padding: 18px 22px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-background-color);
    font-family: var(--heading-font);
    font-weight: 700;
    text-align: left;
}

/* ---------- Testimonial ---------- */
.element-testimonial {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 48px);
    border-radius: calc(var(--radius) * 1.2);
}

.element-testimonial-rating {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 1rem;
}

.element-testimonial-quote {
    margin: 0;
    border: 0;
    padding: 0;
    font-family: var(--heading-font);
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.element-testimonial-author {
    margin-top: 1.25rem;
}

.element-testimonial-job {
    display: block;
    font-size: 0.85rem;
    opacity: 0.7;
}

/* ---------- Tables & price list ---------- */
.element-table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.element-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.element-table th {
    padding: 14px 18px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: left;
    text-transform: uppercase;
}

.element-table td {
    padding: 14px 18px;
}

.table-pricelist .item-title {
    font-family: var(--heading-font);
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

.table-pricelist .item-price {
    font-family: var(--heading-font);
    font-size: 1.15rem;
    white-space: nowrap;
}

.table-pricelist .item-description {
    font-size: 0.9rem;
    opacity: 0.75;
}

.table-pricelist td {
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed color-mix(in srgb, currentColor 18%, transparent);
}

/* ---------- Opening times (stand-alone element) ---------- */
/* The platform boxes this element (`main .container-element-opening-times`, padding
   !important) edge to edge; keep the box on the page line and in the theme's lines. */
main > .container-element-opening-times {
    width: calc(100% - 2 * var(--fw-gutter));
    max-width: calc(var(--page-width) - 2 * var(--fw-gutter));
    margin-left: auto;
    margin-right: auto;
    border-color: var(--border-color);
    border-radius: var(--radius);
    box-shadow: none;
}

.container-element.container-element-opening-times > div:has(> strong) {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    max-width: 420px;
    padding: 0.4rem 0;
    border-bottom: 1px dashed color-mix(in srgb, currentColor 18%, transparent);
}

/* ---------- Social buttons ---------- */
.social-media-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.social-media-buttons .social-media-item {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    font-size: 1.15rem;
    transition: transform 0.18s ease, border-color 0.18s;
}

.social-media-buttons .social-media-item:hover {
    transform: translateY(-2px);
    border-color: currentColor;
}

/* ---------- Navigation list & icon ---------- */
.container-element-navigation .navigation-link {
    font-weight: 600;
}

.container-element-navigation .navigation-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.icon-without-background .element-icon {
    font-size: 2rem;
}

/* ---------- Line ---------- */
.element-line {
    height: 1px;
    max-width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .element-feature-grid,
    .element-stats,
    .element-steps-horizontal {
        grid-template-columns: 1fr !important;
    }

    .element-cta-banner-inner {
        flex-direction: column;
        text-align: center;
    }

    .element-hero-actions .btn {
        flex: 1 1 100%;
    }
}

/* Room around the full-width banners so they never touch the element above. */
main > .element-cta-banner,
.element-cta-banner {
    margin-top: clamp(32px, 4vw, 56px);
    margin-bottom: clamp(16px, 2vw, 24px);
}

main > .element-hero ~ .element-hero,
main > * + .element-hero {
    margin-top: clamp(32px, 4vw, 56px);
}

@media (max-width: 768px) {
    .element-step-title {
        margin-top: 0.4rem;
    }
}

/* Blog post page background (merchant setting). */
main:has(> .fw-article) {
    background-color: var(--blog-background-color);
}

/* =========================================================================
   FREEWHEEL LOOK
   The friendly local-dealer layer on top of the shared base: rounded sans type in sentence
   case, rounded-rectangle buttons, a two-tier service header, workshop tags (a repair
   ticket with a punched hole and a string) and a dashed route line. Every colour is a
   merchant token; shades are color-mix() of those tokens.
   ========================================================================= */

/* ---------- Type ---------- */
h1, h2, h3, h4 {
    letter-spacing: -0.02em;
    line-height: 1.12;
    text-transform: none;
}

.site-nav__list,
.brand .site-name,
.fw-page-head__title,
.sitemap h1,
.sitemap h2,
.sitepack-cookiebar .sitepack-cookiebar-title,
.element-cta-banner-title {
    text-transform: none;
    letter-spacing: -0.01em;
}

.fw-lead {
    margin: 0.9rem 0 0;
    max-width: 560px;
    font-size: 1.06rem;
    color: var(--muted-text-color);
}

/* ---------- Buttons ---------- */
.fw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.75rem 1.35rem;
    border: 2px solid transparent;
    border-radius: var(--button-radius);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.18s;
}

.fw-btn:hover { transform: translateY(-1px); }

.fw-btn svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    flex: none;
}

.fw-btn--brand,
.fw-btn--brand:hover,
.fw-btn--brand:focus {
    background: var(--brand-color);
    color: var(--brand-text-color);
}

.fw-btn--brand:hover { background: color-mix(in srgb, var(--brand-color) 86%, var(--shadow-color)); }

.fw-btn--accent,
.fw-btn--accent:hover,
.fw-btn--accent:focus {
    background: var(--accent-color);
    color: var(--accent-text-color);
}

.fw-btn--accent:hover { background: color-mix(in srgb, var(--accent-color) 86%, var(--shadow-color)); }

.fw-btn--outline,
.fw-btn--outline:hover,
.fw-btn--outline:focus {
    background: transparent;
    border-color: currentColor;
    color: var(--brand-color);
}

.fw-btn--outline:hover { background: color-mix(in srgb, var(--brand-color) 8%, transparent); }

.fw-btn--light,
.fw-btn--light:hover,
.fw-btn--light:focus {
    background: var(--lease-text-color);
    color: var(--lease-background-color);
}

.fw-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

/* ---------- Eyebrows, links, heads ---------- */
.fw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
}

.fw-eyebrow::before { display: none; }

.fw-eyebrow svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    flex: none;
}

.fw-eyebrow--on-brand {
    color: inherit;
    opacity: 0.82;
}

.fw-link-arrow,
.fw-link-arrow:hover {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    border: 0;
    font-weight: 700;
    color: var(--anchor-color);
    white-space: nowrap;
}

.fw-link-arrow svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    transition: transform 0.2s;
}

.fw-link-arrow:hover svg { transform: translateX(3px); }

.fw-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 32px;
}

.fw-head__title {
    margin: 0.45rem 0 0;
    font-family: var(--heading-font);
    font-size: clamp(1.85rem, 3.2vw, 2.6rem);
}

.fw-head__text {
    margin: 0.6rem 0 0;
    color: var(--muted-text-color);
}

.fw-round-arrow {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-color);
    color: var(--brand-text-color);
    flex: none;
    transition: transform 0.2s;
}

.fw-round-arrow svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ---------- Signature: the workshop tag ----------
   A card with a punched hole on the left and a short string running out of it. */
.fw-tag {
    position: relative;
    display: block;
    padding: 16px 18px 16px 46px;
    border-radius: calc(var(--radius) * 0.85);
    background: var(--card-background-color);
    color: var(--text-color);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--shadow-color) 14%, transparent);
}

.fw-tag::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--surface-color);
    box-shadow: inset 0 0 0 2px var(--border-color);
}

.fw-tag::after {
    content: "";
    position: absolute;
    left: -24px;
    top: calc(50% - 1px);
    width: 48px;
    height: 2px;
    background: color-mix(in srgb, var(--muted-text-color) 45%, transparent);
    transform: rotate(-18deg);
    transform-origin: right center;
}

/* ---------- Open-now status ---------- */
.fw-open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    white-space: nowrap;
}

.fw-open[hidden] { display: none; }

.fw-open__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
    flex: none;
}

.fw-open--open .fw-open__dot {
    background: var(--open-color);
    opacity: 1;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--open-color) 30%, transparent);
}

/* ---------- Top bar ---------- */
.topbar {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
}

.topbar__inner {
    max-width: var(--page-width);
    padding-top: 9px;
    padding-bottom: 9px;
    gap: 24px;
}

.topbar__core { flex: 1; min-width: 0; }

.topbar__status { flex: none; }

.topbar__core + .topbar__status {
    padding-left: 24px;
    border-left: 1px solid color-mix(in srgb, var(--header-topbar-text-color) 30%, transparent);
}

.topbar-standard__contact { opacity: 1; }

.topbar a,
.topbar a:hover { color: var(--header-topbar-text-color); }

/* ---------- Header: logo · menu · icons, all in one row ---------- */
.site-header {
    border-bottom: 1px solid var(--border-color);
    color: var(--header-text-color);
}

.site-header__main {
    display: flex;
    align-items: center;
    gap: 28px;
    max-width: var(--page-width);
    min-height: 80px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.brand {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.brand img { height: 44px; }

.brand .site-name {
    font-family: var(--heading-font);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--brand-color);
    white-space: nowrap;
}

.brand .site-name::after { display: none; }

.brand img + .site-name { display: none; }

.site-header .site-nav {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    max-width: none;
}

.site-header .site-nav__list {
    flex-wrap: nowrap;
    gap: 4px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
}

.site-nav .site-nav__list > li > a,
.site-nav .site-nav__list > li:first-child > a {
    padding: 10px 12px;
    border: 0;
    border-radius: var(--button-radius);
    color: var(--header-text-color);
    white-space: nowrap;
}

.site-nav .site-nav__list > li > a:hover,
.site-nav .site-nav__list > li:hover > a,
.site-nav .site-nav__list > li.active > a,
.site-nav .site-nav__list > li > a.active {
    color: var(--brand-color);
    background: var(--surface-color);
    border: 0;
}

/* The menu item the merchant set as a button ("Book a service") is the accent button at the
   end of the row. */
.site-nav__list .nav-link:has(a.btn) { margin-left: auto; }

.site-nav .site-nav__list > li > a.btn,
.site-nav .site-nav__list > li > a.btn:hover,
.site-nav .site-nav__list > li > a.btn:focus,
.fw-mobile-cta a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.6rem 1.2rem;
    border: 0;
    border-radius: var(--button-radius);
    background: var(--accent-color);
    color: var(--accent-text-color);
    font-weight: 700;
    text-transform: none;
}

.site-nav .site-nav__list > li > a.btn:hover,
.fw-mobile-cta a.btn:hover {
    background: color-mix(in srgb, var(--accent-color) 86%, var(--shadow-color));
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.site-nav ~ .header-actions { margin-left: 0; }

.header-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--header-text-color);
    cursor: pointer;
}

.header-icon:hover,
.header-icon[aria-expanded="true"] {
    background: var(--surface-color);
    color: var(--brand-color);
}

.header-icon svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

/* The cart: an icon like the others, with the count as an accent dot. */
.header-cart,
.header-cart:hover {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    color: var(--header-text-color);
}

.header-cart:hover { background: var(--surface-color); }

.header-cart .nav-icon,
.header-cart .sitepack-shopping-cart-trigger,
.header-cart svg {
    color: var(--header-text-color);
}

.header-cart .sitepack-shopping-cart-container .sitepack-shopping-cart-trigger {
    position: relative;
}

.header-cart .sitepack-shopping-cart-container .sitepack-shopping-cart-trigger img,
.header-cart .sitepack-shopping-cart-container .sitepack-shopping-cart-trigger svg {
    width: 22px;
    height: 22px;
}

.header-cart .sitepack-shopping-cart-container .sitepack-shopping-cart-trigger .sitepack-cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--accent-text-color);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

/* The platform's cart and search glyphs are <img> files and ignore the header colour; paint
   them as masks in the header text colour instead, so they stay visible on any palette. */
.header-cart .sitepack-shopping-cart-container .sitepack-shopping-cart-trigger img,
.header-search .sitepack-live-search-container .sitepack-live-search-input-wrapper .sitepack-live-search-icon img {
    display: none;
}

.header-cart .sitepack-shopping-cart-container .sitepack-shopping-cart-trigger::before,
.header-search .sitepack-live-search-container .sitepack-live-search-input-wrapper .sitepack-live-search-icon::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background: var(--header-text-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3c-2.75 0-5 2.25-5 5v1H6.06L5 29h22.06L26 9h-5V8c0-2.75-2.25-5-5-5zm0 2c1.66 0 3 1.34 3 3v1h-6V8c0-1.66 1.34-3 3-3zm-8.06 6H11v3h2v-3h6v3h2v-3h3.06l.88 16H7.06z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3c-2.75 0-5 2.25-5 5v1H6.06L5 29h22.06L26 9h-5V8c0-2.75-2.25-5-5-5zm0 2c1.66 0 3 1.34 3 3v1h-6V8c0-1.66 1.34-3 3-3zm-8.06 6H11v3h2v-3h6v3h2v-3h3.06l.88 16H7.06z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.header-search .sitepack-live-search-container .sitepack-live-search-input-wrapper .sitepack-live-search-icon::before {
    width: 17px;
    height: 17px;
    background: var(--muted-text-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.6-4.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.6-4.6'/%3E%3C/svg%3E");
}

/* Search opens in a panel under the header row. */
.header-search {
    max-width: none;
    width: 100%;
    border-top: 1px solid var(--border-color);
    background: var(--header-background-color);
}

.header-search[hidden] { display: none; }

.header-search__inner {
    max-width: var(--page-width);
    padding-top: 14px;
    padding-bottom: 14px;
}

.header-search .sitepack-live-search-input-wrapper,
.header-search .sitepack-live-search-input-wrapper:focus-within {
    max-width: 720px;
    margin: 0 auto;
    background: var(--surface-color);
    border: 2px solid transparent;
    border-radius: var(--button-radius);
    padding: 11px 18px;
}

.header-search .sitepack-live-search-input-wrapper:focus-within {
    background: var(--card-background-color);
    border-color: var(--brand-color);
}

.fw-mobile-cta { display: none; }

/* ---------- Home: sections ---------- */
.fw-home {
    overflow-x: clip;
}

main > .fw-home {
    max-width: none;
    padding: 0;
}

.fw-section {
    padding-top: var(--section-spacing);
}

.fw-section > .container-element,
.fw-section > .fw-workshop__inner,
.fw-section > .fw-lease__inner {
    max-width: var(--page-width);
}

/* Bands with their own surface pad themselves top and bottom. */
.fw-workshop,
.fw-lease,
.fw-reviews {
    margin-top: var(--section-spacing);
    padding-top: var(--section-spacing);
    padding-bottom: var(--section-spacing);
}

.fw-workshop + .fw-section:not(.fw-workshop, .fw-lease, .fw-reviews),
.fw-lease + .fw-section:not(.fw-workshop, .fw-lease, .fw-reviews),
.fw-reviews + .fw-section:not(.fw-workshop, .fw-lease, .fw-reviews) {
    padding-top: var(--section-spacing);
}

:is(.fw-workshop, .fw-lease, .fw-reviews) + :is(.fw-workshop, .fw-lease, .fw-reviews) {
    margin-top: 0;
}

.fw-section--last { padding-bottom: var(--section-spacing); }

/* ---------- Hero ---------- */
.fw-hero {
    padding-top: clamp(28px, 4vw, 56px);
}

.fw-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(32px, 4.5vw, 64px);
    align-items: center;
    max-width: var(--page-width);
}

.fw-hero--text .fw-hero__inner { grid-template-columns: minmax(0, 760px); }

.fw-hero__title {
    margin: 0.7rem 0 0;
    font-family: var(--heading-font);
    font-size: clamp(2.3rem, 4.4vw, 3.7rem);
    line-height: 1.06;
}

.fw-hero__highlight {
    font-family: var(--heading-font);
    color: var(--brand-color);
}

.fw-hero__text {
    margin: 1.1rem 0 0;
    max-width: 520px;
    font-size: 1.13rem;
    color: var(--muted-text-color);
}

/* Two paths, joined by the dashed route line. */
.fw-paths {
    position: relative;
    display: grid;
    gap: 16px;
    max-width: 540px;
    margin-top: 32px;
}

.fw-paths--two::before {
    content: "";
    position: absolute;
    left: 41px;
    top: 44px;
    bottom: 44px;
    border-left: 3px dashed var(--border-color);
}

.fw-path,
.fw-path:hover,
.fw-path:focus {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-background-color);
    color: var(--text-color);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.fw-path--shop,
.fw-path:hover {
    border-color: var(--brand-color);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--brand-color) 14%, transparent);
}

.fw-path:hover { transform: translateY(-2px); }

.fw-path__icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: calc(var(--radius) * 0.75);
    background: var(--brand-color);
    color: var(--brand-text-color);
    flex: none;
}

.fw-path--service .fw-path__icon {
    background: var(--accent-color);
    color: var(--accent-text-color);
}

.fw-path__icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.fw-path__body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fw-path__body strong {
    font-family: var(--heading-font);
    font-size: 1.2rem;
    line-height: 1.2;
}

.fw-path__body span {
    font-size: 0.92rem;
    color: var(--muted-text-color);
}

.fw-path__go {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--surface-color);
    color: var(--brand-color);
    flex: none;
    transition: transform 0.2s;
}

.fw-path:hover .fw-path__go { transform: translateX(3px); }

.fw-path__go svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.fw-hero__media {
    position: relative;
}

.fw-hero__media img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 4.4;
    object-fit: cover;
    border-radius: calc(var(--radius) * 1.6);
    background: var(--image-background-color);
}

.fw-hero__tag {
    position: absolute;
    left: -32px;
    bottom: 36px;
    width: min(290px, 80%);
}

.fw-hero__tag strong {
    display: block;
    font-family: var(--heading-font);
    font-size: 1.15rem;
    color: var(--accent-color);
}

.fw-hero__tag span {
    font-size: 0.9rem;
    color: var(--muted-text-color);
}

.fw-score-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px 9px 9px;
    border-radius: calc(var(--radius) * 0.85);
    background: var(--card-background-color);
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-color) 14%, transparent);
}

.fw-score-badge__score {
    padding: 4px 8px;
    border-radius: calc(var(--radius) * 0.5);
    background: var(--score-background-color);
    color: var(--score-text-color);
    font-family: var(--heading-font);
}

/* ---------- USPs ---------- */
.fw-usps {
    margin-top: var(--section-spacing);
    background: var(--surface-color);
    color: var(--surface-text-color);
}

.fw-usps__list.fw-usps__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px 28px;
    max-width: var(--page-width);
    margin: 0 auto !important;
    padding-top: 24px;
    padding-bottom: 24px;
    list-style: none;
}

.fw-usp {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fw-usp__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--accent-text-color);
    flex: none;
}

.fw-usp__icon svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.fw-usp__body {
    display: grid;
    line-height: 1.35;
}

.fw-usp__body strong { font-size: 0.97rem; }

.fw-usp__body span {
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--surface-text-color) 70%, transparent);
}

/* ---------- Categories ---------- */
.fw-cats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.fw-cats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fw-cats--5, .fw-cats--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fw-cats--1, .fw-cats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.fw-cat,
.fw-cat:hover {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-background-color);
    color: var(--text-color);
}

.fw-cat__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--image-background-color);
}

.fw-cat__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(.2, .7, .2, 1);
}

.fw-cat:hover .fw-cat__media img { transform: scale(1.05); }

.fw-cat__initial,
.fw-post__initial {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--heading-font);
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    font-weight: 700;
    color: color-mix(in srgb, var(--brand-color) 35%, transparent);
}

.fw-cat__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
}

.fw-cat__name {
    display: block;
    font-family: var(--heading-font);
    font-size: 1.2rem;
    line-height: 1.2;
}

.fw-cat__cta {
    font-size: 0.88rem;
    color: var(--muted-text-color);
}

.fw-cat:hover .fw-round-arrow { transform: translateX(3px); }

/* ---------- Workshop ---------- */
.fw-workshop {
    background: var(--warm-surface-color);
    color: var(--warm-surface-text-color);
}

.fw-workshop__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.fw-workshop__inner--text { grid-template-columns: minmax(0, 860px); }

.fw-workshop__media { position: relative; }

.fw-workshop__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 4.3;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--image-background-color);
}

/* A round, slightly turned stamp with a dashed rim. */
.fw-stamp {
    position: absolute;
    top: 28px;
    right: -18px;
    display: grid;
    place-items: center;
    width: 118px;
    height: 118px;
    padding: 12px;
    border: 4px dashed color-mix(in srgb, var(--accent-text-color) 55%, transparent);
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--accent-text-color);
    font-family: var(--heading-font);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    transform: rotate(8deg);
    box-shadow: 0 0 0 4px var(--accent-color);
}

.fw-workshop .fw-lead { color: color-mix(in srgb, var(--warm-surface-text-color) 75%, transparent); }

.fw-services.fw-services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
    width: auto;
    max-width: none;
    margin: 28px 0 0 24px !important;
    padding: 0;
    list-style: none;
}

.fw-service { box-shadow: 0 4px 14px color-mix(in srgb, var(--shadow-color) 8%, transparent); }

.fw-service__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.fw-service__head strong {
    font-family: var(--heading-font);
    font-size: 1.05rem;
}

.fw-service__head b {
    color: var(--accent-color);
    white-space: nowrap;
}

.fw-service__text {
    display: block;
    margin-top: 3px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--muted-text-color);
}

/* ---------- Product cards (Freewheel) ---------- */
.fw-products.fw-products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    padding: 0;
}

.product-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-background-color);
    overflow: hidden;
}

.product-card .product-image {
    border-radius: 0;
    background: var(--image-background-color);
}

.product-card .product-information {
    display: flex;
    flex-direction: column;
    padding: 16px 18px 18px;
}

.product-card .product-meta + .product-price,
.product-card .product-title + .product-price { margin-top: 6px; }

body:has(.fw-home) footer { margin-top: 0; }

.product-card .product-meta {
    order: -1;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-text-color);
}

.product-card .product-title h3 {
    font-family: var(--heading-font);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.product-card .product-price .new-price {
    font-family: var(--heading-font);
    font-size: 1.2rem;
    font-weight: 700;
}

.product-card .product-view {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 14px;
    border: 2px solid var(--brand-color);
    border-radius: var(--button-radius);
    color: var(--brand-color);
    font-weight: 700;
    font-size: 0.92rem;
    transition: background-color 0.2s, color 0.2s;
}

.product-card:hover .product-view {
    background: var(--brand-color);
    color: var(--brand-text-color);
}

/* The sale badge as a small workshop tag: punched hole, rounded corners. */
.product-card .product-badge,
.product-card .product-badge--sale {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 11px 5px 23px;
    border-radius: calc(var(--radius) * 0.45);
    background: var(--label-background-color);
    color: var(--label-text-color);
    font-size: 0.78rem;
    letter-spacing: 0;
}

.product-card .product-badge::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--label-text-color);
}

/* ---------- Lease ---------- */
.fw-lease {
    background: var(--lease-background-color);
    color: var(--lease-text-color);
}

.fw-lease__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 40px clamp(32px, 5vw, 64px);
    align-items: center;
}

.fw-lease__inner--single { grid-template-columns: minmax(0, 760px); }

.fw-lease .fw-head__title { color: inherit; }

.fw-lease .fw-lead {
    color: inherit;
    opacity: 0.88;
    margin-bottom: 26px;
}

.fw-steps.fw-steps {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 20px;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

.fw-steps::before {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    top: 31px;
    border-top: 3px dashed color-mix(in srgb, var(--lease-text-color) 45%, transparent);
}

.fw-step {
    position: relative;
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 66px 18px 22px;
    border: 1px solid color-mix(in srgb, var(--lease-text-color) 22%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--lease-text-color) 10%, transparent);
    text-align: center;
}

.fw-step__n {
    position: absolute;
    top: 8px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-left: -23px;
    border-radius: 50%;
    background: var(--lease-text-color);
    color: var(--lease-background-color);
    font-family: var(--heading-font);
    font-size: 1.2rem;
    font-weight: 700;
}

.fw-step strong {
    font-family: var(--heading-font);
    font-size: 1.08rem;
}

.fw-step span:not(.fw-step__n) {
    font-size: 0.92rem;
    line-height: 1.5;
    opacity: 0.86;
}

.fw-logos {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 28px;
    border-top: 1px solid color-mix(in srgb, var(--lease-text-color) 22%, transparent);
}

.fw-logos__label {
    font-weight: 700;
    opacity: 0.86;
    white-space: nowrap;
}

.fw-logos__list.fw-logos__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 14px;
    flex: 1;
    max-width: none;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

.fw-logos__list li {
    display: grid;
    place-items: center;
    height: 60px;
    padding: 10px 16px;
    border-radius: calc(var(--radius) * 0.75);
    background: var(--card-background-color);
}

.fw-logos__list img {
    max-height: 36px;
    width: auto;
    object-fit: contain;
}

/* ---------- Store ---------- */
.fw-store {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    max-width: var(--page-width);
}

.fw-store--text { grid-template-columns: minmax(0, 640px); }

.fw-collage {
    position: relative;
    min-height: 420px;
}

.fw-collage img {
    display: block;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--image-background-color);
}

.fw-collage__a {
    width: 100%;
    height: 100%;
    min-height: 420px;
    position: absolute;
    inset: 0;
}

.fw-collage--two { min-height: 520px; }

.fw-collage--two .fw-collage__a {
    width: 74%;
    height: 400px;
    min-height: 0;
    inset: 0 auto auto 0;
}

.fw-collage__b {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 290px;
    border: 8px solid var(--content-background-color);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--shadow-color) 16%, transparent);
}

.fw-collage__status {
    position: absolute;
    left: 20px;
    bottom: 22px;
    max-width: calc(100% - 40px);
}

.fw-collage__status .fw-open {
    white-space: normal;
    padding: 11px 16px;
    border-radius: calc(var(--radius) * 0.85);
    background: var(--card-background-color);
    color: var(--text-color);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-color) 14%, transparent);
}

.fw-collage__status .fw-open--open .fw-open__dot { background: var(--accent-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 22%, transparent); }

.fw-store__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 22px 0;
}

.fw-store__card {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-radius: calc(var(--radius) * 0.85);
    background: var(--surface-color);
    color: var(--surface-text-color);
    font-style: normal;
    line-height: 1.5;
}

.fw-store__card svg {
    width: 17px;
    height: 17px;
    margin-top: 3px;
    fill: var(--brand-color);
    flex: none;
}

.fw-store__card a { color: inherit; }

.fw-hours {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.fw-hours th,
.fw-hours td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    font-weight: 400;
}

.fw-hours td {
    text-align: right;
    font-weight: 600;
}

.fw-hours td.is-closed {
    font-weight: 400;
    color: var(--muted-text-color);
}

.fw-hours tr.is-today th,
.fw-hours tr.is-today td {
    background: var(--surface-color);
    color: var(--brand-color);
    font-weight: 700;
    border-bottom-color: transparent;
}

.fw-hours tr.is-today th { border-radius: calc(var(--radius) * 0.6) 0 0 calc(var(--radius) * 0.6); }
.fw-hours tr.is-today td { border-radius: 0 calc(var(--radius) * 0.6) calc(var(--radius) * 0.6) 0; }

/* ---------- Reviews ---------- */
.fw-reviews {
    background: var(--surface-color);
    color: var(--surface-text-color);
}

.fw-reviews__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 40px clamp(32px, 5vw, 64px);
    align-items: center;
}

.fw-reviews__inner--quotes { grid-template-columns: minmax(0, 1fr); }

.fw-reviews .fw-lead {
    color: color-mix(in srgb, var(--surface-text-color) 72%, transparent);
    margin-bottom: 24px;
}

.fw-score {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding: clamp(24px, 3vw, 34px);
    border-radius: var(--radius);
    background: var(--score-background-color);
    color: var(--score-text-color);
}

.fw-score__main { display: grid; justify-items: start; gap: 8px; }

.fw-score__value {
    font-family: var(--heading-font);
    font-size: clamp(3.6rem, 6vw, 5.2rem);
    font-weight: 700;
    line-height: 1;
}

.fw-score__value small {
    font-size: 0.32em;
    opacity: 0.72;
}

/* Stars filled to the score: a muted row with the coloured row clipped on top. */
.fw-stars {
    position: relative;
    display: inline-block;
    width: 140px;
    height: 24px;
    background: color-mix(in srgb, currentColor 28%, transparent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath d='M12 1.5l3.1 6.6 7.2.8-5.4 4.9 1.5 7.1L12 17.3l-6.4 3.6 1.5-7.1L1.7 8.9l7.2-.8z'/%3E%3C/svg%3E") left center / 28px 24px repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath d='M12 1.5l3.1 6.6 7.2.8-5.4 4.9 1.5 7.1L12 17.3l-6.4 3.6 1.5-7.1L1.7 8.9l7.2-.8z'/%3E%3C/svg%3E") left center / 28px 24px repeat-x;
}

.fw-stars__fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--rating-color);
}

.fw-score__total { font-weight: 600; }

.fw-score__facts {
    display: grid;
    gap: 12px;
    margin: 0;
}

.fw-score__facts div {
    padding: 12px 16px;
    border-radius: calc(var(--radius) * 0.75);
    background: color-mix(in srgb, var(--score-text-color) 12%, transparent);
}

.fw-score__facts dt {
    font-family: var(--heading-font);
    font-size: 1.15rem;
    font-weight: 700;
}

.fw-score__facts dd {
    margin: 0;
    font-size: 0.88rem;
    opacity: 0.85;
}

.fw-quotes.fw-quotes {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: none;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

.fw-quote {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-background-color);
    color: var(--text-color);
}

.fw-quote__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 26px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-text-color);
}

.fw-quote__score {
    padding: 3px 8px;
    border-radius: calc(var(--radius) * 0.45);
    background: var(--accent-color);
    color: var(--accent-text-color);
    font-family: var(--heading-font);
    font-size: 0.9rem;
    letter-spacing: 0;
}

.fw-quote blockquote {
    flex: 1;
    margin: 12px 0 18px;
    padding: 0;
    border: 0;
    font-size: 1rem;
    line-height: 1.6;
}

.fw-quote blockquote::before { content: open-quote; }
.fw-quote blockquote::after { content: close-quote; }

.fw-quote__author strong {
    display: block;
    font-family: var(--heading-font);
}

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

/* ---------- Blog ---------- */
.fw-posts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.fw-post,
.fw-post:hover {
    display: grid;
    align-content: start;
    gap: 6px;
    color: var(--text-color);
}

.fw-post__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--image-background-color);
}

.fw-post__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(.2, .7, .2, 1);
}

.fw-post:hover .fw-post__media img { transform: scale(1.05); }

.fw-post__meta {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent-color);
}

.fw-post__title {
    font-family: var(--heading-font);
    font-size: 1.25rem;
    line-height: 1.2;
}

.fw-post:hover .fw-post__title { color: var(--brand-color); }

.fw-post__excerpt {
    font-size: 0.95rem;
    color: var(--muted-text-color);
}

/* ---------- Newsletter: a dashed ticket box ---------- */
.fw-newsletter {
    display: flex;
    align-items: center;
    gap: 24px 40px;
    padding: clamp(28px, 3.5vw, 44px) clamp(24px, 4vw, 52px);
    border: 2px dashed color-mix(in srgb, var(--warm-surface-text-color) 16%, transparent);
    border-radius: calc(var(--radius) * 1.5);
    background: var(--warm-surface-color);
    color: var(--warm-surface-text-color);
}

.fw-newsletter__body { flex: 1; min-width: 0; }

.fw-newsletter__title {
    margin: 0;
    font-family: var(--heading-font);
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}

.fw-newsletter__text {
    margin: 0.4rem 0 0;
    color: color-mix(in srgb, var(--warm-surface-text-color) 72%, transparent);
}

.fw-newsletter__form { flex: 0 1 480px; min-width: 0; }

.fw-newsletter .sitepack-newsletter-form__intro { display: none; }

.fw-newsletter .sitepack-newsletter-form {
    max-width: none;
    margin: 0;
}

.fw-newsletter .sitepack-newsletter-form__row {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.fw-newsletter .sitepack-newsletter-form__email::placeholder {
    color: var(--subtle-text-color);
}

.fw-newsletter .sitepack-newsletter-form__email {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--input-border-color);
    border-radius: var(--button-radius);
    background: var(--input-background-color);
    color: var(--text-color);
}

.fw-newsletter .sitepack-newsletter-form__button,
.fw-newsletter button {
    width: auto;
    flex: none;
    min-height: 48px;
    padding: 0.7rem 1.4rem;
    border: 0;
    border-radius: var(--button-radius);
    background: var(--brand-color);
    color: var(--brand-text-color);
    font-weight: 700;
    cursor: pointer;
}

/* ---------- Blog cards (tag page, snippets/blog-card.twig) ---------- */
.fw-journal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.fw-journal--posts { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.fw-story {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    color: var(--text-color);
}

.fw-story:hover { color: var(--text-color); }

.fw-story__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--image-background-color);
    margin-bottom: 0.6rem;
}

/* A post without an image: its initial, large, instead of an empty box. */
.fw-story__initial {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--heading-font);
    font-size: clamp(4.5rem, 8vw, 7rem);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text-color) 22%, transparent);
}

.fw-story__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(.2, .7, .2, 1);
}

.fw-story:hover .fw-story__media img { transform: scale(1.05); }

.fw-story__meta {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted-text-color);
}

.fw-story__title {
    font-family: var(--heading-font);
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.fw-story:hover .fw-story__title {
    text-decoration: underline;
    text-decoration-color: var(--brand-color);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

.fw-story__excerpt { color: var(--muted-text-color); font-size: 0.95rem; }


/* ---------- Product page: visit-the-store band ---------- */
.pdp-stall .fw-open {
    display: flex;
    margin-top: 6px;
    font-size: 0.9rem;
}

.pdp-stall .fw-open[hidden] { display: none; }

/* Buttons on the product page and in platform widgets follow the button radius, not the
   card radius the core bridge maps to --border-radius. */
:is(.pdp, .pdp-stall, .category-help, .cart, main) :is(.btn, .btn-primary, .btn-dark, button[type="submit"]) {
    border-radius: var(--button-radius);
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    .site-header .site-nav__list { font-size: 14px; }
    .site-nav .site-nav__list > li > a { padding: 9px 9px; }
}

/* The inline menu needs the width; below 1080px it folds into the hamburger panel and the
   button item moves to the bar under the header. */
@media (max-width: 1080px) {
    .site-header__main {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 12px;
        min-height: 64px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .nav-toggle { display: flex; }

    .brand { justify-self: center; }

    .site-header .site-nav {
        display: none;
        grid-column: 1 / -1;
        order: 4;
    }

    .site-header:has(.site-nav__list.menu-open) .site-nav { display: block; }

    .site-header .site-nav__list.menu-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px 0 12px;
    }

    .site-nav .site-nav__list.menu-open > li > a {
        display: block;
        padding: 0.85rem 0.25rem;
        border-radius: 0;
    }

    .site-nav__list.menu-open .nav-link,
    .site-nav__list.menu-open .dropdown {
        width: 100%;
        border-bottom: 1px solid var(--border-color);
    }

    .site-nav__list.menu-open .nav-link:has(a.btn) {
        margin: 12px 0 0;
        border-bottom: 0;
    }

    .site-nav .site-nav__list.menu-open > li > a.btn { display: flex; }

    .fw-mobile-cta:not([hidden]) {
        display: flex;
        max-width: none;
        padding-top: 12px;
        padding-bottom: 4px;
    }

    .fw-mobile-cta a.btn { flex: 1; min-height: 44px; }

    .site-header:has(.site-nav__list.menu-open) + .fw-mobile-cta { display: none; }

    .header-actions { gap: 0; }

    .fw-hero__inner,
    .fw-workshop__inner,
    .fw-lease__inner,
    .fw-store,
    .fw-reviews__inner { grid-template-columns: minmax(0, 1fr); }

    .fw-hero__media { order: -1; }
    .fw-hero__tag { left: 16px; bottom: -24px; }
    .fw-hero__copy { padding-top: 12px; }
    .fw-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fw-products.fw-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fw-quotes.fw-quotes { grid-template-columns: minmax(0, 1fr); }
    .fw-posts,
    .fw-journal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fw-stamp { right: 12px; }
    .fw-newsletter { flex-direction: column; align-items: stretch; }
    .fw-newsletter__form { flex: none; }
}

@media (max-width: 768px) {
    .topbar__inner {
        padding-top: 7px;
        padding-bottom: 7px;
        font-size: 12.5px;
    }

    /* One line: the opening status when there is one, otherwise the first top-bar item. */
    .topbar__core:has(+ .topbar__status) { display: none; }
    .topbar__core + .topbar__status { padding-left: 0; border-left: 0; }
    .topbar__inner:has(.topbar__status) { justify-content: center; }
    .topbar__inner > *:not(:first-child) { display: block; }
    .topbar__core:has(+ .topbar__status) .topbar-standard__usps { display: none; }
    .topbar-standard__contact { display: flex; gap: 12px; }
    .topbar-standard__contact > :not(:first-child) { display: none; }
    .topbar__core:not(:has(+ .topbar__status)) .topbar-standard__contact { display: none; }
    .topbar__core + .topbar__status { padding-left: 14px; }
    .topbar-standard { flex-wrap: nowrap; }
    .topbar-standard__usps > :not(:first-child) { display: none; }

    .brand .site-name { font-size: 1.2rem; }
    .brand img { height: 36px; }

    .fw-section,
    .fw-hero { padding-top: min(var(--section-spacing), 56px); }

    .fw-hero { padding-top: 16px; }

    .fw-workshop,
    .fw-lease,
    .fw-reviews,
    .fw-usps {
        margin-top: min(var(--section-spacing), 56px);
        padding-top: min(var(--section-spacing), 56px);
        padding-bottom: min(var(--section-spacing), 56px);
    }

    .fw-usps { padding-top: 0; padding-bottom: 0; }

    .fw-section--last { padding-bottom: min(var(--section-spacing), 56px); }

    footer { margin-top: 0; }

    .fw-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
        margin-bottom: 22px;
    }

    /* Phone order like the mock: eyebrow, title, photo with the tag, text, paths. */
    .fw-hero__inner { gap: 0; }
    .fw-hero__copy { display: contents; }
    .fw-hero__copy > .fw-eyebrow { order: 1; }
    .fw-hero__title { order: 2; margin-bottom: 18px; }
    .fw-hero__media { order: 3; }
    .fw-hero__text { order: 4; margin-top: 46px; }
    .fw-paths { order: 5; }
    .fw-hero--text .fw-hero__text { margin-top: 1rem; }
    .fw-hero__media img { aspect-ratio: 4 / 3; border-radius: var(--radius); }
    .fw-hero__tag { left: 28px; right: 12px; width: auto; bottom: -30px; padding: 12px 14px 12px 42px; }
    .fw-hero__title { font-size: clamp(2rem, 8.6vw, 2.5rem); }
    .fw-hero__text { font-size: 1rem; }
    .fw-paths { margin-top: 22px; gap: 12px; }
    .fw-paths--two::before { left: 37px; }
    .fw-path { padding: 13px 14px; gap: 12px; }
    .fw-path__icon { width: 40px; height: 40px; }
    .fw-path__body strong { font-size: 1.05rem; }
    .fw-score-badge { top: 12px; right: 12px; font-size: 0.82rem; }

    .fw-usps__list.fw-usps__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .fw-cats { gap: 12px; }
    .fw-cat__label { padding: 12px; }
    .fw-cat__name { font-size: 1rem; }
    .fw-cat__label .fw-round-arrow { display: none; }

    .fw-services.fw-services { grid-template-columns: minmax(0, 1fr); margin-left: 22px !important; }
    .fw-stamp { width: 96px; height: 96px; font-size: 0.8rem; top: 14px; }
    .fw-actions .fw-btn { flex: 1 1 100%; }

    .fw-products.fw-products { gap: 12px; }
    .product-card .product-information { padding: 12px; }
    .product-card .product-view { min-height: 40px; font-size: 0.85rem; }

    .fw-steps.fw-steps { grid-auto-flow: row; gap: 14px; }
    .fw-steps::before { left: 33px; right: auto; top: 30px; bottom: 30px; border-top: 0; border-left: 3px dashed color-mix(in srgb, var(--lease-text-color) 45%, transparent); }
    .fw-step { padding: 16px 16px 16px 76px; text-align: left; min-height: 78px; }
    .fw-step__n { top: 16px; left: 12px; margin-left: 0; }
    .fw-logos { flex-direction: column; align-items: stretch; }
    .fw-logos__list.fw-logos__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .fw-collage,
    .fw-collage--two { min-height: 0; }
    .fw-collage__a,
    .fw-collage--two .fw-collage__a { position: relative; width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 3; }
    .fw-collage .fw-collage__b { display: none; }

    .fw-score { grid-template-columns: minmax(0, 1fr); }
    .fw-posts,
    .fw-journal { grid-template-columns: minmax(0, 1fr); }
    .fw-newsletter .sitepack-newsletter-form__row { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .fw-btn, .fw-path, .fw-path__go, .fw-cat__media img, .fw-post__media img, .fw-round-arrow, .fw-link-arrow svg {
        transition: none;
    }
}

/* =========================================================================
   FINISH
   A last pass over real merchant content: a logo of any shape, a header that never
   overlaps, one trail position with the same spacing on every page, page-builder blocks
   on the page gutter, and quiet motion. Kept last so it wins over the layers above
   without !important where possible.
   ========================================================================= */

/* ---------- Header: a logo of any shape ---------- */
/* A wide wordmark (10:1) at a fixed 44px height ran 480px wide and pushed the menu over
   the icons. The logo now fits a box: never taller than the height setting, never wider
   than the width setting, ratio kept. */
.brand {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.brand img,
.site-header .brand img {
    display: block;
    width: auto;
    height: auto;
    max-height: var(--logo-max-height);
    max-width: var(--logo-max-width);
}

/* A menu that does not fit next to the logo: theme.js measures it and moves it to its own
   row under the logo, on the page line, so a long menu never runs under the icons. */
@media (min-width: 1081px) {
    .site-header.fw-nav-below .site-header__main {
        flex-wrap: wrap;
        row-gap: 0;
        padding-bottom: 0;
    }

    .site-header.fw-nav-below .header-actions {
        margin-left: auto;
    }

    .site-header.fw-nav-below .site-nav {
        order: 3;
        flex: 0 0 100%;
        padding: 6px 0;
        border-top: 1px solid var(--border-color);
    }

    .site-header.fw-nav-below .site-nav__list {
        flex-wrap: wrap;
        margin-left: -12px !important;
    }

    .site-header.fw-nav-below .site-nav__list .nav-link:has(a.btn) {
        margin-left: auto;
    }
}

/* Tablets and phones: hamburger, logo, icons on one row; the logo is centred in what is
   left and shrinks to fit it. */
@media (max-width: 1080px) {
    .site-header__main {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .brand {
        justify-self: stretch;
        justify-content: center;
        align-items: center;
    }

    .brand img,
    .site-header .brand img {
        max-width: min(var(--logo-max-width), 100%);
    }
}

@media (max-width: 480px) {
    .site-header__main { gap: 8px; }
    .header-icon,
    .header-cart,
    .header-cart:hover,
    .nav-toggle {
        width: 40px;
        height: 40px;
    }
    .brand img,
    .site-header .brand img {
        max-height: min(var(--logo-max-height), 36px);
    }
}

/* ---------- Trail ---------- */
/* One place for the trail on every page: under the header, on the page line, with the
   same room above it. Category and product pages print their own trail in that spot. */
.fw-trail {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: clamp(14px, 1.8vw, 22px) var(--fw-gutter) 0;
}

.fw-trail:empty,
.fw-trail:has(#breadcrumbs .breadcrumb > li:only-child) {
    display: none;
}

.fw-trail #breadcrumbs {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Room between the trail and a full-width photo band, or the first text block. */
.fw-trail + main > :first-child {
    margin-top: clamp(14px, 1.8vw, 22px);
}

.fw-trail + main > :is(.container-element-text, .container-element-heading, .container-element, .container-element-columns):first-child {
    margin-top: clamp(20px, 2.6vw, 32px);
}

/* Same type and colours for the platform trail and the category/product trail. */
#breadcrumbs .breadcrumb,
.category-breadcrumb {
    font-size: 13px;
    line-height: 1.5;
}

#breadcrumbs .breadcrumb li a,
.category-breadcrumb a {
    color: var(--subtle-text-color);
    transition: color 0.2s;
}

#breadcrumbs .breadcrumb li a:hover,
.category-breadcrumb a:hover {
    color: var(--brand-color);
}

#breadcrumbs .breadcrumb li:last-child a,
#breadcrumbs .breadcrumb li:last-child span,
.category-breadcrumb__current {
    color: var(--text-color);
}

#breadcrumbs .breadcrumb li:not(:last-child)::after {
    margin: 0 0.5rem;
    color: var(--subtle-text-color);
}

main > .pdp,
main > .category-page {
    padding-top: clamp(14px, 1.8vw, 22px);
}

.pdp__breadcrumb {
    margin-bottom: clamp(18px, 2.4vw, 28px);
}

/* A page that opens with text instead of a photo band gets room under the header. */
body:not(.first-element-cover) main > :is(.container-element-text, .container-element-heading):first-child {
    padding-top: clamp(24px, 3vw, 40px);
}

/* ---------- Page-builder blocks on the page line ---------- */
/* A block inside a column already sits on the column's edge; its own gutter pushed headings
   and text half a gutter in from the photos next to it. */
.row > .col > .container-element,
.row > [class*="col-"] > .container-element {
    padding-left: 0;
    padding-right: 0;
}

/* A boxed background block (not full width): its content on the page gutter like the
   columns above and below it, not on the bare container edge. The platform zeroes its
   padding with !important. */
main > .container.container-element-background:not(.container-fluid) {
    padding-left: var(--fw-gutter) !important;
    padding-right: var(--fw-gutter) !important;
}

main > .container.container-element-background:not(.container-fluid) .container.container-element-columns {
    padding-left: 0;
    padding-right: 0;
}

/* Full-width band: the band stays edge to edge, its columns on the page line. */
main > .container-fluid.container-element-background > .background-inner > :is(.container, .container-element, .text-center, .text-left, .text-right) {
    max-width: var(--page-width);
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--fw-gutter);
    padding-right: var(--fw-gutter);
}

main > .container-fluid.container-element-background > .background-inner {
    padding-top: clamp(28px, 3.6vw, 48px);
    padding-bottom: clamp(28px, 3.6vw, 48px);
}

/* Cover: title and buttons on the page line instead of the Bootstrap row edge. */
.container-element-cover > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.container-element-cover > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.container-element-cover .cover-inner-flex {
    max-width: var(--page-width);
    margin: 0 auto;
    padding-left: var(--fw-gutter);
    padding-right: var(--fw-gutter);
}

.container-element-cover .cover-inner-flex > .container-element {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0 !important;
}

/* Vertical rhythm: blocks stacked in a column keep the same gap as the columns themselves. */
main .row > .col > * + *,
main .row > [class*="col-"] > * + * {
    margin-top: 16px;
}

main .container-element-columns > .row {
    row-gap: 28px;
}

/* A strip of four or more images (brand logos, partners): equal tiles, the image fitted
   inside, so a square logo is not twice the size of a wide one. */
main .container-element-columns > .row:has(> .col:nth-child(4)) > .col > .text-center img,
main .container-element-columns > .row:has(> .col:nth-child(4)) > .col > .text-center a > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    background: var(--card-background-color);
}

/* Photos in columns fill the column, so neighbouring photos share both edges. */
main .container-element-columns .col > .text-center > img,
main .container-element-columns .col > .text-center > a > img,
main > .container-element-background .text-center > img {
    width: 100%;
    height: auto;
}

main > .container-element-background .text-center > img {
    display: block;
}

/* ---------- Product photos ---------- */
/* Product photos are mostly packshots on white: cropped to fill a tall box they lost both
   wheels of every bike. Show the whole product, centred on the image surface; multiply
   melts the photo's white backdrop into that surface. */
.product-card .product-image {
    aspect-ratio: 1 / 1;
}

.product-card .product-image img,
.pdp-gallery__stage img {
    object-fit: contain;
    mix-blend-mode: multiply;
}

.product-card .product-image img {
    padding: 6%;
}

.pdp-gallery__stage {
    aspect-ratio: 1 / 1;
}

.pdp-gallery__stage img {
    padding: 4%;
}

/* ---------- Leading whitespace ---------- */
/* Without a trail the old layout needed a whitespace block to keep the first element off
   the header; the trail gives that room now, so a leading one would double it. */
.fw-trail + main > .container-element-whitespace:first-child {
    display: none;
}

/* Photos stacked in one column keep the same gap as the columns next to each other. */
main .row > .col > .text-center + .text-center,
main .row > [class*="col-"] > .text-center + .text-center {
    margin-top: 28px;
}

/* ---------- Phones ---------- */
@media (max-width: 768px) {
    /* A strip of four or more images (logos) goes two by two, not one huge tile per row. */
    /* The platform zeroes column padding on phones (!important), so the gap does the spacing. */
    main .container-element-columns > .row:has(> .col:nth-child(4)) > .col {
        flex: 0 0 calc(50% - 6px);
    }

    main .container-element-columns > .row:has(> .col:nth-child(4)) {
        gap: 12px;
    }

    main .container-element-columns > .row:has(> .col:nth-child(4)) > .col > * + * {
        margin-top: 16px;
    }

    /* Related products already sit inside the page's gutter. */
    .pdp-related .pdp-related__grid {
        padding-left: 0;
        padding-right: 0;
    }

    /* The last block never touches the footer. */
    footer {
        margin-top: clamp(40px, 10vw, 56px);
    }

    body:has(.fw-home) footer { margin-top: 0; }
}

/* ---------- Footer ---------- */
/* Widgets the merchant puts under the footer columns (a review badge, a payment strip)
   sit on the page line with room around them. */
footer > .container-element {
    max-width: var(--page-width);
    padding: clamp(20px, 2.6vw, 32px) var(--fw-gutter);
}

footer > .container-element iframe {
    display: block;
    max-width: 100%;
}

/* ---------- Motion ---------- */
/* Quiet and quick: blocks rise in as they scroll into view (theme.js only hides blocks that
   start below the fold), cards lift on hover, the header gains a shadow once the page
   scrolls under it, the cover title settles in on load. All of it is off with reduced
   motion. Transforms end on `none`, so nothing stays a containing block afterwards. */
.fw-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.7s var(--fw-ease) var(--fw-delay),
        transform 0.8s var(--fw-ease) var(--fw-delay);
}

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

.site-header {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.site-header.is-scrolled {
    border-bottom-color: transparent;
    box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--shadow-color) 45%, transparent);
}

/* Cover: the title and buttons settle in on load. */
.container-element-cover .cover-inner-flex > * {
    animation: fw-rise 0.9s var(--fw-ease) both;
}

.container-element-cover .cover-inner-flex > :nth-child(2) { animation-delay: 0.08s; }
.container-element-cover .cover-inner-flex > :nth-child(3) { animation-delay: 0.16s; }
.container-element-cover .cover-inner-flex > :nth-child(n+4) { animation-delay: 0.24s; }

@keyframes fw-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

/* Cards and photo tiles: a small lift and a slow zoom of the photo. */
.product-card,
.category-card,
main .container-element-columns .col > .text-center > a,
main .content-image-responsive {
    transition: transform 0.35s var(--fw-ease), box-shadow 0.35s var(--fw-ease);
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--shadow-color) 40%, transparent);
}

.product-card .product-image img {
    transition: transform 0.6s var(--fw-ease);
}

main .container-element-columns .col > .text-center > a:hover > img,
main .container-element-columns .col > .text-center > a:hover .content-image-responsive {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--shadow-color) 45%, transparent);
}

/* Menu: the hover surface fades in instead of snapping. */
.site-nav .site-nav__list > li > a {
    transition: color 0.2s ease, background-color 0.2s ease;
}

@keyframes fw-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* Search panel and the phone menu open with a short slide. */
.header-search:not([hidden]),
.site-header:has(.site-nav__list.menu-open) .site-nav {
    animation: fw-drop 0.25s var(--fw-ease) both;
}

/* Hamburger turns into a cross. */
.nav-toggle span {
    transition: transform 0.3s var(--fw-ease), opacity 0.2s ease;
}

/* Buttons: a press feels like a press (not on the header cart: see platform notes). */
main :is(.btn, .fw-btn, button[type="submit"]):active {
    transform: translateY(0) scale(0.98);
}

/* Cart count pops when it changes (the widget re-renders the badge). */
.header-cart .sitepack-cart-count {
    animation: fw-pop 0.4s var(--fw-ease) both;
}

@keyframes fw-pop {
    from { transform: scale(0.4); }
    60% { transform: scale(1.15); }
    to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fw-reveal { opacity: 1; transform: none; transition: none; }
    .container-element-cover .cover-inner-flex > *,
    .header-search:not([hidden]),
    .site-header:has(.site-nav__list.menu-open) .site-nav,
    .header-cart .sitepack-cart-count {
        animation: none;
    }
    .product-card,
    .product-card .product-image img,
    main .content-image-responsive,
    .site-header {
        transition: none;
    }
    .product-card:hover { transform: none; }
}

/* ---------- Cookie bar ---------- */
/* A light consent card in the familiar consent-tool layout: small heading, short text,
   the categories as switches, three equal buttons with the accept button filled. It sits
   bottom left on desktop and becomes a bottom sheet on phones. Overrides the dark panel
   further up. */
.sitepack-cookiebar {
    left: 20px;
    bottom: 20px;
    width: min(480px, calc(100vw - 40px));
    padding: 20px 22px 18px;
    border: 1px solid var(--border-color);
    border-radius: min(var(--radius), 12px);
    background: var(--card-background-color);
    color: var(--text-color);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--shadow-color) 8%, transparent),
        0 18px 50px -12px color-mix(in srgb, var(--shadow-color) 28%, transparent);
}

.sitepack-cookiebar .sitepack-cookiebar-title {
    display: block;
    margin: 0 0 6px;
    font-size: 1rem;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-color);
}

.sitepack-cookiebar .sitepack-cookiebar-title::before {
    display: none;
}

.sitepack-cookiebar p {
    margin: 0 0 14px;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--muted-text-color);
}

/* Categories as small switches on a quiet surface. */
.sitepack-cookiebar .cookie-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: min(var(--radius), 8px);
    background: var(--surface-color);
}

.sitepack-cookiebar .cookie-options label,
.sitepack-cookiebar .cookie-options label:hover,
.sitepack-cookiebar .cookie-options label:has(input:checked) {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--surface-text-color);
}

.sitepack-cookiebar .cookie-options label.disabled {
    opacity: 0.7;
}

.sitepack-cookiebar .cookie-options label input[type=checkbox] {
    position: relative;
    display: block;
    width: 30px;
    height: 18px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-text-color) 22%, transparent);
    transition: background-color 0.2s ease;
}

.sitepack-cookiebar .cookie-options label input[type=checkbox]::after,
.sitepack-cookiebar .cookie-options label input[type=checkbox]:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: var(--card-background-color);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-color) 25%, transparent);
    transform: none;
    transition: transform 0.2s var(--fw-ease);
}

.sitepack-cookiebar .cookie-options label input[type=checkbox]:checked {
    background: var(--brand-color);
}

.sitepack-cookiebar .cookie-options label input[type=checkbox]:checked::after {
    transform: translateX(12px);
}

.sitepack-cookiebar .cookie-options label input[type=checkbox]:focus-visible {
    outline: 2px solid var(--brand-color);
    outline-offset: 2px;
}

/* Three equal buttons: two outlined in the brand colour, accept filled. */
.sitepack-cookiebar .cookie-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.sitepack-cookiebar .cookie-actions .btn {
    min-height: 40px;
    margin: 0;
    padding: 8px 6px;
    border-radius: min(var(--button-radius), 8px);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sitepack-cookiebar .cookie-actions .btn:hover {
    transform: none;
}

.sitepack-cookiebar .cookie-actions .btn-default,
.sitepack-cookiebar .cookie-actions .btn-default:hover {
    background: transparent;
    border: 1.5px solid var(--brand-color);
    color: var(--brand-color);
}

.sitepack-cookiebar .cookie-actions .btn-default:hover {
    background: color-mix(in srgb, var(--brand-color) 8%, transparent);
}

.sitepack-cookiebar .cookie-actions .btn-success,
.sitepack-cookiebar .cookie-actions .btn-success:hover {
    background: var(--brand-color);
    border: 1.5px solid var(--brand-color);
    color: var(--brand-text-color);
    box-shadow: none;
}

.sitepack-cookiebar .cookie-actions .btn-success:hover {
    background: color-mix(in srgb, var(--brand-color) 88%, var(--shadow-color));
    border-color: color-mix(in srgb, var(--brand-color) 88%, var(--shadow-color));
}

/* Phones: a bottom sheet; the buttons stack with accept on top. */
@media (max-width: 767px) {
    .sitepack-cookiebar {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        padding: 18px var(--fw-gutter) calc(16px + env(safe-area-inset-bottom));
        border-width: 1px 0 0;
        border-radius: min(var(--radius), 14px) min(var(--radius), 14px) 0 0;
    }

    .sitepack-cookiebar p { font-size: 0.82rem; }

    .sitepack-cookiebar .cookie-actions {
        display: flex;
        flex-direction: column-reverse;
    }

    .sitepack-cookiebar .cookie-actions .btn { min-height: 44px; }
}

/* =========================================================================
   CATEGORY PAGE (Freewheel)
   The listing as a counter in the shop instead of a catalogue: the category's own words
   next to a photo with a workshop tag, sub-categories as stops on the dashed route line,
   filters in one card that ends at the front desk, sort as chips, a help ticket in the
   grid and a route-line progress bar. Overrides the shared Stack listing above.
   ========================================================================= */

/* ---------- Hero ---------- */
.fw-cathero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px clamp(32px, 5vw, 72px);
    align-items: center;
    margin-top: 6px;
}

.fw-cathero--photo {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.fw-cathero__copy .category-breadcrumb {
    margin-bottom: clamp(18px, 2.4vw, 28px);
}

.fw-cathero__title {
    margin: 0.5rem 0 0;
    font-family: var(--heading-font);
    font-size: clamp(2.3rem, 4.6vw, 3.6rem);
    line-height: 1.04;
    color: var(--text-color);
}

.fw-cathero__intro { max-width: 600px; }

/* The visual: the category photo in a big rounded frame, or a product shown whole on a soft
   disc, with the workshop tag hanging over the lower left edge. */
.fw-cathero__visual {
    position: relative;
    padding-bottom: 28px;
}

.fw-cathero__photo {
    margin: 0;
    overflow: hidden;
    border-radius: calc(var(--radius) * 1.6);
    background: var(--image-background-color);
}

.fw-cathero__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 3.6;
    object-fit: cover;
}

.fw-cathero__photo--cutout {
    background: var(--image-background-color);
}

.fw-cathero__photo--cutout img {
    object-fit: contain;
    padding: 6% 4%;
    mix-blend-mode: multiply;
}

.fw-cathero__tag {
    position: absolute;
    left: -28px;
    bottom: 0;
    width: min(300px, 82%);
    display: grid;
    gap: 3px;
}

.fw-cathero__tag-title {
    font-family: var(--heading-font);
    font-size: 1.1rem;
    color: var(--accent-color);
}

.fw-cathero__tag-text {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--muted-text-color);
}

.fw-cathero__tag .fw-open {
    font-size: 0.86rem;
    color: var(--text-color);
}

/* ---------- Sub-categories on the route line ----------
   One row across the page: the label, then the stops sitting on a dashed road that runs on
   to the edge. Too many stops for the row scroll sideways instead of wrapping. */
.fw-catroute {
    display: flex;
    align-items: center;
    gap: 14px 24px;
    margin-top: clamp(28px, 3.4vw, 44px);
}

.fw-catroute__label {
    flex: none;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-text-color);
}

.fw-catroute__list {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 14px;
    padding: 4px 0 !important;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.fw-catroute__list::-webkit-scrollbar { display: none; }

.fw-catroute__list::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 3px dashed var(--border-color);
    transform: translateY(-1.5px);
}

.fw-catroute__stop {
    position: relative;
    flex: none;
}

.fw-catroute__stop a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 16px 8px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    background: var(--card-background-color);
    color: var(--text-color);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.2s var(--fw-ease);
}

.fw-catroute__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--card-background-color);
    box-shadow: inset 0 0 0 3px var(--brand-color);
    flex: none;
    transition: box-shadow 0.2s;
}

.fw-catroute__stop a svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
    opacity: 0.45;
    transition: transform 0.2s, opacity 0.2s;
}

.fw-catroute__stop a:hover {
    border-color: var(--brand-color);
    background: color-mix(in srgb, var(--brand-color) 7%, var(--card-background-color));
    color: var(--brand-color);
    transform: translateY(-2px);
}

.fw-catroute__stop a:hover .fw-catroute__dot { box-shadow: inset 0 0 0 7px var(--brand-color); }

.fw-catroute__stop a:hover svg {
    opacity: 1;
    transform: translateX(3px);
}

/* ---------- Layout ---------- */
.fw-catpage .category-layout {
    grid-template-columns: 268px minmax(0, 1fr);
    gap: clamp(28px, 3.4vw, 48px);
    margin-top: clamp(40px, 5vw, 64px);
}

/* ---------- Sidebar: one filter card, then the front desk ---------- */
.fw-catpage .category-sidebar {
    top: 120px;
    display: grid;
    gap: 16px;
}

.fw-catpage .category-filter-groups {
    gap: 0;
    padding: 6px 22px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-background-color);
}

.fw-catpage .filter-group {
    padding: 20px 0;
    border-bottom: 1px dashed var(--border-color);
}

.fw-catpage .filter-group:last-child { border-bottom: 0; }

.fw-catpage .filter-group__title {
    font-family: var(--heading-font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
}

.fw-catpage .filter-option {
    font-size: 0.93rem;
    color: var(--text-color);
}

.fw-catpage .filter-option__count {
    min-width: 28px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface-color);
    color: var(--muted-text-color);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.fw-catpage .filter-option:hover .filter-option__count,
.fw-catpage .filter-option.is-active .filter-option__count {
    background: var(--brand-color);
    color: var(--brand-text-color);
}

/* Checkboxes that look like checkboxes: an empty box that fills with the brand colour. */
.fw-catpage .filter-list:not(.filter-list--categories) .filter-option__check {
    visibility: visible;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--input-border-color);
    border-radius: 5px;
    background: var(--input-background-color);
    transition: background-color 0.2s, border-color 0.2s;
}

.fw-catpage .filter-list:not(.filter-list--categories) .filter-option__check svg {
    width: 11px;
    height: 11px;
    fill: var(--brand-text-color);
    opacity: 0;
}

.fw-catpage .filter-option:hover .filter-option__check { border-color: var(--brand-color); }

.fw-catpage .filter-option.is-active .filter-option__check {
    border-color: var(--brand-color);
    background: var(--brand-color);
}

.fw-catpage .filter-option.is-active .filter-option__check svg { opacity: 1; }

/* The category tree as a short route: a dashed line with a stop per category; the page
   you are on is the filled stop. */
.fw-catpage .filter-list--categories {
    position: relative;
    gap: 0;
}

.fw-catpage .filter-list--categories::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 14px;
    bottom: 14px;
    border-left: 2px dashed var(--border-color);
}

.fw-catpage .filter-list--categories .filter-option {
    position: relative;
    gap: 12px;
    padding: 6px 0 6px 24px;
}

.fw-catpage .filter-list--categories .filter-option::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--card-background-color);
    box-shadow: inset 0 0 0 2px var(--border-color);
    transition: box-shadow 0.2s;
}

.fw-catpage .filter-list--categories .filter-option:hover::before { box-shadow: inset 0 0 0 3px var(--brand-color); }

.fw-catpage .filter-list--categories .filter-option:has(strong)::before { box-shadow: inset 0 0 0 6px var(--brand-color); }

.fw-catpage .filter-list--categories .filter-option strong { color: var(--brand-color); }

.fw-catpage .filter-list--categories .nested-level-1 { margin-left: 0; padding-left: 24px; }
.fw-catpage .filter-list--categories .nested-level-2 { padding-left: 36px; }
.fw-catpage .filter-list--categories .nested-level-3 { padding-left: 48px; }

.fw-catpage .price-filter__fill,
.fw-catpage .price-filter__input::-webkit-slider-thumb { background: var(--brand-color); }

/* The front desk: a ticket on the warm surface. */
.fw-catdesk {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 20px 22px;
    border: 2px dashed color-mix(in srgb, var(--warm-surface-text-color) 16%, transparent);
    border-radius: var(--radius);
    background: var(--warm-surface-color);
    color: var(--warm-surface-text-color);
    font-size: 0.92rem;
}

.fw-catdesk .fw-eyebrow { font-size: 0.72rem; }

.fw-catdesk__name {
    margin-top: 2px;
    font-family: var(--heading-font);
    font-size: 1.08rem;
}

.fw-catdesk .fw-open { font-size: 0.88rem; }

.fw-catdesk__address {
    color: color-mix(in srgb, var(--warm-surface-text-color) 72%, transparent);
    line-height: 1.45;
}

.fw-catdesk__links {
    display: grid;
    gap: 6px;
    margin-top: 6px;
}

.fw-catdesk__links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--anchor-color);
}

.fw-catdesk__links svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ---------- Toolbar: count, then sort as chips ---------- */
.fw-catpage .category-toolbar {
    align-items: center;
    padding: 0 0 18px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--border-color);
}

.fw-catpage .category-toolbar__count {
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--text-color);
}

.fw-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: calc(var(--button-radius) + 4px);
    background: var(--surface-color);
}

.fw-sort__label {
    padding: 0 8px 0 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted-text-color);
}

.fw-sort__chip {
    padding: 8px 14px;
    border-radius: var(--button-radius);
    color: var(--surface-text-color);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.fw-sort__chip:hover {
    background: var(--card-background-color);
    color: var(--brand-color);
}

.fw-sort__chip.is-active {
    background: var(--card-background-color);
    color: var(--brand-color);
    box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--shadow-color) 35%, transparent);
}

.fw-catpage .active-chip {
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-color) 10%, var(--card-background-color));
    border-color: transparent;
    color: var(--brand-color);
    font-weight: 700;
}

/* ---------- Help ticket in the grid ---------- */
.fw-cathelp {
    grid-column: 1 / -1;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: 20px 36px;
    align-items: center;
    margin: 8px 0;
    padding: clamp(24px, 3vw, 34px) clamp(24px, 3vw, 40px) clamp(24px, 3vw, 34px) clamp(56px, 6vw, 76px);
    border-radius: calc(var(--radius) * 1.2);
    background: var(--warm-surface-color);
    color: var(--warm-surface-text-color);
}

/* Punched hole and the dashed tear line of a repair ticket. */
.fw-cathelp::before {
    content: "";
    position: absolute;
    left: clamp(20px, 2.4vw, 28px);
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--background-color);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--warm-surface-text-color) 16%, transparent);
}

.fw-cathelp::after {
    content: "";
    position: absolute;
    left: clamp(44px, 4.8vw, 58px);
    top: 14px;
    bottom: 14px;
    border-left: 2px dashed color-mix(in srgb, var(--warm-surface-text-color) 16%, transparent);
}

.fw-cathelp__title {
    margin-top: 6px;
    font-family: var(--heading-font);
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    font-weight: 700;
    line-height: 1.15;
}

.fw-cathelp__text {
    margin: 6px 0 0;
    color: color-mix(in srgb, var(--warm-surface-text-color) 72%, transparent);
}

.fw-cathelp__usps {
    display: grid;
    gap: 8px;
    padding: 0;
    list-style: none;
}

.fw-cathelp__usps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 600;
    font-size: 0.94rem;
}

.fw-cathelp__usps svg {
    width: 20px;
    height: 20px;
    padding: 4px;
    border-radius: 50%;
    background: var(--accent-color);
    fill: var(--accent-text-color);
    flex: none;
}

.fw-cathelp__actions {
    display: grid;
    gap: 10px;
}

.fw-cathelp:not(:has(.fw-cathelp__usps)) { grid-template-columns: minmax(0, 1fr) auto; }
.fw-cathelp:not(:has(.fw-cathelp__actions)):not(:has(.fw-cathelp__usps)) { grid-template-columns: minmax(0, 1fr); }

/* ---------- Progress: how far along the route ---------- */
.fw-catpage .category-pagination {
    margin-top: clamp(40px, 5vw, 56px);
    gap: 14px;
}

.fw-catprogress {
    position: relative;
    width: min(360px, 100%);
    height: 14px;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.fw-catprogress::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 3px dashed var(--border-color);
    transform: translateY(-1.5px);
}

.fw-catprogress span {
    position: absolute;
    left: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background: var(--brand-color);
}

.fw-catprogress span::after {
    content: "";
    position: absolute;
    right: -7px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--card-background-color);
    box-shadow: inset 0 0 0 4px var(--brand-color);
}

.fw-catpage .category-pagination__more { margin-top: 6px; }

/* ---------- Motion: the hero settles in, the route stops follow one by one ---------- */
.fw-cathero__copy > *,
.fw-cathero__photo {
    animation: fw-rise 0.8s var(--fw-ease) both;
}

.fw-cathero__copy > :nth-child(2) { animation-delay: 0.05s; }
.fw-cathero__copy > :nth-child(3) { animation-delay: 0.1s; }
.fw-cathero__copy > :nth-child(n+4) { animation-delay: 0.16s; }
.fw-cathero__photo { animation-delay: 0.12s; }

.fw-cathero__tag {
    animation: fw-swing 1.1s var(--fw-ease) 0.45s both;
    transform-origin: 0 50%;
}

@keyframes fw-swing {
    from { opacity: 0; transform: rotate(-7deg) translateY(10px); }
    55% { opacity: 1; transform: rotate(2deg); }
    to { opacity: 1; transform: none; }
}

.fw-catroute__stop {
    animation: fw-rise 0.6s var(--fw-ease) both;
    animation-delay: calc(0.25s + var(--fw-i, 0) * 0.07s);
}

.fw-catroute__stop:nth-child(2) { --fw-i: 1; }
.fw-catroute__stop:nth-child(3) { --fw-i: 2; }
.fw-catroute__stop:nth-child(4) { --fw-i: 3; }
.fw-catroute__stop:nth-child(5) { --fw-i: 4; }

@media (prefers-reduced-motion: reduce) {
    .fw-cathero__copy > *,
    .fw-cathero__photo,
    .fw-cathero__tag,
    .fw-catroute__stop { animation: none; }
    .fw-catroute__stop a,
    .fw-catroute__stop a:hover { transition: none; transform: none; }
}

/* ---------- Tablet and phone ---------- */
@media (max-width: 1080px) {
    .fw-catpage .category-layout { grid-template-columns: 236px minmax(0, 1fr); }
    .fw-cathelp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .fw-cathelp__actions { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; }
}

@media (max-width: 860px) {
    .fw-cathero--photo { grid-template-columns: minmax(0, 1fr); }
    .fw-cathero__visual { margin-left: 24px; }
    .fw-catpage .category-layout { grid-template-columns: minmax(0, 1fr); }
    .fw-catpage .category-sidebar { position: static; }
    .fw-catdesk { display: none; }
}

@media (max-width: 767px) {
    .fw-cathero { gap: 24px; }
    .fw-cathero__photo img { aspect-ratio: 4 / 3; }
    .fw-cathero__visual { margin-left: 16px; padding-bottom: 40px; }
    .fw-cathero__tag { left: -16px; width: min(280px, 92%); }

    /* The label above the road; the road runs to the screen edge. */
    .fw-catroute {
        flex-direction: column;
        align-items: stretch;
    }

    .fw-catroute__list {
        margin: 0 calc(var(--fw-gutter) * -1) !important;
        padding: 4px var(--fw-gutter) !important;
    }

    .fw-catpage .category-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .fw-catpage .category-toolbar__meta {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
    }

    .fw-sort { display: flex; width: 100%; }
    .fw-sort__label { display: none; }
    .fw-sort__chip { flex: 1 1 0; padding: 8px 6px; text-align: center; white-space: normal; }

    .fw-cathelp {
        grid-template-columns: minmax(0, 1fr);
        padding: 26px 22px 24px 54px;
    }

    .fw-cathelp::before { left: 16px; }
    .fw-cathelp::after { left: 40px; }
    .fw-cathelp__actions { grid-auto-flow: row; }
}