/*!
 * GBZ420 product page, phase 2 (reference maquette layout).
 * Local copy: C:\Codex\GBZ420\site (gbz420.test). Production is out of scope for this phase.
 * Owner : product-page worker. Loaded once from catalog/product.tpl.
 * Tokens: themes/warehouse/assets/css/gbz-tokens.css (declared on body, consumed as var(--gbz-*)).
 *
 * Rules for this file:
 *  1. Every selector is scoped under #product .gbz-product-page, so no other template,
 *     quickview modal, listing or checkout surface is affected.
 *  2. Presentation only: no markup is generated, no native commerce control is hidden.
 *     Prices, stock, copy and images stay server-rendered by PrestaShop.
 *  3. Colour, radius, spacing, type and focus values come from the shared token layer.
 */

/* ----------------------------------------------------------------------------------------------
 * 1. Page shell
 * ------------------------------------------------------------------------------------------- */

#product .gbz-product-page {
    color: var(--gbz-ink);
    font-size: var(--gbz-fs-body);
    line-height: 1.55;
}

#product .gbz-product-page .page-footer {
    border: 0;
    margin: 0;
    padding: 0;
}

/* ----------------------------------------------------------------------------------------------
 * 2. Two column row (gallery | purchase panel)
 * ------------------------------------------------------------------------------------------- */

#product .gbz-product-page .product-info-row {
    align-items: start;
    display: grid;
    gap: var(--gbz-space-7);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin: 0 0 var(--gbz-space-6);
}

#product .gbz-product-page .col-product-image,
#product .gbz-product-page .col-product-info {
    max-width: none;
    min-width: 0;
    padding: 0;
    width: 100%;
}

#product .gbz-product-page .product-information {
    min-width: 0;
}

/* ----------------------------------------------------------------------------------------------
 * 3. Gallery
 * ------------------------------------------------------------------------------------------- */

#product .gbz-product-page .images-container {
    background-color: var(--gbz-surface);
    margin-bottom: 0;
}

#product .gbz-product-page .product-cover {
    background-color: var(--gbz-surface);
    margin-bottom: var(--gbz-space-4);
    position: relative;
}

#product .gbz-product-page .product-lmage-large,
#product .gbz-product-page .product-lmage-large picture {
    background-color: var(--gbz-surface);
    display: block;
    width: 100%;
}

#product .gbz-product-page .product-lmage-large img {
    aspect-ratio: 1 / 1;
    background-color: var(--gbz-surface);
    display: block;
    height: auto;
    max-height: 640px;
    object-fit: contain;
    width: 100%;
}

#product .gbz-product-page .product-flags .product-flag {
    background-color: var(--gbz-accent);
    border: 0;
    border-radius: var(--gbz-radius-0);
    color: var(--gbz-accent-ink);
    font-size: var(--gbz-fs-eyebrow);
    font-weight: var(--gbz-weight-display);
    line-height: 1.2;
    padding: var(--gbz-space-2) var(--gbz-space-3);
    text-transform: uppercase;
}

#product .gbz-product-page .expander {
    background-color: var(--gbz-surface);
    border: var(--gbz-hairline-strong);
    border-radius: var(--gbz-radius-0);
    color: var(--gbz-ink);
    height: 40px;
    width: 40px;
}

#product .gbz-product-page .expander:hover {
    background-color: var(--gbz-accent);
    border-color: var(--gbz-accent);
    color: var(--gbz-accent-ink);
}

/* Gallery carousel controls */
#product .gbz-product-page #product-images-large .swiper-button-arrow {
    align-items: center;
    background-color: var(--gbz-surface);
    border: var(--gbz-hairline-strong);
    border-radius: var(--gbz-radius-0);
    color: var(--gbz-ink);
    display: flex;
    height: 44px;
    justify-content: center;
    margin: 0;
    width: 44px;
}

#product .gbz-product-page #product-images-large .swiper-button-arrow::after {
    display: none;
}

/* Thumbnails: square, hairline frame, lime frame on the selected image */
#product .gbz-product-page #product-images-thumbs,
#product .gbz-product-page .product-images-thumbs {
    background-color: transparent;
    height: auto;
    margin-top: var(--gbz-space-4);
    max-height: none;
}

#product .gbz-product-page #product-images-thumbs .thumb-container,
#product .gbz-product-page .product-images-thumbs .thumb-container {
    background-color: var(--gbz-surface);
    border: var(--gbz-hairline);
    border-radius: var(--gbz-radius-0);
    padding: var(--gbz-space-2);
}

/* The script marks the container of the Swiper-active slide; the :has() rule is only a
   no-JS fallback, so it is gated on the wrapper not being synced yet. */
#product .gbz-product-page #product-images-thumbs:not(.gbz-thumbs-synced) .thumb-container:has(img.selected),
#product .gbz-product-page #product-images-thumbs .thumb-container.gbz-thumb-selected {
    border-color: var(--gbz-accent);
    border-width: 2px;
    padding: calc(var(--gbz-space-2) - 1px);
}

#product .gbz-product-page #product-images-thumbs img,
#product .gbz-product-page .product-images-thumbs img {
    aspect-ratio: 1 / 1;
    background-color: var(--gbz-surface);
    height: auto;
    object-fit: contain;
    width: 100%;
}

#product .gbz-product-page .after-cover-tumbnails:empty,
#product .gbz-product-page .after-cover-tumbnails2:empty {
    display: none;
}

/* ----------------------------------------------------------------------------------------------
 * 4. Purchase panel header: category chip, title, brand, rating
 * ------------------------------------------------------------------------------------------- */

#product .gbz-product-page .product_header_container {
    border: 0;
    margin: 0 0 var(--gbz-space-4);
    padding: 0;
}

#product .gbz-product-page .gbz-product-chip {
    display: inline-block;
    margin: 0 0 var(--gbz-space-3);
}

#product .gbz-product-page .gbz-product-chip--label {
    background-color: var(--gbz-accent);
    color: var(--gbz-accent-ink);
    display: inline-block;
    font-size: var(--gbz-fs-eyebrow);
    font-weight: var(--gbz-weight-display);
    line-height: 1.2;
    padding: var(--gbz-space-2) var(--gbz-space-3);
    text-transform: uppercase;
}

#product .gbz-product-page .page-title {
    border: 0;
    color: var(--gbz-ink);
    font-size: var(--gbz-fs-h1);
    font-weight: var(--gbz-weight-display);
    line-height: 1.1;
    margin: 0 0 var(--gbz-space-3);
    overflow-wrap: anywhere;
    padding: 0;
    text-transform: uppercase;
}

#product .gbz-product-page .page-title:after {
    display: none;
}

#product .gbz-product-page .gbz-product-brand {
    color: var(--gbz-muted);
    display: inline-block;
    font-size: var(--gbz-fs-small);
    margin-bottom: var(--gbz-space-1);
    text-decoration: none;
}

#product .gbz-product-page .gbz-product-brand:hover {
    color: var(--gbz-ink);
    text-decoration: underline;
}

#product .gbz-product-page .gbz-product-rating:empty {
    display: none;
}

/* 2026-09-27: the retained rating line is a second control for the review accordion. The script
 * adds .gbz-rating-jump, so nothing changes when JavaScript is unavailable. */
#product .gbz-product-page .gbz-product-rating .gbz-rating-jump {
    cursor: pointer;
}

#product .gbz-product-page .gbz-product-rating .gbz-rating-jump:hover .iqitreviews-nb,
#product .gbz-product-page .gbz-product-rating .gbz-rating-jump:focus-visible .iqitreviews-nb {
    text-decoration: underline;
}

#product .gbz-product-page .gbz-product-rating .gbz-rating-jump:focus-visible {
    outline: 3px solid #ff7a1a;
    outline-offset: 2px;
}

#product .gbz-product-page .gbz-reviewlab-card,
#product .gbz-product-page #gbzreviewlab-reviews {
    scroll-margin-top: 96px;
}

/* ----------------------------------------------------------------------------------------------
 * 5. Prices and availability
 * ------------------------------------------------------------------------------------------- */

#product .gbz-product-page .product-prices,
#product .gbz-product-page .product_p_price_container {
    margin: 0 0 var(--gbz-space-4);
    padding: 0;
}

#product .gbz-product-page .product-prices::after {
    background-color: var(--gbz-accent);
    content: "";
    display: block;
    height: 3px;
    margin-top: var(--gbz-space-3);
    width: 72px;
}

#product .gbz-product-page .current-price .product-price {
    color: var(--gbz-ink);
    font-size: calc(var(--gbz-fs-price) * 1.4);
    font-weight: var(--gbz-weight-display);
    line-height: 1.1;
}

#product .gbz-product-page .product-discount {
    color: var(--gbz-muted);
    font-size: var(--gbz-fs-h4);
    margin-left: var(--gbz-space-3);
}

#product .gbz-product-page .regular-price {
    color: var(--gbz-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

#product .gbz-product-page .product-prices .badge.badge-discount {
    background-color: var(--gbz-surface-alt);
    border: var(--gbz-hairline);
    border-radius: var(--gbz-radius-0);
    color: var(--gbz-ink);
    font-size: var(--gbz-fs-small);
    font-weight: var(--gbz-weight-display);
    line-height: 1.2;
    margin-left: var(--gbz-space-2);
    padding: var(--gbz-space-2) var(--gbz-space-3);
    white-space: nowrap;
}

#product .gbz-product-page #product-availability {
    border-radius: var(--gbz-radius-0);
    display: inline-flex;
    font-size: var(--gbz-fs-eyebrow);
    font-weight: var(--gbz-weight-display);
    gap: var(--gbz-space-2);
    line-height: 1.2;
    margin: 0 0 var(--gbz-space-3);
    padding: var(--gbz-space-2) var(--gbz-space-3);
    text-transform: uppercase;
}

#product .gbz-product-page #product-availability.product-available {
    background-color: var(--gbz-accent);
    color: var(--gbz-accent-ink);
}

#product .gbz-product-page #product-availability.product-last-items {
    background-color: var(--gbz-surface-alt);
    border: var(--gbz-hairline-strong);
    color: var(--gbz-ink);
}

#product .gbz-product-page #product-availability.product-unavailable {
    background-color: var(--gbz-surface-alt);
    border: var(--gbz-hairline);
    color: var(--gbz-muted);
}

#product .gbz-product-page .tax-shipping-delivery-label,
#product .gbz-product-page .product-unit-price,
#product .gbz-product-page .product-without-taxes,
#product .gbz-product-page .price-ecotax,
#product .gbz-product-page .product-minimal-quantity {
    color: var(--gbz-muted);
    font-size: var(--gbz-fs-small);
    margin-top: var(--gbz-space-2);
}

#product .gbz-product-page .delivery-information {
    display: block;
}

/* ----------------------------------------------------------------------------------------------
 * 6. Attributes and combinations
 * ------------------------------------------------------------------------------------------- */

#product .gbz-product-page .product-variants-item {
    margin: 0 0 var(--gbz-space-5);
}

#product .gbz-product-page .product-variants-item .form-control-label {
    color: var(--gbz-ink);
    display: block;
    font-size: var(--gbz-fs-small);
    font-weight: var(--gbz-weight-display);
    margin: 0 0 var(--gbz-space-2);
    text-transform: uppercase;
}

#product .gbz-product-page .product-variants select.form-control,
#product .gbz-product-page .product-variants select.form-control-select {
    background-color: var(--gbz-surface);
    border: var(--gbz-hairline-strong);
    border-radius: var(--gbz-radius-0);
    color: var(--gbz-ink);
    font-size: var(--gbz-fs-body);
    max-width: 100%;
    min-height: 48px;
    padding: var(--gbz-space-3) var(--gbz-space-4);
    width: 100%;
}

#product .gbz-product-page .product-variants-item ul:has(.gbz-variant-option) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gbz-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

#product .gbz-product-page .product-variants-item li:has(.gbz-variant-option) {
    float: none;
    margin: 0;
    position: relative;
}

#product .gbz-product-page .gbz-variant-option {
    cursor: pointer;
    display: block;
    margin: 0;
    position: relative;
}

#product .gbz-product-page .gbz-variant-option .input-radio {
    cursor: pointer;
    height: 100%;
    inset: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

#product .gbz-product-page .gbz-variant-option .radio-label {
    background-color: var(--gbz-surface);
    border: var(--gbz-hairline-strong);
    border-radius: var(--gbz-radius-sm);
    color: var(--gbz-ink);
    display: flex;
    font-size: var(--gbz-fs-body);
    font-weight: var(--gbz-weight-display);
    justify-content: center;
    line-height: 1.25;
    margin: 0;
    min-height: 48px;
    min-width: 88px;
    padding: var(--gbz-space-3) var(--gbz-space-4);
    text-align: center;
}

#product .gbz-product-page .gbz-variant-option:hover .radio-label {
    border-color: var(--gbz-ink);
}

#product .gbz-product-page .gbz-variant-option .input-radio:checked + .radio-label {
    background-color: var(--gbz-accent);
    border-color: var(--gbz-accent);
    color: var(--gbz-accent-ink);
}

#product .gbz-product-page .gbz-variant-option .input-radio:focus-visible + .radio-label {
    box-shadow: var(--gbz-focus-ring);
}

#product .gbz-product-page .product-variants .attribute-not-in-stock .radio-label,
#product .gbz-product-page .product-variants option.attribute-not-in-stock {
    color: var(--gbz-muted);
    text-decoration: line-through;
}

/* Colour swatch groups keep their native radio mechanics */
#product .gbz-product-page .product-variants-item ul .input-container {
    border-radius: var(--gbz-radius-0);
    float: none;
    margin: 0;
}

#product .gbz-product-page .product-variants-item .input-color {
    border: var(--gbz-hairline-strong);
    border-radius: var(--gbz-radius-0);
}

/* ----------------------------------------------------------------------------------------------
 * 7. Quantity and add to cart
 * ------------------------------------------------------------------------------------------- */

#product .gbz-product-page .product-actions .product-add-to-cart {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

#product .gbz-product-page .product-add-to-cart .product-quantity {
    align-items: end;
    display: grid;
    gap: var(--gbz-space-4);
    grid-template-columns: minmax(0, 154px) minmax(0, 1fr);
    margin: 0;
}

#product .gbz-product-page .product-add-to-cart .col-add-qty,
#product .gbz-product-page .product-add-to-cart .col-add-btn {
    flex: 0 0 auto;
    max-width: none;
    padding: 0;
    width: 100%;
}

#product .gbz-product-page .product-add-to-cart .qty,
#product .gbz-product-page .product-add-to-cart .add {
    width: 100%;
}

/* The visible quantity caption moves to the accessible layer: the stepper carries the value. */
#product .gbz-product-page .gbz-quantity-label {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

#product .gbz-product-page #quantity_wanted {
    background-color: var(--gbz-surface);
    border: var(--gbz-hairline-strong);
    border-radius: var(--gbz-radius-0);
    color: var(--gbz-ink);
    font-size: var(--gbz-fs-body);
    font-weight: var(--gbz-weight-display);
    height: 52px;
    min-width: 0;
    text-align: center;
    width: 100%;
}

#product .gbz-product-page #quantity_wanted::-webkit-outer-spin-button,
#product .gbz-product-page #quantity_wanted::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#product .gbz-product-page #quantity_wanted[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Stepper injected by the theme's touchspin script */
#product .gbz-product-page .bootstrap-touchspin {
    display: grid;
    grid-template-columns: 48px 58px 48px;
    height: 52px;
    width: 154px;
}

#product .gbz-product-page .bootstrap-touchspin .input-group-btn-vertical {
    display: contents;
}

#product .gbz-product-page .bootstrap-touchspin #quantity_wanted {
    border-radius: var(--gbz-radius-0);
    float: none;
    grid-column: 2;
    grid-row: 1;
    height: 52px;
    padding: var(--gbz-space-2);
    width: 58px;
}

#product .gbz-product-page .bootstrap-touchspin .btn-touchspin {
    align-items: center;
    background-color: var(--gbz-surface);
    border: var(--gbz-hairline-strong);
    border-radius: var(--gbz-radius-0);
    color: var(--gbz-ink);
    display: flex;
    height: 52px;
    justify-content: center;
    margin: 0;
    min-height: 52px;
    padding: 0;
    position: static;
    width: 48px;
}

#product .gbz-product-page .bootstrap-touchspin .btn-touchspin:hover {
    background-color: var(--gbz-accent);
    border-color: var(--gbz-accent);
    color: var(--gbz-accent-ink);
}

#product .gbz-product-page .bootstrap-touchspin .btn-touchspin i {
    position: static;
}

#product .gbz-product-page .bootstrap-touchspin-down {
    grid-column: 1;
    grid-row: 1;
}

#product .gbz-product-page .bootstrap-touchspin-up {
    grid-column: 3;
    grid-row: 1;
}

/* Primary action: black pill, arrow affordance. Native submit behaviour is untouched. */
#product .gbz-product-page .add-to-cart {
    align-items: center;
    background-color: var(--gbz-black);
    border: 1px solid var(--gbz-black);
    border-radius: var(--gbz-radius-pill);
    color: var(--gbz-on-dark);
    display: inline-flex;
    font-size: var(--gbz-fs-body);
    font-weight: var(--gbz-weight-display);
    gap: var(--gbz-space-3);
    justify-content: center;
    min-height: 52px;
    padding: var(--gbz-space-3) var(--gbz-space-6);
    text-transform: uppercase;
    width: 100%;
}

#product .gbz-product-page .add-to-cart::after {
    background-color: currentColor;
    content: "";
    flex: 0 0 auto;
    height: 18px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    width: 18px;
}

#product .gbz-product-page .add-to-cart .bag-icon {
    display: none;
}

#product .gbz-product-page .add-to-cart:hover {
    background-color: var(--gbz-accent);
    border-color: var(--gbz-accent);
    color: var(--gbz-accent-ink);
}

#product .gbz-product-page .add-to-cart:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

#product .gbz-product-page .add-to-cart.processing-add .spinner-icon {
    display: inline-block;
}

/* ----------------------------------------------------------------------------------------------
 * 8. Reassurance list (native blockreassurance output, moved out of the disclosure)
 * ------------------------------------------------------------------------------------------- */

#product .gbz-product-page .gbz-product-reassurance {
    border-top: var(--gbz-hairline-strong);
    margin-top: var(--gbz-space-6);
}

#product .gbz-product-page .gbz-product-reassurance .blockreassurance_product {
    margin-top: 0;
}

#product .gbz-product-page .gbz-product-reassurance .clearfix {
    display: none;
}

#product .gbz-product-page .gbz-product-reassurance .blockreassurance_product__item {
    align-items: center;
    border-bottom: var(--gbz-hairline);
    display: flex;
    gap: var(--gbz-space-4);
    margin: 0;
    padding: var(--gbz-space-4) 0;
}

#product .gbz-product-page .gbz-product-reassurance .blockreassurance_product__item .item-product {
    align-items: center;
    display: flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
    width: 32px;
}

#product .gbz-product-page .gbz-product-reassurance .blockreassurance_product__item img,
#product .gbz-product-page .gbz-product-reassurance .blockreassurance_product__item svg {
    height: 28px;
    object-fit: contain;
    width: 28px;
}

#product .gbz-product-page .gbz-product-reassurance .blockreassurance_product__text {
    min-width: 0;
}

#product .gbz-product-page .gbz-product-reassurance .blockreassurance_product__text .block-title {
    /* Typography pass (2026-09-23): the maquette sets this title at 19 px of ink against the live
       1440 width; the previous eyebrow token rendered 8 px. Display face comes from gbz-shell-v1.css
       section 4d, so only the size belongs here. */
    color: var(--gbz-ink) !important;
    display: block;
    font-size: 24px;
    font-weight: var(--gbz-weight-display);
    line-height: 1.15;
    text-transform: uppercase;
}

#product .gbz-product-page .gbz-product-reassurance .blockreassurance_product__text p {
    color: var(--gbz-muted) !important;
    font-size: var(--gbz-fs-small);
    line-height: 1.45;
    margin: var(--gbz-space-1) 0 0;
}

/* ----------------------------------------------------------------------------------------------
 * 9. Secondary hook disclosure (displayRightColumnProduct)
 * ------------------------------------------------------------------------------------------- */

#product .gbz-product-page .gbz-product-service {
    border-bottom: var(--gbz-hairline);
    border-top: var(--gbz-hairline);
    margin: var(--gbz-space-5) 0 0;
}

#product .gbz-product-page .gbz-product-service > summary {
    align-items: center;
    color: var(--gbz-ink);
    cursor: pointer;
    display: flex;
    /* Same disclosure family as the native accordion labels below. */
    font-size: 16px;
    font-weight: var(--gbz-weight-display);
    gap: var(--gbz-space-3);
    line-height: 1.2;
    list-style: none;
    min-height: 52px;
    padding: var(--gbz-space-3) 0;
    text-transform: uppercase;
}

#product .gbz-product-page .gbz-product-service > summary::-webkit-details-marker {
    display: none;
}

#product .gbz-product-page .gbz-product-service > summary::after {
    background-color: currentColor;
    content: "";
    flex: 0 0 auto;
    height: 14px;
    margin-left: auto;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.15s ease;
    width: 14px;
}

#product .gbz-product-page .gbz-product-service[open] > summary::after {
    transform: rotate(180deg);
}

#product .gbz-product-page .gbz-product-service-content {
    padding: 0 0 var(--gbz-space-4);
}

#product .gbz-product-page .gbz-product-service-content:empty {
    display: none;
}

#product .gbz-product-page .gbz-product-service-content .block {
    border: 0;
    margin: 0 0 var(--gbz-space-4);
    padding: 0;
}

#product .gbz-product-page .gbz-product-service-content .block-title {
    font-size: var(--gbz-fs-small);
    font-weight: var(--gbz-weight-display);
    margin: 0 0 var(--gbz-space-2);
}

/* ----------------------------------------------------------------------------------------------
 * 10. Native accordion tabs (#productdaas-accordion)
 * --------------------------------------------------------------------------------------------- */

#product .gbz-product-page .product-tabs {
    margin: var(--gbz-space-6) 0 var(--gbz-space-7);
}

#product .gbz-product-page #productdaas-accordion {
    margin: 0;
}

#product .gbz-product-page #productdaas-accordion > .card {
    background-color: var(--gbz-surface);
    border: var(--gbz-hairline-strong);
    border-radius: var(--gbz-radius-0);
    box-shadow: var(--gbz-shadow);
    margin-bottom: 0;
}

#product .gbz-product-page #productdaas-accordion > .card + .card {
    margin-top: -1px;
}

#product .gbz-product-page #productdaas-accordion > .card .title {
    margin: 0;
    padding: 0;
}

#product .gbz-product-page #productdaas-accordion > .card .title > a {
    align-items: center;
    color: var(--gbz-ink);
    display: flex;
    /* Typography pass (2026-09-23): maquette ink 15 px * 1.483 = 22 px against the live 15 px.
       Anton at 30 px yields 22 px of ink; line-height 1.1 keeps the 60 px row the layout already
       has (previously 22 px Karla at the inherited 1.55). */
    font-size: 30px;
    font-weight: var(--gbz-weight-display);
    gap: var(--gbz-space-3);
    line-height: 1.1;
    min-height: 60px;
    padding: var(--gbz-space-4) var(--gbz-space-5);
    text-decoration: none;
    text-transform: uppercase;
}

#product .gbz-product-page #productdaas-accordion > .card .title > a:hover {
    color: var(--gbz-ink);
}

#product .gbz-product-page #productdaas-accordion > .card .title > a .angle-down,
#product .gbz-product-page #productdaas-accordion > .card .title > a .angle-up {
    display: none;
}

#product .gbz-product-page #productdaas-accordion > .card .title > a::after {
    background-color: currentColor;
    content: "";
    flex: 0 0 auto;
    height: 16px;
    margin-left: auto;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.15s ease;
    width: 16px;
}

#product .gbz-product-page #productdaas-accordion > .card.gbz-open .title > a::after,
#product .gbz-product-page #productdaas-accordion > .card .title > a[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

#product .gbz-product-page #productdaas-accordion > .card > .content {
    border-top: var(--gbz-hairline);
    padding: var(--gbz-space-5);
}

#product .gbz-product-page #productdaas-accordion > .card .title,
#product .gbz-product-page #productdaas-accordion > .card > .content {
    border-bottom: 0;
}

#product .gbz-product-page #productdaas-accordion > .card > .content .rte-content {
    padding: 0;
}

#product .gbz-product-page #productdaas-accordion .empty-product-details {
    display: none;
}

/* ----------------------------------------------------------------------------------------------
 * 11. Server rendered content normalisation
 * ------------------------------------------------------------------------------------------- */

#product .gbz-product-page .rte-content {
    color: var(--gbz-ink);
    font-size: var(--gbz-fs-body);
    line-height: 1.65;
    overflow-wrap: anywhere;
}

/* Strip decorative inline boxes from stored content, keep the copy and links intact. */
#product .gbz-product-page .rte-content > div {
    background-color: transparent !important;
    border: 0 !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

#product .gbz-product-page .rte-content :is(p, h2, h3, li) {
    font-family: inherit !important;
    text-align: left !important;
}

#product .gbz-product-page .rte-content :is(h2, h3) {
    color: var(--gbz-ink) !important;
}

#product .gbz-product-page .rte-content p {
    margin-bottom: var(--gbz-space-4);
}

#product .gbz-product-page .rte-content img {
    height: auto;
    max-width: 100%;
}

#product .gbz-product-page .rte-content a {
    color: var(--gbz-ink);
    text-decoration: underline;
}

#product .gbz-product-page .product-description .rte-content {
    max-width: 1000px;
}

#product .gbz-product-page [id^="product-description-short-"] {
    border-top: var(--gbz-hairline);
    font-size: var(--gbz-fs-body);
    line-height: 1.6;
    margin: var(--gbz-space-5) 0 0;
    padding-top: var(--gbz-space-5);
    text-align: left;
}

#product .gbz-product-page [id^="product-description-short-"]:empty {
    display: none;
}

#product .gbz-product-page .product-additional-info {
    margin-top: var(--gbz-space-5);
}

#product .gbz-product-page .social-sharing ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gbz-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

#product .gbz-product-page .social-sharing ul a {
    align-items: center;
    border: var(--gbz-hairline);
    border-radius: var(--gbz-radius-0);
    color: var(--gbz-ink);
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

#product .gbz-product-page .social-sharing ul a:hover {
    background-color: var(--gbz-accent);
    border-color: var(--gbz-accent);
    color: var(--gbz-accent-ink);
}

#product .gbz-product-page .product-discounts {
    overflow-x: auto;
}

#product .gbz-product-page .product-discounts .table {
    border: var(--gbz-hairline);
}

#product .gbz-product-page .product-discounts .table th,
#product .gbz-product-page .product-discounts .table td {
    border-color: var(--gbz-hairline-color);
    font-size: var(--gbz-fs-small);
    vertical-align: middle;
}

#product .gbz-product-page .product-customization {
    border: var(--gbz-hairline);
    margin-bottom: var(--gbz-space-5);
    padding: var(--gbz-space-4);
}

#product .gbz-product-page .product-customization .form-control {
    border: var(--gbz-hairline-strong);
    border-radius: var(--gbz-radius-0);
}

#product .gbz-product-page .product-pack {
    border: var(--gbz-hairline);
    margin-bottom: var(--gbz-space-5);
    padding: var(--gbz-space-4);
}

/* ----------------------------------------------------------------------------------------------
 * 12. Full width media band (displayAfterProductThumbs2 output)
 * ------------------------------------------------------------------------------------------- */

#product .gbz-product-page .gbz-product-media-band {
    margin: 0 0 var(--gbz-space-7);
}

#product .gbz-product-page .gbz-product-media-band img {
    height: auto;
    width: 100%;
}

/* Detail band built from the product's own non-cover images (used when the hook is empty). */
#product .gbz-product-page .gbz-product-media-band--native {
    display: grid;
    gap: var(--gbz-space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#product .gbz-product-page .gbz-product-media-band--native .gbz-product-media-band__item {
    margin: 0;
}

#product .gbz-product-page .gbz-product-media-band--native img {
    aspect-ratio: 4 / 3;
    display: block;
    object-fit: cover;
    width: 100%;
}

/* ----------------------------------------------------------------------------------------------
 * 13. Related products row (native accessories carousel)
 * ------------------------------------------------------------------------------------------- */

#product .gbz-product-page .product-accessories.block-section {
    border: 0;
    margin: var(--gbz-space-7) 0 0;
    padding: 0;
}

#product .gbz-product-page .product-accessories .section-title {
    border: 0;
    color: var(--gbz-ink);
    /* Typography pass (2026-09-23): the maquette sizes "you may also like" like the product title
       (31 px of ink against the H1's 30 px, both at the reference width), i.e. 46 px of ink live.
       Mirroring the page-title clamp keeps that ratio; the live 30 px heading was 0.5 * target. */
    font-size: clamp(30px, 4.4vw, 64px);
    font-weight: var(--gbz-weight-display);
    line-height: 0.95;
    margin: 0 0 var(--gbz-space-4);
    padding: 0;
    text-transform: uppercase;
}

#product .gbz-product-page .product-accessories .section-title:after {
    background-color: var(--gbz-accent);
    content: "";
    display: block;
    height: 3px;
    margin-top: var(--gbz-space-3);
    width: 72px;
}

#product .gbz-product-page .product-accessories .products-grid {
    align-items: stretch;
}

#product .gbz-product-page .product-accessories .product-miniature {
    background-color: var(--gbz-surface);
    border: var(--gbz-hairline);
    border-radius: var(--gbz-radius-0);
    height: 100%;
}

#product .gbz-product-page .product-accessories .product-miniature .product-title,
#product .gbz-product-page .product-accessories .product-miniature .product-title a {
    color: var(--gbz-ink);
    font-size: var(--gbz-fs-body);
    font-weight: var(--gbz-weight-display);
    line-height: 1.3;
    text-decoration: none;
}

#product .gbz-product-page .product-accessories .product-miniature .product-category-name,
#product .gbz-product-page .product-accessories .product-miniature small {
    color: var(--gbz-muted);
    font-size: var(--gbz-fs-eyebrow);
    text-transform: uppercase;
}

#product .gbz-product-page .product-accessories .product-miniature .product-price {
    color: var(--gbz-ink);
    /* Maquette card price ink 14 px * 1.483 = 21 px live against 15 px Karla; the display face is
       narrower per glyph, so 26 px matches the reference cap height without widening the line. */
    font-size: 26px;
    font-weight: var(--gbz-weight-display);
    line-height: 1.1;
}

#product .gbz-product-page .product-accessories .product-miniature .regular-price {
    color: var(--gbz-muted);
}

/* Stock badge inside the recommended cards. The theme bundle paints
   `.product-unavailable` #a17738 with white-pink text - a brown that exists in
   none of the six mockups. Section 5 already neutralises the same state on the
   purchase panel (`#product-availability.product-unavailable`) and
   `gbz-qa-listings-v1.css` does it for the listing families (V-10). Same two
   declarations as V-10, scoped to the recommended row so no other page and no
   other badge is touched: the card keeps the badge box, its text and its
   icon, and only the fill and the colours change. The promotion flags
   (`.product-flag.on-sale`, `.discount`, `.new`) keep their lime palette and
   are never matched here. */
#product .gbz-product-page .product-accessories .product-availability .badge.product-unavailable {
    background-color: var(--gbz-surface-alt, #f6f6f6);
    color: var(--gbz-ink, #101010);
}

#product .gbz-product-page .product-accessories .swiper-button-prev,
#product .gbz-product-page .product-accessories .swiper-button-next {
    align-items: center;
    background-color: var(--gbz-surface);
    border: var(--gbz-hairline-strong);
    border-radius: var(--gbz-radius-0);
    color: var(--gbz-ink);
    display: flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

#product .gbz-product-page .product-accessories .swiper-button-prev:hover,
#product .gbz-product-page .product-accessories .swiper-button-next:hover {
    background-color: var(--gbz-accent);
    border-color: var(--gbz-accent);
    color: var(--gbz-accent-ink);
}

/* ----------------------------------------------------------------------------------------------
 * 14. Keyboard focus
 * ------------------------------------------------------------------------------------------- */

#product .gbz-product-page :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--gbz-black);
    outline-offset: 2px;
}

#product .gbz-product-page .add-to-cart:focus-visible,
#product .gbz-product-page .js-thumb-container:focus-visible {
    box-shadow: var(--gbz-focus-ring);
}

#product .gbz-product-page .js-thumb-container.gbz-focus {
    border-color: var(--gbz-black);
}

/* ----------------------------------------------------------------------------------------------
 * 15. Responsive
 * ------------------------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    #product .gbz-product-page .product-info-row {
        gap: var(--gbz-space-6);
    }
}

@media (max-width: 767.98px) {
    #product .gbz-product-page .product-info-row {
        gap: var(--gbz-space-4);
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: var(--gbz-space-5);
    }

    #product .gbz-product-page .col-product-info,
    #product .gbz-product-page #col-product-info {
        display: contents;
    }

    #product .gbz-product-page .product_header_container {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
    }

    #product .gbz-product-page .col-product-image {
        grid-column: 1;
        grid-row: 2;
    }

    #product .gbz-product-page .product-information {
        grid-column: 1;
        grid-row: 3;
    }

    #product .gbz-product-page .page-title {
        font-size: var(--gbz-fs-h2);
    }

    #product .gbz-product-page .product-lmage-large img {
        max-height: 420px;
    }

    #product .gbz-product-page .product-add-to-cart .product-quantity {
        grid-template-columns: minmax(0, 1fr);
    }

    #product .gbz-product-page .bootstrap-touchspin {
        width: 100%;
    }

    #product .gbz-product-page .current-price .product-price {
        font-size: calc(var(--gbz-fs-price) * 1.15);
    }

    #product .gbz-product-page .gbz-product-reassurance .blockreassurance_product__item {
        align-items: flex-start;
    }

    #product .gbz-product-page .gbz-product-reassurance .blockreassurance_product__text .block-title {
        font-size: 20px;
    }

    #product .gbz-product-page #productdaas-accordion > .card .title > a {
        font-size: 20px;
        min-height: 52px;
        padding: var(--gbz-space-3) var(--gbz-space-4);
    }

    #product .gbz-product-page #productdaas-accordion > .card > .content {
        padding: var(--gbz-space-4);
    }

    #product .gbz-product-page .product-accessories .section-title {
        font-size: var(--gbz-fs-h3);
    }

    #product .gbz-product-page .gbz-product-media-band--native {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ----------------------------------------------------------------------------------------------
 * 16. Reduced motion
 * ------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    #product .gbz-product-page .add-to-cart,
    #product .gbz-product-page .btn-touchspin,
    #product .gbz-product-page .expander,
    #product .gbz-product-page .gbz-product-service > summary::after,
    #product .gbz-product-page #productdaas-accordion > .card .title > a::after {
        transition: none;
    }
}

/* ----------------------------------------------------------------------------------------------
 * 17. PDP states (2026-09-26)
 *   a. Disabled add-to-cart. The inherited treatment only dimmed the control (opacity .55), so it
 *      still read as "faded but pressable" and the white label sat on a half-transparent plate.
 *      A flat inert palette replaces it: surface-alt plate, hairline border, muted ink (#5F5F5F on
 *      #F6F6F6 = 5.98:1) and no transparency. Nothing else about the control changes - same size,
 *      same label, same markup, and the enabled CTA stays the black pill.
 *   b. Reassurance. The list is a single shared band rendered once per page by the footer strip
 *      (#gbz-reassurance-strip, 4 items). The product-level copy repeated the same three items
 *      directly under the buy box, so it is hidden here - charter 6.7 / 9.7 accept one band per
 *      page. Scoped to body#product: the module output stays available to any other surface.
 * ------------------------------------------------------------------------------------------- */

#product .gbz-product-page .add-to-cart:disabled,
#product .gbz-product-page .add-to-cart.disabled {
    background-color: var(--gbz-surface-alt);
    border-color: var(--gbz-hairline-color);
    color: var(--gbz-muted);
    opacity: 1;
}

#product .gbz-product-page .gbz-product-reassurance {
    display: none;
}