/* The public catalog (/catalog) and the page of one product (/catalog/products/...).
   It builds on the marketing site: the page header, the search field, the spinner, the feed and the card frame are the design library's
   own (marketing.css); this file adds the categories, the filters, what a product card says and the product page. */

/* ───────── The catalog page ───────── */

.catalog { --tile-line: rgba(15, 26, 20, .09); --field: #f9faf5; --search-gap: 28px; }
/* Its line is longer than the library's: it stays on one line where there is room (the shared 34em would wrap it and make the header taller). */
.catalog .page-head .lede { max-width: 44em; }

/* Under the page header: the search across the whole width, 28px above it (20px on a phone) like the design library; the same distance below it,
   before the filters and the results. Every filter, the categories too, is in the column beside the results. */
.catalog-top { padding-top: var(--search-gap); }
/* The "/" hint sits at the end of an empty field and gives way to what a person types. */
.catalog-search .search-kbd { position: absolute; top: 50%; right: 16px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 6px; background: #f0f1e9; color: var(--ink-2); font: 650 .75rem/1.5 var(--font); pointer-events: none; transform: translateY(-50%); }
.catalog-search .search-field:focus-within .search-kbd, .catalog-search .search-input:not(:placeholder-shown) ~ .search-kbd { display: none; }
@media (hover: none) { .catalog-search .search-kbd { display: none; } }

.catalog-pill {
    position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 15px; border: 1px solid rgba(15, 26, 20, .17); border-radius: 999px;
    background: var(--field); color: var(--ink); font-size: .9rem; font-weight: 650; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.catalog-pill:hover { border-color: var(--ink); background: #fff; }
.catalog-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.catalog-pill:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.catalog-pill:has(input:focus-visible) { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.catalog-pill-count { color: var(--ink-2); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.catalog-pill:has(input:checked) .catalog-pill-count { color: rgba(239, 240, 232, .72); }
.catalog-pill.is-empty { opacity: .5; }
.catalog-pill--small { min-height: 34px; padding: 0 13px; font-size: .875rem; }

.catalog-body { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(28px, 3.4vw, 56px); align-items: start; padding-block: var(--search-gap) clamp(56px, 7vw, 104px); }
.catalog-body--plain { grid-template-columns: minmax(0, 1fr); }
/* On a laptop-sized window the filters take a slimmer column, so the results keep three cards in a row. */
@media (min-width: 900px) and (max-width: 1180px) {
    .catalog-body:not(.catalog-body--plain) { grid-template-columns: 216px minmax(0, 1fr); gap: 28px; }
}
.catalog-body--plain .catalog-filters { display: none !important; }
.catalog-main { min-width: 0; }

/* The filters: a column beside the results on a wide screen (always there when there is anything to choose from), a sheet from the bottom on a narrow one.
   The rows of a list reach 8px past the text on both sides (their hover is a rounded patch) and a swatch's ring reaches further: the column carries that room as
   its own padding and takes it back with a negative margin, so nothing sticks out of the box that scrolls (a row used to stick out by 2px and a horizontal
   scrollbar showed under the swatches). It scrolls up and down only, when it is taller than the window. */
.catalog-filters {
    display: block; position: sticky; inset: auto; top: calc(var(--header-h) + 20px); width: auto; max-width: none; max-height: calc(100dvh - var(--header-h) - 40px);
    margin: 0 -8px; padding: 0 8px; overflow-x: hidden; overflow-y: auto; border: 0; background: transparent; color: inherit; scrollbar-width: thin;
}
/* The first group's heading stands level with the top of the cards. "Clear all" is on that same line, at its end beside the group's arrow, while any filter is on,
   and takes no room of its own: ticking the first box must not push the groups down, or the next box a person is aiming at has moved away from the pointer. */
.catalog-facet-list { position: relative; }
.catalog-facet-list > .catalog-facet:first-of-type summary { padding-top: 0; }
.catalog-facets-clear { position: absolute; top: 0; right: 30px; z-index: 1; margin: 0; line-height: 18px; }
.catalog-facets-clear a { display: block; margin: -8px; padding: 8px; font-size: .8125rem; font-weight: 650; }
.catalog-filters-head, .catalog-filters-foot { display: none; }
.catalog-facet { margin: 0 0 8px; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.catalog-facet:last-child { border-bottom: 0; }
.catalog-facet summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; color: var(--ink); font-size: .75rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; list-style: none; cursor: pointer; }
.catalog-facet summary::-webkit-details-marker { display: none; }
.catalog-facet summary svg { flex: none; color: var(--ink-2); transition: transform .18s; }
.catalog-facet:not([open]) summary svg { transform: rotate(-90deg); }
.catalog-facet summary:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: 4px; }
.catalog-facet-search {
    width: 100%; height: 40px; margin: 2px 0 8px; padding: 0 12px 0 36px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font: inherit; font-size: .875rem;
    background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='5' stroke='%234a574f' stroke-width='1.6'/%3E%3Cpath d='m11 11 3.5 3.5' stroke='%234a574f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 12px center;
}
.catalog-facet-search:focus { border-color: var(--accent-strong); outline: 2px solid rgba(42, 98, 68, .22); outline-offset: 0; }
.catalog-facet-list-items { display: grid; gap: 1px; }
.catalog-facet-list-items:not(.is-expanded):not(.is-searching) [data-extra] { display: none; }
.catalog-facet-toggle { margin-top: 4px; padding: 8px 0; border: 0; background: none; color: var(--accent-strong); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.catalog-facet-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.catalog-facet-pills { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.catalog-facet-pills li { position: relative; }
.catalog-check { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 40px; margin-inline: -8px; padding: 4px 8px 4px calc(8px + var(--depth, 0) * 20px); border-radius: 8px; font-size: .9375rem; cursor: pointer; transition: background .12s; }
.catalog-check:hover { background: rgba(15, 26, 20, .05); }
.catalog-check input { position: absolute; left: calc(8px + var(--depth, 0) * 20px); top: 50%; width: 20px; height: 20px; margin: -10px 0 0; opacity: 0; cursor: pointer; }
.catalog-check-box { display: block; width: 20px; height: 20px; border: 1.5px solid rgba(15, 26, 20, .4); border-radius: 6px; background: #fbfbf7; transition: background .12s, border-color .12s; }
.catalog-check-box::after { content: ""; display: block; width: 5px; height: 10px; margin: 2px 0 0 6px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .12s ease-out; }
.catalog-check input:checked + .catalog-check-box { border-color: var(--accent-strong); background: var(--accent-strong); }
.catalog-check input:checked + .catalog-check-box::after { transform: rotate(45deg) scale(1); }
.catalog-check input:focus-visible + .catalog-check-box { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.catalog-check:has(input:checked) .catalog-check-name { font-weight: 650; }
.catalog-check-name { overflow-wrap: anywhere; line-height: 1.3; }
.catalog-check-count { min-width: 26px; padding: 1px 7px; border-radius: 999px; background: rgba(15, 26, 20, .06); color: var(--ink-2); font-size: .75rem; font-weight: 650; font-variant-numeric: tabular-nums; text-align: center; }
.catalog-check.is-empty { opacity: .5; }
/* The colors: a grid of round swatches; a ticked one gets a ring, and its name and count are the tooltip and the label for a screen reader. */
.catalog-facet-swatches { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 2px 2px; }
.catalog-swatchbox { position: relative; display: block; cursor: pointer; }
.catalog-swatchbox input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.catalog-swatchbox-dot { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--swatch, var(--paper-2)); box-shadow: inset 0 0 0 1px rgba(15, 26, 20, .26); transition: box-shadow .15s, transform .15s; }
.catalog-swatchbox:hover .catalog-swatchbox-dot { transform: scale(1.08); }
.catalog-swatchbox input:checked + .catalog-swatchbox-dot { box-shadow: inset 0 0 0 1px rgba(15, 26, 20, .26), 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.catalog-swatchbox input:focus-visible + .catalog-swatchbox-dot { outline: 2px solid var(--accent-strong); outline-offset: 5px; }
.catalog-swatchbox.is-empty { opacity: .35; }
.catalog-apply { margin-top: 16px; }

/* On a narrow screen the column is a sheet, and this is its button above the results (the count of the results and their order are not shown). */
.catalog-mobilebar { display: none; }
.catalog-filters-toggle {
    display: none; position: relative; align-items: center; gap: 9px; height: 40px; padding: 0 15px; border: 1px solid rgba(15, 26, 20, .17); border-radius: 10px;
    background: var(--field); color: var(--ink); font: inherit; font-size: .9375rem; font-weight: 650; cursor: pointer;
}
.catalog-filters-toggle:hover { border-color: var(--ink); background: #fff; }
.catalog-filters-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .75rem; font-weight: 700; }

/* A product card: framed like the cards of the design library (the same border, corners and paper), the photo on white (a product shot is a
   photo on white; the catalog's photos are 4:5, so they fill the frame), the words under it and, pinned to the bottom of every card of a
   row, what the product comes in: its colors as dots and its sizes as chips. */
/* Every row is as tall as its own tallest card: a long name further down must not stretch the rows above it (and rows that load later must not move the ones on screen). */
.catalog-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 204px), 1fr)); grid-auto-rows: auto; gap: 24px; }
/* Beside the column of filters: three cards in a row on a laptop and a desktop (four were too small to look at; the photos are 4:5), two when the window
   is narrower than 1100px (they would be a little over 200px wide). Without the column (a catalog with nothing to choose from) the cards are wide enough
   on their own. */
@media (min-width: 900px) {
    .catalog-body:not(.catalog-body--plain) .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .catalog-body:not(.catalog-body--plain) .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.catalog-body--plain .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.catalog-card { transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease; }
.catalog-card:hover { border-color: rgba(15, 26, 20, .34); box-shadow: 0 18px 36px -24px rgba(15, 26, 20, .5); transform: translateY(-2px); }
.catalog-card .design-card-link { display: flex; flex-direction: column; }
.catalog-thumb { flex: none; background: #fff; }
.catalog-thumb img { padding: 2%; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.catalog-card:hover .catalog-thumb img { transform: scale(1.04); }
.catalog-noimage { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(145deg, #f7f8f2, #e8ebdf); color: var(--ink-2); font-size: .8125rem; }
.catalog-meta { display: flex; flex: 1 1 auto; flex-direction: column; padding: 14px 16px 16px; }
.catalog-meta .design-type { margin-bottom: 4px; overflow: hidden; font-weight: 700; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.catalog-name { display: -webkit-box; margin-bottom: 12px; overflow: hidden; font-size: 1.0625rem; font-weight: 700; line-height: 1.28; letter-spacing: -.012em; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-wrap: balance; }
.catalog-card .design-card-link:hover .design-name { color: var(--accent-strong); text-decoration: none; }
.catalog-facts { display: grid; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.catalog-colors, .catalog-sizes { margin: 0; }
.catalog-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 18px; }
.catalog-swatch { width: 16px; height: 16px; border-radius: 50%; background: var(--swatch, var(--paper-3)); box-shadow: inset 0 0 0 1px rgba(15, 26, 20, .22); }
.catalog-swatch-more { margin-left: 1px; color: var(--ink-2); font-size: .75rem; font-weight: 700; }
.catalog-fact-text { color: var(--ink-2); font-size: .8125rem; }
.catalog-size-list { display: flex; flex-wrap: wrap; gap: 4px; }
.catalog-size {
    display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px;
    background: #fff; color: var(--ink); font-size: .75rem; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.catalog-size--more { min-width: 0; padding-inline: 3px; border-color: transparent; background: transparent; color: var(--ink-2); }
[data-catalog-results].is-loading .design-thumb img { opacity: .5; }
[data-catalog-results].is-loading .design-thumb.is-loading img { opacity: 0; }
[data-catalog-results].is-loading .design-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: design-shimmer 1.35s ease-in-out infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    [data-catalog-results].is-loading .design-thumb::after { animation: none; background: rgba(255, 255, 255, .2); }
    .catalog-check-box::after, .catalog-card, .catalog-thumb img, .catalog-facet summary svg { transition: none; }
    .catalog-card:hover, .catalog-card:hover .catalog-thumb img { transform: none; }
    .catalog-swatchbox-dot { transition: none; }
    .catalog-swatchbox:hover .catalog-swatchbox-dot { transform: none; }
}

@media (max-width: 899px) {
    .catalog-body { grid-template-columns: minmax(0, 1fr); }
    .catalog-mobilebar { display: block; margin-bottom: 16px; }
    .catalog-mobilebar:has(.catalog-filters-toggle[hidden]) { display: none; }
    .catalog-filters-toggle { display: inline-flex; }
    .catalog-filters-toggle[hidden] { display: none; }

    /* Closed, the sheet is not there at all (the noscript rule on the page shows the filters when there is no script). */
    .catalog-filters:not([open]) { display: none; }
    .catalog-filters[open] {
        position: fixed; inset: auto 0 0 0; z-index: 60; display: flex; flex-direction: column; width: 100%; max-height: min(88dvh, 680px);
        margin: 0; padding: 0; overflow: hidden; border-radius: 20px 20px 0 0; background: var(--paper); box-shadow: 0 -14px 44px rgba(15, 26, 20, .28);
    }
    .catalog-filters::backdrop { background: rgba(15, 26, 20, .5); }
    .catalog-filters-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 6px; }
    .catalog-filters-head h2 { font-size: 1.125rem; font-weight: 750; }
    .catalog-filters-close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; }
    .catalog-filters-close:hover { background: var(--paper-2); }
    .catalog-facets { flex: 1 1 auto; padding: 4px 20px 16px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
    .catalog-check { min-height: 46px; }
    .catalog-swatchbox-dot { width: 38px; height: 38px; }
    .catalog-filters-foot { display: block; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); }
    .catalog-filters-foot .btn { width: 100%; }
}
/* The row under a product shows four products: four columns on a wide window, two on a narrow one, never a gap at the end of the row. */
.design-related .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) {
    .design-related .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .catalog { --search-gap: 20px; }
}
@media (max-width: 560px) {
    .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .catalog-meta { padding: 10px 11px 12px; }
    .catalog-name { margin-bottom: 10px; font-size: .9375rem; }
    .catalog-facts { gap: 7px; padding-top: 10px; }
    .catalog-swatches { gap: 4px; }
    .catalog-swatch { width: 15px; height: 15px; }
    .catalog-size { min-width: 24px; height: 21px; padding: 0 6px; font-size: .6875rem; }
    .catalog-card:hover { transform: none; }
}
/* The narrowest phones: four sizes still fit side by side in a card. */
@media (max-width: 360px) {
    .catalog-size-list { gap: 3px; }
    .catalog-size { min-width: 22px; padding: 0 5px; }
}

/* ───────── The page of one product ───────── */

.product { padding-block: 24px clamp(36px, 4vw, 56px); }
.product-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }

/* The gallery. The photos are 4:5, so the stage is 4:5 and the photo fills it: no padding and no white margins at its sides (a square stage with
   a padded photo left a third of it empty). The thumbnails stand in a rail beside the stage, so every photo is in view while the page is
   scrolled (the gallery sticks); below 900px the page has one column and the rail lies under the stage. */
.product-gallery { position: sticky; top: calc(var(--header-h) + 24px); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage"; gap: 12px; min-width: 0; }
.product-gallery.has-thumbs { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "rail stage"; }
.product-stage { grid-area: stage; align-self: start; position: relative; aspect-ratio: 4 / 5; max-height: calc(100dvh - var(--header-h) - 80px); margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; touch-action: pan-y pinch-zoom; }
.product-stage-link { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.product-stage img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .18s ease-out; }
.product-stage.is-swapping img { opacity: .3; }
.product-noimage { display: grid; place-items: center; width: 100%; height: 100%; padding: 24px; background: linear-gradient(145deg, #f7f8f2, #e8ebdf); color: var(--ink-2); text-align: center; }

/* Going from one photo to the next: one small control in the corner of the photo, built like the site's own buttons (a square-cornered frame
   that turns to ink under the pointer), not two round buttons over the middle of it. It also tells which photo this is. */
.product-pager {
    position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: stretch; height: 40px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 8px;
    background: rgba(247, 248, 242, .94); box-shadow: 0 8px 20px -12px rgba(15, 26, 20, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.product-pager-step { display: grid; place-items: center; width: 40px; border: 0; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .15s, color .15s; }
.product-pager-step:hover { background: var(--ink); color: var(--paper); }
.product-pager-step:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -4px; }
.product-pager-step:hover:focus-visible { outline-color: var(--paper); }
.product-pager-count { display: grid; place-items: center; min-width: 58px; padding: 0 10px; border-inline: 1px solid var(--line); font: 650 .8125rem/1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (pointer: coarse) {
    .product-pager { height: 44px; }
    .product-pager-step { width: 44px; }
}

/* The rail scrolls, so it clips: a little padding keeps the ring of the current thumbnail whole, and the same negative margin puts the thumbnails back level
   with the top of the stage and with the left edge of the page. */
.product-thumbs { grid-area: rail; display: flex; flex-direction: column; gap: 10px; min-height: 0; margin: -2px; padding: 2px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; contain: size; }
.product-thumbs::-webkit-scrollbar { display: none; }
.product-thumbs li { flex: none; }
.product-thumbs a { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.product-thumbs a:hover { border-color: var(--ink); }
.product-thumbs a[aria-current="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.product-thumbs a:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 0; }
.product-thumbs img { display: block; width: 100%; height: 100%; object-fit: contain; }

.product-info { min-width: 0; }
/* The trail keeps its links whole; only the last item (the product's name) gives way. */
.product .design-breadcrumb { flex-wrap: nowrap; }
.product .design-breadcrumb > * { flex: none; white-space: nowrap; }
.product .design-breadcrumb > :last-child { flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) { .product .design-breadcrumb { flex-wrap: wrap; row-gap: 2px; } }
.product-eyebrow { color: var(--accent-strong); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.product-eyebrow a { text-decoration: none; }
.product-eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.product-info h1 { margin-top: 8px; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); font-weight: 780; line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
.product-model { margin-top: 10px; color: var(--ink-2); font-size: .9375rem; }
.product-tags { margin: 18px 0 0; }
.product-label, .product-colors legend { margin: 0 0 10px; padding: 0; color: var(--ink-2); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.product-colors { min-width: 0; margin: 28px 0 0; padding: 0; border: 0; }
.product-colors legend { float: left; width: 100%; }
.product-colors legend + ul { clear: both; }
.product-colors-picked { color: var(--ink); letter-spacing: 0; text-transform: none; font-size: .875rem; font-weight: 650; }
.product-colors ul { display: flex; flex-wrap: wrap; gap: 10px; }
.product-color { position: relative; display: block; cursor: pointer; }
.product-color input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.product-color--static { cursor: default; }
.product-swatch {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--swatch, var(--paper-2)); color: var(--ink-2);
    box-shadow: inset 0 0 0 1px rgba(15, 26, 20, .26); font-size: .6875rem; font-weight: 700;
}
.product-color--static .product-swatch { width: 30px; height: 30px; }
.product-color input:checked + .product-swatch { box-shadow: inset 0 0 0 1px rgba(15, 26, 20, .26), 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.product-color input:focus-visible + .product-swatch { outline: 2px solid var(--accent-strong); outline-offset: 5px; }
.product-color:hover .product-swatch { box-shadow: inset 0 0 0 1px rgba(15, 26, 20, .5); }
.product-color input:checked + .product-swatch:hover { box-shadow: inset 0 0 0 1px rgba(15, 26, 20, .26), 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.product-block { margin-top: 26px; }
.product-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.product-sizes li { min-width: 44px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 6px; background: #f7f8f2; font-size: .875rem; font-weight: 650; text-align: center; }
.product-print { display: grid; gap: 10px; margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.product-print div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 12px; font-size: .9375rem; }
.product-print dt { color: var(--ink-2); }
.product-print dd { margin: 0; font-weight: 650; }
.product-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }
.product-note { margin-top: 12px; color: var(--ink-2); font-size: .875rem; }
.product-configuration { margin-top: 26px; }
.product-choice-options, .product-choice-locations { display: grid; gap: 20px; }
.product-choice-locations { margin-top: 24px; }
.product-choice-heading { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: .8125rem; }
.product-choice-heading h2, .product-choice-label { margin: 0; font-size: .8125rem; font-weight: 700; }
.product-choice-heading span { color: var(--ink-2); }
.product-choice-label { margin-bottom: 8px; }
.product-choice-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.product-choice-button { max-width: 100%; padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--ink); font: inherit; font-size: .875rem; overflow-wrap: anywhere; cursor: pointer; }
.product-choice-button:hover { border-color: var(--accent-strong); }
.product-choice-button[aria-pressed="true"] { border-color: var(--accent-strong); background: var(--paper-3, #e3e9dd); font-weight: 700; }
.product-choice-button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.product-choice-button:disabled { opacity: .4; cursor: not-allowed; }
.product-choice-swatch, .product-choice-swatch[aria-pressed="true"] { width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(15, 26, 20, .2); }
.product-choice-swatch[aria-pressed="true"] { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.product-choice-price { display: grid; gap: 6px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.product-choice-price strong { font-size: 1.5rem; letter-spacing: -.025em; }
.product-choice-price p { margin: 0; font-size: .8125rem; color: var(--ink-2); }

.product-details { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); padding-block: clamp(28px, 4vw, 52px) clamp(8px, 2vw, 24px); border-top: 1px solid var(--line); }
.product-details h2 { margin: 0 0 14px; font-size: 1.25rem; font-weight: 760; letter-spacing: -.016em; }
.product-details-side h2:not(:first-child) { margin-top: 38px; }
.product-details-main, .product-details-side { min-width: 0; }
.product-prose { max-width: 68ch; line-height: 1.65; }
.product-prose > :first-child { margin-top: 0; }
.product-prose p, .product-prose ul, .product-prose ol { margin: 0 0 1em; }
.product-prose ul { padding-left: 1.3em; list-style: disc; }
.product-prose ol { padding-left: 1.3em; list-style: decimal; }
.product-prose li { margin-bottom: .3em; }
.product-prose h1, .product-prose h2, .product-prose h3, .product-prose h4 { margin: 1.4em 0 .5em; font-size: 1.0625rem; font-weight: 750; line-height: 1.3; }
.product-prose a { text-underline-offset: 3px; }
.product-prose table { width: 100%; margin: 0 0 1em; border-collapse: collapse; font-size: .9375rem; }
.product-prose th, .product-prose td { padding: 8px 10px; border: 1px solid var(--line); text-align: left; }
.product-specs { margin: 0; border-top: 1px solid var(--line); }
.product-specs div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.product-specs dt { color: var(--ink-2); }
.product-specs dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.product-chart { display: grid; gap: 12px; }
.product-chart a { display: block; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: zoom-in; }
.product-chart a:hover { border-color: var(--ink); }
.product-chart img { width: 100%; height: auto; }
.design-band-grid--solo { grid-template-columns: minmax(0, 1fr); }

.product-zoom { width: min(96vw, 1200px); height: min(92dvh, 1000px); max-width: none; max-height: none; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: #fff; }
/* The photo is fitted inside the window whole (a percentage max-height of a grid item that sizes itself would let a tall photo run past the bottom). */
.product-zoom[open] { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.product-zoom::backdrop { background: rgba(15, 26, 20, .74); }
.product-zoom img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-zoom-close {
    position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 8px;
    background: rgba(247, 248, 242, .94); color: var(--ink); cursor: pointer; transition: background-color .15s, color .15s;
}
.product-zoom-close:hover { background: var(--ink); color: var(--paper); }
.product-zoom-close:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.product-pager--zoom { right: auto; bottom: 16px; left: 50%; transform: translateX(-50%); }
@media (pointer: coarse) { .product-zoom-close { width: 44px; height: 44px; } }

@media (max-width: 900px) {
    .product-layout, .product-details { grid-template-columns: minmax(0, 1fr); }
    .product-gallery { position: static; }
    .product-gallery.has-thumbs { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "rail"; }
    .product-thumbs { flex-direction: row; padding: 2px; overflow: auto hidden; contain: none; scroll-snap-type: x proximity; }
    .product-thumbs li { width: 64px; scroll-snap-align: start; }
    .product-print div { grid-template-columns: 7.5rem minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .product-swatch { width: 42px; height: 42px; }
    .product-color--static .product-swatch { width: 30px; height: 30px; }
    .product-cta .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .product-stage img, .product-pager-step, .product-zoom-close, .product-thumbs a { transition: none; } }