/**
 * Perry’s Diamonds & Estate Jewelry: product grid (PLP)
 *
 * Restyles the platform's v2 grid — the one the store actually runs (gridVersion = 2), which
 * renders html/widgets/templates/grid/grid.html and hydrates through js/dist/grid.iife.js.
 * Nothing here forks a template: every change below is reachable from CSS over the markup the
 * grid already emits, which keeps the page on master's tile, filter and paging behaviour.
 *
 * Geometry is measured from the Made Outside frame at its 1280 comp width
 * (full-site/figma/estate-landing/, which is the same design as full-site/figma/estate/).
 * Measured values are written as `calc(N * var(--perrys-u))` so the desktop comp is exact at
 * 1280 and scales cleanly below it, matching the five pages already built.
 *
 * The stitched comp (figma/estate/full.png) carries ~137px of Figma canvas down its left edge
 * and is rendered at 0.99375 of design scale, so a raw pixel read is both offset and 0.63%
 * small. Every number below is corrected: designX = (imageX - 137) / 1.9875. The offset is
 * checked, not assumed — with it the breadcrumb, the page headline, the hero title card and
 * the filter-rail band all centre on 640, the artboard's own centre. A reading that centres
 * anywhere else has skipped the correction. (Widths are unaffected by the offset; only
 * absolute positions are, which is why an uncorrected read can look plausible.)
 *
 * Measured blocks at 1280: filter rail 215 · gutter 85 · tile 249.5 · tile gap 24.
 * The comp's own band runs 81.5 .. 1198.5 (1117) but its three fixed-width tiles only reach
 * 1179, leaving 19px of slack before the toolbar's right edge. The build closes that slack —
 * band 1098, grid 798 — so the tiles land on the comp's exact 249.5 and the toolbar
 * right-aligns to the grid it labels. That 19px is the one deliberate deviation here.
 * Hero photo inset 52 with a 447 × 46 white title card.
 * Rail internals: 11.5 checkbox flush left · 9 to the label · 27.4 row pitch · 12px Libre
 * Baskerville group headers tracked 0.2em, left-aligned, chevron flush right.
 *
 * Type roles come from overrides/typography.css; colours from overrides/colors.css. The page
 * deliberately declares no font sizes of its own except the two the comp introduces here (the
 * page headline and the tile caption), so the site's type cannot drift page by page.
 */

/* Page scaffolding */
/* ----------------------------- */
#jewelry {
    --perrys-u: min(1px, calc(100vw / 1280));

    /* The rail and the gutter are fixed furniture — a filter rail does not get more readable by
       getting wider — so above 1280 only the product column grows. The band is expressed as an
       inset of the white panel rather than as a width of its own, so the two track together:
       at 1280 the panel is 1176 and the band 1098, exactly the comp; above it both grow to the
       same 1400 ceiling every PageBuilder section on this site uses. */
    --perrys-plp-rail: calc(215 * var(--perrys-u));
    --perrys-plp-gutter: calc(85 * var(--perrys-u));
    --perrys-plp-band-inset: calc(39 * var(--perrys-u));
    --perrys-plp-tile-gap: calc(24 * var(--perrys-u));

    /* filter-rail rhythm, measured once so every group type resolves to the same grid */
    --perrys-plp-box: calc(11.5 * var(--perrys-u));   /* checkbox / radio / picker square */
    --perrys-plp-box-gap: calc(9 * var(--perrys-u));  /* square to label */
    --perrys-plp-row: calc(27.4 * var(--perrys-u));   /* option row pitch */

    /* sampled from the comp rather than inferred from the palette: the rail's rule is a warm
       ivory, not a grey alpha, and the slider is a tint of the sage rather than the sage */
    --perrys-plp-rule: #EDE9E2;
    --perrys-plp-box-line: #6E6E6E;
    --perrys-plp-track: #DBE3D9;
}

/* The body template (jewelry-v2.html) always emits a PAGEBUILDER_TOP_CONTAINER section wrapping
   the breadcrumb, h1 and intro. On this store pageAssembler renders all three into
   #content-header instead and leaves that container empty — but it keeps Bootstrap's `pt-20 pb-3`
   utilities, which are !important and opened a 96px ivory gap through the middle of what the comp
   draws as one continuous white panel. Hence the !important here. The grid's own section below
   keeps the rhythm the page sets. */
#jewelry #content-body > section.default {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* #content-body is a CSS grid, so every section in it is a grid item with the default
   min-width:auto — it can never be narrower than its own min-content. On a phone the grid's
   toolbar and tile row set that floor above the viewport and the whole page scrolled sideways
   (430 inside a 390 viewport, and 571 before the rail was resized). Releasing the floor lets
   the section take the column's width and everything inside it clamps to that. */
#jewelry #content-body > section,
#jewelry #content-body > section.universal-grid {
    min-width: 0;
}

/* With its padding gone the container still held ~58px of empty rows, so it is dropped from the
   flow. Safe on this store because jewelry-v2.html puts only the breadcrumb, h1 and intro in it
   and pageAssembler blanks all three whenever it renders its own #content-header — which it does
   here. Anything authored for a category grid arrives through page_meta, which renders in
   #content-header, not in this container. */
#jewelry #content-body > section.default:not(.universal-grid) {
    display: none;
}

/* Hero banner + title card */
/* ----------------------------- */
/* page_meta.banner_data drives this; <main class="banner-top-of-page"> already orders it above
   the content header (scss/global/_main-content.scss). The platform always emits a ratio class
   (renderContentBannerBlock defaults it to 3x1), so the comp's 1172 × 453 photo is set by
   overriding Bootstrap's own ratio custom property rather than fighting the class. */
/* The photo sat on the navigation's last row (Made Outside QA: increase the padding below the nav and above the
   image); the other pages' banners leave 22 under the header, and so does this one. Master zeroes the padding
   through `main#main-content #content-banner`, one element more than `#jewelry #content-banner`, so the
   selector carries `main#main-content` as well. */
#jewelry #content-banner {
    background: var(--perrys-ivory);
}

#jewelry main#main-content #content-banner {
    padding: calc(22 * var(--perrys-u)) 0 0;
}

/* Same measure as the panel below it and as every PageBuilder section: a bare inset margin let
   the photograph run to 1816 on a 1920 screen, far past the 1400 the rest of the site stops at. */
#jewelry #content-banner > .container-fluid {
    width: min(calc(100% - 2 * var(--perrys-inset-margin)), var(--perrys-w-inset));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

#jewelry #content-banner [class*="ratio-"] {
    --bs-aspect-ratio: 38.65%; /* 453 / 1172 */
    display: block;
    position: relative;
    overflow: hidden;
}

#jewelry #content-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The banner template's own overlay element is the comp's white card, so it is styled rather
   than hidden and rebuilt. */
/* The monolith styles this overlay as a bottom-anchored caption on a dark gradient, through
   `section#content-banner .content-banner .content-banner-title-overlay span` — specificity
   (1,3,2). These selectors carry a second ID so the comp's centred white card wins outright
   rather than by luck of source order. */
#jewelry #content-banner .content-banner .content-banner-title-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    pointer-events: none;
}

/* The card hugs its words, as every other page's title card does (Made Outside QA: the box should be sized to the
   text); a 447 minimum held "Shop Vintage & Estate Jewelry" in a box 100 wider than it needs. */
#jewelry #content-banner .content-banner .content-banner-title-overlay > span {
    display: block;
    padding: calc(13 * var(--perrys-u)) calc(28 * var(--perrys-u));
    background: var(--perrys-white);
    color: var(--perrys-black);
    font-family: var(--perrys-font-serif);
    font-size: calc(17 * var(--perrys-u));
    font-weight: 400;
    line-height: calc(20 * var(--perrys-u));
    letter-spacing: 0.18em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: none;
}

/* Content header: breadcrumb, headline, intro */
/* ----------------------------- */
/* In the comp the breadcrumb, headline, intro and the whole grid sit together on ONE white
   panel inset 55 from the frame edges, on the page's ivory ground — not on ivory with the grid
   on white. The panel is 1170 wide and the 1080 content band is centred inside it. */
#jewelry #content-header {
    /* the platform gives this section a 10px side padding, which made its white panel 20px
       narrower than the grid's and put a visible step in the edge of one continuous surface */
    padding: 0;
    background: var(--perrys-ivory);
}

/* The panel is sized exactly as .perrys-container-wide sizes a PageBuilder custom section —
   the viewport less the site's 52 inset margin, capped at --perrys-w-inset — so the grid reads
   as the same measure as every authored page instead of freezing at a 1280-derived width while
   the rest of the site keeps growing. 1176 at the comp's 1280, 1400 from 1608 up. */
#jewelry #content-header > .container,
#jewelry .grid-section-block-container {
    width: min(calc(100% - 2 * var(--perrys-inset-margin)), var(--perrys-w-inset));
    max-width: none;
    margin-inline: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: var(--perrys-white);
}

#jewelry #content-header > .container {
    padding-top: calc(74 * var(--perrys-u));
    padding-bottom: 0;
}

/* The header's own copy sits on the band's measure, not the panel's, so it lines up with the
   products below it — and it CENTRES on that measure. The platform gives the h1 and the intro
   their own max-widths (640 and 690), so a fixed side margin centred the text inside a box that
   was itself pinned to the left edge: the copy read as left-aligned however the text-align was
   set. Auto margins centre the box, which is what the comp draws. */
#jewelry #content-header > .container > * {
    margin-inline: auto;
    text-align: center;
}

/* Only the breadcrumb takes the band's full measure; the h1 and the intro keep the narrower
   max-widths the platform gives them, which is what makes the comp's headline wrap where it
   does instead of running out to a single line on a wide screen. */
#jewelry #content-header > .container > nav {
    max-width: calc(100% - 2 * var(--perrys-plp-band-inset));
}

/* <main> is a CSS grid; any row-gap would show the ivory ground between the two halves of what
   the comp draws as one white panel. */
#jewelry #main-content {
    gap: 0;
    row-gap: 0;
}

/* #content-body is a block box whose sections are separated by whitespace in the template. Those
   whitespace text nodes form an anonymous line box — 58px at the body's line-height — which read
   as an ivory seam across the middle of the white panel. Grid (and flex) layout discards
   whitespace-only children, so this removes the seam without touching the markup. */
#jewelry #content-body {
    display: grid;
    gap: 0;
}

/* The comp centres the trail and separates crumbs with a rule rather than a slash. */
#jewelry #page-breadcrumb .breadcrumb {
    justify-content: center;
    margin-bottom: calc(30 * var(--perrys-u));
    font-family: var(--perrys-font-serif);
    font-size: calc(13 * var(--perrys-u));
    letter-spacing: 0.04em;
}

/* The comp centres the trail; the platform prints Bootstrap's .justify-content-start utility on
   the list itself, and utilities carry !important — so this one does too. */
#jewelry #page-breadcrumb .breadcrumb {
    justify-content: center !important;
}

#jewelry #page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "|";
    color: var(--perrys-black);
    padding-inline: calc(8 * var(--perrys-u));
}

/* Made Outside QA, a change on every breadcrumb: the links take the current page's weight (the platform prints
   them bold), and the current page carries no underline, since it is not a link. */
#jewelry #page-breadcrumb .breadcrumb-item a {
    color: var(--perrys-black);
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#jewelry #page-breadcrumb .breadcrumb-item.active {
    color: var(--perrys-black);
    text-decoration: none;
}

/* The page headline is this page's own display size — measured 28/35 at the comp, between the
   site's Display 2 and the label roles, so it is set here rather than bent out of a token. */
/* Made Outside QA: the headline read small. From 992 up the comp sets this page's headline as it sets the other
   pages' intro headline, 40/48 at 1280 and -0.04em, measured on the Estate frame (cap height 26.2, a 48 to 50 line
   pitch, "EVERY PIECE HAS A STORY. FIND THE" 625 wide). The comp has no mobile frame for this page, so the tablet and
   phone headline stays as it was, at the 24px the phone block below sets. */
#jewelry #page-title {
    max-width: calc(640 * var(--perrys-u));
    margin: 0 auto;
    font-family: var(--perrys-font-display);
    font-weight: 400;
    font-size: clamp(24px, calc(21.5px + 0.2vw), 28px);
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-align: center;
    text-transform: uppercase;
}

@media (min-width: 992px) {
    #jewelry #page-title {
        font-size: clamp(34px, calc(31.5px + 0.663vw), 40px);
        line-height: 1.2;
        letter-spacing: -0.04em;
    }
}

#jewelry #page-intro {
    max-width: calc(690 * var(--perrys-u));
    margin: calc(24 * var(--perrys-u)) auto 0;
    text-align: center;
}

#jewelry .perrys-plp-lead,
#jewelry .perrys-plp-more p {
    font-family: var(--perrys-font-serif);
    font-style: italic;
    font-size: calc(15 * var(--perrys-u));
    line-height: calc(34 * var(--perrys-u));
    letter-spacing: 0.16em;
    margin-bottom: 0;
}

#jewelry .perrys-plp-more p + p {
    margin-top: calc(18 * var(--perrys-u));
}

#jewelry .perrys-plp-more[hidden] {
    display: none;
}

#jewelry .perrys-plp-more {
    margin-top: calc(18 * var(--perrys-u));
}

/* "show more" is a real button so the disclosure is operable and announced; js/pages/jewelry.js
   owns the state, and the control removes itself when scripting is unavailable. */
#jewelry .perrys-plp-more-toggle {
    display: inline-block;
    margin-top: calc(16 * var(--perrys-u));
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--perrys-font-serif);
    font-style: italic;
    font-size: calc(14 * var(--perrys-u));
    letter-spacing: 0.04em;
    color: var(--perrys-black);
    text-decoration: underline;
    text-underline-offset: 3px;
}

#jewelry .perrys-plp-more-toggle:focus-visible {
    outline: 2px solid var(--perrys-olive);
    outline-offset: 3px;
}

/* Grid band: rail + products */
/* ----------------------------- */
#jewelry .universal-grid {
    background: var(--perrys-ivory);
    padding-top: 0;
    padding-bottom: calc(80 * var(--perrys-u));
    margin-top: 0;
}

/* The platform sets this container's 10px gutter with !important
   (`section.universal-grid .container.grid-section-block-container`), so removing it takes
   !important too — the sanctioned Bootstrap-override exception in the house CSS rules.
   Without this the measured 1080 band renders 1060 wide and sits 10px off centre. */
/* #grid-toolbar's top margin has nothing above it to collapse against, so it escaped this
   container and pushed the whole white panel down — leaving a 58px ivory band across the page
   between the content header and the grid, which is the split that made every non-Estate
   category look broken. The space is this container's padding now, so the panel stays one
   continuous white surface from the breadcrumb to the last row. */
#jewelry .grid-section-block-container {
    padding-top: calc(58 * var(--perrys-u)) !important;
    padding-bottom: calc(64 * var(--perrys-u)) !important;
}

/* The band is sized here rather than through the section's padding, so it stays 1098 wide and
   centred whatever Bootstrap container the platform wraps the grid in. Below 992 the offcanvas
   filter takes over and the mobile block sets its own width. */
#jewelry .grid-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 992px) {
    #jewelry .grid-container {
        width: calc(100% - 2 * var(--perrys-plp-band-inset));
        max-width: 100%;
        margin-inline: auto;
        grid-template-columns: var(--perrys-plp-rail) minmax(0, 1fr);
        column-gap: var(--perrys-plp-gutter);
    }
}

#jewelry .grid-sidebar,
#jewelry .grid-sidebar-inner {
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    /* the platform sets an inline pixel height on #filtersColumn for its sticky maths */
    height: auto !important;
}

#jewelry .grid-inner-container {
    min-width: 0;
    padding: 0;
}

/* Toolbar: the comp keeps only "show" and "sort", right-aligned above the products */
/* ----------------------------- */
#jewelry #grid-results-text,
#jewelry #grid-ai-search-container,
#jewelry #grid-category-thumbs {
    display: none;
}

#jewelry #grid-toolbar {
    margin: calc(58 * var(--perrys-u)) 0 calc(26 * var(--perrys-u));
}

/* The toolbar belongs to the same band as the rail and the grid: the comp ends "Newest" and its
   caret on the last tile's right edge. Laid across the panel's full width it overhung the grid
   by the band inset — 39 at the comp's width, and the same 39 at every width above it. Below 992
   the mobile block already gives the bar the band's width. */
@media (min-width: 992px) {
    #jewelry #grid-toolbar {
        width: calc(100% - 2 * var(--perrys-plp-band-inset));
        margin-inline: auto;
    }
}

/* Master insets the right-hand group 10 either side up to the large breakpoint, which held the
   caret 10 short of the tile edge below it on phones and again between 992 and 1200. Above that
   the inset is already nothing, so stating it once covers every width. */
#jewelry .grid-toolbar-right-inner {
    padding-inline: 0;
}

#jewelry .grid-toolbar {
    display: flex;
    justify-content: flex-end;
    border: 0;
    padding: 0;
    min-height: 0;
}

/* The left group is the offcanvas filter pill and the category pills; on desktop the comp shows
   the rail instead, so the group is dropped from the flow rather than hidden mid-scroll. */
@media (min-width: 992px) {
    #jewelry .grid-toolbar-left {
        display: none;
    }
}

#jewelry .grid-toolbar-right {
    display: flex;
    align-items: center;
    gap: calc(31.5 * var(--perrys-u));
}

/* The comp sets the label in tracked caps and the value in sentence case, 12 apart, with a
   hairline caret 12 after the value. The platform's button carries only the value, which is
   also its accessible name, so the label is generated content — the name the visitor chose
   stays the name a screen reader reads. */
/* Type and chrome for every control in the bar. Deliberately NOT a display change: the phone
   layout truncates the left-hand filter pill with text-overflow, which a flex container cannot
   do, and losing that truncation pushes the whole bar past the viewport. */
#jewelry .grid-toolbar .pill,
#jewelry .grid-toolbar .dropdown-toggle,
#jewelry .grid-toolbar button {
    font-family: var(--perrys-font-serif);
    font-size: calc(11.5 * var(--perrys-u));
    font-weight: 400;
    line-height: calc(17 * var(--perrys-u));
    letter-spacing: 0;
    text-transform: none;
    color: var(--perrys-black);
    background: none;
    border: 0;
    border-radius: 0;
    min-height: 0;
    /* master's pill is a 40-high lozenge: `min-width: 40px; height: 40px; border-radius: 40px`.
       The fixed height is what left the caret stranded below the label — the text sat on the
       line box at the top of a 40 box while the caret centred itself in the whole 40. The box
       is content-height so the two line up, and the 40 comes back as padding: the bar keeps its
       band, and the phone toolbar keeps a 40 tap target. */
    height: auto;
    min-width: 0;
    padding: calc(11.5 * var(--perrys-u)) 0;
}

/* The value is a <span>, and master types it separately at 14/600 with a 16 line box, so the
   rule above reaches the label and the caret but never the word the visitor actually chose.
   The comp sets label and value at one size and one weight — measured at equal cap heights. */
#jewelry .grid-toolbar .pill span,
#jewelry .grid-toolbar .dropdown-toggle span {
    font: inherit;
    height: auto;
    line-height: inherit;
    color: inherit;
}

/* Only the sort control is laid out as label / value / caret. */
#jewelry .grid-toolbar-right .dropdown-toggle {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: calc(10 * var(--perrys-u));
}

#jewelry .grid-toolbar button:focus-visible {
    outline: 2px solid var(--perrys-olive);
    outline-offset: 3px;
}

#jewelry .grid-toolbar-right [data-source="sorter"]::before {
    content: "Sort:";
    font-size: calc(11.5 * var(--perrys-u));
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Master appends a Bootstrap caret; the comp draws the same hairline chevron as the rail,
   11.5 x 6.5 and pointing DOWN while the menu is shut. Master's own rule swaps in an icon-font
   glyph and turns it `rotate(180deg)`, which is what had the caret pointing up. */
#jewelry .grid-toolbar-right .dropdown-toggle::after {
    content: "";
    align-self: center;
    width: calc(11.5 * var(--perrys-u));
    height: calc(6.5 * var(--perrys-u));
    margin: 0;
    border: 0;
    transform: none;
    background-color: currentcolor;
    -webkit-mask: no-repeat center / 100% 100%
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 12'%3E%3Cpath d='M1 1 11.5 11 22 1' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
    mask: no-repeat center / 100% 100%
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 12'%3E%3Cpath d='M1 1 11.5 11 22 1' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
}

#jewelry .grid-toolbar-right .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

#jewelry .grid-toolbar-right .dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0;
    background: var(--perrys-white);
    padding: calc(14 * var(--perrys-u));
}

/* The dropdown's own options are the platform's radio skin; the rail's square is wrong here,
   so they keep a plain list and only pick up the page's type. */
#jewelry .grid-toolbar-right .dropdown-menu .form-check-label {
    font-family: var(--perrys-font-serif);
    font-size: calc(11.5 * var(--perrys-u));
    line-height: calc(20 * var(--perrys-u));
}

/* Filter rail */
/* ----------------------------- */
/* Master hard-codes `.grid-collapse-filter { width: 200px; padding: 0 16px }` — a fixed pixel
   width that overflows any rail narrower than 200 and insets every row by 16. It also draws its
   own `border-top`, which doubles up with the group separator below. All three are neutralised
   here so the rail's own measurements are the only ones in play. */
#jewelry .filterSection {
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
}

#jewelry .grid-collapse-filter {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    text-align: left;
}

/* One hairline between groups, drawn at the rail's full width. 28 above the next group's
   heading and 23 below the group that closes, per the comp. */
#jewelry .filterSection + .filterSection {
    border-top: 1px solid var(--perrys-plp-rule);
    margin-top: calc(23 * var(--perrys-u));
    padding-top: calc(28 * var(--perrys-u));
}

/* Group heading: 12px Libre Baskerville tracked 0.2em, flush left, chevron flush right. */
#jewelry .filterHeaderTable {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: calc(10 * var(--perrys-u));
    padding: 0 0 calc(16 * var(--perrys-u));
    margin: 0;
    background: none;
    border: 0;
    text-align: left;
}

/* Master stacks this header as a COLUMN (name over current-selection), which turns align-items
   into the horizontal axis — an `align-items: center` here silently centres every group name.
   The row direction is restored explicitly so the axes mean what they read as. */
#jewelry .grid-collapse-filter-header {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

#jewelry .grid-collapse-filter-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

/* 11.5 / 0.11em, not the site's 12 / 0.2em label token: solved against the frame's own two
   longest headings. "PRICE" is 43.8 wide in the comp and "JEWELRY TYPE" 114.2; the 0.2em token
   renders them 52.9 and 116.9, so the token is 21% too wide on the short heading. Cap height
   agrees — 8.05 in the comp is 11.7px of Libre Baskerville. */
#jewelry .grid-collapse-filter-title-text {
    font-family: var(--perrys-font-serif);
    font-size: calc(11.5 * var(--perrys-u));
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--perrys-black);
}

/* The comp shows neither the option count nor the current selection beside the group name. */
#jewelry .grid-collapse-filter-count,
#jewelry .grid-collapse-filter-selected {
    display: none !important;
}

/* Master's chevron is `.grid-collapse-filter > button::after`, an icon glyph stroked 1.5px and
   pushed off the right edge by its own margin. The comp draws a plain 11.5 × 6 hairline caret
   sitting on the rail's right edge, so the glyph is replaced rather than restyled. */
#jewelry .grid-collapse-filter > button::after {
    content: "";
    width: calc(11.5 * var(--perrys-u));
    height: calc(6 * var(--perrys-u));
    flex: 0 0 auto;
    margin: 0;
    border: 0;
    -webkit-text-stroke-width: 0;
    background-color: currentcolor;
    /* a 90° caret, drawn as a mask so it inherits the text colour */
    -webkit-mask: no-repeat center / 100% 100%
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 12'%3E%3Cpath d='M1 11 11.5 1 22 11' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
    mask: no-repeat center / 100% 100%
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 12'%3E%3Cpath d='M1 11 11.5 1 22 11' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
    transform: rotate(180deg);
    transition: transform 0.3s ease-out;
}

#jewelry .grid-collapse-filter > button[aria-expanded="true"]::after {
    transform: rotate(0deg);
}

#jewelry .filterHeaderTable:focus-visible {
    outline: 2px solid var(--perrys-olive);
    outline-offset: 3px;
}

/* Options.
   Three different controls render here and the comp draws one square for all of them:
   - radioButtons  (Category, Time Period …) -> input[type=radio].form-check-input
   - checkboxes                               -> input[type=checkbox].form-check-input
   - pickers       (Gemstone, Material …)     -> a .form-check-visual span IS the control
   Sizing them from the same three tokens is what makes the rail read as one system. */
#jewelry .filterOption {
    margin: 0;
}

#jewelry .filterOption .form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--perrys-plp-box-gap);
    min-height: 0;
    margin: 0;
    padding: 0;
    height: var(--perrys-plp-row);
}

#jewelry .filterOption .form-check-input,
#jewelry .filterOption .form-check.form-picker .form-check-visual {
    flex: 0 0 auto;
    width: var(--perrys-plp-box);
    height: var(--perrys-plp-box);
    min-width: var(--perrys-plp-box);
    min-height: var(--perrys-plp-box);
    margin: calc(2.5 * var(--perrys-u)) 0 0;
    padding: 0;
    border: 1px solid var(--perrys-plp-box-line);
    border-radius: 0;
    /* the picker skin writes the gemstone's own colour as an INLINE background, so flattening
       it to the comp's plain square needs !important — the sanctioned exception */
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

#jewelry .filterOption .form-check-input:checked,
#jewelry .filterOption .form-check.form-picker:has(input:checked) .form-check-visual {
    background-color: var(--perrys-black) !important;
    background-image: none !important;
    border-color: var(--perrys-black);
}

/* The picker control's artwork lives on a ::before that master locks to 30 x 30 with
   `min-width` and `min-height`, and that is where the stone-shape photographs and the gemstone
   swatches are painted. Sizing `.form-check-visual` down to the comp's 11.5 square does not move
   it: a 30px pseudo inside an 11.5px box spills 19px, across the (absolutely positioned,
   transparent) input and into the label, which is why the shape photographs sat on top of the
   Stone Shape labels. Gemstone and Material spill the same 19px silently — the fill above blanks
   them, so nothing shows, but the overhang still swallows clicks meant for the label.
   Neutralising the pseudo fixes all three groups at once; the filled square is the whole control. */
#jewelry .filterOption .form-check.form-picker .form-check-visual::before,
#jewelry .grid-toolbar .filterOption .form-check.form-picker .form-check-visual::before {
    content: none;
}

/* Master marks a checked option with a 14 x 14 ::after inside the control — 30px radius for a
   radio group, square for a checkbox group. At the comp's 11.5 box that mark is larger than the
   square it sits in, so it hangs out of the bottom and the control reads as a blob. The filled
   square above is the whole mark here, so the pseudo is dropped. */
#jewelry .filterOption .form-check .form-check-input:checked::after,
#jewelry .grid-toolbar .filterOption .form-check .form-check-input:checked::after {
    display: none;
}

/* Master also bolds the label of the checked option. The comp keeps one weight down the rail —
   the filled square is the selected state — so the label's type never changes underneath it. */
#jewelry .filterOption .form-check .form-check-input:checked + .form-check-label {
    font-weight: 400;
}

#jewelry .filterOption .form-check-input:focus-visible,
#jewelry .filterOption .form-check.form-picker input:focus-visible + .form-check-visual {
    outline: 2px solid var(--perrys-olive);
    outline-offset: 2px;
    box-shadow: none;
}

#jewelry .filterOption .form-check-label {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-family: var(--perrys-font-serif);
    font-size: calc(11.5 * var(--perrys-u));
    line-height: calc(17 * var(--perrys-u));
    letter-spacing: 0;
    color: var(--perrys-black);
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    #jewelry .filterOption .form-check-label:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* "Show More" under a truncated option list: italic, underlined, on the rail's left edge,
   23 below the last row. */
#jewelry .showMoreLessButton,
#jewelry .grid-collapse-filter-show-more,
#jewelry .filterSection button[class*="showMore"] {
    display: inline-block;
    margin: calc(9 * var(--perrys-u)) 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--perrys-font-serif);
    font-style: italic;
    font-size: calc(11.5 * var(--perrys-u));
    line-height: calc(17 * var(--perrys-u));
    letter-spacing: 0;
    color: var(--perrys-black);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-transform: none;
}

/* Made Outside QA, two things about "Show more" in the filter rail.
   Closer to the last item: the rule above puts its 9 margin on the wrapper and on the button inside it, and the
   button keeps the platform's 48px button height, so the link sat about 60 under the last option. The button
   takes its own line height and no margin, and the link lands a row below the last option, as in the comp.
   Hidden when there is nothing more to show: the platform hides the button itself (it adds `is-hidden` when no
   option is truncated, and `.showMoreOrLessFilterOptionsButton.is-hidden { display: none }`), but the
   `display: inline-block` above has an id in front of it and un-hid every one, so groups that show all their
   options (Jewelry Type, Time Period, Stone Shape, Gender) still offered a "Show more" that revealed nothing.
   The hidden button hides its wrapper too. */
#jewelry .filterSection .grid-collapse-filter-show-more button[class*="showMore"] {
    height: auto;
    min-height: 0;
    margin: 0;
}

#jewelry .filterSection button[class*="showMore"].is-hidden,
#jewelry .grid-collapse-filter-show-more:has(> .is-hidden) {
    display: none;
}

/* The rail's per-group search box is not in the comp. */
#jewelry .filterSearchSection {
    display: none;
}

/* Price range.
   The platform renders ion.rangeSlider (`.irs--round`), not noUi: a 4px track with 40px hit
   areas carrying a 16px dark dot, and the two value fields BELOW it. The comp draws a 1px sage
   rule across the full rail with 6px sage dots, the two fields ABOVE it, and the range bounds
   as small labels underneath. The fields move by flex order; the bounds are written by
   js/pages/jewelry.js, because the platform's own .irs-min/.irs-max carry "0" and "1" and are
   hidden by a data attribute, not by CSS. */
#jewelry .grid-filter-component.range-slider {
    padding: 0;
    margin: 0;
}

#jewelry .filterOptions[data-type="slider"] {
    display: flex;
    flex-direction: column;
}

#jewelry .filterOptions[data-type="slider"] .doubleSliderInputTable {
    order: -1;
    grid-template-columns: calc(73 * var(--perrys-u)) 1fr calc(73 * var(--perrys-u));
    gap: 0;
    align-items: end;
    width: 100%;
    padding: 0;
    margin: 0 0 calc(16 * var(--perrys-u));
}

/* the italic "to" the comp sets between the two fields */
#jewelry .filterOptions[data-type="slider"] .doubleSliderInputTable::before {
    content: "to";
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    font-family: var(--perrys-font-serif);
    font-style: italic;
    font-size: calc(11 * var(--perrys-u));
    line-height: 1;
    color: var(--perrys-black);
    transform: translateY(calc(-4 * var(--perrys-u)));
}

#jewelry .filterOptions[data-type="slider"] .doubleSliderInputCell:first-of-type {
    grid-column: 1;
    grid-row: 1;
}

#jewelry .filterOptions[data-type="slider"] .doubleSliderInputCell:last-of-type {
    grid-column: 3;
    grid-row: 1;
}

#jewelry .filterSection .fromSliderInput,
#jewelry .filterSection .toSliderInput,
#jewelry .filterSection input[type="text"],
#jewelry .filterSection input[type="number"] {
    width: 100%;
    max-width: 100%;
    border: 0;
    border-bottom: 1px solid var(--perrys-black);
    border-radius: 0;
    background: none;
    padding: 0 0 calc(5 * var(--perrys-u));
    font-family: var(--perrys-font-serif);
    font-size: calc(11.5 * var(--perrys-u));
    line-height: calc(16 * var(--perrys-u));
    text-align: center;
    color: var(--perrys-black);
}

#jewelry .filterSection .fromSliderInput:focus,
#jewelry .filterSection .toSliderInput:focus {
    border-bottom-color: var(--perrys-olive);
    box-shadow: none;
    outline: none;
}

/* Track: 1px, sage, edge to edge of the rail. Master widens the slider by 24 and pulls it back
   with a negative margin to make room for the 40px handles; the comp's handles are 6px and sit
   on the track's ends, so the widening is undone and the line spans the rail. */
#jewelry .grid-filter-component.range-slider .irs--round {
    width: 100%;
    height: calc(12 * var(--perrys-u));
    margin: 0;
}

#jewelry .grid-filter-component.range-slider .irs--round .irs-line,
#jewelry .grid-filter-component.range-slider .irs--round .irs-bar {
    top: calc(5.5 * var(--perrys-u));
    height: calc(1 * var(--perrys-u));
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* Made Outside QA: the slider colour was hard to read. The comp draws the track and both dots in the sage itself
   (dots 6 across); the tint used before was 1.3:1 on the white rail. The chosen range and the dots are the sage;
   the stretch outside the chosen range keeps the tint, so a narrowed range still reads. */
#jewelry .grid-filter-component.range-slider .irs--round .irs-line {
    background-color: var(--perrys-plp-track);
}

#jewelry .grid-filter-component.range-slider .irs--round .irs-bar {
    background-color: var(--perrys-sage);
    width: auto;
}

/* Handle: master's 40px square stays as the touch target; only its dot is resized. */
#jewelry .grid-filter-component.range-slider .irs--round .irs-handle {
    top: calc(-14 * var(--perrys-u));
    width: calc(40 * var(--perrys-u));
    height: calc(40 * var(--perrys-u));
    background: transparent;
    border: 0;
    box-shadow: none;
}

#jewelry .grid-filter-component.range-slider .irs--round .irs-handle::before {
    width: calc(6 * var(--perrys-u));
    height: calc(6 * var(--perrys-u));
    background-color: var(--perrys-sage);
    box-shadow: none;
}

#jewelry .grid-filter-component.range-slider .irs--round .irs-handle:hover::before,
#jewelry .grid-filter-component.range-slider .irs--round .irs-handle.state_hover::before {
    transform: translate(-50%, -50%) scale(1.25);
    box-shadow: none;
}

/* The range bounds under the track (written by js/pages/jewelry.js). */
#jewelry .perrys-plp-bounds {
    display: flex;
    justify-content: space-between;
    margin: calc(2 * var(--perrys-u)) 0 0;
    font-family: var(--perrys-font-serif);
    font-size: calc(11.5 * var(--perrys-u));
    line-height: calc(17 * var(--perrys-u));
    color: var(--perrys-black);
}

#jewelry .clearSearchReminderButton {
    display: none;
}

/* Closing bands: Instagram, then the newsletter sign-up */
/* ----------------------------- */
/* Markup lives in the shadowed html/pages/jewelry/templates/jewelry-v2.html and is the
   platform's own social-carousel and newsletter-form widgets, so the platform's own scripts
   hydrate them. The shared presentation is already on the page — local.css imports every page
   stylesheet on every page — so .perrys-insta-section and .perrys-insta-handle come from
   overrides/components.css and the feed's grid (.perrys-insta-feed, including its 2-up phone
   layout) from pages/home.css.

   The newsletter form is the homepage's: overrides/components.css restates pages/home.css's
   underline-field form for every page's sign-up section, this band's included, so the store has
   one form wherever it appears. The spacing between the two bands is the homepage's too. */
#jewelry .perrys-plp-outro {
    background: var(--perrys-ivory);
}

/* Both bands sit in a .container-fluid.px-0, so their Bootstrap rows have no parent padding for
   their negative gutter margins to sit in and the page scrolls 10px sideways. Absorbing the
   gutter on the row is the Bootstrap contract and is a no-op everywhere else — the same fix
   overrides/components.css already applies to the newsletter form's own inner row. */
#jewelry .perrys-plp-outro > .container-fluid > .row {
    --bs-gutter-x: 0;
    margin-inline: 0;
}

/* As on the homepage, the band ends at its posts and the newsletter below sets the gap */
#jewelry .perrys-plp-instagram {
    padding-bottom: 0 !important;
}

/* PageBuilder puts margin:-5px on a link container so a button's own 5px margin cancels. Above
   992 this band has no side padding for that to sit in, so the page scrolls 5px sideways; the
   handle is centred text, not a button, so the negative margin has nothing to cancel here. */
#jewelry .perrys-plp-instagram .link-container {
    margin-inline: 0;
}

/* The homepage's spacing (pages/home.css, 18) */
#jewelry .perrys-plp-newsletter {
    padding: 95.5px 0 105px !important;
}

@media (min-width: 992px) {
    #jewelry .perrys-plp-newsletter {
        padding: 150px 0 125px !important;
    }
}

/* From 768 the closing bands sit on the same measure as the grid above them, so the newsletter
   photo's left edge lines up with the filter rail; phones run them full width, as the homepage does
   (the 52px inset left the form 188px wide). The grid page pads a .container-fluid 20px above and
   below; the homepage's bands have none, so the lead, the posts and the newsletter keep the
   homepage's spacing only without it. */
#jewelry .perrys-plp-outro > .container-fluid {
    max-width: none;
    padding-block: 0;
}

@media (min-width: 768px) {
    #jewelry .perrys-plp-outro > .container-fluid {
        width: min(calc(100% - 2 * var(--perrys-inset-margin)), var(--perrys-w-inset));
        margin-inline: auto;
    }
}

#jewelry .perrys-plp-newsletter > .container-fluid > .row {
    align-items: center;
    width: calc(100% - 2 * var(--perrys-plp-band-inset));
    margin-inline: auto;
}

/* From 992, photo and copy start together at the top of the row, as on the homepage; centred, the
   photo dropped below the copy wherever the copy ran taller (43px at 1024) */
@media (min-width: 992px) {
    #jewelry .perrys-plp-newsletter > .container-fluid > .row {
        align-items: flex-start;
    }
}

#jewelry .perrys-plp-newsletter .perrys-split-img img {
    display: block;
    width: 100%;
    height: auto;
}

#jewelry .perrys-plp-newsletter .perrys-split-title {
    margin-bottom: calc(24 * var(--perrys-u));
}

@media (min-width: 768px) {
    #jewelry .perrys-plp-newsletter .perrys-split-media {
        flex: 0 0 calc(422 * var(--perrys-u));
        max-width: calc(422 * var(--perrys-u));
    }

    #jewelry .perrys-plp-newsletter .perrys-split-text {
        flex: 1 1 auto;
        max-width: none;
        padding-left: calc(80 * var(--perrys-u));
    }
}

/* The form is the homepage's, from overrides/components.css, as on every page with the sign-up */

@media (max-width: 767.98px) {
    #jewelry .perrys-plp-newsletter .perrys-split-text {
        margin-top: calc(32 * var(--perrys-u));
        padding-left: 0;
    }
}

/* Products */
/* ----------------------------- */
#jewelry .grid-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(52 * var(--perrys-u)) var(--perrys-plp-tile-gap);
}

/* The platform's column keeps a Bootstrap gutter padding; the comp's gap is the grid's own. */
#jewelry .grid-col {
    min-width: 0;
    padding: 0;
}

/* The comp puts the wishlist heart beside the product name, but the platform emits it above,
   in .grid-item-top-content, over the photograph. Rather than fork grid.html for one control,
   the tile becomes a two-column grid and the heart is placed into the caption row. The platform
   REMOVES .btn-wishlist from the DOM when wishlists are off (grid.ts removeHiddenGridElements),
   so the column simply collapses — nothing is left hanging. */
#jewelry .grid-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "image image"
        "content heart";
    column-gap: calc(10 * var(--perrys-u));
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* The comp's tiles are a consistent square with the piece shown whole; the platform's markup
   puts Bootstrap's .object-fit-cover on every image, which crops. That utility carries
   !important, so overriding it does too — the sanctioned exception in the house CSS rules. */
#jewelry .grid-item-image {
    grid-area: image;
    overflow: hidden;
    background: var(--perrys-white);
    aspect-ratio: 1 / 1;
}

#jewelry .grid-item-image .grid-item-carousel-wrapper,
#jewelry .grid-item-image .carousel,
#jewelry .grid-item-image .carousel-inner,
#jewelry .grid-item-image .carousel-item,
#jewelry .grid-item-image .grid-item-static {
    height: 100%;
}

#jewelry .grid-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    padding: calc(6 * var(--perrys-u));
}

#jewelry .grid-item-content {
    grid-area: content;
    padding: calc(20 * var(--perrys-u)) 0 0;
    background: none;
}

#jewelry .grid-item-top-content .right,
#jewelry .grid-item-top-content .left {
    padding: 0;
    margin: 0;
}

#jewelry .grid-item-top-content {
    grid-area: heart;
    position: static;
    inset: auto;
    padding: calc(20 * var(--perrys-u)) 0 0;
    background: none;
    display: flex;
    align-items: flex-start;
}

/* Not in the comp's tile. */
#jewelry .product-badges,
#jewelry .grid-item-detail-wrap,
#jewelry .grid-item-action,
#jewelry .grid-item-vendor {
    display: none;
}

/* 15.5 wide in the comp and flush with the tile's right edge; the platform's button carries
   icon-font padding that made it 32 and pushed it 4 off the edge. */
#jewelry .btn-wishlist {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: calc(15.5 * var(--perrys-u));
    height: calc(15.5 * var(--perrys-u));
    min-width: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    line-height: 1;
    color: var(--perrys-black);
    font-size: calc(15.5 * var(--perrys-u));
}

#jewelry .btn-wishlist:focus-visible {
    outline: 2px solid var(--perrys-olive);
    outline-offset: 3px;
}

/* "product image grows on hover" (the agency's own note on this frame) */
#jewelry .grid-item-image img {
    transition: transform 450ms var(--perrys-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    #jewelry .grid-item:hover .grid-item-image img {
        transform: scale(1.05);
    }

    #jewelry .grid-item:hover .grid-item-title {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

#jewelry .grid-item-title-link {
    display: block;
    text-decoration: none;
}

#jewelry .grid-item-title-link:focus-visible {
    outline: 2px solid var(--perrys-olive);
    outline-offset: 3px;
}

/* The comp's captions are a uniform three lines, which is what keeps the rows aligned. Real
   product names run from one line to four, so the visible name is clamped to three; the full
   name stays available because the platform already puts it in the link's `title` and
   `aria-label`, so nothing is lost to a screen reader or to hover. */
#jewelry .grid-item-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(66 * var(--perrys-u));
    font-family: var(--perrys-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: calc(18 * var(--perrys-u));
    line-height: calc(22 * var(--perrys-u));
    letter-spacing: 0;
    color: var(--perrys-black);
}

#jewelry .grid-item-price {
    margin-top: calc(14 * var(--perrys-u));
    font-family: var(--perrys-font-display);
    font-size: calc(20 * var(--perrys-u));
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--perrys-black);
}

/* Paging: the comp's single sage "Show More" */
/* ----------------------------- */
#jewelry .grid-paging {
    border: 0;
    padding: 0;
    margin-top: calc(56 * var(--perrys-u));
}

#jewelry .grid-paging-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(18 * var(--perrys-u));
}

#jewelry .grid-paging-text,
#jewelry .grid-paging-progress {
    display: none;
}

/* Square edges, as every other button on the site has (Made Outside QA). The button carries the monolith's
   `.btn-round`, which sets a 200px radius with !important, so the square edge needs it too. */
#jewelry .btn-load-more {
    min-width: calc(180 * var(--perrys-u));
    height: calc(48 * var(--perrys-u));
    padding-inline: calc(28 * var(--perrys-u));
    border: 0;
    border-radius: 0 !important;
    background: var(--perrys-sage);
    color: var(--perrys-white);
    font-family: var(--perrys-font-sans);
    font-size: calc(14 * var(--perrys-u));
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

#jewelry .btn-load-more:hover,
#jewelry .btn-load-more:focus {
    background: var(--perrys-olive);
    color: var(--perrys-white);
}

#jewelry .btn-load-more:focus-visible {
    outline: 2px solid var(--perrys-olive);
    outline-offset: 3px;
}

/* Empty state */
/* ----------------------------- */
/* The empty state is the platform's own copy on a grey panel. The comp has no empty state, so
   it takes the page's own ground and type rather than a colour from outside the palette. It is
   a child of .grid-row, so it has to span all three tracks. */
#jewelry .grid-row .grid-empty-state {
    grid-column: 1 / -1;
    padding: calc(72 * var(--perrys-u)) calc(24 * var(--perrys-u));
    background: none;
    border: 0;
    text-align: center;
}

#jewelry .grid-row .grid-empty-state p {
    max-width: calc(520 * var(--perrys-u));
    margin: 0 auto;
    font-family: var(--perrys-font-serif);
    font-style: italic;
    font-size: calc(15 * var(--perrys-u));
    line-height: calc(30 * var(--perrys-u));
    letter-spacing: 0.06em;
    color: var(--perrys-black);
}

/* Tablet and phone */
/* ----------------------------- */
/* The comp has no mobile frame for this page. Below the rail's breakpoint the platform's own
   offcanvas filter takes over — which is why .grid-toolbar-left is only hidden from 992px up —
   and the band becomes a single column at the site's standard 16px gutter. */
@media (max-width: 991.98px) {
    #jewelry {
        --perrys-u: 1px;
    }

    /* The desktop rule clears this container's platform gutter with !important, so the phone
       gutter has to be restored the same way or the tiles bleed off the left edge. */
    #jewelry #content-header > .container,
    #jewelry .grid-section-block-container {
        max-width: none;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #jewelry #content-header > .container {
        padding-top: 40px;
    }

    #jewelry #grid-toolbar {
        margin-top: 34px;
    }

    #jewelry #content-banner > .container-fluid {
        padding-inline: 16px;
    }

    #jewelry #content-banner [class*="ratio-"] {
        --bs-aspect-ratio: 62%;
    }

    #jewelry #content-banner .content-banner .content-banner-title-overlay > span {
        min-width: 0;
        max-width: calc(100% - 32px);
        font-size: 14px;
        letter-spacing: 0.14em;
    }

    #jewelry .grid-container {
        display: block;
    }

    #jewelry .grid-sidebar {
        display: none;
    }

    #jewelry .universal-grid {
        padding-top: 32px;
        margin-top: 28px;
    }

    #jewelry .grid-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 16px;
    }

    /* the clamp and the reserved height have to agree, or the fourth line shows through */
    #jewelry .grid-item-title {
        font-size: 16px;
        line-height: 20px;
        min-height: 60px;
    }

    /* the offcanvas filter pill carries the category name and was clipping mid-word */
    #jewelry .grid-toolbar-left {
        /* basis 0, not auto: with an auto basis the pill's content width becomes the group's
           starting size and the bar holds itself open past the viewport, which is where this
           page's 181px of phone overflow came from. */
        min-width: 0;
        flex: 1 1 0;
        overflow: hidden;
    }

    #jewelry .grid-toolbar {
        max-width: 100%;
    }


    /* The pill truncates only if every wrapper between it and the flex item can shrink; the
       platform's two inner wrappers default to min-width:auto and hold the bar open. */
    #jewelry .grid-toolbar-left-inner,
    #jewelry .grid-toolbar-left-scrolling-area {
        min-width: 0;
        max-width: 100%;
    }

    /* The bar keeps only "All Filters", which is what the frame draws. The active-category pill
       repeats the page's own h1 and breadcrumb word for word, and together the two pills are
       wider than the scrolling area — so the category name was being clipped mid-word with the
       platform's two scroll-arrow overlays sitting on top of it. Dropping the pill leaves the
       arrows with nothing to scroll, so they go too. */
    #jewelry .grid-toolbar-left .pill-filter,
    #jewelry .grid-toolbar-left .scroll-button {
        display: none;
    }

    #jewelry .grid-toolbar-left-scrolling-area {
        overflow: visible;
    }

    #jewelry .grid-toolbar .pill {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #jewelry .grid-toolbar-right {
        flex: 0 0 auto;
    }

    #jewelry .grid-item-price {
        font-size: 17px;
    }

    #jewelry #page-title {
        font-size: 24px;
    }

    #jewelry .grid-toolbar {
        justify-content: space-between;
    }
}