/*
 * style_v2_product.css — single product page
 * ------------------------------------------
 * Loaded only when is_product(), after style_v2.css (see olalla_enqueue_additional_scripts()
 * in functions.php). JS: js/scripts_v2_product.js. Breakpoints: see style_v2.css.
 * Global parts used on this page stay in style_v2.css: .price del, .star-rating,
 * payment icons (.olalla-v2-cart-payments), review card (.olalla-v2-review).
 *
 * Table of Contents
 * -----------------
 *
 * 1. Page layout + summary (content area, business-orders link, title, add to cart, delivery date)
 * 2. Tabs + tab content
 * 3. Gallery (thumb rail, drag, MP4 video slides, mobile layout)
 * 4. Gallery extras (banner, payment icons)
 * 5. Related products
 * 6. Rating, share button, price
 * 7. Reviews
 * 8. Product Add-ons (wc-pao-* fields, totals)
 */


/* ************************ */
/* 1. PAGE LAYOUT + SUMMARY */
/* ************************ */

/* Focus ring (style_v2.css Base) drawn inside the element where a box that clips cuts an outer
   ring: Storefront's .single-product div.product {overflow: hidden} (gallery arrows, add-to-cart
   form, "Ordine aziendale", chips), the tabs box (overflow: hidden: tabs, story, "Maggiori
   informazioni") and the related carousel (scroll box on mobile). The add-to-cart form and the
   tabs (review form) hold form controls: they get no ring (Base), so the same list is left out. */
.single-product div.product .olalla-v2-pg-thumbs button:focus-visible,
.single-product div.product form.cart :focus-visible:not(:where(input:not([type=button], [type=submit], [type=reset], [type=image]), textarea, select, .select2-selection)),
.single-product div.product .olalla-v2-ordini-aziendali:focus-visible,
.single-product .woocommerce-tabs :focus-visible:not(:where(input:not([type=button], [type=submit], [type=reset], [type=image]), textarea, select, .select2-selection)),
.single-product .olalla-v2-chip:focus-visible,
.single-product .related ul.products :focus-visible {
    outline-offset: -2px;
}

/* Full-width content area (Storefront floats it next to the sidebar) */
.single-product.right-sidebar .content-area {
    float: none;
    margin-right: 0;
    width: 99.9%;
}

/* Header banner above the content (olalla_large_header_banner() in inc/header.php, admin option) */
.single-product .large-header-banner {
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .single-product .summary {
        position: relative;
    }
}

/* "Ordine aziendale" link in the summary — moved here from inline <style> in inc/single-product.php */
a.ordini-aziendali {
    float: right;
    color: var(--olalla--placeholder);
}
@media (max-width: 768px) {
    a.ordini-aziendali {
        max-width: 150px;
    }
}

#tab-business_orders_tab {
    scroll-margin-top: var(--olalla--header-offset); /* for anchor links, to avoid being hidden behind fixed header */
}

/* Title */
.single-product .summary .product_title {
    font-weight: 500;
    font-size: 1.6rem;
    color: var(--olalla--muted-teal);
}
@media (max-width: 768px) {
    .single-product .summary .product_title {
        font-size: 1.125rem;
        line-height: 1.2em;
        margin-top: 1rem;
    }

    /* Collapsible title wrapper — 2-line clamp with gradient + arrow */
    .olalla-v2-title-wrapper {
        position: relative;
        overflow: hidden;
        max-height: 2.7rem; /* 2 lines × (1.125rem × 1.2 line-height) */
        margin-top: 1rem;
        cursor: pointer;
    }
    .single-product .summary .olalla-v2-title-wrapper .product_title {
        margin-top: 0;
    }
    .olalla-v2-title-wrapper.olalla-v2-title-expanded {
        max-height: none;
        overflow: visible;
    }
    .olalla-v2-title-overlay {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 76px;
        height: 1.35rem;
        background: linear-gradient(to right, transparent, var(--olalla--white) 60%);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        pointer-events: none;
    }
    .olalla-v2-title-overlay::after {
        content: '›';
        color: var(--olalla--muted-teal);
        font-size: 1.4rem;
        line-height: 1;
        padding-right: 2px;
    }
    .olalla-v2-title-wrapper.olalla-v2-title-expanded .olalla-v2-title-overlay {
        display: none;
    }
}
/* Product info */
.olalla-v2-ordini-aziendali {
    color: var(--olalla--text-color);
    text-decoration: underline;
    width: 100%;
}

/* display !important: Customily changes the form display (Stefano's fix for the Customily button
   width on mobile; Customily is off locally, not testable) */
.single-product div.product form.cart {
    display: flex !important;
    margin-bottom: 1rem;
    padding-bottom: 0;
    flex-wrap: wrap;
    row-gap: 0.5rem;
}
.single-product div.product form.cart::before,
.single-product div.product form.cart::after {
    display: none;
}
.single-product div.product p.price {
    margin: 0.75rem 0;
}

.single-product div.product form.cart .quantity {
    float: none;
}
.single-product div.product form.cart .single_add_to_cart_button {
    flex-grow: 1;
    font-size: 1rem;
    text-transform: uppercase;
}

/* Stock text ("Disponibile") hidden */
.single-product .summary .stock.in-stock {
    display: none;
}

/* Summary textareas: same look as the Base field rules in style_v2.css, also for a textarea
   without .input-text (Customily, not testable locally) */
.single-product .summary textarea {
    padding: .618em;
    background-color: var(--olalla--white);
    border: 1px solid var(--olalla--field-border);
    box-shadow: none;
}
.single-product .summary textarea:focus {
    background-color: var(--olalla--field-focus-bg);
}

@media (max-width: 768px) {
    /* .customize-button: not printed by theme/plugin code; kept for Customily (not testable locally) */
    .single-product .customize-button {
        min-width: 100%;
    }
    .single-product .product .summary .woocommerce-product-details__short-description {
        font-size: 0.8em;
        margin-bottom: -20px;
    }
}
/* !important: Customily styles its button (not testable locally) */
.customily-personalize-button {
    flex-grow: 1 !important;
    width: auto !important;
}


.single-product .product-delivery-days {
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
    gap: 0.5rem;
}
.single-product .product-delivery-days img {
    width: 40px;
}

.single-product .product-delivery-days p {
    font-size: 0.9em;
    margin: 0;
    color: var(--olalla--muted-teal-dark);
    line-height: 1.3;
}

.single-product .product-delivery-days p span {
    font-weight: 500;
    font-size: 1.2rem;
    display: block;
}
.single-product .product-delivery-days p span strong {
    font-weight: 800;
}
.single-product .product-delivery-days p small {
    display: block;
    font-size: 1rem;
    opacity: 0.85;
}
@media (max-width: 768px) {
    .single-product .product-delivery-days {
        margin-bottom: 1rem;
    }
    .single-product .product-delivery-days p small,
    .single-product .product-delivery-days p span {
        font-size: 1em;
    }
    .single-product .product-delivery-days img {
        width: 35px;
        margin-bottom: 25px; /* icon sits higher than the text (kept on purpose) */
    }
}



/* ********************* */
/* 2. TABS + TAB CONTENT */
/* ********************* */

/* New layout for the WooCommerce tabs area.
   Desktop: sticky vertical tab nav on the left, active panel content on the right.
   Mobile: stacked accordion (panels open under their tab). */

/* Two-column layout for the WC tabs area */
.single-product .woocommerce-tabs {
    display: grid;
    grid-template-columns: 24rem 1fr;
    gap: 3rem;
    align-items: start;
    margin-top: 0;
    padding-top: 0;
}
/* Storefront parent floats the tab nav / panels and adds a clearfix pseudo
    — neutralise both so grid placement works. */
.single-product .woocommerce-tabs::before,
.single-product .woocommerce-tabs::after {
    display: none;
}
.single-product .woocommerce-tabs ul.tabs,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
    float: none;
    width: auto;
}
.single-product .woocommerce-tabs ul.tabs {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
    background: none;
    border: 0;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after {
    display: none;
}
.single-product .woocommerce-tabs ul.tabs li {
    background: var(--olalla--white);
    border: 1px solid var(--olalla--border-color);
    border-radius: var(--olalla--radius-pill);
    margin: 0;
    padding: 0;
    box-shadow: none;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after {
    display: none;
}
.single-product .woocommerce-tabs ul.tabs li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    color: var(--olalla--text-color);
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1rem;
    border-radius: var(--olalla--radius-pill);
}
.single-product .woocommerce-tabs ul.tabs li a:hover {
    background: var(--olalla--light-gray);
}
.single-product .woocommerce-tabs ul.tabs li a::after {
    content: '>';
    color: var(--olalla--medium-gray);
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 200;
}
.single-product .woocommerce-tabs ul.tabs li.active {
    background: var(--olalla--light-gray);
    border-color: var(--olalla--text-color);
}
.single-product .woocommerce-tabs ul.tabs li.active a {
    color: var(--olalla--text-color);
}
.single-product .woocommerce-tabs ul.tabs li.active a::after {
    color: var(--olalla--text-color);
}

/* Mobile: accordion-like stack — each panel sits below its tab */
@media (max-width: 768px) {
    .single-product div.product {
        overflow: visible;
    }

    .single-product .woocommerce-tabs {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .single-product .woocommerce-tabs .woocommerce-Tabs-panel {
        grid-column: 1;
        grid-row: auto;
    }

    .single-product .woocommerce-tabs ul.tabs li a {
        font-size: 0.9rem;
        padding: 0.65rem 1rem;
    }
    .single-product .woocommerce-tabs ul.tabs li.active a::after {
        transform: rotate(90deg);
    }
}

/* "Informazioni sul Prodotto" tab content */
.olalla-v2-tab-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Dettagli Prodotto card (rendered from ACF dettagli_prodotto wysiwyg) */
.olalla-v2-dettagli-prodotto {
    background: var(--olalla--light-gray);
    border: 1px solid var(--olalla--border-light);
    border-radius: var(--olalla--radius-lg);
    padding: 1.25rem 1.5rem;
}
.olalla-v2-dettagli-prodotto__title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--olalla--text-color);
}
.olalla-v2-dettagli-prodotto__body p {
    margin: 0 0 0.5rem;
    line-height: 1.5;
}
.olalla-v2-dettagli-prodotto__body p:last-child {
    margin-bottom: 0;
}
@media (max-width: 768px) {
    .olalla-v2-dettagli-prodotto {
        padding: 1rem;
    }
    .olalla-v2-dettagli-prodotto__title {
        font-size: 1rem;
    }
}

/* Story (descrizione / post_content) — truncated until "Maggiori informazioni" is clicked */
.olalla-v2-story {
    position: relative;
    max-height: 22rem;
    overflow: hidden;
}
.olalla-v2-story::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 6rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--olalla--white) 80%);
    pointer-events: none;
}
.olalla-v2-story.is-expanded {
    max-height: none;
}
.olalla-v2-story.is-expanded::after {
    display: none;
}
.olalla-v2-story img {
    max-width: 100%;
    height: auto;
}

/* Expand/collapse CTA */
.olalla-v2-expand-story {
    align-self: center;
    padding: 0.5rem 2rem;
    border: 0;
    border-radius: var(--olalla--radius-pill);
    background: var(--olalla--trust-bg);
    color: var(--olalla--white);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity 0.2s;
}
.olalla-v2-expand-story:hover {
    opacity: 0.85;
}

/* Gift-ideas block (global texts + per-product chips) */
.olalla-v2-gift-ideas {
    margin-bottom: 2.5rem;
}
.olalla-v2-gift-ideas__title {
    font-size: 1.4rem;
    color: var(--olalla--text-color);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}
.olalla-v2-gift-ideas__intro {
    margin: 0 0 1rem;
    color: var(--olalla--text-color);
}
.olalla-v2-gift-ideas__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.olalla-v2-chip {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--olalla--dark-green);
    border-radius: var(--olalla--radius-md);
    color: var(--olalla--dark-green);
    background: transparent;
    font-size: 1rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s, color 0.2s;
}
.olalla-v2-chip:hover {
    background: var(--olalla--dark-green);
    color: var(--olalla--white);
    text-decoration: none;
}
.olalla-v2-gift-ideas__trustpilot {
    color: var(--olalla--dark-gray);
    line-height: 1.5;
}
.olalla-v2-gift-ideas__trustpilot p:last-child {
    margin-bottom: 0;
}
@media (max-width: 768px) {
    .olalla-v2-chip {
        padding: 0.3rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* ********** */
/* 3. GALLERY */
/* ********** */

/* Product gallery — vertical thumb slider (desktop) + horizontal thumb slider (mobile).
   Replaces Storefront's grid-of-thumbs below the main image and the legacy
   dot pagination from style_006.css. Thumb rail and arrow buttons are
   wrapped together in .olalla-v2-pg-thumbs (injected by initProductGalleryThumbs() in scripts_v2_product.js). */

/* Desktop: gallery column is 50%, summary column is 50%, gallery uses
   a 2-column grid (thumb rail on the left, main image on the right).
   !important: Storefront's .storefront-full-width-content.single-product div.product
   .woocommerce-product-gallery / .summary rules are more specific. */
@media (min-width: 769px) {
    .single-product div.product .woocommerce-product-gallery {
        width: 48% !important;
        margin-right: 4% !important;
        display: grid;
        grid-template-columns: 80px 1fr;
        column-gap: 16px;
        align-items: start;
    }
    .single-product div.product .summary.entry-summary {
        width: 48% !important;
    }
    .single-product .woocommerce-product-gallery > .flex-viewport {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }
    /* WooCommerce skips FlexSlider when the gallery contains only one image, so
       its wrapper remains a direct child and there is no thumbnail rail to fill
       column 1. Span both columns in that case instead of leaving a 96px gap. */
    .single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
        grid-column: 1 / -1;
        grid-row: 1;
        min-width: 0;
        margin-bottom: 1.618em;
    }
    .single-product .woocommerce-product-gallery > .olalla-v2-pg-thumbs {
        grid-column: 1;
        grid-row: 1;
    }
}

/* Thumb-rail wrapper — column on desktop, row on mobile (set via grid template) */
.olalla-v2-pg-thumbs {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: center;
    justify-items: stretch;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}
.olalla-v2-pg-thumbs.is-initialized {
    opacity: 1;
}
/* Suppress the FOUC: before JS wraps it, the FlexSlider thumb strip is a direct
   child of the gallery and paints in WooCommerce's default scattered layout.
   Once decorate() moves it into .olalla-v2-pg-thumbs it's no longer a direct
   child, so this only hides the transient pre-wrap state. */
.single-product .woocommerce-product-gallery > .flex-control-nav {
    opacity: 0;
}
.olalla-v2-pg-thumb-prev,
.olalla-v2-pg-thumb-next {
    background: none;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: var(--olalla--dark-green);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: opacity 0.2s;
}
.olalla-v2-pg-thumbs button:hover {
    color: var(--olalla--text-color);
}
.olalla-v2-pg-thumbs button:hover,
.olalla-v2-pg-thumbs button:focus {
    border: 0;
    background: none;
}
.olalla-v2-pg-thumb-prev svg,
.olalla-v2-pg-thumb-next svg {
    width: 24px;
    height: 24px;
    display: block;
}
.olalla-v2-pg-thumb-prev svg {
    transform: rotate(180deg);
}
@media (max-width: 768px) {
    .olalla-v2-pg-thumb-next svg {
        transform: rotate(270deg);
    }
    .olalla-v2-pg-thumb-prev svg {
        transform: rotate(90deg);
    }
}

/* The flexslider thumb list, now the scroll container of the rail */
.olalla-v2-pg-thumbs > .flex-control-nav {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 338px; /* fits ~4 80×80 thumbs + gaps */
    overflow: hidden;
    scroll-behavior: smooth;
    text-align: left;
    background: none;
}
/* !important: Storefront's clearfix (.single-product div.product .woocommerce-product-gallery
   .flex-control-thumbs::before/::after) is more specific */
.olalla-v2-pg-thumbs > .flex-control-nav::before,
.olalla-v2-pg-thumbs > .flex-control-nav::after {
    display: none !important;
    content: none !important;
}
/* width, float and margin stay !important: Storefront's thumb rules are more specific
   (.flex-control-thumbs li: margin-bottom; --columns-5 li: width 8.57%, float left, margin-right) */
.olalla-v2-pg-thumbs > .flex-control-nav li {
    width: 100% !important;
    height: auto;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    float: none !important;
    display: block;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    list-style: none;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}
.olalla-v2-pg-thumbs > .flex-control-nav li img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    display: block;
    border: 2px solid transparent;
    border-radius: var(--olalla--radius-sm);
    /* opacity (0.5, 1 when active or hovered) and transition: Storefront's
       .flex-control-thumbs li img rules (more specific) */
}
.olalla-v2-pg-thumbs > .flex-control-nav li:hover img,
.olalla-v2-pg-thumbs > .flex-control-nav li img.flex-active {
    border-color: var(--olalla--text-color);
}

.single-product .woocommerce-product-gallery .flex-viewport img,
.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper img {
    width: 100%;
}

/* Main-image drag/swipe-to-navigate cursor feedback (toggled by initProductGalleryThumbs() in scripts_v2_product.js) */
.single-product .woocommerce-product-gallery .flex-viewport {
    cursor: grab;
}
/* !important: wins against the cursor and text selection of every child (links, thumbs) during a drag */
.olalla-v2-pg-dragging,
.olalla-v2-pg-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
}

/* MP4 video slides (rendered by inc/product-video.php). The slide takes the product's
   image aspect ratio (set inline) so it's the same height as the image slides; the poster
   <img> (kept for PhotoSwipe index alignment) and the <video> both fill it and are centred
   (letterboxed). The play button sits on top until playback starts (is-playing toggled by
   initProductGalleryVideos() in scripts_v2_product.js). */
.olalla-v2-pg-video {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* fallback; the real product-image ratio is set inline */
    background: #000;
    overflow: hidden;
}
.olalla-v2-pg-video__poster,
.olalla-v2-pg-video__el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* Hide the browser's native centre play button — our own button (below) replaces it. */
.olalla-v2-pg-video__el::-webkit-media-controls-overlay-play-button {
    display: none;
}
.olalla-v2-pg-video__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 72px;
    height: 72px;
    border: 0;
    border-radius: 50%;
    background: var(--olalla--dark-green-70);
    color: var(--olalla--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: opacity 0.2s, transform 0.2s, background 0.2s;
}
.olalla-v2-pg-video__play:hover {
    background: var(--olalla--text-color);
    transform: scale(1.06);
}
.olalla-v2-pg-video__play svg {
    width: 34px;
    height: 34px;
    margin-left: 4px; /* optically centre the triangle */
}
.olalla-v2-pg-video.is-playing .olalla-v2-pg-video__play {
    opacity: 0;
    pointer-events: none;
}
/* Once playback has started (has-played added by initProductGalleryVideos()), drop the poster
   overlay permanently so the video shows through and the poster never returns on pause. */
.olalla-v2-pg-video.has-played .olalla-v2-pg-video__poster {
    display: none;
}
/* Mark the rail thumb belonging to a video slide (class added by tagVideoRailThumbs() in scripts_v2_product.js, since
   FlexSlider clones rail thumbs from data-thumb and carries no marker of its own). */
.olalla-v2-pg-thumbs > .flex-control-nav li.olalla-v2-pg-thumb-video::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 11px;
    border-color: transparent transparent transparent var(--olalla--white);
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.65));
    pointer-events: none;
}

/* Mobile: switch the wrapper to a row layout, scroll the thumb rail horizontally */
@media (max-width: 768px) {
    /* Flex column (was block) so the under-gallery extras can be ordered below the
       thumb rail — DOM order is image, extras, thumbs (extras comes from the template). */
    .single-product div.product .woocommerce-product-gallery {
        display: flex;
        flex-direction: column;
        margin-left: -20px;
        margin-right: -20px;
        margin-bottom: 4px;
    }
    .single-product div.product .woocommerce-product-gallery .flex-viewport {
        margin-bottom: 0;
    }
    .single-product .woocommerce-product-gallery > .flex-viewport,
    .single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
        order: 0;
    }
    .single-product .woocommerce-product-gallery > .olalla-v2-pg-thumbs {
        order: 2;
    }
    .single-product .woocommerce-product-gallery > .olalla-v2-product-extras {
        order: 1;
    }
    .olalla-v2-pg-thumbs {
        grid-template-rows: none;
        grid-template-columns: auto 1fr auto;
        margin-top: 12px;
        gap: 4px;
        height: 64px;
        overflow: hidden;
    }
    .olalla-v2-pg-thumbs > .flex-control-nav {
        flex-direction: row;
        max-height: none;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 6px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .olalla-v2-pg-thumbs > .flex-control-nav::-webkit-scrollbar {
        display: none;
    }
    .olalla-v2-pg-thumbs > .flex-control-nav li {
        flex: 0 0 64px;
        width: 64px !important; /* beats the base width: 100% !important above */
        height: 64px;
    }
}

/* ***************** */
/* 4. GALLERY EXTRAS */
/* ***************** */

/* Desktop: the gallery is a 2-col grid (thumb rail + main image). Drop the extras
   onto a full-width row beneath both columns. */
@media (min-width: 769px) {
    .single-product .woocommerce-product-gallery > .olalla-v2-product-extras {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

.olalla-v2-product-extras__banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background-color: var(--olalla--trust-bg);
    color: var(--olalla--text-color);
    padding: 0.9rem 1.25rem;
    text-align: center;
}
.olalla-v2-product-extras__banner-icon {
    flex-shrink: 0;
    display: inline-flex;
    line-height: 0;
    color: var(--olalla--text-color);
}
.olalla-v2-product-extras__banner-icon svg,
.olalla-v2-product-extras__banner-icon img {
    display: block;
    width: 24px;
    height: 24px;
}
.olalla-v2-product-extras__banner-text {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.olalla-v2-product-extras__payments {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    margin-top: 16px;
}
@media (max-width: 768px) {
    .olalla-v2-product-extras__banner {
        padding: 0.5rem 0.75rem;
    }
    .olalla-v2-product-extras__payments.desktop {
        display: none;
    }
}
@media (min-width: 769px) {
    .olalla-v2-product-extras__payments.mobile {
        display: none;
    }
}
.olalla-v2-product-extras__payments-label {
    color: var(--olalla--dark-green);
    font-weight: 600;
}
.olalla-v2-product-extras__payments .olalla-v2-cart-payments {
    justify-content: center;
    gap: 0.4rem;
}
.olalla-v2-product-extras__payments .olalla-v2-cart-payments__icon svg {
    max-width: 42px;
    max-height: 42px;
    width: auto;
    height: auto;
}
@media (max-width: 768px) {
    .olalla-v2-product-extras__payments .olalla-v2-cart-payments {
        gap: 0.25rem;
    }
    .olalla-v2-product-extras__payments .olalla-v2-cart-payments__icon svg {
        max-width: 40px;
        max-height: 40px;
    }
}

/* ******************* */
/* 5. RELATED PRODUCTS */
/* ******************* */

/* Related products section */
.single-product .related > h2 {
    font-size: 1.4rem;
    text-transform: uppercase;
    font-weight: 400;
    text-align: center;
}
.single-product .related ul.products.olalla-related {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.single-product .related ul.products.olalla-related .woocommerce-loop-product__title {
    display: none;
}

.single-product .related ul.products.olalla-related::after,
.single-product .related ul.products.olalla-related::before {
    display: none;
}

.single-product .related ul.products.olalla-related li.product {
    width: 100%;
    max-width: none;
    float: none;
    margin: 0;
}
.single-product .related ul.products.olalla-related img {
    margin-bottom: .5rem;
}

/* Sale badge hidden (archives show it); star rating hidden on desktop only (mobile shows it) */
.single-product .related.products .onsale {
    display: none;
}
@media (min-width: 769px) {
    .single-product .related .star-rating {
        display: none;
    }
}

/* Registered so the mask fade widths can transition (plain custom props aren't
   animatable). Degrades to an instant toggle where @property is unsupported. */
@property --olalla-fade-left {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}
@property --olalla-fade-right {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@media (max-width: 768px) {
    /* On mobile the related grid turns into a free-scrolling horizontal carousel
       (no snap — it made drag-release jump). A soft fade at the edges (mask-image;
       -webkit- prefix needed for iOS Safari) hints there's more to scroll. The
       fade width per side is a registered custom prop so it can transition; JS
       drops it to 0 on a fully-reached edge — .is-at-start / .is-at-end (set in
       initRelatedCarousel() in scripts_v2_product.js) keep the first/last item ungradiented. */
    .single-product .related ul.products.olalla-related {
        --olalla-fade-left: 24px;
        --olalla-fade-right: 24px;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 12px;
        scroll-behavior: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        cursor: grab;
        transition: --olalla-fade-left 0.25s ease, --olalla-fade-right 0.25s ease;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--olalla-fade-left), #000 calc(100% - var(--olalla-fade-right)), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 var(--olalla-fade-left), #000 calc(100% - var(--olalla-fade-right)), transparent 100%);
    }
    .single-product .related ul.products.olalla-related.is-at-start {
        --olalla-fade-left: 0px;
    }
    .single-product .related ul.products.olalla-related.is-at-end {
        --olalla-fade-right: 0px;
    }
    /* While mouse-dragging: hard cursor, no text selection. */
    .single-product .related ul.products.olalla-related.olalla-v2-dragging {
        cursor: grabbing;
        user-select: none;
    }
    .single-product .related ul.products.olalla-related::-webkit-scrollbar {
        display: none;
    }
    .single-product .related ul.products.olalla-related li.product {
        flex: 0 0 42%;
    }
}

/* ****************************** */
/* 6. RATING, SHARE BUTTON, PRICE */
/* ****************************** */

/* ==========================================================================
   Single product rating — numeric average + orange stars + teal review link
   Markup: woocommerce/single-product/rating.php
   ========================================================================== */
.single-product div.product .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0; /* Storefront: -0.875em top, 1.618em bottom */
}
@media (max-width: 768px) {
    .single-product .product .summary .woocommerce-product-rating {
        margin-bottom: 18px;
    }
}
.single-product div.product .woocommerce-product-rating .olalla-v2-rating-average {
    font-weight: 700;
    font-size: 1.05em;
    line-height: 1;
    color: var(--olalla--review-strong);
}
.single-product div.product .woocommerce-product-rating .star-rating {
    margin: 0;
    float: none;
}
.single-product div.product .woocommerce-product-rating::before,
.single-product div.product .woocommerce-product-rating::after {
    display: none;
}
.single-product div.product .woocommerce-product-rating .woocommerce-review-link {
    color: var(--olalla--review-link);
    text-decoration: underline;
    white-space: nowrap;
}

/* ==========================================================================
   Product share button — top-right of .woocommerce-product-gallery
   ========================================================================== */
.woocommerce-product-gallery {
    position: relative;
}

.olalla-v2-share-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    cursor: pointer;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    line-height: 0;
}
.olalla-v2-share-btn:hover {
    background: transparent;
}

.olalla-v2-share-btn > img {
    width: 32px;
    height: 32px;
    display: block;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.18));
}

.olalla-v2-share-btn__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: -7px;
    list-style: none;
    margin: 0;
    padding: 8px;
    background: var(--olalla--white);
    border-radius: var(--olalla--radius-lg);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 48px;
    align-items: center;
    opacity: 0;
    /* Closed: visibility: hidden after the fade-out, so the 5 links leave the Tab order
       (opacity alone keeps them focusable). */
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

.olalla-v2-share-btn[aria-expanded="true"] .olalla-v2-share-btn__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

.olalla-v2-share-btn__dropdown li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.olalla-v2-share-btn__dropdown a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: transform 0.1s ease, opacity 0.1s ease;
}

.olalla-v2-share-btn__dropdown a:hover {
    opacity: 0.85;
    transform: scale(1.1);
}

.olalla-v2-share-btn__dropdown a img {
    width: 20px;
    height: 20px;
    display: block;
}

.olalla-v2-share-facebook  { background: #1877f2; }
.olalla-v2-share-x         { background: #000000; }
.olalla-v2-share-pinterest { background: #e60023; }
.olalla-v2-share-telegram  { background: #0088cc; }
.olalla-v2-share-whatsapp  { background: #25d366; }

/* Single product: main price */
.single-product .summary .price .amount {
    font-weight: 700;
    font-size: 1.6em;
    color: var(--olalla--muted-teal);
}

/* Single product: main price — decimals smaller and top-aligned (markup added by
   olalla_wrap_price_decimals() in inc/single-product.php). Scoped to the summary so
   related-product prices are unaffected. */
.single-product div.summary .price .olalla-v2-price-decimal {
    font-size: 0.5em;
    font-weight: inherit;
    position: relative;
    top: -0.7em;
    margin-left: 0.04em;
}

/* Single product: "In offerta!" badge shown beside the price on sale items
   (markup added by olalla_single_price_with_decimals() in inc/single-product.php). */
.single-product div.summary .price .olalla-v2-sale-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.6rem;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--olalla--dark-green);
    border-radius: var(--olalla--radius-sm);
    color: var(--olalla--dark-green);
    background: var(--olalla--white);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
    transform: translateY(-6px);
}


/* ********** */
/* 7. REVIEWS */
/* ********** */

/* ==========================================================================
   Single product reviews — restyle of the default WooCommerce reviews.
   Markup: woocommerce/single-product-reviews.php (override) + inc/reviews.php.
   Replaces the old floated two-column layout (style_006.css) with a single
   column, a rating-summary header, an expandable form, and initials avatars.
   ========================================================================== */

@media (min-width: 769px) {
    .single-product #reviews {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

.single-product #reviews .woocommerce-Reviews-title {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--olalla--dark-gray);
    margin-bottom: 1.25rem;
}

/* --- Rating summary + "Aggiungi una recensione" trigger --- */
.olalla-v2-reviews-head {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.olalla-v2-reviews-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--olalla--text-color);
}

.olalla-v2-reviews-summary__star {
    width: 1.75rem;
    height: 1.75rem;
    background: url(../img/star.svg) center / contain no-repeat;
}

.olalla-v2-reviews-summary__avg {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
}

.olalla-v2-reviews-summary__label {
    font-size: 1.2rem;
    color: var(--olalla--dark-gray);
}

.olalla-v2-add-review.button {
    margin: 0;
    border: 0;
    border-radius: var(--olalla--radius-md);
    padding: 0.9rem 1.75rem;
    background-color: var(--olalla--dark-green);
    color: var(--olalla--white);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.15s ease;
    width: 100%;
}

.olalla-v2-add-review.button:hover,
.olalla-v2-add-review.button:focus {
    background-color: var(--olalla--text-color);
    color: var(--olalla--white);
}

/* --- Collapsible review form --- */
.single-product #reviews .olalla-v2-review-form {
    margin: 0 0 2rem;
    padding: 1.5rem;
    background: var(--olalla--light-gray);
    border-radius: var(--olalla--radius-lg);
}

.single-product #reviews .olalla-v2-review-form #respond {
    padding: 0;
    background: transparent;
}

.single-product #reviews .olalla-v2-review-form[hidden] {
    display: none;
}

.single-product #reviews .olalla-v2-review-form #reply-title {
    display: block;
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.single-product #reviews .olalla-v2-review-form input[type="text"],
.single-product #reviews .olalla-v2-review-form input[type="email"],
.single-product #reviews .olalla-v2-review-form select,
.single-product #reviews .olalla-v2-review-form textarea {
    width: 100%;
    max-width: 100%;
}

/* --- Review list --- */
.single-product #reviews .commentlist {
    padding: 0;
    list-style: none;
}

/* margin !important: Storefront's reply rule (#reviews .commentlist li ul.children li) is more specific */
.single-product #reviews .commentlist li {
    margin: 0 !important;
    padding: 1.5rem 0 0 0;
    border-bottom: 1px solid var(--olalla--border-light);
}


/* Avatar left, content right. Flexbox + float resets override Storefront's
   parent rules (#reviews .commentlist li ... .comment-text { width; float:right }),
   which carry an extra `li` and otherwise out-specify these selectors. */
.single-product #reviews .commentlist li .comment_container {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

.single-product #reviews .commentlist li .comment_container::before,
.single-product #reviews .commentlist li .comment_container::after {
    content: none;
}

/* Initials avatar (rendered by inc/reviews.php, replaces the Gravatar). */
.olalla-v2-review-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    color: var(--olalla--text-color);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}

.single-product #reviews .commentlist li .comment_container .comment-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
}

/* DOM order is stars -> meta -> text; flex order shows name+date, then stars, then text. */
.single-product #reviews .commentlist li time,
.single-product #reviews .commentlist li .comment_container .comment-text .meta {
    order: 1;
    margin: 0.2rem 0 0 0;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--olalla--dark-gray);
}

.single-product #reviews .commentlist li .comment_container .comment-text .meta .woocommerce-review__author {
    display: block;
    color: var(--olalla--text-color);
    font-weight: 700;
    font-size: 1.1rem;
}

.single-product #reviews .commentlist li .comment_container .comment-text .meta .woocommerce-review__dash {
    display: none;
}

.single-product #reviews .commentlist li .comment_container .comment-text .star-rating {
    order: 2;
    float: none;
    margin: 0 0 0.6rem;
    height: 1.3em;
}

.single-product #reviews .commentlist li .comment_container .comment-text .description {
    order: 3;
    color: var(--olalla--text-color);
    line-height: 1.6;
}


/* ****************** */
/* 8. PRODUCT ADD-ONS */
/* ****************** */

/* WooCommerce Product Add-ons fields in the summary form (wc-pao-* markup; the totals box
   #product-addons-total / .product-addon-totals is rendered by the Add-ons JS). */
.single-product .wc-pao-addons-container {
    margin-bottom: 20px;
}

.single-product .wc-pao-addon-field.wc-pao-addon-select {
    width: 100%;
}

.wc-pao-addon .wc-pao-addon-description {
    font-style: normal;
}

.single-product .wc-pao-addon-image-swatch-price {
    color: var(--olalla--text-strong);
    font-weight: bold;
    font-style: italic;
}

.single-product .wc-pao-addon .form-row {
    margin-bottom: 10px;
}

/* Totals: only the subtotal line */
.single-product .product-addon-totals {
    margin-top: 0;
    margin-bottom: 10px;
    border: 0;
}

.single-product .product-addon-totals ul li {
    display: none;
}

.single-product .product-addon-totals ul li.wc-pao-subtotal-line {
    display: block;
}

.single-product #product-addons-total .amount {
    font-weight: 700;
    font-size: 1.1em;
    color: var(--olalla--muted-teal);
}

/* Image swatches: the first swatch ("none") is hidden unless the add-on is required */
.single-product .wc-pao-addon .wc-pao-addon-image-swatch:first-child {
    display: none;
}

.single-product .wc-pao-addon.wc-pao-required-addon .wc-pao-addon-image-swatch:first-child {
    display: inline-block;
}

/* Swatch tooltip (tipTip) hidden. !important: tipTip writes an inline display. */
.single-product #tiptip_holder {
    display: none !important;
}

.single-product .wc-pao-addon-description p,
.single-product .wc-pao-addon-container label {
    font-size: 1em;
    font-weight: normal;
}

.single-product .wc-pao-addon-wrap a.wc-pao-addon-image-swatch {
    outline: none;
    border: 1px solid #f2f2f2;
}

/* The selected swatch keeps its outline after the click (the swatch keeps focus): this rule is more
   specific than :focus:not(:focus-visible) (Base, style_v2.css). Keyboard focus shows the focus ring. */
.single-product .wc-pao-addon-wrap a.wc-pao-addon-image-swatch.selected {
    outline: solid;
}

@media (max-width: 768px) {
    .single-product .wc-pao-addon input,
    .single-product .wc-pao-addon select {
        padding: 2px 10px;
    }

    .single-product .wc-pao-addon .form-row {
        margin-bottom: 8px;
    }

    .single-product .wc-pao-addon .wc-pao-addon-description {
        font-size: 0.9em;
    }
}