/* ==========================================================================
   Product PDP — professional mobile (max 768px)
   Full-bleed gallery, calm buy panel, single sticky ATC
   ========================================================================== */

body.product-page {
    --product-breadcrumb-bg: #ececec;
}

body.product-page .product-breadcrumb-shell,
body.product-page .product-breadcrumb,
body.product-page .product-breadcrumb-bar {
    background: #ececec;
    color: #111111;
}

body.product-page .product-breadcrumb a,
body.product-page .product-breadcrumb span,
body.product-page .product-breadcrumb li[aria-current="page"] {
    color: #111111;
}

body.product-page .product-breadcrumb a:hover {
    color: #111111;
}

body.product-page .product-breadcrumb li + li::before {
    color: rgba(17, 17, 17, 0.4);
}

@media (max-width: 768px) {
    body.product-page {
        --pdp-gutter: 16px;
        --pdp-sticky-h: 64px;
        background: #fff;
    }

    body.product-page .mobile-bottom-nav {
        display: none !important;
    }

    body.product-page {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.product-page.has-product-sticky-buy-bar {
        padding-bottom: calc(var(--pdp-sticky-h) + 12px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.product-page .top-bar.top-bar--product-reference {
        display: none !important;
    }

    body.product-page .product-breadcrumb-shell {
        display: none !important;
    }

    body.product-page .product-detail-shell.product-edge-shell,
    body.product-page .related-shell.product-edge-shell {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 48px !important;
    }

    body.product-page .product-detail-layout--classic {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
        align-items: stretch !important;
    }

    body.product-page .product-detail-layout--classic .product-detail-media.product-detail-media--reference,
    body.product-page .product-detail-shell .product-detail-media.product-detail-media--reference:has([data-product-gallery]) {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #f3f4f6 !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }

    body.product-page .product-detail-layout--classic .product-gallery.product-gallery--reference {
        display: grid !important;
        width: 100% !important;
        height: auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        gap: 0 !important;
        padding: 0 !important;
        column-gap: 0 !important;
    }

    body.product-page .product-detail-layout--classic .product-gallery.product-gallery--reference .product-gallery-thumbs-shell,
    body.product-page .product-detail-layout--classic .product-gallery.product-gallery--reference .product-gallery-thumbs,
    body.product-page .product-detail-layout--classic .product-gallery.product-gallery--reference .product-gallery-thumbs-shell.product-gallery-thumbs-shell--reference,
    body.product-page .product-gallery-thumbs-shell--reference,
    body.product-page .product-gallery-thumbs {
        display: none !important;
    }

    body.product-page .product-detail-layout--classic .product-gallery.product-gallery--reference .product-gallery-stage,
    body.product-page .product-gallery--reference .product-gallery-stage {
        position: relative !important;
        display: grid !important;
        place-items: center !important;
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #f3f4f6 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        touch-action: pan-y pinch-zoom;
    }

    body.product-page .product-detail-layout--classic .product-gallery.product-gallery--reference .product-gallery-stage > .product-detail-image,
    body.product-page .product-gallery--reference .product-gallery-stage > .product-detail-image,
    body.product-page .product-detail-layout--classic .product-gallery.product-gallery--reference .product-gallery-stage > .product-detail-video {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: none !important;
        transform-origin: center center !important;
    }

    body.product-page .product-gallery--reference .product-gallery-badge {
        display: inline-flex !important;
        align-items: center !important;
        top: 12px !important;
        left: 12px !important;
        z-index: 3 !important;
        padding: 0.4rem 0.8rem !important;
        font-size: 0.8rem !important;
        border-radius: 8px !important;
    }

    body.product-page .product-gallery--reference .product-gallery-zoom {
        top: 12px !important;
        right: 12px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid rgba(18, 18, 18, 0.08) !important;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
    }

    body.product-page .product-detail-layout--classic .product-gallery.product-gallery--reference .product-gallery-footer {
        left: 50% !important;
        right: auto !important;
        bottom: 12px !important;
        transform: translateX(-50%) !important;
        width: max-content !important;
        max-width: calc(100% - 24px) !important;
        grid-template-columns: 40px auto 40px !important;
        gap: 8px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid rgba(18, 18, 18, 0.08) !important;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    body.product-page .product-detail-layout--classic .product-gallery.product-gallery--reference .product-gallery-nav {
        flex-basis: 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.product-page .product-detail-layout--classic .product-gallery.product-gallery--reference .product-gallery-counter {
        position: static !important;
        min-height: 40px !important;
        padding: 0 0.35rem !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        color: #111 !important;
        background: transparent !important;
    }

    body.product-page .product-detail-layout--classic .product-detail-copy {
        padding: 18px var(--pdp-gutter) 28px !important;
        background: #fff !important;
    }

    body.product-page .product-buy-panel--reference {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    body.product-page .product-buy-panel--reference h1 {
        margin: 0 0 6px !important;
        font-size: clamp(1.35rem, 5.6vw, 1.65rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.025em !important;
        font-weight: 800 !important;
    }

    body.product-page .product-buy-panel--reference .product-detail-price-block,
    body.product-page .product-buy-panel--reference .product-detail-price-row {
        margin: 0 0 10px !important;
    }

    body.product-page .product-buy-panel--reference .detail-price,
    body.product-page .product-buy-panel--reference .product-detail-price-row .detail-price {
        margin: 0 !important;
        font-size: clamp(1.2rem, 4.8vw, 1.4rem) !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
        color: #111 !important;
    }

    body.product-page .product-buy-panel--reference .product-stock-pill {
        display: inline-flex !important;
        width: auto !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 0.4rem !important;
        margin: 0 0 14px !important;
        padding: 0.35rem 0.7rem !important;
        border-radius: 8px !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }

    body.product-page .product-buy-panel--reference .product-highlights.product-highlights--reference {
        order: 20;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.55rem !important;
        margin: 18px 0 0 !important;
        padding: 16px 0 0 !important;
        border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
        border-bottom: 0 !important;
    }

    body.product-page .product-buy-panel--reference .product-highlights.product-highlights--reference li {
        font-size: 0.88rem !important;
        line-height: 1.4 !important;
        gap: 0.55rem !important;
    }

    body.product-page .product-buy-panel--reference .product-highlights.product-highlights--reference li:nth-child(n + 4) {
        display: none !important;
    }

    body.product-page .product-buy-panel--reference .size-selector--reference {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    body.product-page .product-buy-panel--reference .size-selector-header h2 {
        margin: 0 !important;
        font-size: 0.78rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        color: #6b7280 !important;
    }

    body.product-page .product-buy-panel--reference .fit-mode-tabs.fit-mode-tabs--reference {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 !important;
        padding: 3px !important;
        border: 1px solid rgba(15, 23, 42, 0.1) !important;
        border-radius: 8px !important;
        background: #f3f4f6 !important;
        overflow: hidden;
    }

    body.product-page .product-buy-panel--reference .fit-mode-tab--reference {
        margin: 0 !important;
    }

    body.product-page .product-buy-panel--reference .fit-mode-tab--reference span {
        display: flex !important;
        grid-template-columns: none !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.15rem !important;
        min-height: 52px !important;
        padding: 0.55rem 0.4rem !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: center !important;
    }

    body.product-page .product-buy-panel--reference .fit-mode-tab--reference i {
        display: none !important;
    }

    body.product-page .product-buy-panel--reference .fit-mode-tab--reference strong {
        font-size: 0.86rem !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
    }

    body.product-page .product-buy-panel--reference .fit-mode-tab--reference small {
        font-size: 0.68rem !important;
        line-height: 1.2 !important;
        color: #6b7280 !important;
    }

    body.product-page .product-buy-panel--reference .fit-mode-tab--reference:has(input:checked) span {
        background: #fff !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12) !important;
    }

    body.product-page .product-buy-panel--reference .product-option-block--color {
        margin: 0 0 4px !important;
    }

    body.product-page .product-buy-panel--reference .product-option-label-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.75rem !important;
        margin: 0 !important;
    }

    body.product-page .product-buy-panel--reference .product-option-label {
        font-size: 0.9rem !important;
    }

    body.product-page .product-buy-panel--reference .zilenzo-size-guide-link {
        padding: 0 !important;
        font-size: 0.86rem !important;
        font-weight: 700 !important;
        text-decoration: underline !important;
        text-underline-offset: 2px;
    }

    body.product-page .product-buy-panel--reference .size-grid.size-grid-six {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body.product-page .product-buy-panel--reference .size-option {
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
    }

    body.product-page .product-buy-panel--reference .product-size-stock-note {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        justify-content: flex-start !important;
        text-align: left !important;
        font-size: 0.8rem !important;
        color: #6b7280 !important;
    }

    body.product-page .product-buy-panel--reference .size-fit-footer,
    body.product-page .product-buy-panel--reference .size-fit-model-note {
        display: none !important;
    }

    body.product-page .product-buy-panel--reference .product-purchase-actions--reference,
    body.product-page .product-buy-panel--reference .product-purchase-actions {
        order: 10;
        margin-top: 16px !important;
        padding: 0 !important;
    }

    body.product-page .product-purchase-actions--reference .product-purchase-actions__bar {
        display: grid !important;
        grid-template-columns: 124px minmax(0, 1fr) 48px !important;
        gap: 8px !important;
        margin: 0 !important;
        align-items: stretch !important;
    }

    /* The 44px round buttons plus gaps needed more room than the column offered,
       so overflow: hidden clipped the minus and plus. */
    body.product-page .product-purchase-actions--reference .product-quantity-control {
        gap: 0 !important;
        padding: 0 6px !important;
    }

    body.product-page .product-purchase-actions--reference .product-quantity-control__button {
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
    }

    body.product-page .product-purchase-actions--reference .product-quantity-control__value {
        min-width: 0 !important;
        font-size: 1.2rem !important;
    }

    /* The CTA sits after the wishlist in the DOM, so grid-column alone pushed it
       onto a second row — pin all three to row 1. */
    body.product-page .product-purchase-actions--reference .product-quantity-control {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-height: 52px !important;
        border-radius: 14px !important;
    }

    body.product-page .product-purchase-actions--reference .product-detail-cta,
    body.product-page .product-purchase-actions--reference .product-add-cta {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-height: 52px !important;
        padding: 14px 10px !important;
        border-radius: 14px !important;
        font-size: 0.92rem !important;
    }

    body.product-page .product-purchase-actions--reference .product-add-cta__label {
        white-space: nowrap !important;
    }

    body.product-page .product-purchase-actions--reference .product-detail-wishlist {
        grid-column: 3 !important;
        grid-row: 1 !important;
        min-width: 48px !important;
        width: 48px !important;
        min-height: 52px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        justify-content: center !important;
    }

    body.product-page .product-purchase-actions--reference .product-detail-wishlist__label {
        display: none !important;
    }

    body.product-page .product-detail-lower--classic {
        margin: 8px var(--pdp-gutter) 0 !important;
        padding: 0 !important;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
    }

    /* Four tabs never fit on one phone-width row, and the scroll strip hid the
       last two mid-word — wrap them into a 2x2 grid so all are visible. */
    body.product-page .product-detail-lower__tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
        overflow-x: visible !important;
    }

    body.product-page .product-detail-lower__tab {
        min-width: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.35rem !important;
        min-height: 48px !important;
        padding: 0.85rem 0.4rem !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        white-space: nowrap !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        color: #6b7280 !important;
        box-shadow: none !important;
    }

    body.product-page .product-detail-lower__tab i {
        font-size: 1.05rem !important;
        flex: 0 0 auto !important;
    }

    body.product-page .product-detail-lower__tab span {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.product-page .product-detail-lower__tab.is-active {
        color: #111 !important;
        background: transparent !important;
        border-bottom: 2px solid #111 !important;
    }

    body.product-page .product-detail-lower__tab.is-active::after {
        display: none !important;
    }

    body.product-page .product-detail-lower__panel {
        padding: 1rem 0 1.5rem !important;
    }

    body.product-page .product-lower-description-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.85rem !important;
    }

    body.product-page .product-lower-sports {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1.1rem 0.5rem !important;
    }

    body.product-page .product-lower-sports__item {
        font-size: 0.8rem !important;
    }

    body.product-page .product-detail-lower--classic .size-guide-reference--inline {
        padding: 14px !important;
        grid-template-columns: 1fr !important;
    }

    body.product-page .product-detail-lower--classic .size-guide-reference__figure-card {
        max-width: 200px !important;
        max-height: 240px !important;
        min-height: 0 !important;
    }

    body.product-page .product-detail-lower--classic .size-guide-table th,
    body.product-page .product-detail-lower--classic .size-guide-table td {
        padding: 0.6rem 0.22rem !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
    }

    body.product-page .product-detail-lower--classic .size-guide-reference__table-badge {
        min-width: 140px !important;
        min-height: 44px !important;
        margin-bottom: 14px !important;
        font-size: 0.9rem !important;
    }

    body.product-page .related-shell.product-edge-shell {
        padding-left: var(--pdp-gutter) !important;
        padding-right: var(--pdp-gutter) !important;
    }

    /* Sticky ATC — clean single bar at bottom */
    body.product-page .product-mobile-buy-bar {
        bottom: 0 !important;
        border-top: 1px solid rgba(18, 18, 18, 0.1) !important;
        box-shadow: 0 -8px 28px rgba(3, 4, 18, 0.1) !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }

    body.product-page .product-mobile-buy-bar__inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(148px, 42%) !important;
        gap: 10px !important;
        align-items: center !important;
        padding: 10px var(--pdp-gutter) calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.product-page .product-mobile-buy-bar__thumb,
    body.product-page .product-mobile-buy-bar__note {
        display: none !important;
    }

    body.product-page .product-mobile-buy-bar__title {
        display: block !important;
        overflow: hidden !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: #111 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.product-page .product-mobile-buy-bar__product {
        gap: 0 !important;
        min-width: 0 !important;
    }

    body.product-page .product-mobile-buy-bar__copy {
        gap: 4px !important;
    }

    body.product-page .product-mobile-buy-bar__meta {
        flex-wrap: nowrap !important;
        gap: 8px !important;
        align-items: baseline !important;
    }

    body.product-page .product-mobile-buy-bar__price {
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        color: #111 !important;
    }

    body.product-page .product-mobile-buy-bar__size-badge {
        display: inline-flex !important;
        align-items: baseline !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        gap: 0.25rem !important;
    }

    body.product-page .product-mobile-buy-bar__size-label {
        display: inline !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        color: #6b7280 !important;
    }

    body.product-page .product-mobile-buy-bar__size-value {
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        color: #6b7280 !important;
    }

    body.product-page .product-mobile-buy-bar__cta {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 48px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
    }

    body.product-page .product-mobile-buy-bar__cta .product-add-cta__label {
        font-size: 0.88rem !important;
        white-space: nowrap !important;
    }

    body.product-page .product-mobile-buy-bar__cta .product-add-cta__icon {
        font-size: 1.05rem !important;
    }
}

@media (max-width: 380px) {
    /* Drop the tab icons so "Produktbeskrivelse" still fits without ellipsis. */
    body.product-page .product-detail-lower__tab i {
        display: none !important;
    }

    body.product-page .product-detail-lower__tab {
        font-size: 0.74rem !important;
        padding: 0.85rem 0.3rem !important;
    }

    body.product-page .product-buy-panel--reference .size-grid.size-grid-six {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    /* Three controls on one row leaves the CTA too narrow to hold its label and
       squeezes the +/- buttons below a usable tap size — give the CTA its own row. */
    body.product-page .product-purchase-actions--reference .product-purchase-actions__bar {
        grid-template-columns: 120px minmax(0, 1fr) !important;
    }

    body.product-page .product-purchase-actions--reference .product-detail-wishlist {
        grid-column: 2 !important;
        justify-self: end !important;
    }

    body.product-page .product-purchase-actions--reference .product-detail-cta,
    body.product-page .product-purchase-actions--reference .product-add-cta {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }
}