/* =========================================================================
   Stack — an adaptive SitePack webshop theme
   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(--link-color);
    text-decoration: none;
}

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

/* Shared content wrapper: same width and gutter as the header and grids. */
.container-element {
    max-width: var(--container-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(--container-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(--main-color);
    color: var(--main-color-text);
    border: 1px solid var(--main-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(--main-color-text);
}

.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(--main-color);
    border-color: var(--main-color);
    color: var(--main-color-text);
}

.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(--main-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(--main-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(--main-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(--main-color);
    color: var(--main-color-text);
    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(--main-color) 88%, var(--shadow-color));
    color: var(--main-color-text);
}

/* 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(--main-color-text) 22%, transparent);
    color: var(--main-color-text);
    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(--main-color-text);
}

.header-cart svg {
    color: var(--main-color-text);
    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(--container-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(--main-color);
    border-bottom-color: var(--main-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(--main-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(--border-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(--main-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(--container-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(--border-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(--main-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(--border-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(--border-radius);
    overflow: hidden;
    background: var(--image-background-color);
}

.hero__stat {
    border-radius: var(--border-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(--border-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(--border-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(--border-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(--main-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(--border-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(--main-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(--main-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(--border-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(--border-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(--main-color);
    color: var(--main-color-text);
    border: 1px solid var(--main-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(--main-color-text);
}

/* =========================
   Product grid & cards
   ========================= */
.product-grid, .products-wrapper, .category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: var(--container-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(--border-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(--main-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(--container-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(--border-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(--container-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(--border-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(--main-color);
    color: var(--main-color-text);
    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(--border-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(--border-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(--border-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(--main-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(--border-radius) + 6px);
    padding: 44px 48px;
}

.pdp-stall__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--main-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(--border-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(--border-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(--main-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--main-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(--border-radius);
}

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

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

.checkout-button {
    background: var(--main-color);
    color: var(--main-color-text);
    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(--main-color-text);
}

/* =========================
   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
   ========================= */
#breadcrumbs {
    max-width: var(--container-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(--link-color);
    text-decoration: none;
}

.breadcrumb li a:hover {
    color: var(--link-active-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(--container-width);
    margin-left: auto;
    margin-right: auto;
}

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

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

/* =========================
   Sitemap
   ========================= */
.sitemap section {
    max-width: var(--container-width);
    margin: 0 auto 2rem;
    padding: 0 40px;
}

.sitemap h1 {
    max-width: var(--container-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(--link-color);
}

.sitemap a:hover {
    color: var(--link-active-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(--border-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(--main-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(--border-radius);
    color: inherit;
    text-decoration: none;
}

.category-filter-link:hover,
.category-filter-link:focus {
    background: var(--surface-color);
    color: var(--main-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(--border-radius);
    transition: background-color 0.2s, border-color 0.2s;
}

#translationsModal .modal-body-translations a:hover {
    background-color: var(--surface-color);
    border-color: var(--main-color);
    color: var(--main-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(--border-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(--border-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(--main-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(--border-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(--main-color);
    color: var(--main-color-text);
    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(--border-radius);
    background-color: var(--card-background-color);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

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

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

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

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

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

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

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

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

    .hero__title { font-size: 2.75rem; }

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

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

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

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

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

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

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

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

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

@media (max-width: 768px) {
    .container-element,
    .element-hero-inner,
    .site-nav,
    .home-section,
    .product-grid, .products-wrapper, .category-grid,
    .category-main-layout,
    .category-quick-filters,
    #breadcrumbs,
    #copyright {
        padding-left: 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;
    }

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

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

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

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

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

    .nav-toggle {
        display: flex;
    }

    .site-nav {
        display: none;
    }

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

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

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

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

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

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

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

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

    .hero__title { font-size: 2.25rem; }

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

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

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

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

}

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

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

/* Breadcrumb */
.category-breadcrumb {
    display: flex;
    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(--main-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(--border-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(--border-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(--main-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(--main-color);
}

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

.filter-option.is-active .filter-option__label {
    color: var(--main-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(--main-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(--main-color);
    border: 2px solid var(--card-background-color);
    box-shadow: 0 0 0 1px var(--main-color);
    cursor: pointer;
}

.price-filter__input::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--main-color);
    border: 2px solid var(--card-background-color);
    box-shadow: 0 0 0 1px var(--main-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(--main-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(--border-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(--main-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;
    }
}