/* =============================================================
   Storefront baseline theme — clean, neutral, responsive.
   ============================================================= */

:root {
    --sf-text: #1f2937;
    --sf-muted: #6b7280;
    --sf-border: #e5e7eb;
    --sf-surface: #f9fafb;
    --sf-accent: #2563eb;
    --sf-accent-hover: #1d4ed8;
    --sf-success: #16a34a;
    --sf-danger: #dc2626;
    --sf-radius: 8px;
    --sf-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
    --sf-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Safety net for full-bleed page-builder blocks: their viewport-relative breakout
   can leave a sub-pixel sliver wider than the content area, which some browsers
   surface as a horizontal scrollbar. The page never scrolls horizontally by design.
   NOTE: use `clip`, not `hidden` — `overflow-x: hidden` turns body into a scroll
   container and silently breaks `position: sticky` on the header. `clip` suppresses
   the horizontal sliver without creating a scroll container. */
html, body { overflow-x: clip; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--sf-text);
    line-height: 1.55;
    background: white;
}

a { color: var(--sf-accent); text-decoration: none; }
a:hover { color: var(--sf-accent-hover); text-decoration: underline; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* -------------- Header -------------- */

.site-header {
    background: white;
    border-bottom: 1px solid var(--sf-border);
    position: relative;
    z-index: 50;
}
/* When the header is built from page-builder blocks it carries its own Divider
   block as the separating rule, so suppress the fixed CSS border to avoid a
   doubled line. The fallback (non-builder) header keeps the border above. */
.site-header:has(.site-header-builder) { border-bottom: 0; }

.site-header-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.25rem;
}

/* When the full-bleed menu strip is the last header element it forms the header's
   own bottom edge (border + band), so the wrapper's trailing bottom padding below it
   is just dead space between header and page. Drop it so the strip sits flush. */
.site-header-inner.site-header-builder:has(> .pb-menu:last-child) { padding-bottom: 0; }

/* Block-built header (Appearance → Header). The default layout is a 3-column
   row (logo | search | account+cart) followed by a horizontal menu block. */
.site-header-builder { flex-wrap: wrap; }

/* The columns block fills the header row and centres its columns vertically. */
.site-header-builder .pb-columns {
    flex: 1 1 100%;
    align-items: center;
    margin: 0;
}

/* Each header block sits in an alignment wrapper. Use flex so block-level
   children (logo link, search form, cart link) honour the chosen alignment —
   text-align alone wouldn't move them. */
.pb-header-item { display: flex; align-items: center; gap: 0.75rem; }
.pb-header-item.pb-align-left   { justify-content: flex-start; }
.pb-header-item.pb-align-center { justify-content: center; }
.pb-header-item.pb-align-right  { justify-content: flex-end; }

/* justify-content only aligns content WITHIN the item's own box; to move the item
   itself toward an edge of the header flex row we need auto margins. "right" hugs the
   right edge (the first right-aligned item absorbs the slack, grouping any that follow
   it); "center" centres the item; "left" is the natural flow. Scoped to the block-built
   header so it can't affect other flex contexts that reuse .pb-align-*. */
.site-header-builder > .pb-header-item.pb-align-right  { margin-left: auto; }
.site-header-builder > .pb-header-item.pb-align-center { margin-left: auto; margin-right: auto; }

/* Search should expand within its alignment wrapper / column. */
.site-header-builder .pb-search { flex: 1 1 auto; max-width: 480px; }
.pb-cart-label { margin: 0 0.35rem; }

/* The header menu block renders as a full-bleed light-grey strip under the top
   row — matching the legacy menubar look: a full-width band with hairline top/
   bottom borders, spanning edge to edge while the links stay aligned to the
   container. Uses the same 100vw breakout as the divider block.

   Colours are driven by --sf-menubar-* variables so a dark theme (e.g. Midnight)
   can restyle the strip without the links washing out. Fallbacks reproduce the
   default light theme exactly. */
.site-header-builder .pb-menu {
    flex: 1 1 100%;
    background: var(--sf-menubar-bg, var(--sf-bg-soft, #f4f6f8));
    border-top: 1px solid var(--sf-menubar-border, var(--sf-border, #e3e7ec));
    border-bottom: 1px solid var(--sf-menubar-border, var(--sf-border, #e3e7ec));
    color: var(--sf-menubar-text, var(--sf-text, #1f2937));
    width: 100vw;
    margin: 0.6rem calc(50% - 50vw) 0;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

/* Links explicitly follow the strip's text colour (not the header's), so they
   stay legible whatever the strip background is. */
.site-header-builder .pb-menu .pb-menu-link {
    color: var(--sf-menubar-text, var(--sf-text, #1f2937));
}
.site-header-builder .pb-menu .pb-menu-link:hover {
    color: var(--sf-menubar-link-hover, var(--sf-accent, #2563eb));
}

/* Re-align the menu links to the page container inside the full-width strip.
   Uses --sf-container (the Appearance → Content width setting) so the menu tracks
   the same width as the page content — including "full"/percent modes — instead
   of being hardcoded to 1200px and drifting narrower than full-width content.
   Padding follows --sf-container-pad (set in full-width mode) and falls back to
   1.25rem to match .container in the other modes. */
.site-header-builder .pb-menu .pb-menu-list {
    max-width: var(--sf-container, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sf-container-pad, 1.25rem);
    padding-right: var(--sf-container-pad, 1.25rem);
}

.site-brand {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--sf-text);
    flex-shrink: 0;
}

.site-brand:hover { text-decoration: none; }

.site-logo { display: block; width: auto; max-width: 320px; }

.site-header-sticky {
    position: sticky;
    top: 0;
    z-index: 50;
}

.brand-name {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sf-text);
}

.brand-tagline {
    font-size: 0.78rem;
    color: var(--sf-muted);
    margin-top: -0.15rem;
}

.site-search {
    flex: 1;
    max-width: 520px;
    display: flex;
    gap: 0.5rem;
    position: relative;
}

.site-search input[type=search] {
    flex: 1;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    font-size: 0.95rem;
    background: var(--sf-surface);
}

.site-search input[type=search]:focus {
    outline: none;
    border-color: var(--sf-accent);
    background: white;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.site-search button {
    padding: 0;
    width: 2.4rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sf-text);
    color: white;
    border: none;
    border-radius: var(--sf-radius);
    cursor: pointer;
    font-size: 0.9rem;
}
.site-search button svg { display: block; }

.site-search button:hover { background: var(--sf-accent-hover); }

.site-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    margin-left: auto;   /* keep Sign in / Register / Cart hard against the right edge */
}

.nav-link {
    color: var(--sf-text);
    font-size: 0.95rem;
    font-weight: 500;
}

.nav-cart {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    background: var(--sf-surface);
    border-radius: 999px;
    border: 1px solid var(--sf-border);
}

.cart-count {
    background: var(--sf-accent);
    color: white;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    min-width: 1.4em;
    text-align: center;
}

.cart-count:empty,
.cart-count[data-cart-count="0"] { display: none; }

/* -------------- Main / footer -------------- */

.site-main {
    min-height: 60vh;
    padding: 1.25rem 1.25rem 3rem;
}
/* A block page sits flush under the header by default — no automatic gap above
   the first block, whatever type it is. Spacing above/below any block is now set
   per block (Space above / Space below in the block's settings), and a Spacer
   block still works too. We only keep a small top gap when the page shows a
   title/breadcrumb header, so the heading isn't jammed under the nav.
   Non-block (WYSIWYG) pages keep the default padding via the base rule above. */
.site-main:has(> .cms-page > .cms-page-body) {
    padding-top: 0;
}
/* Keep breathing room when a title/breadcrumb header is present (block or not). */
.site-main:has(> .cms-page > .cms-page-header) {
    padding-top: 1.25rem;
}
/* Some blocks carry their own top margin (e.g. product/category grids). When such
   a block is the very first on the page, drop that margin too so it sits flush.
   Also handles a first block wrapped in the per-block spacing container. */
.cms-page-body > .pb-hero:first-child,
.cms-page-body > .pb-collection:first-child,
.cms-page-body > .pb-product-grid:first-child,
.cms-page-body > .pb-category-grid:first-child,
.cms-page-body > .pb-block-spacing:first-child > .pb-hero,
.cms-page-body > .pb-block-spacing:first-child > .pb-collection,
.cms-page-body > .pb-block-spacing:first-child > .pb-product-grid,
.cms-page-body > .pb-block-spacing:first-child > .pb-category-grid {
    margin-top: 0;
}
/* A Slider/Gallery block's real top gap lives on its inner .media-collection
   element (margin: 2rem 0), not on the .pb-collection wrapper. When the slider is
   the first block on the page, zero that inner top margin so it sits flush under
   the header. Covers both the plain and per-block-spacing-wrapped cases. */
.cms-page-body > .pb-collection:first-child > .media-collection,
.cms-page-body > .pb-block-spacing:first-child > .pb-collection > .media-collection {
    margin-top: 0;
}
/* Per-block spacing wrapper (Space above / Space below). A transparent, full-width
   pass-through so the wrapped block lays out exactly as it would unwrapped; only
   the operator-set padding-top/padding-bottom (inline) add space. */
.pb-block-spacing {
    display: block;
    width: 100%;
}
/* When a Slider/Gallery is wrapped for per-block spacing, its inner
   .media-collection's own 2rem top/bottom margin would stack on top of the
   operator-set padding, making the actual gap larger than the number entered.
   Zero that inner margin inside the wrapper so "Space above/below" is exact. */
.pb-block-spacing > .pb-collection > .media-collection {
    margin-top: 0;
    margin-bottom: 0;
}

.site-footer {
    background: var(--sf-surface);
    border-top: 1px solid var(--sf-border);
    padding: 0.85rem 0 1.5rem;
    text-align: center;
    color: var(--sf-muted);
    font-size: 0.85rem;
    margin-top: 2rem;
}

.site-footer p { margin: 0.2rem 0; }
.footer-meta { font-size: 0.78rem; opacity: 0.8; }

/* Separator rule shown above the "Powered by" line. Rendered in markup only when
   the Powered-by line is enabled, so disabling it removes the line too. */
.footer-powered-rule {
    border: 0;
    border-top: 1px solid var(--sf-border);
    margin: 1.25rem 0 0.75rem;
}

/* Rich author-defined footer body (Appearance → Footer content). Left-aligned and
   wider than the centered copyright line, with sensible defaults for the tables,
   images and links operators typically paste in (columns, payment badges, social). */
.footer-content {
    text-align: left;
    color: var(--sf-text);
    font-size: 0.9rem;
    line-height: 1.6;
}
/* Legacy rich-HTML footer keeps a separating rule above the copyright line. */
.footer-content:not(.footer-builder) {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--sf-border);
}
.footer-content a { color: var(--sf-accent); }
.footer-content a:hover { text-decoration: underline; }
.footer-content img { max-width: 100%; height: auto; vertical-align: middle; }
.footer-content table { width: 100%; border-collapse: collapse; }
.footer-content table td { vertical-align: top; padding: 0.35rem 1rem 0.35rem 0; }
.footer-content h1, .footer-content h2, .footer-content h3, .footer-content h4 {
    color: var(--sf-text);
    margin: 0 0 0.5rem;
}
/* On narrow screens, let multi-column footer tables stack instead of squashing. */
@media (max-width: 720px) {
    .footer-content table, .footer-content tbody,
    .footer-content tr, .footer-content td { display: block; width: 100%; }
    .footer-content table td { padding: 0.5rem 0; }
}

/* -------------- Flash messages -------------- */

.flash {
    padding: 0.85rem 1rem;
    border-radius: var(--sf-radius);
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

/* Flash/feedback boxes tint to the ACTIVE THEME's success/danger colours instead of
   fixed green/red, so they don't clash on themes like Bloom (pink) or Midnight (dark).
   The first declaration is a static fallback; the color-mix lines refine it where supported
   (all current browsers). Background = a soft wash of the theme colour over the surface so it
   stays light on light themes and dark on dark themes; text = the theme colour itself (which
   each theme already picks to be legible against its own surface), nudged for a touch more
   contrast. This reads correctly on both light and dark themes. */
.flash-success {
    background: #f0fdf4; border-color: #bbf7d0; color: #166534;
    background: color-mix(in srgb, var(--sf-success, #16a34a) 14%, var(--sf-surface, #fff));
    border-color: color-mix(in srgb, var(--sf-success, #16a34a) 38%, var(--sf-surface, #fff));
    color: color-mix(in srgb, var(--sf-success, #16a34a) 85%, var(--sf-text, #1f2937));
}
.flash-error {
    background: #fef2f2; border-color: #fecaca; color: #991b1b;
    background: color-mix(in srgb, var(--sf-danger, #dc2626) 14%, var(--sf-surface, #fff));
    border-color: color-mix(in srgb, var(--sf-danger, #dc2626) 38%, var(--sf-surface, #fff));
    color: color-mix(in srgb, var(--sf-danger, #dc2626) 85%, var(--sf-text, #1f2937));
}
.flash-info {
    background: #eff6ff; border-color: #bfdbfe; color: #1e40af;
    background: color-mix(in srgb, var(--sf-accent, #2563eb) 12%, var(--sf-surface, #fff));
    border-color: color-mix(in srgb, var(--sf-accent, #2563eb) 34%, var(--sf-surface, #fff));
    color: color-mix(in srgb, var(--sf-accent, #2563eb) 85%, var(--sf-text, #1f2937));
}

/* -------------- Home page -------------- */

.hero {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white;
    padding: 3.5rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 2.5rem;
    text-align: center;
}

.hero h1 {
    margin: 0 0 0.5rem;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hero p {
    margin: 0;
    font-size: 1.05rem;
    opacity: 0.85;
}

.hero .hero-btn {
    display: inline-block;
    margin-top: 1.25rem;
}

/* ---- Hero banner: width / height / background options (page builder) ---- */

/* Full-bleed: stretch edge-to-edge across the viewport. Mirrors the
   Slider/Gallery full-width treatment; keeps the vertical rhythm and removes the
   rounded corners since it now meets the screen edges. */
.pb-hero--full {
    width: auto;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
}

/* When a fixed height (min-height) is set, centre the content vertically so the
   banner looks intentional rather than top-aligned with empty space below. */
.pb-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* With a custom background colour/image the default dark gradient is replaced;
   add a soft text shadow so light heading text stays legible over a photo.
   (Operators choosing a light background can override via Appearance → Custom CSS.) */
.pb-hero--custom-bg h1,
.pb-hero--custom-bg p {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Per-block hero button colours. Base background/text are set inline; the hover
   variants come through these custom properties (set inline on the element).
   When a hover variable isn't provided it falls back to the inline base value,
   so a button with only a base colour keeps that colour on hover. */
.pb-hero-btn--custom:hover,
.pb-hero-btn--custom:focus-visible {
    background-color: var(--hbtn-bg-hover, var(--hbtn-bg));
    color: var(--hbtn-fg-hover, var(--hbtn-fg));
}

.section-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 2rem 0 1rem;
    color: var(--sf-text);
}

.section-title .section-link {
    font-size: 0.85rem;
    font-weight: 400;
    margin-left: 1rem;
}

.category-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.category-tile {
    background: white;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 1.25rem 1.25rem;
    text-decoration: none;
    color: var(--sf-text);
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}

.category-tile:hover {
    text-decoration: none;
    border-color: var(--sf-accent);
    box-shadow: var(--sf-shadow-hover);
    transform: translateY(-1px);
}

.category-tile h3 {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.category-tile p {
    margin: 0;
    color: var(--sf-muted);
    font-size: 0.85rem;
}

.category-tile .count {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: var(--sf-muted);
}

/* -------------- Product grid (home, category, search) -------------- */
/* RESPONSIVE-GRID-V3 — if this marker is missing from the served CSS, the app is
   running a stale storefront.css (check localhost:7070/css/storefront.css). */

.product-grid {
    display: grid;
    /* min(240px, 100%) lets a single column shrink to the full width of a narrow
       viewport, so cards wrap to one-per-row on small screens instead of forcing
       a horizontal scrollbar. On wider screens it still packs multiple columns. */
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.25rem;
}

/* Category grid with an admin-chosen fixed "per row" count (2–6). --pb-cat-cols
   is set inline per block. Responsive overrides below collapse this on smaller
   screens so tiles never get crushed. */
.product-grid.pb-cat-cols {
    grid-template-columns: repeat(var(--pb-cat-cols, 3), minmax(0, 1fr));
}
@media (max-width: 900px) {
    /* Cap at 3 across on mid-width screens regardless of the chosen count. */
    .product-grid.pb-cat-cols { grid-template-columns: repeat(min(var(--pb-cat-cols, 3), 3), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    /* Two across on phones. */
    .product-grid.pb-cat-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
    /* Single column on very narrow screens. */
    .product-grid.pb-cat-cols { grid-template-columns: 1fr; }
}

.product-card {
    background: white;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Grid/flex items default to min-width:auto, refusing to shrink below their
       content's intrinsic width — which can push a column wider than its track
       and cause horizontal overflow on narrow screens. min-width:0 lets the card
       shrink to its grid column. */
    min-width: 0;
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}

.product-card:hover {
    border-color: var(--sf-accent);
    box-shadow: var(--sf-shadow-hover);
    transform: translateY(-2px);
}

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

.product-card a.card-link:hover { text-decoration: none; }

.product-thumb {
    aspect-ratio: 4 / 3;
    background: var(--sf-surface);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-thumb-placeholder {
    color: #cbd5e1;
    font-size: 3rem;
}

.product-card-body {
    padding: 0.9rem 1rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-card-category {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sf-muted);
    margin-bottom: 0.2rem;
}

.product-card-name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--sf-text);
    line-height: 1.3;
    /* Break long unbroken titles instead of letting them widen the column. */
    overflow-wrap: anywhere;
}

.product-card-desc {
    font-size: 0.82rem;
    color: var(--sf-muted);
    margin: 0 0 0.8rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-price {
    font-weight: 700;
    color: var(--sf-text);
    font-size: 1rem;
}

.price-range { color: var(--sf-text); }
.price-from { font-size: 0.72rem; color: var(--sf-muted); font-weight: 500; }

/* "Shop by category" cards reuse .product-card; the count line sits where the
   price would be, styled lighter so it doesn't read as a price. */
.category-card-count {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sf-muted);
}

/* A category with no preview image: no thumbnail is rendered at all (no
   placeholder). Give the body a touch more top padding so the name doesn't
   sit flush against the card's top edge. */
.category-card--no-image .product-card-body {
    padding-top: 1.25rem;
}

/* -------------- Product detail page -------------- */

.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    margin-bottom: 2.5rem;
}

@media (max-width: 880px) {
    .product-detail { grid-template-columns: 1fr; gap: 1.5rem; }
}

.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gallery-main {
    aspect-ratio: 4 / 3;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gallery-main video,
.gallery-main iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
}

.gallery-thumbs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---- Thumbnail position (admin: product-template Gallery block) ---- */
/* Default "below" = the existing column layout. "left"/"right" place the thumb
   strip vertically alongside the main image. The main image is order-controlled
   so the thumbs sit on the correct side. */
.product-gallery[data-gallery-position="left"],
.product-gallery[data-gallery-position="right"] {
    flex-direction: row;
    align-items: flex-start;
}
.product-gallery[data-gallery-position="left"] .gallery-main,
.product-gallery[data-gallery-position="right"] .gallery-main {
    flex: 1 1 auto;
    min-width: 0;
}
.product-gallery[data-gallery-position="left"] .gallery-thumbs-wrap,
.product-gallery[data-gallery-position="right"] .gallery-thumbs-wrap,
.product-gallery[data-gallery-position="left"] .gallery-thumbs,
.product-gallery[data-gallery-position="right"] .gallery-thumbs {
    flex: 0 0 auto;
}
/* Side strips stack vertically; width is a sensible fixed rail. */
.product-gallery[data-gallery-position="left"] .gallery-thumbs,
.product-gallery[data-gallery-position="right"] .gallery-thumbs {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 92px;
}
.product-gallery[data-gallery-position="left"] .gallery-thumbs-wrap { order: 0; }
.product-gallery[data-gallery-position="left"] .gallery-main { order: 1; }
.product-gallery[data-gallery-position="right"] .gallery-main { order: 0; }
.product-gallery[data-gallery-position="right"] .gallery-thumbs-wrap { order: 1; }

/* --- WRAP mode on a side: just a scrollable vertical column. JS caps the height
   to the main image; a fallback applies before JS runs. --- */
.product-gallery[data-gallery-position="left"] .gallery-thumbs-wrap:not([data-gallery-layout="carousel"]) .gallery-thumbs,
.product-gallery[data-gallery-position="right"] .gallery-thumbs-wrap:not([data-gallery-layout="carousel"]) .gallery-thumbs {
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* --- CAROUSEL mode on a side: vertical track between up/down arrows. The track's
   max-height is set in JS to the main image's rendered height, so it never
   collapses (flex stretch height chains are unreliable here) and never overflows
   the page. A sensible CSS fallback height applies before JS runs. --- */
.product-gallery[data-gallery-position="left"] .gallery-thumbs-wrap[data-gallery-layout="carousel"],
.product-gallery[data-gallery-position="right"] .gallery-thumbs-wrap[data-gallery-layout="carousel"] {
    flex-direction: column;
    align-items: center;
    align-self: flex-start;
}
.product-gallery[data-gallery-position="left"] .gallery-thumbs-wrap[data-gallery-layout="carousel"] .gallery-thumbs,
.product-gallery[data-gallery-position="right"] .gallery-thumbs-wrap[data-gallery-layout="carousel"] .gallery-thumbs {
    flex: 0 1 auto;
    min-height: 0;
    max-height: 360px;      /* fallback; JS overrides with the main image height */
    width: 92px;
    overflow-x: hidden;
    overflow-y: auto;       /* JS scrolls this vertically via scrollTop */
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.product-gallery[data-gallery-position="left"] .gallery-thumbs-wrap[data-gallery-layout="carousel"] .gallery-thumbs::-webkit-scrollbar,
.product-gallery[data-gallery-position="right"] .gallery-thumbs-wrap[data-gallery-layout="carousel"] .gallery-thumbs::-webkit-scrollbar { display: none; }

@media (max-width: 640px) {
    /* Side strips fall back to a row under the image on small screens. */
    .product-gallery[data-gallery-position="left"],
    .product-gallery[data-gallery-position="right"] { flex-direction: column; align-items: stretch; }
    .product-gallery[data-gallery-position="left"] .gallery-thumbs,
    .product-gallery[data-gallery-position="right"] .gallery-thumbs {
        flex-direction: row;
        flex-wrap: wrap;
        width: auto;
    }
    .product-gallery[data-gallery-position="left"] .gallery-main,
    .product-gallery[data-gallery-position="right"] .gallery-main { order: 0; }
    /* On mobile a side carousel becomes the normal horizontal one. */
    .product-gallery[data-gallery-position="left"] .gallery-thumbs-wrap[data-gallery-layout="carousel"],
    .product-gallery[data-gallery-position="right"] .gallery-thumbs-wrap[data-gallery-layout="carousel"] {
        flex-direction: row;
        height: auto;
    }
    .product-gallery[data-gallery-position="left"] .gallery-thumbs-wrap[data-gallery-layout="carousel"] .gallery-thumbs,
    .product-gallery[data-gallery-position="right"] .gallery-thumbs-wrap[data-gallery-layout="carousel"] .gallery-thumbs {
        flex-direction: row;
        width: auto;
        overflow-x: auto;
        overflow-y: hidden;
    }
}

/* ---- Gallery thumbnail carousel mode (horizontal — thumbnails below) ---- */
.gallery-thumbs-wrap { position: relative; }
.gallery-thumbs-wrap[data-gallery-layout="carousel"] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.gallery-thumbs-wrap[data-gallery-layout="carousel"] .gallery-thumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;          /* Firefox: hide scrollbar, arrows drive it */
    -ms-overflow-style: none;
    flex: 1 1 auto;
    min-width: 0;
}
.gallery-thumbs-wrap[data-gallery-layout="carousel"] .gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumbs-wrap[data-gallery-layout="carousel"] .gallery-thumb { flex: 0 0 auto; }
.gallery-thumbs-nav {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    border: 1px solid var(--sf-border, #d9dee5);
    background: var(--sf-surface, #fff);
    color: var(--sf-text, #1e293b);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
}
.gallery-thumbs-nav:hover { border-color: var(--sf-accent); color: var(--sf-accent); }
.gallery-thumbs-nav[disabled] { opacity: 0.35; cursor: default; }
.gallery-thumbs-nav[disabled]:hover { border-color: var(--sf-border, #d9dee5); color: var(--sf-text, #1e293b); }

/* Horizontal (below) carousel: overlay the arrows on the ends of the strip so the
   thumbnails use the full width. Revealed on hover of the strip (Magento-style). */
.product-gallery[data-gallery-position="below"] .gallery-thumbs-wrap[data-gallery-layout="carousel"] .gallery-thumbs {
    flex: 1 1 100%;
}
.product-gallery[data-gallery-position="below"] .gallery-thumbs-wrap[data-gallery-layout="carousel"] .gallery-thumbs-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2rem;
    height: 2rem;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.product-gallery[data-gallery-position="below"] .gallery-thumbs-wrap[data-gallery-layout="carousel"] .gallery-thumbs-prev { left: 0.15rem; }
.product-gallery[data-gallery-position="below"] .gallery-thumbs-wrap[data-gallery-layout="carousel"] .gallery-thumbs-next { right: 0.15rem; }
.product-gallery[data-gallery-position="below"] .gallery-thumbs-wrap[data-gallery-layout="carousel"]:hover .gallery-thumbs-nav { opacity: 1; }
.product-gallery[data-gallery-position="below"] .gallery-thumbs-wrap[data-gallery-layout="carousel"] .gallery-thumbs-nav[disabled] { opacity: 0; }
@media (hover: none) {
    .product-gallery[data-gallery-position="below"] .gallery-thumbs-wrap[data-gallery-layout="carousel"] .gallery-thumbs-nav { opacity: 0.85; }
    .product-gallery[data-gallery-position="below"] .gallery-thumbs-wrap[data-gallery-layout="carousel"] .gallery-thumbs-nav[disabled] { opacity: 0; }
}

.gallery-thumb {
    width: 72px;
    height: 72px;
    border: 2px solid var(--sf-border);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: var(--sf-surface);
    padding: 0;
    position: relative;
}

.gallery-thumb.active { border-color: var(--sf-accent); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }

.gallery-thumb-play,
.gallery-thumb-embed {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    pointer-events: none;
}
.gallery-thumb-play { background: rgba(0, 0, 0, 0.35); }
.gallery-thumb-embed { background: linear-gradient(135deg, #1e293b, #334155); }

/* Zoom affordance on the main image */
.gallery-main { position: relative; overflow: hidden; }
.gallery-main #gallery-main-img { cursor: zoom-in; }

/* Main-image nav arrows (Magento-style): vertically centred on the left/right
   edges, revealed on hover of the main image. */
.gallery-main-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 2.6rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #1e293b;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.18s ease, background 0.18s ease;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}
.gallery-main-prev { left: 0.6rem; }
.gallery-main-next { right: 0.6rem; }
.gallery-main:hover .gallery-main-nav,
.gallery-main:focus-within .gallery-main-nav { opacity: 1; }
.gallery-main-nav:hover { background: #fff; }
/* Keep arrows visible on touch devices (no hover). */
@media (hover: none) {
    .gallery-main-nav { opacity: 0.9; }
}

.gallery-zoom {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--sf-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.gallery-zoom:hover { background: #fff; }

/* Lightbox — Amazon-style larger gallery view */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.92);
    display: flex;
    flex-direction: column;
    padding: 2.5rem 1rem 1rem;
}
.gallery-lightbox[hidden] { display: none; }
.glb-close {
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
}
.glb-close:hover { background: rgba(255, 255, 255, 0.3); }
.glb-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 0;
}
.glb-stage {
    flex: 1;
    max-width: 1000px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.glb-stage img,
.glb-stage video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.glb-stage iframe {
    width: 100%;
    max-width: 960px;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    background: #000;
}
.glb-nav {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}
.glb-nav:hover { background: rgba(255, 255, 255, 0.3); }
.glb-rail {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 1rem;
    max-height: 6rem;
    overflow-x: auto;
}
.glb-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: #1e293b;
    padding: 0;
    flex: 0 0 auto;
}
.glb-thumb.active { border-color: #fff; }
.glb-thumb img,
.glb-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.glb-thumb-play,
.glb-thumb-embed {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    pointer-events: none;
}
.glb-thumb-play { background: rgba(0, 0, 0, 0.35); }
.glb-thumb-embed { background: linear-gradient(135deg, #1e293b, #334155); }

@media (max-width: 640px) {
    .glb-nav { width: 2.4rem; height: 2.4rem; font-size: 1.4rem; }
    .gallery-lightbox { padding: 2.5rem 0.5rem 0.5rem; }
}

.product-info h1 {
    font-size: 1.8rem;
    margin: 0 0 0.4rem;
    line-height: 1.2;
    color: var(--sf-text);
}

.breadcrumbs {
    font-size: 0.85rem;
    color: var(--sf-muted);
    margin-bottom: 0.8rem;
}

.breadcrumbs a { color: var(--sf-muted); }

.product-price {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--sf-text);
    margin: 1rem 0;
}

.product-price .compare-at {
    font-size: 1rem;
    font-weight: 400;
    color: var(--sf-muted);
    text-decoration: line-through;
    margin-left: 0.5rem;
}

.product-short {
    font-size: 0.98rem;
    color: var(--sf-muted);
    margin: 0.8rem 0 1.4rem;
}

.option-picker {
    margin: 1.5rem 0;
}

.option-row {
    margin-bottom: 0.9rem;
}

.option-row label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sf-text);
    margin-bottom: 0.35rem;
}

.option-row .opt-optional {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--sf-muted, #6b7280);
    margin-left: 0.3rem;
}

.option-row select {
    width: 100%;
    max-width: 360px;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    font-size: 0.95rem;
    background: white;
}

/* Radio / checkbox option modes — rendered as a row of tappable chips. */
.opt-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.opt-choices .opt-choice {
    /* Override the group-label block styling for the per-choice labels. */
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: white;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--sf-text);
    cursor: pointer;
}

.opt-choices .opt-choice:hover {
    border-color: var(--sf-accent);
}

.opt-choices .opt-choice input {
    margin: 0;
    cursor: pointer;
}

/* Highlight the chosen chip. :has() is supported in all current browsers; the
   native control stays visible so there is a clear fallback if it is not. */
.opt-choices .opt-choice:has(input:checked) {
    border-color: var(--sf-accent);
    background: var(--sf-accent-soft, #eef2ff);
}

.add-to-cart {
    background: var(--sf-accent);
    color: white;
    border: none;
    padding: 0.85rem 1.6rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--sf-radius);
    cursor: pointer;
    margin-top: 0.8rem;
}

.add-to-cart:hover { background: var(--sf-accent-hover); }
.add-to-cart:disabled { background: #cbd5e1; color: white; cursor: not-allowed; }

/* Add-to-cart and Wishlist on one row. The form uses display:contents so its
   children (qty-row, the button) become flex items of .buy-actions alongside the
   wishlist block. The qty-row takes a full row of its own; the Add-to-cart button
   and the Wishlist button then sit side by side beneath it. */
.buy-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}
.add-to-cart-form { display: contents; }
.buy-actions .qty-row { flex: 0 0 100%; }      /* qty on its own line */
.buy-actions .add-to-cart { margin-top: 0; }   /* row handles spacing now */
.buy-actions .wishlist-action { margin-top: 0; }

.stock-line {
    margin-top: 0.6rem;
    font-size: 0.88rem;
}

.stock-in { color: var(--sf-success); }
.stock-out { color: var(--sf-danger); }
.stock-unknown { color: var(--sf-muted); }

/* -------------- Quantity stepper -------------- */
.qty-row {
    margin-top: 0.9rem;
}

.qty-row label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sf-text);
    margin-bottom: 0.35rem;
}

.qty-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--sf-border, #d9dee5);
    border-radius: var(--sf-radius);
    overflow: hidden;
}

.qty-btn {
    width: 2.4rem;
    border: none;
    background: #f3f4f6;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    color: var(--sf-text);
}

.qty-btn:hover { background: #e5e7eb; }
.qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.qty-btn:disabled:hover { background: #f3f4f6; }

/* Shown instead of the stepper when an option caps quantity at 1 (e.g. free trial). */
.qty-fixed {
    display: inline-block;
    min-width: 2.4rem;
    padding: 0.35rem 0.6rem;
    text-align: center;
    font-weight: 600;
    border: 1px solid var(--sf-border, #d9dee5);
    border-radius: var(--sf-radius);
    background: var(--sf-surface, #f9fafb);
    color: var(--sf-text);
}

/* The explicit display rules above otherwise override the [hidden] attribute the JS
   toggles (a class display: wins over the UA [hidden]{display:none}), which left BOTH
   the stepper and the fixed "1" visible. Make [hidden] authoritative for these two. */
.qty-stepper[hidden],
.qty-fixed[hidden] {
    display: none;
}

.qty-stepper input {
    width: 3.4rem;
    border: none;
    border-left: 1px solid var(--sf-border, #d9dee5);
    border-right: 1px solid var(--sf-border, #d9dee5);
    text-align: center;
    font-size: 0.95rem;
    -moz-appearance: textfield;
}

.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* -------------- Product content tabs -------------- */
.product-content {
    margin-top: 2.5rem;
}

.product-content-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    border-bottom: 2px solid var(--sf-border, #d9dee5);
    margin-bottom: 1.4rem;
}

.pc-tab {
    padding: 0.65rem 1.15rem;
    border: none;
    background: none;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sf-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.pc-tab:hover { color: var(--sf-text); }

.pc-tab.active {
    color: var(--sf-accent);
    border-bottom-color: var(--sf-accent);
}

.pc-panel {
    display: none;
    font-size: 0.95rem;
    color: var(--sf-text);
    line-height: 1.7;
}

.pc-panel.active { display: block; }

.pc-panel p:first-child { margin-top: 0; }
.pc-panel p:last-child { margin-bottom: 0; }
.pc-panel img { max-width: 100%; height: auto; }
.pc-panel table { border-collapse: collapse; }
.pc-panel table td, .pc-panel table th { border: 1px solid var(--sf-border, #d9dee5); padding: 0.4rem 0.6rem; }

/* -------------- Category page sort bar -------------- */

.category-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--sf-border);
}

.category-toolbar .count { color: var(--sf-muted); font-size: 0.9rem; }

.sort-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.sort-control select {
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: white;
    font-size: 0.9rem;
}

/* -------------- Empty / not found states -------------- */

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--sf-muted);
}

.empty-state h2 { color: var(--sf-text); }

/* -------------- Responsive -------------- */

@media (max-width: 720px) {
    /* Deterministic two-row header via grid (flex order/wrap was unreliable here):
         row 1 → brand (left)            | account + cart icons (right)
         row 2 → search, spanning both columns (full width)
       Grid placement ignores source order, so the icons always land top-right and
       the search always occupies the whole second row. */
    .site-header-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "brand  nav"
            "search search";
        align-items: center;
        column-gap: 0.75rem;
        row-gap: 0.6rem;
        padding: 0.85rem 1rem;
    }
    .site-brand  { grid-area: brand; justify-self: start; }
    .site-nav    {
        grid-area: nav;
        justify-self: end;
        margin-left: 0;     /* grid handles right-alignment; clear the flex auto-margin */
        gap: 0.6rem;
    }
    .site-search {
        grid-area: search;
        width: 100%;
        max-width: none;
    }
    .brand-name { font-size: 1.2rem; }
    .hero { padding: 2rem 1rem; }
    .hero h1 { font-size: 1.6rem; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 0.85rem; }
    .product-card-body { padding: 0.7rem; }
    .product-info h1 { font-size: 1.4rem; }
}

/* Phones and narrow windows: force one product per row. The min() idiom above
   already collapses the grid when two columns won't fit; this makes the
   single-column layout explicit up to 600px (covers narrow desktop windows too)
   and also applies to the category cards, which share .product-grid. */
@media (max-width: 600px) {
    .product-grid { grid-template-columns: 1fr; }
}

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 880px) {
    .cart-layout { grid-template-columns: 1fr; }
}

.cart-items { display: flex; flex-direction: column; gap: 1rem; }

.cart-line {
    display: grid;
    grid-template-columns: 110px 1fr auto auto;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    align-items: center;
}

@media (max-width: 720px) {
    .cart-line { grid-template-columns: 80px 1fr; }
    .cart-line-qty, .cart-line-price { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
}

.cart-line-thumb {
    width: 110px; height: 90px;
    background: var(--sf-surface);
    border-radius: 6px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.cart-line-thumb img { width: 100%; height: 100%; object-fit: contain; }

.cart-line-info h3 {
    margin: 0 0 0.3rem;
    font-size: 1rem;
    font-weight: 600;
}
.cart-line-info h3 a { color: var(--sf-text); text-decoration: none; }
.cart-line-info h3 a:hover { color: var(--sf-accent); }

.cart-line-options {
    font-size: 0.82rem;
    color: var(--sf-muted);
}

.cart-line-sku {
    font-size: 0.75rem;
    color: var(--sf-muted);
    margin-top: 0.2rem;
}

.qty-form { display: flex; align-items: center; gap: 0.4rem; }
.qty-label { font-size: 0.85rem; color: var(--sf-muted); }
.qty-input {
    width: 60px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--sf-border);
    border-radius: 6px;
    text-align: center;
}
.qty-update {
    padding: 0.35rem 0.7rem;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
}
.qty-update:hover { background: var(--sf-border); }

.cart-line-price {
    text-align: right;
}
.line-total { font-weight: 600; font-size: 1.05rem; color: var(--sf-text); }
.line-unit { font-size: 0.78rem; color: var(--sf-muted); margin-top: 0.1rem; }

.remove-link {
    background: none;
    border: none;
    color: var(--sf-danger);
    font-size: 0.82rem;
    cursor: pointer;
    padding: 0;
}
.remove-link:hover { text-decoration: underline; }

/* -------------- Cart & checkout summary -------------- */

.cart-summary, .checkout-summary {
    background: var(--sf-surface);
    padding: 1.25rem;
    border-radius: var(--sf-radius);
    border: 1px solid var(--sf-border);
    position: sticky;
    top: 100px;
}

.cart-summary h2, .checkout-summary h2 {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 0.95rem;
}

.summary-tax { color: var(--sf-muted); }

.summary-grand {
    border-top: 1px solid var(--sf-border);
    margin-top: 0.4rem;
    padding-top: 0.7rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.summary-note {
    font-size: 0.78rem;
    color: var(--sf-muted);
    margin: 0.6rem 0 1rem;
}

/* Terms / newsletter consent checkboxes shown below the place-order button. */
.checkout-consents { margin: 0.85rem 0 0.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.checkout-consents .consent-row {
    display: flex; align-items: flex-start; gap: 0.55rem;
    font-size: 0.86rem; color: var(--sf-text, #1f2937); cursor: pointer; line-height: 1.35;
}
.checkout-consents .consent-row input[type=checkbox] {
    margin: 0.15rem 0 0; flex: 0 0 auto; width: 1rem; height: 1rem; cursor: pointer;
}
.checkout-consents .consent-label a { color: var(--sf-accent); text-decoration: underline; }
.checkout-consents .consent-req { color: var(--sf-danger, #dc2626); font-weight: 700; }

.btn-checkout {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--sf-accent);
    color: white;
    padding: 0.8rem 1rem;
    border-radius: var(--sf-radius);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    margin-top: 0.5rem;
}
.btn-checkout:hover { background: var(--sf-accent-hover); color: white; text-decoration: none; }
.btn-checkout.disabled, .btn-checkout:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

.continue-shopping {
    display: block;
    text-align: center;
    margin-top: 0.8rem;
    font-size: 0.88rem;
    color: var(--sf-muted);
}

/* -------------- Checkout page -------------- */

.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 880px) {
    .checkout-layout { grid-template-columns: 1fr; }
}

.checkout-form-section h2 {
    margin: 0 0 0.8rem;
    font-size: 1.1rem;
    font-weight: 600;
    padding-top: 1rem;
    border-top: 1px solid var(--sf-border);
}

.checkout-signin-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    background: var(--sf-surface, #f8fafc);
    border: 1px solid var(--sf-border);
    border-radius: 8px;
    font-size: 0.9rem;
}
.checkout-signin-or { color: var(--sf-muted, #6b7280); font-size: 0.82rem; }

.checkout-createaccount {
    background: var(--sf-surface, #f8fafc);
    border: 1px solid var(--sf-border);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
}
.checkout-createaccount .checkbox-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    cursor: pointer;
}
.checkout-createaccount .checkbox-inline input { margin: 0; }
.checkout-createaccount .hint { display: block; margin-top: 0.35rem; }
.checkout-form-section h2:first-child {
    padding-top: 0;
    border-top: none;
}

.form-row { margin-bottom: 0.85rem; }
.form-row label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
    color: var(--sf-text);
}
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=tel],
.form-row input[type=number],
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    font-size: 0.95rem;
    background: white;
    font-family: inherit;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
    outline: none;
    border-color: var(--sf-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.field-error {
    display: block;
    color: var(--sf-danger);
    font-size: 0.78rem;
    margin-top: 0.2rem;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}
.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.8rem;
}
@media (max-width: 600px) {
    .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
}

.summary-items { margin-bottom: 0.8rem; }
.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--sf-border);
    font-size: 0.88rem;
}
.summary-item:last-child { border-bottom: none; }
.summary-item-meta { font-size: 0.78rem; color: var(--sf-muted); margin-top: 0.1rem; }
.summary-item-price { font-weight: 600; }

.summary-totals { margin-top: 0.4rem; }

/* Payment picker inside the order-summary card (below the Total). */
.summary-payment {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sf-border, #e5e7eb);
}
.summary-payment-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sf-text);
    margin: 0 0 0.6rem;
}
.summary-payment .payment-methods { margin-bottom: 0.25rem; }

/* -------------- Confirmation -------------- */

.confirmation-card {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 2rem 1rem;
}

.confirmation-icon {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: #dcfce7;
    color: var(--sf-success);
    font-size: 2.2rem;
    line-height: 64px;
    margin: 0 auto 1.5rem;
    font-weight: 700;
}

.confirmation-card h1 { margin: 0 0 0.5rem; }
.confirmation-sub { color: var(--sf-muted); margin-bottom: 2rem; }

.confirmation-summary {
    text-align: left;
    margin: 2rem 0;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
}
.confirmation-summary h2 {
    margin: 0;
    padding: 0.8rem 1rem;
    background: var(--sf-surface);
    border-bottom: 1px solid var(--sf-border);
    font-size: 1rem;
}

.confirmation-table {
    width: 100%;
    border-collapse: collapse;
}
.confirmation-table th, .confirmation-table td {
    padding: 0.65rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--sf-border);
    font-size: 0.9rem;
}
.confirmation-table th { background: var(--sf-surface); font-weight: 600; }
.confirmation-table tfoot td { font-weight: 500; }
.confirmation-table .tax-row td { color: var(--sf-muted); }
.confirmation-table .grand-row td {
    font-size: 1.05rem;
    background: var(--sf-surface);
}

.confirmation-next {
    color: var(--sf-muted);
    font-size: 0.88rem;
    margin: 1rem 0;
}

/* -------------- Pay page -------------- */
.pay-card {
    max-width: 560px;
    margin: 2rem auto;
    text-align: center;
    padding: 2.5rem 2rem;
    background: white;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow);
}
.pay-card h1 { margin: 0 0 0.4rem; font-size: 1.5rem; }
.pay-sub { color: var(--sf-muted); margin-bottom: 1.5rem; font-size: 1rem; }
.pay-note { color: var(--sf-muted); font-size: 0.85rem; margin-top: 1rem; }

/* -------------- Payment-method picker -------------- */
.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.payment-method {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: white;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}

.payment-method:hover { border-color: var(--sf-accent); }
.payment-method.is-selected { border-color: var(--sf-accent); background: #eff6ff; }

.payment-method input[type=radio] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.payment-method-text { display: flex; flex-direction: column; }
.payment-method-text strong { font-size: 0.95rem; color: var(--sf-text); margin-bottom: 0.15rem; }
.payment-method-text small { font-size: 0.82rem; color: var(--sf-muted); line-height: 1.4; }

/* -------------- Bank Transfer pay page -------------- */
.pay-card-wide { max-width: 720px; }

.bank-details {
    text-align: left;
    margin: 1.5rem 0;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
}

.bank-row {
    display: flex;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--sf-border);
    font-size: 0.95rem;
}

.bank-row:last-child { border-bottom: none; }
.bank-row-emphasized { background: #fefce8; font-weight: 500; }

.bank-label { color: var(--sf-muted); }
.bank-value { font-weight: 600; color: var(--sf-text); text-align: right; }
.bank-value code { font-family: ui-monospace, monospace; }

.bank-instructions {
    text-align: left;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--sf-surface);
    border-radius: var(--sf-radius);
}
.bank-instructions h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.bank-instructions p { margin: 0; color: var(--sf-text); white-space: pre-wrap; }

/* -------------- PayPal pay page -------------- */

#paypal-buttons-container {
    margin: 1.2rem 0;
    min-height: 56px;
}

.card-fields-divider {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 1.5rem 0 1rem;
    color: var(--sf-muted);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.card-fields-divider::before,
.card-fields-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--sf-border);
}

#card-fields-container .cf-row {
    margin-bottom: 0.8rem;
    text-align: left;
}
#card-fields-container .cf-row label {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: var(--sf-text);
}
#card-fields-container .cf-row > div[id] {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: white;
    min-height: 38px;
}
#card-fields-container .cf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}

.pay-status {
    margin-top: 1rem;
    font-size: 0.9rem;
    min-height: 1.2em;
}
.pay-status-info { color: var(--sf-muted); }
.pay-status-error { color: var(--sf-danger); }

/* Hide the validation-summary box when there are no errors. ASP.NET Core adds
   the .validation-summary-valid class on a clean page load; without this the
   styled (alert/flash) container would render as an empty coloured box. */
.validation-summary-valid {
    display: none;
}

/* ---- Quick-search live results dropdown ---- */
.quick-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
    z-index: 50;
    max-height: 70vh;
    overflow-y: auto;
}

.quick-search-results .qs-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.85rem;
    text-decoration: none;
    color: var(--sf-text);
    border-bottom: 1px solid var(--sf-border);
}

.quick-search-results .qs-item:last-child { border-bottom: none; }

.quick-search-results .qs-item:hover,
.quick-search-results .qs-item.qs-active {
    background: var(--sf-surface);
}

.qs-thumb {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--sf-surface);
}

.qs-thumb-empty {
    display: inline-block;
    border: 1px dashed var(--sf-border);
}

.qs-text { display: flex; flex-direction: column; min-width: 0; }

.qs-name {
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qs-meta {
    font-size: 0.8rem;
    color: var(--sf-muted, #64748b);
}

.qs-all {
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sf-accent);
    background: var(--sf-surface);
}

.qs-empty {
    padding: 0.85rem;
    font-size: 0.88rem;
    color: var(--sf-muted, #64748b);
    text-align: center;
}

/* ---- CMS static pages -------------------------------------- */
/* A page's content fills the same width as the rest of the site — it tracks
   the layout's container, with no separate narrower cap. Use the per-page
   "Full-width" toggle for an edge-to-edge page. */
.cms-page { margin: 0; }
/* Content is left-aligned by default; per-block pb-align-* still overrides. */
.cms-page-header, .cms-page-body { text-align: left; }

/* Full-width pages break out of both the 820px cap and the layout's
   .container, stretching edge-to-edge using the full-bleed margin trick. */
.cms-page-full {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}
.cms-page-header { margin-bottom: 1.5rem; }
.cms-page-header h1 { margin: 0.4rem 0 0; }
.cms-page-body { line-height: 1.7; font-size: 1rem; color: var(--sf-text, #1f2937); }
.cms-page-body h2 { margin: 1.8rem 0 0.6rem; font-size: 1.4rem; }
.cms-page-body h3 { margin: 1.4rem 0 0.5rem; font-size: 1.15rem; }
.cms-page-body p { margin: 0 0 1rem; }
.cms-page-body ul,
.cms-page-body ol { margin: 0 0 1rem 1.4rem; }
.cms-page-body li { margin: 0.25rem 0; }
.cms-page-body img { max-width: 100%; height: auto; border-radius: 8px; }
/* Image alignment classes set by the HTML editor (Stage 6b). */
.cms-page-body img.pb-img-left { float: left; margin: 0.2rem 1rem 0.6rem 0; }
.cms-page-body img.pb-img-right { float: right; margin: 0.2rem 0 0.6rem 1rem; }
.cms-page-body img.pb-img-center { display: block; float: none; margin: 0.8rem auto; }
/* A figure (image + caption) the editor may emit. */
.cms-page-body figure { margin: 1rem 0; }
.cms-page-body figure.align-left { float: left; margin: 0.2rem 1rem 0.6rem 0; }
.cms-page-body figure.align-right { float: right; margin: 0.2rem 0 0.6rem 1rem; }
.cms-page-body figure img { margin: 0; }
.cms-page-body figcaption { font-size: 0.85rem; color: var(--sf-muted, #64748b); margin-top: 0.3rem; }
/* Clear floats so a following block doesn't ride up beside an image. */
.cms-page-body::after { content: ""; display: block; clear: both; }
.cms-page-body table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.cms-page-body th,
.cms-page-body td { border: 1px solid var(--sf-border, #e3e7ec); padding: 0.5rem 0.75rem; text-align: left; }
/* Generic in-content links get the accent colour, but NOT anchors that are
   styled as page-builder buttons (hero / CTA / button blocks) — those carry
   their own background + text colour and must not be repainted to the link
   colour (which would render blue text on a blue button). */
.cms-page-body a:not(.pb-btn) { color: var(--sf-accent, #2563eb); }

/* ---- CMS media collections (sliders / galleries) ----------- */
.media-collection { margin: 2rem 0; }
.media-collection-heading { font-size: 1.5rem; margin: 0 0 1rem; }

/* Slider — carousel. Two modes: "slide" (track translates) and "fade"
   (slides stacked, opacity cross-fades). JS sets the real transition timing
   inline from the admin's speed/easing settings; values here are fallbacks. */
.mc-slider { position: relative; overflow: hidden; border-radius: 12px; }

/* --- Slide mode (default) --- */
.mc-slider--slide .mc-slider-track { display: flex; transition: transform 0.5s ease; }
.mc-slider--slide .mc-slide { flex: 0 0 100%; position: relative; }

/* --- Fade mode --- */
/* All slides are absolutely stacked and cross-fade via opacity. The first
   slide is also rendered invisibly in normal flow so the track takes its
   height (every slide is the same width, so its height drives the box). */
.mc-slider--fade .mc-slider-track { position: relative; }
.mc-slider--fade .mc-slide {
    position: absolute; inset: 0; width: 100%;
    opacity: 0; transition: opacity 0.5s ease;
    pointer-events: none;
}
.mc-slider--fade .mc-slide.is-active {
    opacity: 1; pointer-events: auto; z-index: 1;
}
.mc-slider--fade .mc-slide:first-child {
    position: relative;          /* the height sizer — keeps the track tall */
    visibility: hidden;          /* hidden unless it is also the active slide */
}
.mc-slider--fade .mc-slide:first-child.is-active {
    visibility: visible;
}
/* When a non-first slide is active, reveal it on top of the hidden sizer. */
.mc-slider--fade .mc-slide.is-active:not(:first-child) {
    visibility: visible;
}

.mc-slide img { width: 100%; height: auto; display: block; }
.mc-slide-link { display: block; }
.mc-slide-caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1rem 1.25rem; font-size: 1rem;
    color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.65));
}
.mc-slider-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border: 0; border-radius: 50%;
    background: rgba(0,0,0,0.45); color: #fff; font-size: 1.5rem; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    z-index: 2;
}
.mc-slider-nav:hover { background: rgba(0,0,0,0.7); }
.mc-prev { left: 12px; }
.mc-next { right: 12px; }
.mc-slider:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
.mc-slider-dots {
    position: absolute; left: 0; right: 0; bottom: 10px;
    display: flex; gap: 6px; justify-content: center;
    z-index: 2;
}
.mc-dot {
    width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255,255,255,0.55); cursor: pointer;
}
.mc-dot.is-active { background: #fff; }

/* Image gallery — responsive grid */
.mc-gallery {
    display: grid; gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.mc-gallery-item { margin: 0; }
.mc-gallery-item img {
    width: 100%; height: 180px; object-fit: cover;
    border-radius: 8px; display: block;
}
.mc-gallery-item figcaption {
    font-size: 0.85rem; color: var(--sf-muted, #6b7280); margin-top: 0.35rem;
}

/* Product gallery — reuses .product-card, laid out in a grid */
.mc-product-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}

@media (max-width: 640px) {
    .mc-gallery { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .mc-gallery-item img { height: 130px; }
    .mc-slide-caption { font-size: 0.9rem; padding: 0.7rem 0.9rem; }
}

/* ---- Page-builder Slider/Gallery block: width & height options ----
   Width is applied as an inline max-width on .pb-collection (percent/px), or via
   the --full modifier (edge-to-edge browser width). Height "px" sets a fixed box
   height through the --mc-fixed-height custom property, with images covering it. */

/* Full browser width: break out of the centered content container.
   Uses margin-calc rather than width:100vw + translateX, because 100vw includes
   the vertical scrollbar's width and so produced a stray horizontal scrollbar.
   The calc() breakout pins the element to the viewport edges relative to its
   container without forcing an over-wide box. */
.pb-collection--full {
    width: auto;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Fixed height — slider. Constrain each slide to the chosen height and let the
   image cover it (cropping rather than letterboxing). */
.pb-collection--fixed-h .mc-slider .mc-slide {
    height: var(--mc-fixed-height);
}
.pb-collection--fixed-h .mc-slide img {
    height: var(--mc-fixed-height);
    object-fit: cover;
}
/* Fade mode uses the first slide as the height sizer — pin it too. */
.pb-collection--fixed-h .mc-slider--fade .mc-slider-track {
    height: var(--mc-fixed-height);
}

/* Fixed height — gallery. Override the default item image height. */
.pb-collection--fixed-h .mc-gallery-item img {
    height: var(--mc-fixed-height);
}
@media (max-width: 640px) {
    /* Keep the admin's fixed height on mobile too (don't fall back to 130px). */
    .pb-collection--fixed-h .mc-gallery-item img { height: var(--mc-fixed-height); }
}

/* Fixed gallery columns — force N images per row instead of the responsive
   auto-fill grid. --mc-gallery-cols (1–15) is set inline on .pb-collection. */
.pb-collection--cols .mc-gallery {
    grid-template-columns: repeat(var(--mc-gallery-cols), 1fr);
}
@media (max-width: 640px) {
    /* On narrow screens cap at 2 columns so images stay usable, unless the
       admin chose 1. min() keeps the chosen count when it's already ≤ 2. */
    .pb-collection--cols .mc-gallery {
        grid-template-columns: repeat(min(var(--mc-gallery-cols), 2), 1fr);
    }
}

/* ---- Gallery lightbox (popup) --------------------------------------
   Shown when a gallery block has "Open images in a popup gallery" enabled.
   One overlay is appended to <body> and reused by every gallery on the page. */
.mc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    padding: 3rem 4rem;
}
.mc-lightbox.is-open { display: flex; }
body.mc-lb-lock { overflow: hidden; }   /* stop the page scrolling behind the popup */

.mc-lb-figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.mc-lb-img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.mc-lb-caption {
    color: #f3f4f6;
    font-size: 0.95rem;
    text-align: center;
    max-width: 60ch;
}
.mc-lb-counter {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: #d1d5db;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}
.mc-lb-close,
.mc-lb-prev,
.mc-lb-next {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    line-height: 1;
}
.mc-lb-close:hover,
.mc-lb-prev:hover,
.mc-lb-next:hover { background: rgba(255, 255, 255, 0.28); }
.mc-lb-close {
    top: 1rem;
    right: 1rem;
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.8rem;
}
.mc-lb-prev,
.mc-lb-next {
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
}
.mc-lb-prev { left: 1rem; }
.mc-lb-next { right: 1rem; }

@media (max-width: 640px) {
    .mc-lightbox { padding: 2.5rem 0.75rem; }
    .mc-lb-img { max-height: 74vh; }
    .mc-lb-prev, .mc-lb-next { width: 2.4rem; height: 2.4rem; font-size: 1.5rem; }
    .mc-lb-prev { left: 0.4rem; }
    .mc-lb-next { right: 0.4rem; }
}

/* ---- CMS header / footer menus ----------------------------- */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-toggle::after { content: " \25BE"; font-size: 0.75em; }
.nav-dropdown-menu {
    position: absolute; top: 100%; left: 0; min-width: 180px;
    background: #fff; border: 1px solid var(--sf-border, #e3e7ec);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    padding: 0.4rem 0; display: none; z-index: 50;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-link {
    display: block; padding: 0.45rem 1rem; font-size: 0.92rem;
    color: var(--sf-text, #1f2937); text-decoration: none; white-space: nowrap;
}
.nav-dropdown-link:hover { background: var(--sf-bg-soft, #f4f6f8); }

.footer-nav {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
    margin-bottom: 0.9rem; padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer-nav-link {
    color: inherit; opacity: 0.85; text-decoration: none; font-size: 0.9rem;
}
.footer-nav-link:hover { opacity: 1; text-decoration: underline; }
.footer-nav-child { opacity: 0.6; font-size: 0.85rem; }

/* ---- Header menu bar (own row below the header) ------------ */
.site-menubar {
    background: var(--sf-bg-soft, #f4f6f8);
    border-top: 1px solid var(--sf-border, #e3e7ec);
    border-bottom: 1px solid var(--sf-border, #e3e7ec);
}
.site-menu {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem;
    padding-top: 0.4rem; padding-bottom: 0.4rem;
}
.site-menu .nav-link { padding: 0.35rem 0; }
.site-menu .nav-dropdown-menu { top: calc(100% + 0.4rem); }

/* ---- Hamburger toggle + mobile menu ------------------------ */
/* The hamburger lives in .site-nav and is hidden on desktop, where the menubar
   shows inline with hover dropdowns. The per-item submenu caret button is also
   desktop-hidden (hover opens dropdowns there). */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    cursor: pointer;
}
.nav-toggle-bar {
    display: block;
    width: 1.2rem;
    height: 2px;
    margin: 0 auto;
    background: var(--sf-text);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Animate into an X when open. */
.nav-toggle.is-active .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-active .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-active .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-submenu-toggle { display: none; }

@media (max-width: 640px) {
    .site-menu { gap: 0.15rem 0.9rem; }
}

/* ---- Mobile navigation (<=760px) --------------------------- */
@media (max-width: 760px) {
    /* Show the hamburger; collapse the menubar until toggled open. */
    .nav-toggle { display: flex; }

    .site-menubar { display: none; }
    .site-menubar.is-open { display: block; }

    /* Stack the menu items vertically as a full-width list. */
    .site-menu {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 0;
        padding-top: 0.25rem;
        padding-bottom: 0.5rem;
    }
    .site-menu > .nav-link,
    .site-menu .nav-dropdown {
        display: block;
        width: 100%;
        border-bottom: 1px solid var(--sf-border);
    }
    .site-menu > .nav-link {
        padding: 0.75rem 0.25rem;
    }

    /* Parent item row: link on the left, caret toggle button on the right. */
    .nav-dropdown {
        position: relative;
    }
    .nav-dropdown .nav-dropdown-toggle {
        display: block;
        padding: 0.75rem 3rem 0.75rem 0.25rem;
    }
    .nav-dropdown-toggle::after { content: ""; }   /* hide the desktop ▾ glyph on mobile */

    .nav-submenu-toggle {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 3rem;
        height: 2.9rem;
        background: transparent;
        border: none;
        border-left: 1px solid var(--sf-border);
        cursor: pointer;
    }
    /* Caret glyph for the submenu toggle; rotates when expanded. */
    .nav-submenu-toggle::before {
        content: "\25BE";
        display: inline-block;
        color: var(--sf-muted);
        transition: transform 0.2s ease;
    }
    .nav-dropdown.is-expanded .nav-submenu-toggle::before { transform: rotate(180deg); }

    /* Submenu: hidden until the row is expanded; then it flows inline (not a
       floating dropdown) and indents under its parent. Hover is disabled here. */
    .nav-dropdown-menu {
        position: static;
        display: none;
        min-width: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 0.4rem 0;
        background: var(--sf-surface);
    }
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu { display: none; }   /* override desktop hover */
    .nav-dropdown.is-expanded .nav-dropdown-menu { display: block; }
    .nav-dropdown-link { padding-left: 1.25rem; }
}

/* ---- Page builder blocks (Stage 5d) ------------------------------- */
.pb-align-left   { text-align: left; }
.pb-align-center { text-align: center; }
.pb-align-right  { text-align: right; }

/* ---- Social icons block ----------------------------------------------
   Icon size, gap and colours come from CSS custom properties set inline on
   the wrapper by the renderer (--si-size, --si-gap, --si-pad, --si-color,
   --si-icon, --si-hover, and per-link --si-brand). */
.pb-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--si-gap, 10px);
}
.pb-social.pb-align-center { justify-content: center; }
.pb-social.pb-align-right  { justify-content: flex-end; }
.pb-social.pb-align-left   { justify-content: flex-start; }

.pb-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--si-pad, 10px);
    line-height: 0;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.pb-social-link svg { display: block; width: var(--si-size, 20px); height: var(--si-size, 20px); }
.pb-social-link:hover { transform: translateY(-1px); }

/* Shapes */
.pb-social-shape-circle  .pb-social-link { border-radius: 999px; }
.pb-social-shape-rounded .pb-social-link { border-radius: 8px; }
.pb-social-shape-square  .pb-social-link { border-radius: 0; }
.pb-social-shape-none    .pb-social-link { padding: 0; border-radius: 0; }

/* Colour style: BRAND — chip filled with each platform's brand colour, white glyph. */
.pb-social-style-brand .pb-social-link {
    background: var(--si-brand, #333);
    color: var(--si-icon, #fff);
}
.pb-social-style-brand .pb-social-link:hover { opacity: 0.88; }
/* When shape is "none", brand style colours the glyph itself (no chip). */
.pb-social-style-brand.pb-social-shape-none .pb-social-link {
    background: transparent;
    color: var(--si-brand, #333);
}
.pb-social-style-brand.pb-social-shape-none .pb-social-link:hover { opacity: 0.7; }

/* Colour style: MONO — single custom colour (or inherit text colour if unset). */
.pb-social-style-mono .pb-social-link {
    background: var(--si-color, currentColor);
    color: var(--si-icon, #fff);
}
.pb-social-style-mono .pb-social-link:hover { background: var(--si-hover, var(--si-color, currentColor)); opacity: 0.9; }
/* Mono + none: bare glyph in the custom colour (this matches a typical footer row,
   like the icons in the reference screenshot). */
.pb-social-style-mono.pb-social-shape-none .pb-social-link {
    background: transparent;
    color: var(--si-color, currentColor);
}
.pb-social-style-mono.pb-social-shape-none .pb-social-link:hover {
    color: var(--si-hover, var(--si-color, currentColor));
    opacity: 0.85;
}

/* Colour style: OUTLINE — transparent chip, coloured border + glyph. */
.pb-social-style-outline .pb-social-link {
    background: transparent;
    color: var(--si-color, currentColor);
    border: 1px solid currentColor;
}
.pb-social-style-outline .pb-social-link:hover {
    background: var(--si-color, currentColor);
    color: var(--si-hover, #fff);
}

/* ---- Share block ------------------------------------------------------- */
/* Share buttons reuse .pb-social / .pb-social-link chip styling above, but
   they're <button>s, so strip the native button chrome to match the <a> chips. */
.pb-share-btn {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: none;
    margin: 0;
    font: inherit;
    cursor: pointer;
    position: relative; /* anchors the "Copied!" tooltip */
}
.pb-share-label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-right: 0.15rem;
    color: inherit;
}

/* "Copied!" tooltip on the copy-link button. */
.pb-share-copied {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #111827;
    color: #fff;
    font-size: 0.72rem;
    line-height: 1;
    padding: 0.35em 0.55em;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 5;
}
.pb-share-btn.pb-share-copied-on .pb-share-copied {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Floating (hanging) share rail — fixed to a screen edge, follows scroll.
   Transparent by default (operators can add a background via Additional CSS). */
.pb-share-floating {
    position: fixed;
    z-index: 900;
    padding: 8px;
}
/* Left / right rails: vertical stack. Vertical position = top / center / bottom. */
.pb-share-floating[class*="pb-share-float-left-"],
.pb-share-floating[class*="pb-share-float-right-"] {
    flex-direction: column;
    flex-wrap: nowrap;
}
.pb-share-floating.pb-share-float-left-top,
.pb-share-floating.pb-share-float-left-center,
.pb-share-floating.pb-share-float-left-bottom { left: 0; }
.pb-share-floating.pb-share-float-right-top,
.pb-share-floating.pb-share-float-right-center,
.pb-share-floating.pb-share-float-right-bottom { right: 0; }

.pb-share-floating.pb-share-float-left-top,
.pb-share-floating.pb-share-float-right-top { top: 12px; }
.pb-share-floating.pb-share-float-left-center,
.pb-share-floating.pb-share-float-right-center { top: 50%; transform: translateY(-50%); }
.pb-share-floating.pb-share-float-left-bottom,
.pb-share-floating.pb-share-float-right-bottom { bottom: 12px; }

/* Bottom rail: horizontal row pinned to the bottom edge.
   Horizontal position = left / center / right. */
.pb-share-floating[class*="pb-share-float-bottom-"] {
    bottom: 0;
    flex-direction: row;
    flex-wrap: nowrap;
}
.pb-share-floating.pb-share-float-bottom-left   { left: 12px; }
.pb-share-floating.pb-share-float-bottom-center { left: 50%; transform: translateX(-50%); }
.pb-share-floating.pb-share-float-bottom-right  { right: 12px; }

/* On small screens, side rails can crowd content — move all floating rails to a
   centred bottom row. */
@media (max-width: 560px) {
    .pb-share-floating[class*="pb-share-float-left-"],
    .pb-share-floating[class*="pb-share-float-right-"] {
        top: auto;
        bottom: 0;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        flex-direction: row;
    }
}

.cms-page-body .pb-heading { margin: 1.6rem 0 0.6rem; }
.cms-page-body .pb-richtext { margin: 0 0 1rem; }
/* Image alignment inside rich-text / custom-HTML blocks (Stage 6b). */
.pb-richtext img.pb-img-left,
.pb-html img.pb-img-left { float: left; margin: 0.2rem 1rem 0.6rem 0; }
.pb-richtext img.pb-img-right,
.pb-html img.pb-img-right { float: right; margin: 0.2rem 0 0.6rem 1rem; }
.pb-richtext img.pb-img-center,
.pb-html img.pb-img-center { display: block; float: none; margin: 0.8rem auto; }
.pb-richtext img,
.pb-html img { max-width: 100%; height: auto; }
.pb-richtext::after,
.pb-html::after { content: ""; display: block; clear: both; }

.pb-image { margin: 1.2rem 0; }
.pb-image img { max-width: 100%; height: auto; border-radius: var(--sf-radius); }

.pb-button { margin: 1.2rem 0; }
.pb-btn {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border-radius: var(--sf-radius);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
}
.pb-btn:hover { text-decoration: none; }
.pb-btn-primary {
    background: var(--sf-accent);
    color: #fff;
}
.pb-btn-primary:hover { background: var(--sf-accent-hover); color: #fff; }
.pb-btn-secondary {
    background: transparent;
    color: var(--sf-accent);
    border-color: var(--sf-border);
}
.pb-btn-secondary:hover { border-color: var(--sf-accent); color: var(--sf-accent); }

/* ---- Page builder blocks 5d-4: spacer/divider/cta/columns/grid ---- */
.pb-spacer-small  { height: 1rem; }
.pb-spacer-medium { height: 2.5rem; }
.pb-spacer-large  { height: 5rem; }

/* Divider rule. Uses !important on the border so a generic `hr { border: 0 }`
   reset (from a theme or a third-party stylesheet) can't silently erase the
   line. Color falls back to a visible grey if --sf-border is undefined. */
hr.pb-divider {
    display: block;
    width: 100%;
    height: 0;
    border: 0 !important;
    border-top: 1px solid var(--sf-border, #d1d5db) !important;
    margin: 0.4rem 0;
    box-sizing: border-box;
    background: none;
}
/* Line (default) keeps the base rule above. Variants: */
hr.pb-divider-thick  { border-top-width: 3px !important; }
hr.pb-divider-dotted { border-top-style: dotted !important; border-top-width: 2px !important; }
/* Spacer: blank vertical space, no visible rule. Rendered as a <div>.
   Compact by default; increase via the block's Additional CSS class. */
.pb-divider-spacer {
    display: block;
    border: 0;
    height: 0.8rem;
    margin: 0;
}
/* Full width: break the divider out of the centered content container so it
   spans the whole viewport edge-to-edge. Works regardless of the container's
   max-width because 100vw is relative to the viewport, not the parent. */
.pb-divider-full {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}
/* Inside a column the 50%/50vw breakout maths is relative to the (narrow)
   column, not the page, so it mis-aligns. There, "full" simply means the full
   width of the column — reset the breakout and span the column edge-to-edge. */
.pb-col .pb-divider-full,
.pb-builder-columns .pb-divider-full {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Vertical divider: a thin vertical rule. Stretches to the height of its
   container when that container is a flex/grid row (e.g. between columns);
   otherwise falls back to a sensible default height so it's always visible. */
.pb-divider-vertical {
    display: inline-block;
    align-self: stretch;
    width: 0;
    min-height: 2.5rem;
    height: 100%;
    margin: 0 1rem;
    border: 0;
    border-left: 1px solid var(--sf-border, #d1d5db);
    box-sizing: border-box;
    vertical-align: middle;
}
.pb-divider-v-thick  { border-left-width: 3px; }
.pb-divider-v-dotted { border-left-style: dotted; border-left-width: 2px; }

.pb-html { margin: 1rem 0; }

.pb-cta {
    margin: 1.6rem 0;
    padding: 2rem 1.5rem;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
}
.pb-cta-heading { margin: 0 0 0.5rem; }
.pb-cta-text { margin: 0 0 1rem; color: var(--sf-muted); }

.pb-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 1.2rem 0;
    align-items: start;
}
.pb-columns.pb-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.pb-columns.pb-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-columns.pb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pb-columns.pb-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pb-columns.pb-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pb-columns.pb-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pb-columns.pb-gap-none { gap: 0; }
.pb-columns.pb-gap-small { gap: 0.75rem; }
.pb-columns.pb-gap-medium { gap: 1.5rem; }
.pb-columns.pb-gap-large { gap: 2.5rem; }
.pb-columns .pb-col > *:first-child { margin-top: 0; }

/* When a column carries a custom border (inline border-* styles from the column
   border editor), add a little inner padding so content isn't flush against the
   line. Harmless for columns without a border. */
.pb-columns .pb-col[style*="border"] { padding: 0.85rem 1rem; }

/* Lines between columns: stretch all columns to equal height, then draw a rule
   in the gap(s). "all" borders every column after the first; a single line
   instead tags one specific column (.pb-col-line) with the same border. The
   border sits half-way into the gap so it reads as a separator centred between
   the two columns. */
.pb-columns.pb-col-dividers { align-items: stretch; }
.pb-columns.pb-col-dividers.pb-gap-none   { --pb-col-gap: 0; }
.pb-columns.pb-col-dividers.pb-gap-small  { --pb-col-gap: 0.75rem; }
.pb-columns.pb-col-dividers.pb-gap-medium { --pb-col-gap: 1.5rem; }
.pb-columns.pb-col-dividers.pb-gap-large  { --pb-col-gap: 2.5rem; }

.pb-columns.pb-col-dividers-all > .pb-col + .pb-col,
.pb-columns.pb-col-dividers > .pb-col.pb-col-line {
    border-left: 1px solid var(--sf-border, #d1d5db);
    padding-left: calc(var(--pb-col-gap, 1.5rem) / 2);
    margin-left: calc(var(--pb-col-gap, 1.5rem) / -2 + 0.5px);
}
/* When stacked on mobile the vertical rule becomes a horizontal one on top. */
@media (max-width: 640px) {
    .pb-columns.pb-col-dividers.pb-stack > .pb-col.pb-col-line,
    .pb-columns.pb-col-dividers-all.pb-stack > .pb-col + .pb-col {
        border-left: 0;
        border-top: 1px solid var(--sf-border, #d1d5db);
        padding-left: 0;
        margin-left: 0;
        padding-top: 1rem;
        margin-top: 1rem;
    }
}

/* In the block-built header, a column holding header items (e.g. Account + Cart)
   lays them out in a single horizontal row that respects the items' alignment. */
.site-header-builder .pb-col {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.site-header-builder .pb-col > .pb-header-item { flex: 0 1 auto; }
/* When a column's items are right-aligned, push the row to the right edge. */
.site-header-builder .pb-col:has(> .pb-align-right) { justify-content: flex-end; }
.site-header-builder .pb-col:has(> .pb-align-center) { justify-content: center; }

.pb-product-grid { margin: 1.6rem 0; }
.pb-product-grid > .pb-heading { margin-bottom: 0.8rem; }

.pb-block-empty {
    border: 1px dashed var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 1.25rem 1.5rem;
    background: var(--sf-surface);
}
.pb-empty-note { margin: 0; color: var(--sf-muted); font-size: 0.92rem; }

@media (max-width: 760px) {
    .pb-columns.pb-stack { grid-template-columns: 1fr !important; gap: 0.9rem; }
}

/* ---- Page builder preview banner (admin live preview) ------------- */
.pb-preview-banner {
    background: #fef3c7;
    color: #92400e;
    border-bottom: 1px solid #fcd34d;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    text-align: center;
}

/* ============================ Wishlist ============================== */
/* The card needs a positioning context for the corner heart button. */
.product-card { position: relative; }

.wishlist-action { margin-top: 0.75rem; }
.wishlist-form { margin: 0; }
.wishlist-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.1rem;
    background: transparent;
    color: var(--sf-text);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.wishlist-btn:hover {
    border-color: var(--sf-danger);
    color: var(--sf-danger);
    text-decoration: none;
}
.wishlist-btn-on {
    border-color: var(--sf-danger);
    color: var(--sf-danger);
}
.wishlist-heart { font-size: 1.1rem; line-height: 1; }

/* Custom CTA buttons ("Watch demo", "Read docs") shown after add-to-cart / wishlist.
   Outline style matching the wishlist button; accent-coloured on hover. They wrap to
   multiple lines when there are several. */
.product-action-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.product-action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    background: transparent;
    color: var(--sf-text);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.product-action-link:hover {
    border-color: var(--sf-accent);
    color: var(--sf-accent);
    text-decoration: none;
}

/* Heart toggle on a product card (corner button) */
.card-wishlist {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 2;
    margin: 0;
}
.card-wishlist button,
.card-wishlist a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--sf-border);
    background: var(--sf-surface);
    color: var(--sf-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}
.card-wishlist button:hover,
.card-wishlist a:hover { color: var(--sf-danger); border-color: var(--sf-danger); }
.card-wishlist.is-on button { color: var(--sf-danger); border-color: var(--sf-danger); }

/* Wishlist account page */
.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 1.1rem;
}
.wishlist-card {
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.wishlist-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--sf-surface);
    overflow: hidden;
}
.wishlist-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wishlist-card-body { padding: 0.8rem 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.wishlist-card-category { font-size: 0.78rem; color: var(--sf-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.wishlist-card-name { margin: 0; font-size: 1rem; line-height: 1.3; }
.wishlist-card-name a { color: var(--sf-text); text-decoration: none; }
.wishlist-card-name a:hover { color: var(--sf-accent); }
.wishlist-card-price { font-weight: 700; margin-top: 0.15rem; }
.wishlist-card-price .price-from { color: var(--sf-muted); font-weight: 400; }
.wishlist-card-actions { display: flex; gap: 0.45rem; margin-top: 0.6rem; flex-wrap: wrap; }
.wishlist-card-actions form { margin: 0; }

/* ============================ Reviews =============================== */
/* ---- Star rating (read-only display) ---- */
.star-rating { display: inline-flex; align-items: center; gap: 0.35rem; }
.star-rating-stars { display: inline-flex; line-height: 1; font-size: 1rem; }
.star-rating .star { color: #f5a623; position: relative; width: 1em; }
.star-rating .star-empty { color: #d8dde3; }
.star-rating .star-half { color: #d8dde3; }
.star-rating .star-half-fill {
    position: absolute;
    left: 0; top: 0;
    width: 50%;
    overflow: hidden;
    color: #f5a623;
}
.star-rating-count { font-size: 0.85rem; color: var(--sf-muted); }
.star-rating-none { color: var(--sf-muted); }

.product-card-rating { margin: 0.15rem 0 0.1rem; }
.product-card-rating .star-rating-stars { font-size: 0.85rem; }

/* ---- Rating link under the product title ---- */
.product-rating-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.1rem 0 0.5rem;
    text-decoration: none;
}
.product-rating-link:hover { text-decoration: none; }
.product-rating-text { font-size: 0.88rem; color: var(--sf-accent); }

/* ---- Reviews section ---- */
.product-reviews-section { margin-top: 1.5rem; }
.product-reviews { padding-top: 0.5rem; }
.reviews-heading { margin: 0 0 1rem; font-size: 1.3rem; }

.reviews-summary {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
    padding: 1rem 1.2rem;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    margin-bottom: 1.4rem;
}
.reviews-summary-score { text-align: center; min-width: 130px; }
.reviews-avg { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.reviews-summary-score .star-rating { margin: 0.3rem 0; }
.reviews-count { font-size: 0.85rem; color: var(--sf-muted); }

.reviews-breakdown { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 0.25rem; }
.reviews-bar-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.reviews-bar-label { width: 3.2rem; color: var(--sf-muted); white-space: nowrap; }
.reviews-bar-track {
    flex: 1; height: 9px;
    background: var(--sf-border);
    border-radius: 999px;
    overflow: hidden;
}
.reviews-bar-fill { display: block; height: 100%; background: #f5a623; }
.reviews-bar-count { width: 1.8rem; text-align: right; color: var(--sf-muted); }

/* ---- Write-a-review block ---- */
.reviews-write { margin-bottom: 1.6rem; }
.reviews-write h3 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.reviews-signin, .reviews-locked, .reviews-empty {
    color: var(--sf-muted);
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 0.8rem 1rem;
    margin: 0 0 1rem;
}
.reviews-mine h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.reviews-edit { margin-top: 0.6rem; }
.reviews-edit summary { cursor: pointer; color: var(--sf-accent); font-size: 0.9rem; }
.reviews-edit[open] summary { margin-bottom: 0.8rem; }

/* ---- Review form ---- */
.review-form {
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 1rem 1.2rem;
    background: #fff;
}
.review-form-row { margin-bottom: 0.9rem; }
.review-form-label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.9rem; }
.review-form-input, .review-form-textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    font: inherit;
}
.review-form-textarea { resize: vertical; }
.review-form-actions { display: flex; align-items: center; gap: 0.8rem; }
.review-form-note { color: var(--sf-success); font-size: 0.85rem; }

/* ---- Star picker (interactive) ---- */
.star-picker {
    display: inline-flex;
    flex-direction: row-reverse;   /* radios listed 5→1; paint left→right as 1→5 */
    gap: 0.1rem;
}
.star-picker-input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
}
.star-picker-star {
    font-size: 1.7rem;
    line-height: 1;
    color: #d8dde3;
    cursor: pointer;
    transition: color 0.08s ease;
}
/* Hover/checked: the hovered star and all to its left (which are later
   siblings in the row-reverse order) light up. */
.star-picker-star:hover,
.star-picker-star:hover ~ .star-picker-star,
.star-picker-input:checked ~ .star-picker-star {
    color: #f5a623;
}
.star-picker-star.is-preview { color: #f5a623; }
.star-picker-input:focus-visible + .star-picker-star {
    outline: 2px solid var(--sf-accent);
    outline-offset: 2px;
}

/* ---- Review list ---- */
.reviews-list { list-style: none; margin: 0; padding: 0; }
.review-item {
    padding: 0.9rem 0;
    border-top: 1px solid var(--sf-border);
}
.review-item:first-child { border-top: 0; }
.review-item-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}
.review-verified { color: var(--sf-success); font-size: 0.8rem; font-weight: 600; }
.review-status { font-size: 0.78rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; }
.review-status-published { background: #e7f6ec; color: #1c7a3e; }
.review-status-awaiting-approval { background: #fef3e0; color: #9a6400; }
.review-status-not-approved { background: #fdeaea; color: #b3261e; }
.review-item-title { font-weight: 700; margin-bottom: 0.2rem; }
.review-item-body { margin: 0 0 0.35rem; white-space: pre-wrap; }
.review-item-meta { font-size: 0.8rem; color: var(--sf-muted); }

/* ------------------------------------------------------------------ *
 * Product Grid block — visible-count scroller (grid + carousel)
 *
 * Both layouts show exactly N products at a time (--pb-visible) and reach the
 * rest by scrolling. Grid keeps a native scrollbar; carousel hides it and uses
 * prev/next arrows that appear only on hover so they don't take up space.
 * Orientation switches the scroll axis.
 * ------------------------------------------------------------------ */
.pb-products { position: relative; --pb-visible: 3; --pb-gap: 1.25rem; }

.pb-products-viewport {
    position: relative;
    display: flex;
    align-items: center;
}

.pb-products-track {
    display: flex;
    gap: var(--pb-gap);
    flex: 1 1 auto;
    scroll-behavior: smooth;
}

/* Each product item is sized so exactly N fill the viewport. The gap is shared
   between items, so we subtract (N-1) gaps before dividing. */
.pb-products-item {
    box-sizing: border-box;
    flex: 0 0 auto;
}
.pb-products-item > .product-card { height: 100%; }

/* ---- Horizontal orientation (default) ---- */
.pb-products-horizontal .pb-products-track {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    /* The cards lift on :hover (translateY(-2px) + shadow). overflow-y:hidden would
       clip that top edge — including the hover border — so reserve a few px of
       vertical room and pull it back with a negative margin to stay layout-neutral. */
    padding: 6px 0;
    margin: -6px 0;
}
.pb-products-horizontal .pb-products-item {
    flex-basis: calc((100% - (var(--pb-visible) - 1) * var(--pb-gap)) / var(--pb-visible));
    max-width: calc((100% - (var(--pb-visible) - 1) * var(--pb-gap)) / var(--pb-visible));
    scroll-snap-align: start;
}

/* ---- Vertical orientation ---- */
.pb-products-vertical .pb-products-track {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y proximity;
    /* Height = N rows. Rows are auto-height, so cap the viewport to N items via
       max-height using a reasonable row size; items keep their natural height
       and the scrollbar handles overflow. */
    max-height: calc(var(--pb-visible) * 360px + (var(--pb-visible) - 1) * var(--pb-gap));
}
.pb-products-vertical .pb-products-item {
    width: 100%;
    scroll-snap-align: start;
}

/* ---- Grid layout: keep a visible scrollbar, no arrows ---- */
.pb-products-scroll .pb-carousel-btn { display: none; }
.pb-products-scroll .pb-products-track { scrollbar-width: thin; }

/* ---- Carousel layout: hide scrollbar, show arrows on hover ---- */
.pb-products-carousel .pb-products-track {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pb-products-carousel .pb-products-track::-webkit-scrollbar { display: none; }

/* Arrow buttons — absolutely positioned over the viewport edges, hidden until
   the block is hovered (or an arrow is focused for keyboard users). */
.pb-carousel-btn {
    position: absolute;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: 1px solid var(--sf-border);
    border-radius: 999px;
    background: white;
    color: var(--sf-text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.pb-products-carousel:hover .pb-carousel-btn,
.pb-carousel-btn:focus-visible { opacity: 1; }
.pb-carousel-btn:hover { background: var(--sf-accent); color: white; }
.pb-carousel-btn:disabled { opacity: 0 !important; cursor: default; }

/* Horizontal arrow placement: left / right, vertically centred. */
.pb-products-horizontal .pb-carousel-prev { left: -6px;  top: 50%; transform: translateY(-50%); }
.pb-products-horizontal .pb-carousel-next { right: -6px; top: 50%; transform: translateY(-50%); }

/* Vertical arrow placement: top / bottom, horizontally centred, glyph rotated. */
.pb-products-vertical .pb-carousel-prev { top: -6px;    left: 50%; transform: translateX(-50%) rotate(90deg); }
.pb-products-vertical .pb-carousel-next { bottom: -6px; left: 50%; transform: translateX(-50%) rotate(90deg); }

/* When everything already fits, the script flags the block — keep arrows hidden. */
.pb-carousel-static .pb-carousel-btn { display: none; }

/* On small screens, collapse the horizontal product scroller into a true
   vertical stack — one product per row, no sideways scrolling. We switch the
   track to a column, give each item full width, and disable horizontal overflow
   so the carousel behaves like a normal responsive grid on phones. */
@media (max-width: 600px) {
    .pb-products-horizontal .pb-products-track {
        flex-direction: column;
        overflow-x: hidden;
        scroll-snap-type: none;
    }
    .pb-products-horizontal .pb-products-item {
        flex-basis: auto;
        max-width: none;
        width: 100%;
    }
    /* Arrow buttons are meaningless once stacked vertically. */
    .pb-products-horizontal .pb-carousel-btn { display: none; }
}

/* ------------------------------------------------------------------ *
 * Embedded forms (page-builder Form block)
 * ------------------------------------------------------------------ */
.pb-form { margin: 1.5rem 0; }
.kc-form { max-width: 640px; }

/* Page-builder footer wrapper (Appearance → Footer). Blocks render left-aligned
   and inherit the footer's muted colour rather than the page's centered defaults. */
.footer-builder { text-align: left; }
.footer-builder .pb-heading { text-align: left; }
.footer-builder .pb-menu { margin: 0; }
/* Tighten block spacing inside the footer: no margin above the first block or
   below the last, and a modest gap between stacked blocks (e.g. columns row →
   copyright line) so the footer doesn't feel airy. */
.footer-builder > *:first-child { margin-top: 0; }
.footer-builder > *:last-child { margin-bottom: 0; }
.footer-builder > .pb-columns { margin: 0.5rem 0; }
.footer-builder > .pb-richtext { margin: 0.5rem 0; }
/* Footer-builder links match the surrounding footer text at rest and only turn
   the accent colour on hover (overrides the inherited .footer-content a accent).
   This is the intended default look for the builder-authored copyright line. */
.footer-builder a { color: inherit; }
.footer-builder a:hover { color: var(--sf-accent); text-decoration: underline; }

/* -------------- Page-builder: Menu block -------------- */
.pb-menu { margin: 1rem 0; }
.pb-menu-heading { margin: 0 0 0.6rem; }
.pb-menu-list { list-style: none; margin: 0; padding: 0; }
.pb-menu-sublist { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.pb-menu-link { color: inherit; text-decoration: none; }
.pb-menu-link:hover { text-decoration: underline; }
.pb-menu-sublink { opacity: 0.8; font-size: 0.92em; }

/* Vertical (default) — a stacked list of links; ideal for footer link columns. */
.pb-menu-vertical .pb-menu-item { margin: 0 0 0.4rem; }
.pb-menu-vertical .pb-menu-subitem { margin: 0.2rem 0 0 0.8rem; }

/* Horizontal — top-level links flow in a wrapping row; a parent that has
   children reveals them as a dropdown card on hover/focus (not inline). */
.pb-menu-horizontal .pb-menu-list { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.pb-menu-horizontal .pb-menu-item { margin: 0; position: relative; }

/* Caret affordance on parents that have a submenu. */
.pb-menu-horizontal .pb-menu-item.pb-has-children > .pb-menu-link::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-left: 0.35em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.12em) rotate(45deg);
    opacity: 0.6;
}

/* The dropdown card — hidden until the parent item is hovered or focused. */
.pb-menu-horizontal .pb-menu-sublist {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    margin: 0;
    padding: 0.35rem;
    background: var(--sf-surface, #fff);
    border: 1px solid var(--sf-border, #e5e7eb);
    border-radius: var(--sf-radius, 8px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}
.pb-menu-horizontal .pb-menu-item:hover > .pb-menu-sublist,
.pb-menu-horizontal .pb-menu-item:focus-within > .pb-menu-sublist {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.pb-menu-horizontal .pb-menu-subitem { margin: 0; width: 100%; }
.pb-menu-horizontal .pb-menu-sublink {
    display: block;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    opacity: 1;
    white-space: nowrap;
}
.pb-menu-horizontal .pb-menu-sublink:hover {
    background: rgba(0,0,0,0.05);
    text-decoration: none;
}

/* ---- Menu alignment ----
   Horizontal layout aligns the row of links left or right; vertical layout
   pushes the stacked list to the top or bottom of whatever height the block
   is given (e.g. in a header row or column). */
.pb-menu-horizontal.pb-menu-align-left  .pb-menu-list { justify-content: flex-start; }
.pb-menu-horizontal.pb-menu-align-right .pb-menu-list { justify-content: flex-end; }

/* ---- Auto category-navigation display modes ----
   Per-category NavDisplay adds one of these classes to the parent <li>. The
   default (dropdown) needs no override — it inherits the standard hover panel
   above. Flat keeps children permanently visible beneath the parent; Mega turns
   the panel into a wide multi-column grid. All scoped to horizontal menus, since
   that is where the storefront category nav renders. */

/* Flat: children are always shown, stacked directly under the parent link, with
   no hover panel and no caret. */
.pb-menu-horizontal .pb-menu-item.pb-menu-dd-flat { align-self: flex-start; }
.pb-menu-horizontal .pb-menu-item.pb-menu-dd-flat > .pb-menu-link::after { content: none; }
.pb-menu-horizontal .pb-menu-dd-flat > .pb-menu-sublist {
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 0.2rem 0 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.pb-menu-horizontal .pb-menu-dd-flat > .pb-menu-sublist .pb-menu-sublink {
    padding: 0.2rem 0;
    white-space: normal;
}
.pb-menu-horizontal .pb-menu-dd-flat > .pb-menu-sublist .pb-menu-sublink:hover {
    background: none;
    text-decoration: underline;
}

/* Mega: the hover panel becomes a wide multi-column grid so a large category
   with many sub-categories / products reads as a proper mega-menu. */
.pb-menu-horizontal .pb-menu-dd-mega > .pb-menu-sublist {
    display: grid;
    grid-template-columns: repeat(var(--pb-mega-cols, 3), minmax(160px, 1fr));
    gap: 0.15rem 0.75rem;
    min-width: min(680px, 90vw);
    padding: 0.75rem;
}
/* Keep the mega panel from spilling off the right edge when its parent sits near
   the end of the bar. */
.pb-menu-horizontal .pb-menu-item.pb-menu-dd-mega { position: relative; }
.pb-menu-horizontal.pb-menu-align-right .pb-menu-dd-mega > .pb-menu-sublist { left: auto; right: 0; }
.pb-menu-horizontal .pb-menu-dd-mega > .pb-menu-sublist .pb-menu-sublink { white-space: normal; }

@media (max-width: 720px) {
    /* On narrow screens every mode collapses to the same stacked accordion the
       hamburger/mobile contexts already define, so mega's grid + fixed width are
       neutralised here. */
    .pb-menu-horizontal .pb-menu-dd-mega > .pb-menu-sublist {
        grid-template-columns: 1fr;
        min-width: 0;
    }
}

.pb-menu-vertical { display: flex; flex-direction: column; height: 100%; }
.pb-menu-vertical.pb-menu-align-top    { justify-content: flex-start; }
.pb-menu-vertical.pb-menu-align-bottom { justify-content: flex-end; }

.kc-form-heading { margin: 0 0 0.4rem; }
.kc-form-desc { margin: 0 0 1rem; color: var(--sf-muted, #667); }

.kc-form-row { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.kc-form-row > label { font-weight: 600; font-size: 0.95rem; }
.kc-form-row input[type="text"],
.kc-form-row input[type="email"],
.kc-form-row input[type="tel"],
.kc-form-row input[type="number"],
.kc-form-row select,
.kc-form-row textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--sf-border, #ccd2da);
    border-radius: var(--sf-radius, 8px);
    font: inherit;
    background: #fff;
    color: var(--sf-text, #1a1a1a);
}
.kc-form-row textarea { resize: vertical; }
.kc-form-row input:focus,
.kc-form-row select:focus,
.kc-form-row textarea:focus {
    outline: none;
    border-color: var(--sf-accent, #2b6cb0);
    box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.15);
}

.kc-form-row-check { flex-direction: row; }
.kc-check-label { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 500; cursor: pointer; }
.kc-check-label input { margin-top: 0.2rem; }

.kc-req { color: #c0392b; }
.kc-form-actions { margin-top: 0.5rem; }

/* ---- Merchandising strips (upsell / related / cross-sell) ---- */
.merch-strip {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border, #e5e7eb);
}
.merch-strip-title {
    font-size: 1.15rem;
    margin: 0 0 1.1rem;
}
.merch-strip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 1.25rem;
}
/* On the product page the upsell strip gets a subtle highlight to stand out
   from the softer "related" strip below it. */
.merch-upsells .merch-strip-title::before {
    content: "★ ";
    color: var(--accent, #2563eb);
}
.merch-crosssells {
    margin-top: 2rem;
}

/* ============================================================
   Page-builder header/footer — mobile options (menu hamburger)
   plus the desktop/mobile header swap. Desktop is unchanged;
   the hamburger rules are gated to <=720px.
   ============================================================ */
@media (max-width: 720px) {
    /* ---- Menu: hamburger on mobile ---- */
    /* Hamburger mode: show the toggle button, collapse the list into a dropdown. */
    .pb-menu.pb-menu-mobile-hamburger { position: relative; }
    .pb-menu.pb-menu-mobile-hamburger .pb-menu-toggle { display: inline-flex; }
    .pb-menu.pb-menu-mobile-hamburger .pb-menu-list {
        display: none;
        position: absolute;
        top: calc(100% + 0.4rem);
        min-width: 200px;
        flex-direction: column;
        gap: 0;
        background: var(--sf-surface, #fff);
        border: 1px solid var(--sf-border, #e5e7eb);
        border-radius: var(--sf-radius, 8px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        padding: 0.35rem;
        z-index: 60;
    }
    .pb-menu.pb-menu-mobile-hamburger.pb-menu-mobile-right .pb-menu-list { right: 0; }
    .pb-menu.pb-menu-mobile-hamburger.pb-menu-mobile-left  .pb-menu-list { left: 0; }
    /* Open state (toggled by JS). */
    .pb-menu.pb-menu-mobile-hamburger.is-open .pb-menu-list { display: flex; }
    .pb-menu.pb-menu-mobile-hamburger .pb-menu-item { width: 100%; }
    .pb-menu.pb-menu-mobile-hamburger .pb-menu-link {
        display: block;
        padding: 0.5rem 0.6rem;
        border-radius: 6px;
    }
    .pb-menu.pb-menu-mobile-hamburger .pb-menu-link:hover { background: rgba(0,0,0,0.05); }
    .pb-menu.pb-menu-mobile-hamburger .pb-menu-sublist {
        /* Revert the desktop dropdown card back to a static, indented list inside
           the collapsed hamburger panel. */
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        margin: 0 0 0 0.6rem;
        padding-left: 0.4rem;
        border-left: 2px solid var(--sf-border, #e5e7eb);
    }
    /* Hide the desktop caret in the hamburger panel. */
    .pb-menu.pb-menu-mobile-hamburger .pb-menu-item.pb-has-children > .pb-menu-link::after {
        display: none;
    }
}

/* The hamburger toggle button — hidden on desktop, revealed on mobile above. */
.pb-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--sf-surface, #fff);
    border: 1px solid var(--sf-border, #e5e7eb);
    border-radius: var(--sf-radius, 8px);
    cursor: pointer;
}
.pb-menu-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    margin: 0 auto;
    background: var(--sf-text, #111827);
    transition: transform 0.18s, opacity 0.18s;
}
.pb-menu.is-open .pb-menu-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pb-menu.is-open .pb-menu-toggle-bar:nth-child(2) { opacity: 0; }
.pb-menu.is-open .pb-menu-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   Mobile Header swap (Appearance → Mobile Header)
   When a Mobile Header layout is enabled, the storefront renders TWO headers:
   the normal one and a mobile-specific one. We show exactly one at a time —
   desktop header above 720px, mobile header at/below it. When no mobile header
   is enabled, .site-header-mobile is never emitted and the normal header simply
   stays responsive on its own.
   ============================================================ */
.site-header-mobile { display: none; }
@media (max-width: 720px) {
    /* Only swap when a mobile header is actually present (the body flag is set by
       the layout). This keeps stores without a mobile header fully unaffected. */
    body.has-mobile-header .site-header-desktop { display: none; }
    body.has-mobile-header .site-header-mobile { display: block; }
}

/* ------------------------------------------------------------------
   Mobile header layout
   The mobile header reuses the page-builder blocks, but a phone needs a single
   tidy row — not the rigid 2x50% grid the columns block uses elsewhere. So
   inside .site-header-mobile we override the columns block to a flex row:
   each column shrinks to its content, and a column whose item is right-aligned
   (the hamburger) is pushed to the far right. This keeps the block model intact
   (admins still edit blocks) while making the row look right at any phone width.
   Scoped to .site-header-mobile only — the desktop header is untouched.
   ------------------------------------------------------------------ */
.site-header-mobile .site-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
/* The columns row (logo | hamburger) takes the full first line; anything after it
   (e.g. a Search block) wraps onto its own full-width line below. */
.site-header-mobile .site-header-inner > .pb-columns { flex: 1 1 100%; }
/* A top-level block after the columns row — the Search block is a direct
   .pb-header-item child of the header inner — spans the full width as row two. */
.site-header-mobile .site-header-inner > .pb-header-item {
    flex: 1 1 100%;
    width: 100%;
}
.site-header-mobile .site-header-inner > .pb-header-item .pb-search {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;       /* desktop caps search at 480px; let it fill on mobile */
}
/* Columns block becomes a full-width flex row instead of a grid. */
.site-header-mobile .pb-columns {
    display: flex !important;
    flex: 1 1 100%;
    width: 100%;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    grid-template-columns: none !important; /* defeat the desktop grid template */
}
/* Every column sizes to its own content — no equal-fraction stretching and no
   shrinking that would collapse the logo. */
.site-header-mobile .pb-columns > .pb-col {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
/* The hamburger / right-aligned column hugs the right edge (space-between already
   does most of this; margin-left:auto is a belt-and-braces for >2 columns). */
.site-header-mobile .pb-columns > .pb-col:has(.pb-align-right),
.site-header-mobile .pb-columns > .pb-col:last-child { margin-left: auto; }

/* The logo's alignment wrapper shouldn't stretch the image. */
.site-header-mobile .pb-header-item { flex: 0 0 auto; }

/* Logo keeps a fixed, sensible phone height and its aspect ratio. We override the
   inline height:60px the logo block emits, but with a CONCRETE height (not auto)
   so the image never collapses when its flex cell is content-sized. */
.site-header-mobile .pb-logo { display: inline-flex; align-items: center; }
.site-header-mobile .site-logo {
    height: 40px !important;
    width: auto !important;
    max-width: none;
    object-fit: contain;
}
.site-header-mobile .brand-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.1rem;
}

/* Hamburger menu sits inline (no full-width strip) in the mobile header, and its
   dropdown opens below the toggle. The toggle button is always visible here.
   The desktop .site-header-builder .pb-menu rules make the menu a full-width 100vw
   grey strip — we must undo all of that here so the menu is just a compact toggle. */
.site-header-mobile .pb-menu {
    position: relative;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
}
.site-header-mobile .pb-menu .pb-menu-toggle { display: inline-flex; }
/* On a phone the menu list is a dropdown panel regardless of the global breakpoint,
   so a hamburger menu in the mobile header behaves the same way the swap intends. */
.site-header-mobile .pb-menu.pb-menu-mobile-hamburger .pb-menu-list {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    min-width: 200px;
    max-width: none;
    margin: 0;
    flex-direction: column;
    background: var(--sf-surface, #fff);
    border: 1px solid var(--sf-border, #e5e7eb);
    border-radius: var(--sf-radius, 8px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 0.35rem;
    z-index: 60;
}
.site-header-mobile .pb-menu.pb-menu-mobile-hamburger.pb-menu-mobile-right .pb-menu-list { right: 0; }
.site-header-mobile .pb-menu.pb-menu-mobile-hamburger.pb-menu-mobile-left  .pb-menu-list { left: 0; }
.site-header-mobile .pb-menu.pb-menu-mobile-hamburger.is-open .pb-menu-list { display: flex; }
.site-header-mobile .pb-menu .pb-menu-item { width: 100%; }
/* Sub-links revert to a static indented list inside the mobile dropdown panel
   (undo the desktop absolute dropdown card). */
.site-header-mobile .pb-menu .pb-menu-sublist {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 0 0.6rem;
    padding-left: 0.4rem;
    border-left: 2px solid var(--sf-border, #e5e7eb);
}
.site-header-mobile .pb-menu .pb-menu-item.pb-has-children > .pb-menu-link::after { display: none; }
.site-header-mobile .pb-menu .pb-menu-sublink { display: block; padding: 0.45rem 0.6rem; }

/* ===================================================================
   Language switcher block (.pb-langswitch) — a header dropdown listing
   the enabled languages. Mirrors the lightweight chrome of the cart/account
   header items. Progressive: with JS off the menu stays visible (no .is-open
   gating in the no-JS fallback below).
   =================================================================== */
.pb-langswitch { position: relative; display: inline-flex; }
.pb-langswitch-toggle {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: none; border: 1px solid var(--sf-border, #e5e7eb);
    border-radius: 999px; padding: 0.32rem 0.7rem;
    font: inherit; color: inherit; cursor: pointer; line-height: 1;
}
.pb-langswitch-toggle:hover { border-color: var(--sf-accent, #6366f1); }
.pb-langswitch-icon { height: 16px; width: auto; border-radius: 2px; display: inline-block; vertical-align: middle; }
.pb-langswitch-label { white-space: nowrap; }
.pb-langswitch-caret { font-size: 0.7em; opacity: 0.7; }

.pb-langswitch-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
    min-width: 160px; margin: 0; padding: 0.35rem; list-style: none;
    background: var(--sf-surface, #fff);
    border: 1px solid var(--sf-border, #e5e7eb);
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    display: none;
}
.pb-langswitch.is-open .pb-langswitch-menu { display: block; }
.pb-langswitch-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.6rem; border-radius: 7px;
    text-decoration: none; color: var(--sf-text, #1f2937); white-space: nowrap;
}
.pb-langswitch-item:hover { background: var(--sf-surface-alt, #f3f4f6); }
.pb-langswitch-item.is-active { font-weight: 600; color: var(--sf-accent, #6366f1); }

/* Builder preview placeholder when the switcher has nothing to show yet. */
.pb-langswitch-placeholder {
    color: var(--sf-muted, #6b7280); font-size: 0.85rem;
    border: 1px dashed var(--sf-border, #d1d5db); border-radius: 8px;
    padding: 0.4rem 0.7rem;
}
.pb-langswitch-placeholder small { opacity: 0.75; }

/* No-JS fallback: if the toggle never gets wired, reveal the menu inline so
   language choice still works. (When JS runs, .is-open controls visibility.) */
.no-js .pb-langswitch-menu { position: static; display: block; box-shadow: none; border: none; padding: 0; }

/* Product-template blocks (product-page builder, Phase 2a).
   Builder-preview hint shown when a product block is placed on a template but
   no product is in scope (i.e. in the template editor's preview). */
.pb-product-placeholder {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    border: 1px dashed var(--sf-border, #d8dee4);
    border-radius: var(--sf-radius, 8px);
    background: rgba(0, 0, 0, 0.02);
    color: var(--sf-text, #1f2933);
}
.pb-product-placeholder small { opacity: 0.7; }
/* The full description block is plain rich HTML; give it readable spacing. */
.pb-product-description { line-height: 1.6; }

/* Product-template interactive blocks (Phase 2b). The price/options/add-to-cart/
   stock/wishlist blocks can be placed independently anywhere in a template, so
   give each a little vertical rhythm when standing alone. The inner controls keep
   their existing styles (.product-price, .option-picker, .add-to-cart-form, …). */
.pb-product-price,
.pb-product-variants,
.pb-product-addtocart,
.pb-product-stock,
.pb-product-wishlist { margin: 0.75rem 0; }
.pb-product-buy { display: flex; flex-direction: column; gap: 0.75rem; }

/* ---- Category pagination -------------------------------------------------
   Page navigation under the product grid. Matches the storefront token set
   (--sf-accent / --sf-border / --sf-radius). Wraps on small screens. */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 2rem 0 1rem;
}
.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: #fff;
    color: var(--sf-text);
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.pagination a.page-link:hover {
    border-color: var(--sf-accent);
    color: var(--sf-accent);
    text-decoration: none;
}
.pagination .page-link.is-current {
    background: var(--sf-accent);
    border-color: var(--sf-accent);
    color: #fff;
    font-weight: 600;
    cursor: default;
}
.pagination .page-link.is-disabled {
    color: var(--sf-muted);
    background: var(--sf-surface);
    cursor: default;
    opacity: 0.6;
}
.pagination .page-ellipsis {
    padding: 0 0.25rem;
    color: var(--sf-muted);
}
@media (max-width: 480px) {
    /* Keep the bar compact on phones — hide the numeric window, leave Prev/Next. */
    .pagination .page-link:not(.page-prev):not(.page-next):not(.is-current),
    .pagination .page-ellipsis { display: none; }
}

/* -------------- Standalone category blocks (breadcrumb / sort / pagination) -------------- */
/* These render the category's breadcrumb, sort dropdown and pager as independent
   page-builder blocks, so they can be placed anywhere (pager top/bottom/both). */
.pb-breadcrumb,
.pb-category-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--sf-muted);
    margin: 0.25rem 0 1rem;
}
.pb-breadcrumb a,
.pb-category-breadcrumb a { color: var(--sf-muted); text-decoration: none; }
.pb-breadcrumb a:hover,
.pb-category-breadcrumb a:hover { color: var(--sf-text); text-decoration: underline; }
.pb-breadcrumb .sep,
.pb-category-breadcrumb .sep { opacity: 0.6; }
.pb-breadcrumb .current,
.pb-category-breadcrumb .current { color: var(--sf-text); font-weight: 600; }

/* On CMS (page-builder) pages the generic ".cms-page-body a" accent-link rule
   (specificity 0,2,1) would otherwise repaint the breadcrumb's "Home" link blue.
   Re-assert the muted breadcrumb link colour here (equal specificity, later in the
   file) so a Breadcrumb block looks identical on product, category and CMS pages. */
.cms-page-body .pb-breadcrumb a,
.cms-page-body .pb-category-breadcrumb a { color: var(--sf-muted); }
.cms-page-body .pb-breadcrumb a:hover,
.cms-page-body .pb-category-breadcrumb a:hover { color: var(--sf-text); }

/* Wrappers span full width so the inner flex can left/center/right align. */
.pb-category-sort { display: block; width: 100%; margin: 0 0 1rem; }
.pb-category-sort .sort-control { width: 100%; }
.pb-category-pagination { display: block; width: 100%; }