/* assets/css/pages/pdp.css */

/* --- 1. LAYOUT OVERRIDES --- */
.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images,
.gtm-pdp-container .woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both !important;
}

/* --- 2. GALLERY STYLES --- */

.gtm-gallery-stage {
    width: 100%;
    margin-bottom: 24px;
    border-radius: 16px;
    overflow: hidden;
    background-color: #f9f9f9;
    aspect-ratio: 4/3; 
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Fit main image inside stage without cropping (background fills any letterbox). */
.gtm-main-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block;
    transition: opacity 0.2s ease;
}

/* Cap tiny source images at their intrinsic width so they aren't upscaled into the stage.
   --gtm-img-max-w is set inline (server-side on initial render, JS on gallery swap). */
.gtm-main-img--tiny {
    width: auto !important;
    height: auto !important;
    max-width: var(--gtm-img-max-w);
    max-height: 100%;
    margin: auto;
}

/* Container for the strip */
.gtm-gallery-nav-wrapper {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px; 
}

.gtm-gallery-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    
    /* Important for layout */
    flex-grow: 1;
    padding: 4px 4px 10px 4px; /* Bottom padding for shadow */
    cursor: grab;
    
    /* Prevent image ghosting while dragging */
    user-select: none;
    -webkit-user-drag: none;
}

.gtm-gallery-track::-webkit-scrollbar { display: none; }

.gtm-gallery-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none; /* Disable snap for smooth dragging */
}

/* Thumbnails */
.gtm-thumb-link {
    flex: 0 0 80px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.2s ease;
    scroll-snap-align: start;
    position: relative;
    background: #fff;
    -webkit-user-drag: none; /* Prevent link dragging */
}

/* Increase specificity to ensure coverage */
.gtm-pdp-gallery .gtm-gallery-track .gtm-thumb-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block;
    pointer-events: none; /* KEY: prevents browser dragging image file */
}

.gtm-thumb-link:hover { opacity: 1; }
.gtm-thumb-link.is-active {
    opacity: 1;
    border-color: var(--c-active-brand, #342E37);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

/* --- ARROW BUTTONS --- */
.gtm-gal-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    z-index: 2;
}

.gtm-gal-arrow:hover {
    background: #f0f0f0;
    border-color: #bbb;
    transform: scale(1.1);
}

.gtm-gal-arrow .material-symbols-outlined {
    font-size: 20px;
    line-height: 1;
}

/* Hide arrows if on mobile (optional, usually swipe is enough) */
@media (max-width: 767px) {
    .gtm-gal-arrow { display: none; }
    .gtm-gallery-nav-wrapper { gap: 0; }
}

@media (min-width: 768px) {
    .gtm-thumb-link {
        flex: 0 0 110px;
        height: 82px;
    }
}

/* --- 3. EXISTING PDP STYLES (Keep below) --- */
:root {
    --gt-black: #342E37;
    --gt-border: #DFDFDF;
    --header-height: 100px;
}

.gtm-pdp-container {
    width: 100%;
    overflow: visible;
    padding-bottom: 40px;
}

/* ... (Your existing .gtm-pdp-summary-wrapper etc. styles) ... */
.gtm-pdp-summary-wrapper {
    display: flex;
    flex-direction: column;
    border-left: 4px solid var(--c-active-brand, #333);
    padding-left: 24px;
    gap: 24px;
    height: 100%;
    justify-content: space-evenly;
    max-width: 100%;
}

.gtm-pdp-brand-label {
    color: var(--c-active-brand);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin: 0;
}

.gtm-pdp-title {
    color: var(--gt-black);
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 6px 0 0 0;
}

.gtm-pdp-price {
    color: var(--c-active-brand);
    font-size: clamp(32px, 3vw, 64px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
    text-transform: uppercase;
    margin: 0;
}

.gtm-pdp-price span.amount {
    color: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
}

/* USP / Short Description (v1.3.3) */
.gtm-pdp-usp {
    font-size: 16px;
    font-weight: 500;
    color: #555;
    line-height: 1.5;
}

/* Mileage / Reg Grid (v1.3.3) */
.gtm-pdp-meta-grid {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.gtm-pdp-meta-grid .meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gtm-pdp-meta-grid .meta-label {
    font-size: 12px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gtm-pdp-meta-grid .meta-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--gt-black, #342E37);
}

.gtm-pdp-colours {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.gtm-pdp-colours-label {
    color: var(--gt-black);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

.gtm-colour-dots {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.gtm-colour-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e0e0e0;
    transition: transform 0.2s ease, box-shadow 0.2s;
}

.gtm-colour-dot.active,
.gtm-colour-dot:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gt-black);
}

.gtm-pdp-actions {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.gtm-pdp-desc-header {
    margin-bottom: 16px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.gtm-pdp-desc {
    position: relative;
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.5s ease;
    margin-bottom: 16px;
    border-left: 4px solid var(--c-active-brand, #333);
    padding-left: 24px;
    display: flex;
    flex-direction: column;
}

.gtm-pdp-desc.expanded {
    max-height: 3000px;
}

.gtm-pdp-desc::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: linear-gradient(to top, #E2E2E2 20%, rgba(226, 226, 226, 0));
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 10;
}

.gtm-pdp-desc.expanded::after {
    opacity: 0;
    pointer-events: none;
}

.gtm-entry-content {
    order: 1;
}

.gtm-specs-mast {
    background-color: var(--c-active-brand, #333);
    border-radius: 16px 16px 0 0;
    padding: 40px 0;
    text-align: center;
    color: #fff;
}

.gtm-specs-brand-logo {
    height: 40px;
    width: auto;
    margin: 0 auto 16px;
    display: block;
}

.gtm-specs-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
}

.gtm-spec-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 24px 16px;
    border-bottom: 1px solid #eee;
    margin-bottom: 40px;
    background: #fff;
}

.gtm-spec-link {
    display: inline-block;
    padding: 8px 16px;
    margin: 0;
    text-decoration: none;
    color: #342E37;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 24px;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.gtm-spec-link:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: -8px;
    top: 8px;
    color: #E0E0E0;
    font-weight: 400;
    pointer-events: none;
}

.gtm-spec-link:hover {
    color: #000;
}

.gtm-spec-link.active {
    color: var(--c-active-brand, #333);
}

.gtm-spec-panel {
    display: none;
    animation: gtmFadeIn 0.3s ease forwards;
}

.gtm-spec-panel.active {
    display: block;
}

@keyframes gtmFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gtm-spec-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.gtm-spec-row {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    border-bottom: none;
    padding: 0 4px;
    box-sizing: border-box;
}

.gtm-spec-label {
    font-family: "Figtree", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    color: #999;
    line-height: 1.2;
}

.gtm-spec-val {
    font-family: "Figtree", sans-serif;
    text-align: left;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .gtm-spec-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 32px 0;
    }

    .gtm-spec-row {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
        border-bottom: 1px solid #E2E2E2;
        padding-bottom: 16px;
        padding-right: 24px;
    }
}

@media print {
    .gtm-spec-panel {
        display: block !important;
        margin-bottom: 30px;
        page-break-inside: avoid;
    }

    .gtm-spec-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 10px !important;
    }

    .gtm-spec-row {
        border-bottom: 1px solid #ccc !important;
        page-break-inside: avoid;
        max-width: none !important;
    }

    .gtm-spec-link {
        color: #333 !important;
    }

    .gtm-spec-link::after {
        display: none;
    }

    .gtm-specs-mast {
        background: none !important;
        color: #000 !important;
        border-bottom: 2px solid #000;
        padding: 10px 0 !important;
    }

    .gtm-specs-brand-logo {
        filter: invert(1) !important;
        margin: 0 auto 5px !important;
    }

    .gtm-specs-title {
        color: #000 !important;
        font-size: 24px !important;
    }

    .gtm-spec-nav {
        border-bottom: 1px solid #000 !important;
        padding: 10px 0 !important;
    }
}

@media (max-width: 991px) {
    .gtm-pdp-summary-wrapper {
        border-left: none;
        border-top: 4px solid var(--c-active-brand, #333);
        padding-left: 0;
        padding-top: 24px;
    }

    .gtm-pdp-actions {
        justify-content: stretch;
    }

    .gtm-btn {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .container .row>.col-lg-6:first-child {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
}

.gtm-pdp-offer-float {
    width: 100%;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
    order: 2;
    margin-top: 24px;
}

@media (min-width: 992px) {
    .gtm-pdp-offer-float {
        float: right;
        width: 450px;
        margin-left: 24px;
        margin-bottom: 24px;
        margin-right: 0;
        clear: right;
    }

    .gtm-pdp-offer-float .gtm-card-post {
        width: 100%;
        flex: none;
        max-width: 100%;
        height: auto;
        min-height: 380px;
    }

    .gtm-pdp-desc {
        display: block;
    }

    .gtm-entry-content,
    .gtm-pdp-offer-float {
        order: unset;
        margin-top: 0;
    }

    .gtm-pdp-offer-float {
        float: right;
        width: 50%;
        margin-left: 24px;
        margin-bottom: 24px;
        margin-right: 0;
        clear: right;
    }

    .gtm-pdp-offer-float .gtm-card-post {
        height: 450px;
    }
}

.gtm-read-more-trigger {
    align-self: flex-start;
    flex: 0 0 auto;
}

.gtm-colour-name {
    font-family: "Figtree", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #666;
    margin-top: 8px;
    letter-spacing: 0.02em;
    min-height: 20px; /* Prevent layout jump if empty */
    transition: color 0.2s ease;
}

/* Optional: Highlight text slightly when active dot is clicked */
.gtm-colour-dot:hover ~ .gtm-colour-name,
.gtm-colour-dot.active ~ .gtm-colour-name {
    color: var(--gt-black, #333);
}

/* ==========================================================================
   VARIATION SELECTORS (Colour Dots + Size Dropdown)
   Attribute-aware UI for variable products
   ========================================================================== */

.gtm-variation-selectors {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 12px;
}

.gtm-variation-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gtm-variation-label {
    color: var(--gt-black, #342E37);
    font-family: "Figtree", sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- SIZE/GENERIC SELECTOR (Styled Dropdown) --- */
.gtm-size-select,
.gtm-generic-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 100%;
    max-width: 280px;
    padding: 12px 40px 12px 16px;

    font-family: "Figtree", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--gt-black, #342E37);

    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23342E37' d='M6 8.5L1.5 4h9L6 8.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;

    border: 2px solid var(--gt-border, #DFDFDF);
    border-radius: 8px;

    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gtm-size-select:hover,
.gtm-generic-select:hover {
    border-color: var(--c-active-brand, #342E37);
}

.gtm-size-select:focus,
.gtm-generic-select:focus {
    outline: none;
    border-color: var(--c-active-brand, #342E37);
    box-shadow: 0 0 0 3px rgba(52, 46, 55, 0.15);
}

/* Placeholder option */
.gtm-size-select option[value=""],
.gtm-generic-select option[value=""] {
    color: #999;
}

/* --- COLOUR DOTS (Enhanced) --- */
.gtm-variation-colour .gtm-colour-dots {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.gtm-variation-colour .gtm-colour-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e0e0e0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.gtm-variation-colour .gtm-colour-dot:focus {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-active-brand, #342E37);
}

.gtm-variation-colour .gtm-colour-dot.active,
.gtm-variation-colour .gtm-colour-dot:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-active-brand, #342E37);
}

/* Checkmark for active state */
.gtm-variation-colour .gtm-colour-dot.active::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E") center/contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* Light colour adjustment - dark checkmark */
.gtm-variation-colour .gtm-colour-dot[data-is-light="true"].active::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E") center/contain no-repeat;
    filter: none;
}

.gtm-variation-colour .gtm-colour-name {
    font-family: "Figtree", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #666;
    margin-top: 4px;
    letter-spacing: 0.02em;
    min-height: 20px;
    transition: color 0.2s ease;
}

/* --- VALIDATION ERROR --- */
.gtm-variation-error {
    display: none;
    padding: 12px 16px;
    background-color: #FEE2E2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    color: #991B1B;
    font-family: "Figtree", sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* --- DISABLED BUTTON STATE --- */
.gtm-btn.gtm-btn-disabled,
.single_add_to_cart_button.disabled,
.single_add_to_cart_button.gtm-btn-disabled {
    background-color: #E2E2E2 !important;
    color: #999 !important;
    border-color: #ccc !important;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none !important;
    transform: none !important;
}

/* --- WOOCOMMERCE FORM WRAPPER & BUTTON OVERRIDES --- */
.gtm-wc-form-wrap {
    margin-top: 20px;
}

/* Hide native WooCommerce variation UI */
.gtm-wc-form-wrap .variations,
.gtm-wc-form-wrap .woocommerce-variation-price,
.gtm-wc-form-wrap .woocommerce-variation-availability,
.gtm-wc-form-wrap .quantity,
.gtm-wc-form-wrap .reset_variations {
    display: none !important;
}

.gtm-wc-form-wrap .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Force GTM styling on Add to Cart button using high specificity */
body.woocommerce div.product .gtm-wc-form-wrap button.single_add_to_cart_button.button,
.gtm-wc-form-wrap .single_add_to_cart_button {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;

    min-width: 200px !important;
    padding: 12px 24px !important;

    font-family: "Figtree", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;

    color: #fff !important;
    background-color: var(--c-active-brand, #333) !important;
    border: none !important;
    border-radius: 96px !important;

    cursor: pointer;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    opacity: 1;
}

/* Hover State */
body.woocommerce div.product .gtm-wc-form-wrap button.single_add_to_cart_button.button:hover,
.gtm-wc-form-wrap .single_add_to_cart_button:hover {
    background-color: var(--c-active-brand, #333) !important;
    color: #fff !important;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25) !important;
    transform: none !important;
}

/* Disabled State */
body.woocommerce div.product .gtm-wc-form-wrap button.single_add_to_cart_button.disabled,
.gtm-wc-form-wrap .single_add_to_cart_button.disabled,
.gtm-wc-form-wrap .single_add_to_cart_button.gtm-btn-disabled {
    background-color: #E2E2E2 !important;
    color: #999 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 767px) {
    .gtm-size-select,
    .gtm-generic-select {
        max-width: 100%;
    }

    .gtm-variation-colour .gtm-colour-dot {
        width: 40px;
        height: 40px;
    }
}

/* ==========================================================================
   PDP CONTENT-AREA REDESIGN (v1.5.0)
   Offers carousel band + honest description expand + reformatted tech specs
   + standardised brand logos. Adapted from .forge/pdp-mockup.html.
   Scoped design tokens live here so nothing leaks into the global sheet.
   ========================================================================== */
.gtm-pdp-container {
    --pdp-ink-muted: #6b6570;
    --pdp-ink-faint: #8f8a93;
    --pdp-line-soft: #E6E4E8;
    --pdp-radius-card: 16px;
    --pdp-radius-pill: 999px;
}

/* --------------------------------------------------------------------------
   (1) OFFERS — CAROUSEL BAND (above the description)
   Reuses the unified carousel engine + card-post visual language.
   -------------------------------------------------------------------------- */
.gtm-offers-band {
    margin: 0 auto;
}

.gtm-offers-band__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.gtm-offers-band__title {
    margin: 0;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--c-primary, #342E37);
    line-height: 1.05;
}

.gtm-offers-band__title small {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--c-active-brand, #342E37);
    margin-bottom: 6px;
}

.gtm-offers-band__count {
    font-size: 12px;
    font-weight: 700;
    color: var(--pdp-ink-faint);
    white-space: nowrap;
    padding-bottom: 4px;
}

/* Offer cards read best at most 2-up (they are information-dense). The engine's
   own --gtm-cards ladder goes 1 -> 2 -> 3 -> 4; we cap offers at 2. Scoped under
   .gtm-pdp-container so these rules outrank the engine's single-class breakpoints
   at every width (otherwise its 992/1200 rules would leak 3/4 columns in). */
.gtm-pdp-container .gtm-carousel--offers {
    --gtm-cards: 1;
}
@media (min-width: 680px) {
    .gtm-pdp-container .gtm-carousel--offers {
        --gtm-cards: 2;
    }
}

/* Single-offer state: one wide card fills the band. Driven by --single, which is
   set server-side when there is exactly one offer (deterministic, no pre-JS
   flash). We do NOT key this off .is-static: a genuine multi-card band whose
   cards all fit is also .is-static, and forcing flex there would wrongly shrink
   the cards. The engine's own .is-static rule still hides the nav in every case. */
.gtm-pdp-container .gtm-carousel--offers.gtm-carousel--single {
    --gtm-cards: 1;
}
.gtm-pdp-container .gtm-carousel--offers.gtm-carousel--single .gtm-carousel__item {
    flex: 1 1 100%;
    max-width: 100%;
}

/* --- OFFER CARD (built on the card-post language, re-shaped for offers) --- */
.gtm-offer-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 340px;
    padding: 0;
    border-radius: var(--pdp-radius-card);
    overflow: hidden;
    background: #2a252d;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.gtm-carousel__item .gtm-offer-card {
    height: 100%;
}
.gtm-offer-card:hover {
    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.4);
}

/* photographic top strip with brand wash. The gradient is the base layer; a
   real featured image (when present) is layered on top via ::before. */
.gtm-offer-card__media {
    position: relative;
    height: 120px;
    min-height: 120px;
    flex: 0 0 120px;
    background:
        radial-gradient(120% 140% at 82% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
        linear-gradient(135deg, var(--offer-brand, #342E37) 0%, #201c22 118%);
    overflow: hidden;
}
/* Featured image layered over the wash, driven by the inline --offer-photo var
   so the base gradient underneath is preserved. */
.gtm-offer-card__media--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--offer-photo);
    background-size: cover;
    background-position: center;
    opacity: 0.55;
    mix-blend-mode: luminosity;
}

.gtm-offer-badge {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 3;
    background: #fff;
    color: #111;
    padding: 7px 20px 7px 24px;
    border-radius: 0 var(--pdp-radius-pill) var(--pdp-radius-pill) 0;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.gtm-offer-badge .gtm-brandmark {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--offer-brand, #342E37);
    margin-right: 7px;
    vertical-align: baseline;
}

.gtm-offer-card__body {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 28px 28px;
    color: #fff;
}
.gtm-offer-card__ends {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    padding: 5px 12px;
    border-radius: var(--pdp-radius-pill);
}
.gtm-offer-card__ends svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}
.gtm-offer-card__title {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.08;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    color: #fff;
}
.gtm-offer-card__excerpt {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
    max-width: 56ch;
}
.gtm-offer-card__cta {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 26px;
    border-radius: var(--pdp-radius-pill);
    background: #fff;
    color: #161318;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.gtm-offer-card__cta:hover {
    color: #161318;
    box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.5);
}
.gtm-offer-card__cta svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    transition: transform 0.18s ease;
}
.gtm-offer-card__cta:hover svg {
    transform: translateX(3px);
}

/* Single wide state: media becomes a side panel on desktop */
.gtm-offer-card--wide {
    min-height: 280px;
}
@media (min-width: 768px) {
    .gtm-offer-card--wide {
        flex-direction: row;
    }
    .gtm-offer-card--wide .gtm-offer-card__media {
        flex: 0 0 44%;
        min-height: 0;
        height: auto;
    }
    .gtm-offer-card--wide .gtm-offer-card__body {
        justify-content: center;
        padding: 36px 44px;
        gap: 14px;
    }
    .gtm-offer-card--wide .gtm-offer-card__title {
        font-size: 30px;
    }
    .gtm-offer-card--wide .gtm-offer-card__excerpt {
        font-size: 16px;
        max-width: 60ch;
    }
}

/* --------------------------------------------------------------------------
   (2) DESCRIPTION — honest expand/collapse (replaces the janky read-more)
   -------------------------------------------------------------------------- */
.gtm-pdp-desc2 {
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--pdp-line-soft);
    border-radius: var(--pdp-radius-card);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.gtm-pdp-desc2__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px clamp(24px, 3.2vw, 48px);
    border-bottom: 1px solid var(--pdp-line-soft);
    background: #fbfbfc;
}
.gtm-pdp-desc2__head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--c-primary, #342E37);
}
.gtm-pdp-desc2__head h2::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 16px;
    margin-right: 12px;
    vertical-align: -2px;
    border-radius: 3px;
    background: var(--c-active-brand, #342E37);
}

.gtm-pdp-desc2__body {
    padding: clamp(24px, 3vw, 40px) clamp(24px, 3.2vw, 48px) 8px;
}

/* accent lead-in rule echoes the theme's brand left-border, but intentional */
.gtm-desc-lead {
    font-size: 19px;
    line-height: 1.55;
    font-weight: 600;
    color: var(--c-primary, #342E37);
    margin: 0 0 24px;
    max-width: 64ch;
    padding-left: 20px;
    border-left: 3px solid var(--c-active-brand, #342E37);
}

/* honest collapse: JS animates max-height to the real scrollHeight, then
   releases to auto. No arbitrary px clip fighting a gradient. */
.gtm-desc-flow {
    max-width: 68ch;
    color: var(--c-text, #333);
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.gtm-desc-flow p {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.72;
}
.gtm-desc-flow p:last-child {
    margin-bottom: 0;
}
.gtm-desc-flow h2,
.gtm-desc-flow h3,
.gtm-desc-flow h4 {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pdp-ink-faint);
    margin: 28px 0 12px;
}
.gtm-desc-flow ul,
.gtm-desc-flow ol {
    margin: 0 0 18px;
    padding-left: 20px;
}
.gtm-desc-flow li {
    font-size: 16px;
    line-height: 1.72;
    margin-bottom: 6px;
}
.gtm-desc-flow strong {
    color: var(--c-primary, #342E37);
    font-weight: 700;
}
.gtm-desc-flow a {
    color: var(--c-active-brand, #342E37);
    text-decoration: underline;
}
.gtm-desc-flow img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* soft fade sits INSIDE the wrapper only while collapsed; JS removes it on
   expand. It fades to the card's own white, honestly indicating "more below". */
.gtm-desc-clip {
    position: relative;
}
.gtm-desc-clip.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    background: linear-gradient(to top, #fff 12%, rgba(255, 255, 255, 0));
    pointer-events: none;
}

/* Expand control — deliberate, brand-tinted ghost button */
.gtm-desc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 24px 0 32px;
    padding: 12px 24px;
    border-radius: var(--pdp-radius-pill);
    background: transparent;
    color: var(--c-active-brand, #342E37);
    border: 1.5px solid var(--c-active-brand, #342E37);
    font-family: "Figtree", sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.gtm-desc-toggle:hover {
    background: var(--c-active-brand, #342E37);
    color: #fff;
}
.gtm-desc-toggle:focus-visible {
    outline: 3px solid var(--c-active-brand, #342E37);
    outline-offset: 2px;
}
.gtm-desc-toggle svg {
    width: 15px;
    height: 15px;
    transition: transform 0.25s ease;
}
.gtm-desc-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   (3) TECH SPECS — reformatted VALUES (masthead + pill nav kept, restyled)
   -------------------------------------------------------------------------- */
/* Wrap the kept masthead + nav + content in a rounded card. */
.gtm-specs-section .gtm-specs-wrap {
    max-width: 1320px;
    margin: 0 auto;
    border-radius: var(--pdp-radius-card);
    overflow: hidden;
    border: 1px solid var(--pdp-line-soft);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    background: #fff;
}

/* Masthead — KEPT (brand logo + TECH SPECS on active-brand fill). Override the
   legacy 40px/0-radius rules since it now lives inside the wrap. */
.gtm-specs-section .gtm-specs-wrap .gtm-specs-mast {
    background-color: var(--c-active-brand, #342E37);
    border-radius: 0;
    padding: 36px 0 34px;
    text-align: center;
    color: #fff;
}

/* Pill nav — KEPT concept, tidied to a segmented rail (drop the "|" dividers). */
.gtm-specs-section .gtm-specs-wrap .gtm-spec-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 18px 16px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--pdp-line-soft);
    background: #fbfbfc;
}
.gtm-specs-section .gtm-specs-wrap .gtm-spec-link {
    display: inline-block;
    font-family: "Figtree", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.03em;
    color: var(--pdp-ink-muted);
    padding: 9px 16px;
    border-radius: var(--pdp-radius-pill);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
}
/* Neutralise the legacy "|" pseudo-divider inside the reformatted nav. */
.gtm-specs-section .gtm-specs-wrap .gtm-spec-link:not(:last-child)::after {
    content: none;
}
.gtm-specs-section .gtm-specs-wrap .gtm-spec-link:hover {
    color: var(--c-primary, #342E37);
    background: #f0eef2;
}
.gtm-specs-section .gtm-specs-wrap .gtm-spec-link.active {
    color: #fff;
    background: var(--c-active-brand, #342E37);
}
.gtm-specs-section .gtm-specs-wrap .gtm-spec-link:focus-visible {
    outline: 3px solid var(--c-active-brand, #342E37);
    outline-offset: 2px;
}

.gtm-specs-section .gtm-specs-wrap .gtm-specs-content {
    padding: clamp(20px, 3vw, 36px) clamp(20px, 3.4vw, 44px) clamp(28px, 3vw, 40px);
    margin-bottom: 0;
}

.gtm-spec-panel__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 20px;
}
.gtm-spec-panel__head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--c-primary, #342E37);
    letter-spacing: 0.01em;
}
.gtm-spec-panel__head .cnt {
    font-size: 12px;
    font-weight: 700;
    color: var(--pdp-ink-faint);
}

/* NEW VALUE FORMAT — definition-list cells: muted label above prominent value.
   1 col (mobile) -> 2 cols (desktop). Label ABOVE value so long values never
   squeeze into a narrow column. Overrides the legacy .gtm-spec-grid layout. */
.gtm-specs-section .gtm-specs-wrap .gtm-spec-dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
}
.gtm-specs-section .gtm-specs-wrap .gtm-spec-dl .gtm-spec-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.7fr) 1.6fr;
    align-items: baseline;
    gap: 6px 20px;
    padding: 14px 2px;
    border-top: 1px solid var(--pdp-line-soft);
    border-bottom: none;
    max-width: none;
    flex: none;
}
.gtm-specs-section .gtm-specs-wrap .gtm-spec-dl > .gtm-spec-row:first-child {
    border-top: none;
}
.gtm-specs-section .gtm-specs-wrap .gtm-spec-dl .gtm-spec-label {
    font-family: "Figtree", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pdp-ink-muted);
    line-height: 1.4;
}
.gtm-specs-section .gtm-specs-wrap .gtm-spec-dl .gtm-spec-val {
    font-family: "Figtree", sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--c-primary, #342E37);
    line-height: 1.45;
    text-align: left;
}
/* the numeric part reads strongest; unit steps back a touch */
.gtm-spec-val .u {
    color: var(--pdp-ink-muted);
    font-weight: 600;
}
.gtm-spec-val .hl {
    font-weight: 800;
    letter-spacing: -0.01em;
}

@media (min-width: 760px) {
    .gtm-specs-section .gtm-specs-wrap .gtm-spec-dl {
        grid-template-columns: 1fr 1fr;
        column-gap: 56px;
    }
    .gtm-specs-section .gtm-specs-wrap .gtm-spec-dl .gtm-spec-row {
        padding: 15px 2px;
    }
    .gtm-specs-section .gtm-specs-wrap .gtm-spec-dl > .gtm-spec-row:nth-child(2) {
        border-top: none;
    }
}
@media (min-width: 1000px) {
    .gtm-specs-section .gtm-specs-wrap .gtm-spec-dl .gtm-spec-row {
        grid-template-columns: minmax(130px, 0.75fr) 1.5fr;
    }
}

/* --------------------------------------------------------------------------
   (4) BRAND LOGOS — standardised sizing across the PDP
   -------------------------------------------------------------------------- */
.gtm-specs-section .gtm-specs-wrap .gtm-specs-brand-logo,
.gtm-pdp-brand-logo {
    height: 40px;
    width: auto;
    max-width: 170px;
    margin: 0 auto 14px;
    display: block;
    object-fit: contain;
}

/* Print: keep the definition-list readable, restore mono masthead. */
@media print {
    .gtm-specs-section .gtm-specs-wrap .gtm-spec-dl {
        grid-template-columns: 1fr 1fr !important;
    }
    .gtm-specs-section .gtm-specs-wrap .gtm-spec-dl .gtm-spec-row {
        border-top: 1px solid #ccc !important;
        page-break-inside: avoid;
    }
    .gtm-desc-flow {
        max-height: none !important;
    }
    .gtm-desc-toggle,
    .gtm-carousel__nav {
        display: none !important;
    }
}

/* Reduced motion: no expand animation, no CTA nudge. */
@media (prefers-reduced-motion: reduce) {
    .gtm-desc-flow {
        transition: none;
    }
    .gtm-desc-toggle svg,
    .gtm-offer-card__cta svg,
    .gtm-offer-card {
        transition: none;
    }
}

/* Mobile tightening for the new content area. */
@media (max-width: 767.98px) {
    .gtm-offers-band__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .gtm-offer-card--wide {
        flex-direction: column;
    }
    .gtm-offer-card--wide .gtm-offer-card__media {
        flex: 0 0 120px;
        min-height: 120px;
    }
    .gtm-specs-section .gtm-specs-wrap .gtm-specs-brand-logo {
        height: 34px;
    }
}

/* ==========================================================================
   PDP TOP SECTION REFINEMENT (v1.6.0)
   Gallery framing + buy-box rhythm. Placed last so it overrides the earlier
   gallery/summary rules on source order. Scope: ONLY the gallery stage/thumbs
   and the buy box (header, price, highlights, actions) — nothing in the
   offers/description/specs content area below is touched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   (A) GALLERY — tighter, elevated, intentional stage
   The bike is the hero: a wider 3:2 stage kills the dead vertical space of the
   old 4:3 box, a soft studio wash + hairline + shadow reads as a premium frame
   rather than a flat grey panel, and inner padding gives the bike room to
   breathe on purpose. Keeps object-fit: contain (no cropping) and the
   tiny-image cap untouched.
   -------------------------------------------------------------------------- */
.gtm-pdp-gallery .gtm-gallery-stage {
    aspect-ratio: 3 / 2;
    margin-bottom: 16px;
    padding: clamp(16px, 3.2vw, 40px);
    border: 1px solid var(--pdp-line-soft, #E6E4E8);
    border-radius: 18px;
    background:
        radial-gradient(118% 130% at 50% 6%, #ffffff 0%, #f6f5f7 62%, #eeecf0 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 22px 40px -30px rgba(0, 0, 0, 0.30);
}

/* A subtle accent ground-line anchors the bike to the brand without shouting. */
.gtm-pdp-gallery .gtm-gallery-stage::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: clamp(12px, 2.4vw, 26px);
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(52, 46, 55, 0.14), transparent 76%);
    pointer-events: none;
    z-index: 0;
}

/* Keep the image above the ground-line shadow. */
.gtm-pdp-gallery .gtm-gallery-stage .gtm-main-img {
    position: relative;
    z-index: 1;
}

/* Thumbnail row — tighter, calmer, active thumb clearly marked. */
.gtm-pdp-gallery .gtm-gallery-track {
    gap: 10px;
    padding: 4px 2px 12px;
}
.gtm-pdp-gallery .gtm-thumb-link {
    border-radius: 10px;
    border-width: 2px;
    opacity: 0.55;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.gtm-pdp-gallery .gtm-thumb-link:hover {
    opacity: 0.85;
}
/* Active: accent ring + lift + an accent underline bar so the state reads even
   for colour-blind users (not colour alone). */
.gtm-pdp-gallery .gtm-thumb-link.is-active {
    opacity: 1;
    border-color: var(--c-active-brand, #342E37);
    box-shadow: 0 0 0 1px var(--c-active-brand, #342E37), 0 6px 14px -6px rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);
}
.gtm-pdp-gallery .gtm-thumb-link.is-active::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 4px;
    height: 3px;
    border-radius: 3px;
    background: var(--c-active-brand, #342E37);
    z-index: 2;
}

/* Arrow buttons — align to the premium frame (crisper, brand hover). */
.gtm-pdp-gallery .gtm-gal-arrow {
    width: 36px;
    height: 36px;
    border-color: var(--pdp-line-soft, #E6E4E8);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.gtm-pdp-gallery .gtm-gal-arrow:hover {
    background: var(--c-active-brand, #342E37);
    border-color: var(--c-active-brand, #342E37);
    color: #fff;
    transform: none;
}

@media (min-width: 768px) {
    .gtm-pdp-gallery .gtm-thumb-link {
        flex: 0 0 96px;
        height: 68px;
    }
}

/* --------------------------------------------------------------------------
   (B) BUY BOX — tighten the vertical rhythm
   The old wrapper used justify-content: space-evenly + a stretched column,
   which flung price and CTAs apart. Anchor the stack to the top and drive
   spacing with a deliberate gap ladder so price -> highlights -> CTAs read as
   one related group. Keeps the accent left-divider (accent-driven).
   -------------------------------------------------------------------------- */
.gtm-pdp-container .gtm-pdp-summary-wrapper {
    justify-content: flex-start;
    gap: 20px;
}

/* Header sits tight to the price. */
.gtm-pdp-container .gtm-pdp-header {
    margin: 0;
}
.gtm-pdp-container .gtm-pdp-title {
    margin-top: 4px;
}

/* Price: slightly calmer size so it leads without swallowing the column, and
   no longer needs a big gap beneath it to feel balanced. */
.gtm-pdp-container .gtm-pdp-price {
    font-size: clamp(30px, 2.6vw, 52px);
    margin: 0;
}

/* Key spec highlights — fills the old dead gap with real value. A compact,
   scannable rail: muted label above a strong value, hairline dividers between
   cells. 2-up on mobile, inline row on desktop. */
.gtm-pdp-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 4px 0 0;
    padding: 16px 0;
    list-style: none;
    border-top: 1px solid var(--pdp-line-soft, #E6E4E8);
    border-bottom: 1px solid var(--pdp-line-soft, #E6E4E8);
}
.gtm-pdp-highlight {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 18px 6px 0;
}
.gtm-pdp-highlight + .gtm-pdp-highlight {
    padding-left: 18px;
    border-left: 1px solid var(--pdp-line-soft, #E6E4E8);
}
.gtm-pdp-highlight__label {
    font-family: "Figtree", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pdp-ink-faint, #8f8a93);
    line-height: 1.2;
}
.gtm-pdp-highlight__value {
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--gt-black, #342E37);
    line-height: 1.3;
}

/* Actions relate to the price/highlights above — drop the old extra top margin
   so the gap ladder (wrapper gap) is the single source of rhythm. */
.gtm-pdp-container .gtm-pdp-actions {
    margin-top: 4px;
    gap: 12px;
}

/* Desktop: highlights become a single inline row (engine | power | weight | seat). */
@media (min-width: 992px) {
    .gtm-pdp-highlights {
        grid-template-columns: repeat(var(--gtm-hl-cols, 4), minmax(0, auto));
        justify-content: start;
        column-gap: 0;
    }
}

/* Mobile: keep the accent divider legible, ensure the third highlight in a
   2-col grid doesn't inherit a stray left border on the new row. */
@media (max-width: 991.98px) {
    .gtm-pdp-highlight:nth-child(odd) {
        padding-left: 0;
        border-left: none;
    }
    .gtm-pdp-highlight:nth-child(even) {
        padding-left: 18px;
        border-left: 1px solid var(--pdp-line-soft, #E6E4E8);
    }
    .gtm-pdp-highlight:nth-child(n + 3) {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--pdp-line-soft, #E6E4E8);
    }
}

/* PDP action buttons: clean grid so they align perfectly (was an uneven
   flex-wrap with baseline offsets). Primary CTA leads full-width; the two
   secondary actions share the row below. Two-button products stack; mobile stacks. */
.gtm-pdp-container .gtm-pdp-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
  margin-top: 4px;
}
.gtm-pdp-container .gtm-pdp-actions .gtm-btn { width: 100%; min-width: 0; margin: 0; }
.gtm-pdp-container .gtm-pdp-actions .gtm-btn.primary { grid-column: 1 / -1; }
.gtm-pdp-container .gtm-pdp-actions:has(> .gtm-btn:nth-child(2):last-child) { grid-template-columns: 1fr; }
@media (max-width: 767.98px) { .gtm-pdp-container .gtm-pdp-actions { grid-template-columns: 1fr; } }

/* PDP: match the description (shared .gtm-section-inner is 1376) + any inner to the 1320 page content width. */
body.single-product .gtm-section-inner { max-width: 1320px; }

/* Description card fills the content width to match the tech specs + page
   (the shared .gtm-section-inner centres its child, so the card was a narrow
   ~795px reading-width box that looked inconsistent). */
body.single-product .gtm-pdp-desc2 { width: 100%; max-width: none; align-self: stretch; }

/* Trim the PDP section-inner padding so the description card matches the
   tech-specs width exactly (align the description inner to the specs width). */
body.single-product .gtm-section-inner { padding-left: 12px; padding-right: 12px; }

/* --- Parts PDP actions: Add-to-cart + Enquire inline (side by side), sat lower.
   The base rule collapses to 1 column when child 2 is a .gtm-btn (the parts
   form + enquire case); put them back on one row on desktop + add space above. --- */
.gtm-pdp-container .gtm-pdp-actions:has(.gtm-parts-cart-form) { margin-top: 28px; }
@media (min-width: 768px) {
  .gtm-pdp-container .gtm-pdp-actions:has(.gtm-parts-cart-form) { grid-template-columns: 1fr 1fr !important; }
}
.gtm-pdp-container .gtm-pdp-actions .gtm-parts-cart-form { margin: 0; }
.gtm-pdp-container .gtm-pdp-actions .gtm-parts-cart-form .single_add_to_cart_button { width: 100%; }