/**
 * Perry’s Diamonds & Estate Jewelry: product detail page (PDP)
 *
 * Restyles the platform's v2 PDP — the one the store runs (pdpVersion = 2), assembled by
 * UniversalProductDetailsPageAssembler from html/fragments/universal-product-details/templates/.
 * Those 195 templates are individually shadowable from v6client, so the few structural changes
 * the comp needs are made there; everything visual is here.
 *
 * Geometry measured from the Made Outside frames at their comp widths
 * (full-site/figma/pdp/ at 1280, full-site/figma/pdp-mobile/ at 384) and written as
 * `calc(N * var(--perrys-u))`, the same convention as the five pages already built.
 *
 * Measured blocks at 1280: gallery 59–544 (485) · gutter 87 · summary 631–1181 (550),
 * band 1122 centred; the action buttons and the trust strip both span the summary's full width.
 *
 * NOTE on the master stylesheet: css/fragments/universal-product-details.css is served from
 * v6master by TMPLT::includeMasterCSS, which has no local fallback — it CANNOT be shadowed.
 * Overrides here therefore win on specificity (the page's #jewelry-details body id) rather than
 * by replacing it.
 */

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

    /* The band tracks the site's own measure instead of freezing at a 1280-derived 1122: the
       viewport less the 52 inset margin the PageBuilder sections use, less the 27 the comp sets
       between that edge and the product, capped at the same --perrys-w-inset ceiling. 1122 at
       the comp's 1280, 1346 from 1508 up. The summary column stays 550 — a spec list does not
       improve by getting wider — so the growth all goes to the photograph. */
    --perrys-pdp-gutter: calc(87 * var(--perrys-u));
    --perrys-pdp-summary: calc(550 * var(--perrys-u));
    --perrys-pdp-band: min(
        calc(100% - 2 * var(--perrys-inset-margin) - 54px),
        calc(var(--perrys-w-inset) - 54px)
    );
    --perrys-pdp-rule: 1px solid rgba(0, 0, 0, 0.14);

    /* The thumbnail strip is the same proportion of the photograph in both comps: four chips at
       22.9% of the gallery with a 2.8% gap, which fills it exactly (1289 frame: 118.5 and 14.5
       inside 517.5; 380 frame: 76 and 9 inside 330 — the same numbers). Held as percentages the
       strip is the comp at every width rather than only at the width it was drawn at, which a
       fixed 88 could never be: the gallery grows 485 -> 709 and the chips did not. */
    --perrys-pdp-thumb-n: 4;
    --perrys-pdp-thumb-gap: 2.8%;
    --perrys-pdp-thumb-top: 3.3%;
}

#jewelry-details #content-body > section.default > .container {
    width: var(--perrys-pdp-band);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}


#jewelry-details #content-body > section.default {
    /* the platform's 10px side padding made the band 20 narrower than its own measure */
    padding: calc(34 * var(--perrys-u)) 0 calc(72 * var(--perrys-u));
    background: var(--perrys-ivory);
}

/* Two columns */
/* ----------------------------- */
#jewelry-details #content-body .row:has(> #jewelry-details-image-column) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--perrys-pdp-summary);
    column-gap: var(--perrys-pdp-gutter);
    align-items: start;
    margin: 0;
}

#jewelry-details #jewelry-details-image-column,
#jewelry-details #jewelry-details-summary-column {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
}

/* Breadcrumb — the comp puts it at the top of the summary column, above the product name */
/* ----------------------------- */
#jewelry-details #page-breadcrumb .breadcrumb,
#jewelry-details .breadcrumb {
    justify-content: flex-start;
    margin-bottom: calc(22 * var(--perrys-u));
    font-family: var(--perrys-font-serif);
    font-size: calc(13 * var(--perrys-u));
    letter-spacing: 0.04em;
}

#jewelry-details .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-details .breadcrumb-item a {
    color: var(--perrys-black);
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

/* Gallery */
/* ----------------------------- */
/* The platform renders an Owl carousel of MagicZoom figures with a thumbnail rail beside it
   (.column-slider-left / .column-slider-thumbs). The comp keeps exactly that pairing but puts
   the thumbnails in a row underneath, so the rail is re-flowed rather than rebuilt. */
/* The shadowed media-object-legacy.html asks for the platform's own `column-slider-bottom`
   placement, and the monolith answers with `flex-direction: column !important` — but it pairs
   that with `flex-wrap: wrap`, and the gallery's height is constrained, so the thumbnail rail
   wrapped into a second flex column and landed BESIDE the photograph instead of under it.
   nowrap is the whole fix; the !importants match the ones being corrected.
   The inline `top` is set by the platform's sticky script, which the comp does not use here. */
#jewelry-details #jewelry-details-media-objects {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: calc(14 * var(--perrys-u));
    width: 100%;
    /* a 100px left padding reserves the side thumbnail rail; with the rail underneath the
       photograph should use the column's full width */
    padding: 0 !important;
    top: auto !important;
    position: static !important;
}

#jewelry-details #jewelry-details-main-images {
    width: 100%;
    background: var(--perrys-white);
}

/* The row is `#jewelry-details-alternate-image-thumbs`; its container is only the positioning
   box master pins into the side rail. Laying the container out as the flex row is why the gap
   never reached the chips — they sat edge to edge on an 88 pitch. */
/* A grid, not a flex row: the comp's four chips and three gaps come to exactly 100%, and as
   flex bases that rounds a hair over and drops the last chip onto a second line. A fixed column
   count divides the row exactly, and a product with fewer photographs simply leaves the later
   cells empty — chips stay one size across the catalogue instead of stretching per product.
   row-gap is a length: a percentage row-gap resolves against a height this box does not have. */
#jewelry-details .column-slider-thumbs,
#jewelry-details #jewelry-details-alternate-image-thumbs {
    display: grid;
    grid-template-columns: repeat(var(--perrys-pdp-thumb-n), minmax(0, 1fr));
    justify-content: start;
    gap: calc(12 * var(--perrys-u)) var(--perrys-pdp-thumb-gap);
    width: 100%;
    max-height: none;
    overflow: visible;
}

#jewelry-details .column-slider-thumbs,
#jewelry-details #jewelry-details-alternate-image-thumbs-container {
    max-width: none;
}

#jewelry-details .column-slider-thumbs > * ,
#jewelry-details #jewelry-details-alternate-image-thumbs > * {
    width: auto;
    height: auto;
    min-width: 0;
    aspect-ratio: 1 / 1;
    align-self: start;
    margin: 0;
    padding: 0;
    border: var(--perrys-pdp-rule);
    background: var(--perrys-white);
}

/* Five is this catalogue's ceiling (nine items carry a fifth photograph); the platform hands us
   the count on the gallery, so the row divides by it and stays a single row. Anything beyond
   wraps rather than overflowing. */
#jewelry-details #jewelry-details-media-objects[data-image-count="5"] .column-slider-thumbs,
#jewelry-details #jewelry-details-media-objects[data-image-count="5"] #jewelry-details-alternate-image-thumbs {
    --perrys-pdp-thumb-n: 5;
}

#jewelry-details .column-slider-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    padding: calc(6 * var(--perrys-u));
}

#jewelry-details .jewelry-img,
#jewelry-details .mz-figure {
    background: var(--perrys-white);
}

#jewelry-details #jewelry-details-main-images img {
    width: 100%;
    height: auto;
    object-fit: contain !important;
}

/* "+ click to zoom" — the comp's affordance for the MagicZoom the platform already binds. */
#jewelry-details #jewelry-details-main-images .widget-inner {
    position: relative;
    display: block;
}

#jewelry-details #jewelry-details-main-images .owl-item.active .widget-inner::after {
    content: "+ Click to Zoom";
    position: absolute;
    right: calc(14 * var(--perrys-u));
    bottom: calc(12 * var(--perrys-u));
    font-family: var(--perrys-font-serif);
    font-size: calc(11 * var(--perrys-u));
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--perrys-black);
    pointer-events: none;
}

/* The "request photos on a model" line sits under the gallery (shadowed body template). */
#jewelry-details .perrys-pdp-model-request {
    margin: calc(6 * var(--perrys-u)) 0 0;
    font-family: var(--perrys-font-serif);
    font-size: calc(13 * var(--perrys-u));
    line-height: calc(22 * var(--perrys-u));
    color: var(--perrys-black);
}

#jewelry-details .perrys-pdp-model-request a {
    font-style: italic;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Summary: name, style number, price */
/* ----------------------------- */
#jewelry-details #jewelry-details-header {
    margin-bottom: calc(10 * var(--perrys-u));
}

/* The vendor/brand line above the name is not in the comp. */
#jewelry-details #jewelry-details-header .brand-subheading,
#jewelry-details #jewelry-details-brand-image-mobile {
    display: none;
}

/* The product name. Made Outside QA: it read small, and it was: the size set here never applied, because master's
   `.detail.detail-h1 h1` rule (a two-ID chain) outranks a plain `#jewelry-details #jewelry-details-h1`, so the
   name rendered at 24. The chain is repeated, with the name's own id, to outrank it. The size is the comp's: the
   feature role, Cormorant italic 38/46 at 1280 and 28/34 at 375, which "Art Deco Diamond & Sapphire Ring" fills
   442 wide on the frame (overrides/typography.css). */
#jewelry-details-summary-column #jewelry-details-summary .detail.detail-h1 h1#jewelry-details-h1 {
    margin: 0;
    font-family: var(--perrys-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--perrys-di-feature-size);
    line-height: var(--perrys-di-feature-lh);
    letter-spacing: -0.04em;
    text-transform: none;
    color: var(--perrys-black);
}

/* The style number under the name: Montserrat caps, the kicker's 13 at 0.25em, as the comp sets it (Made Outside
   QA: it should be the sans). Master's `.detail` rule outranks a plain class here too, so the chain is repeated. */
#jewelry-details-summary-column #jewelry-details-summary p.detail.perrys-pdp-styleno {
    margin-top: calc(14 * var(--perrys-u));
    font-family: var(--perrys-font-sans);
    font-size: 13px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--perrys-black);
}

#jewelry-details .detail-style-no {
    margin-top: calc(14 * var(--perrys-u));
    font-family: var(--perrys-font-serif);
    font-size: calc(12 * var(--perrys-u));
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--perrys-black);
}

#jewelry-details #jewelry-details-price-container {
    margin-top: calc(16 * var(--perrys-u));
    margin-bottom: 0;
}

#jewelry-details #jewelry-details-price {
    font-family: var(--perrys-font-display);
    font-weight: 400;
    font-size: calc(26 * var(--perrys-u));
    line-height: 1.2;
    color: var(--perrys-black);
}

/* The platform's stock flag and availability lines are not in the comp's summary. */
#jewelry-details .detail-in-stock-flag,
#jewelry-details #jewelry-details-availability,
#jewelry-details #jewelry-details-stock,
#jewelry-details .detail-accepted-payment-methods {
    display: none;
}

/* Actions */
/* ----------------------------- */
#jewelry-details .details-checkout hr {
    display: none;
}

/* The platform pads this column by 20, which made every block inside it 510 wide; the comp's
   own measure is 527 — the accordion block reads 529 and the button pair 526 — so the inset is
   11.5, and the summary's content lines up with the column it sits in. */
#jewelry-details #jewelry-details-summary-column #jewelry-details-summary #jewelry-details-summary-inner {
    padding-inline: calc(11.5 * var(--perrys-u));
}

/* The action pair, the summary inset and the button type are all owned by the deep override
   block further down this file (search "main-action-buttons"), because master reaches them
   through #jewelry-details-summary-column #jewelry-details-summary .details-checkout and a
   single-id rule here never applies. Nothing about them is written twice. */

/* Primary: the comp's sage "Add to Bag" (the word comes from configValues.cartWord). */
#jewelry-details .main-action-buttons .btn-primary,
#jewelry-details .main-action-buttons .btn-success,
#jewelry-details .main-action-buttons > .flex-grow-1 .btn {
    background: var(--perrys-sage);
    border: 0;
    color: var(--perrys-white);
}

#jewelry-details .main-action-buttons .btn-primary:hover,
#jewelry-details .main-action-buttons > .flex-grow-1 .btn:hover {
    background: var(--perrys-olive);
    color: var(--perrys-white);
}

/* Secondary: "Add to Favorites" — the platform's wishlist button, on the comp's mist ground. */
#jewelry-details .main-action-buttons > .flex-shrink-0 .btn,
#jewelry-details .btn-wishlist {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10 * var(--perrys-u));
    background: var(--perrys-mist);
    border: 0;
    color: var(--perrys-black);
}

#jewelry-details .main-action-buttons > .flex-shrink-0 .btn:hover {
    background: var(--perrys-beige);
    color: var(--perrys-black);
}

#jewelry-details .main-action-buttons .btn:focus-visible,
#jewelry-details .accordion-button:focus-visible,
#jewelry-details .perrys-pdp-card a:focus-visible {
    outline: 2px solid var(--perrys-olive);
    outline-offset: 3px;
}

/* Trust strip: the comp's three cells between hairlines */
/* ----------------------------- */
#jewelry-details .detail-action-icons {
    margin-top: calc(26 * var(--perrys-u));
    border-top: var(--perrys-pdp-rule);
    border-bottom: var(--perrys-pdp-rule);
    background: none;
}

#jewelry-details .detail-action-icons-inner,
#jewelry-details .details-action-icons-list {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}

#jewelry-details .detail-action-icon {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(13 * var(--perrys-u)) calc(6 * var(--perrys-u));
    text-align: center;
}

#jewelry-details .detail-action-icon + .detail-action-icon {
    border-left: var(--perrys-pdp-rule);
}

#jewelry-details .detail-action-icon i,
#jewelry-details .detail-action-icon img,
#jewelry-details .detail-action-icon svg {
    display: none;
}

#jewelry-details .detail-action-icon-label,
#jewelry-details .detail-action-icon a {
    font-family: var(--perrys-font-serif);
    font-size: calc(11 * var(--perrys-u));
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--perrys-black);
    text-decoration: none;
}

/* Description, ring size, showroom link */
/* ----------------------------- */
#jewelry-details #jewelry-details-description {
    margin-top: calc(26 * var(--perrys-u));
}

#jewelry-details #jewelry-details-description-text,
#jewelry-details .detail-description {
    font-family: var(--perrys-font-serif);
    font-size: calc(14 * var(--perrys-u));
    line-height: calc(26 * var(--perrys-u));
    color: var(--perrys-black);
}

#jewelry-details .detail-description strong {
    font-weight: 700;
}

#jewelry-details #jewelry-details-description-text-more,
#jewelry-details #jewelry-details-description-text-less {
    font-style: italic;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#jewelry-details .perrys-pdp-sizeline {
    margin-top: calc(14 * var(--perrys-u));
    font-family: var(--perrys-font-serif);
    font-size: calc(14 * var(--perrys-u));
    line-height: calc(26 * var(--perrys-u));
}

#jewelry-details .perrys-pdp-sizeline strong {
    font-weight: 700;
}

#jewelry-details .perrys-pdp-appointment-link {
    display: inline-block;
    margin-top: calc(14 * var(--perrys-u));
    font-family: var(--perrys-font-serif);
    font-style: italic;
    font-size: calc(14 * var(--perrys-u));
    line-height: calc(24 * var(--perrys-u));
    color: var(--perrys-black);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Ring size chips */
#jewelry-details #jewelry-details-ring-sizes .btn,
#jewelry-details .details-variants .btn {
    border-radius: 0;
    font-family: var(--perrys-font-serif);
    font-size: calc(13 * var(--perrys-u));
}

/* Accordions */
/* ----------------------------- */
#jewelry-details #details-groups,
#jewelry-details .perrys-pdp-accordion {
    margin-top: calc(30 * var(--perrys-u));
    border-top: var(--perrys-pdp-rule);
}

#jewelry-details .accordion-item {
    border: 0;
    border-bottom: var(--perrys-pdp-rule);
    background: none;
    border-radius: 0;
}

#jewelry-details .accordion-header {
    margin: 0;
}

/* Master styles this button through a two-ID chain —
   `#jewelry-details-summary-column #jewelry-details-summary .accordion .accordion-button`
   (2,2,0) — which beat the single-ID rule that used to live here, so the size and the padding
   written below never applied and every row rendered at master's 14.4px / 10px. Matching that
   depth is not enough: master's sheet still wins the tie on source order, so the body id is
   added for one more ID of weight. Specificity, not !important.

   Measured from the PDP frame: six rows on a 74 pitch separated by one hairline, the label
   vertically centred, the caret 11.4 x 6.5 flush right. The labels are MONTSERRAT, not the page
   serif — solved against all five clean label widths at once (PRODUCT DETAILS 169.4, ASK A
   JEWELRY EXPERT 225.0, SIZE GUIDE 104.8, VISIT OUR SHOWROOM 211.1, BOOK A VIRTUAL APPOINTMENT
   297.5), where 13.5px / 0.2em lands within 1%. Cap height agrees: 9.4 measured, 9.45 expected. */
#jewelry-details #jewelry-details-summary-column #jewelry-details-summary .accordion .accordion-button,
#jewelry-details .accordion-button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: calc(73 * var(--perrys-u));
    padding: calc(10 * var(--perrys-u)) 0;
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    font-family: var(--perrys-font-sans);
    font-size: calc(13.5 * var(--perrys-u));
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--perrys-black);
    text-align: left;
}

/* Master paints a background-image caret; the comp draws the same hairline chevron the filter
   rail uses, so it is replaced rather than resized. */
#jewelry-details #jewelry-details-summary-column #jewelry-details-summary .accordion .accordion-button::after,
#jewelry-details .accordion-button::after {
    content: "";
    flex: 0 0 auto;
    width: calc(11.4 * var(--perrys-u));
    height: calc(6.5 * var(--perrys-u));
    margin-left: auto;
    border: 0;
    background-color: currentcolor;
    background-image: none;
    -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");
    transform: rotate(0deg);
    transition: transform 0.25s ease-out;
}

#jewelry-details #jewelry-details-summary-column #jewelry-details-summary .accordion .accordion-button:not(.collapsed)::after,
#jewelry-details .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}

/* Hover state on the row labels (Made Outside QA: add an underline hover state, shown on Product Details). */
@media (hover: hover) and (pointer: fine) {
    #jewelry-details #jewelry-details-summary-column #jewelry-details-summary .accordion .accordion-button:hover,
    #jewelry-details .accordion-button:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}

/* Master reaches the panel through the same two-ID chain as the button, so these need the body
   id too or the panel keeps master's 14.4/18. */
#jewelry-details #jewelry-details-summary-column #jewelry-details-summary .accordion .accordion-body,
#jewelry-details .accordion-body {
    /* Master opens the panel with `padding: 1.25rem 0 .125rem`. The rule that re-typed the panel
       carried a shorthand with a zero top, which took that opening space away with it and left
       the first line sitting on the divider. The panel is even top and bottom. */
    padding: calc(22 * var(--perrys-u)) 0;
    /* An open row shows one rule, under its content (Made Outside QA: remove the extra rule when a section is
       expanded). The platform draws a second hairline across the top of the panel, directly under the header. */
    border-top: 0;
    font-family: var(--perrys-font-serif);
    font-size: calc(14 * var(--perrys-u));
    line-height: calc(24 * var(--perrys-u));
}

/* The panel is a two-column grid in master, which is right for the spec rows and wrong for the
   prose panels — a sentence was being set to half the column with its links stranded beside it.
   Prose spans; `.detail` rows keep the grid. The global `p` rule also outranks the panel's own
   type on font-size, so running text is restated here at the panel's size. */
#jewelry-details #jewelry-details-summary-column #jewelry-details-summary .accordion .accordion-body > p,
#jewelry-details #jewelry-details-summary-column #jewelry-details-summary .accordion .accordion-body > .perrys-pdp-acc-links,
#jewelry-details .accordion-body > p {
    grid-column: 1 / -1;
    font-size: calc(14 * var(--perrys-u));
    line-height: calc(24 * var(--perrys-u));
}

/* Master sizes the rows' own <strong> and <span>, so the panel rule alone cannot reach them. */
#jewelry-details #jewelry-details-summary-column #jewelry-details-summary .accordion .detail,
#jewelry-details #jewelry-details-summary-column #jewelry-details-summary .accordion .detail strong,
#jewelry-details #jewelry-details-summary-column #jewelry-details-summary .accordion .detail span,
#jewelry-details #jewelry-details-summary-column #jewelry-details-summary .accordion .detail a {
    font-size: calc(14 * var(--perrys-u));
    line-height: calc(24 * var(--perrys-u));
}

/* Every spec row reads the same way. Master singles out the style number with uppercase and
   0.18em tracking on BOTH its label and its value, so one row in an otherwise sentence-case
   list shouted; it is brought back in line here. */
#jewelry-details #jewelry-details-summary-column #detail-group-general #jewelry-details-style-no,
#jewelry-details #jewelry-details-style-no,
#jewelry-details #jewelry-details-style-no strong,
#jewelry-details #jewelry-details-style-no span {
    text-transform: none;
    letter-spacing: 0.02em;
}

/* The spec table inside "Product Details": label above value, two columns, no rules */
#jewelry-details .accordion-body .detail,
#jewelry-details .accordion-body .row > [class*="col"] {
    margin-bottom: calc(14 * var(--perrys-u));
}

#jewelry-details .accordion-body strong,
#jewelry-details .accordion-body .detail-label {
    display: block;
    font-family: var(--perrys-font-serif);
    font-weight: 700;
    font-size: calc(13 * var(--perrys-u));
    letter-spacing: 0.02em;
}

/* Sections below the summary */
/* ----------------------------- */
#jewelry-details #jewelry-details-similar-items-section,
#jewelry-details .jewelry-details-recently-viewed-section,
#jewelry-details #jewelry-details-brand-section {
    background: var(--perrys-ivory);
    padding-block: calc(56 * var(--perrys-u));
}

#jewelry-details #jewelry-details-similar-items-section .container,
#jewelry-details .jewelry-details-recently-viewed-section .container {
    width: var(--perrys-pdp-band);
    max-width: none;
    margin-inline: auto;
}

#jewelry-details #jewelry-details-similar-items-section h2,
#jewelry-details .jewelry-details-recently-viewed-section h2 {
    margin-bottom: calc(34 * var(--perrys-u));
    font-family: var(--perrys-font-sans);
    font-size: calc(12 * var(--perrys-u));
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    text-align: center;
    color: var(--perrys-black);
}

/* The comp underlines the section kicker with the sage rule every other kicker has: 2 thick, hugging the words, 9
   below them (Made Outside QA: kicker rules green, at the "Why Perry's" distance). It was a black 1px rule 148
   wide on a ::after; the heading itself now carries the rule, as .perrys-kicker--rule does elsewhere. */
#jewelry-details #jewelry-details-similar-items-section h2,
#jewelry-details .jewelry-details-recently-viewed-section h2 {
    width: fit-content;
    margin-inline: auto;
    padding-bottom: 9px;
    border-bottom: 2px solid var(--perrys-sage);
    line-height: 13px;
}

#jewelry-details #jewelry-details-similar-items-section h2::after,
#jewelry-details .jewelry-details-recently-viewed-section h2::after {
    content: none;
}

/* The brand-info band ("About Estate Jewelry") is not in the PDP comp; the collection's own
   copy belongs on the Estate grid, and the comp replaces this slot with "Why Perry's". */
#jewelry-details #jewelry-details-brand-section {
    display: none;
}

/* Static bands added by the shadowed body template */
/* ----------------------------- */
/* The platform gives every section a 10px side padding, which was quietly making these bands
   20 narrower than the product band above them. */
#jewelry-details .perrys-pdp-band {
    padding-block: calc(78 * var(--perrys-u));
    padding-inline: 0;
}

#jewelry-details .perrys-pdp-band__inner {
    max-width: var(--perrys-pdp-band);
    margin-inline: auto;
    padding-inline: calc(16 * var(--perrys-u));
}

/* "Why Perry's for Estate Jewelry?" */
#jewelry-details .perrys-pdp-why {
    background: var(--perrys-ivory);
}

/* The comp's panel is 882 inside the 1122 band — a 120 margin either side, not a fixed width.
   Pinning the 882 left it stranded in the middle of an otherwise full-width band as soon as the
   page grew past 1280, which is what made this section look small on a large screen. The inset
   is what the design holds constant, so that is what is written. 104, not 120, because the band's
   inner already carries a 16 gutter for the phone layout: 1122 - 32 - 208 = 882 at the comp. */
#jewelry-details .perrys-pdp-why__panel {
    position: relative;
    width: calc(100% - 2 * calc(104 * var(--perrys-u)));
    max-width: none;
    margin-inline: auto;
    /* the ornamental strip is taken out of flow (below), so the panel reserves its height here:
       81.5 is the strip artwork's height at the comp's 882 panel, 90 the gap the comp leaves
       above it. A percentage cannot be used — padding percentages resolve against the PARENT's
       width, not the panel's, which over-reserved by 19px at 1280. */
    padding: calc(105 * var(--perrys-u)) calc(72 * var(--perrys-u)) calc(171.5 * var(--perrys-u));
    background-image: url("/images/perrys/pdp/why-bg.jpg");
    background-size: cover;
    background-position: center;
    text-align: center;
}

/* The kicker's rule is the sage 2px one every other kicker has, hugging the words 9 below them (Made Outside QA:
   rules green, and the same distance below the text as this example). It was a black 1px rule 346 wide on a
   ::after, which no other kicker has; the kicker now carries the rule itself. */
#jewelry-details .perrys-pdp-why__kicker {
    width: fit-content;
    margin: 0 auto calc(41 * var(--perrys-u));
    padding-bottom: 9px;
    border-bottom: 2px solid var(--perrys-sage);
    font-family: var(--perrys-font-sans);
    font-size: calc(13 * var(--perrys-u));
    line-height: 13px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

#jewelry-details .perrys-pdp-why__kicker::after {
    content: none;
}

#jewelry-details .perrys-pdp-why__title {
    margin: 0 0 calc(26 * var(--perrys-u));
    font-family: var(--perrys-font-display);
    font-weight: 400;
    font-size: clamp(26px, calc(20px + 0.9375vw), 32px);
    line-height: 1.22;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

#jewelry-details .perrys-pdp-why__body p {
    max-width: calc(585 * var(--perrys-u));
    margin: 0 auto calc(14 * var(--perrys-u));
    font-family: var(--perrys-font-serif);
    font-size: calc(16 * var(--perrys-u));
    line-height: calc(35 * var(--perrys-u));
}

#jewelry-details .perrys-pdp-why__stats {
    position: relative;
    max-width: calc(650 * var(--perrys-u));
    margin: calc(30 * var(--perrys-u)) auto 0;
    padding-top: calc(50 * var(--perrys-u));
    font-family: var(--perrys-font-display);
    font-style: italic;
    font-size: calc(21.5 * var(--perrys-u));
    line-height: calc(33 * var(--perrys-u));
}

#jewelry-details .perrys-pdp-why__stats::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(73 * var(--perrys-u));
    height: 1px;
    background: var(--perrys-sage);
    transform: translateX(-50%);
}

/* Placement as in the comp (Made Outside QA: check placement against the provided designs): the seal is 144 across
   and straddles the panel's right edge, its centre 180 above the panel's foot, level with the stat-line; the same
   placement as the Engagement panel. It was 132 across and inside the panel. */
#jewelry-details .perrys-pdp-why__seal {
    position: absolute;
    right: calc(-68 * var(--perrys-u));
    bottom: calc(108 * var(--perrys-u));
    width: calc(144 * var(--perrys-u));
    height: auto;
    opacity: 0.5;
}

/* The strip runs the panel's full width in the comp, but the panel's own side padding inset it.
   Widening it with negative margins worked at desktop and pushed the whole page 32px sideways on
   a phone, so it comes out of flow instead and spans the panel's padding box, exactly as the
   Engagement page's copy of this band already does. */
/* The strip's picture has a pure white ground baked in, which showed as a white box on the textured panel (Made
   Outside QA: remove the white background from the pattern). Multiply keeps the pattern and lets the panel's
   texture through, since white leaves what is beneath it as it is. */
#jewelry-details .perrys-pdp-why__band {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    mix-blend-mode: multiply;
}

/* Testimonial */
#jewelry-details .perrys-pdp-testimonial {
    background-image: url("/images/perrys/home/testimonial-bg.jpg");
    background-size: cover;
    background-position: center;
}

#jewelry-details .perrys-pdp-testimonial__inner {
    display: grid;
    grid-template-columns: calc(120 * var(--perrys-u)) minmax(0, 1fr);
    gap: calc(58 * var(--perrys-u));
    align-items: center;
    max-width: calc(940 * var(--perrys-u));
    margin-inline: auto;
}

#jewelry-details .perrys-pdp-testimonial__photo {
    width: 100%;
    height: auto;
}

#jewelry-details .perrys-pdp-testimonial__quote {
    font-family: var(--perrys-font-display);
    font-style: italic;
    font-size: var(--perrys-di-quote-size);
    line-height: var(--perrys-di-quote-lh);
    color: var(--perrys-black);
}

/* Each review's text is a <p> inside the quote; the store's p rule (typography.css) and the platform's
   p font-style set the element itself, which beats inheritance, so the paragraph takes the quote's type */
#jewelry-details .perrys-pdp-testimonial__quote p {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    line-height: inherit;
}

#jewelry-details .perrys-pdp-testimonial__quote::before {
    content: "\201C";
    display: block;
    font-family: var(--perrys-font-serif);
    font-style: normal;
    font-size: calc(96 * var(--perrys-u));
    line-height: 0.6;
    color: var(--perrys-quote);
}

#jewelry-details .perrys-pdp-testimonial__cite {
    display: block;
    margin-top: calc(22 * var(--perrys-u));
    font-family: var(--perrys-font-sans);
    font-style: normal;
    font-size: calc(12 * var(--perrys-u));
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

/* The quotes are the reviews feed's, one per carousel slide. The feed fills its grid cell (phones centre the
   cell's items, which would shrink it to its content and leave the carousel nothing to measure). */
#jewelry-details .perrys-pdp-testimonial__feed {
    width: 100%;
    min-width: 0;
}

/* The opening mark rises above the quote's first line; the carousel clips at its edges, so the clip box
   gets the mark's room above without moving the quote */
#jewelry-details .perrys-pdp-testimonial__feed .owl-stage-outer {
    margin-top: calc(-48 * var(--perrys-u));
    padding-top: calc(48 * var(--perrys-u));
}

/* A live feed returns up to 12 reviews, so the dash row wraps; it grows with its rows and spaces them as the
   homepage's does (components.css fixes the row at 16px with !important) */
#jewelry-details .perrys-pdp-testimonial__feed .owl-dots {
    height: auto !important;
    row-gap: 8px;
    margin-top: calc(32 * var(--perrys-u)) !important; /* components.css zeroes the dash row's margin with !important */
}

/* With no review to show the band hides rather than show a photograph beside an empty quote. The quote is the
   test, not the carousel: the template skips a review with no text, and the carousel still builds its own
   stage, dots and arrows around nothing */
#jewelry-details .perrys-pdp-testimonial:not(:has(.perrys-pdp-testimonial__quote)) {
    display: none;
}

/* Recent Store Reviews: the platform's rating summary and review cards. Made Outside QA: remove the gray background
   and the gray outline. The platform paints each card with the input background and the input border
   (`.store-reviews .reviews-list .review`, `.rating-avg`, `.rating-overall`, `.rating-avg-alt`, and the "out of 5"
   label inside the first); the cards sit on the band's own ground instead, and the list keeps its two hairlines. */
#jewelry-details .store-reviews .reviews-list .review,
#jewelry-details .store-reviews .rating-avg,
#jewelry-details .store-reviews .rating-avg-alt,
#jewelry-details .store-reviews .rating-overall,
#jewelry-details .store-reviews .rating-avg .out-of {
    background: none;
    border: 0;
}

/* Thursday's Treasures */
#jewelry-details .perrys-pdp-treasures {
    background: var(--perrys-ivory);
    text-align: center;
}

#jewelry-details .perrys-pdp-treasures__kicker {
    margin: 0;
    font-family: var(--perrys-font-sans);
    font-size: calc(12 * var(--perrys-u));
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

#jewelry-details .perrys-pdp-treasures__title {
    margin: calc(6 * var(--perrys-u)) 0 calc(22 * var(--perrys-u));
    font-family: var(--perrys-font-display);
    font-weight: 400;
    font-size: var(--perrys-d1xl-size);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

#jewelry-details .perrys-pdp-treasures__copy {
    max-width: calc(620 * var(--perrys-u));
    margin: 0 auto calc(26 * var(--perrys-u));
    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.16em;
}

#jewelry-details .perrys-pdp-treasures__signup {
    font-family: var(--perrys-font-serif);
    font-size: calc(12 * var(--perrys-u));
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

#jewelry-details .perrys-pdp-treasures__signup a {
    display: inline-block;
    margin-top: calc(10 * var(--perrys-u));
    font-style: italic;
    letter-spacing: 0.04em;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The newest-products row inside Thursday's Treasures. Its cards are the related-items cards (the rules
   in "Related-product sections" below), so only the row itself is set here: room either side for the
   arrows (components.css, .perrys-arrows, draws them against the carousel's own edges), lifted by the
   caption's height because the carousel theme pins them at top: 50% of the whole card; a row with no
   product hides. Master makes the card link a block, and sizes a video frame, only inside its own
   related-items section (the platform's ratio helper positions images alone), so the row does both here. */
#jewelry-details .perrys-pdp-treasures__feed {
    margin: 0 0 calc(34 * var(--perrys-u));
    padding-inline: 44px;
    text-align: left;
}

#jewelry-details .perrys-pdp-treasures__feed .similar-item-link {
    display: block;
}

#jewelry-details .perrys-pdp-treasures__feed video.similar-item-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#jewelry-details .perrys-pdp-treasures__feed .owl-nav {
    margin-top: -47px;
}

#jewelry-details .perrys-pdp-treasures__feed .owl-nav button.owl-prev {
    left: -44px;
}

#jewelry-details .perrys-pdp-treasures__feed .owl-nav button.owl-next {
    right: -44px;
}

#jewelry-details .perrys-pdp-treasures__feed:not(:has(.product-slider-item)) {
    display: none;
}

@media (min-width: 768px) {
    #jewelry-details .perrys-pdp-treasures__feed {
        padding-inline: 56px;
    }

    #jewelry-details .perrys-pdp-treasures__feed .owl-nav button.owl-prev {
        left: -50px;
    }

    #jewelry-details .perrys-pdp-treasures__feed .owl-nav button.owl-next {
        right: -50px;
    }
}

/* Appointment cards + "ask a jewelry expert" */
#jewelry-details .perrys-pdp-cards {
    background: var(--perrys-beige);
}

#jewelry-details .perrys-pdp-cards__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(60 * var(--perrys-u));
    max-width: calc(940 * var(--perrys-u));
    margin-inline: auto;
}

#jewelry-details .perrys-pdp-card {
    padding-left: calc(24 * var(--perrys-u));
    border-left: 1px solid var(--perrys-black);
}

#jewelry-details .perrys-pdp-card__title {
    margin: 0 0 calc(14 * var(--perrys-u));
    font-family: var(--perrys-font-serif);
    font-size: calc(13 * var(--perrys-u));
    line-height: calc(22 * var(--perrys-u));
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#jewelry-details .perrys-pdp-card__body {
    margin: 0 0 calc(16 * var(--perrys-u));
    font-family: var(--perrys-font-serif);
    font-size: calc(14 * var(--perrys-u));
    line-height: calc(26 * var(--perrys-u));
}

#jewelry-details .perrys-pdp-card a {
    font-family: var(--perrys-font-serif);
    font-style: italic;
    font-size: calc(14 * var(--perrys-u));
    color: var(--perrys-black);
    text-decoration: underline;
    text-underline-offset: 3px;
}

#jewelry-details .perrys-pdp-expert {
    background: var(--perrys-ivory);
    text-align: center;
    padding-block: calc(64 * var(--perrys-u));
}

#jewelry-details .perrys-pdp-expert__title {
    margin: 0 0 calc(12 * var(--perrys-u));
    font-family: var(--perrys-font-serif);
    font-size: calc(13 * var(--perrys-u));
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#jewelry-details .perrys-pdp-expert__body {
    margin: 0 0 calc(14 * var(--perrys-u));
    font-family: var(--perrys-font-serif);
    font-size: calc(14 * var(--perrys-u));
    line-height: calc(26 * var(--perrys-u));
}

#jewelry-details .perrys-pdp-expert a {
    font-family: var(--perrys-font-serif);
    font-style: italic;
    font-size: calc(14 * var(--perrys-u));
    color: var(--perrys-black);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The rule between "Have a question?" and the Instagram band is centred between them (Made Outside QA): it sat 48
   under the link and 186 above the Instagram lead's ink. The rule is the section's last line and the Instagram band
   follows it directly, so the lead's ink is 142.5 below it (the band's own 113.2 of padding and 29.3 to the first
   capital; 135.4 below 992, where the padding is 106.7). The section's bottom padding is dropped, and the rule
   sits as far under the link's ink as that: the link's ink ends 2.5 above its box, so 140 (133 below 992). */
#jewelry-details .perrys-pdp-expert {
    padding-bottom: 0;
}

#jewelry-details .perrys-pdp-expert::after {
    content: "";
    display: block;
    width: 100%;
    max-width: var(--perrys-pdp-band);
    height: 1px;
    margin: 133px auto 0;
    background: var(--perrys-slate);
}

@media (min-width: 992px) {
    #jewelry-details .perrys-pdp-expert::after {
        margin-top: 140px;
    }
}

/* Phone and tablet */
/* ----------------------------- */
/* Measured from full-site/figma/pdp-mobile/ at 384: the columns stack, both action buttons go
   full width one above the other, and the trust strip becomes two cells over one. */
@media (max-width: 991.98px) {
    #jewelry-details {
        --perrys-u: 1px;
    }

    #jewelry-details #content-body > section.default > .container,
    #jewelry-details #jewelry-details-similar-items-section .container,
    #jewelry-details .jewelry-details-recently-viewed-section .container,
    #jewelry-details .perrys-pdp-band__inner {
        max-width: none;
        padding-inline: 16px;
    }

    #jewelry-details #content-body .row:has(> #jewelry-details-image-column) {
        display: block;
    }

    #jewelry-details #jewelry-details-summary-column {
        margin-top: 26px;
    }
}

/* The site's own rule is that the 52 inset starts at 768 and phones do not carry it
   (css/overrides/sections.css). The band was applying that inset — and the PDP's own 54, and
   then the 16 above — all the way down, so at a 390 viewport the page sat in a 232 column and
   the photograph in 200. The mobile comp insets the PDP 24 from each edge of its 380 frame, and
   that 24 is the band's own, so the container adds nothing on top of it. */
@media (max-width: 767.98px) {
    #jewelry-details {
        --perrys-pdp-band: calc(100% - 48px);
    }

    #jewelry-details #content-body > section.default > .container {
        padding-inline: 0;
    }

    #jewelry-details .main-action-buttons {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    #jewelry-details .detail-action-icons-inner,
    #jewelry-details .details-action-icons-list {
        flex-wrap: wrap;
    }

    #jewelry-details .detail-action-icon {
        flex: 1 1 50%;
    }

    #jewelry-details .detail-action-icon:nth-child(3) {
        flex: 1 1 100%;
        border-left: 0;
        border-top: var(--perrys-pdp-rule);
    }

    /* The 104 inset the panel holds on a desktop band is a desktop measurement; below the
       breakpoint the design unit stops scaling, so it was still taking 104 off each side of a
       390 screen and the panel sat at x 120 in a 150 box. Phones give it the whole band. */
    #jewelry-details .perrys-pdp-why__panel {
        width: 100%;
        /* the strip is out of flow, so its height is reserved here too. At this breakpoint the
           panel IS the full width of its parent, so a percentage resolves against the same box
           and 9.24% is the artwork's own aspect exactly. */
        padding: 44px 24px calc(9.24% + 24px);
    }

    #jewelry-details .perrys-pdp-why__seal {
        display: none;
    }

    #jewelry-details .perrys-pdp-testimonial__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        justify-items: center;
        text-align: center;
    }

    #jewelry-details .perrys-pdp-testimonial__photo {
        width: 120px;
    }

    #jewelry-details .perrys-pdp-cards__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    #jewelry-details .perrys-pdp-band {
        padding-block: 52px;
    }
}

/* Specificity overrides against the master PDP stylesheet */
/* ----------------------------- */
/* css/fragments/universal-product-details.css is served from v6master and cannot be shadowed
   (TMPLT::includeMasterCSS has no local fallback). It styles the summary through two-ID
   descendant chains rooted at `#jewelry-details-summary-column #jewelry-details-summary`, which
   outrank a plain `#jewelry-details .thing`. The rules below repeat that root so the comp wins
   on specificity rather than on source order — the alternative was !important on every line. */

/* Not in the comp's summary: the brand line above the name, the stock flag, the availability
   line, and the accepted-payment icon strip. */
#jewelry-details-summary-column #jewelry-details-summary #jewelry-details-header .subhead,
#jewelry-details-summary-column #jewelry-details-summary .detail-in-stock-flag,
#jewelry-details-summary-column #jewelry-details-summary #jewelry-details-availability,
#jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-accepted-payment-methods {
    display: none;
}

/* The comp gives the pair EQUAL halves of the summary's measure: 257.8 each, 11.4 apart, 52
   tall, together spanning the same ~526 the accordion block below them uses. The build had them
   at 224 and 259 with a 27 gap, so the primary action read as the smaller of the two. */
#jewelry-details-summary-column #jewelry-details-summary .details-checkout .main-action-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(11.4 * var(--perrys-u));
    margin-top: calc(26 * var(--perrys-u));
}

/* The platform wraps the primary in a .pr-2, and Bootstrap spacing utilities carry !important,
   so its 8px sat inside the grid cell and made the sage button the narrower of the two. */
#jewelry-details-summary-column #jewelry-details-summary .details-checkout .main-action-buttons > div {
    padding: 0 !important;
    margin: 0;
    flex: none;
    width: auto;
    min-width: 0;
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout .main-action-buttons .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(52 * var(--perrys-u));
    min-height: 0;
    margin: 0;
    padding-inline: calc(12 * var(--perrys-u));
    border-radius: 0;
    font-family: var(--perrys-font-sans);
    font-size: calc(13.5 * var(--perrys-u));
    font-weight: 400;
    line-height: 1;
    /* the same tracked caps as the accordion labels — one label style across the PDP's chrome */
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The heart and its label are one centred pair in the comp: a 20.4 glyph, 10.8 from the label.
   Master gives the glyph a 64px box and the label an extra 8px margin, which pushed the label
   out to the button's right edge and left a hole between the two. */
#jewelry-details-summary-column #jewelry-details-summary .details-checkout .main-action-buttons .btn-wishlist {
    gap: calc(10.8 * var(--perrys-u));
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout .main-action-buttons .btn-wishlist > i {
    flex: 0 0 auto;
    width: calc(20.4 * var(--perrys-u));
    min-width: 0;
    margin: 0;
    font-size: calc(17 * var(--perrys-u));
    line-height: 1;
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout .main-action-buttons .btn-wishlist > span {
    flex: 0 0 auto;
    margin: 0;
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout #add_to_cart_btn {
    background: var(--perrys-sage);
    border: 0;
    color: var(--perrys-white);
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout #add_to_cart_btn:hover {
    background: var(--perrys-olive);
    color: var(--perrys-white);
}

/* The wishlist button's label is hidden by master; the comp shows it. The shadowed
   button-wishlist.html puts the same words in the label and in aria-label. */
#jewelry-details-summary-column #jewelry-details-summary .details-checkout .btn-wishlist {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(9 * var(--perrys-u));
    background: var(--perrys-mist);
    border: 0;
    color: var(--perrys-black);
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout .btn-wishlist span {
    display: inline;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    font-size: calc(13 * var(--perrys-u));
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout .btn-wishlist:hover {
    background: var(--perrys-beige);
    color: var(--perrys-black);
}

/* Trust strip */
#jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-action-icons {
    margin-top: calc(26 * var(--perrys-u));
    padding: 0;
    border-top: var(--perrys-pdp-rule);
    border-bottom: var(--perrys-pdp-rule);
    background: none;
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout .details-action-icons-list {
    display: flex;
    justify-content: center;
    gap: 0;
    padding: 0;
    margin: 0;
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-action-icon {
    flex: 1 1 0;
    padding: calc(13 * var(--perrys-u)) calc(6 * var(--perrys-u));
    text-align: center;
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-action-icon i {
    display: none;
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-action-icon + .detail-action-icon {
    border-left: var(--perrys-pdp-rule);
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-action-icon-label {
    font-family: var(--perrys-font-serif);
    font-size: calc(11 * var(--perrys-u));
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--perrys-black);
}

/* Gallery: master pins the main carousel's width to leave room for a side thumbnail rail; with
   the thumbnails moved underneath (shadowed media-object-legacy.html) the image takes the
   column's full width. */
/* Master sizes the main carousel to leave a 80px + 1.25rem side rail for the thumbnails
   (`width: calc(100% - (80px + 1.25rem))`), and positions the thumbnail container absolutely so
   it can sit in that rail. With the thumbnails moved underneath, both have to be undone: the
   photograph takes the column's full width and the rail rejoins the flow as an ordinary flex
   item. */
#jewelry-details-media-objects #jewelry-details-main-images.column-slider {
    width: 100% !important;
    /* master bleeds the photograph 1.25rem past each edge on phones via min-width, which beats
       width and pushed the document 15px wider than the viewport */
    min-width: 0 !important;
    max-width: none !important;
    margin-inline: 0 !important;
}

#jewelry-details #jewelry-details-media-objects #jewelry-details-alternate-image-thumbs-container {
    position: static !important;
    width: 100%;
    /* from four photographs up master bleeds the strip past both edges of the gallery
       (`min-width: calc(100% + 2.5rem)` with -1.25rem side margins) so it can scroll under the
       phone layout. The comp lines the strip up with the photograph at every width. */
    min-width: 0 !important;
    max-width: none;
    margin-inline: 0 !important;
    margin-top: var(--perrys-pdp-thumb-top);
    height: auto;
}

/* Master opens the strip with `padding-top: 1.25rem !important` and a 10 inset on every side,
   which pushed the first chip 10 right of the photograph's left edge. The distance from the
   photograph is the container's margin above, so the strip itself carries no padding. */
#jewelry-details #jewelry-details-media-objects #jewelry-details-alternate-image-thumbs-container #jewelry-details-alternate-image-thumbs {
    padding: 0 !important;
}

/* The gallery's own gap would be added to that margin, so the two children sit flush and the
   distance is stated once. The (empty) block below the photograph keeps what the gap gave it. */
#jewelry-details #jewelry-details-media-objects,
#jewelry-details #jewelry-details-media-objects.column-slider-bottom {
    gap: 0;
}

#jewelry-details #jewelry-details-media-objects > .jewelry-details-under-media-block:not(:empty) {
    margin-top: calc(14 * var(--perrys-u));
}

#jewelry-details-media-objects .column-slider-thumbs {
    display: grid;
    grid-template-columns: repeat(var(--perrys-pdp-thumb-n), minmax(0, 1fr));
    justify-content: start;
    gap: calc(12 * var(--perrys-u)) var(--perrys-pdp-thumb-gap);
    width: 100% !important;
    max-height: none;
}

/* Master's own chip is 80 square with a 2px border and, from four photographs up, a 5px left
   margin it sets `!important`. The proportions are the tokens above — stated here as well
   because this chain is a class deeper than the row rule higher in the file. */
#jewelry-details-media-objects .column-slider-thumbs .thumb-item {
    width: auto;
    height: auto;
    min-width: 0;
    aspect-ratio: 1 / 1;
    align-self: start;
    margin: 0 !important;
    padding: 0;
    border: var(--perrys-pdp-rule);
    border-radius: 0;
    background: var(--perrys-white);
}

/* For the side rail master gives every chip a .3125rem margin and resets it on the first —
   `margin-top` while the rail is vertical, `margin-left` from four photographs up — both
   `!important`, and both land on the grid as an extra 5 the gap does not account for. The row's
   spacing is the grid's, so the chips carry none of their own. */
#jewelry-details #jewelry-details-media-objects .column-slider-thumbs .thumb-item,
#jewelry-details #jewelry-details-media-objects #jewelry-details-alternate-image-thumbs > * {
    margin: 0 !important;
}

#jewelry-details-media-objects .column-slider-thumbs .thumb-item.active {
    border-color: var(--perrys-black);
}

#jewelry-details-media-objects .column-slider-thumbs .thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    padding: calc(6 * var(--perrys-u));
}

/* The "call for assistance" block under the gallery is empty on this store, but master gives it
   a 4rem floor, which opened a gap above the photograph. */
#jewelry-details .jewelry-details-under-media-block {
    min-height: 0;
}

/* The comp's information accordions, added by the shadowed masterpage */
#jewelry-details .perrys-pdp-acc-links {
    margin: calc(10 * var(--perrys-u)) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: calc(20 * var(--perrys-u));
}

#jewelry-details .perrys-pdp-acc-links a {
    font-family: var(--perrys-font-serif);
    font-style: italic;
    font-size: calc(14 * var(--perrys-u));
    color: var(--perrys-black);
    text-decoration: underline;
    text-underline-offset: 3px;
}

#jewelry-details .perrys-pdp-acc-links a:focus-visible {
    outline: 2px solid var(--perrys-olive);
    outline-offset: 3px;
}

/* The product page's italic underlined text links take the site's text-link hover (overrides/buttons.css): the
   words and their underline go grey (Made Outside QA: add a hover state to text links). */
@media (hover: hover) and (pointer: fine) {
    #jewelry-details .perrys-pdp-model-request a:hover,
    #jewelry-details .perrys-pdp-appointment-link:hover,
    #jewelry-details .perrys-pdp-treasures__signup a:hover,
    #jewelry-details .perrys-pdp-card a:hover,
    #jewelry-details .perrys-pdp-expert a:hover,
    #jewelry-details .perrys-pdp-acc-links a:hover {
        color: var(--perrys-link-hover);
    }
}

/* Related-product sections */
/* ----------------------------- */
/* The comp lays "You May Also Like" out as one large tile beside a 2x2 block; the platform
   renders an even row. The row is kept — rebuilding the carousel would fork a working,
   data-driven section for a layout difference — and the TILE is brought onto the grid's
   treatment so the two surfaces read as one system. */
#jewelry-details #jewelry-details-similar-items-section > .container > p,
#jewelry-details .jewelry-details-recently-viewed-section > .container > p {
    display: none;
}

#jewelry-details .similar-item-info {
    padding: calc(16 * var(--perrys-u)) 0 0;
    text-align: left;
}

#jewelry-details .similar-item-image-container {
    background: var(--perrys-white);
}

#jewelry-details .similar-item-link {
    text-decoration: none;
}

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

#jewelry-details .similar-item-title {
    font-family: var(--perrys-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: calc(16 * var(--perrys-u));
    line-height: calc(21 * var(--perrys-u));
    text-align: left;
    color: var(--perrys-black);
}

#jewelry-details .similar-item-price {
    margin-top: calc(10 * var(--perrys-u));
}

#jewelry-details .similar-item-price,
#jewelry-details .similar-item-price span {
    font-family: var(--perrys-font-display);
    font-size: calc(17 * var(--perrys-u));
    text-align: left;
    color: var(--perrys-black);
}

#jewelry-details .similar-item-image {
    object-fit: contain !important;
    padding: calc(8 * var(--perrys-u));
}

/* "product image grows on hover", as on the grid */
#jewelry-details .similar-item-image-container {
    overflow: hidden;
}

#jewelry-details .similar-item-image {
    transition: transform 450ms var(--perrys-ease-out);
}

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

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

/* The comp's onward route out of the PDP */
#jewelry-details .perrys-pdp-seeall {
    display: flex;
    justify-content: center;
    padding: 0 0 calc(64 * var(--perrys-u));
    background: var(--perrys-ivory);
}

#jewelry-details .perrys-pdp-seeall__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(224 * var(--perrys-u));
    height: calc(48 * var(--perrys-u));
    padding-inline: calc(28 * var(--perrys-u));
    background: var(--perrys-sage);
    color: var(--perrys-white);
    font-family: var(--perrys-font-sans);
    font-size: calc(13 * var(--perrys-u));
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
}

#jewelry-details .perrys-pdp-seeall__btn:hover {
    background: var(--perrys-olive);
    color: var(--perrys-white);
}

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

/* Master styles the related-item caption through a six-part chain rooted at #jewelry-similar-items
   (`#jewelry-similar-items .similar-item .similar-item-inner a.similar-item-link
   div.similar-item-info .similar-item-title`), which centres it and makes it bold body text. The
   comp's caption matches the product grid's: left-aligned italic display serif, price beneath. */
#jewelry-similar-items .similar-item .similar-item-inner a.similar-item-link div.similar-item-info {
    padding: calc(16 * var(--perrys-u)) 0 0;
    text-align: left;
}

#jewelry-similar-items .similar-item .similar-item-inner a.similar-item-link div.similar-item-info .similar-item-title {
    font-family: var(--perrys-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: calc(16 * var(--perrys-u));
    line-height: calc(21 * var(--perrys-u));
    text-align: left;
    margin-bottom: calc(10 * var(--perrys-u));
    color: var(--perrys-black);
}

#jewelry-similar-items .similar-item .similar-item-inner a.similar-item-link div.similar-item-info .similar-item-price {
    font-family: var(--perrys-font-display);
    font-weight: 400;
    font-size: calc(17 * var(--perrys-u));
    text-align: left;
    color: var(--perrys-black);
}

/* Phone and tablet — matching the specificity of the overrides above */
/* ----------------------------- */
/* The platform-override block above is rooted at #jewelry-details-summary-column, so it outranks
   the earlier @media rules no matter where they sit. The phone layout is therefore restated here,
   at the same specificity and after them, rather than relying on source order alone. */
@media (max-width: 991.98px) {
    #jewelry-details-summary-column #jewelry-details-summary .details-checkout .main-action-buttons {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    #jewelry-details-summary-column #jewelry-details-summary .details-checkout .main-action-buttons .btn {
        height: 48px;
        font-size: 13px;
        white-space: nowrap;
    }

    #jewelry-details-summary-column #jewelry-details-summary .details-checkout .details-action-icons-list {
        flex-wrap: wrap;
    }

    #jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-action-icon {
        flex: 1 1 50%;
    }

    #jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-action-icon:nth-child(3) {
        flex: 1 1 100%;
        border-left: 0;
        border-top: var(--perrys-pdp-rule);
    }

    #jewelry-similar-items .similar-item .similar-item-inner a.similar-item-link div.similar-item-info .similar-item-title {
        font-size: 15px;
        line-height: 20px;
    }
}

/* Trust strip — at master's own selector depth */
/* ----------------------------- */
/* Master styles this list through
   `#jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-action-icons
    ul.details-action-icons-list li a i`, which is deeper than the block above and was still
   drawing the icon above each label in a stacked column. The comp's strip is label-only cells
   between two hairlines, divided by a vertical rule. */
#jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-action-icons {
    border: 0;
    border-top: var(--perrys-pdp-rule);
    border-bottom: var(--perrys-pdp-rule);
    border-radius: 0;
    background: none;
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-action-icons .detail-action-icons-inner {
    padding: 0;
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-action-icons ul.details-action-icons-list {
    gap: 0;
    flex-wrap: nowrap;
    align-items: stretch;
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-action-icons ul.details-action-icons-list li {
    flex: 1 1 0;
    border-right: 0;
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-action-icons ul.details-action-icons-list li + li {
    border-left: var(--perrys-pdp-rule);
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-action-icons ul.details-action-icons-list li a {
    flex-direction: row;
    padding: calc(14 * var(--perrys-u)) calc(6 * var(--perrys-u));
    border-radius: 0;
    font-family: var(--perrys-font-serif);
    font-size: calc(11 * var(--perrys-u));
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--perrys-black);
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-action-icons ul.details-action-icons-list li a i {
    display: none;
}

#jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-action-icons ul.details-action-icons-list li a:focus-visible {
    outline: 2px solid var(--perrys-olive);
    outline-offset: -2px;
}

/* The words in the strip are a <span> inside the link, and master sizes it through the same chain ending in
   `li a span` (12 on phones, 14 from 992), which outranked the 11 set on the label above and left Call Us,
   Shipping and Returns in a 14px serif (Made Outside QA: a little big, and the sans). The comp's labels are
   Montserrat caps, 12 at 0.25em ("Free Shipping" measures 133 on the frame). */
#jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-action-icons ul.details-action-icons-list li a span.detail-action-icon-label {
    font-family: var(--perrys-font-sans);
    font-size: 12px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--perrys-black);
}

/* On a 375 phone the strip's column is 304 wide and the sans labels at 0.25em need 310 with the cells' own side
   padding, so the third cell ran 6 past the rules (the serif labels this replaced ran 2 past). Without that side
   padding the three cells come out equal and fit from 346 up; the labels keep the comp's tracking. */
@media (max-width: 575.98px) {
    #jewelry-details-summary-column #jewelry-details-summary .details-checkout .detail-action-icons ul.details-action-icons-list li {
        padding-inline: 0;
    }
}