/* Full-bleed like Carhartt — drop the max-width container so the gallery + info span the viewport. */
    .product-detail { width: 100%; padding: 1rem 1rem 3rem; }
    @media (min-width: 1024px) { .product-detail { padding: 1rem 1.5rem 3rem; } }
    @media (min-width: 1600px) { .product-detail { padding: 1rem 2rem 4rem; } }
    .product-detail__back { display: inline-block; padding: 0.5rem 0; color: var(--color-slate);
        text-decoration: none; font-size: 0.9rem; margin-bottom: 0.5rem; }
    .product-detail__back:hover { color: var(--color-brand-orange); }
    /* Outer layout: gallery (left) + sticky info (right). Carhartt uses ~65/35; we match. */
    .product-detail__layout { display: grid; grid-template-columns: 1fr; gap: 2rem; }
    @media (min-width: 900px) {
        .product-detail__layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 2.5rem; align-items: start; }
    }
    @media (min-width: 1280px) {
        .product-detail__layout { grid-template-columns: minmax(0, 1fr) 420px; gap: 3rem; }
    }
    /* The media wrapper holds the gallery + the mobile-only thumb strip. */
    .product-detail__media { }
    /* Gallery: horizontal scroll-snap carousel on mobile, 2-col grid on desktop.
       Same DOM in both — only the gallery layout differs. */
    .product-detail__gallery { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
    @media (min-width: 768px) { .product-detail__gallery { grid-template-columns: 1fr 1fr; gap: 0.75rem; } }
    @media (min-width: 1280px) { .product-detail__gallery { gap: 1rem; } }
    /* Mobile carousel — bleeds to viewport edges, swipe horizontal, hides scrollbar. */
    @media (max-width: 767px) {
        .product-detail__gallery {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 0;
            margin-left: -1rem;
            margin-right: -1rem;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .product-detail__gallery::-webkit-scrollbar { display: none; }
        .product-detail__gallery > .product-detail__frame {
            flex: 0 0 100%;
            width: 100%;
            scroll-snap-align: center;
            border-radius: 0;
            border: none;   /* full-bleed on mobile — no edge borders */
        }
    }
    /* Thumbnail strip — mobile-only, sits directly below the carousel.
       Tap-to-jump navigation; active thumb gets an orange ring. */
    .product-detail__thumbs { display: none; }
    @media (max-width: 767px) {
        .product-detail__thumbs.is-visible {
            display: flex;
            gap: 0.4rem;
            padding: 0.65rem 0.25rem 0.25rem;
            overflow-x: auto;
            scrollbar-width: none;
        }
        .product-detail__thumbs::-webkit-scrollbar { display: none; }
        .product-detail__thumb {
            flex: 0 0 auto;
            width: 52px;
            height: 78px;
            padding: 0;
            border: 2px solid transparent;
            border-radius: 0.5rem;
            background: var(--color-paper);
            overflow: hidden;
            cursor: pointer;
            opacity: 0.55;
            transition: opacity 0.15s ease, border-color 0.15s ease;
        }
        .product-detail__thumb img {
            width: 100%; height: 100%; object-fit: cover; display: block;
        }
        .product-detail__thumb.is-active {
            opacity: 1;
            border-color: var(--color-brand-orange);
        }
    }
    .product-detail__frame { aspect-ratio: 2 / 3; background: var(--color-paper); border-radius: 0.9rem;
        overflow: hidden; position: relative; border: 1px solid var(--color-brand-orange-tint); }
    .product-detail__frame--square { aspect-ratio: 1 / 1; }
    .product-detail__frame > img { position: absolute; inset: 0; width: 100%; height: 100%;
        display: block; }
    /* Real lifestyle photos: cover the frame edge-to-edge. */
    .product-detail__frame--photo > img { object-fit: cover; }
    /* Tee mockups (placeholder fallback): contain so sleeves are visible. */
    .product-detail__mockup { object-fit: contain !important; padding: 0.5rem; }
    .product-detail__placeholder { display: flex; flex-direction: column; gap: 0.5rem;
        color: var(--color-slate-muted); align-items: center; justify-content: center; }
    .product-detail__placeholder span { position: static; }
    @media (min-width: 900px) {
        .product-detail__info { position: sticky; top: 1rem; }
    }
    .product-detail__title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; margin: 0 0 0.25rem; color: var(--shirt-black); }
    .product-detail__code { font-size: 0.8rem; color: var(--color-slate-muted); letter-spacing: 0.05em;
        margin-bottom: 0.5rem; }
    .product-detail__price { font-size: 1.4rem; font-weight: 700; color: var(--color-brand-orange);
        margin-bottom: 1rem; }
    .product-detail__description {
        color: var(--color-slate-dark); line-height: 1.55;
        /* margin-top spaces from the CTA above; whitespace preserves the
           two-line emotional + product-fit pattern from the description copy. */
        margin: 1.25rem 0 0;
        white-space: pre-line;
        font-size: 0.9rem;
    }
    .product-detail__field { margin-bottom: 1.25rem; }
    .product-detail__label { display: block; font-weight: 600; font-size: 0.9rem;
        margin-bottom: 0.5rem; color: var(--color-text); }

    /* Carhartt-style accordion sections (Size / Product Details / Care). */
    .pdp-accordion {
        border-top: 1px solid var(--color-brand-orange-tint);
        padding: 0;
    }
    .pdp-accordion:first-of-type { margin-top: 1.5rem; }
    .pdp-accordion:last-of-type { border-bottom: 1px solid var(--color-brand-orange-tint); }
    .pdp-accordion > summary {
        list-style: none;
        cursor: pointer;
        padding: 1rem 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--color-text);
        user-select: none;
    }
    .pdp-accordion > summary::-webkit-details-marker { display: none; }
    .pdp-accordion__chevron {
        font-size: 1.2rem;
        font-weight: 400;
        color: var(--color-brand-orange);
        transition: transform 0.25s var(--ease-spring);
        line-height: 1;
    }
    .pdp-accordion[open] .pdp-accordion__chevron {
        /* "+" rotates to look like "x" / "−" — actual minus glyph via content swap */
        transform: rotate(45deg);
    }
    .pdp-accordion__body {
        padding: 0 0 1rem;
        font-size: 0.875rem;
        color: var(--color-slate-dark);
        line-height: 1.55;
    }
    .pdp-accordion__note {
        margin-top: 0.75rem;
        font-size: 0.78rem;
        color: var(--color-slate-muted);
    }
    /* Override the inherited modal sizing for the inline table */
    .pdp-accordion .size-table { width: 100%; font-size: 0.82rem; }
    .pdp-accordion .product-details-list { list-style: none; padding: 0; margin: 0; }
    .pdp-accordion .product-details-list li {
        display: flex; justify-content: space-between; gap: 1rem;
        padding: 0.4rem 0; border-bottom: 1px solid #f1f5f9;
    }
    .pdp-accordion .product-details-list li:last-child { border-bottom: none; }
    .pdp-accordion .product-details-list .detail-label { color: var(--color-slate-muted); font-size: 0.8rem; }
    .pdp-accordion .product-details-list .detail-value { text-align: right; }
    .pdp-accordion .care-list { padding-left: 1.1rem; margin: 0; }
    .pdp-accordion .care-list li { padding: 0.2rem 0; }
    /* Inline variant — sits directly under the size picker, no full-width
       divider above (since the size picker itself is the separator). */
    .pdp-accordion--inline {
        border-top: none;
        margin-top: 0.5rem;
    }
    .pdp-accordion--inline:first-of-type { margin-top: 0.5rem; }
    .pdp-accordion--inline > summary {
        padding: 0.5rem 0;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--color-slate-dark);
        border-bottom: 1px dashed transparent;
    }
    .pdp-accordion--inline[open] > summary {
        border-bottom-color: var(--color-brand-orange-tint);
    }
    .swatch-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
    .swatch { display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
        cursor: pointer; padding: 0.25rem; border-radius: 0.4rem; }
    .swatch__tile { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #d8ccb8;
        box-shadow: inset 0 0 0 2px white;
        transition: transform 0.2s var(--ease-spring), border-color 0.15s ease, box-shadow 0.15s ease; }
    .swatch__label { font-size: 0.7rem; color: var(--color-slate-dark); transition: color 0.15s ease; }
    .swatch.is-selected .swatch__tile { border-color: var(--color-brand-orange);
        transform: scale(1.09);
        box-shadow: inset 0 0 0 2px white, 0 0 0 3px var(--color-brand-orange-tint); }
    .swatch.is-selected .swatch__label { color: var(--color-brand-orange); font-weight: 600; }
    .swatch:active .swatch__tile { transform: scale(0.94); }
    .swatch--white .swatch__tile { background: var(--color-primary-light); }
    .swatch--black .swatch__tile { background: var(--color-slate-deep); }
    .swatch--cream .swatch__tile { background: #f1e8d8; }
    .swatch--navy .swatch__tile { background: var(--shirt-navy); }
    .swatch--grey .swatch__tile { background: var(--color-slate-muted); }
    .size-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .size-btn { padding: 0.6rem 1rem; border: 1.5px solid #d8ccb8; background: white;
        border-radius: 0.6rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
        min-width: 56px; min-height: 44px;
        transition: transform 0.15s var(--ease-spring), background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
    .size-btn:hover:not(:disabled):not(.is-selected) { border-color: var(--color-brand-orange); }
    .size-btn.is-selected { border-color: var(--color-brand-orange);
        background: var(--color-brand-orange); color: white; transform: scale(1.04); }
    .size-btn:active:not(:disabled) { transform: scale(0.95); }
    .size-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .qty-input { width: 80px; padding: 0.5rem; border: 1px solid var(--color-slate-light); border-radius: 0.4rem;
        font-size: 0.95rem; }
    .product-detail__resolved { font-size: 0.85rem; color: var(--color-slate); margin: 0.5rem 0 1rem;
        min-height: 1.2em; }
    .product-detail__cta { display: block; width: 100%; padding: 0.85rem; font-size: 1rem;
        margin-top: 0.5rem; box-shadow: 0 4px 12px rgba(228, 99, 43, 0.28); }
    .product-detail__cta:not(:disabled):active { transform: scale(0.98);
        box-shadow: 0 2px 6px rgba(228, 99, 43, 0.30); }
    /* Disabled = "waiting for color + size", not broken. A calm cream state
       reads intentional instead of the faded-orange (washed salmon) look. */
    .product-detail__cta:disabled { opacity: 1; cursor: not-allowed;
        background: var(--color-paper-deep); border-color: var(--color-paper-deep);
        color: #a1937c; box-shadow: none; }

    /* Mobile sticky bottom CTA — Carhartt / Nike / Apple pattern. */
    .product-detail__sticky { display: none; }
    @media (max-width: 899px) {
        .product-detail__sticky {
            display: flex;
            position: fixed;
            left: 0; right: 0; bottom: 0;
            background: white;
            border-top: 1px solid var(--color-brand-orange-tint);
            box-shadow: 0 -4px 16px rgba(228, 99, 43, 0.10);
            padding: 0.6rem 0.85rem;
            padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
            gap: 0.75rem;
            align-items: center;
            z-index: 100;
        }
        .product-detail__sticky-info { flex: 1; min-width: 0; display: flex;
            flex-direction: column; gap: 0.1rem; line-height: 1.2; }
        .product-detail__sticky-title { font-size: 0.85rem; font-weight: 600; color: #334155;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .product-detail__sticky-price { font-size: 0.95rem; font-weight: 700;
            color: var(--color-brand-orange); }
        .product-detail__sticky-btn { flex-shrink: 0; padding: 0.75rem 1.35rem;
            background: var(--color-brand-orange); color: white; border: none;
            border-radius: 999px; font-size: 0.9rem; font-weight: 700; cursor: pointer;
            white-space: nowrap; box-shadow: 0 4px 10px rgba(228, 99, 43, 0.28);
            transition: transform 0.15s var(--ease-spring), background 0.15s ease; }
        .product-detail__sticky-btn:active { transform: scale(0.97); }
        .product-detail__sticky-btn:disabled { background: var(--color-paper-deep);
            color: #a1937c; box-shadow: none; cursor: not-allowed; }
        /* Push page content up so the sticky bar doesn't cover the footer / last photo. */
        .product-detail { padding-bottom: 6rem; }
    }