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

* {
    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: 40px;
    padding-right: 40px;
}

/* 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: 40px;
    padding-right: 40px;
}

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 40px;
}

.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;
    gap: 8px;
    align-items: baseline;
}

.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 40px;
}

.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 40px;
}

/* 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: 20px;
        padding-right: 20px;
    }

    .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 40px;
}

.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 40px;
    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 40px;
}

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

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

/* Tablets and phones share the hamburger header: below 1024px the menu no longer fits one row. */
@media (max-width: 1024px) {
    /* 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;
    }

}

@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: 20px;
        padding-right: 20px;
    }

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

    .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;
    align-items: center;
    gap: 8px;
    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: 20px;
        padding-right: 20px;
    }

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


/* =========================================================================
   SHARED LAYER (from Trailhead)
   The sport & outdoor look on top of the shared base above: display typography,
   pill controls, sharper cards and the home sections (.bt-*). 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: clamp(16px, 3vw, 40px);
    padding-right: clamp(16px, 3vw, 40px);
}

/* 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 > .bt-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(.ks-home) {
    max-width: var(--page-width);
    padding-left: clamp(16px, 3vw, 40px);
    padding-right: clamp(16px, 3vw, 40px);
}

/* `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: clamp(16px, 3vw, 40px);
    padding-right: clamp(16px, 3vw, 40px);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bt-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 0.3rem 0.75rem;
    border-radius: var(--button-radius);
    background: var(--label-background-color);
    color: var(--label-text-color);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---------- 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: 1025px) {
    .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. Theme look: two columns, bold labels, filled
   rounded fields with a brand focus ring, a pill button. */
:is(form[action*="contact-form"], .container-contact-form-v2 form) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    max-width: 820px;
    margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

.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 theme 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) ---------- */
.bt-page-head.bt-page-head {
    padding-top: 48px;
    padding-bottom: 28px;
}

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

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

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

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

.bt-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 ---------- */
.bt-article {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 56px clamp(16px, 3vw, 40px) 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bt-404__code {
    position: absolute;
    right: clamp(16px, 3vw, 40px);
    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;
}

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

/* ---------- Sitemap ---------- */
.sitemap {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 48px clamp(16px, 3vw, 40px) 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. */
.ks-section .product-grid,
.pdp-related .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: clamp(16px, 3vw, 40px);
    padding-right: clamp(16px, 3vw, 40px);
}

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

@keyframes bt-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) {
    /* Top bar: one calm line — the first promise only, contact details live in the footer. */
    .topbar__inner {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .topbar-standard {
        justify-content: center;
    }

    .topbar-standard__contact,
    .topbar-standard__usps > :not(:first-child) {
        display: none;
    }

    /* Compact sticky header: logo + cart + menu on one row, slim search below. */
    .site-header__main {
        gap: 12px 16px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .brand .site-name {
        font-size: 1.45rem;
    }

    .brand img {
        height: 36px;
    }

    .header-search .sitepack-live-search-input-wrapper {
        padding: 9px 16px;
    }

    .header-cart {
        padding: 5px 6px 5px 14px;
    }

    /* Less air between sections on a phone. */
    .bt-section {
        padding-top: min(var(--section-spacing), 64px);
    }

    .bt-section--tight {
        padding-top: 16px;
    }

    .bt-ticker {
        margin-top: min(var(--section-spacing), 64px);
    }

    .bt-ticker__list li {
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
        gap: 1.4rem;
        padding-left: 1.4rem;
    }

    footer {
        margin-top: min(var(--section-spacing), 64px);
    }

    .bt-head {
        gap: 0.9rem;
        margin-bottom: 22px;
    }

    /* USPs: a swipeable strip instead of four stacked cards. */
    .bt-usps {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-left: calc(-1 * clamp(16px, 3vw, 40px)) !important;
        margin-right: calc(-1 * clamp(16px, 3vw, 40px)) !important;
        width: calc(100% + 2 * clamp(16px, 3vw, 40px));
        max-width: none;
        padding: 0 clamp(16px, 3vw, 40px) 4px;
        scroll-padding-left: clamp(16px, 3vw, 40px);
        scrollbar-width: none;
    }

    .bt-usps::-webkit-scrollbar {
        display: none;
    }

    .bt-usp {
        scroll-snap-align: start;
        padding: 14px 16px;
    }

    .bt-usp__icon {
        width: 38px;
        height: 38px;
    }

    /* Small bento tiles: the label needs the room, the whole tile is the link anyway. */
    .bt-cats--bento .bt-cat:not(:first-child) .bt-cat__go {
        display: none;
    }

    .bt-cats--bento .bt-cat:not(:first-child) .bt-cat__name {
        font-size: 1.1rem;
    }

    .bt-cat__label {
        left: 14px;
        right: 14px;
        bottom: 14px;
    }

    /* Hero */
    .bt-hero__text {
        margin-top: 1.1rem;
    }

    .bt-hero__actions {
        margin-top: 1.5rem;
    }

    .bt-hero__actions .bt-btn {
        flex: 1 1 100%;
    }

    /* Campaign, events, store, newsletter: tighter padding inside the panels. */
    .bt-campaign__body,
    .bt-events,
    .bt-store__body,
    .bt-newsletter {
        padding: 28px 22px;
    }

    .bt-campaign__features {
        padding: 1.25rem 0 1.5rem;
    }

    .bt-event {
        gap: 14px;
        padding: 16px 0;
    }

    .bt-event__name {
        font-size: 1rem;
    }

    .bt-newsletter {
        gap: 24px;
    }

    .bt-story__title {
        font-size: 1.2rem;
    }

    /* Page heads and article */
    .bt-page-head.bt-page-head {
        padding-top: 28px;
        padding-bottom: 20px;
    }

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

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

    .bt-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.04em;
    text-transform: uppercase;
}

@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 theme voice ---------- */
.landing-hero__title {
    font-family: var(--heading-font);
    font-size: clamp(2.4rem, 5.4vw, 4.6rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.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 theme 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: auto;
    max-width: calc(var(--page-width) + 2 * clamp(16px, 3vw, 40px));
    margin: 16px clamp(10px, 1.4vw, 20px) 0;
    border-radius: calc(var(--radius) * 1.4);
    overflow: hidden;
}

@media (min-width: 1520px) {
    main > .element-hero,
    main > .element-cta-banner,
    .element-hero,
    .element-cta-banner {
        margin-left: auto;
        margin-right: auto;
    }
}

.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.6rem, 6.2vw, 5.6rem);
    line-height: 0.93;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.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.
   Matches the shared `main > :is(.container-element, …):not(…):not(…)` gutter rule at
   (0,3,1) and comes later, which otherwise stretches the box to the full page width. */
main > :is(.container-element, .text-left).container-element-opening-times:not(.container-element-columns) {
    width: calc(100% - 2 * clamp(16px, 3vw, 40px));
    max-width: calc(var(--page-width) - 2 * clamp(16px, 3vw, 40px));
    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(> .bt-article) {
    background-color: var(--blog-background-color);
}

/* The cart drawer waits off-canvas at right: -400px with a shadow that bleeds a dark band
   into the right edge of every page. Only cast it while the drawer is open. */
.sitepack-cart-sidebar:not(.open) {
    box-shadow: none;
}

/* A background element can hold loose elements (heading, social list, text) straight in its
   .background-inner, without a columns row. Put those on the page width and gutter too, in
   the footer and in page content alike. */
.container-element-background > .background-inner > :not(.container-element-columns):not(.container) {
    max-width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(16px, 3vw, 40px);
    padding-right: clamp(16px, 3vw, 40px);
}

/* Account forms (sitepack_account()): the platform tints every field with a 35% brand-colour
   ring on top of the theme's input border, so empty fields looked like errors. Keep them
   neutral like the other forms; the brand colour only marks focus. */
.account .account-field input {
    min-height: 48px;
    border: 1px solid var(--input-border-color);
    border-radius: var(--radius);
    background: var(--input-background-color);
    box-shadow: none;
}

.account .account-field input:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 1px var(--brand-color);
}

.account .account-field > span {
    font-weight: 600;
}

.account .account-auth__form .btn-primary {
    min-height: 52px;
}

/* ---------- Forms: one neat default for every form ----------
   Any form a merchant or app puts on a page (platform modules, apps, page-builder forms)
   gets the same fields as the contact form: a 48px field on the input colours, a clear
   label, the brand colour only on focus, a drawn select chevron and brand-coloured
   checkboxes and radios. `.form-control` is listed too: the platform's Bootstrap rule
   for it would otherwise win over the element selectors. */
:is(input:is([type="text"], [type="email"], [type="password"], [type="number"], [type="search"], [type="tel"], [type="url"], [type="date"], [type="time"], [type="datetime-local"]), select, textarea, .form-control) {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    color: var(--text-color);
    background-color: var(--input-background-color);
    border: 1px solid var(--input-border-color);
    border-radius: var(--radius);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:is(input, select, textarea, .form-control):hover:not(:focus):not(:disabled) {
    border-color: color-mix(in srgb, var(--text-color) 40%, var(--input-border-color));
}

:is(input, select, textarea, .form-control):focus {
    outline: none;
    border-color: var(--brand-color);
    box-shadow: 0 0 0 1px var(--brand-color);
}

:is(input, select, textarea, .form-control):disabled {
    background-color: var(--surface-color);
    color: var(--subtle-text-color);
    cursor: not-allowed;
}

textarea,
textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

/* Select: native arrow replaced by a chevron drawn in the muted text colour. */
select,
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.6rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted-text-color) 50%),
        linear-gradient(135deg, var(--muted-text-color) 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 50%,
        calc(100% - 15px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0 0.5rem 0 0;
    vertical-align: -3px;
    accent-color: var(--brand-color);
    cursor: pointer;
}

label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    font-weight: 500;
    cursor: pointer;
}

label,
.control-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
}

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

.help-block,
.form-text {
    display: block;
    margin-top: 0.35rem;
    font-size: 13px;
    color: var(--muted-text-color);
}

.has-error :is(input, select, textarea, .form-control),
:is(input, select, textarea).is-invalid {
    border-color: var(--stock-error-color);
}

.has-error .help-block,
.invalid-feedback {
    color: var(--stock-error-color);
}

fieldset {
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}

legend {
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 700;
}

/* A bare submit button (no theme or platform class) still looks like the primary button. */
form button[type="submit"]:not([class]),
form input[type="submit"]:not([class]) {
    min-height: 48px;
    padding: 0.8rem 1.6rem;
    border: 0;
    border-radius: var(--button-radius);
    background: var(--brand-color);
    color: var(--brand-text-color);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* The pill quantity field and the live-search input keep their own look. */
.pdp-qty input[type="number"],
.sitepack-live-search-container .sitepack-live-search-input {
    min-height: 0;
}

/* ---------- Category filters: real checkboxes ---------- */
.filter-list {
    gap: 2px;
}

.filter-option {
    padding: 7px 0;
    color: var(--text-color);
    font-size: 15px;
}

.filter-option__check {
    visibility: visible;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--input-border-color);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--input-background-color);
    transition: background-color 0.15s, border-color 0.15s;
}

.filter-option__check svg {
    width: 12px;
    height: 12px;
    fill: var(--brand-text-color);
    opacity: 0;
}

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

.filter-option.is-active .filter-option__check {
    background: var(--brand-color);
    border-color: var(--brand-color);
}

.filter-option.is-active .filter-option__check svg {
    opacity: 1;
}

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

.filter-option__count {
    min-width: 28px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface-color);
    color: var(--muted-text-color);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* Long brand lists scroll inside the group instead of pushing the products down. */
.filter-group .filter-list:not(.filter-list--categories) {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 6px;
}

.filter-chip {
    border-radius: var(--radius);
    min-width: 44px;
    text-align: center;
}

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

.filter-group__title {
    font-size: 13px;
    letter-spacing: 0.08em;
}

/* The sort control is a bordered label with its own chevron; its select stays bare. */
.category-sort .category-sort__select {
    min-height: 0;
    width: auto;
    padding: 0 1.4rem 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-weight: 600;
}

.category-sort .category-sort__select:focus {
    box-shadow: none;
}

.category-sort:focus-within {
    border-color: var(--brand-color);
}

/* ---------- Phones: last overflow fixes ---------- */
@media (max-width: 768px) {
    /* Landing template: the three feature cards stack instead of running off the screen. */
    .landing-features__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Blog pager: two buttons that share the row and may wrap their label. */
    .bt-article__pager .bt-btn {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 0.9rem;
        padding-right: 0.9rem;
        white-space: normal;
        text-align: center;
    }
}

/* Touch targets on phones: small text links get a 44px tap area without changing their look. */
@media (max-width: 768px) {
    .brand {
        min-height: 44px;
        justify-content: center;
    }

    .bt-link-arrow {
        padding-top: 10px;
        padding-bottom: 6px;
    }

    .active-chip__clear,
    .bt-store a[href^="tel:"],
    .bt-store a[href^="mailto:"] {
        display: inline-block;
        padding-top: 11px;
        padding-bottom: 11px;
    }
}

/* =========================================================================
   KICKSTAND LAYER
   Energetic showroom retail on top of the shared base: a light header with an "open now"
   chip and a solid cart block, big uppercase display type, slanted eyebrows and price
   tags, a split hero with a category rail, dark ink panels and chunky tiles. Every colour
   is a merchant token; shades are color-mix() of those tokens. The gutter is
   clamp(16px, 3vw, 40px) everywhere, so every row lines up with the logo.
   ========================================================================= */

/* Glyphs painted as CSS masks (the platform's icons are <img> files that ignore
   currentColor) are inlined as data URIs: theme.css comes from the theme CDN, where a
   /css/line/... path 403s. */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Type ---------- */
body {
    color: var(--text-color);
    background-color: var(--background-color);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    text-transform: uppercase;
}

h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }

/* The slanted eyebrow: a small brand-colour flag above section titles. The inner span
   counter-skews the text so only the flag leans. */
.bt-eyebrow,
.ks-eyebrow {
    display: inline-block;
    margin: 0 0 14px 4px;
    padding: 5px 12px 4px;
    background: var(--brand-color);
    color: var(--brand-text-color);
    font-family: var(--heading-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
    transform: skewX(-10deg);
}

.ks-eyebrow > span {
    display: inline-block;
    font-family: var(--heading-font);
    transform: skewX(10deg);
}

.ks-eyebrow--dark {
    background: var(--dark-surface-color);
    color: var(--dark-surface-text-color);
}

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

.bt-page-head__title {
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* ---------- Buttons: squared, uppercase, heading font ---------- */
.ks-btn,
.bt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 52px;
    padding: 0 1.6rem;
    border: 2px solid transparent;
    border-radius: var(--button-radius);
    font-family: var(--heading-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.ks-btn__arrow {
    display: inline-flex;
}

.ks-btn__arrow svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform 0.2s;
}

.ks-btn:hover .ks-btn__arrow svg {
    transform: translateX(3px);
}

.ks-btn--brand,
.bt-btn--brand {
    background: var(--brand-color);
    border-color: var(--brand-color);
    color: var(--brand-text-color);
}

.ks-btn--brand:hover,
.ks-btn--brand:focus-visible,
.bt-btn--brand:hover {
    background: var(--brand-hover-color);
    border-color: var(--brand-hover-color);
    color: var(--brand-text-color);
    box-shadow: none;
    transform: none;
}

/* Outline on light backgrounds. */
.ks-btn--outline,
.bt-btn--ghost {
    background: transparent;
    border-color: currentColor;
    color: var(--text-color);
}

.ks-btn--outline:hover,
.ks-btn--outline:focus-visible,
.bt-btn--ghost:hover {
    background: var(--text-color);
    border-color: var(--text-color);
    color: var(--background-color);
    transform: none;
}

/* Outline on photos and dark panels: takes the text colour around it. */
.ks-btn--ghost {
    background: transparent;
    border-color: currentColor;
    color: inherit;
}

.ks-btn--ghost:hover,
.ks-btn--ghost:focus-visible {
    background: var(--hero-button-color);
    border-color: var(--hero-button-color);
    color: var(--hero-button-text-color);
}

.btn:hover,
.btn-primary:hover,
.bt-btn:hover {
    transform: none;
}

.btn-primary,
.btn.btn-primary {
    border-radius: var(--button-radius);
}

.ks-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-color);
    text-decoration: none;
}

/* Square arrow buttons. */
.ks-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--button-radius);
    background: var(--brand-color);
    color: var(--brand-text-color);
    cursor: pointer;
}

.ks-arrow svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.ks-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ---------- Top bar: one dark line, promises left, contact right ---------- */
.topbar {
    background: var(--header-topbar-color);
    color: var(--header-topbar-text-color);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
}

.topbar__inner {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 9px clamp(16px, 3vw, 40px);
}

.topbar .topbar-standard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
}

.topbar .topbar-standard__usps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
}

.topbar .topbar-usp {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: inherit;
}

/* A small slanted accent block before each promise. */
.topbar .topbar-usp::before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--accent-color);
    transform: skewX(-10deg);
    flex: none;
}

.topbar .topbar-standard__contact,
.topbar .topbar-standard__contact a {
    color: inherit;
    font-weight: 600;
}

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

/* ---------- Header: one light row ---------- */
.site-header {
    border-bottom: 1px solid var(--border-color);
    background-color: var(--header-background-color);
    color: var(--header-text-color);
    box-shadow: none;
}

.site-header__main {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
    max-width: var(--page-width);
    min-height: 84px;
    margin: 0 auto;
    padding: 12px clamp(16px, 3vw, 40px);
}

.site-header .nav-toggle {
    display: none;
}

.brand {
    flex: none;
}

.brand img {
    height: 52px;
    max-width: 200px;
    object-fit: contain;
}

/* Text logo: the site name in the heading font after a slanted brand-colour block. */
.brand .site-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--heading-font);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--header-text-color);
}

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

.site-name__mark {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: var(--brand-color);
    transform: skewX(-10deg);
    flex: none;
}

.site-header .site-nav {
    display: flex;
    align-items: center;
    max-width: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
}

.site-header .site-nav .site-nav__list {
    width: auto;
    flex-wrap: wrap;
    gap: 0 clamp(14px, 1.8vw, 26px);
    font-family: var(--heading-font);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.site-nav .site-nav__list > li > a {
    position: relative;
    padding: 18px 0;
    border-bottom: 0;
    color: var(--header-text-color);
    font-family: var(--heading-font);
}

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

/* One slanted brand-colour bar under the hovered or active item. */
.site-nav .site-nav__list > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    height: 3px;
    background: var(--brand-color);
    transform: scaleX(0) skewX(-10deg);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.site-nav .site-nav__list > li > a:hover::after,
.site-nav .site-nav__list > li:hover > a::after,
.site-nav .site-nav__list > li.active > a::after,
.site-nav .site-nav__list > li > a.active::after {
    transform: scaleX(1) skewX(-10deg);
}

.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: transparent;
}

.site-nav .site-nav__list > li > a .caret {
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
}

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

.site-nav__list .nav-link:has(a.btn) {
    margin-left: 0;
}

@media (min-width: 1025px) {
    .site-nav__list .dropdown-menu {
        top: 100%;
        margin: 0;
        padding: 8px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius);
        background: var(--card-background-color);
        box-shadow: 0 18px 40px color-mix(in srgb, var(--shadow-color) 16%, transparent);
        text-transform: none;
        letter-spacing: 0;
    }

    .site-nav__list .dropdown-menu li a {
        display: block;
        padding: 10px 14px;
        border: 0;
        border-radius: calc(var(--radius) * 0.5);
        color: var(--text-color);
        font-family: var(--body-font);
        font-size: 15px;
        font-weight: 500;
        text-transform: none;
    }

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

    .site-nav__list .dropdown-menu li a::after {
        display: none;
    }
}

/* The phone number lives in the menu panel on phones only. */
.header-phone {
    display: none;
}

.header-phone__icon {
    display: inline-flex;
}

.header-phone__icon svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex: none;
}

/* Open status: a light chip with a pulsing dot (success colour when open). */
.open-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-right: 10px;
    padding: 8px 15px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--header-text-color) 7%, var(--header-background-color));
    color: var(--header-text-color);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.open-status[hidden],
.open-status-line[hidden],
.ks-store__status[hidden] {
    display: none;
}

.open-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--subtle-text-color);
    flex: none;
}

.is-open .open-status__dot {
    background: var(--success-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--success-color) 22%, transparent);
}

.is-closed .open-status__dot {
    background: var(--stock-error-color);
}

.open-status-line {
    display: none;
}

/* Header too full for the chip (theme.js sets .is-tight): the status moves to the slim
   line under the bar. */
.site-header.is-tight .open-status {
    display: none;
}

.site-header.is-tight .open-status-line:not([hidden]) {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-top: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--header-text-color) 5%, var(--header-background-color));
    color: var(--header-text-color);
    font-size: 13px;
    font-weight: 500;
}

.header-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--button-radius);
    color: var(--header-text-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

.header-icon:hover,
.header-icon:focus-visible {
    background: color-mix(in srgb, var(--header-text-color) 8%, transparent);
    color: var(--header-text-color);
}

.header-icon > svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Search: the platform's icon trigger opens a full-screen overlay. The trigger glyph is an
   <img>; paint it as a mask in the header text colour. */
.header-search-icon .sitepack-live-search-trigger {
    position: relative;
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.header-search-icon .sitepack-live-search-trigger img {
    opacity: 0;
    width: 22px;
    height: 22px;
}

.header-search-icon .sitepack-live-search-trigger::before {
    content: "";
    position: absolute;
    inset: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M 19 3 C 13.488281 3 9 7.488281 9 13 C 9 15.394531 9.839844 17.589844 11.25 19.3125 L 3.28125 27.28125 L 4.71875 28.71875 L 12.6875 20.75 C 14.410156 22.160156 16.605469 23 19 23 C 24.511719 23 29 18.511719 29 13 C 29 7.488281 24.511719 3 19 3 Z M 19 5 C 23.429688 5 27 8.570313 27 13 C 27 17.429688 23.429688 21 19 21 C 14.570313 21 11 17.429688 11 13 C 11 8.570313 14.570313 5 19 5 Z'/%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='M 19 3 C 13.488281 3 9 7.488281 9 13 C 9 15.394531 9.839844 17.589844 11.25 19.3125 L 3.28125 27.28125 L 4.71875 28.71875 L 12.6875 20.75 C 14.410156 22.160156 16.605469 23 19 23 C 24.511719 23 29 18.511719 29 13 C 29 7.488281 24.511719 3 19 3 Z M 19 5 C 23.429688 5 27 8.570313 27 13 C 27 17.429688 23.429688 21 19 21 C 14.570313 21 11 17.429688 11 13 C 11 8.570313 14.570313 5 19 5 Z'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}

/* Search overlay: a dark scrim with one card near the top - a squared input in the theme's
   field style with the glyph on the right, results as rows with a photo tile, and a round
   close button. The platform's rules nest five classes deep, so these repeat the chain. */
.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay {
    align-items: flex-start;
    padding: clamp(72px, 14vh, 140px) 16px 24px;
    background: color-mix(in srgb, var(--shadow-color) 72%, transparent);
    color: var(--text-color);
    cursor: default;
}

.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-close {
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    background: var(--card-background-color);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-color) 30%, transparent);
}

.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-close img {
    width: 22px;
    height: 22px;
}

.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content {
    width: min(760px, 100%);
    max-width: none;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--card-background-color);
    box-shadow: 0 30px 80px color-mix(in srgb, var(--shadow-color) 30%, transparent);
    text-align: left;
}

.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content .sitepack-live-search-overlay-input-wrapper {
    margin: 0;
    border: 2px solid var(--text-color);
    border-radius: var(--button-radius);
    background: var(--input-background-color);
}

.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content .sitepack-live-search-overlay-input-wrapper:focus-within {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color) 22%, transparent);
}

.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content .sitepack-live-search-overlay-input-wrapper .sitepack-live-search-overlay-input {
    min-height: 58px;
    padding: 0 56px 0 20px;
    border: 0;
    background: transparent;
    color: var(--text-color);
    font-size: 19px;
    font-weight: 500;
}

.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content .sitepack-live-search-overlay-input-wrapper .sitepack-live-search-overlay-input::placeholder {
    color: var(--subtle-text-color);
    opacity: 1;
}

.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content .sitepack-live-search-overlay-input-wrapper .sitepack-live-search-overlay-icon {
    right: 18px;
    width: 22px;
    height: 22px;
}

.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content .sitepack-live-search-overlay-input-wrapper .sitepack-live-search-overlay-icon img {
    width: 22px;
    height: 22px;
}

.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content .sitepack-live-search-overlay-results {
    max-height: min(60vh, 560px);
}

/* Space between the field and the results only when there is something under it. */
.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content .sitepack-live-search-overlay-results:has(.sitepack-live-search-result-item, .sitepack-live-search-no-results[style*="block"], .sitepack-live-search-loading[style*="block"]) {
    margin-top: 12px;
}

.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content .sitepack-live-search-overlay-results .sitepack-live-search-result-item {
    gap: 14px;
    padding: 10px 12px;
    border: 0;
    border-radius: calc(var(--radius) * 0.6);
    color: var(--text-color);
}

.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content .sitepack-live-search-overlay-results .sitepack-live-search-result-item + .sitepack-live-search-result-item {
    margin-top: 2px;
}

.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content .sitepack-live-search-overlay-results .sitepack-live-search-result-item:hover,
.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content .sitepack-live-search-overlay-results .sitepack-live-search-result-item:focus-visible {
    background: var(--surface-color);
    color: var(--text-color);
}

.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content .sitepack-live-search-overlay-results .sitepack-live-search-result-item .sitepack-live-search-result-image {
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 4px;
    flex: none;
    border-radius: calc(var(--radius) * 0.5);
    background: var(--image-background-color);
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* A result without a photo keeps the row aligned with an empty tile. */
.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content .sitepack-live-search-overlay-results .sitepack-live-search-result-item:not(:has(.sitepack-live-search-result-image))::before {
    content: "";
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: calc(var(--radius) * 0.5);
    background: var(--image-background-color);
}

.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content .sitepack-live-search-overlay-results .sitepack-live-search-result-item .sitepack-live-search-result-info .sitepack-live-search-result-title {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
}

.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content .sitepack-live-search-overlay-results .sitepack-live-search-result-item .sitepack-live-search-result-info .sitepack-live-search-result-price {
    margin-top: 3px;
    color: var(--text-color);
    font-family: var(--heading-font);
    font-size: 16px;
    font-weight: 700;
}

.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content .sitepack-live-search-overlay-results .sitepack-live-search-no-results,
.site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content .sitepack-live-search-overlay-results .sitepack-live-search-loading {
    padding: 14px 12px;
    color: var(--muted-text-color);
}

@media (max-width: 768px) {
    .site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay {
        padding: 72px 12px 16px;
    }

    .site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-close {
        top: 12px;
        right: 12px;
    }

    .site-header .header-search-icon .sitepack-live-search-icon-container .sitepack-live-search-overlay .sitepack-live-search-overlay-content {
        padding: 10px;
    }
}

/* Cart: a solid block in the cart colour with the glyph and the count on a light tab. */
.header-cart,
.header-cart:hover {
    width: auto;
    min-width: 64px;
    height: 48px;
    margin-left: 6px;
    padding: 0;
    gap: 0;
    background: var(--header-cart-color);
    color: var(--header-cart-text-color);
}

/* The block sizes to the glyph and count; the generic 44px icon box and flex shrinking
   squeezed it on phones so the glyph and count stuck out on both sides. */
.site-header .header-actions .header-cart {
    flex: none;
    width: auto;
    max-width: none;
}

.header-cart:hover {
    background: color-mix(in srgb, var(--header-cart-color) 88%, var(--header-cart-text-color));
    color: var(--header-cart-text-color);
}

.header-cart .sitepack-shopping-cart-container .sitepack-shopping-cart-trigger {
    position: relative;
    display: inline-flex;
    gap: 8px;
    height: 48px;
    padding: 0 14px 0 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.header-cart .sitepack-shopping-cart-container .sitepack-shopping-cart-trigger img {
    position: absolute;
    left: 14px;
    opacity: 0;
    width: 24px;
    height: 24px;
}

.header-cart .sitepack-shopping-cart-container .sitepack-shopping-cart-trigger::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M 5 7 C 4.449219 7 4 7.449219 4 8 C 4 8.550781 4.449219 9 5 9 L 7.21875 9 L 9.84375 19.5 C 10.066406 20.390625 10.863281 21 11.78125 21 L 23.25 21 C 24.152344 21 24.917969 20.402344 25.15625 19.53125 L 27.75 10 L 11 10 L 11.5 12 L 25.15625 12 L 23.25 19 L 11.78125 19 L 9.15625 8.5 C 8.933594 7.609375 8.136719 7 7.21875 7 Z M 22 21 C 20.355469 21 19 22.355469 19 24 C 19 25.644531 20.355469 27 22 27 C 23.644531 27 25 25.644531 25 24 C 25 22.355469 23.644531 21 22 21 Z M 13 21 C 11.355469 21 10 22.355469 10 24 C 10 25.644531 11.355469 27 13 27 C 14.644531 27 16 25.644531 16 24 C 16 22.355469 14.644531 21 13 21 Z M 13 23 C 13.5625 23 14 23.4375 14 24 C 14 24.5625 13.5625 25 13 25 C 12.4375 25 12 24.5625 12 24 C 12 23.4375 12.4375 23 13 23 Z M 22 23 C 22.5625 23 23 23.4375 23 24 C 23 24.5625 22.5625 25 22 25 C 21.4375 25 21 24.5625 21 24 C 21 23.4375 21.4375 23 22 23 Z'/%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='M 5 7 C 4.449219 7 4 7.449219 4 8 C 4 8.550781 4.449219 9 5 9 L 7.21875 9 L 9.84375 19.5 C 10.066406 20.390625 10.863281 21 11.78125 21 L 23.25 21 C 24.152344 21 24.917969 20.402344 25.15625 19.53125 L 27.75 10 L 11 10 L 11.5 12 L 25.15625 12 L 23.25 19 L 11.78125 19 L 9.15625 8.5 C 8.933594 7.609375 8.136719 7 7.21875 7 Z M 22 21 C 20.355469 21 19 22.355469 19 24 C 19 25.644531 20.355469 27 22 27 C 23.644531 27 25 25.644531 25 24 C 25 22.355469 23.644531 21 22 21 Z M 13 21 C 11.355469 21 10 22.355469 10 24 C 10 25.644531 11.355469 27 13 27 C 14.644531 27 16 25.644531 16 24 C 16 22.355469 14.644531 21 13 21 Z M 13 23 C 13.5625 23 14 23.4375 14 24 C 14 24.5625 13.5625 25 13 25 C 12.4375 25 12 24.5625 12 24 C 12 23.4375 12.4375 23 13 23 Z M 22 23 C 22.5625 23 23 23.4375 23 24 C 23 24.5625 22.5625 25 22 25 C 21.4375 25 21 24.5625 21 24 C 21 23.4375 21.4375 23 22 23 Z'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}

.header-cart .sitepack-shopping-cart-container .sitepack-shopping-cart-trigger .sitepack-cart-count {
    position: static;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--header-cart-text-color);
    color: var(--header-cart-color);
    font-family: var(--heading-font);
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

/* ---------- Breadcrumb ---------- */
.category-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

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

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

.category-breadcrumb__sep {
    display: inline-flex;
    color: var(--muted-text-color);
}

.category-breadcrumb__sep svg {
    width: 9px;
    height: 9px;
    fill: currentColor;
}

.category-breadcrumb__current {
    color: var(--muted-text-color);
    font-weight: 500;
}

/* ---------- Product cards: photo tile, brand line, title, price (sale on a tag) ---------- */
.product-card {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

.product-card > a {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.product-card:hover {
    box-shadow: none;
}

.product-card .product-image {
    position: relative;
    aspect-ratio: 1 / 1;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--image-background-color);
}

.product-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6%;
    mix-blend-mode: multiply;
    transition: transform 0.3s ease;
}

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

/* The saving as a slanted brand-colour flag. */
.product-badge,
.product-badge--sale {
    position: absolute;
    top: 14px;
    left: 16px;
    z-index: 1;
    padding: 4px 10px;
    border-radius: 0;
    background: var(--label-background-color);
    color: var(--label-text-color);
    font-family: var(--heading-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.3;
    text-transform: uppercase;
    transform: skewX(-10deg);
}

.product-information {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    padding: 16px 0 0;
}

.product-meta {
    color: var(--muted-text-color);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.product-title h3 {
    margin: 0;
    font-family: var(--body-font);
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-color);
}

.product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-top: auto;
    padding-top: 12px;
}

.product-price .new-price {
    font-family: var(--heading-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color);
}

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

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

/* The price tag: accent colour, a notch with a punched hole on the left, slightly skewed. */
.product-price--tag {
    align-self: flex-start;
    margin-top: auto;
    padding: 0;
}

.product-price--tag,
.ks-tag {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-left: 2px;
    padding: 6px 14px 5px 24px;
    background: var(--accent-color);
    color: var(--accent-text-color);
    clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%);
    transform: skewX(-6deg);
}

.product-information .product-price--tag {
    margin-top: auto;
    padding: 6px 14px 5px 24px;
}

.product-price--tag::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--background-color);
}

.product-price--tag .new-price,
.product-price--tag .new-price.is-promo {
    color: var(--accent-text-color);
    font-size: 21px;
}

.product-price--tag .old-price {
    color: color-mix(in srgb, var(--accent-text-color) 65%, transparent);
}

.product-card .product-information {
    padding-bottom: 2px;
}

/* ---------- Home: rhythm ---------- */
main > .ks-home {
    max-width: none;
    padding: 0;
    overflow-x: clip;
    padding-bottom: var(--section-spacing);
}

/* Platform breadcrumbs under the header: small, on the page gutter; hidden where the
   template has its own trail (product, category) or none is wanted (home). The staging
   element page prints its own copy inside main as well. */
body > #breadcrumbs {
    max-width: var(--page-width);
    margin: 22px auto 0;
    padding: 0 clamp(16px, 3vw, 40px);
}

body > #breadcrumbs .breadcrumb {
    font-size: 13.5px;
}

body > #breadcrumbs .breadcrumb a {
    color: var(--text-color);
}

body:has(main > .ks-home, main > .pdp, main > .category-page, main > .bt-404) > #breadcrumbs,
main #breadcrumbs {
    display: none;
}

body > #breadcrumbs + main > :first-child:not(.ks-home):not(.pdp):not(.category-page):not(.category-elements-above):not(.search-results):not(.bt-page-head):not(.bt-article):not(.bt-404):not(.landing-hero):not(.sitemap) {
    margin-top: clamp(20px, 3vw, 40px);
}

.ks-section {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: var(--section-spacing) clamp(16px, 3vw, 40px) 0;
}

/* Section head: eyebrow + big title left, a link (or the countdown) right. */
.ks-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    margin: 0 0 clamp(24px, 3vw, 32px);
}

.ks-head__title {
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    line-height: 0.95;
}

.ks-head__title em {
    font-family: var(--heading-font);
    font-style: normal;
    color: var(--brand-color);
}

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

.ks-head__link {
    flex: none;
    padding-bottom: 3px;
    border-bottom: 3px solid var(--brand-color);
    color: var(--text-color);
    font-family: var(--heading-font);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
}

.ks-head__link:hover {
    color: var(--brand-color);
}

/* Product grid on the home page. */
.ks-grid.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 36px clamp(14px, 1.6vw, 22px);
}

.ks-grid--3.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ks-grid--2.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ks-grid--1.product-grid { grid-template-columns: minmax(0, 360px); }

/* ---------- Hero: photo + category rail ---------- */
.ks-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 16px;
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 24px clamp(16px, 3vw, 40px) 0;
}

.ks-hero--full {
    grid-template-columns: minmax(0, 1fr);
}

.ks-hero__main {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(var(--hero-height), 78svh);
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--dark-surface-color);
    color: var(--hero-text-color);
    isolation: isolate;
}

.ks-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.ks-hero__media img,
.ks-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No photo: the popular product sits on the image surface, the scrim goes to the left. */
.ks-hero--product .ks-hero__media {
    background: var(--image-background-color);
}

.ks-hero--product .ks-hero__media img {
    object-fit: contain;
    padding: 6% 4% 6% 40%;
    mix-blend-mode: multiply;
}

.ks-hero__main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--hero-overlay-color) 62%, transparent), color-mix(in srgb, var(--hero-overlay-color) 8%, transparent) 72%),
        linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--hero-overlay-color) 60%, transparent));
}

.ks-hero__copy {
    max-width: 680px;
    padding: clamp(24px, 3.6vw, 48px);
}

.ks-hero__title {
    margin: 0 0 18px;
    color: inherit;
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: 0.88;
    letter-spacing: -0.015em;
}

.ks-hero__highlight {
    display: block;
    font-family: var(--heading-font);
    color: var(--accent-color);
}

.ks-hero__text {
    max-width: 520px;
    margin: 0 0 26px;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.55;
    opacity: 0.92;
}

.ks-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* The stamp: a tilted accent disc top-right ("Since / 1998 / in town"). */
.ks-stamp {
    position: absolute;
    top: clamp(16px, 2.4vw, 30px);
    right: clamp(16px, 2.4vw, 30px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: clamp(88px, 9vw, 128px);
    height: clamp(88px, 9vw, 128px);
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--accent-text-color);
    font-family: var(--heading-font);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-10deg);
}

.ks-stamp strong {
    font-family: var(--heading-font);
    font-size: clamp(1.6rem, 2.7vw, 2.4rem);
}

.ks-stamp small {
    font-family: var(--heading-font);
    font-size: clamp(10px, 0.9vw, 13px);
    letter-spacing: 0.06em;
}

/* Category rail: four stacked tiles, photo left, name, an arrow block right. */
.ks-rail-cats {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 16px;
}

.ks-rail-cat {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 104px;
    overflow: hidden;
    padding-right: 20px;
    border-radius: var(--radius);
    background: var(--surface-color);
    color: var(--surface-text-color);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.ks-rail-cat:hover,
.ks-rail-cat:focus-visible {
    background: var(--dark-surface-color);
    color: var(--dark-surface-text-color);
}

.ks-rail-cat__media {
    align-self: stretch;
    width: 38%;
    max-width: 160px;
    flex: none;
    overflow: hidden;
    background: var(--image-background-color);
}

.ks-rail-cat__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ks-rail-cat:hover .ks-rail-cat__media img {
    transform: scale(1.06);
}

.ks-rail-cat__initial,
.ks-cat__initial,
.ks-story__initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--heading-font);
    font-size: 3rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--text-color) 30%, transparent);
}

.ks-rail-cat__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ks-rail-cat__name {
    font-family: var(--heading-font);
    font-size: clamp(1.3rem, 2vw, 1.9rem);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    overflow-wrap: break-word;
    hyphens: auto;
}

.ks-rail-cat__body small {
    font-size: 14px;
    color: color-mix(in srgb, currentColor 70%, transparent);
}

.ks-rail-cat__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: auto;
    border-radius: var(--button-radius);
    background: var(--brand-color);
    color: var(--brand-text-color);
    flex: none;
}

.ks-rail-cat__go svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    transition: transform 0.2s;
}

.ks-rail-cat:hover .ks-rail-cat__go svg {
    transform: translateX(3px);
}

/* ---------- USP strip: dark panel, four columns ---------- */
.ks-usps {
    max-width: var(--page-width);
    margin: 16px auto 0;
    padding: 0 clamp(16px, 3vw, 40px);
}

.ks-usps__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--dark-surface-color);
    color: var(--dark-surface-text-color);
    list-style: none;
    max-width: none;
}

.ks-usps__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ks-usps__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ks-usps__list--1 { grid-template-columns: minmax(0, 1fr); }

.ks-usp {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px clamp(16px, 2vw, 26px);
}

.ks-usp + .ks-usp {
    box-shadow: inset 1px 0 0 color-mix(in srgb, var(--dark-surface-text-color) 12%, transparent);
}

.ks-usp__icon {
    display: inline-flex;
    flex: none;
    color: var(--accent-color);
}

.ks-usp__icon svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

.ks-usp__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ks-usp__body strong {
    font-family: var(--heading-font);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ks-usp__body span {
    font-size: 14px;
    color: color-mix(in srgb, var(--dark-surface-text-color) 72%, transparent);
}

/* ---------- Deals: the light surface band with a countdown ---------- */
.ks-deals__band {
    padding: clamp(24px, 3.2vw, 44px);
    border-radius: calc(var(--radius) + 8px);
    background: var(--surface-color);
    color: var(--surface-text-color);
}

.ks-deals .product-price--tag::before {
    background: var(--surface-color);
}

.ks-timer {
    display: flex;
    gap: 8px;
}

.ks-timer[hidden] {
    display: none;
}

.ks-timer > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 54px;
    padding: 6px 8px 5px;
    border-radius: calc(var(--radius) * 0.45);
    background: var(--dark-surface-color);
    color: var(--dark-surface-text-color);
    font-family: var(--heading-font);
    line-height: 1.1;
}

.ks-timer b {
    font-family: var(--heading-font);
    font-size: 21px;
    font-weight: 700;
}

.ks-timer small {
    font-family: var(--heading-font);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.72;
}

/* ---------- Categories: tall photo tiles ---------- */
.ks-cats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.ks-cats--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ks-cats--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ks-cats--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ks-cats--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ks-cats--n1 { grid-template-columns: minmax(0, 420px); }

.ks-cat {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--image-background-color);
    color: var(--hero-text-color);
    text-decoration: none;
    isolation: isolate;
}

.ks-cat img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.ks-cat:hover img {
    transform: scale(1.05);
}

.ks-cat__initial {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.ks-cat::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--hero-overlay-color) 70%, transparent));
}

.ks-cat__name {
    min-width: 0;
    padding: 16px 18px;
    color: var(--hero-text-color);
    font-family: var(--heading-font);
    font-size: clamp(1.1rem, 1.5vw, 1.6rem);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    overflow-wrap: break-word;
    hyphens: auto;
}

.ks-cat:hover .ks-cat__name {
    color: var(--hero-text-color);
}

/* ---------- Workshop: dark panel, photo left ---------- */
.ks-workshop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    overflow: hidden;
    border-radius: calc(var(--radius) + 8px);
    background: var(--dark-surface-color);
    color: var(--dark-surface-text-color);
}

.ks-workshop__media {
    position: relative;
    min-height: 420px;
    background: color-mix(in srgb, var(--dark-surface-text-color) 8%, var(--dark-surface-color));
}

.ks-workshop__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ks-workshop__media.is-product {
    background: var(--image-background-color);
}

.ks-workshop__media.is-product img {
    object-fit: contain;
    padding: 8%;
    mix-blend-mode: multiply;
}

.ks-workshop__badge {
    position: absolute;
    left: clamp(16px, 2vw, 28px);
    bottom: clamp(16px, 2vw, 28px);
    padding: 14px 20px;
    border-radius: var(--radius);
    background: var(--accent-color);
    color: var(--accent-text-color);
    font-family: var(--heading-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
}

.ks-workshop__badge strong {
    display: block;
    font-family: var(--heading-font);
    font-size: 44px;
}

.ks-workshop__body {
    padding: clamp(28px, 4.2vw, 56px);
}

.ks-workshop__title {
    margin: 0 0 16px;
    color: inherit;
    font-size: clamp(2.2rem, 4.2vw, 3.8rem);
    line-height: 0.95;
}

.ks-workshop__text {
    max-width: 540px;
    margin: 0 0 28px;
    color: color-mix(in srgb, var(--dark-surface-text-color) 78%, transparent);
    font-size: 17px;
    line-height: 1.6;
}

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

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

.ks-service {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 18px;
    border-radius: calc(var(--radius) * 0.7);
    background: color-mix(in srgb, var(--dark-surface-text-color) 7%, transparent);
}

.ks-service__icon {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--accent-color);
}

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

.ks-service strong {
    font-family: var(--heading-font);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ks-service span:not(.ks-service__icon) {
    font-size: 14px;
    color: color-mix(in srgb, var(--dark-surface-text-color) 70%, transparent);
}

.ks-workshop__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---------- Store: photo + info card ---------- */
.ks-store {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 16px;
}

.ks-store--plain {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
}

.ks-store__media {
    position: relative;
    min-height: 480px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--image-background-color);
}

.ks-store__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ks-store__media.is-product img {
    object-fit: contain;
    padding: 8%;
    mix-blend-mode: multiply;
}

.ks-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--brand-color);
    color: var(--brand-text-color);
    cursor: pointer;
    transition: transform 0.2s;
}

.ks-play::after {
    content: "";
    position: absolute;
    left: 34px;
    top: 27px;
    border-left: 24px solid currentColor;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.ks-play:hover {
    transform: scale(1.06);
}

.ks-store__body {
    padding: clamp(24px, 3.2vw, 44px);
    border-radius: var(--radius);
    background: var(--surface-color);
    color: var(--surface-text-color);
}

.ks-store__title {
    margin: 0 0 12px;
    color: inherit;
    font-size: clamp(2rem, 3.6vw, 3.4rem);
    line-height: 0.95;
}

.ks-store__status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    font-weight: 600;
}

.ks-store__status.is-open {
    color: var(--success-color);
}

.ks-store__text {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.6;
}

.ks-store__address {
    margin: 0 0 22px;
    font-size: 16.5px;
    font-style: normal;
    line-height: 1.6;
}

.ks-store__links {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 18px;
    margin-top: 4px;
}

.ks-store__links a {
    color: var(--anchor-color);
    font-weight: 600;
}

.ks-hours {
    width: 100%;
    margin: 0 0 22px;
    border-collapse: collapse;
    font-size: 15px;
}

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

.ks-hours td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ks-hours tr.is-today th,
.ks-hours tr.is-today td {
    color: var(--brand-color);
    font-weight: 700;
}

.ks-store__extra {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 22px;
    font-family: var(--heading-font);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ks-store__extra > span {
    display: inline-flex;
    color: var(--brand-color);
}

.ks-store__extra svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

/* ---------- Reviews: one outlined strip ---------- */
.ks-reviews {
    display: flex;
    align-items: center;
    gap: 24px clamp(24px, 3vw, 40px);
    padding: clamp(22px, 2.6vw, 30px) clamp(22px, 3vw, 40px);
    border: 2px solid var(--text-color);
    border-radius: var(--radius);
}

.ks-reviews__score {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: none;
}

.ks-reviews__score > strong {
    font-family: var(--heading-font);
    font-size: clamp(3rem, 5vw, 4.6rem);
    font-weight: 700;
    line-height: 1;
}

.ks-reviews__score small {
    font-family: var(--heading-font);
    font-size: 0.34em;
    color: var(--muted-text-color);
}

.ks-reviews__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

.ks-stars {
    display: inline-flex;
    gap: 3px;
    color: var(--rating-color);
}

.ks-stars svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.ks-reviews__quote {
    flex: 1;
    margin: 0;
}

.ks-reviews__quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    font-style: italic;
    line-height: 1.5;
}

.ks-reviews__quote figcaption {
    margin-top: 6px;
    color: var(--muted-text-color);
    font-size: 14px;
    font-weight: 600;
}

.ks-reviews > .ks-btn {
    margin-left: auto;
    flex: none;
}

/* ---------- Blog / app post cards ---------- */
.ks-stories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 24px;
}

.ks-stories--posts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ks-story {
    display: flex;
    flex-direction: column;
    color: var(--text-color);
    text-decoration: none;
}

.ks-story__media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--image-background-color);
}

.ks-story__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

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

.ks-story__meta {
    margin: 16px 0 8px;
    color: var(--muted-text-color);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ks-story__title {
    font-family: var(--heading-font);
    font-size: clamp(1.35rem, 1.9vw, 1.75rem);
    font-weight: 700;
    line-height: 1.02;
    text-transform: uppercase;
}

.ks-story:hover .ks-story__title {
    color: var(--brand-color);
}

/* ---------- Events: date flags in a list ---------- */
.ks-events {
    display: grid;
    gap: 12px;
    margin: 0 !important;
    padding: 0;
    list-style: none;
    max-width: none;
}

.ks-event {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 18px 14px 14px;
    border-radius: var(--radius);
    background: var(--surface-color);
    color: var(--surface-text-color);
}

.ks-event__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    flex: none;
    background: var(--brand-color);
    color: var(--brand-text-color);
    font-family: var(--heading-font);
    line-height: 1;
    text-transform: uppercase;
    transform: skewX(-6deg);
}

.ks-event__date > * {
    transform: skewX(6deg);
}

.ks-event__date strong {
    font-family: var(--heading-font);
    font-size: 30px;
}

.ks-event__date span {
    font-family: var(--heading-font);
    font-size: 13px;
    letter-spacing: 0.08em;
}

.ks-event__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.ks-event__name {
    font-family: var(--heading-font);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

.ks-event__meta {
    color: var(--muted-text-color);
    font-size: 14.5px;
}

.ks-event__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: var(--button-radius);
    background: var(--dark-surface-color);
    color: var(--dark-surface-text-color);
}

.ks-event__go svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

/* ---------- Newsletter: brand panel with a slanted sheen ---------- */
.ks-newsletter {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px 40px;
    overflow: hidden;
    padding: clamp(28px, 4.2vw, 56px);
    border-radius: calc(var(--radius) + 8px);
    background: var(--brand-color);
    color: var(--brand-text-color);
    isolation: isolate;
}

.ks-newsletter::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -6%;
    z-index: -1;
    width: 34%;
    height: 140%;
    background: color-mix(in srgb, var(--brand-text-color) 9%, transparent);
    transform: skewX(-16deg);
}

.ks-newsletter__title {
    margin: 0;
    color: inherit;
    font-size: clamp(2.2rem, 4.2vw, 3.8rem);
    line-height: 0.95;
}

.ks-newsletter__text {
    margin: 14px 0 0;
    max-width: 480px;
    opacity: 0.9;
}

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

.ks-newsletter .sitepack-newsletter-form {
    max-width: none;
    margin: 0;
}

.ks-newsletter .sitepack-newsletter-form .sitepack-newsletter-form__row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
}

.ks-newsletter .sitepack-newsletter-form .sitepack-newsletter-form__email {
    flex: 1;
    min-width: 0;
    min-height: 56px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--button-radius);
    background: var(--input-background-color);
    color: var(--text-color);
    font-size: 16px;
}

.ks-newsletter .sitepack-newsletter-form .sitepack-newsletter-form__button {
    flex: none;
    width: auto;
    min-height: 56px;
    padding: 0 26px;
    border: 0;
    border-radius: var(--button-radius);
    background: var(--dark-surface-color);
    color: var(--dark-surface-text-color);
    font-family: var(--heading-font);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.ks-newsletter .sitepack-newsletter-form .sitepack-newsletter-form__button:hover {
    background: color-mix(in srgb, var(--dark-surface-color) 82%, var(--dark-surface-text-color));
}

/* Product page rows (goes well with, related): left-aligned like the home heads. */
.pdp .pdp-related__title,
main .pdp-related__title {
    text-align: left;
    font-size: clamp(1.9rem, 3vw, 2.8rem);
}

/* ---------- Page-builder content in the Kickstand voice ---------- */
/* Heading and text elements keep the case the merchant picked: the heading element has its
   own "uppercase" switch (applied inline), so the theme does not force capitals on long
   content headings. Theme-owned display titles stay uppercase. */
main :is(.container-element-heading, .container-element-text, .element-text) :is(h1, h2, h3, h4, h5, h6) {
    text-transform: none;
    letter-spacing: -0.005em;
    line-height: 1.15;
}

/* A page that opens with a cover/hero element starts with that element right under the
   header: no breadcrumb trail above it (on the home it only repeated the site name). */
body.first-element-cover > #breadcrumbs {
    display: none;
}

/* !important: the content-page "air under the header" rule carries a long :not() chain. */
body.first-element-cover main > :first-child {
    margin-top: 0 !important;
}

/* A page that ends with a full-width background element runs straight into the footer
   instead of leaving a white strip between the two bands. */
main:has(> .container-element-background:last-child) ~ footer {
    margin-top: 0;
}

main:has(> .container-element-background:last-child) {
    padding-bottom: 0;
}

/* Footer social links: one per line with the icon in a fixed box. The platform prints Line
   Awesome brand glyphs; two names it uses have no glyph there, so they get the plain brand
   glyph (Instagram) or no icon (the generic "clone" icon it uses for TikTok). */
footer .social-media-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

footer .social-media-list .social-media-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

footer .social-media-list .social-media-item:hover {
    text-decoration: underline;
}

footer .social-media-list .social-media-item i {
    display: inline-flex;
    justify-content: center;
    width: 20px;
    font-size: 19px;
    line-height: 1;
}

footer .social-media-list .social-media-item .fa-instagram-square::before {
    content: "\f16d";
}

footer .social-media-list .social-media-item i.fa:not(.fab) {
    display: none;
}

/* Category page: air between the header and its breadcrumb, like the product page (a
   platform/shared rule resets the wrapper's top padding to 0). */
main > .category-page.container-element {
    padding-top: clamp(16px, 2vw, 26px);
}

/* ---------- Store video dialog ---------- */
.ks-video-dialog {
    width: min(1100px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--shadow-color);
    overflow: hidden;
}

.ks-video-dialog::backdrop {
    background: color-mix(in srgb, var(--shadow-color) 80%, transparent);
}

.ks-video-dialog video {
    display: block;
    width: 100%;
    max-height: 80svh;
}

.ks-video-dialog__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--button-radius);
    background: var(--brand-color);
    color: var(--brand-text-color);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

/* ---------- Product page: gallery left, buy column right behind a thin divider ---------- */
main > .pdp {
    padding-top: 26px;
    padding-bottom: 0;
}

.pdp__breadcrumb {
    margin-bottom: 22px;
}

.pdp .pdp__main {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    grid-template-areas:
        "gallery info"
        "details info";
    grid-template-rows: auto 1fr;
    gap: 0;
    align-items: start;
}

.pdp .pdp-gallery {
    grid-area: gallery;
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    padding-right: clamp(24px, 3.6vw, 48px);
    position: static;
}

.pdp .pdp-accordions {
    grid-area: details;
    margin-top: clamp(32px, 4vw, 52px);
    padding-right: clamp(24px, 3.6vw, 48px);
    padding-bottom: clamp(32px, 4vw, 56px);
}

.pdp .pdp-info {
    grid-area: info;
    align-self: stretch;
    position: static;
    display: flex;
    flex-direction: column;
    padding: 18px 0 clamp(32px, 4vw, 56px) clamp(24px, 3.6vw, 48px);
    border-left: 1px solid var(--border-color);
}

/* The stage: the photo on the image surface, round arrows and a counter pill. */
.pdp .pdp-gallery .pdp-gallery__stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: none;
    order: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--image-background-color);
}

.pdp .pdp-gallery__stage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
    mix-blend-mode: multiply;
}

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

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

.pdp-gallery__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--card-background-color);
    color: var(--text-color);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--shadow-color) 14%, transparent);
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s, color 0.2s;
}

.pdp-gallery__arrow svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.pdp-gallery__arrow--prev { left: 22px; }
.pdp-gallery__arrow--next { right: 22px; }

.pdp-gallery__arrow:hover,
.pdp-gallery__arrow:focus-visible {
    background: var(--brand-color);
    color: var(--brand-text-color);
}

.pdp-gallery__count {
    position: absolute;
    right: 22px;
    bottom: 20px;
    z-index: 2;
    padding: 7px 16px;
    border-radius: var(--button-radius);
    background: var(--card-background-color);
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--shadow-color) 10%, transparent);
}

.pdp .pdp-gallery__thumbs {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-top: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    max-height: none;
    padding-bottom: 2px;
}

.pdp .pdp-gallery .pdp-gallery__thumb {
    flex: none;
    aspect-ratio: auto;
    width: 84px;
    height: 76px;
    padding: 6px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: var(--image-background-color);
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s, border-color 0.2s;
}

.pdp .pdp-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

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

/* Accordions: big quiet heads between hairlines. */
.pdp .pdp-accordion {
    border: 0;
    border-top: 1px solid var(--border-color);
    border-radius: 0;
    background: transparent;
}

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

.pdp .pdp-accordion__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0;
    font-family: var(--heading-font);
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    text-transform: none;
    list-style: none;
    cursor: pointer;
}

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

.pdp .pdp-accordion .accordion-icon {
    position: relative;
    width: 12px;
    height: 12px;
    flex: none;
    border: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    background: none;
}

.pdp .pdp-accordion .accordion-icon::before,
.pdp .pdp-accordion .accordion-icon::after {
    display: none;
}

.pdp .pdp-accordion[open] .accordion-icon {
    transform: translateY(3px) rotate(-135deg);
}

.pdp .pdp-accordion__body {
    padding: 0 0 30px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-color);
}

.pdp-accordion__body--rich :is(h2, h3, h4) {
    margin: 1.4em 0 0.5em;
    font-size: 1.15rem;
}

.pdp-accordion__body--rich ul {
    padding-left: 1.2rem !important;
    list-style: disc;
}

.pdp .pdp-specs {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.pdp .pdp-specs__row {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 15px;
}

.pdp .pdp-specs__row:last-child {
    border-bottom: 0;
}

.pdp .pdp-specs__row dt {
    color: var(--muted-text-color);
    font-weight: 500;
}

.pdp .pdp-specs__row dd {
    margin: 0;
    font-weight: 600;
}

/* Stock: a coloured dot and line, and a thin meter that fills with the live count
   (theme.js sets the state class and the fill width). */
.pdp-stock {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 26px;
    color: var(--success-color);
}

.pdp-stock.is-low,
.pdp-stock.is-backorder {
    color: var(--stock-warning-color);
}

.pdp-stock.is-out {
    color: var(--stock-error-color);
}

.pdp-stock__line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
}

.pdp-stock__dot {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}

.pdp-stock .product-stock-info {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.pdp-stock__meter {
    position: relative;
    height: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--border-color);
}

.pdp-stock__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    border-radius: inherit;
    background: currentColor;
    transition: width 0.6s cubic-bezier(.2, .8, .2, 1);
}

.pdp-stock.is-pending .pdp-stock__fill,
.pdp-stock.is-out .pdp-stock__fill {
    width: 0;
}

.pdp .pdp-info__brand {
    margin-bottom: 6px;
    color: var(--muted-text-color);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pdp .pdp-info__title {
    margin: 0 0 16px;
    font-size: clamp(1.5rem, 2.2vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.08;
    text-transform: uppercase;
    overflow-wrap: break-word;
}

.pdp .pdp-info__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin-bottom: 22px;
}

.pdp .pdp-price {
    font-family: var(--heading-font);
    font-size: clamp(1.75rem, 2.6vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-color);
}

/* A sale price sits on the slanted price tag, like the cards. */
.pdp .pdp-price--promo {
    position: relative;
    padding: 6px 18px 4px 30px;
    background: var(--accent-color);
    color: var(--accent-text-color);
    clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
    transform: skewX(-6deg);
}

.pdp .pdp-price--promo::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--background-color);
}

.pdp .pdp-price__old {
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-weight: 500;
    color: var(--subtle-text-color);
    text-decoration: line-through;
}

.pdp .pdp-info__intro {
    margin: 0 0 26px;
    color: var(--muted-text-color);
    font-size: 15.5px;
    line-height: 1.65;
}

/* Variant picker (sitepack_product_options): labels above pill chips. */
.pdp-info .sp-variant-options {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0 0 6px;
}

.pdp-info .sp-variant-options .sp-variant-option {
    margin: 0;
}

.pdp-info .sp-variant-options .sp-variant-option .sp-variant-option__label {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 15px;
}

.pdp-info .sp-variant-options .sp-variant-option .sp-variant-option__label strong {
    font-weight: 700;
}

.pdp-info .sp-variant-options .sp-variant-option .sp-variant-option__values {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pdp-info .sp-variant-options .sp-variant-option .sp-variant-value:not(.sp-variant-value--swatch) {
    min-width: 64px;
    min-height: 46px;
    padding: 0 20px;
    border: 1.5px solid var(--input-border-color);
    border-radius: var(--button-radius);
    background: var(--input-background-color);
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
    box-shadow: none;
}

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

.pdp-info .sp-variant-options .sp-variant-option .sp-variant-value.is-active:not(.sp-variant-value--swatch) {
    border-color: var(--text-color);
    background: var(--input-background-color);
    color: var(--text-color);
    box-shadow: inset 0 0 0 1px var(--text-color);
}

.pdp-info .sp-variant-options .sp-variant-option .sp-variant-value.is-unavailable:not(.sp-variant-value--swatch) {
    color: var(--subtle-text-color);
    text-decoration: line-through;
    border-style: dashed;
}

.pdp-info .sp-variant-options .sp-variant-availability {
    color: var(--stock-error-color);
}

/* Legacy attribute chips (shops from before variants, also from sitepack_product_options()). */
.pdp-info .pdp-option {
    margin: 0 0 22px;
}

.pdp-info .pdp-option .pdp-option__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}

.pdp-info .pdp-option .pdp-option__label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-color);
}

.pdp-info .pdp-option .pdp-option__link {
    color: var(--text-color);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pdp-info .pdp-option .pdp-option__values {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pdp-info .pdp-option .pdp-option__value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 46px;
    padding: 0 20px;
    border: 1.5px solid var(--input-border-color);
    border-radius: var(--button-radius);
    background: var(--input-background-color);
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s;
}

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

.pdp-info .pdp-option .pdp-option__value.is-active {
    border-color: var(--text-color);
    background: var(--input-background-color);
    color: var(--text-color);
    box-shadow: inset 0 0 0 1px var(--text-color);
}

/* The buy form sits under a hairline, full width, as a pill in the brand colour. */
.pdp .pdp-buy {
    display: block;
    margin-top: 26px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

.pdp .pdp-buy .btn-primary.pdp-buy__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--button-radius);
    background: var(--brand-color);
    color: var(--brand-text-color);
    font-family: var(--heading-font);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pdp .pdp-buy .btn-primary.pdp-buy__submit:hover {
    background: var(--brand-hover-color);
}

.pdp .pdp-buy .btn-primary.pdp-buy__submit:disabled:not(.disabled) {
    background: var(--disabled-color);
    color: var(--muted-text-color);
    cursor: not-allowed;
}

.pdp-buy__icon:empty {
    display: none;
}

.pdp-buy__submit.is-loading .pdp-buy__icon,
.pdp-buy__submit.is-added .pdp-buy__icon {
    display: inline-flex;
}

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

/* Pick-up in the shop */
.pdp-pickup {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    margin-top: 30px;
}

.pdp-pickup__icon,
.pdp-usps__icon {
    display: inline-flex;
    color: var(--success-color);
}

.pdp-pickup__icon svg,
.pdp-usps__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pdp-pickup__body p {
    margin: 0;
}

.pdp-pickup__title {
    font-size: 16px;
    line-height: 1.4;
}

.pdp-pickup__title strong {
    font-weight: 700;
}

.pdp-pickup__text {
    margin-top: 4px !important;
    color: var(--muted-text-color);
    font-size: 14.5px;
}

.pdp-pickup__link {
    display: inline-block;
    margin-top: 10px;
    color: var(--text-color);
    font-size: 14.5px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Advice: a soft panel with the shop's phone number. */
.pdp-advice {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-top: 30px;
    padding: 18px 20px;
    border-radius: var(--radius);
    background: var(--accent-surface-color);
    color: var(--accent-surface-text-color);
    text-decoration: none;
    transition: background-color 0.2s;
}

.pdp-advice:hover {
    background: color-mix(in srgb, var(--accent-surface-color) 88%, var(--accent-surface-text-color));
    color: var(--accent-surface-text-color);
}

.pdp-advice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand-color);
    color: var(--brand-text-color);
}

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

.pdp-advice__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 14.5px;
    line-height: 1.45;
}

.pdp-advice__body strong {
    font-size: 16px;
}

.pdp-advice__go svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

/* Promises */
.pdp .pdp-usps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 30px 0 0 !important;
    padding: 0;
    border: 0;
    list-style: none;
}

.pdp .pdp-usps:empty {
    display: none;
}

.pdp-usps__item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted-text-color);
    font-size: 16px;
}

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

/* Events band and recommendations below the product. */
main > .pdp-stall-wrap {
    margin-top: clamp(40px, 5vw, 72px);
}

.pdp-stall .pdp-stall__title {
    margin: 6px 0 16px;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.pdp-stall .pdp-stall__events {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pdp-stall .pdp-stall__event {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    font-size: 15.5px;
}

.pdp-stall .pdp-stall__event-date {
    min-width: 128px;
    font-weight: 700;
}

.pdp-stall .pdp-stall__event-location {
    color: var(--muted-text-color);
}

.pdp-stall .pdp-stall__event-location::before {
    content: "· ";
}

.pdp-related {
    padding-top: clamp(56px, 6vw, 88px);
}

.pdp-related__title {
    margin: 0 0 clamp(28px, 3vw, 44px);
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    text-align: center;
    letter-spacing: -0.03em;
}

main > .pdp-related:last-of-type {
    padding-bottom: clamp(56px, 6vw, 96px);
}

/* ---------- Footer: square, roomy, uppercase headings in the heading font ---------- */
footer {
    margin-top: var(--section-spacing);
    border-radius: 0;
}

main:has(> .ks-home) + footer,
main:has(> .ks-home) ~ footer {
    margin-top: 0;
}

footer .container-element-columns > .row {
    padding-top: clamp(48px, 5vw, 72px);
    padding-bottom: clamp(40px, 5vw, 64px);
}

footer .container-element-heading h1,
footer .container-element-heading h2,
footer .container-element-heading h3,
footer .container-element-heading h4 {
    margin: 0 0 1.2rem;
    font-family: var(--heading-font);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-transform: uppercase;
    opacity: 1;
}

footer .container-element-text,
footer .container-element-opening-times p,
footer .list-navigation {
    font-size: 15.5px;
    line-height: 1.6;
}

footer .list-navigation {
    gap: 1rem;
}

footer .navigation-link:hover {
    transform: none;
}

footer .sitepack-newsletter-form__row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 18px;
    border-radius: var(--button-radius);
    background: var(--input-background-color);
}

footer .sitepack-newsletter-form__email {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--text-color);
}

footer .sitepack-newsletter-form__button {
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--button-radius);
    background: var(--brand-color);
    color: var(--brand-text-color);
    font-weight: 700;
}

#copyright {
    padding: 22px clamp(16px, 3vw, 40px) 28px;
    font-size: 13px;
}

#copyright p {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 40px);
    text-align: left;
}

/* ---------- Page heads (products, search, blog tag, 404): left, like the home heads ---------- */
.bt-page-head.bt-page-head {
    padding-top: clamp(32px, 4vw, 56px);
    padding-bottom: clamp(20px, 2.6vw, 32px);
    text-align: left;
}

.search-result__title,
.search-result__title a {
    text-transform: none;
    letter-spacing: 0;
}

.bt-page-head .bt-page-head__title {
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 700;
}

.bt-page-head .bt-head__text {
    max-width: 640px;
    margin-left: 0;
    margin-right: 0;
}

/* ---------- Content pages: air under the header ----------
   Page-builder pages, legal, cart and account start straight under the header; the
   templates with their own head (product, category, search, blog, 404, landing) keep theirs. */
main > :first-child:not(.ks-home):not(.pdp):not(.category-page):not(.category-elements-above):not(.search-results):not(.bt-page-head):not(.bt-article):not(.bt-404):not(.landing-hero):not(.sitemap) {
    margin-top: clamp(32px, 4.5vw, 64px);
}

/* Uppercase display titles, tight like the home page. */
.category-hero__title,
.sitemap h1,
.landing-hero__title,
.element-hero-title,
.element-cta-banner-title {
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

/* ---------- Cart page (sitepack_cart) ---------- */
main:has(> .cart-empty) > h1 {
    text-align: center;
}

main > .container-element.cart-empty:not(.container-element-columns) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 560px;
    margin: clamp(24px, 4vw, 48px) auto 0;
    padding: clamp(36px, 5vw, 64px) clamp(16px, 3vw, 40px);
    border-radius: var(--radius);
    background: var(--surface-color);
    text-align: center;
}

.cart-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--card-background-color);
    color: var(--brand-color);
}

.cart-empty__icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

main > .cart-empty p {
    margin: 0;
    font-size: 17px;
}

/* ---------- Cart drawer (sitepack_shopping_cart_icon) ----------
   A floating panel inset from the screen edge with rounded corners, roomy item rows (photo
   on the image surface, pill quantity stepper, bold price) and a footer with the total, a
   full-width pill to the checkout and a link to the cart page (theme.js adds it). The
   platform rules nest up to eight classes deep; the drawer's id outranks them. */
#sitepack-cart-sidebar {
    top: 12px;
    right: calc(-1 * (min(440px, 100vw - 24px) + 32px));
    width: min(440px, 100vw - 24px);
    max-width: none;
    height: calc(100% - 24px);
    overflow: hidden;
    border-radius: calc(var(--radius) * 2);
    background: var(--card-background-color);
    color: var(--text-color);
    box-shadow: 0 30px 80px color-mix(in srgb, var(--shadow-color) 28%, transparent);
    transition: right 0.38s cubic-bezier(.2, .8, .2, 1);
    text-align: left;
}

#sitepack-cart-sidebar.open {
    right: 12px;
}

#sitepack-cart-sidebar:not(.open) {
    box-shadow: none;
}

#sitepack-cart-sidebar .sitepack-cart-sidebar-header {
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--border-color);
}

#sitepack-cart-sidebar .sitepack-cart-sidebar-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--heading-font);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-color);
}

/* Item count next to the title (theme.js keeps data-count up to date). */
#sitepack-cart-sidebar .sitepack-cart-sidebar-header h3[data-count]::after {
    content: attr(data-count);
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--surface-color);
    color: var(--text-color);
    font-family: var(--body-font);
    font-size: 13px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    letter-spacing: 0;
}

#sitepack-cart-sidebar .sitepack-cart-sidebar-header .sitepack-cart-sidebar-close {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: var(--surface-color);
    color: var(--text-color);
    transition: background-color 0.2s, color 0.2s;
}

#sitepack-cart-sidebar .sitepack-cart-sidebar-header .sitepack-cart-sidebar-close img {
    opacity: 0;
    width: 16px;
    height: 16px;
}

#sitepack-cart-sidebar .sitepack-cart-sidebar-header .sitepack-cart-sidebar-close::before {
    content: "";
    position: absolute;
    inset: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M 7.21875 5.78125 L 5.78125 7.21875 L 14.5625 16 L 5.78125 24.78125 L 7.21875 26.21875 L 16 17.4375 L 24.78125 26.21875 L 26.21875 24.78125 L 17.4375 16 L 26.21875 7.21875 L 24.78125 5.78125 L 16 14.5625 Z'/%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='M 7.21875 5.78125 L 5.78125 7.21875 L 14.5625 16 L 5.78125 24.78125 L 7.21875 26.21875 L 16 17.4375 L 24.78125 26.21875 L 26.21875 24.78125 L 17.4375 16 L 26.21875 7.21875 L 24.78125 5.78125 L 16 14.5625 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#sitepack-cart-sidebar .sitepack-cart-sidebar-header .sitepack-cart-sidebar-close:hover {
    background: var(--text-color);
    color: var(--card-background-color);
}

#sitepack-cart-sidebar .sitepack-cart-sidebar-content {
    padding: 8px 24px;
}

#sitepack-cart-sidebar .sitepack-cart-empty-message {
    margin: 0;
    padding: 64px 12px 24px;
    color: var(--muted-text-color);
    font-size: 15.5px;
    text-align: center;
}

/* An empty drawer shows a basket glyph above the line. */
#sitepack-cart-sidebar .sitepack-cart-empty-message::before {
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 18px;
    background: color-mix(in srgb, var(--text-color) 28%, transparent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M 5 7 C 4.449219 7 4 7.449219 4 8 C 4 8.550781 4.449219 9 5 9 L 7.21875 9 L 9.84375 19.5 C 10.066406 20.390625 10.863281 21 11.78125 21 L 23.25 21 C 24.152344 21 24.917969 20.402344 25.15625 19.53125 L 27.75 10 L 11 10 L 11.5 12 L 25.15625 12 L 23.25 19 L 11.78125 19 L 9.15625 8.5 C 8.933594 7.609375 8.136719 7 7.21875 7 Z M 22 21 C 20.355469 21 19 22.355469 19 24 C 19 25.644531 20.355469 27 22 27 C 23.644531 27 25 25.644531 25 24 C 25 22.355469 23.644531 21 22 21 Z M 13 21 C 11.355469 21 10 22.355469 10 24 C 10 25.644531 11.355469 27 13 27 C 14.644531 27 16 25.644531 16 24 C 16 22.355469 14.644531 21 13 21 Z M 13 23 C 13.5625 23 14 23.4375 14 24 C 14 24.5625 13.5625 25 13 25 C 12.4375 25 12 24.5625 12 24 C 12 23.4375 12.4375 23 13 23 Z M 22 23 C 22.5625 23 23 23.4375 23 24 C 23 24.5625 22.5625 25 22 25 C 21.4375 25 21 24.5625 21 24 C 21 23.4375 21.4375 23 22 23 Z'/%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='M 5 7 C 4.449219 7 4 7.449219 4 8 C 4 8.550781 4.449219 9 5 9 L 7.21875 9 L 9.84375 19.5 C 10.066406 20.390625 10.863281 21 11.78125 21 L 23.25 21 C 24.152344 21 24.917969 20.402344 25.15625 19.53125 L 27.75 10 L 11 10 L 11.5 12 L 25.15625 12 L 23.25 19 L 11.78125 19 L 9.15625 8.5 C 8.933594 7.609375 8.136719 7 7.21875 7 Z M 22 21 C 20.355469 21 19 22.355469 19 24 C 19 25.644531 20.355469 27 22 27 C 23.644531 27 25 25.644531 25 24 C 25 22.355469 23.644531 21 22 21 Z M 13 21 C 11.355469 21 10 22.355469 10 24 C 10 25.644531 11.355469 27 13 27 C 14.644531 27 16 25.644531 16 24 C 16 22.355469 14.644531 21 13 21 Z M 13 23 C 13.5625 23 14 23.4375 14 24 C 14 24.5625 13.5625 25 13 25 C 12.4375 25 12 24.5625 12 24 C 12 23.4375 12.4375 23 13 23 Z M 22 23 C 22.5625 23 23 23.4375 23 24 C 23 24.5625 22.5625 25 22 25 C 21.4375 25 21 24.5625 21 24 C 21 23.4375 21.4375 23 22 23 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#sitepack-cart-sidebar .sitepack-cart-item {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 16px;
    margin: 0;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-color);
}

#sitepack-cart-sidebar .sitepack-cart-item:last-child {
    border-bottom: 0;
}

#sitepack-cart-sidebar .sitepack-cart-item .sitepack-cart-item-thumb {
    width: 84px;
    height: 84px;
    padding: 6px;
    border: 0;
    border-radius: var(--radius);
    background: var(--image-background-color);
}

#sitepack-cart-sidebar .sitepack-cart-item .sitepack-cart-item-thumb img {
    mix-blend-mode: multiply;
}

#sitepack-cart-sidebar .sitepack-cart-item .sitepack-cart-item-info {
    gap: 6px;
    min-width: 0;
}

#sitepack-cart-sidebar .sitepack-cart-item .sitepack-cart-item-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

#sitepack-cart-sidebar .sitepack-cart-item .sitepack-cart-item-title a {
    color: var(--text-color);
}

#sitepack-cart-sidebar .sitepack-cart-item .sitepack-cart-item-title a:hover {
    color: var(--anchor-color);
    text-decoration: underline;
}

#sitepack-cart-sidebar .sitepack-cart-item .sitepack-cart-item-stock {
    font-size: 13px;
}

#sitepack-cart-sidebar .sitepack-cart-item .sitepack-cart-item-stock span::before,
#sitepack-cart-page .sitepack-cart-item-stock span::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 1px;
}

#sitepack-cart-sidebar .sitepack-cart-item-stock .stock-available,
#sitepack-cart-page .sitepack-cart-item-stock .stock-available {
    color: var(--success-color);
}

#sitepack-cart-sidebar .sitepack-cart-item-stock .stock-backorder,
#sitepack-cart-page .sitepack-cart-item-stock .stock-backorder {
    color: var(--stock-warning-color);
}

#sitepack-cart-sidebar .sitepack-cart-item-stock .stock-unavailable,
#sitepack-cart-page .sitepack-cart-item-stock .stock-unavailable {
    color: var(--stock-error-color);
}

#sitepack-cart-sidebar .sitepack-cart-item-stock :is(.stock-error, .loading-stock),
#sitepack-cart-page .sitepack-cart-item-stock :is(.stock-error, .loading-stock) {
    color: var(--muted-text-color);
    font-style: normal;
}

#sitepack-cart-sidebar .sitepack-cart-item .sitepack-cart-item-meta {
    margin-top: 8px;
    gap: 12px;
}

/* Quantity: one pill with round minus/plus buttons. */
#sitepack-cart-sidebar .sitepack-cart-qty-controls,
#sitepack-cart-page .sitepack-cart-qty-controls {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 3px;
    overflow: visible;
    border: 1px solid var(--input-border-color);
    border-radius: var(--button-radius);
    background: var(--input-background-color);
}

#sitepack-cart-sidebar .sitepack-cart-qty-controls .qty-btn,
#sitepack-cart-page .sitepack-cart-qty-controls .qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-color);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.15s;
}

#sitepack-cart-sidebar .sitepack-cart-qty-controls .qty-btn:hover,
#sitepack-cart-page .sitepack-cart-qty-controls .qty-btn:hover {
    background: var(--surface-color);
}

#sitepack-cart-sidebar .sitepack-cart-qty-controls .qty-input,
#sitepack-cart-page .sitepack-cart-qty-controls input {
    width: 34px;
    height: 32px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    box-shadow: none;
    -moz-appearance: textfield;
}

#sitepack-cart-sidebar .sitepack-cart-item .sitepack-cart-item-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
}

#sitepack-cart-sidebar .sitepack-cart-sidebar-footer {
    padding: 20px 24px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--surface-color);
}

#sitepack-cart-sidebar .sitepack-cart-sidebar-footer .sitepack-cart-total {
    align-items: baseline;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
}

#sitepack-cart-sidebar .sitepack-cart-sidebar-footer .sitepack-cart-total #cart-amount {
    font-family: var(--heading-font);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

#sitepack-cart-sidebar .sitepack-cart-sidebar-footer .sitepack-cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--button-radius);
    background: var(--brand-color);
    color: var(--brand-text-color);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
}

#sitepack-cart-sidebar .sitepack-cart-sidebar-footer .sitepack-cart-checkout-btn:hover {
    background: color-mix(in srgb, var(--brand-color) 86%, var(--shadow-color));
    color: var(--brand-text-color);
}

#sitepack-cart-sidebar .ks-drawer-cart-link {
    display: block;
    margin-top: 12px;
    color: var(--text-color);
    font-size: 14.5px;
    font-weight: 500;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* An empty drawer has nothing to pay for. */
#sitepack-cart-sidebar:has(.sitepack-cart-empty-message[style*="block"]) .sitepack-cart-sidebar-footer {
    display: none;
}

.sitepack-shopping-cart-container .sitepack-cart-overlay {
    background: color-mix(in srgb, var(--shadow-color) 45%, transparent);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

@media (max-width: 560px) {
    #sitepack-cart-sidebar {
        top: 8px;
        width: calc(100vw - 16px);
        height: calc(100% - 16px);
        right: calc(-100vw - 16px);
    }

    #sitepack-cart-sidebar.open {
        right: 8px;
    }

    #sitepack-cart-sidebar .sitepack-cart-sidebar-header,
    #sitepack-cart-sidebar .sitepack-cart-sidebar-content,
    #sitepack-cart-sidebar .sitepack-cart-sidebar-footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    #sitepack-cart-sidebar .sitepack-cart-item {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
    }

    #sitepack-cart-sidebar .sitepack-cart-item .sitepack-cart-item-thumb {
        width: 72px;
        height: 72px;
    }
}

/* ---------- Cart page (sitepack_cart) ----------
   Items left as clean rows, a sticky summary card right with the totals and a full-width
   pill to the checkout. The platform ships its own <style> after theme.css; the page's id
   outranks it. */
main > .cart-page-title {
    margin-bottom: clamp(20px, 3vw, 36px);
}

#sitepack-cart-page {
    margin: 0;
    font-family: inherit;
}

#sitepack-cart-page .sitepack-cart-loading {
    padding: 48px 0;
    color: var(--muted-text-color);
    text-align: center;
}

/* The platform shows the content with an inline display: block; keep the grid then. */
#sitepack-cart-page .sitepack-cart-content:not([style*="none"]) {
    display: grid !important;
}

#sitepack-cart-page .sitepack-cart-content {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    align-items: start;
    gap: clamp(24px, 4vw, 56px);
}

#sitepack-cart-page .sitepack-cart-content[style*="none"] {
    display: none;
}

#sitepack-cart-page .sitepack-cart-header-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 100px 110px;
    gap: 16px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--muted-text-color);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#sitepack-cart-page .sitepack-cart-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 100px 110px;
    align-items: center;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--border-color);
}

#sitepack-cart-page .sitepack-cart-header-row > *,
#sitepack-cart-page .sitepack-cart-item-row > * {
    flex: none;
    min-width: 0;
    margin: 0;
}

#sitepack-cart-page .sitepack-cart-col-product {
    text-align: left;
}

#sitepack-cart-page .sitepack-cart-col-quantity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

#sitepack-cart-page .sitepack-cart-col-price,
#sitepack-cart-page .sitepack-cart-col-total {
    text-align: right;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

#sitepack-cart-page .sitepack-cart-header-row > div {
    font-size: 12.5px;
}

#sitepack-cart-page .sitepack-cart-item-row .sitepack-cart-col-price {
    color: var(--muted-text-color);
}

#sitepack-cart-page .sitepack-cart-item-row .sitepack-cart-col-price s {
    color: var(--subtle-text-color);
}

#sitepack-cart-page .sitepack-cart-item-row .sitepack-cart-col-total {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-color);
}

#sitepack-cart-page .sitepack-cart-product-info {
    display: flex;
    align-items: center;
    gap: 18px;
}

#sitepack-cart-page .sitepack-cart-img-container {
    display: grid;
    place-items: center;
    flex: none;
    width: 96px;
    height: 96px;
    padding: 6px;
    border-radius: var(--radius);
    background: var(--image-background-color);
}

#sitepack-cart-page .sitepack-cart-img-container:empty::before {
    content: "";
    width: 34px;
    height: 34px;
    background: color-mix(in srgb, var(--text-color) 22%, transparent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M 2 5 L 2 27 L 30 27 L 30 5 Z M 4 7 L 28 7 L 28 20.90625 L 22.71875 15.59375 L 22 14.875 L 17.46875 19.40625 L 11.71875 13.59375 L 11 12.875 L 4 19.875 Z M 24 9 C 22.894531 9 22 9.894531 22 11 C 22 12.105469 22.894531 13 24 13 C 25.105469 13 26 12.105469 26 11 C 26 9.894531 25.105469 9 24 9 Z M 11 15.71875 L 20.1875 25 L 4 25 L 4 22.71875 Z M 22 17.71875 L 28 23.71875 L 28 25 L 23.03125 25 L 18.875 20.8125 Z'/%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='M 2 5 L 2 27 L 30 27 L 30 5 Z M 4 7 L 28 7 L 28 20.90625 L 22.71875 15.59375 L 22 14.875 L 17.46875 19.40625 L 11.71875 13.59375 L 11 12.875 L 4 19.875 Z M 24 9 C 22.894531 9 22 9.894531 22 11 C 22 12.105469 22.894531 13 24 13 C 25.105469 13 26 12.105469 26 11 C 26 9.894531 25.105469 9 24 9 Z M 11 15.71875 L 20.1875 25 L 4 25 L 4 22.71875 Z M 22 17.71875 L 28 23.71875 L 28 25 L 23.03125 25 L 18.875 20.8125 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#sitepack-cart-page .sitepack-cart-img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    mix-blend-mode: multiply;
}

#sitepack-cart-page .sitepack-cart-brand {
    margin-bottom: 2px;
    color: var(--muted-text-color);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

#sitepack-cart-page .sitepack-cart-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

#sitepack-cart-page .sitepack-cart-title a {
    color: var(--text-color);
}

#sitepack-cart-page .sitepack-cart-title a:hover {
    color: var(--anchor-color);
    text-decoration: underline;
}

#sitepack-cart-page .sitepack-cart-variant,
#sitepack-cart-page .sitepack-cart-item-stock {
    margin-top: 4px;
    font-size: 13.5px;
}

#sitepack-cart-page .sitepack-cart-variant {
    color: var(--muted-text-color);
}

#sitepack-cart-page .sitepack-cart-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    padding: 4px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted-text-color);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: none;
}

#sitepack-cart-page .sitepack-cart-delete:hover {
    background: transparent;
    color: var(--stock-error-color);
}

#sitepack-cart-page .sitepack-cart-delete i {
    display: none;
}

#sitepack-cart-page .sitepack-cart-bundle-images {
    flex: none;
    width: 96px;
    margin: 0;
    padding: 4px;
    border-radius: var(--radius);
    background: var(--image-background-color);
}

#sitepack-cart-page .sitepack-cart-bundle-list {
    padding-left: 1.1rem !important;
    color: var(--muted-text-color);
}

/* Summary card */
#sitepack-cart-page .sitepack-cart-summary {
    position: sticky;
    top: 110px;
    max-width: none;
    margin: 0;
    padding: clamp(22px, 2.6vw, 30px);
    border: 0;
    border-radius: var(--radius);
    background: var(--surface-color);
    color: var(--text-color);
}

#sitepack-cart-page .sitepack-cart-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 8px 0;
    font-size: 15.5px;
    font-variant-numeric: tabular-nums;
}

#sitepack-cart-page .sitepack-cart-summary-row span:first-child {
    color: var(--muted-text-color);
}

#sitepack-cart-page .sitepack-cart-total-row {
    align-items: baseline;
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    font-size: 17px;
}

#sitepack-cart-page .sitepack-cart-total-row strong:last-child {
    font-family: var(--heading-font);
    font-size: 1.6rem;
    letter-spacing: -0.02em;
}

#sitepack-cart-page .sitepack-cart-actions {
    margin-top: 22px;
    text-align: center;
}

#sitepack-cart-page .sitepack-cart-actions .sitepack-cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--button-radius);
    background: var(--brand-color);
    color: var(--brand-text-color);
    font-size: 16px;
    font-weight: 700;
    white-space: normal;
}

#sitepack-cart-page .sitepack-cart-actions .sitepack-cart-checkout-btn:hover {
    background: color-mix(in srgb, var(--brand-color) 86%, var(--shadow-color));
    color: var(--brand-text-color);
}

/* The platform's own empty state (after the last item is removed) matches the theme's. */
#sitepack-cart-page .sitepack-cart-empty {
    max-width: 560px;
    margin: 0 auto;
    padding: clamp(36px, 5vw, 64px) clamp(16px, 3vw, 40px);
    border-radius: var(--radius);
    background: var(--surface-color);
    text-align: center;
}

#sitepack-cart-page .sitepack-cart-empty p {
    margin: 0 0 18px;
    font-size: 17px;
}

#sitepack-cart-page .sitepack-cart-empty .btn {
    min-height: 48px;
    padding: 0 28px;
    border-radius: var(--button-radius);
    line-height: 48px;
}

#sitepack-cart-page .sitepack-stock-notice {
    margin-bottom: 20px;
    padding: 14px 18px;
    border: 0;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--stock-warning-color) 14%, var(--background-color));
    color: var(--text-color);
}

/* Two columns only where the item rows keep room for name, stepper and prices; below that
   the summary card sits under the items, at the right. */
@media (max-width: 1179px) {
    #sitepack-cart-page .sitepack-cart-content {
        grid-template-columns: minmax(0, 1fr);
    }

    #sitepack-cart-page .sitepack-cart-summary {
        position: static;
        width: 100%;
        max-width: 440px;
        justify-self: end;
    }
}

@media (max-width: 640px) {
    #sitepack-cart-page .sitepack-cart-summary {
        max-width: none;
    }
}

@media (max-width: 640px) {
    #sitepack-cart-page .sitepack-cart-header-row {
        display: none;
    }

    /* Phone row: photo and name on top, stepper and line total underneath. */
    #sitepack-cart-page .sitepack-cart-item-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "product product"
            "quantity total";
        gap: 14px 12px;
        text-align: left;
    }

    #sitepack-cart-page .sitepack-cart-item-row .sitepack-cart-col-product {
        grid-area: product;
        width: auto;
        margin: 0;
    }

    #sitepack-cart-page .sitepack-cart-item-row .sitepack-cart-col-quantity {
        grid-area: quantity;
        flex-direction: row;
        justify-content: flex-start;
        width: auto;
        margin: 0;
    }

    #sitepack-cart-page .sitepack-cart-item-row .sitepack-cart-col-price {
        display: none;
    }

    #sitepack-cart-page .sitepack-cart-item-row .sitepack-cart-col-total {
        grid-area: total;
        width: auto;
        margin: 0;
        text-align: right;
    }

    #sitepack-cart-page .sitepack-cart-product-info {
        flex-direction: row;
        gap: 14px;
    }

    #sitepack-cart-page .sitepack-cart-img-container {
        width: 76px;
        height: 76px;
    }
}

/* ---------- Cookie bar: a light panel along the bottom edge ----------
   The platform shows and hides #sitepack-cookiebar with an inline display; the theme never
   sets display on it. Title, text, the four choices as chips and the two buttons. */
html body .sitepack-cookiebar {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 0;
    top: auto;
    z-index: 2000;
    width: min(1100px, 100vw - 32px);
    max-width: none;
    max-height: calc(100vh - 32px);
    margin: 0;
    padding: clamp(22px, 2.6vw, 34px) clamp(20px, 3vw, 36px);
    overflow-y: auto;
    transform: translateX(-50%);
    border: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--card-background-color);
    color: var(--text-color);
    box-shadow: 0 -10px 50px color-mix(in srgb, var(--shadow-color) 18%, transparent);
    animation: ks-cookie-in 0.45s cubic-bezier(.2, .7, .2, 1) both;
    text-align: left;
}

@keyframes ks-cookie-in {
    from { opacity: 0; translate: 0 24px; }
    to { opacity: 1; translate: 0 0; }
}

html body .sitepack-cookiebar .sitepack-cookiebar-title {
    display: block;
    margin: 0 0 10px;
    font-family: var(--heading-font);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-transform: none;
    color: var(--text-color);
}

html body .sitepack-cookiebar .sitepack-cookiebar-title::before {
    display: none;
}

html body .sitepack-cookiebar > p {
    margin: 0;
    max-width: 92ch;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--text-color);
}

html body .sitepack-cookiebar > p a {
    color: inherit;
    text-decoration: underline;
}

html body .sitepack-cookiebar .cookie-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
}

html body .sitepack-cookiebar .cookie-options label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--button-radius);
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

html body .sitepack-cookiebar .cookie-options label.disabled {
    opacity: 0.65;
    cursor: default;
}

html body .sitepack-cookiebar .cookie-options input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--brand-color);
}

/* Reject all, Accept selection and Accept all side by side; refusing takes one
   click and looks the same as accepting a selection. */
html body .sitepack-cookiebar .cookie-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 260px));
    justify-content: end;
    gap: 14px;
    margin: 20px 0 0;
}

html body .sitepack-cookiebar .cookie-actions .btn {
    min-height: 46px;
    margin: 0;
    padding: 0 20px;
    border: 1.5px solid var(--text-color);
    border-radius: calc(var(--radius) * 0.5);
    background: transparent;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    white-space: normal;
}

html body .sitepack-cookiebar .cookie-actions .btn-success {
    border-color: var(--brand-color);
    background: var(--brand-color);
    color: var(--brand-text-color);
}

html body .sitepack-cookiebar .cookie-actions .btn:hover {
    background: var(--text-color);
    border-color: var(--text-color);
    color: var(--card-background-color);
}

html body .sitepack-cookiebar .cookie-actions .btn-success:hover {
    background: color-mix(in srgb, var(--brand-color) 86%, var(--shadow-color));
    border-color: color-mix(in srgb, var(--brand-color) 86%, var(--shadow-color));
    color: var(--brand-text-color);
}

/* ---------- Phones and tablets ---------- */
@media (max-width: 1024px) {
    .open-status {
        display: none;
    }

    .site-header .site-nav .site-nav__list {
        gap: 0 16px;
        font-size: 15px;
    }
}

@media (max-width: 1100px) {
    .ks-cats:not(.ks-cats--n1):not(.ks-cats--n2) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .ks-rail-cats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: auto;
    }

    .ks-rail-cat {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 0 0 14px;
    }

    .ks-rail-cat__media {
        width: 100%;
        max-width: none;
        height: 120px;
    }

    .ks-rail-cat__body {
        padding: 0 14px;
    }

    .ks-rail-cat__go {
        display: none;
    }

    .ks-usps__list,
    .ks-usps__list--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ks-usp + .ks-usp {
        box-shadow: none;
    }

    .ks-grid.product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ks-stories--posts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ks-reviews {
        flex-wrap: wrap;
    }
}

@media (max-width: 900px) {
    .pdp .pdp__main {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "gallery"
            "info"
            "details";
        grid-template-rows: auto;
    }

    .pdp .pdp-gallery,
    .pdp .pdp-accordions {
        padding-right: 0;
    }

    .pdp .pdp-info {
        padding: 28px 0 0;
        border-left: 0;
    }

    .pdp .pdp-accordions {
        margin-top: 36px;
    }

    .ks-workshop,
    .ks-store,
    .ks-newsletter {
        grid-template-columns: minmax(0, 1fr);
    }

    .ks-workshop__media {
        min-height: 280px;
    }

    .ks-store__media {
        min-height: 300px;
    }
}

@media (max-width: 1024px) {
    /* Header: hamburger, logo, cart on one row; the open status as a slim line under it;
       the menu opens as a panel under the bar. */
    .site-header__main {
        gap: 8px;
        min-height: 64px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .site-header .nav-toggle {
        display: flex;
        width: 44px;
        height: 44px;
        margin-left: -8px;
        flex: none;
    }

    .brand img {
        height: 40px;
        max-width: 150px;
    }

    .brand .site-name {
        font-size: 1.35rem;
        gap: 8px;
    }

    .site-name__mark {
        width: 22px;
        height: 22px;
    }

    .header-actions {
        gap: 0;
    }

    .header-icon,
    .header-search-icon .sitepack-live-search-trigger {
        width: 44px;
        height: 44px;
    }

    .header-account {
        display: none;
    }

    .header-cart,
    .header-cart:hover {
        min-width: 0;
        height: 44px;
        margin-left: 4px;
    }

    .header-cart .sitepack-shopping-cart-container .sitepack-shopping-cart-trigger {
        height: 44px;
        padding: 0 10px 0 40px;
    }

    .header-cart .sitepack-shopping-cart-container .sitepack-shopping-cart-trigger::before {
        left: 11px;
    }

    .open-status-line {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 16px;
        border-top: 1px solid var(--border-color);
        background: color-mix(in srgb, var(--header-text-color) 5%, var(--header-background-color));
        color: var(--header-text-color);
        font-size: 13px;
        font-weight: 500;
    }

    .open-status-line.is-open .open-status__text {
        color: inherit;
    }

    .site-header .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        max-height: calc(100svh - 120px);
        overflow-y: auto;
        padding: 4px 16px 20px;
        border-top: 1px solid var(--border-color);
        background: var(--card-background-color);
        color: var(--text-color);
        box-shadow: 0 20px 40px color-mix(in srgb, var(--shadow-color) 18%, transparent);
    }

    .site-header:has(.site-nav__list.menu-open) .site-nav {
        display: flex;
    }

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

    .site-nav .site-nav__list > li {
        border-bottom: 1px solid var(--border-color);
    }

    .site-nav .site-nav__list > li > a,
    .site-nav .site-nav__list.menu-open > li > a,
    .site-nav__list .nav-link a.btn {
        display: flex;
        justify-content: space-between;
        padding: 15px 0;
        color: var(--text-color);
        font-size: 18px;
    }

    .site-nav .site-nav__list > li > a:hover,
    .site-nav .site-nav__list > li.active > a {
        color: var(--brand-color);
    }

    .site-nav .site-nav__list > li > a::after {
        display: none;
    }

    .site-nav .site-nav__list > li > a .caret {
        transform: translateY(2px) rotate(45deg);
    }

    .site-nav__list .dropdown-menu li a {
        color: var(--text-color);
        text-transform: none;
        font-family: var(--body-font);
    }

    .header-phone {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 18px 0 0;
        padding: 12px 18px;
        border-radius: var(--button-radius);
        background: var(--brand-color);
        color: var(--brand-text-color);
        font-family: var(--heading-font);
        font-weight: 600;
        letter-spacing: 0.03em;
        text-decoration: none;
    }

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

}

@media (max-width: 768px) {
    .topbar .topbar-standard {
        justify-content: center;
    }

    .topbar .topbar-standard__usps .topbar-usp:not(:first-child),
    .topbar .topbar-standard__contact {
        display: none;
    }

    /* Home */
    .ks-section {
        padding-top: min(var(--section-spacing), 64px);
    }

    main > .ks-home {
        padding-bottom: min(var(--section-spacing), 64px);
    }

    .ks-hero {
        gap: 10px;
        padding-top: 12px;
    }

    .ks-hero__main {
        min-height: min(var(--hero-height), 520px);
    }

    .ks-hero__main::before {
        background: linear-gradient(180deg, color-mix(in srgb, var(--hero-overlay-color) 22%, transparent), color-mix(in srgb, var(--hero-overlay-color) 78%, transparent) 58%);
    }

    .ks-hero--product .ks-hero__media img {
        padding: 6% 6% 48%;
    }

    .ks-hero__title {
        font-size: clamp(2.6rem, 13vw, 3.6rem);
    }

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

    .ks-btn {
        white-space: normal;
    }

    .ks-rail-cats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .ks-rail-cat__media {
        height: 104px;
    }

    .ks-rail-cat__name {
        font-size: 1.3rem;
    }

    .ks-rail-cat__body small {
        font-size: 13px;
    }

    .ks-usps {
        margin-top: 10px;
    }

    .ks-usp {
        padding: 14px;
        gap: 10px;
    }

    .ks-usp__icon svg {
        width: 24px;
        height: 24px;
    }

    .ks-usp__body strong {
        font-size: 14px;
    }

    .ks-usp__body span {
        display: none;
    }

    .ks-head {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .ks-head__side {
        flex-wrap: wrap;
        gap: 14px 20px;
    }

    .ks-deals__band {
        margin: 0 calc(-1 * clamp(16px, 3vw, 40px));
        padding: 28px clamp(16px, 3vw, 40px);
        border-radius: 0;
    }

    .ks-grid.product-grid,
    .ks-grid--3.product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 12px;
    }

    .product-price--tag .new-price,
    .product-price--tag .new-price.is-promo {
        font-size: 18px;
    }

    .product-information .product-price--tag {
        padding: 5px 10px 4px 20px;
    }

    .ks-cats:not(.ks-cats--n1):not(.ks-cats--n2),
    .ks-cats.ks-cats--n2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

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

    .ks-workshop__actions .ks-btn {
        flex: 1 1 100%;
    }

    .ks-reviews {
        flex-direction: column;
        align-items: flex-start;
    }

    .ks-reviews > .ks-btn {
        margin-left: 0;
    }

    .ks-stories,
    .blog-posts.ks-stories,
    .ks-stories--posts {
        grid-template-columns: minmax(0, 1fr);
    }

    .ks-event {
        gap: 14px;
    }

    .ks-event__date {
        width: 60px;
        height: 60px;
    }

    .ks-newsletter .sitepack-newsletter-form .sitepack-newsletter-form__row {
        flex-direction: column;
        align-items: stretch;
    }

    .ks-newsletter .sitepack-newsletter-form .sitepack-newsletter-form__button {
        width: 100%;
    }

    /* Product page */
    main > .pdp {
        padding-top: 16px;
    }

    .pdp__breadcrumb {
        margin-bottom: 16px;
    }

    .pdp .pdp-gallery__stage {
        aspect-ratio: 1 / 1;
    }

    .pdp-gallery__arrow {
        width: 38px;
        height: 38px;
        margin-top: -19px;
    }

    .pdp-gallery__arrow--prev { left: 12px; }
    .pdp-gallery__arrow--next { right: 12px; }

    .pdp-gallery__count {
        right: 12px;
        bottom: 12px;
    }

    .pdp .pdp-gallery__thumb {
        width: 68px;
        height: 62px;
    }

    .pdp .pdp-accordion__head {
        padding: 22px 0;
    }

    /* Cookie bar: a bottom sheet with stacked buttons. */
    html body .sitepack-cookiebar {
        width: 100vw;
        padding: 22px 16px calc(18px + env(safe-area-inset-bottom));
        max-height: 82svh;
    }

    /* Accept all on top, Reject all at the bottom, like the platform's own
       column-reverse on small screens. */
    html body .sitepack-cookiebar .cookie-actions {
        grid-template-columns: 1fr;
    }

    html body .sitepack-cookiebar .cookie-actions .btn-success {
        order: -1;
    }

    html body .sitepack-cookiebar .cookie-actions .btn:first-child {
        order: 1;
    }

    #copyright p {
        padding: 0;
    }
}

@media (max-width: 420px) {
    .ks-rail-cat__name,
    .ks-cat__name {
        font-size: 1.15rem;
    }
}

/* =========================================================================
   MOTION
   Subtle, quick and never in the way: only transform and opacity (no layout shift),
   200–600ms, content is never hidden when a technique is unsupported, and everything
   switches off under prefers-reduced-motion. Modern techniques are progressive:
   scroll-driven reveals (animation-timeline: view()), cross-page view transitions and
   smooth <details> are skipped by browsers that lack them.
   ========================================================================= */
/* ---------- Page to page: a soft crossfade, the header stays put, and a clicked
   product photo morphs into the product page's main photo (theme.js names it). ---------- */
@view-transition {
    navigation: auto;
}

.site-header {
    view-transition-name: ks-site-header;
}

.pdp-gallery__stage img {
    view-transition-name: bt-product-image;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.22s;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}

::view-transition-group(bt-product-image) {
    animation-duration: 0.38s;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Reveal on scroll ----------
   Cards and section heads rise 18px and fade in as they enter the viewport. Driven by the
   scroll position itself, so nothing waits on JavaScript and anything already in view at
   load is simply shown. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .ks-head,
        .ks-cat,
        .product-card,
        .ks-story,
        .ks-event,
        .ks-review,
        .ks-duo__tile,
        .ks-panel,
        .ks-store,
        .ks-newsletter,
        .category-card,
        .element-feature-card,
        .element-stat,
        .pdp-related__title,
        main > .container-element-heading,
        main > .container-element-text {
            animation: bt-reveal linear both;
            animation-timeline: view();
            /* Done after 160px of scroll, whatever the element's height: a tall block
               (campaign, store) never sits half-transparent while you read it. */
            animation-range: entry 0% entry 160px;
        }
    }
}

@keyframes bt-reveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Header: lifts off the page once you scroll (shadow only, no resize). ---------- */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .site-header {
            animation: bt-header-lift linear both;
            animation-timeline: scroll(root);
            animation-range: 0 120px;
        }
    }
}

@keyframes bt-header-lift {
    from { box-shadow: 0 1px 0 color-mix(in srgb, var(--shadow-color) 10%, transparent); }
    to { box-shadow: 0 10px 30px color-mix(in srgb, var(--shadow-color) 18%, transparent); }
}

/* ---------- Buttons: a small press, the arrow already nudges on hover. ---------- */
.btn,
.bt-btn,
.header-icon,
.sp-variant-value,
.filter-chip,
.filter-option {
    -webkit-tap-highlight-color: transparent;
}

/* Not the cart pill while its drawer is open: a transform makes the pill the containing block
   of the fixed drawer, which then collapses into the pill on mousedown and swallows the click
   on "Afrekenen", the close button and the quantity buttons. */
.btn:active,
.bt-btn:active,
.header-icon:active:not(:has(.sitepack-cart-sidebar.open)),
.filter-chip:active {
    transform: scale(0.97);
    transition-duration: 0.08s;
}

/* Primary buttons: a light sweep crosses the button on hover. */
.btn-primary,
.bt-btn--brand {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn-primary::after,
.bt-btn--brand::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--brand-text-color) 22%, transparent) 50%, transparent 70%);
    transform: translateX(-110%);
    transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}

.btn-primary:hover::after,
.bt-btn--brand:hover::after {
    transform: translateX(110%);
}

/* Add to cart: the button keeps the brand colour while the request runs and swaps its cart
   glyph for a spinning ring, then turns green with a check once the product is in the cart. */
.pdp-buy__icon {
    position: relative;
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
}

.pdp-buy .btn-primary.pdp-buy__submit.is-loading {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
    cursor: progress;
}

/* Not orderable (out of stock, or a variant combination that is not available): a muted
   button that says so, never the loading ring. */
.pdp .pdp-buy .btn-primary.pdp-buy__submit.disabled:not(.is-loading),
.pdp .pdp-buy .btn-primary.pdp-buy__submit:disabled:not(.is-loading) {
    background: var(--disabled-color);
    border-color: var(--disabled-color);
    color: var(--muted-text-color);
    cursor: not-allowed;
    opacity: 1;
}

.pdp-buy__submit.is-loading .pdp-buy__icon svg,
.pdp-buy__submit.is-added .pdp-buy__icon svg {
    opacity: 0;
}

.pdp-buy__submit.is-loading .pdp-buy__icon::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 2.5px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: bt-spin 0.7s linear infinite;
}

.pdp-buy .btn-primary.pdp-buy__submit.is-added {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: var(--success-text-color);
}

.pdp-buy__submit.is-added .pdp-buy__icon::before {
    content: "";
    position: absolute;
    inset: 1px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M 28.28125 6.28125 L 11 23.5625 L 3.71875 16.28125 L 2.28125 17.71875 L 10.28125 25.71875 L 11 26.40625 L 11.71875 25.71875 L 29.71875 7.71875 Z'/%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='M 28.28125 6.28125 L 11 23.5625 L 3.71875 16.28125 L 2.28125 17.71875 L 10.28125 25.71875 L 11 26.40625 L 11.71875 25.71875 L 29.71875 7.71875 Z'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: bt-pop 0.45s cubic-bezier(.34, 1.4, .64, 1) both;
}

@keyframes bt-spin {
    to { transform: rotate(360deg); }
}

@keyframes bt-pop {
    0% { transform: scale(0.4); }
    100% { transform: scale(1); }
}

/* Cart count bumps when it changes (theme.js toggles the class). */
.header-cart .sitepack-cart-count.is-bumped {
    animation: bt-bump 0.5s cubic-bezier(.34, 1.4, .64, 1);
}

@keyframes bt-bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.45); }
    100% { transform: scale(1); }
}

/* ---------- Cards ---------- */
/* The lift uses `translate`, not `transform`: the scroll reveal holds `transform` on these
   cards, and the two separate properties combine. */
.product-card {
    transition: translate 0.3s cubic-bezier(.2, .8, .2, 1), border-color 0.2s, box-shadow 0.3s cubic-bezier(.2, .8, .2, 1);
}

.product-card:hover {
    translate: none;
}

.product-card .product-image img {
    transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
}

.product-card .product-title h3 {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
    transition: background-size 0.35s cubic-bezier(.2, .8, .2, 1);
}

.product-card:hover .product-title h3 {
    background-size: 100% 1.5px;
}

.category-card {
    transition: translate 0.3s cubic-bezier(.2, .8, .2, 1);
}

.category-card:hover {
    translate: 0 -4px;
}

/* ---------- Menu dropdown: fades and drops 6px into place. ---------- */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
    .dropdown:hover .dropdown-menu {
        animation: bt-drop 0.18s cubic-bezier(.2, .8, .2, 1) both;
    }
}

@keyframes bt-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* Phone menu panel slides down. */
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .site-header:has(.site-nav__list.menu-open) .site-nav {
        animation: bt-drop 0.22s cubic-bezier(.2, .8, .2, 1) both;
    }
}

/* ---------- Choices: chips and filter checks answer the click. ---------- */
.sp-variant-value,
.filter-chip {
    transition: border-color 0.15s, color 0.15s, background-color 0.15s, transform 0.15s cubic-bezier(.2, .8, .2, 1);
}

.pdp-info .sp-variant-options .sp-variant-option .sp-variant-value.is-active:not(.sp-variant-value--swatch) {
    animation: bt-pop-soft 0.3s cubic-bezier(.34, 1.4, .64, 1);
}

.filter-option.is-active .filter-option__check svg {
    animation: bt-pop 0.3s cubic-bezier(.34, 1.4, .64, 1) both;
}

@keyframes bt-pop-soft {
    0% { transform: scale(0.96); }
    100% { transform: scale(1); }
}

/* ---------- Accordions open smoothly where the browser can animate to auto height. ---------- */
@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

    @media (prefers-reduced-motion: no-preference) {
        .pdp-accordion::details-content,
        details.element-accordion-item::details-content {
            height: 0;
            overflow: clip;
            transition: height 0.3s cubic-bezier(.2, .8, .2, 1), content-visibility 0.3s allow-discrete;
        }

        .pdp-accordion[open]::details-content,
        details.element-accordion-item[open]::details-content {
            height: auto;
        }
    }
}

.accordion-icon {
    transition: transform 0.25s cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Reduced motion: everything off, the page still works the same. ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .product-card:hover,
    .category-card:hover {
        translate: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

/* Dropdown children keep the text colour even when their parent item is active (the shared
   `.nav-link.active a` rule would paint every child in the brand colour); only the active
   child itself, and the hovered one, turn brand-coloured, with a short bar on the left. */
.site-nav .site-nav__list .dropdown-menu li a {
    position: relative;
    color: var(--text-color);
    transition: background-color 0.15s, color 0.15s, padding-left 0.2s cubic-bezier(.2, .8, .2, 1);
}

.site-nav .site-nav__list .dropdown-menu li a::before {
    content: "";
    position: absolute;
    left: 0.45rem;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 2px;
    background: var(--brand-color);
    transform: translateY(-50%);
    transition: height 0.2s cubic-bezier(.2, .8, .2, 1);
}

.site-nav .site-nav__list .dropdown-menu li a:hover,
.site-nav .site-nav__list .dropdown-menu li a:focus-visible,
.site-nav .site-nav__list .dropdown-menu li.active > a {
    background: var(--surface-color);
    color: var(--brand-color);
    padding-left: 1.2rem;
}

.site-nav .site-nav__list .dropdown-menu li a:hover::before,
.site-nav .site-nav__list .dropdown-menu li a:focus-visible::before,
.site-nav .site-nav__list .dropdown-menu li.active > a::before {
    height: 16px;
}

@media (max-width: 1024px) {
    .site-nav .site-nav__list .dropdown-menu li a,
    .site-nav .site-nav__list .dropdown-menu li a:hover {
        padding-left: 0;
        background: transparent;
    }

    .site-nav .site-nav__list .dropdown-menu li a::before {
        display: none;
    }
}