/* =========================================================================
   Spoke: an adaptive SitePack theme for local shops and businesses, round and cheerful
   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 {
    --sp-gutter: clamp(20px, 3vw, 40px);
    --sp-ease: cubic-bezier(.2, .7, .2, 1);
    /* Per-block reveal delay; theme.js sets it on siblings in a row. */
    --sp-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(--sp-gutter);
    padding-right: var(--sp-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(--sp-gutter);
    padding-right: var(--sp-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(--sp-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(--sp-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(--sp-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(--sp-gutter);
        padding-right: var(--sp-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(--sp-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(--sp-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(--sp-gutter);
}

.sitemap h1 {
    max-width: var(--page-width);
    margin: 0 auto 1rem;
    padding: 0 var(--sp-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(--sp-gutter);
        padding-right: var(--sp-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(--sp-gutter);
        padding-right: var(--sp-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;
    }
}


/* =========================================================================
   SPOKE LAYER
   The first Spoke pass on top of the shared base above: display typography,
   pill controls, sharper cards and the home sections (.sp-*). 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(--sp-gutter);
    padding-right: var(--sp-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 > .sp-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(.sp-home) {
    max-width: var(--page-width);
    padding-left: var(--sp-gutter);
    padding-right: var(--sp-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(--sp-gutter);
    padding-right: var(--sp-gutter);
}

/* ---------- Buttons ---------- */
.btn,
.btn-primary,
.sp-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,
.sp-btn:hover {
    transform: translateY(-1px);
}

.sp-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;
}

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

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

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

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

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

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

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

.sp-btn--glass,
.sp-btn--glass:hover,
.sp-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);
}

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

/* ---------- Eyebrows, links, heads ---------- */
.sp-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);
}

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

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

.sp-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);
}

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

.sp-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);
}

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

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

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

.sp-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. Spoke 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 to 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(--sp-gutter);
    padding-right: var(--sp-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 Spoke 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) ---------- */
.sp-page-head.sp-page-head {
    padding-top: 48px;
    padding-bottom: 28px;
}

.sp-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;
}

.sp-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;
}

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

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

.sp-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 ---------- */
.sp-article {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 56px var(--sp-gutter) 0;
}

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

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

.sp-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;
}

.sp-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;
}

.sp-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;
}

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

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

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

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

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

.sp-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;
}

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

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

/* ---------- 404 ---------- */
.sp-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;
}

.sp-404__code {
    position: absolute;
    right: var(--sp-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;
}

.sp-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(--sp-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. */
.sp-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(--sp-gutter);
    padding-right: var(--sp-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: sp-cookie-in 0.5s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes sp-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 */
    .sp-page-head.sp-page-head {
        padding-top: 28px;
        padding-bottom: 20px;
    }

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

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

    .sp-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 Spoke 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 Spoke 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(--sp-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(--sp-gutter));
    max-width: calc(var(--page-width) - 2 * var(--sp-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(> .sp-article) {
    background-color: var(--blog-background-color);
}

/* =========================================================================
   DEALER BASE
   Rounded sans type in sentence case, buttons, eyebrows, the open-now status, top bar and
   header. The SPOKE LOOK layer at the end of the file builds the theme's own look on top.
   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,
.sp-page-head__title,
.sitemap h1,
.sitemap h2,
.sitepack-cookiebar .sitepack-cookiebar-title,
.element-cta-banner-title {
    text-transform: none;
    letter-spacing: -0.01em;
}

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

/* ---------- Buttons ---------- */
.sp-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;
}

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

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

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

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

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

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

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

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

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

/* ---------- Eyebrows, links, heads ---------- */
.sp-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);
}

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

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

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

.sp-link-arrow,
.sp-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;
}

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

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

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

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

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

.sp-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;
}

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

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

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

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

.sp-open--open .sp-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,
.sp-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,
.sp-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);
}

.sp-mobile-cta { display: none; }

/* ---------- Blog cards (tag page, snippets/blog-card.twig) ---------- */
.sp-journal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sp-journal--posts { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.sp-story {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    color: var(--text-color);
}

.sp-story:hover { color: var(--text-color); }

.sp-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. */
.sp-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);
}

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

.sp-story:hover .sp-story__media img { transform: scale(1.05); }

.sp-story__meta {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted-text-color);
}

.sp-story__title {
    font-family: var(--heading-font);
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.sp-story:hover .sp-story__title {
    text-decoration: underline;
    text-decoration-color: var(--brand-color);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

.sp-story__excerpt { color: var(--muted-text-color); font-size: 0.95rem; }


/* ---------- Product page: visit-the-store band ---------- */
.pdp-stall .sp-open {
    display: flex;
    margin-top: 6px;
    font-size: 0.9rem;
}

.pdp-stall .sp-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; }

    .sp-mobile-cta:not([hidden]) {
        display: flex;
        max-width: none;
        padding-top: 12px;
        padding-bottom: 4px;
    }

    .sp-mobile-cta a.btn { flex: 1; min-height: 44px; }

    .site-header:has(.site-nav__list.menu-open) + .sp-mobile-cta { display: none; }

    .header-actions { gap: 0; }

}

@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; }

}

@media (prefers-reduced-motion: reduce) {
    .sp-btn, .sp-round-arrow, .sp-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.sp-nav-below .site-header__main {
        flex-wrap: wrap;
        row-gap: 0;
        padding-bottom: 0;
    }

    .site-header.sp-nav-below .header-actions {
        margin-left: auto;
    }

    .site-header.sp-nav-below .site-nav {
        order: 3;
        flex: 0 0 100%;
        padding: 6px 0;
        border-top: 1px solid var(--border-color);
    }

    .site-header.sp-nav-below .site-nav__list {
        flex-wrap: wrap;
        margin-left: -12px !important;
    }

    .site-header.sp-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. */
.sp-trail {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: clamp(14px, 1.8vw, 22px) var(--sp-gutter) 0;
}

.sp-trail:empty,
.sp-trail:has(#breadcrumbs .breadcrumb > li:only-child) {
    display: none;
}

.sp-trail #breadcrumbs {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Room between the trail and a full-width photo band, or the first text block. */
.sp-trail + main > :first-child {
    margin-top: clamp(14px, 1.8vw, 22px);
}

.sp-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(--sp-gutter) !important;
    padding-right: var(--sp-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(--sp-gutter);
    padding-right: var(--sp-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(--sp-gutter);
    padding-right: var(--sp-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 their
   edges. 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. */
.sp-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(.sp-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(--sp-gutter);
}

footer > .container-element iframe {
    display: block;
    max-width: 100%;
}

/* 5-Sterren Specialist widgets (review and NPS badges) arrive as bare iframes on custom
   themes, without the size the legacy theme CSS gave them, so the browser's 300x150
   default cut the badge off. These are the widget's own sizes. */
iframe[class^="fivestar-"] {
    display: block;
    width: 375px;
    max-width: 100%;
    border: 0;
}

.fivestar-size-small { height: 60px; }
.fivestar-size-large { height: 129px; }
.fivestar-nps-small { height: 105px; }
.fivestar-nps-large { height: 148px; }

/* ---------- 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. */
.sp-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.7s var(--sp-ease) var(--sp-delay),
        transform 0.8s var(--sp-ease) var(--sp-delay);
}

.sp-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: sp-rise 0.9s var(--sp-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 sp-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(--sp-ease), box-shadow 0.35s var(--sp-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(--sp-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 sp-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: sp-drop 0.25s var(--sp-ease) both;
}

/* Hamburger turns into a cross. */
.nav-toggle span {
    transition: transform 0.3s var(--sp-ease), opacity 0.2s ease;
}

/* Buttons: a press feels like a press (not on the header cart: see platform notes). */
main :is(.btn, .sp-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: sp-pop 0.4s var(--sp-ease) both;
}

@keyframes sp-pop {
    from { transform: scale(0.4); }
    60% { transform: scale(1.15); }
    to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-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(--sp-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(--sp-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; }
}

/* =========================================================================
   SPOKE LOOK
   Round and cheerful: circles and rings. Four ring colours (merchant settings ring-1 to
   ring-4) colour the quick links, category rings, icons and eyebrow dots; an abstract ring
   ornament (snippets/rings.twig, drawn in currentColor) turns slowly behind photos and bands;
   pill buttons, round stickers, a dark header that sits on the home photo. Kept last so it
   wins over the shared base and the layers above. Every colour is a merchant token.
   ========================================================================= */

/* ---------- Wheel colours ----------
   A component reads --sp-r (the colour) and --sp-rt (the text on it); .sp-ring-N picks
   which of the four. */
.sp-ring-1 { --sp-r: var(--ring-1-color); --sp-rt: var(--ring-1-text-color); }
.sp-ring-2 { --sp-r: var(--ring-2-color); --sp-rt: var(--ring-2-text-color); }
.sp-ring-3 { --sp-r: var(--ring-3-color); --sp-rt: var(--ring-3-text-color); }
.sp-ring-4 { --sp-r: var(--ring-4-color); --sp-rt: var(--ring-4-text-color); }

.sp-rings {
    display: block;
    pointer-events: none;
}

@keyframes sp-turn { to { transform: rotate(360deg); } }

.sp-turn { animation: sp-turn 80s linear infinite; }

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

/* Four dots in the ring colours, before every eyebrow. */
.sp-dots {
    display: inline-flex;
    gap: 4px;
    flex: none;
}

.sp-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ring-1-color);
}

.sp-dots i:nth-child(2) { background: var(--ring-2-color); }
.sp-dots i:nth-child(3) { background: var(--ring-3-color); }
.sp-dots i:nth-child(4) { background: var(--ring-4-color); }

/* ---------- Type ---------- */
body {
    line-height: 1.65;
}

h1, h2, h3, h4 {
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.06;
}

.sp-head__title {
    margin: 0;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.04;
}

.sp-highlight,
.sp-hero__highlight {
    font-family: var(--heading-font);
    color: var(--ring-1-color);
}

.sp-lead {
    font-size: 1.12rem;
    max-width: 580px;
}

/* ---------- Eyebrow ---------- */
.sp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-family: var(--heading-font);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-text-color);
}

.sp-eyebrow--on-dark { color: inherit; opacity: 0.88; }

.sp-head {
    align-items: flex-end;
    margin-bottom: clamp(28px, 3.4vw, 44px);
}

.sp-head > div { min-width: 0; }

.sp-link-arrow,
.sp-link-arrow:hover {
    padding-bottom: 3px;
    border-bottom: 2px solid var(--brand-color);
    font-family: var(--heading-font);
    font-weight: 600;
    color: var(--text-color);
}

/* ---------- Buttons: pills in the heading font ---------- */
.sp-btn {
    min-height: 54px;
    padding: 0.8rem 1.7rem;
    border-radius: var(--button-radius);
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 1rem;
}

.sp-btn svg { width: 19px; height: 19px; }

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

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

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

.sp-btn--dark:hover { background: color-mix(in srgb, var(--accent-color) 84%, var(--background-color)); }

.sp-btn--outline,
.sp-btn--outline:hover,
.sp-btn--outline:focus,
.sp-btn--ghost,
.sp-btn--ghost:hover,
.sp-btn--ghost:focus {
    background: transparent;
    border-color: currentColor;
    color: inherit;
}

.sp-btn--outline:hover,
.sp-btn--ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

:is(.pdp, .pdp-stall, .category-help, .cart, main) :is(.btn, .btn-primary, .btn-dark, button[type="submit"]) {
    border-radius: var(--button-radius);
    font-family: var(--heading-font);
    font-weight: 600;
}

/* ---------- Top bar ---------- */
.topbar {
    background: var(--header-topbar-color);
    color: var(--header-topbar-text-color);
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: 14.5px;
}

.topbar__inner { padding-top: 8px; padding-bottom: 8px; }

.topbar__core + .topbar__status {
    padding-left: 0;
    border-left: 0;
}

.topbar__status .sp-open {
    padding: 4px 14px 4px 10px;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--accent-text-color);
    font-size: 13.5px;
    font-weight: 500;
}

.topbar__status .sp-open__dot { opacity: 1; }

/* ---------- Header: dark, uppercase menu with a brand underline ---------- */
.site-header {
    background: var(--header-background-color);
    border-bottom: 0;
    color: var(--header-text-color);
}

.site-header__main {
    gap: clamp(16px, 2vw, 28px);
    min-height: 96px;
}

.brand .site-name { color: var(--header-text-color); }

.site-header .site-nav__list {
    gap: clamp(4px, 0.85vw, 14px);
    font-family: var(--heading-font);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.site-nav .site-nav__list > li > a,
.site-nav .site-nav__list > li:first-child > a {
    padding: 10px 2px;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--header-text-color);
}

.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 {
    background: transparent;
    color: var(--header-text-color);
    border-bottom: 3px solid var(--brand-color);
}

.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,
.sp-mobile-cta a.btn {
    padding: 0.6rem 1.3rem;
    border: 0;
    border-radius: var(--button-radius);
    background: var(--brand-color);
    color: var(--brand-text-color);
}

.header-icon,
.header-cart,
.header-cart:hover {
    width: 48px;
    height: 48px;
    color: var(--header-text-color);
}

.header-icon:hover,
.header-icon[aria-expanded="true"],
.header-cart:hover {
    background: color-mix(in srgb, var(--header-text-color) 14%, transparent);
    color: var(--header-text-color);
}

/* The cart: a brand-colour disc with the count on a small light bubble. */
.header-cart,
.header-cart:hover {
    background: var(--brand-color);
}

.header-cart .sitepack-shopping-cart-container .sitepack-shopping-cart-trigger::before {
    background: var(--brand-text-color);
}

.header-cart .sitepack-shopping-cart-container .sitepack-shopping-cart-trigger .sitepack-cart-count {
    top: -16px;
    right: -18px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    background: var(--header-text-color);
    color: var(--header-background-color);
    font-weight: 700;
}

.header-search {
    border-top: 1px solid color-mix(in srgb, var(--header-text-color) 14%, transparent);
    background: var(--header-background-color);
}

/* A long menu on its own row: a quiet divider in the header text colour. */
@media (min-width: 1081px) {
    .site-header.sp-nav-below .site-nav {
        border-top-color: color-mix(in srgb, var(--header-text-color) 16%, transparent);
    }
}

/* ---------- Home: the header sits on the hero photo ----------
   The hero pulls itself up under the sticky header (theme.js keeps --sp-header-h at the
   header's height); until the page scrolls, the header is see-through. */
:root { --sp-header-h: 96px; }

body:has(.sp-hero--photo) .site-header:not(.is-scrolled):not(:has(.menu-open)):not(:has(.header-search:not([hidden]))) {
    /* On the photo the header takes the hero text colour, so a light header setting stays
       readable there too. */
    --header-text-color: var(--hero-text-color);
    background: transparent;
    box-shadow: none;
}

body:has(.sp-hero--photo) .site-header {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.sp-hero--photo {
    margin-top: calc(-1 * var(--sp-header-h));
}

/* The phone bar with the header button would sit between the see-through header and the
   photo; on these pages the button stays in the menu panel only. */
@media (max-width: 1080px) {
    body:has(.sp-hero--photo) .sp-mobile-cta { display: none !important; }
}

/* ---------- Home rhythm ---------- */
main > .sp-home {
    max-width: none;
    padding: 0;
}

.sp-home { overflow-x: clip; }

.sp-section { padding-top: var(--section-spacing); }

.sp-section > .container-element { max-width: var(--page-width); }

.sp-home > :last-child { margin-bottom: 0; }

.sp-home > .sp-section:last-child { padding-bottom: var(--section-spacing); }

/* ---------- Hero ---------- */
.sp-hero {
    position: relative;
    display: flex;
    min-height: var(--hero-height);
    overflow: hidden;
    color: var(--hero-text-color);
    background: var(--hero-overlay-color);
}

.sp-hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
}

.sp-hero--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--hero-overlay-color) 80%, transparent) 0%, color-mix(in srgb, var(--hero-overlay-color) 35%, transparent) 50%, transparent 75%),
        linear-gradient(0deg, color-mix(in srgb, var(--hero-overlay-color) 55%, transparent), transparent 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--hero-overlay-color) 60%, transparent), transparent 24%);
}

.sp-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 40px;
    width: 100%;
    max-width: var(--page-width);
    margin: 0 auto;
    padding-top: calc(var(--sp-header-h) + 48px);
    padding-bottom: clamp(40px, 5vw, 72px);
}

.sp-hero__copy { max-width: 760px; }

.sp-hero__title {
    margin: 0;
    font-size: clamp(2.6rem, 5.6vw, 5.4rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    color: inherit;
}

.sp-hero__highlight { display: block; }

.sp-hero__text {
    max-width: 540px;
    margin: 22px 0 0;
    font-size: 1.25rem;
    color: inherit;
    opacity: 0.92;
}

.sp-hero .sp-actions { margin-top: 32px; }

/* Wide screens: the circles sit bottom-right on the photo and the title takes the full width
   above them; the intro and buttons stay narrow enough to pass them. */
@media (min-width: 1181px) {
    .sp-hero--photo .sp-hero__inner { grid-template-columns: minmax(0, 1fr); }
    .sp-hero--photo .sp-hero__copy { max-width: 800px; }
    .sp-hero--photo .sp-quick {
        position: absolute;
        right: var(--sp-gutter);
        bottom: clamp(40px, 5vw, 72px);
    }
}

/* Four colour circles as quick links. */
.sp-quick {
    display: grid;
    justify-items: end;
    gap: 14px;
}

.sp-quick__label {
    font-family: var(--heading-font);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.88;
}

.sp-quick__list.sp-quick__list {
    display: flex;
    gap: 16px;
    margin: 0 !important;
    padding: 0;
    list-style: none;
    max-width: none;
    width: auto;
}

.sp-quick__item,
.sp-quick__item:hover,
.sp-quick__item:focus {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: clamp(118px, 10.4vw, 150px);
    aspect-ratio: 1;
    padding: 12px;
    border-radius: 50%;
    background: var(--sp-r);
    color: var(--sp-rt);
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.15;
    text-align: center;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--hero-text-color) 18%, transparent);
    transition: transform 0.25s ease;
}

.sp-quick__item:hover { transform: translateY(-6px) rotate(-4deg); }

.sp-quick__item svg {
    width: 38px;
    height: 38px;
    fill: currentColor;
}

/* Without a photo: a brand-colour panel with the rings and a popular product in a circle. */
.sp-hero--panel {
    background: var(--brand-color);
    color: var(--brand-text-color);
    min-height: 0;
}

.sp-hero--panel .sp-hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "copy product" "nav nav";
    padding-top: clamp(48px, 6vw, 88px);
}

.sp-hero--panel .sp-hero__copy { grid-area: copy; }
.sp-hero--panel .sp-quick { grid-area: nav; justify-items: start; }
/* On the brand panel a circle in the brand colour keeps a visible edge. */
.sp-hero--panel .sp-quick__item { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--brand-text-color) 28%, transparent); }

.sp-hero__rings {
    position: absolute;
    width: 760px;
    right: -180px;
    top: -220px;
    color: color-mix(in srgb, var(--brand-text-color) 10%, transparent);
}

.sp-hero__product {
    grid-area: product;
    display: grid;
    place-items: center;
    width: clamp(240px, 26vw, 380px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--image-background-color);
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--brand-text-color) 14%, transparent);
    overflow: hidden;
}

.sp-hero__product img {
    width: 86%;
    height: 86%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* ---------- USPs ---------- */
.sp-usps {
    background: var(--warm-surface-color);
    color: var(--warm-surface-text-color);
    border-bottom: 1px solid var(--border-color);
}

.sp-usps__list.sp-usps__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px;
    max-width: var(--page-width);
    margin: 0 auto !important;
    padding-top: 24px;
    padding-bottom: 24px;
    list-style: none;
}

.sp-usp {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sp-usp__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--sp-r);
    color: var(--sp-rt);
    flex: none;
}

.sp-usp__icon svg { width: 18px; height: 18px; fill: currentColor; }

.sp-usp__body { display: grid; line-height: 1.3; }

.sp-usp__body strong {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 0.98rem;
}

.sp-usp__body span { font-size: 0.86rem; color: var(--muted-text-color); }

/* ---------- Categories: round tiles with a ring-colour ring ---------- */
.sp-cats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2.6vw, 36px);
}

.sp-cats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-cats--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.sp-cat,
.sp-cat:hover,
.sp-cat:focus {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--text-color);
}

.sp-cat__ring {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    min-height: 0;
    overflow: hidden;
    padding: clamp(8px, 1vw, 14px);
    border-radius: 50%;
    background: var(--sp-r);
    transition: transform 0.35s ease;
}

.sp-cat:hover .sp-cat__ring { transform: rotate(-6deg) scale(1.02); }

.sp-cat__media {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 6px solid var(--image-background-color);
    background: var(--image-background-color);
    overflow: hidden;
}

.sp-cat__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8%;
    mix-blend-mode: multiply;
}

.sp-cat__rings {
    position: absolute;
    inset: clamp(8px, 1vw, 14px);
    z-index: 1;
    width: calc(100% - 2 * clamp(8px, 1vw, 14px));
    color: color-mix(in srgb, var(--text-color) 6%, transparent);
}

.sp-cat__initial {
    font-family: var(--heading-font);
    font-size: 3.4rem;
    font-weight: 700;
    color: var(--sp-r);
}

.sp-cat__name {
    margin-top: 20px;
    font-family: var(--heading-font);
    font-size: clamp(1.15rem, 1.8vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sp-cat__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.92rem;
    color: var(--muted-text-color);
}

.sp-cat__cta svg { width: 14px; height: 14px; fill: currentColor; transition: transform 0.2s; }
.sp-cat:hover .sp-cat__cta svg { transform: translateX(3px); }

/* ---------- Product cards ---------- */
.sp-products.sp-products,
.sp-section .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    max-width: none;
    margin: 0;
    padding: 0;
}

.product-card {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-background-color);
    overflow: hidden;
    transition: translate 0.25s ease, box-shadow 0.25s ease;
}

.product-card:hover {
    translate: 0 -4px;
    box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--shadow-color) 45%, transparent);
}

.product-card .product-image {
    aspect-ratio: 4 / 3;
    margin: 0;
    border-radius: 0;
    background: var(--image-background-color);
}

.product-card .product-image img {
    position: relative;
    z-index: 1;
    padding: 6%;
}

.product-image__rings {
    position: absolute;
    width: 78%;
    right: -22%;
    bottom: -32%;
    color: color-mix(in srgb, var(--text-color) 6%, transparent);
}

/* The sale badge: a round sticker, slightly turned. */
.product-card .product-badge--sale,
.pdp-gallery__badge.product-badge--sale {
    top: 14px;
    left: 14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    padding: 0;
    border-radius: 50%;
    background: var(--label-background-color);
    color: var(--label-text-color);
    font-family: var(--heading-font);
    font-size: 15px;
    letter-spacing: 0;
    transform: rotate(-12deg);
    box-shadow: 0 0 0 4px var(--card-background-color);
}

.product-card .product-badge::before { display: none; }

.product-card .product-information {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "meta meta" "title title" "price view";
    grid-template-rows: auto 1fr auto;
    align-items: start;
    gap: 2px 12px;
    flex: 1;
    padding: 18px 20px 20px;
}

.product-card .product-meta {
    grid-area: meta;
    margin: 0;
    font-family: var(--heading-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-text-color);
}

.product-card .product-title {
    grid-area: title;
    align-self: start;
    margin-bottom: 12px;
}

.product-card .product-title h3 {
    margin: 0;
    font-family: var(--heading-font);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.01em;
}

.product-card .product-price {
    grid-area: price;
    align-self: end;
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.product-card .product-price .new-price {
    order: 2;
    font-family: var(--heading-font);
    font-size: 1.3rem;
    font-weight: 700;
}

.product-card .product-price .old-price { order: 1; font-size: 0.88rem; }

.product-card .product-view,
.product-card:hover .product-view {
    grid-area: view;
    align-self: end;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--accent-text-color);
    transition: background-color 0.2s, color 0.2s;
}

.product-card:hover .product-view {
    background: var(--brand-color);
    color: var(--brand-text-color);
}

.product-card .product-view svg { width: 17px; height: 17px; fill: currentColor; }

/* ---------- Band: dark band, turning rings, up to four items ---------- */
.sp-band {
    position: relative;
    margin-top: var(--section-spacing);
    padding-bottom: var(--section-spacing);
    overflow: hidden;
    background: var(--dark-surface-color);
    color: var(--dark-surface-text-color);
}

.sp-band + .sp-section { padding-top: var(--section-spacing); }

.sp-band__rings {
    position: absolute;
    width: 760px;
    left: -260px;
    top: -140px;
    color: color-mix(in srgb, var(--ring-1-color) 18%, transparent);
}

.sp-band__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
    max-width: var(--page-width);
}

.sp-band__inner--text { grid-template-columns: minmax(0, 760px); }

.sp-band .sp-eyebrow,
.sp-band .sp-lead { color: color-mix(in srgb, var(--dark-surface-text-color) 80%, transparent); }

.sp-band .sp-head__title { color: inherit; font-size: clamp(2.1rem, 4vw, 3.5rem); }

.sp-promise {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 28px 0 0;
    padding: 14px 22px 14px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dark-surface-text-color) 8%, transparent);
    font-family: var(--heading-font);
    font-weight: 500;
    line-height: 1.35;
}

.sp-promise__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--sp-r);
    color: var(--sp-rt);
    flex: none;
}

.sp-promise__icon svg { width: 22px; height: 22px; fill: currentColor; }

.sp-services.sp-services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 0 !important;
    padding: 0;
    list-style: none;
    max-width: none;
}

.sp-service {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 26px;
    border: 1px solid color-mix(in srgb, var(--dark-surface-text-color) 14%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--dark-surface-text-color) 6%, transparent);
}

.sp-service__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--sp-r);
    color: var(--sp-rt);
}

.sp-service__icon svg { width: 26px; height: 26px; fill: currentColor; }

.sp-service__title {
    font-family: var(--heading-font);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.sp-service__text {
    font-size: 0.96rem;
    color: color-mix(in srgb, var(--dark-surface-text-color) 74%, transparent);
}

.sp-service__price {
    margin-top: 8px;
    font-family: var(--heading-font);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ring-1-color);
}

/* ---------- Brands ---------- */
.sp-brands__title {
    margin: 0 0 14px;
    font-family: var(--heading-font);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    color: var(--muted-text-color);
}

.sp-brands__list.sp-brands__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 18px 40px;
    max-width: none;
    margin: 0 !important;
    padding: clamp(22px, 2.6vw, 34px) clamp(24px, 4vw, 56px);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    list-style: none;
}

.sp-brands__list span {
    font-family: var(--heading-font);
    font-size: clamp(1.3rem, 2.2vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--subtle-text-color);
}

.sp-brands__list img {
    display: block;
    max-height: 48px;
    max-width: 150px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.2s, opacity 0.2s;
}

.sp-brands__list li:hover img { filter: none; opacity: 1; }

/* ---------- Visit us ---------- */
.sp-visit {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    border-radius: calc(var(--radius) * 1.6);
    overflow: hidden;
    background: var(--visit-background-color);
    color: var(--visit-text-color);
}

.sp-visit--text { grid-template-columns: minmax(0, 1fr); }

.sp-visit__photo {
    position: relative;
    min-height: 520px;
}

.sp-visit__photo > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-visit__photo--product { background: var(--image-background-color); }

.sp-visit__photo--product > img {
    object-fit: contain;
    padding: 8%;
    mix-blend-mode: multiply;
}

.sp-stamp {
    position: absolute;
    z-index: 2;
    right: -70px;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 140px;
    height: 140px;
    padding: 16px;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--accent-text-color);
    font-family: var(--heading-font);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transform: translateY(-50%) rotate(-10deg);
    box-shadow: 0 0 0 8px var(--visit-background-color);
}

.sp-stamp svg {
    width: 32px;
    height: 32px;
    fill: var(--brand-color);
}

.sp-visit__body {
    padding: clamp(36px, 5vw, 64px) clamp(28px, 5vw, 64px) clamp(36px, 5vw, 64px) clamp(28px, 7.6vw, 110px);
}

.sp-visit--text .sp-visit__body { padding-left: clamp(28px, 5vw, 64px); }

.sp-visit .sp-eyebrow { color: inherit; opacity: 0.78; }

.sp-visit .sp-dots i { background: currentColor; }

.sp-visit .sp-head__title { color: inherit; }

.sp-visit .sp-lead { color: inherit; opacity: 0.9; }

.sp-visit__address {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 22px 0 18px;
    font-family: var(--heading-font);
    font-style: normal;
    font-weight: 500;
}

.sp-visit__address svg { width: 22px; height: 22px; fill: currentColor; flex: none; margin-top: 2px; }

.sp-hours {
    width: 100%;
    border-collapse: collapse;
}

.sp-hours th,
.sp-hours td {
    padding: 8px 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    text-align: left;
    font-weight: 400;
}

.sp-hours td {
    text-align: right;
    font-family: var(--heading-font);
    font-weight: 500;
}

.sp-hours td.is-closed { opacity: 0.7; }

.sp-hours tr.is-today :is(th, td) { font-weight: 700; }

.sp-hours tr.is-today th::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border-radius: 50%;
    background: currentColor;
}

.sp-visit .sp-actions { margin-top: 28px; }

/* ---------- Reviews ---------- */
.sp-reviews__grid {
    display: grid;
    grid-template-columns: minmax(260px, 340px) repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.sp-reviews__grid--quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sp-score {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px;
    border-radius: var(--radius);
    background: var(--dark-surface-color);
    color: var(--dark-surface-text-color);
}

.sp-score__value {
    font-family: var(--heading-font);
    font-size: clamp(3.6rem, 6vw, 5.2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
}

.sp-score__value small {
    font-size: 0.34em;
    letter-spacing: 0;
    opacity: 0.55;
}

.sp-score__facts {
    display: grid;
    gap: 6px;
    margin: auto 0 0;
}

.sp-score__facts div { display: flex; gap: 8px; align-items: baseline; }

.sp-score__facts dt { font-family: var(--heading-font); font-weight: 700; }

.sp-score__facts dd { margin: 0; opacity: 0.72; font-size: 0.92rem; }

/* Stars filled to the score: a quiet row with the rating-colour row clipped on top. */
.sp-stars {
    position: relative;
    display: block;
    width: 120px;
    height: 22px;
    background: color-mix(in srgb, currentColor 22%, transparent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 1l3.1 6.6 7.1.9-5.2 4.9 1.3 7.1L12 17l-6.3 3.5 1.3-7.1L1.8 8.5l7.1-.9z'/%3E%3C/svg%3E") 0 0 / 24px 22px repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 1l3.1 6.6 7.1.9-5.2 4.9 1.3 7.1L12 17l-6.3 3.5 1.3-7.1L1.8 8.5l7.1-.9z'/%3E%3C/svg%3E") 0 0 / 24px 22px repeat-x;
}

.sp-stars__fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--rating-color);
}

.sp-quote {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 30px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-background-color);
}

.sp-quote__score {
    align-self: flex-start;
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--warm-surface-color);
    color: var(--warm-surface-text-color);
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.9rem;
}

.sp-quote blockquote {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
}

.sp-quote__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    line-height: 1.3;
}

.sp-quote__author strong { display: block; font-family: var(--heading-font); font-weight: 600; }
.sp-quote__author small { color: var(--subtle-text-color); }

.sp-quote__initial {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sp-r);
    color: var(--sp-rt);
    font-family: var(--heading-font);
    font-weight: 700;
    flex: none;
}

/* ---------- Blog ---------- */
.sp-posts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.sp-post,
.sp-post:hover,
.sp-post:focus {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text-color);
}

.sp-post__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    margin-bottom: 10px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-color);
}

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

.sp-post:hover .sp-post__media img { transform: scale(1.04); }

.sp-post__initial {
    font-family: var(--heading-font);
    font-size: 4rem;
    font-weight: 700;
    color: var(--brand-color);
}

.sp-post__tag {
    position: absolute;
    left: 16px;
    top: 16px;
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--card-background-color);
    color: var(--text-color);
    font-family: var(--heading-font);
    font-size: 0.82rem;
    font-weight: 600;
}

.sp-post__title {
    font-family: var(--heading-font);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.sp-post__excerpt { color: var(--muted-text-color); font-size: 0.98rem; }

.sp-post__meta {
    font-family: var(--heading-font);
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--subtle-text-color);
}

/* ---------- Newsletter: a brand-colour band ---------- */
.sp-newsletter {
    position: relative;
    margin-top: var(--section-spacing);
    overflow: hidden;
    background: var(--newsletter-background-color);
    color: var(--newsletter-text-color);
}

.sp-newsletter__rings {
    position: absolute;
    width: 380px;
    right: 30%;
    top: -170px;
    color: color-mix(in srgb, var(--newsletter-text-color) 7%, transparent);
}

.sp-newsletter__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    max-width: var(--page-width);
    padding-top: clamp(44px, 5vw, 64px);
    padding-bottom: clamp(44px, 5vw, 64px);
}

.sp-newsletter__title {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: inherit;
}

.sp-newsletter__text { margin: 8px 0 0; opacity: 0.85; }

.sp-newsletter__form { flex: 0 1 520px; }

.sp-newsletter .sitepack-newsletter-form__intro { display: none; }

.sp-newsletter .sitepack-newsletter-form__row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 7px;
    border-radius: 999px;
    background: var(--input-background-color);
}

.sp-newsletter .sitepack-newsletter-form__email,
.sp-newsletter .sitepack-newsletter-form__email:focus {
    flex: 1;
    min-width: 0;
    padding: 0 18px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text-color);
    box-shadow: none;
}

.sp-newsletter button,
.sp-newsletter .sitepack-newsletter-form__button {
    flex: none;
    width: auto;
    min-height: 50px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--accent-text-color);
    font-family: var(--heading-font);
    font-weight: 600;
    cursor: pointer;
}

/* ---------- Footer: a four-colour stripe on top ---------- */
footer {
    position: relative;
    border-radius: 0;
}

footer::before {
    content: "";
    display: block;
    height: 8px;
    background: linear-gradient(90deg, var(--ring-1-color) 0 25%, var(--ring-2-color) 25% 50%, var(--ring-3-color) 50% 75%, var(--ring-4-color) 75%);
}

body:has(.sp-newsletter) footer { margin-top: 0; }

/* ---------- Category page: brand band with a curved edge and the rings ---------- */
main > .sp-cat-hero,
main > .sp-subcats {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.sp-cat-hero {
    position: relative;
    overflow: hidden;
    background: var(--category-hero-color);
    color: var(--category-hero-text-color);
    border-radius: 0 0 50% 50% / 0 0 64px 64px;
}

.sp-cat-hero__bg {
    position: absolute;
    width: 640px;
    left: 34%;
    top: -300px;
    color: color-mix(in srgb, var(--category-hero-text-color) 9%, transparent);
}

.sp-cat-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    max-width: var(--page-width);
    margin: 0 auto;
    padding-top: clamp(24px, 3vw, 40px);
    padding-bottom: clamp(72px, 8vw, 104px);
    padding-left: var(--sp-gutter);
    padding-right: var(--sp-gutter);
}

.sp-cat-hero:not(.sp-cat-hero--photo) .sp-cat-hero__inner { grid-template-columns: minmax(0, 1fr); }

.sp-cat-hero .category-breadcrumb { margin: 0; }

.sp-cat-hero .category-breadcrumb,
.sp-cat-hero .category-breadcrumb a,
.sp-cat-hero .category-breadcrumb__current { color: inherit; }

.sp-cat-hero .category-breadcrumb a { opacity: 0.75; }

.sp-cat-hero .category-breadcrumb__current { font-weight: 600; }

.sp-cat-hero .category-breadcrumb__sep svg { width: 12px; height: 12px; fill: currentColor; }

.sp-cat-hero__title {
    margin: clamp(20px, 3vw, 36px) 0 16px;
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
    color: inherit;
}

.sp-cat-hero__intro {
    max-width: 580px;
    margin: 0;
    font-size: 1.15rem;
}

.sp-cat-hero__chip {
    display: inline-flex;
    margin-top: 24px;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--accent-text-color);
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 0.95rem;
}

.sp-cat-hero__frame {
    position: relative;
    justify-self: end;
    width: clamp(300px, 32vw, 450px);
    aspect-ratio: 1;
}

.sp-cat-hero__ring {
    position: absolute;
    inset: 0;
    color: var(--accent-color);
}

.sp-cat-hero__photo {
    position: absolute;
    inset: 13%;
    display: block;
    border-radius: 50%;
    overflow: hidden;
    background: var(--image-background-color);
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--category-hero-text-color) 12%, transparent);
}

/* The photo is taken out of the flow and pinned to the circle, so its own proportions (a
   landscape product shot) can never size the frame: a landscape photo only fits a circle
   whole inside the inscribed rectangle, hence the larger vertical padding. */
.sp-cat-hero__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    padding: 13% 9%;
    box-sizing: border-box;
    mix-blend-mode: multiply;
}

.sp-cat-hero__sticker {
    position: absolute;
    left: -18px;
    bottom: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: var(--ring-2-color);
    color: var(--ring-2-text-color);
    font-family: var(--heading-font);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    transform: rotate(-10deg);
    /* A thin outer line keeps the sticker visible when ring colour 2 equals the band. */
    box-shadow: 0 0 0 6px var(--category-hero-color), 0 0 0 8px color-mix(in srgb, var(--category-hero-text-color) 35%, transparent);
}

.sp-cat-hero__sticker strong { font-size: 2rem; font-weight: 700; }

/* Sub-categories hang over the curve as circles. */
.sp-subcats {
    position: relative;
    z-index: 2;
    margin-top: -62px;
}

.sp-subcats__list.sp-subcats__list {
    display: flex;
    justify-content: center;
    gap: clamp(14px, 2vw, 28px);
    max-width: var(--page-width);
    margin: 0 auto !important;
    padding: 6px var(--sp-gutter);
    list-style: none;
}

.sp-subcat,
.sp-subcat:hover,
.sp-subcat:focus {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 132px;
    text-align: center;
    color: var(--text-color);
}

.sp-subcat__circle {
    display: grid;
    place-items: center;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--image-background-color);
    box-shadow: 0 0 0 6px var(--sp-r), 0 14px 30px -14px color-mix(in srgb, var(--shadow-color) 45%, transparent);
    transition: transform 0.25s ease;
}

.sp-subcat:hover .sp-subcat__circle { transform: translateY(-4px); }

.sp-subcat__circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8%;
    mix-blend-mode: multiply;
}

.sp-subcat__rings {
    width: 70%;
    color: var(--sp-r);
}

.sp-subcat__name {
    font-family: var(--heading-font);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.2;
}

main > .category-page { padding-top: clamp(36px, 4vw, 56px); }

.sp-subcats + .category-page { padding-top: 40px; }

/* Help tile in the grid: a ring-colour 3 card. */
.category-help {
    grid-column: auto;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 32px;
    border: 0;
    border-radius: var(--radius);
    background: var(--ring-3-color);
    color: var(--ring-3-text-color);
}

.category-help > div { position: relative; }

.category-help__title {
    font-family: var(--heading-font);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.category-help__text { margin-top: 10px; }

.category-help .btn {
    position: relative;
    align-self: flex-start;
    background: var(--accent-color);
    color: var(--accent-text-color);
    border: 0;
}

.category-help__rings {
    position: absolute;
    width: 300px;
    right: -110px;
    bottom: -110px;
    color: color-mix(in srgb, var(--ring-3-text-color) 12%, transparent);
}

.category-products-grid .product-card { height: auto; }

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

.active-chip {
    border-radius: 999px;
    background: var(--warm-surface-color);
    color: var(--warm-surface-text-color);
    font-family: var(--heading-font);
    font-weight: 600;
}

/* ---------- Product page ---------- */
@media (min-width: 993px) {
    .pdp__main { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 64px); }
}

.pdp-gallery,
.pdp-gallery:not(:has(.pdp-gallery__thumbs)) {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pdp-gallery__stage,
.pdp-gallery:not(:has(.pdp-gallery__thumbs)) .pdp-gallery__stage {
    order: -1;
    width: 100%;
    max-width: none;
    aspect-ratio: 4 / 3;
    border-radius: calc(var(--radius) * 1.4);
    background: var(--image-background-color);
}

.pdp-gallery__stage img { position: relative; z-index: 1; }

.pdp-gallery__rings {
    position: absolute;
    width: 74%;
    right: -14%;
    top: -18%;
    color: color-mix(in srgb, var(--brand-color) 18%, transparent);
}

.pdp-gallery__badge.product-badge--sale {
    width: 82px;
    height: 82px;
    top: 22px;
    left: 22px;
    font-size: 17px;
    box-shadow: 0 0 0 5px var(--image-background-color);
}

.pdp-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    flex-direction: row;
    gap: 14px;
}

.pdp-gallery__thumb {
    aspect-ratio: 1;
    border: 3px solid transparent;
    border-radius: 50%;
    background: var(--image-background-color);
}

.pdp-gallery__thumb img {
    object-fit: contain;
    padding: 8%;
    mix-blend-mode: multiply;
}

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

.pdp-info__brand {
    font-family: var(--heading-font);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-text-color);
}

.pdp-info__title {
    margin: 8px 0 18px;
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.04;
}

.pdp-info__price-row { align-items: baseline; gap: 6px 14px; }

.pdp-price {
    font-family: var(--heading-font);
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}

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

.pdp-price__old { font-family: var(--heading-font); font-size: 1.2rem; }

.pdp-info__intro { color: var(--muted-text-color); font-size: 1.05rem; }

.pdp-buy__submit,
.pdp-buy .btn-primary {
    min-height: 58px;
    border-radius: var(--button-radius);
    background: var(--brand-color);
    border-color: var(--brand-color);
    color: var(--brand-text-color);
    font-size: 1.05rem;
}

.pdp-qty { border-radius: var(--button-radius); }

.pdp-info .sp-variant-options { margin-top: 24px; }

.pdp-info .sp-variant-option { margin-bottom: 18px; }

.pdp-info .sp-variant-option__label { font-family: var(--heading-font); margin-bottom: 10px; }

.pdp-info .sp-variant-value:not(.sp-variant-value--swatch) {
    min-width: 64px;
    min-height: 46px;
    padding: 0.5rem 1.1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--button-radius);
    font-family: var(--heading-font);
    font-weight: 600;
}

.pdp-info .sp-variant-value:not(.sp-variant-value--swatch):hover { border-color: var(--text-color); }

.pdp-info .sp-variant-value.is-active:not(.sp-variant-value--swatch) {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--accent-text-color);
}

.pdp-usps__dot {
    width: 10px;
    height: 10px;
    margin-top: 7px;
    background: var(--open-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--open-color) 25%, transparent);
}

.pdp-advice {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: var(--warm-surface-color);
    color: var(--warm-surface-text-color);
}

.pdp-advice__icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--sp-r);
    color: var(--sp-rt);
    flex: none;
}

.pdp-advice__icon svg { width: 24px; height: 24px; fill: currentColor; }

.pdp-advice__body { display: grid; flex: 1; line-height: 1.4; }

.pdp-advice__body strong { font-family: var(--heading-font); font-weight: 600; }

.pdp-advice__body span { font-size: 0.95rem; }

.pdp-advice__cta.sp-btn { min-height: 44px; padding: 0.5rem 1.1rem; font-size: 0.92rem; }

.pdp-promises.pdp-promises {
    display: grid;
    gap: 12px;
    margin: 22px 0 0 !important;
    padding: 0;
    list-style: none;
    max-width: none;
}

.pdp-promises li { display: flex; align-items: center; gap: 12px; }

.pdp-promises__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sp-r);
    color: var(--sp-rt);
    flex: none;
}

.pdp-promises__icon svg { width: 15px; height: 15px; fill: currentColor; }

/* Key specs: five round-icon cards under the product. */
main > .pdp-keyspecs,
main > .pdp-details {
    max-width: var(--page-width);
    padding-left: var(--sp-gutter);
    padding-right: var(--sp-gutter);
}

.pdp-keyspecs { margin-top: clamp(56px, 7vw, 88px); }

.pdp-keyspecs__list.pdp-keyspecs__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    max-width: none;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

.pdp-keyspec {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 26px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    text-align: center;
}

.pdp-keyspec__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--sp-r);
    color: var(--sp-rt);
}

.pdp-keyspec__rings { width: 44px; }

.pdp-keyspec strong {
    font-family: var(--heading-font);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.pdp-keyspec span { color: var(--muted-text-color); font-size: 0.92rem; }

/* Description and specifications side by side. */
.pdp-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(36px, 5vw, 64px);
    margin-top: clamp(48px, 6vw, 72px);
}

.pdp-details--single { grid-template-columns: minmax(0, 860px); }

.pdp-details__title {
    margin: 0 0 18px;
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
}

.pdp-details__body { line-height: 1.7; }

.pdp-details__pdf { margin-top: 20px; }

.pdp-spec-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.pdp-spec-table th,
.pdp-spec-table td {
    padding: 13px 18px;
    text-align: left;
    vertical-align: top;
}

.pdp-spec-table th {
    width: 44%;
    font-weight: 400;
    color: var(--muted-text-color);
    border-radius: 12px 0 0 12px;
}

.pdp-spec-table td {
    font-family: var(--heading-font);
    font-weight: 500;
    border-radius: 0 12px 12px 0;
}

.pdp-spec-table tr:nth-child(odd) :is(th, td) {
    background: var(--warm-surface-color);
    color: var(--warm-surface-text-color);
}

/* Visit-the-store band under the product: dark, with the turning rings. */
.pdp-stall {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--radius) * 1.4);
    background: var(--dark-surface-color);
    color: var(--dark-surface-text-color);
}

.pdp-stall > :not(.pdp-stall__rings) { position: relative; }

.pdp-stall__rings {
    position: absolute;
    width: 360px;
    right: -100px;
    top: -120px;
    color: color-mix(in srgb, var(--ring-1-color) 22%, transparent);
}

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

.pdp-related__title { font-size: clamp(1.8rem, 3vw, 2.6rem); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    .site-header .site-nav__list { font-size: 14px; letter-spacing: 0.01em; }
    .sp-quick__item { width: 112px; font-size: 0.86rem; }
    .sp-quick__item svg { width: 30px; height: 30px; }
    .sp-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
    .site-nav .site-nav__list.menu-open > li > a { border-bottom: 0; }
    .site-nav__list.menu-open .nav-link,
    .site-nav__list.menu-open .dropdown { border-bottom-color: color-mix(in srgb, var(--header-text-color) 14%, transparent); }

    .sp-hero__inner { grid-template-columns: minmax(0, 1fr); }
    .sp-quick { justify-items: start; }
    .sp-hero--panel .sp-hero__inner { grid-template-areas: "product" "copy" "nav"; grid-template-columns: minmax(0, 1fr); }
    .sp-hero__product { justify-self: center; }

    .sp-cats--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sp-products.sp-products,
    .sp-section .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-band__inner,
    .sp-visit { grid-template-columns: minmax(0, 1fr); }
    .sp-visit__photo { min-height: 340px; }
    .sp-stamp { right: 20px; top: auto; bottom: -56px; transform: rotate(-10deg); }
    .sp-visit__body { padding-top: 72px; padding-left: clamp(24px, 5vw, 56px); }
    .sp-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-newsletter__inner { flex-direction: column; align-items: stretch; gap: 22px; }
    .sp-newsletter__form { flex: none; }

    .sp-cat-hero__inner { grid-template-columns: minmax(0, 1fr); }
    .sp-cat-hero__frame { justify-self: center; }
    .sp-subcats__list.sp-subcats__list { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
    .sp-subcats__list::-webkit-scrollbar { display: none; }
    .sp-subcats__list li { flex: none; }

    .pdp-details { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
    :root { --sp-section: min(var(--section-spacing), 56px); }

    .sp-section { padding-top: var(--sp-section); }
    .sp-home > .sp-section:last-child { padding-bottom: var(--sp-section); }
    .sp-band { margin-top: var(--sp-section); padding-bottom: var(--sp-section); }
    .sp-band + .sp-section { padding-top: var(--sp-section); }
    .sp-newsletter { margin-top: var(--sp-section); }

    .sp-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
    .sp-head__title { font-size: clamp(1.75rem, 7.4vw, 2.2rem); }
    .sp-btn { min-height: 50px; padding: 0.7rem 1.3rem; font-size: 0.95rem; }
    .sp-actions .sp-btn { flex: 1 1 100%; }

    .sp-hero { min-height: 0; }
    .sp-hero--photo::after {
        background: linear-gradient(0deg, color-mix(in srgb, var(--hero-overlay-color) 90%, transparent) 0%, color-mix(in srgb, var(--hero-overlay-color) 55%, transparent) 55%, color-mix(in srgb, var(--hero-overlay-color) 35%, transparent) 100%);
    }
    .sp-hero__photo { object-position: 30% 50%; }
    .sp-hero__inner { padding-top: calc(var(--sp-header-h) + 64px); padding-bottom: 28px; gap: 24px; }
    .sp-hero--panel .sp-hero__inner { padding-top: 32px; }
    .sp-hero__title { font-size: clamp(2.3rem, 11vw, 3rem); }
    .sp-hero__text { font-size: 1.02rem; margin-top: 14px; }
    .sp-hero .sp-eyebrow { font-size: 0.72rem; }
    .sp-quick { justify-items: stretch; }
    .sp-quick__label { display: none; }
    .sp-quick__list.sp-quick__list { justify-content: space-between; gap: 8px; }
    .sp-quick__item,
    .sp-quick__item:hover { width: min(82px, 21.5vw); padding: 6px; gap: 2px; font-size: 0.64rem; line-height: 1.1; overflow-wrap: anywhere; hyphens: auto; box-shadow: 0 0 0 4px color-mix(in srgb, var(--hero-text-color) 18%, transparent); }
    .sp-quick__item svg { width: 22px; height: 22px; }
    .sp-hero__product { width: min(240px, 70vw); }

    .sp-usps__list.sp-usps__list { display: flex; overflow-x: auto; gap: 22px; padding-top: 14px; padding-bottom: 14px; scrollbar-width: none; }
    .sp-usp { flex: none; }
    .sp-usp__body strong { font-size: 0.88rem; }
    .sp-usp__icon { width: 30px; height: 30px; }

    .sp-cats,
    .sp-cats--3,
    .sp-cats--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
    .sp-cat__media { border-width: 3px; }
    .sp-cat__name { margin-top: 12px; font-size: 1.1rem; }
    .sp-cat__cta { font-size: 0.82rem; }

    .sp-products.sp-products,
    .sp-section .product-grid { gap: 12px; }
    .product-card .product-information { padding: 12px 12px 14px; gap: 2px 8px; }
    .product-card .product-title h3 { font-size: 0.95rem; }
    .product-card .product-meta { font-size: 10.5px; }
    .product-card .product-price .new-price { font-size: 1.05rem; }
    .product-card .product-view,
    .product-card:hover .product-view { width: 36px; height: 36px; }
    .product-card .product-badge--sale { width: 46px; height: 46px; top: 8px; left: 8px; font-size: 12px; box-shadow: 0 0 0 3px var(--card-background-color); }

    .sp-band .sp-head__title { font-size: clamp(1.9rem, 8vw, 2.3rem); }
    .sp-services.sp-services { gap: 10px; }
    .sp-service { padding: 16px; }
    .sp-service__icon { width: 44px; height: 44px; margin-bottom: 6px; }
    .sp-service__icon svg { width: 20px; height: 20px; }
    .sp-service__title { font-size: 1rem; }
    .sp-service__text { display: none; }
    .sp-service__price { font-size: 0.8rem; margin-top: 2px; }
    .sp-promise { border-radius: 20px; font-size: 0.92rem; }

    .sp-brands__list.sp-brands__list { justify-content: center; gap: 12px 26px; padding: 20px; border-radius: 24px; }
    .sp-brands__list span { font-size: 1.2rem; }
    .sp-brands__list img { max-height: 34px; max-width: 110px; }

    .sp-visit__photo { min-height: 240px; }
    .sp-stamp { width: 104px; height: 104px; font-size: 0.78rem; right: 16px; bottom: -50px; }
    .sp-stamp svg { width: 24px; height: 24px; }
    .sp-visit__body { padding: 64px 20px 28px; }

    .sp-reviews__grid,
    .sp-reviews__grid--quotes { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .sp-score, .sp-quote { padding: 22px; }
    .sp-posts { grid-template-columns: minmax(0, 1fr); }
    .sp-newsletter__rings { right: -120px; }
    .sp-newsletter .sitepack-newsletter-form__row { border-radius: 26px; }

    .sp-cat-hero { border-radius: 0 0 50% 50% / 0 0 32px 32px; }
    .sp-cat-hero__inner { gap: 0; padding-top: 18px; padding-bottom: 64px; }
    .sp-cat-hero__title { margin: 16px 0 10px; font-size: clamp(2.6rem, 13vw, 3.4rem); }
    .sp-cat-hero__intro { font-size: 1rem; }
    .sp-cat-hero__frame { width: 220px; margin-top: 22px; }
    .sp-cat-hero__sticker { width: 86px; height: 86px; font-size: 0.7rem; left: -24px; bottom: 6px; }
    .sp-cat-hero__sticker strong { font-size: 1.3rem; }
    .sp-cat-hero__bg { width: 420px; left: 40%; top: -200px; }
    .sp-subcats { margin-top: -44px; }
    .sp-subcats__list.sp-subcats__list { gap: 12px; padding: 8px 16px; }
    .sp-subcat { width: 84px; gap: 10px; }
    .sp-subcat__circle { width: 72px; height: 72px; box-shadow: 0 0 0 4px var(--sp-r), 0 10px 20px -12px color-mix(in srgb, var(--shadow-color) 45%, transparent); }
    .sp-subcat__name { font-size: 0.8rem; }
    .sp-subcats + .category-page { padding-top: 24px; }
    .category-help { grid-column: 1 / -1; padding: 22px; }
    .category-help__title { font-size: 1.3rem; }

    .pdp-gallery__badge.product-badge--sale { width: 58px; height: 58px; top: 12px; left: 12px; font-size: 13px; }
    .pdp-gallery__thumbs { display: flex; gap: 8px; }
    .pdp-gallery__thumb { width: 64px; flex: none; }
    .pdp-info__title { font-size: clamp(1.8rem, 8vw, 2.2rem); }
    .pdp-advice { flex-wrap: wrap; }
    .pdp-advice__cta.sp-btn { flex: 1 1 100%; }
    .pdp-keyspecs__list.pdp-keyspecs__list { display: flex; overflow-x: auto; margin: 0 calc(-1 * var(--sp-gutter)) !important; padding: 0 var(--sp-gutter); scrollbar-width: none; }
    .pdp-keyspec { flex: 0 0 150px; padding: 20px 10px; }
    .pdp-spec-table th, .pdp-spec-table td { padding: 11px 12px; }
}

@media (max-width: 480px) {
    .sp-cat-hero__frame { width: 200px; }

    /* A logo with a tagline or icons under the name stays readable on a phone. */
    .brand img,
    .site-header .brand img { max-height: min(var(--logo-max-height), 52px); }
}

/* =========================================================================
   EVENTS, APP POSTS, PRODUCT SECTIONS
   Upcoming events (snippets/event.twig) as cards with a round date disc in a ring colour,
   app post entries in the blog card shape, the merchant's product sections as accordions
   in the buy column and the events in the store band on the product page.
   ========================================================================= */

/* ---------- Events ---------- */
.sp-events.sp-events {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 20px;
    max-width: none;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

.sp-event {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-background-color);
    color: var(--text-color);
    transition: translate 0.25s ease, box-shadow 0.25s ease;
}

.sp-event:has(.sp-event__go):hover {
    translate: 0 -3px;
    box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--shadow-color) 45%, transparent);
}

.sp-event__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--sp-r);
    color: var(--sp-rt);
    font-family: var(--heading-font);
    line-height: 1;
    text-align: center;
    flex: none;
}

.sp-event__date strong {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.sp-event__date span {
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sp-event__body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.sp-event__name {
    font-family: var(--heading-font);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.sp-event__meta {
    display: grid;
    gap: 2px;
    font-size: 0.9rem;
    color: var(--muted-text-color);
}

.sp-event__place {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-event__place svg { width: 13px; height: 13px; fill: currentColor; flex: none; }

.sp-event__text {
    font-size: 0.92rem;
    color: var(--muted-text-color);
}

.sp-event__go,
.sp-event__go:hover,
.sp-event__go:focus {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--accent-text-color);
}

/* The whole card is the link's hit area. */
.sp-event__go::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.sp-event__go svg { width: 17px; height: 17px; fill: currentColor; }

.sp-event:hover .sp-event__go {
    background: var(--brand-color);
    color: var(--brand-text-color);
}

/* ---------- App posts ---------- */
.sp-posts--entries { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sp-post__initial[class*="sp-ring-"] { color: var(--sp-r); }

/* ---------- Product sections ---------- */
.pdp-info .pdp-sections { margin-top: 28px; }

.pdp-sections .pdp-accordion__head {
    font-family: var(--heading-font);
    font-size: 1rem;
    font-weight: 600;
}

.pdp-sections .pdp-accordion__body { color: color-mix(in srgb, var(--text-color) 82%, transparent); }

/* ---------- Store band on the product page: location and events ---------- */
.pdp-stall { flex-wrap: wrap; }

.pdp-stall__copy { flex: 1 1 520px; min-width: 0; }

.pdp-stall .pdp-stall__eyebrow { color: var(--ring-1-color); }

.pdp-stall__events {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 12px;
    margin-top: 22px;
}

.pdp-stall__event,
a.pdp-stall__event:hover,
a.pdp-stall__event:focus {
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--dark-surface-text-color) 8%, transparent);
    color: var(--dark-surface-text-color);
}

a.pdp-stall__event:hover { background: color-mix(in srgb, var(--dark-surface-text-color) 14%, transparent); }

.pdp-stall__event-date {
    font-family: var(--heading-font);
    font-weight: 700;
}

.pdp-stall__event-name,
.pdp-stall__event-location {
    font-size: 0.92rem;
    color: color-mix(in srgb, var(--dark-surface-text-color) 78%, transparent);
}

.pdp-stall__event--store .pdp-stall__event-date { color: var(--ring-1-color); }

@media (max-width: 1080px) {
    .sp-posts--entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .sp-event { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px; }
    .sp-event__date { width: 60px; height: 60px; }
    .sp-event__date strong { font-size: 1.35rem; }
    .sp-event__go { grid-column: 2; justify-self: start; width: 38px; height: 38px; }
    .sp-posts--entries { grid-template-columns: minmax(0, 1fr); }
    .pdp-stall__copy { flex-basis: 100%; }
}

/* ---------- Phones: landing features and the blog pager ---------- */
@media (max-width: 768px) {
    .landing-features__grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .sp-article__pager { flex-wrap: wrap; }
    .sp-article__pager a { flex: 1 1 100%; min-width: 0; }
}