.product-detail-page {
    /* The global body overflow-x:hidden turns body into a non-scrolling
       overflow container. Sticky must follow the actual page scroll. */
    overflow-x: clip;
    overflow-y: visible;
}
.product-detail-page #content {
    /* Unlike .page-intro, product breadcrumbs do not reserve the fixed header. */
    padding-top: var(--header-height);
}
.product-breadcrumbs, .product-detail, .product-information, .product-related-section {
    width: min(100%, var(--content-width)); margin-inline: auto; padding-inline: var(--page-gutter);
}
.product-breadcrumbs { padding-top: 28px; display: flex; flex-wrap: wrap; gap: 9px; color: var(--muted); font-size: .64rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.product-breadcrumbs a:hover { color: var(--accent); }
.product-breadcrumbs strong { color: var(--accent); }
.product-detail {
    padding-block: clamp(24px, 3vw, 42px) clamp(28px, 4vw, 48px);
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr);
    grid-template-areas: "media heading" "media options" "media facts" "media controls" "media information";
    grid-template-rows: min-content min-content min-content min-content min-content;
    column-gap: clamp(24px, 3vw, 44px);
    align-items: start;
}
.product-detail > * { min-width: 0; }
/* The image and its introduction stay together, independently of sidebar height. */
.product-detail__media { grid-area: media; display: grid; gap: 14px; align-self: start; }
.product-detail__gallery { grid-area: gallery; min-width: 0; display: grid; gap: 10px; }
/* A named area is only needed when media uses display: contents on small screens. */
.product-detail__media > .product-detail__gallery { grid-area: auto; }
.product-detail__panel, .product-detail__lead, .product-information article {
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
}
.product-detail__panel { padding-inline: clamp(18px, 2vw, 28px); border-inline: 1px solid var(--line); }
.product-detail__heading { grid-area: heading; padding-top: 22px; padding-bottom: 16px; border-top: 1px solid var(--line); }
.product-detail__stage { position: relative; width: 100%; aspect-ratio: 4 / 3; padding: 0; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(135deg, var(--bg-alt), var(--surface)); color: var(--muted); cursor: zoom-in; }
.product-detail__stage .product-sold-out { bottom: 18px; left: 18px; }
/* Keep intrinsic image dimensions out of the grid track sizing. */
.product-detail__stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: center; }
.product-detail__stage > span { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 5rem); font-weight: 800; }
.product-detail__stage small { position: absolute; right: 14px; bottom: 14px; padding: 8px 10px; background: rgba(5,5,5,.78); color: #fff; font-size: .56rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.product-detail__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.product-detail__thumbs button { position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.product-detail__thumbs button[aria-current="true"] { border-color: var(--accent); }
.product-detail__thumbs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.product-detail__status { display: flex; justify-content: space-between; gap: 20px; color: var(--accent); font-size: .64rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.product-detail__status span { overflow-wrap: anywhere; }
.product-detail__status small { color: var(--text-strong); flex-shrink: 0; }
.product-detail__status small::before { content: ""; width: 7px; height: 7px; margin-right: 8px; display: inline-block; background: var(--accent); }
.product-detail__heading h1 { margin-top: 14px; font-family: var(--font-sans); font-size: clamp(1.6rem, 2.2vw, 2.4rem); font-weight: 650; line-height: 1.16; letter-spacing: -.035em; text-transform: none; text-wrap: pretty; overflow-wrap: anywhere; }
.product-detail__lead { margin: 0; padding: 14px 18px; border: 1px solid var(--line); color: var(--text); font-size: .95rem; line-height: 1.65; overflow-wrap: anywhere; }
.product-detail__price { margin-top: 16px; display: block; text-align: right; color: var(--text-strong); font-family: var(--font-display); font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1.15; overflow-wrap: anywhere; }
.product-detail__price-label { display: none; }
.product-detail__options { grid-area: options; padding-bottom: 16px; }
.product-detail__options { min-width: 0; margin-inline: 0; border: 0; }
.product-detail__options > legend { padding: 0; color: var(--muted); font-size: .65rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.product-detail__chips { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 8px; }
.product-detail__chips label { position: relative; max-width: 100%; cursor: pointer; }
.product-detail__chips input { position: absolute; opacity: 0; pointer-events: none; }
.product-detail__chips span { max-width: 100%; padding: 8px 11px; display: block; border: 1px solid var(--line-strong); color: var(--text-strong); font-size: .78rem; overflow-wrap: anywhere; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.product-detail__chips input:checked + span { border-color: var(--accent); background: var(--accent); color: #0a0a0a; }
.product-detail__chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.product-detail__single-variant-input { display: none; }
.product-detail__single-variant { margin: 9px 0 0; padding: 11px 0; display: flex; align-items: center; gap: 10px; border-block: 1px solid var(--line); color: var(--text); font-size: .78rem; line-height: 1.5; }
.product-detail__single-variant > i { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-family: var(--font-display); font-size: .68rem; font-style: normal; font-weight: 800; }
.product-detail__choice-group { margin-top: 12px; }
.product-detail__choice-title { display: block; margin-bottom: 8px; color: var(--text-strong); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.product-detail__sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.product-detail__size-choice { position: relative; min-width: 0; cursor: pointer; }
.product-detail__size-choice input { position: absolute; opacity: 0; pointer-events: none; }
.product-detail__size-choice span { min-height: 44px; padding: 9px 12px; display: grid; place-items: center; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--text-strong); font-size: .78rem; font-weight: 800; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.product-detail__size-choice input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.product-detail__size-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.product-detail__colors { margin-top: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.product-detail__color-choice { position: relative; min-width: 0; cursor: pointer; }
.product-detail__color-choice input { position: absolute; opacity: 0; pointer-events: none; }
.product-detail__color-choice > span { min-height: 44px; padding: 8px 10px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--surface) 92%, transparent); transition: border-color .2s ease, background .2s ease, color .2s ease; }
.product-detail__color-choice > span > i { width: 22px; height: 22px; flex: 0 0 22px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.product-detail__color-choice > span > b { min-width: 0; color: var(--text-strong); font-size: .72rem; line-height: 1.15; overflow-wrap: anywhere; }
.product-detail__color-choice input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
.product-detail__color-choice input:checked + span > b { color: var(--accent); }
.product-detail__color-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.product-detail__color-choice--custom { grid-column: 1 / -1; }
.product-detail__color-choice--custom > span { justify-content: center; }
.product-detail__color-choice i[data-color="white"] { background: #f2f2ee; }
.product-detail__color-choice i[data-color="black"] { background: #090a0c; }
.product-detail__color-choice i[data-color="gray"] { background: #888b90; }
.product-detail__color-choice i[data-color="gold"] { background: linear-gradient(135deg, #785312, #f0cb62 48%, #9c721f); }
.product-detail__color-choice i[data-color="gunmetal"] { background: linear-gradient(135deg, #20252b, #737b83 52%, #30363c); }
.product-detail__color-choice i[data-color="green"] { background: #287e54; }
.product-detail__color-choice i[data-color="red"] { background: #bd2d35; }
.product-detail__color-choice i[data-color="blue"] { background: #2859a9; }
.product-detail__color-choice i[data-color="chrome"] { background: linear-gradient(135deg, #555 0%, #f8f8f8 24%, #777 45%, #fff 65%, #777 100%); }
.product-detail__color-choice i[data-color="custom"] { background: conic-gradient(#bd2d35, #d0a834, #287e54, #2859a9, #bd2d35); }
.product-detail__custom-color { margin-top: 12px; }
.product-detail__custom-color[hidden] { display: none; }
.product-detail__custom-color label { display: block; margin-bottom: 7px; color: var(--text-strong); font-size: .68rem; font-weight: 800; }
.product-detail__custom-color input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text-strong); font: inherit; font-size: .82rem; }
.product-detail__custom-color input:focus { border-color: var(--accent); outline: 1px solid var(--accent); }
.product-detail__color-note { margin-top: 11px; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.product-detail__variant-status { min-height: 18px; margin-top: 7px; color: #ff7661; font-size: .68rem; }
.product-detail__facts { grid-area: facts; margin: 0; }
.product-detail__facts div { padding: 9px 0; display: grid; grid-template-columns: minmax(0, 115px) minmax(0, 1fr); gap: 14px; border-bottom: 1px solid var(--line); }
.product-detail__facts div:first-child { border-top: 1px solid var(--line); }
.product-detail__facts dt { color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
.product-detail__facts dd { margin: 0; color: var(--text-strong); font-size: .85rem; overflow-wrap: anywhere; }
.product-detail__controls { grid-area: controls; padding-top: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.product-detail__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.product-detail__actions .button { width: 100%; min-width: 0; min-height: 50px; padding: 12px 14px; text-align: center; overflow-wrap: anywhere; }
.product-cart-add { border: 0; cursor: pointer; }
.product-cart-add:hover { transform: translateY(-3px); filter: brightness(1.08); }
.product-detail__inquiry-link { width: fit-content; margin-inline: auto; padding: 3px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; color: var(--muted); font-size: .7rem; line-height: 1.45; text-align: center; }
.product-detail__inquiry-link strong { color: var(--text-strong); font-weight: 800; }
.product-detail__inquiry-link:hover strong { color: var(--accent); }
.product-detail__inquiry-primary { border: 0; }
.product-detail__favorite { margin-top: 10px; }
.product-detail__favorite .interaction-button { position: static; width: 100%; min-height: 48px; display: flex; justify-content: center; gap: 10px; border: 1px solid var(--line); }
.product-detail__favorite b { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.product-information { padding-block: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); }
.product-information header h2, .product-related-section > header h2 { margin-top: 12px; font-size: clamp(1.5rem, 2.15vw, 2.25rem); }
.product-information__grid { margin-top: 22px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.product-information article { min-width: 0; padding: clamp(18px, 2vw, 26px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.product-information article > span { color: var(--accent); font-size: .61rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.product-information p, .product-information ul { margin-top: 14px; color: var(--text); font-size: .9rem; line-height: 1.65; }
.product-information ul { padding-left: 18px; list-style: disc; }
.product-information li + li { margin-top: 7px; }
@media (min-width: 981px) {
    /* The gallery stays in view while the right column is read, then leaves
       with this article before recommendations and the footer begin. */
    .product-detail__media {
        position: sticky;
        top: calc(var(--header-height) + 16px);
        /* Let thumbnails and the description follow the page scroll. */
        max-height: none;
        overflow: visible;
    }
    .product-detail__stage { height: min(55dvh, 560px); aspect-ratio: auto; }
    .product-information { grid-area: information; width: auto; margin: 0; padding: 26px 0 0; }
    .product-information__grid { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
}
.product-related-section { padding-block: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
.product-related-section .catalog-section__head { margin-bottom: 22px; }
.product-project-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.product-project { min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.product-project > span { aspect-ratio: 4 / 3; display: block; overflow: hidden; }
.product-project img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease-out); }
.product-project:hover img { transform: scale(1.04); }
.product-project div { min-height: 145px; padding: 18px; display: grid; align-content: start; }
.product-project small { color: var(--accent); font-size: .58rem; font-weight: 850; letter-spacing: .1em; }
.product-project strong { margin-top: 10px; color: var(--text-strong); font-family: var(--font-display); font-size: 1.2rem; line-height: 1.03; text-transform: uppercase; }
.product-project i { margin-top: auto; padding-top: 18px; color: var(--accent); font-style: normal; font-size: .6rem; font-weight: 850; letter-spacing: .1em; }
.product-detail-missing { min-height: 65vh; }
@media (max-width: 980px) {
    .product-detail {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "gallery" "heading" "lead" "facts" "price" "options" "controls" "information";
        grid-template-rows: none;
        row-gap: 0;
    }
    .product-detail__media { display: contents; }
    .product-detail__media > .product-detail__gallery { grid-area: gallery; margin-block: 0 14px; }
    /* Split only the mobile header into grid items: identity below the image,
       the same single price below the facts. Desktop markup/layout stays intact. */
    .product-detail__heading { display: contents; }
    .product-detail__identity, .product-detail__price {
        padding-inline: clamp(18px, 2vw, 28px);
        border-inline: 1px solid var(--line);
        background: var(--surface);
        background: color-mix(in srgb, var(--surface) 94%, transparent);
    }
    .product-detail__identity { grid-area: heading; padding-block: 20px 16px; border-block: 1px solid var(--line); }
    .product-detail__lead { grid-area: lead; margin-top: 0; border-top: 0; }
    .product-detail__facts { margin-top: 14px; padding-block: 12px 0; border-top: 1px solid var(--line); border-bottom: 0; }
    .product-detail__price {
        grid-area: price; margin: 0; padding-block: 16px 20px;
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
        border-bottom: 1px solid var(--line);
    }
    .product-detail__price-label {
        display: block; font-family: var(--font-sans); color: var(--muted);
        font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    }
    .product-detail__options { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
    .product-detail__controls { margin-top: 14px; border-top: 1px solid var(--line); }
    .product-detail__options + .product-detail__controls { margin-top: 0; padding-top: 4px; border-top: 0; }
    .product-detail__facts div:first-child { border-top: 0; }
    .product-detail__facts div:last-child { border-bottom: 0; }
    .product-detail:has(> .product-information) { padding-bottom: 0; }
    .product-information {
        grid-area: information;
        width: auto;
        margin-inline: calc(-1 * var(--page-gutter));
        padding-inline: var(--page-gutter);
    }
    .product-project-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
    .product-breadcrumbs { padding-top: 18px; }
    .product-detail { padding-top: 22px; }
    .product-detail__thumbs { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .product-detail__heading h1 { font-size: clamp(1.5rem, 6vw, 1.85rem); }
    .product-detail__colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-detail__actions .product-cart-add { min-height: 44px; }
    .product-information__grid { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
    .product-information article { padding: 18px; }
    .product-project div { min-height: 125px; padding: 13px; }
    .product-project strong { font-size: .92rem; }
}