.product-detail {
    width: 100%;
}

.product-detail-top {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-bottom: 30px;
}

.product-detail-image {
    flex: 0 0 420px;
}

.product-detail-image img {
    /*
        Product detail images should never be enlarged beyond their natural
        file dimensions. This matters for narrow/tall product photos: forcing
        width: 100% can make a small image become much taller than the
        original file and distort the product page layout.

        Activity-log note:
        This is public display-only CSS. It does not change product data,
        images, carts, or orders, so it should not write activity-log entries.
        Durable image changes remain logged by Product Admin / Media Admin.
    */
    max-width: 100%;
    height: auto;
    display: block;
}

.product-detail-info {
    flex: 1;
}

.product-detail-info h1 {
    margin-top: 0;
}

.product-price {
    font-size: 28px;
    font-weight: bold;
    color: #800000;
}

.product-detail-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 12px;
    margin: 14px 0 18px;
}

.product-detail-fact {
    display: contents;
}

.product-detail-fact dt {
    color: #213663;
    font-weight: bold;
}

.product-detail-fact dd {
    margin: 0;
    color: #006000;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.product-detail-fact--price dd {
    color: #800000;
    font-size: 24px;
    font-weight: bold;
}

.product-availability {
    color: #444444;
    font-weight: 600;
}

.product-availability--in-stock dd,
.product-availability--in-stock {
    color: #006000;
}

.product-availability--out-of-stock dd,
.product-availability--out-of-stock,
.product-availability--unavailable dd,
.product-availability--unavailable {
    color: #7a3f00;
}

.product-description {
    line-height: 1.6;
}

@media (max-width: 768px) {

    .product-detail-top {
        flex-direction: column;
    }

    .product-detail-image {
        flex: none;
        width: 100%;
    }
}
.product-image-gallery {
    width: 100%;
}

.product-gallery-main-link {
    /*
        Keep the gallery frame full-width so the page layout remains stable,
        but center the actual image inside it. The image itself is allowed to
        shrink to fit the frame, not grow past its natural dimensions.
    */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d6dbe3;
    background: #ffffff;
    text-decoration: none;
}

.product-gallery-main-image {
    /*
        Do not force product-page gallery images to width: 100%. A narrow
        source image should stay narrow instead of being upscaled into a very
        tall image. Larger images still scale down responsively to fit the
        product image column.

        Product-page images are also capped at 400px tall so portrait/tall
        product photos cannot dominate the first screen. The full-size image
        modal keeps its own sizing rules below, so customers can still inspect
        a larger image when needed.

        Activity-log note:
        This is presentation-only CSS. It does not alter image files, product
        records, gallery rows, carts, or orders, so it should not write an
        activity-log entry. Durable image/gallery edits remain logged by the
        Admin media/product save controllers.
    */
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
    display: block;
}

.product-gallery-caption {
    margin: 8px 0 0;
    color: #444444;
    font-size: 14px;
    line-height: 1.4;
}

.product-gallery-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

button.product-gallery-thumbnail {
    width: 72px;
    height: 72px;
    padding: 3px;
    border: 1px solid #c7ceda;
    background: #ffffff;
    color: #213663;
    cursor: pointer;

    /*
        Reset the global legacy button typography for gallery thumbnails. The
        site-wide button rule adds white text, text-shadow, and a blue gradient;
        those are correct for purchase buttons but make direct-video thumbnail
        placeholders look distorted.
    */
    font: normal 700 12px/1.1 Arial, Helvetica, sans-serif;
    text-align: center;
    text-shadow: none;
    vertical-align: top;

    /*
        Keep product thumbnail artwork clipped inside the rounded thumbnail
        button. The button itself keeps its raised legacy shadow, while the
        child image is clipped inside the rounded face.

        Activity-log note:
        This is presentation-only gallery styling. It does not change media,
        product data, cart data, or inventory, so no activity logging is needed.
    */
    border-radius: 14px;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    top: 0;
    left: 0;

    /*
        Restore the same raised-button feel used elsewhere on the site without
        allowing the global blue button gradient to replace the white thumbnail
        face.
    */
    -webkit-box-shadow: -3px 3px var(--wwd-colour-button-shadow, #2f3d70);
    -moz-box-shadow: -3px 3px var(--wwd-colour-button-shadow, #2f3d70);
    box-shadow: -3px 3px var(--wwd-colour-button-shadow, #2f3d70);
}

button.product-gallery-thumbnail:hover,
button.product-gallery-thumbnail:focus {
    background: #ffffff;
    border-color: #213663;
    color: #213663;
    text-shadow: none;
    outline: none;
}

button.product-gallery-thumbnail:active,
button.product-gallery-thumbnail.product-gallery-thumbnail--active {
    /*
        Match the legacy pressed-button behaviour: the selected/current
        thumbnail sits into the shadow space instead of stretching the row.
    */
    top: 3px;
    left: -3px;
    background: #d8e2f3;
    border-color: #213663;
    color: #213663;
    text-shadow: none;
    outline: none;
    -webkit-box-shadow: 0 0 var(--wwd-colour-button-shadow, #2f3d70);
    -moz-box-shadow: 0 0 var(--wwd-colour-button-shadow, #2f3d70);
    box-shadow: 0 0 var(--wwd-colour-button-shadow, #2f3d70);
}

button.product-gallery-thumbnail.product-gallery-thumbnail--active:hover,
button.product-gallery-thumbnail.product-gallery-thumbnail--active:focus {
    background: #d8e2f3;
}

.product-gallery-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;

    /*
        Clip the image itself as well as the button wrapper so transparent or
        light-background thumbnails cannot peek through the rounded corners.
    */
    border-radius: 10px;

    /*
        A matching image clip keeps the previous corner-bleed fix intact even
        though the outer button once again has a visible shadow.
    */
    clip-path: inset(0 round 10px);
}

.product-image-gallery--empty {
    border: 1px dashed #c7ceda;
    padding: 24px;
    text-align: center;
    color: #666666;
    background: #f7f8fa;
}

@media (max-width: 768px) {
    button.product-gallery-thumbnail {
        width: 64px;
        height: 64px;
    }
}

/*
    Product image modal.

    The full-size product image opens in this modal when JavaScript is active.
    Without JavaScript, the existing image link still opens the full image in a
    new tab. Modal opens/closes are display-only public browsing actions and are
    not activity-logged.
*/
.product-gallery-modal[hidden] {
    display: none;
}

.product-gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.product-gallery-modal-backdrop {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.72);
    box-shadow: none;
    cursor: zoom-out;
}

.product-gallery-modal-backdrop:hover,
.product-gallery-modal-backdrop:focus,
.product-gallery-modal-backdrop:active {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.72);
    box-shadow: none;
    outline: none;
}

.product-gallery-modal-panel {
    position: relative;
    z-index: 1;
    isolation: isolate;
    max-width: min(96vw, 1400px);
    max-height: 94vh;
    padding: 18px;
    border: 1px solid #d6dbe3;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    overflow: auto;
}

button.product-gallery-modal-close {
    /*
        Keep this button attached to the modal panel, not to the embedded video
        frame. Embedded provider iframes can paint aggressively, so the close
        button receives a higher stack level than the modal media.

        Activity-log note:
        Opening/closing gallery media is display-only browsing behavior and is
        not activity-logged. Durable gallery edits continue to be logged by the
        Product Admin / Media Admin save flows.
    */
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    z-index: 10005;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 2px solid #213663;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    color: #213663;
    font: normal 700 34px/1 Arial, sans-serif;
    text-align: center;
    text-shadow: none;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
}

button.product-gallery-modal-close:hover,
button.product-gallery-modal-close:focus,
button.product-gallery-modal-close:active {
    top: 10px;
    right: 10px;
    left: auto;
    z-index: 10005;
    border: 2px solid #213663;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    color: #213663;
    text-shadow: none;
    text-decoration: none;
    transform: none;
}

button.product-gallery-modal-close:focus {
    outline: 2px solid #213663;
    outline-offset: 2px;
}

.product-gallery-modal-image {
    display: block;
    max-width: calc(96vw - 36px);
    max-height: calc(94vh - 76px);
    width: auto;
    height: auto;
    margin: 0 auto;
}

.product-gallery-modal-caption {
    margin: 10px 44px 0 0;
    color: #333333;
    font-size: 15px;
    line-height: 1.4;
}

.product-gallery-modal-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .product-gallery-modal {
        padding: 10px;
    }

    button.product-gallery-modal-close,
    button.product-gallery-modal-close:hover,
    button.product-gallery-modal-close:focus,
    button.product-gallery-modal-close:active {
        top: 8px;
        right: 8px;
        width: 40px;
        height: 40px;
        font-size: 30px;
    }

    .product-gallery-modal-panel {
        width: 100%;
        max-width: 100%;
        padding: 10px;
    }

    .product-gallery-modal-image {
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 90px);
    }
}

/*
    Product detail description/order spacing.

    The product page now keeps the long description in the main ordering
    column above the quantity field. This is public display-only CSS and should
    not write activity logs. Durable product content changes remain logged in
    ProductAdminController.
*/
.product-detail-description {
    margin: 16px 0 18px;
    padding-top: 14px;
    border-top: 1px solid #d6dbe3;
}

.product-detail-description h2 {
    margin: 0 0 8px;
    color: #213663;
    font-size: 20px;
}


/*
    Product Detail size charts.

    Size charts are attached to product groups but rendered on the product page,
    where customers make the size/option decision. Horizontal scrolling protects
    measurement tables on phones without squeezing the text unreadably.
*/
.product-size-chart {
    margin: 24px 0 0;
    padding: 18px;
    border: 1px solid #c7ceda;
    background: #ffffff;
}

.product-size-chart h2 {
    margin: 0 0 12px;
    color: #213663;
    text-align: center;
}

.product-size-chart-intro {
    margin: 0 0 12px;
    line-height: 1.5;
}

.product-size-chart-table-wrap {
    overflow-x: auto;
}

.product-size-chart-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    background: #ffffff;
}

.product-size-chart-table th,
.product-size-chart-table td {
    padding: 6px 8px;
    border: 1px solid #9aa6bc;
    text-align: center;
    vertical-align: middle;
}

.product-size-chart-table thead th {
    background: #e1e4e6;
    color: #213663;
}

.product-size-chart-table tbody th {
    color: #213663;
    white-space: nowrap;
}

.product-size-chart-table tfoot td {
    font-size: 0.95em;
    font-style: italic;
    background: #f7f8fa;
}

/*
    Product gallery video support.

    Video rows share the same gallery sequence as image rows. The main panel
    keeps a stable responsive media box so switching between images and videos
    does not make the product page jump heavily.

    Activity-log note:
    These are display-only styles. Do not activity-log gallery views, thumbnail
    clicks, or video playback.
*/
.product-gallery-main-media {
    width: 100%;
}

.product-gallery-main-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid #d6dbe3;
    background: #000000;
}

.product-gallery-thumbnail--video {
    position: relative;
}

.product-gallery-video-play-badge {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(33, 54, 99, 0.9);
    color: #ffffff;
    font-size: 12px;
    line-height: 1;
}

.product-gallery-video-thumb-label {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 4px;
    border-radius: 10px;
    background: #e1e4e6;
    color: #213663;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-shadow: none;
    clip-path: inset(0 round 10px);
}

.product-gallery-thumbnail--video .product-gallery-video-play-badge {
    pointer-events: none;
    text-shadow: none;
}

/*
    Product gallery video modal refinements.

    Main-page videos use a transparent overlay button so a click on the video
    opens the larger modal. The overlay is display-only behaviour and should not
    be activity-logged; durable video saves remain logged in Product Admin.
*/
.product-gallery-video-frame {
    position: relative;
    width: 100%;
    background: #000000;
}

.product-gallery-video-modal-trigger {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: zoom-in;
    opacity: 0;
    -webkit-appearance: none;
    appearance: none;
}

.product-gallery-video-modal-trigger:hover,
.product-gallery-video-modal-trigger:focus,
.product-gallery-video-modal-trigger:active {
    inset: 0;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.01);
    box-shadow: inset 0 0 0 3px rgba(33, 54, 99, 0.5);
    opacity: 1;
    transform: none;
}

.product-gallery-modal-media {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.product-gallery-modal-media .product-gallery-video-frame {
    width: min(92vw, 1200px);
}

.product-gallery-modal-media .product-gallery-main-video {
    position: relative;
    z-index: 1;
    width: min(92vw, 1200px);
    max-height: calc(94vh - 100px);
}

@media (max-width: 768px) {
    .product-gallery-modal-media .product-gallery-video-frame,
    .product-gallery-modal-media .product-gallery-main-video {
        width: calc(100vw - 20px);
    }
}

/*
    Product gallery previous/next navigation.

    The arrow controls are rendered only when a product has more than one
    gallery media row. They are intentionally reset with `all: unset` because
    the global legacy button styling uses gradients, borders, shadows, and
    pressed offsets that should not affect the gallery navigation controls.

    Desktop/hover devices:
    - JavaScript adds `product-gallery-arrow-zone--previous` or
      `product-gallery-arrow-zone--next` only while the pointer is close to the
      matching side of the displayed image/video.
    - This keeps the arrows subtle and prevents both arrows from showing during
      normal reading.

    Touch devices:
    - Arrows stay visible because there is no hover location to detect.

    Activity-log note:
    These arrows only change the visible gallery media. Do not activity-log
    these clicks. Durable gallery order/content edits remain logged by Product
    Admin / Media Admin.
*/
.product-gallery-main-stage {
    position: relative;
    width: 100%;
}

.product-gallery-main-stage .product-gallery-main-media {
    width: 100%;
}

button.product-gallery-arrow {
    all: unset;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    right: auto !important;
    z-index: 5;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: min(40px, 28%);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #213663;
    font: normal 900 clamp(36px, 6.5vw, 62px)/1 Arial, Helvetica, sans-serif;
    text-align: center;
    text-decoration: none;
    text-shadow:
        -1px -1px 0 #ffffff,
         1px -1px 0 #ffffff,
        -1px  1px 0 #ffffff,
         1px  1px 0 #ffffff,
         0    2px 5px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: none;
    transition: opacity 140ms ease;
    -webkit-appearance: none;
    appearance: none;
}

button.product-gallery-arrow[hidden],
button.product-gallery-arrow[aria-hidden="true"] {
    display: none !important;
}

button.product-gallery-main-arrow--previous,
button.product-gallery-modal-arrow--previous,
button.product-gallery-main-arrow--previous:hover,
button.product-gallery-modal-arrow--previous:hover,
button.product-gallery-main-arrow--previous:focus,
button.product-gallery-modal-arrow--previous:focus,
button.product-gallery-main-arrow--previous:active,
button.product-gallery-modal-arrow--previous:active {
    left: 0 !important;
    right: auto !important;
    justify-content: flex-start;
    padding-left: 14px;
}

button.product-gallery-main-arrow--next,
button.product-gallery-modal-arrow--next,
button.product-gallery-main-arrow--next:hover,
button.product-gallery-modal-arrow--next:hover,
button.product-gallery-main-arrow--next:focus,
button.product-gallery-modal-arrow--next:focus,
button.product-gallery-main-arrow--next:active,
button.product-gallery-modal-arrow--next:active {
    left: auto !important;
    right: 0 !important;
    justify-content: flex-end;
    padding-right: 14px;
}

button.product-gallery-arrow:hover,
button.product-gallery-arrow:active,
button.product-gallery-arrow:focus-visible {
    top: 0 !important;
    bottom: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #213663;
    text-shadow:
        -1px -1px 0 #ffffff,
         1px -1px 0 #ffffff,
        -1px  1px 0 #ffffff,
         1px  1px 0 #ffffff,
         0    2px 5px rgba(0, 0, 0, 0.45);
    text-decoration: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

button.product-gallery-arrow:focus {
    /*
        Do not make a mouse-clicked arrow stay visible merely because the
        browser left focus on the button after the click. Visibility should
        still come from the edge-hover zone, direct hover, touch mode, or
        keyboard-visible focus.
    */
    outline: 0;
}

button.product-gallery-arrow:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -8px;
}

.product-gallery-main-stage.product-gallery-arrow-zone--previous button.product-gallery-main-arrow--previous:not([hidden]),
.product-gallery-main-stage.product-gallery-arrow-zone--next button.product-gallery-main-arrow--next:not([hidden]),
.product-gallery-modal-panel.product-gallery-arrow-zone--previous button.product-gallery-modal-arrow--previous:not([hidden]),
.product-gallery-modal-panel.product-gallery-arrow-zone--next button.product-gallery-modal-arrow--next:not([hidden]),
button.product-gallery-arrow.product-gallery-arrow--click-retained:not([hidden]) {
    /*
        The click-retained class keeps the clicked arrow itself visible and
        clickable after JavaScript swaps the image/video under the mouse. This
        prevents the next click from falling through to the image or embedded
        video trigger before the customer moves the mouse.

        Activity-log note:
        This is browser-only display state. Gallery content/order changes are
        logged from the Admin save endpoints, not from public arrow clicks.
    */
    opacity: 0.82;
    pointer-events: auto;
}

.product-gallery-modal-arrow {
    z-index: 45;
}

.product-gallery-modal-panel {
    overflow: auto;
}

button.product-gallery-modal-close {
    top: 8px;
    right: 8px;
    z-index: 55;
}

button.product-gallery-modal-close:hover,
button.product-gallery-modal-close:focus,
button.product-gallery-modal-close:active {
    top: 8px;
    right: 8px;
    z-index: 55;
}

@media (hover: none), (pointer: coarse) {
    button.product-gallery-arrow:not([hidden]) {
        opacity: 0.72;
        pointer-events: auto;
    }
}

@media (max-width: 768px) {
    button.product-gallery-arrow {
        width: 52px;
        font-size: 44px;
    }

    button.product-gallery-main-arrow--previous,
    button.product-gallery-modal-arrow--previous,
    button.product-gallery-main-arrow--previous:hover,
    button.product-gallery-modal-arrow--previous:hover,
    button.product-gallery-main-arrow--previous:focus,
    button.product-gallery-modal-arrow--previous:focus,
    button.product-gallery-main-arrow--previous:active,
    button.product-gallery-modal-arrow--previous:active {
        padding-left: 8px;
    }

    button.product-gallery-main-arrow--next,
    button.product-gallery-modal-arrow--next,
    button.product-gallery-main-arrow--next:hover,
    button.product-gallery-modal-arrow--next:hover,
    button.product-gallery-main-arrow--next:focus,
    button.product-gallery-modal-arrow--next:focus,
    button.product-gallery-main-arrow--next:active,
    button.product-gallery-modal-arrow--next:active {
        padding-right: 8px;
    }
}

/*
    Product Detail Product Group row labels.

    Product Group rows can carry a left-column label and an above-row label.
    When customers click through to the Product Detail page, those labels are
    repeated below the description so the row context is not lost.

    Activity-log note:
        This is public display-only CSS. It does not change product data,
        Product Group data, carts, or orders, so it should not write activity
        logs. Durable label edits remain logged by ProductGroupAdminController.
*/
.product-detail-group-labels {
    margin: 0 0 18px;
    padding: 0px 0px;
    /*border: 1px solid rgba(var(--wwd-colour-dark-blue-rgb, 33, 54, 99), 0.22);
    border-left: 4px solid var(--wwd-colour-dark-blue, #213663);
    background: rgba(var(--wwd-colour-light-blue-rgb, 54, 75, 120), 0.08);*/
}

.product-detail-group-label {
    margin: 0;
    line-height: 1.4;
}

.product-detail-group-label + .product-detail-group-label {
    margin-top: 4px;
}

.product-detail-group-label--above-row {
    color: var(--wwd-colour-dark-blue, #213663);
    font-weight: 700;
}

.product-detail-group-label--left-column {
    color: #333333;
    font-weight: 600;
}