/**
 * MHM2-724 — Category / product-listing redesign (Mediband_Shopby).
 * Ported from the approved mockup (.work/mockup-unpacked.html).
 * Scoped to .page-products (category + search). Brand tokens only.
 *
 * Sidebar / hero / trustbar / toolbar use the mockup's semantic classes
 * (emitted by our theme template overrides). The product grid restyles
 * Magento's native .products-grid / .product-item markup.
 */

/* Newsreader (variable) for the category H1 — not otherwise loaded on category pages */
@font-face {
    font-family: 'Newsreader';
    src: url('../fonts/newsreader/Newsreader-var.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --sb-bg: #f7f4ee;
    --sb-ink: #16202b;
    --sb-orange: #ef7622;
    --sb-orange-dk: #c85a17;
    --sb-muted: #67707a;
    --sb-muted2: #a7aeb5;
    --sb-hair: #eee7dc;
    --sb-hair2: #e2ddd3;
    --sb-green: #1f9d63;
    --sb-star: #ef9a22;
}

/* ---------- base / container ---------- */
/* keep the scrollbar gutter reserved on listing pages: when a filter shrinks
   the results below one screen the scrollbar would vanish and shift the whole
   page right (CLS) — stable gutter keeps the geometry identical */
html:has(body.page-products) { scrollbar-gutter: stable; }
.page-products.page-layout-1column .page-main { max-width: 1240px; margin-left: auto !important; margin-right: auto !important; padding-left: 28px; padding-right: 28px; }
.page-products .columns .column.main { padding-bottom: 0; }
.page-products { background: var(--sb-bg); }
.page-products .sb-wrap a { color: var(--sb-orange-dk); text-decoration: none; }
.page-products .sb-wrap a:hover { text-decoration: underline; }

/* ---------- breadcrumb ---------- */
.page-products .breadcrumbs { max-width: 1240px; margin: 0 auto; padding: 20px 28px 0 !important; }
.page-products .breadcrumbs .items { font: 600 12px Manrope, sans-serif; color: var(--sb-muted2); }
.page-products .breadcrumbs .item a { color: var(--sb-muted2); }
.page-products .breadcrumbs .item:not(:last-child):after { color: #c9c2b4; }

/* ---------- category H1 (Newsreader serif, per mockup hero) ---------- */
.page-products .category-description h1,
.page-products .page-title-wrapper .page-title { font: 500 34px/1.15 Newsreader, Georgia, serif !important; letter-spacing: -.02em; color: var(--sb-ink); margin: 0 0 4px; }
@media (max-width: 760px) { .page-products .category-description h1, .page-products .page-title-wrapper .page-title { font-size: 27px !important; } }

/* ---------- hero (collapsible category description) ---------- */
/* theme gives .category-view a 17px side margin — keep the hero on the same
   left edge as breadcrumb / trustbar / grid */
.page-products .category-view { margin-left: 0 !important; margin-right: 0 !important; }
.sb-hero { padding: 16px 0 8px; }
.sb-hero .htop { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.sb-hero h1 { margin: 0; font: 500 34px/1.15 Newsreader, Georgia, serif; letter-spacing: -.02em; color: var(--sb-ink); }
.sb-hero .harrow { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--sb-hair2); background: #fff; display: flex; align-items: center; justify-content: center; color: var(--sb-orange-dk); transition: transform .28s ease, border-color .14s, background .14s; animation: sb-harrowpulse 2.4s ease-out infinite; }
.sb-hero .htop:hover .harrow { border-color: var(--sb-orange); background: #fef6f0; animation: none; }
.sb-hero .htop:hover .harrow svg { animation: sb-harrowbob .7s ease-in-out infinite; }
.sb-hero .harrow svg { width: 16px; height: 16px; transition: transform .28s ease; }
.sb-hero.open .harrow { transform: rotate(180deg); animation: none; }
@keyframes sb-harrowpulse { 0% { box-shadow: 0 0 0 0 rgba(239,118,34,.42); } 70% { box-shadow: 0 0 0 9px rgba(239,118,34,0); } 100% { box-shadow: 0 0 0 0 rgba(239,118,34,0); } }
@keyframes sb-harrowbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(2.5px); } }
/* smooth expand/collapse: grid 0fr→1fr animates to auto height (no JS measuring),
   paired with a fade + gentle rise of the content */
.sb-hero .lead {
    width: 100%; display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1);
}
.sb-hero .lead-in {
    overflow: hidden; min-height: 0;
    font-size: 15px; line-height: 1.7; color: var(--sb-muted);
    opacity: 0; transform: translateY(-6px); visibility: hidden;
    transition: opacity .4s ease .05s, transform .5s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .5s;
}
.sb-hero .lead-in > :first-child { margin-top: 14px; }
.sb-hero.open .lead { grid-template-rows: 1fr; }
.sb-hero.open .lead-in {
    opacity: 1; transform: translateY(0); visibility: visible;
    transition: opacity .45s ease .1s, transform .5s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}
/* "Show less" control at the end of the expanded description */
.sb-hero .sb-lead-collapse {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
    background: none; border: 0; padding: 0; cursor: pointer;
    font: 700 13px Manrope, sans-serif; color: var(--sb-orange-dk);
}
.sb-hero .sb-lead-collapse .harrow { width: 30px; height: 30px; animation: none; }
.sb-hero .sb-lead-collapse .harrow svg { width: 14px; height: 14px; }
.sb-hero .sb-lead-collapse:hover .harrow { border-color: var(--sb-orange); background: #fef6f0; }
.sb-hero.open .sb-lead-collapse .harrow { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .sb-hero .harrow { animation: none; }
    .sb-hero .lead, .sb-hero .lead-in { transition: none; }
}

/* ---------- trustbar ---------- */
.sb-trustbar { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid #efe9df; border-bottom: 1px solid #efe9df; margin-top: 14px; font: 600 12.5px Manrope, sans-serif; color: var(--sb-muted); }
.sb-trustbar span { display: inline-flex; align-items: center; gap: 7px; }
.sb-trustbar svg { width: 15px; height: 15px; color: var(--sb-green); }
.sb-trustbar .star { color: var(--sb-star); }

/* ---------- layout grid (on .column.main: filter col1 | products col2) ---------- */
/* NO column-gap here — with any stray/implicit grid item it materialises as a
   ~30px dead strip on the right (PC/tablet). The 30px sidebar↔products gutter
   comes from .block.filter's padding-right instead (280 = 250 card + 30). */
.page-products .columns .column.main { display: grid; grid-template-columns: 280px 1fr; align-items: start; padding: 24px 0 60px; width: 100%; float: none; margin-left: 0 !important; margin-right: 0 !important; }
/* categories with NO layered-nav filters (.sb-fcard absent): drop the sidebar
   column and give the grid one extra product column (3-up → 4-up) */
.page-products .columns .column.main:not(:has(.sb-fcard)) { grid-template-columns: 1fr; }
.page-products .column.main:not(:has(.sb-fcard)) > .block.filter { display: none !important; }
.page-products .column.main:not(:has(.sb-fcard)) > .sb-main,
.page-products .column.main:not(:has(.sb-fcard)) > :not(.block.filter) { grid-column: 1 / -1; }
.page-products .column.main:not(:has(.sb-fcard)) .sb-filttoggle { display: none !important; }
.page-products .column.main:not(:has(.sb-fcard)) .products-grid .product-items,
.page-products .column.main:not(:has(.sb-fcard)) .products-grid .products.list.items { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) {
    .page-products .column.main:not(:has(.sb-fcard)) .products-grid .product-items,
    .page-products .column.main:not(:has(.sb-fcard)) .products-grid .products.list.items { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    .page-products .column.main:not(:has(.sb-fcard)) .products-grid .product-items,
    .page-products .column.main:not(:has(.sb-fcard)) .products-grid .products.list.items { grid-template-columns: repeat(2, 1fr); }
}
/* .block.filter IS the .sb-fcard itself — use margin (not padding) for the
   30px gutter so the card interior stays intact; ≤1000 rules zero it for the drawer */
.page-products .column.main > .block.filter { grid-column: 1; grid-row: 1 / span 99; position: sticky; top: 18px; align-self: start; margin-right: 30px; }
.page-products .column.main > .sb-main { grid-column: 2; min-width: 0; }
/* keep any other stray children (print link, hidden inputs, popups) out of col 1 */
.page-products .column.main > :not(.block.filter):not(.sb-main) { grid-column: 2; }

/* ---------- sidebar filters (.block.filter restyled to .fcard) ---------- */
.sb-fcard { background: #fff; border: 1px solid var(--sb-hair); border-radius: 16px; overflow: hidden; }
.sb-fcard > .sb-fcard-title { margin: 0; font: 800 11px Manrope, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--sb-ink); padding: 16px 18px 12px; }
.sb-fgroup { border-top: 1px solid #f2ede4; }
.sb-fgroup > summary { list-style: none; cursor: pointer; padding: 14px 18px; font: 700 13.5px Manrope, sans-serif; color: var(--sb-ink); display: flex; align-items: center; justify-content: space-between; }
.sb-fgroup > summary::-webkit-details-marker { display: none; }
.sb-fgroup > summary:after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--sb-muted2); border-bottom: 2px solid var(--sb-muted2); transform: rotate(45deg); transition: transform .2s; }
.sb-fgroup[open] > summary:after { transform: rotate(-135deg); }
.sb-fopts { padding: 0 18px 14px; display: flex; flex-direction: column; gap: 9px; }
.sb-fopt { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #4c565f; cursor: pointer; }
.sb-fopt .sb-cb { flex: none; width: 17px; height: 17px; border: 1.6px solid var(--sb-hair2); border-radius: 4px; background: #fff; position: relative; }
.sb-fopt.on .sb-cb { background: var(--sb-orange); border-color: var(--sb-orange); }
.sb-fopt.on .sb-cb:after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sb-fopt .n { flex: 1; }
.sb-fopt .c { font: 600 12px Manrope, sans-serif; color: #b7b0a3; }
/* force option text colour regardless of link :visited state */
.sb-fopt, .sb-fopt:link, .sb-fopt:visited, .sb-fopt:hover, .sb-fopt:active { color: #4c565f; text-decoration: none; }
.sb-fopt .n, .sb-fopt:visited .n { color: #4c565f; }
.sb-fopt:hover .n { color: var(--sb-ink); }

/* colour swatch grid */
.sb-swrow { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 18px 16px; }
.sb-sw { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--sb-hair2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sb-sw:hover { box-shadow: 0 0 0 2px var(--sb-ink); }
.sb-sw.on { box-shadow: 0 0 0 2px var(--sb-orange); }
.sb-sw .ck { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.5); transition: .14s; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.sb-sw.on .ck { opacity: 1; transform: scale(1); }
.sb-sw.light .ck { color: var(--sb-ink); filter: none; }

/* price dual-range slider */
.sb-pricerow { padding: 2px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.sb-priceval { display: flex; align-items: center; justify-content: space-between; font: 700 14px Manrope, sans-serif; color: var(--sb-ink); }
.sb-priceval span { display: inline-flex; flex-direction: column; gap: 1px; }
.sb-priceval span em { font: 600 10px Manrope, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--sb-muted2); font-style: normal; }
.sb-priceval span.hi { text-align: right; }
.sb-rslider { position: relative; height: 26px; }
.sb-rslider .track { position: absolute; top: 11px; left: 0; right: 0; height: 4px; border-radius: 3px; background: #e6e0d5; }
.sb-rslider .fill { position: absolute; top: 11px; height: 4px; border-radius: 3px; background: var(--sb-orange); }
.sb-rslider input[type=range],
.sb-rslider input[type=range]:focus,
.sb-rslider input[type=range]:focus-visible {
    position: absolute; top: 0; left: 0; width: 100%; height: 26px; margin: 0; pointer-events: none;
    -webkit-appearance: none; appearance: none;
    background: none !important; border: 0 !important; box-shadow: none !important; outline: none !important;
}
/* a11y focus ring lives on the THUMB (keyboard focus), not the invisible input */
.sb-rslider input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(239, 118, 34, .35), 0 2px 5px rgba(20, 32, 43, .2); }
.sb-rslider input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(239, 118, 34, .35), 0 2px 5px rgba(20, 32, 43, .2); }
.sb-rslider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2.5px solid var(--sb-orange); box-shadow: 0 2px 5px rgba(20,32,43,.2); cursor: pointer; }
.sb-rslider input[type=range]::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2.5px solid var(--sb-orange); box-shadow: 0 2px 5px rgba(20,32,43,.2); cursor: pointer; }

/* ---------- active filters ("Now Shopping by" chips) ----------
   The theme ships filter-current as a mobile-collapsible widget whose .items
   overflow the collapsed box (chips bled over the groups below). Re-lay it
   out fully: caption, wrapping pill chips with an ✕, Clear all underneath.
   Same layout on PC / tablet / mobile. */
.sb-active { display: block; padding: 12px 18px 14px; border-bottom: 1px solid #f2ede4; }
/* theme renders filter-current as a collapsed inline-block — force normal flow */
.sb-active .filter-current { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; margin: 0; float: none !important; width: auto !important; }
.sb-active .filter-current .block-subtitle {
    display: block; margin: 0 0 9px; padding: 0; cursor: default;
    font: 800 11px Manrope, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--sb-muted2);
}
.sb-active .filter-current .items {
    display: flex !important; flex-wrap: wrap; gap: 8px;
    position: static !important; height: auto !important; overflow: visible !important;
    margin: 0; padding: 0; list-style: none;
}
.sb-active .filter-current .item {
    position: relative; display: inline-flex; align-items: center; gap: 5px;
    margin: 0 !important; padding: 6px 30px 6px 12px; max-width: 100%;
    background: #fef6f0; border: 1px solid #f5d9c6; border-radius: 20px;
    font: 700 12px Manrope, sans-serif; color: var(--sb-orange-dk); line-height: 1.3;
}
.sb-active .filter-current .filter-label { color: var(--sb-muted); font-weight: 600; }
.sb-active .filter-current .filter-label::after { content: ":"; }
.sb-active .filter-current .filter-value { color: var(--sb-orange-dk); overflow-wrap: anywhere; }
/* ✕ remove button — replaces the theme's text link */
.sb-active .filter-current .action.remove {
    position: absolute !important; left: auto !important; right: 9px !important; top: 50% !important;
    transform: translateY(-50%) !important; margin: 0 !important; float: none !important;
    width: 14px; height: 14px; display: flex; align-items: center; justify-content: center;
    color: var(--sb-orange-dk); opacity: .7;
}
.sb-active .filter-current .action.remove:hover { opacity: 1; }
.sb-active .filter-current .action.remove span { display: none; }
.sb-active .filter-current .action.remove::before {
    content: ""; width: 10px; height: 10px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sb-active .sb-clear {
    display: inline-block; margin-top: 10px;
    font: 700 12px Manrope, sans-serif; color: var(--sb-orange-dk); text-decoration: underline; text-underline-offset: 2px;
}
.sb-active .sb-clear:hover { color: var(--sb-orange); }


/* ---------- toolbar ---------- */
.sb-main .toolbar.toolbar-products { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid var(--sb-hair); border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; position: static; }
.sb-main .toolbar-products .toolbar-amount { position: static; padding: 0; margin: 0; font: 700 13px Manrope, sans-serif; color: var(--sb-ink); order: 0; }
.sb-main .toolbar-products .toolbar-amount .toolbar-number { color: var(--sb-ink); }
.sb-main .toolbar-products .toolbar-amount .toolbar-products-label { color: var(--sb-muted2); font-weight: 600; margin-left: 4px; }
.sb-main .toolbar-products .sb-spacer { flex: 1; }
.sb-main .toolbar-products .toolbar-sorter.sorter { display: inline-flex !important; align-items: center; position: relative; padding: 0; margin: 0 0 0 auto; order: 3; }
.sb-main .toolbar-products .sorter-label, .sb-main .toolbar-products .sorter-action { display: none !important; }
.sb-main .toolbar-products .sorter-options { height: 42px; border: 1.5px solid var(--sb-hair2); border-radius: 10px; padding: 0 34px 0 13px; font: 700 13px Manrope, sans-serif; color: var(--sb-ink); background: #fff; cursor: pointer; appearance: none; -webkit-appearance: none; }
.sb-main .toolbar-products .sorter-options:focus { outline: none; border-color: var(--sb-orange); }
/* custom chevron on the sort select (mockup .selwrap::after) */
.sb-main .toolbar-products .toolbar-sorter.sorter::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--sb-orange-dk); border-bottom: 2px solid var(--sb-orange-dk); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.sb-main .toolbar-products .modes { order: 4; display: flex; gap: 4px; background: #f4f0e9; border-radius: 10px; padding: 4px; margin: 0; }
.sb-main .toolbar-products .modes .modes-label { display: none; }
.sb-main .toolbar-products .modes .modes-mode { width: 34px; height: 34px; border: none; background: none; border-radius: 7px; color: var(--sb-muted2); display: flex; align-items: center; justify-content: center; box-shadow: none; }
.sb-main .toolbar-products .modes .modes-mode.active { background: #fff; color: var(--sb-ink); box-shadow: 0 1px 3px rgba(20,32,43,.12); }
/* grid / list SVG glyphs (mockup .viewtoggle icons) via mask so they follow currentColor */
.sb-main .toolbar-products .modes .modes-mode span { display: none; }
.sb-main .toolbar-products .modes .modes-mode:before {
    display: block; content: ""; width: 16px; height: 16px; background: currentColor; margin: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sb-main .toolbar-products .modes .modes-mode.mode-list:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E");
}
/* hide the bottom toolbar (keep top only) */
.sb-main .products.wrapper ~ .toolbar.toolbar-products { display: none; }
/* mobile filters toggle */
.sb-filttoggle { display: none; }

/* ---------- product grid (Magento .products-grid → mockup .grid/.card) ---------- */
.page-products .column.main .products-grid .products.list.items,
.page-products .column.main .products-grid .product-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; justify-items: stretch; }
/* beat the theme's fixed .product-item width (was 69px) so cards fill the grid cell */
.page-products .column.main .products-grid .product-items > .product-item,
.page-products .column.main .products-grid .products.list.items > .product-item { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.sb-main .products-grid .product-item { background: #fff; border: 1px solid var(--sb-hair); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .16s, transform .16s; position: relative; }
/* remove the theme's coloured top-accent stripe (it lives on .product-item-info) */
.page-products .column.main :is(.products-grid, .products-list) .product-item { border-top: 1px solid var(--sb-hair) !important; box-shadow: none; }
.page-products .column.main :is(.products-grid, .products-list) .product-item .product-item-info { border-top: 0 !important; box-shadow: none !important; border-radius: 15px; background: transparent; }
.page-products .column.main :is(.products-grid, .products-list) .product-item::before,
.page-products .column.main :is(.products-grid, .products-list) .product-item::after,
.page-products .column.main :is(.products-grid, .products-list) .product-item .product-item-info::before,
.page-products .column.main :is(.products-grid, .products-list) .product-item .product-item-info::after { display: none !important; content: none !important; }
.sb-main .products-grid .product-item:hover { box-shadow: 0 16px 34px -18px rgba(20,32,43,.28); transform: translateY(-3px); }
.sb-main .products-grid .product-item-info { width: 100%; display: flex; flex-direction: column; flex: 1; }
.sb-main .products-grid .product-item-photo { position: relative; isolation: isolate; aspect-ratio: 1/1; background: #fbf9f6; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; }
.sb-main .products-grid .product-image-container { width: 100% !important; }
.sb-main .products-grid .product-image-photo { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* card body = fixed row grid so every line type aligns across ALL cards:
   1 review · 2 title (2-line clamp) · 3 price · 4 "as low as" · 5 button.
   Rows stay reserved even when a product has no reviews / no sub-line. */
.sb-main .products-grid .product-item-details {
    padding: 15px 16px 16px; flex: 1;
    display: grid; grid-template-columns: 100%;
    grid-template-rows: 17px 40px 24px 16px 1fr;
    row-gap: 7px;
}
.sb-main .products-grid .product-item-details > .product-reviews-summary { grid-row: 1; align-self: center; }
.sb-main .products-grid .product-item-details > .product-item-name { grid-row: 2; }
.sb-main .products-grid .product-item-details > .price-box { grid-row: 3 / span 2; align-self: start; }
.sb-main .products-grid .product-item-details > .product-item-inner { grid-row: 5; align-self: end; }
.sb-main .products-grid .product-item-name { margin: 0; }
.sb-main .products-grid .product-item-name a { font: 700 14px/1.4 Manrope, sans-serif; color: var(--sb-ink); display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 39px; width: 100% !important; max-width: none !important; margin: 0 !important; text-align: left; }
.sb-main .products-grid .product-reviews-summary { margin: 0; min-height: 15px; }
.sb-main .products-grid .price-box { margin: 0; }
.sb-main .products-grid .price-box .price { font: 800 17px Manrope, sans-serif; color: var(--sb-ink); letter-spacing: -.01em; }
.sb-main .products-grid .product-item-inner, .sb-main .products-grid .product-item-actions { margin-top: auto; }
.sb-main .products-grid .product-item-actions { padding-top: 10px; display: flex; gap: 8px; }
/* stretch the CTA through the wrapper chain (actions-primary > form > button);
   min-width:0 lets it SHRINK on narrow cards instead of overflowing the card */
.sb-main .products-grid .product-item-actions .actions-primary { flex: 1; display: flex; min-width: 0; }
.sb-main .products-grid .product-item-actions .actions-primary > form,
.sb-main .products-grid .product-item-actions .actions-primary > a { flex: 1; display: flex; min-width: 0; }
.sb-main .products-grid .product-item-actions .action.primary,
.sb-main .products-grid .product-item-actions .action.tocart,
.sb-main .products-grid .product-item-actions .action.customise { min-width: 0; max-width: 100%; padding: 0 10px; white-space: nowrap; overflow: hidden; }
.sb-main .products-grid .product-item-actions .action.primary,
.sb-main .products-grid .product-item-actions .action.tocart,
.sb-main .products-grid .product-item-actions .action.customise { flex: 1; height: 56px; border-radius: 11px; font: 800 13px Manrope, sans-serif; display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--sb-orange); color: #fff; border: 1.5px solid transparent; box-shadow: 0 8px 16px -8px rgba(239,118,34,.6); }
.sb-main .products-grid .product-item-actions .action.primary:hover { filter: brightness(.96); }

/* hide compare (not in design); wishlist becomes a heart button on the image */
.page-products .column.main :is(.products-grid, .products-list) .product-item .action.tocompare,
.page-products .column.main :is(.products-grid, .products-list) .product-item .product-item-actions .actions-secondary .split.button,
.page-products .column.main :is(.products-grid, .products-list) .product-item .moreinfo { display: none; }
.page-products .column.main :is(.products-grid, .products-list) .product-item .product-item-actions .actions-secondary {
    position: absolute; top: 10px; right: 10px; z-index: 3; margin: 0; padding: 0; display: block; }
.page-products .column.main :is(.products-grid, .products-list) .product-item .action.towishlist {
    display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.92); border: 1px solid var(--sb-hair); color: var(--sb-muted2); box-shadow: 0 1px 3px rgba(20,32,43,.08); }
.page-products .column.main :is(.products-grid, .products-list) .product-item .action.towishlist:before { font-size: 17px; line-height: 1; color: inherit; margin: 0; }
.page-products .column.main :is(.products-grid, .products-list) .product-item .action.towishlist:hover { color: #e0483d; border-color: #f3c7c1; }
.page-products .column.main :is(.products-grid, .products-list) .product-item .action.towishlist span { display: none; }

/* rating row: keep the star graphic, show the review count, hide the "Rating: N%" label */
.page-products .column.main :is(.products-grid, .products-list) .product-item .rating-summary .label { position: absolute; clip: rect(0,0,0,0); width: 1px; height: 1px; overflow: hidden; }
.page-products .column.main :is(.products-grid, .products-list) .product-item .product-reviews-summary { display: flex; align-items: center; gap: 6px; margin: 0; min-height: 15px; }
.page-products .column.main :is(.products-grid, .products-list) .product-item .reviews-actions,
.page-products .column.main :is(.products-grid, .products-list) .product-item .reviews-actions .action { font: 700 11.5px Manrope, sans-serif; color: #828b93; }

/* price (design: "From $3.38" bold on one line, small grey "As low as" under).
   Markup: .minimal-price-link.price > .from + .price-container > .price-label + .price-wrapper */
.page-products .column.main :is(.products-grid, .products-list) .product-item .price-box .price-label { display: block; font: 600 11px Manrope, sans-serif; color: var(--sb-muted2); letter-spacing: 0; margin-top: 2px; grid-row: 2; grid-column: 1 / -1; }
.page-products .column.main :is(.products-grid, .products-list) .product-item .price-box .minimal-price .price-from { display: inline; }
.page-products .column.main :is(.products-grid, .products-list) .product-item .price-box .minimal-price-link { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: baseline; justify-items: start; }
.page-products .column.main :is(.products-grid, .products-list) .product-item .price-box .minimal-price-link .from { grid-row: 1; font: 800 17px Manrope, sans-serif; color: var(--sb-ink); letter-spacing: -.01em; }
.page-products .column.main .products-list .product-item .price-box .minimal-price-link .from { font-size: 19px; }
.page-products .column.main :is(.products-grid, .products-list) .product-item .price-box .price-container { display: contents; }
.page-products .column.main :is(.products-grid, .products-list) .product-item .price-box .price-wrapper { grid-row: 1; }

/* details content: left-aligned, rating line ABOVE the product name (design order).
   NOTE: keep align-items:stretch (default) — the CTA buttons span the card. */
.page-products .column.main :is(.products-grid, .products-list) .product-item .product-item-details { text-align: left; }
.page-products .column.main :is(.products-grid, .products-list) .product-item .product-reviews-summary { order: -1; }

/* list cards carry only rating / name / price (design): hide description + review-add link */
.page-products .column.main .products-list .product-item .product-item-description,
.page-products .column.main .products-list .product-item .product.description,
.page-products .column.main :is(.products-grid, .products-list) .product-item .reviews-actions .action.add { display: none !important; }

/* Magetop print-catalogue button — not in the design */
.page-products .column.main > .block-buttonprint { display: none !important; }

/* grouped-product price: "Starting at" sub-line sits UNDER the price (design row 4) */
.page-products .column.main :is(.products-grid, .products-list) .product-item .price-box .minimal-price {
    display: flex; flex-direction: column-reverse; align-items: flex-start; margin: 0;
}

/* ---------- AJAX filtering: dim + spinner while loading, fly-in on swap ---------- */
.page-products .column.main > .sb-main { position: relative; }
.page-products .column.main.sb-ajax { pointer-events: none; }
.page-products .column.main.sb-ajax > .sb-main { opacity: .45; transition: opacity .2s ease; }
.page-products .column.main.sb-ajax > .block.filter { opacity: .6; transition: opacity .2s ease; }
.page-products .column.main.sb-ajax > .sb-main::after {
    content: ""; position: absolute; left: 50%; top: 180px; transform: translateX(-50%);
    width: 34px; height: 34px; border: 3px solid #efe9df; border-top-color: var(--sb-orange);
    border-radius: 50%; animation: sb-ajaxspin .7s linear infinite; z-index: 5;
}
@keyframes sb-ajaxspin { to { transform: translateX(-50%) rotate(360deg); } }
/* staggered card entrance after the swap (delay set inline per card) */
.page-products .product-item.sb-fly { opacity: 0; transform: translateY(14px); }
.page-products .product-item.sb-fly.sb-fly-in {
    opacity: 1; transform: none;
    transition: opacity .45s ease, transform .5s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
    .page-products .product-item.sb-fly { opacity: 1; transform: none; transition: none; }
    .page-products .column.main.sb-ajax > .sb-main::after { animation-duration: 1.4s; }
}

/* CTA icons (pencil for Customise, cart for Add to cart) */
.page-products .column.main :is(.products-grid, .products-list) .product-item .action.customise:before,
.page-products .column.main :is(.products-grid, .products-list) .product-item .action.tocart:before {
    content: ""; width: 15px; height: 15px; margin-right: 7px; background-repeat: no-repeat; background-position: center; background-size: contain; flex: none; }
.page-products .column.main :is(.products-grid, .products-list) .product-item .action.customise:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
.page-products .column.main :is(.products-grid, .products-list) .product-item .action.tocart:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E"); }

/* ---------- infinite-scroll zone ---------- */
.sb-main .sb-infzone { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sb-main .sb-infcount { font: 600 12.5px Manrope, sans-serif; color: var(--sb-muted2); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
    /* single column (base grid no longer carries any column-gap) */
    .page-products .columns .column.main { grid-template-columns: 1fr !important; column-gap: 0 !important; }
    /* drawer spans full width — drop the desktop sidebar gutter padding */
    .page-products .column.main > .block.filter { padding-right: 0 !important; }
    /* match the base selector's specificity so EVERY child collapses to the
       single column (the base rule pins strays to column 2) */
    .page-products .column.main > :not(.block.filter):not(.sb-main) { grid-column: 1 / -1; }
    /* sidebar becomes a drawer: hidden until .sb-filters-open toggled on .column.main */
    .page-products .column.main > .block.filter { grid-column: 1 / -1; grid-row: auto; position: static; display: none; }
    .page-products .column.main.sb-filters-open > .block.filter { display: block; margin-bottom: 18px; }
    /* theme's mobile filter styles stretch the block full-bleed once filters are
       applied (negative margins) — keep the drawer the same width as the grid */
    .page-products .column.main > .block.filter,
    .page-products .column.main > .block.filter .filter-content,
    .page-products .column.main > .block.filter .filter-current,
    .page-products .column.main > .block.filter .sb-fcard {
        margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: none !important;
    }
    .page-products .column.main > .sb-main,
    .page-products .column.main > :not(.block.filter) { grid-column: 1 / -1; }
    .sb-filttoggle { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 1.5px solid var(--sb-ink); background: var(--sb-ink); color: #fff; border-radius: 10px; font: 800 13px Manrope, sans-serif; cursor: pointer; order: 1; }
    .sb-filttoggle svg { width: 16px; height: 16px; }
}
@media (max-width: 760px) {
    .page-products .column.main .products-grid .product-items,
    .page-products .column.main .products-grid .products.list.items { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .sb-hero h1 { font-size: 27px; }
    .sb-trustbar { display: none; }
    .page-products.page-layout-1column .page-main { padding-left: 16px; padding-right: 16px; }
    /* CTA on 2-up cards: smaller type so ADD TO CART fits comfortably */
    .sb-main .products-grid .product-item-actions .action.primary,
    .sb-main .products-grid .product-item-actions .action.tocart,
    .sb-main .products-grid .product-item-actions .action.customise { font-size: 11.5px; gap: 5px; padding: 0 8px; }
    /* rating row: smaller stars + count so it always fits ONE row on 2-up cards */
    .page-products .column.main :is(.products-grid, .products-list) .product-item .product-reviews-summary { gap: 5px; flex-wrap: nowrap; min-width: 0; }
    .page-products .column.main :is(.products-grid, .products-list) .product-item .rating-summary { font-size: 12px; line-height: 1; margin: 0; }
    .page-products .column.main :is(.products-grid, .products-list) .product-item .rating-summary .rating-result::before,
    .page-products .column.main :is(.products-grid, .products-list) .product-item .rating-summary .rating-result > span::before { font-size: 12px; height: 12px; line-height: 12px; }
    .page-products .column.main :is(.products-grid, .products-list) .product-item .rating-summary .rating-result { width: auto; }
    .page-products .column.main :is(.products-grid, .products-list) .product-item .reviews-actions,
    .page-products .column.main :is(.products-grid, .products-list) .product-item .reviews-actions .action { font-size: 10.5px; white-space: nowrap; margin: 0; }
    /* toolbar: clean 2×2 — count | Filters / sort (stretch) | view toggle */
    .sb-main .toolbar.toolbar-products { display: grid; grid-template-columns: 1fr auto; row-gap: 12px; column-gap: 12px; align-items: center; }
    .sb-main .toolbar-products .toolbar-amount { grid-column: 1; grid-row: 1; justify-self: start; padding: 0 !important; margin: 0 !important; }
    .sb-main .toolbar-products .sb-filttoggle { grid-column: 2; grid-row: 1; justify-self: end; order: 0; }
    .sb-main .toolbar-products .toolbar-sorter.sorter { grid-column: 1; grid-row: 2; justify-self: stretch; width: 100%; margin: 0; }
    .sb-main .toolbar-products .sorter-options { width: 100%; }
    .sb-main .toolbar-products .modes { grid-column: 2; grid-row: 2; justify-self: end; }
}
@media (max-width: 460px) {
    .page-products .column.main .products-grid .product-items,
    .page-products .column.main .products-grid .products.list.items { grid-template-columns: 1fr 1fr; gap: 11px; }
    .page-products .column.main .products-grid .product-item-details { padding: 12px; }
    .page-products .column.main .products-grid .product-item-name a { font-size: 13px; }
    .page-products .column.main .products-grid .product-item-actions { flex-direction: column; }
    .page-products .column.main .products-grid .product-item-actions .action.primary { height: 58px; }
}

/* ---------- list view (mockup .grid.list, incl. 2026-07-23 design update:
   action button in a fixed 190px right rail on desktop/tablet, compact
   horizontal card on mobile ≤640) ---------- */
.page-products .column.main .products-list .product-items,
.page-products .column.main .products-list .products.list.items { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.page-products .column.main .products-list .product-items > .product-item,
.page-products .column.main .products-list .products.list.items > .product-item {
    width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important;
    background: #fff; border: 1px solid var(--sb-hair); border-radius: 16px; overflow: hidden; position: relative;
    transition: box-shadow .16s, transform .16s;
}
.page-products .column.main .products-list .product-item:hover { box-shadow: 0 16px 34px -18px rgba(20,32,43,.28); transform: translateY(-3px); }
.page-products .column.main .products-list .product-item-info { display: flex; flex-direction: row; width: 100%; }
.page-products .column.main .products-list .product-item-photo { position: relative; isolation: isolate; width: 170px; flex: none; aspect-ratio: 1/1; background: #fbf9f6; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; }
.page-products .column.main .products-list .product-image-container { width: 100% !important; }
.page-products .column.main .products-list .product-image-photo { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* body reserves the right rail so text never runs under the button */
.page-products .column.main .products-list .product-item-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; padding: 18px 240px 18px 22px; }
.page-products .column.main .products-list .product-item-name { margin: 0; }
.page-products .column.main .products-list .product-item-name a { font: 700 16px/1.4 Manrope, sans-serif; color: var(--sb-ink); display: -webkit-box !important; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; min-height: 0; width: 100% !important; max-width: none !important; margin: 0 !important; }
.page-products .column.main .products-list .product-reviews-summary { margin: 0; }
.page-products .column.main .products-list .price-box { margin: 0; }
.page-products .column.main .products-list .price-box .price { font: 800 19px Manrope, sans-serif; color: var(--sb-ink); letter-spacing: -.01em; }
/* primary action pulled out to the right rail, vertically centred, fixed 190px */
.page-products .column.main .products-list .product-item-inner { margin: 0; }
.page-products .column.main .products-list .product-item-actions { position: static; display: block; margin: 0; padding: 0; }
.page-products .column.main .products-list .product-item-actions .actions-primary {
    position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 190px; display: block;
}
.page-products .column.main .products-list .product-item-actions .actions-primary form,
.page-products .column.main .products-list .product-item-actions .actions-primary > * { width: 100%; }
.page-products .column.main .products-list .product-item-actions .action.primary,
.page-products .column.main .products-list .product-item-actions .action.tocart,
.page-products .column.main .products-list .product-item-actions .action.customise {
    flex: none; width: 100%; height: 56px; border-radius: 11px; font: 800 13px Manrope, sans-serif;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--sb-orange); color: #fff; border: 1.5px solid transparent; box-shadow: 0 8px 16px -8px rgba(239,118,34,.6);
}
.page-products .column.main .products-list .product-item-actions .action.primary:hover { filter: brightness(.96); }
@media (max-width: 640px) {
    /* compact horizontal card: 116px thumb, details right, button full-width below details */
    .page-products .column.main .products-list .product-item-photo { width: 116px; }
    .page-products .column.main .products-list .product-item-details { padding: 14px 14px 14px 16px; }
    .page-products .column.main .products-list .product-item-actions .actions-primary { position: static; transform: none; width: 100%; padding-top: 10px; }
    .page-products .column.main .products-list .product-item-name a { -webkit-line-clamp: 2; }
    .page-products .column.main .products-list .product-item-actions .action.primary { height: 58px; }
}

/* ---------- infinite-scroll zone (restyle mb-inf-* to mockup .infzone) ---------- */
.page-products .mb-inf-status { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 14px; font: 600 12.5px Manrope, sans-serif; color: var(--sb-muted2); }
.page-products .mb-inf-spin { width: 30px; height: 30px; border: 3px solid #efe9df; border-top-color: var(--sb-orange); border-radius: 50%; }
.page-products .mb-inf-end { display: flex; align-items: center; justify-content: center; gap: 9px; font: 700 12.5px Manrope, sans-serif; color: #828b93; }
.page-products .mb-inf-end::before { content: ""; width: 15px; height: 15px; flex: none; background: var(--sb-green); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.page-products .mb-inf-retry { height: 46px; padding: 0 26px; border: 1.5px solid var(--sb-ink); background: #fff; color: var(--sb-ink); border-radius: 11px; font: 800 13.5px Manrope, sans-serif; cursor: pointer; }
.page-products .mb-inf-retry:hover { background: var(--sb-ink); color: #fff; }

/* hero without a description body: title only, no pointer/arrow */
.sb-hero .htop.is-static { cursor: default; }