/* ==========================================================================
   SINGLE PRODUCT
   ========================================================================== */

.product-single {
    padding: var(--space-lg) 0 var(--space-2xl);
    background: var(--color-warm);
    flex: 1;
}

.product-single .container {
    max-width: 1160px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

/* Product Layout */
.product-layout {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-xl);
    align-items: start;
    margin-bottom: var(--space-xl);
}

@media (max-width: 900px) {
    .product-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }

    /* On single-column mobile, surface price + CTA before the description.
       Customers on small screens should see the price immediately after the
       title — not buried below paragraphs of copy and a specs table.
       DOM order is preserved for desktop (no flex reorder above 900px). */
    .product-details {
        display: flex;
        flex-direction: column;
    }

    .product-single .product-title   { order: 1; }
    .tresser-reserved-notice          { order: 2; }
    .product-purchase                 { order: 3; }
    .product-trust-strip              { order: 4; }
    .product-soldout-nudge            { order: 5; }
    .product-lead                     { order: 6; }
    details.product-lead-more         { order: 6; }
    .product-specs                    { order: 7; }
    .product-delivery                 { order: 8; }
    .product-inquiry                  { order: 9; }
}

/* Gallery — sticky on desktop so image stays visible while customer reads specs/delivery.
   align-self:start is required for sticky in a CSS grid; top accounts for the fixed header.
   Cancelled on ≤900px (single-column, no side-by-side layout to benefit from). */
.product-gallery {
    min-width: 0;
    align-self: start;
    position: sticky;
    top: calc(var(--header-height, 80px) + var(--space-md, 1rem));
}

/* Admin bar pushes sticky gallery down by 32px (46px on ≤782px) */
.admin-bar .product-gallery {
    top: calc(var(--header-height, 80px) + var(--space-md, 1rem) + 32px);
}

@media (max-width: 900px) {
    /* Single-column layout: sticky gallery serves no purpose — cancel it */
    .product-gallery {
        position: static;
        top: auto;
    }
}

/* Primary gallery image */
.gallery-primary-wrap {
    margin-bottom: var(--space-sm);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-gray-100);
}

.gallery-primary-img {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
    max-height: 600px;
    object-fit: contain;
}

/* Keyboard focus ring on primary wrap (role=button, tabindex=0) */
.gallery-primary-wrap:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
}

/* Zoom/expand affordance — small icon badge in top-right corner on hover (desktop only).
   Signals to the visitor that clicking opens the fullscreen lightbox.
   Uses position:relative on the wrap (already set for primary-container).
   Only rendered when the wrap has role=button (i.e. gallery has >1 image). */
@media (hover: hover) {
    .gallery-primary-wrap[role="button"] {
        position: relative;
    }
    .gallery-primary-wrap[role="button"]::after {
        content: '';
        position: absolute;
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.88);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M9 21H3v-6'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px 16px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
        opacity: 0;
        transition: opacity 0.18s ease;
        pointer-events: none;
        z-index: 3;
    }
    .gallery-primary-wrap[role="button"]:hover::after {
        opacity: 1;
    }
}

/* Tap-to-zoom cue on touch devices — always-visible magnifier badge (no hover available).
   Same position as the desktop expand icon; uses a magnifier SVG instead.
   Only shown when role=button (multi-image galleries). */
@media (hover: none) {
    .gallery-primary-wrap[role="button"] {
        position: relative;
    }
    .gallery-primary-wrap[role="button"]::after {
        content: '';
        position: absolute;
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.88);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px 16px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
        opacity: 0.85;
        pointer-events: none;
        z-index: 3;
    }
}

/* Mobile gallery prev/next nav arrows — touch devices only */
.gallery-primary-container {
    position: relative;
}

.gallery-nav {
    display: none; /* hidden by default; shown below only on touch */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    padding: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
    color: var(--color-black);
    -webkit-tap-highlight-color: transparent;
}

.gallery-nav:active {
    background: rgba(240, 240, 240, 0.95);
}

.gallery-nav:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
    border-radius: 50%;
}

.gallery-nav-prev {
    left: 10px;
}

.gallery-nav-next {
    right: 10px;
}

/* Hide arrow at boundary (first/last image) */
.gallery-nav.is-first,
.gallery-nav.is-last {
    opacity: 0;
    pointer-events: none;
}

/* Image counter pill — touch-only; shows "2 / 5" at bottom-right of primary image */
.gallery-counter {
    display: none;
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 20px;
    pointer-events: none;
    letter-spacing: 0.02em;
}

@media (hover: none) {
    .gallery-nav {
        display: flex;
    }
    .gallery-counter {
        display: block;
    }
}

/* Keyboard hint pill — desktop-only, fades in on first keyboard interaction with gallery */
@media (hover: hover) {
    .gallery-kb-hint {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        background: rgba(0, 0, 0, 0.45);
        color: #fff;
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1;
        padding: 4px 10px;
        border-radius: 20px;
        pointer-events: none;
        letter-spacing: 0.08em;
        opacity: 0;
        transition: opacity 0.25s var(--ease);
    }
    .gallery-kb-hint--visible {
        opacity: 1;
    }
}

/* Desktop thumbnail grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-top: 6px;
}

.gallery-grid-item {
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color var(--duration) var(--ease);
    aspect-ratio: 1;
}

.gallery-grid-item:hover,
.gallery-grid-item.active {
    border-color: var(--color-black);
}

.gallery-grid-item:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
    border-color: var(--color-black);
}

.gallery-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-grid-more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    aspect-ratio: 1;
}

.gallery-grid-more:hover {
    background: var(--color-gray-200);
}

.gallery-grid-more:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
    background: var(--color-gray-200);
}

/* Mobile thumbnail strip */
.gallery-strip {
    display: none;
    gap: 6px;
    overflow-x: auto;
    margin-top: 6px;
    padding-bottom: 2px; /* prevent active-border clip on last row */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.gallery-strip::-webkit-scrollbar { display: none; }

.gallery-strip-thumb {
    flex: 0 0 56px;
    height: 56px;
    padding: 0;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--color-bg-alt);
}

.gallery-strip-thumb.active {
    border-color: var(--color-black);
}

.gallery-strip-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-strip-more {
    flex: 0 0 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    color: var(--color-gray-600);
}

.gallery-strip-thumb:focus-visible,
.gallery-strip-more:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Lightbox styles moved to /assets/css/lightbox.css (2026-04-15) */

@media (max-width: 900px) {
    .gallery-grid { display: none; }
    .gallery-strip { display: flex; }
    .gallery-primary-img { max-height: 400px; }
}


/* Sticky gallery on desktop */
@media (min-width: 901px) {
    .product-gallery {
    min-width: 0;
        position: sticky;
        top: var(--space-md);
    }

    /* Lock the primary image box to a fixed ratio so swapping the src on
       thumbnail hover can't resize the container. An unlocked box shifts
       the grid under the cursor, which re-fires mouseenter on an adjacent
       thumbnail and loops — reads as flicker (issue #3784). */
    .gallery-primary-wrap {
        aspect-ratio: 4 / 3;
    }
    .gallery-primary-img {
        width: 100%;
        height: 100%;
        max-height: none;
    }
}

/* Product lead / description */
.product-lead {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
}

.product-lead p { margin-bottom: var(--space-xs); }

/* "Vis fuld beskrivelse" — collapsible extended description.
   Only shown when a product has both a short description AND full content.
   Uses native <details>/<summary> for zero-JS semantics + accessibility.
   Style is intentionally subtle: a quiet text link with rotating chevron,
   not a boxed accordion — the context is a body-copy block, not a FAQs. */
details.product-lead-more {
    margin-bottom: var(--space-lg);
}

details.product-lead-more > summary.product-lead-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-600);
    cursor: pointer;
    list-style: none;
    user-select: none;
    padding: 0.25rem 0;
    text-decoration: underline;
    text-decoration-color: var(--color-gray-300);
    text-underline-offset: 2px;
    transition: color var(--duration-fast) var(--ease);
}

details.product-lead-more > summary.product-lead-more-toggle::-webkit-details-marker {
    display: none;
}

details.product-lead-more > summary.product-lead-more-toggle:hover {
    color: var(--color-black);
    text-decoration-color: var(--color-black);
}

details.product-lead-more > summary.product-lead-more-toggle:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
    border-radius: 2px;
    color: var(--color-black);
}

.product-lead-more-chevron {
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

details.product-lead-more[open] .product-lead-more-chevron {
    transform: rotate(180deg);
}

/* Swap label text between open/closed states via two hidden spans */
.product-lead-more-label-hide { display: none; }
details.product-lead-more[open] .product-lead-more-label-show { display: none; }
details.product-lead-more[open] .product-lead-more-label-hide { display: inline; }

.product-lead-expanded {
    margin-top: var(--space-sm);
}

details.product-lead-more[open] .product-lead-expanded {
    animation: leadExpandIn 0.2s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    details.product-lead-more[open] .product-lead-expanded { animation: none; }
}

@keyframes leadExpandIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Specs Grid */
.product-specs {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--color-gray-100);
    margin-bottom: var(--space-md);
}

.spec-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-gray-100);
    font-size: 0.875rem;
    gap: var(--space-md);
}

/* De-emphasise the "Sidst opdateret" row — it's metadata, not primary spec.
   Slightly smaller so it doesn't compete with brand/dimensions. No opacity
   here: it multiplies against the already-darkened --color-gray-600 label/
   date-rel text and dropped both below WCAG AA 4.5:1 on white (items 638/640
   fixed the base color but missed this row-level dimming — see #5488). */
.spec-item--date-modified {
    font-size: 0.8125rem;
}

/* Condition note is free-text prose (staff-written, can be multiple sentences/
   lines) — the default spec-item layout assumes a short right-aligned value,
   so stack label above value and left-align instead of squeezing a paragraph
   against the right edge. */
.spec-item--condition {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}
.spec-item--condition .spec-value {
    text-align: left;
    font-weight: 400;
}
.spec-date-rel {
    font-size: 0.75rem;
    color: var(--color-gray-600);
    white-space: nowrap;
}

.spec-label {
    color: var(--color-gray-600);
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}

.spec-value {
    color: var(--color-black);
    font-weight: 500;
    text-align: right;
}

.spec-value a {
    color: var(--color-black);
    text-decoration: underline;
    text-decoration-color: var(--color-gray-300);
    text-underline-offset: 2px;
}

.spec-value a:hover,
.spec-value a:focus-visible {
    text-decoration-color: var(--color-black);
}

.request-dimensions-btn {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    text-decoration: underline;
    text-decoration-color: var(--color-gray-300);
    text-underline-offset: 2px;
    cursor: pointer;
}

.request-dimensions-btn:hover {
    color: var(--color-black);
    text-decoration-color: var(--color-black);
}

.request-dimensions-btn:focus-visible {
    color: var(--color-black);
    text-decoration-color: var(--color-black);
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Material tooltips */
.spec-materials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-end;
}

.material-uncertainty-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0.5rem 0 0;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-warning-text);
    background: var(--color-warning-bg);
    border-radius: var(--radius-sm);
}

.material-uncertainty-badge svg {
    flex-shrink: 0;
}

.material-uncertainty-badge a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.material-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.material-link {
    cursor: default;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.material-info-icon {
    opacity: 0.4;
    vertical-align: middle;
    transition: opacity var(--duration) var(--ease);
}

.material-link:hover .material-info-icon {
    opacity: 1;
}

.material-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    max-width: 280px;
    padding: 0.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-gray-600);
    line-height: 1.5;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: all var(--duration) var(--ease);
    z-index: 50;
    pointer-events: none;
    text-align: left;
}

/* Bridge the gap so tooltip stays open when moving cursor to it */
.material-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
}

.material-wrapper:hover .material-tooltip,
.material-wrapper:focus-within .material-tooltip,
.material-wrapper.tooltip-visible .material-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.tooltip-text {
    display: block;
    margin-bottom: 0.375rem;
}

.tooltip-link {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-black);
    text-decoration: none;
}

.tooltip-link:hover {
    text-decoration: underline;
}

.tooltip-link:focus-visible {
    text-decoration: underline;
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Narrow mobile: prevent tooltip from overflowing viewport edges.
   Switch from right-anchored to left-anchored so it opens rightward
   (safe inside the right-aligned spec column) and clamp width to
   never exceed the usable viewport width. */
@media (max-width: 480px) {
    .material-tooltip {
        right: auto;
        left: 0;
        max-width: min(280px, calc(100vw - 2rem));
    }
}

/* Price row */
.product-price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.product-stock-badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
}

.product-stock-badge--instock {
    color: #15803d;
    background: #f0fdf4;
}

.product-stock-badge--outofstock {
    color: #b91c1c;
    background: #fef2f2;
}

/* Savings pill — shown on sale products next to the price.
   Signals the discount amount clearly without the customer having to do maths.
   Green-tinted to feel positive (money saved). Wraps below on very narrow screens. */
.product-savings-pill {
    font-size: 0.75rem;
    font-weight: 600;
    color: #15803d;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Lowest-price-in-30-days disclosure — required alongside any sale badge/
   savings pill under the EU Omnibus Directive. Deliberately muted/neutral
   (not a marketing pill) — this is a compliance statement, not a hook. */
.product-lowest-30d {
    display: block;
    font-size: 0.72rem;
    color: #6b7280;
    margin-top: 0.15rem;
}

/* Reserve spec-value overflow — prevents long material names / dimension strings
   from overflowing the flex row on very narrow screens (≤480px). Pin label to
   top of the row so multi-line values don't leave it floating at mid-height. */
@media (max-width: 480px) {
    .spec-item {
        align-items: flex-start;
    }
    .spec-value {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* Reserved notice */
.tresser-reserved-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: #92400e;
    margin-bottom: var(--space-md);
}

/* Reservation-freed notify-me toggle — lives inside the reservation notice
   above rather than the .product-secondary-actions row (see
   tresser-feature-loop backlog.md item 6), so it gets its own compact
   styling matching the notice's amber tone instead of reusing
   .stock-notify-btn/.price-drop-notify-btn's full-width treatment. */
.reservation-freed-notify-btn {
    flex-basis: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    margin-top: 0.25rem;
    padding: 0.5rem 0.875rem;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    color: #92400e;
    background: var(--color-white);
    border: 1px solid #fde68a;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.reservation-freed-notify-btn:hover {
    border-color: #f59e0b;
    background: #fffbeb;
}

.reservation-freed-notify-btn:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
}

.reservation-freed-notify-btn.is-active {
    color: var(--color-white);
    background: #92400e;
    border-color: #92400e;
}

/* Sold-out discovery nudge — shown on sold products when related items exist.
   Subtly directs the customer downward to the related-products grid instead
   of leaving them with only a "Solgt" badge and no next step. */
.product-soldout-nudge {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background: #f5f5f4;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--color-gray-700);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.soldout-nudge-icon {
    font-size: 1.125rem;
    line-height: 1;
    flex-shrink: 0;
    color: var(--color-gray-500);
    animation: nudge-bob 1.6s ease-in-out infinite;
}

@keyframes nudge-bob {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .soldout-nudge-icon { animation: none; }
}

.soldout-nudge-text {
    flex: 1;
}

.soldout-nudge-link {
    color: var(--color-black);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.soldout-nudge-link:hover {
    color: var(--color-gray-700);
}

.soldout-nudge-link:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Add to cart full width */
.product-actions form.cart {
    display: flex;
    width: 100%;
}

.product-actions .single_add_to_cart_button {
    flex: 1;
    width: 100%;
}

.product-actions .quantity {
    display: none;
}

/* Secondary actions: wishlist + reservation side by side.
   flex-wrap prevents horizontal page overflow on narrow phones when several
   of these render at once (wishlist + both notify forms + reserve + share). */
.product-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.product-secondary-actions .wishlist-btn-large,
.product-secondary-actions .btn-reservation-act,
.product-secondary-actions .btn-showroom-visit-act,
.product-secondary-actions .stock-notify-btn,
.product-secondary-actions .price-drop-notify-btn,
.product-secondary-actions .wishlist-lost-notify-btn {
    flex: 1;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    padding: 0 1rem !important;
    height: 48px !important;
    min-height: 48px;
    box-sizing: border-box;
    font-family: var(--font) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    background: var(--color-white) !important;
    border: 1px solid var(--color-gray-200) !important;
    border-radius: var(--radius-md) !important;
}

/* Back-in-stock / price-drop notify-me toggles — match .btn-reservation-act's
   idle state, switch to a filled/active treatment once subscribed (mirrors
   the wishlist button's .is-active convention). Mutually exclusive per
   product (one shows for sold-out, the other for in-stock priced items). */
.stock-notify-btn,
.price-drop-notify-btn,
.wishlist-lost-notify-btn {
    color: var(--color-gray-700);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.stock-notify-btn:hover,
.price-drop-notify-btn:hover,
.wishlist-lost-notify-btn:hover {
    color: var(--color-black);
    border-color: var(--color-gray-400) !important;
    background: var(--color-bg-alt) !important;
}

.stock-notify-btn:focus-visible,
.price-drop-notify-btn:focus-visible,
.wishlist-lost-notify-btn:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
}

.stock-notify-btn.is-active,
.price-drop-notify-btn.is-active {
    color: var(--color-white) !important;
    background: var(--color-black) !important;
    border-color: var(--color-black) !important;
}

/* Guest (logged-out) email capture form — reuses the notify-btn pill classes
   above for its container so it matches the logged-in toggle's look, but
   swaps the fixed icon+text layout for icon+input+submit (see
   tresser-feature-loop backlog.md item 55). */
.guest-notify-form.stock-notify-btn,
.guest-notify-form.price-drop-notify-btn,
.guest-notify-form.wishlist-lost-notify-btn {
    padding: 0 0.375rem 0 1rem !important;
}

.guest-notify-form.reservation-freed-notify-btn {
    width: 100%;
}

.guest-notify-email {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: 0.8125rem;
    color: var(--color-gray-900);
    padding: 0.25rem 0;
}

.guest-notify-email:focus {
    outline: none;
}

.guest-notify-submit {
    flex-shrink: 0;
    padding: 0.375rem 0.75rem;
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-white);
    background: var(--color-black);
    border: none;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
}

.guest-notify-submit:hover {
    background: var(--color-gray-700);
}

.guest-notify-submitted-text {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
}

.guest-notify-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.btn-reservation-act {
    color: var(--color-gray-700);
    cursor: pointer;
    transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease), background var(--duration) var(--ease);
    text-decoration: none;
}

.btn-reservation-act:hover {
    color: var(--color-black);
    border-color: var(--color-gray-400) !important;
    background: var(--color-bg-alt) !important;
}

.btn-reservation-act:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
}

/* Item 434: same idle/hover/focus treatment as .btn-reservation-act, its
   sibling CTA in .product-secondary-actions. */
.btn-showroom-visit-act {
    color: var(--color-gray-700);
    cursor: pointer;
    transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease), background var(--duration) var(--ease);
    text-decoration: none;
}

.btn-showroom-visit-act:hover {
    color: var(--color-black);
    border-color: var(--color-gray-400) !important;
    background: var(--color-bg-alt) !important;
}

.btn-showroom-visit-act:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
}

/* Share button — matches .wishlist-btn-large / .btn-reservation-act style */
.product-share-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0 0.875rem;
    height: 48px;
    min-height: 48px;
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease), background var(--duration) var(--ease);
    white-space: nowrap;
}

.product-share-btn:hover {
    color: var(--color-black);
    border-color: var(--color-gray-400);
    background: var(--color-bg-alt);
}

.product-share-btn:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

/* Share toast — brief clipboard confirmation */
.product-share-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(0.5rem);
    background: var(--color-black);
    color: var(--color-white);
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-md);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
    z-index: 9999;
}

.product-share-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .product-share-toast {
        transition: opacity 0.2s linear;
        transform: translateX(-50%) translateY(0);
    }
}

/* On mobile where the sticky CTA bar sits at the bottom, lift the toast above it */
@media (max-width: 768px) {
    .product-share-toast {
        bottom: calc(72px + 1rem); /* 72px ≈ sticky-product-cta height; 1rem gap */
    }
}

/* Delivery info */
.product-delivery {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--space-md);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md);
    overflow: hidden;
}

details.delivery-option {
    border-top: 1px solid var(--color-gray-100);
}

details.delivery-option:first-child {
    border-top: none;
}

details.delivery-option > summary {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    min-height: 44px; /* WCAG 2.5.5 touch target — delivery option is a key mobile interaction */
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

details.delivery-option > summary::-webkit-details-marker {
    display: none;
}

details.delivery-option > summary svg:not(.delivery-chevron) {
    flex-shrink: 0;
    color: var(--color-gray-400);
}

details.delivery-option > summary strong {
    color: var(--color-black);
    font-weight: 500;
}

details.delivery-option > summary .delivery-chevron {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--color-gray-400);
    transition: transform 0.2s ease;
}

details.delivery-option[open] > summary .delivery-chevron {
    transform: rotate(180deg);
}

details.delivery-option > summary:hover {
    background: var(--color-bg-alt);
}

details.delivery-option[open] > summary {
    background: var(--color-bg-alt);
}

.delivery-details {
    padding: 0.625rem 1rem 0.75rem calc(18px + 0.625rem + 1rem);
    font-size: 0.875rem;
    color: var(--color-gray-600);
    line-height: 1.6;
    border-top: 1px solid var(--color-gray-100);
}

/* Inline call links inside delivery details and inquiry intro */
.delivery-details a,
.inquiry-phone-link {
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.delivery-details a:hover,
.inquiry-phone-link:hover {
    color: var(--color-gray-600);
}

.delivery-details a:focus-visible,
.inquiry-phone-link:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
    border-radius: 2px;
}

details.delivery-option[open] .delivery-details {
    animation: deliveryIn 0.22s ease forwards;
}

details.delivery-option.is-closing .delivery-details {
    animation: deliveryOut 0.18s ease forwards;
}

details.delivery-option > summary:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: -2px;
    border-radius: 2px;
}

@keyframes deliveryIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes deliveryOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    details.delivery-option[open] .delivery-details,
    details.delivery-option.is-closing .delivery-details {
        animation: none;
    }
}

.delivery-postcode-check {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-gray-100);
}

.delivery-postcode-check label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gray-600);
    margin-bottom: 0.375rem;
}

.delivery-postcode-row {
    display: flex;
    gap: 0.5rem;
}

.delivery-postcode-row input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    background: var(--color-white);
}

.delivery-postcode-row input:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 1px;
}

.delivery-postcode-row button {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-white);
    background: var(--color-black);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    min-height: 36px;
}

.delivery-postcode-row button:hover {
    background: var(--color-gray-600);
}

.delivery-postcode-result {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.delivery-postcode-result:empty {
    margin: 0;
}

.delivery-postcode-result.is-in-zone {
    color: var(--color-success-text);
}

.delivery-postcode-result.is-out-of-zone {
    color: var(--color-gray-600);
}

.delivery-postcode-result.is-invalid {
    color: var(--color-danger);
}

/* Hide WooCommerce stock text (redundant with badge) */
.product-actions .stock { display: none !important; }

/* Hide quantity for sold-individually products */
.product-actions .quantity { display: none; }

/* Product actions layout fix */
.product-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-actions form.cart {
    display: flex;
    width: 100%;
    margin: 0;
}

.product-actions .single_add_to_cart_button {
    width: 100%;
    flex: 1;
}

/* Rediger produkt button - clearly admin-only */
.btn-admin-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gray-600);
    background: transparent;
    text-decoration: none;
    padding: 0.25rem 0.625rem;
    border: 1px dashed var(--color-gray-300);
    border-radius: var(--radius-sm);
    transition: all var(--duration) var(--ease);
    margin-left: auto;
    letter-spacing: 0.02em;
}

.btn-admin-edit::before {
    content: 'Admin';
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    padding: 0.125rem 0.375rem;
    border-radius: 2px;
    margin-right: 0.125rem;
}

.btn-admin-edit:hover {
    border-color: var(--color-gray-500);
    color: var(--color-gray-700);
    background: var(--color-gray-50, #fafafa);
}

.btn-admin-edit svg { stroke: currentColor; }

.gallery-main {
    margin-bottom: var(--space-sm);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-gray-100);
}

.gallery-main .main-image {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
    transition: transform var(--duration-slow) var(--ease);
}

.gallery-main:hover .main-image {
    transform: scale(1.02);
}

.gallery-placeholder {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
}

.gallery-thumbs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gallery-thumb {
    width: 72px;
    height: 72px;
    padding: 0;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--color-bg-alt);
    transition: all var(--duration) var(--ease);
}

.gallery-thumb:hover {
    border-color: var(--color-gray-400);
}

.gallery-thumb.active {
    border-color: var(--color-black);
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lightbox styles moved to /assets/css/lightbox.css (2026-04-15) */

.lightbox-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-lg);
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--duration) var(--ease);
    padding: 0.5rem;
}

.lightbox-close:hover {
    opacity: 1;
}

/* Product Details */
.product-details {
    padding-top: 0;
}

.product-single .product-title {
    font-size: clamp(1.625rem, 3vw, 2.25rem);
    margin-bottom: var(--space-md);
}

.product-brand,
.product-dimensions {
    font-size: 0.9375rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-xs);
}

.product-brand .label,
.product-dimensions .label,
.product-meta .label {
    color: var(--color-gray-600);
}

.product-meta .meta-item {
    margin: 0.5rem 0;
}

.product-meta a {
    color: var(--color-gray-600);
}

.product-meta a:hover {
    color: var(--color-black);
}

/* Product Purchase */
.product-purchase {
    margin: var(--space-md) 0 var(--space-lg);
}

.product-purchase .product-price {
    font-size: 1.625rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
}

.product-purchase .product-price del {
    color: var(--color-gray-400);
    font-weight: 400;
    font-size: 1.125rem;
    margin-right: 0.625rem;
}

.product-purchase .product-price ins {
    text-decoration: none;
    color: #15803d; /* sale price accent — matches savings pill + card ins for visual consistency */
}

/* Freshness text within single-product purchase block */
.product-purchase .product-freshness {
    margin-top: -0.25rem;
    margin-bottom: var(--space-md);
}

/* Product Actions (see overrides above) */
.product-actions {
}

.product-actions form.cart {
    display: flex;
}

.product-actions .quantity input {
    width: 72px;
    padding: 0.875rem;
    font-family: var(--font);
    font-size: 1rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    text-align: center;
    background: var(--color-white);
    transition: border-color var(--duration) var(--ease);
}

.product-actions .quantity input:focus {
    outline: none;
    border-color: var(--color-black);
}

.product-actions .quantity input:focus-visible {
    outline: none;
    border-color: var(--color-black);
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-black);
}

.product-actions .single_add_to_cart_button {
    flex: 1;
    min-width: 180px;
    padding: 0.9375rem 1.5rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 500;
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.product-actions .single_add_to_cart_button:hover {
    background: var(--color-gray-800);
    transform: translateY(-1px);
}

.product-actions .single_add_to_cart_button:disabled {
    opacity: 0.7;
    cursor: default;
    transform: none;
}

/* Item 455: wraps the AJAX'd add-to-cart form — display:contents keeps the
   form and feedback line as direct flex items of .product-actions (already
   flex-direction:column), zero layout change for the wrapper itself. */
.atc-wrap {
    display: contents;
}

.atc-feedback {
    font-size: 0.8125rem;
    font-weight: 500;
}

.atc-feedback-success {
    color: var(--color-success-text);
    background: var(--color-success-bg);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
}

.atc-feedback-error {
    color: #b91c1c;
}

/* Product Description */
.product-details .product-description {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--color-gray-600);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-gray-100);
}

.product-details .product-description p {
    margin-bottom: var(--space-sm);
}

/* Product Inquiry */
.product-inquiry {
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
}

/* Sold-out variant: warmer tint + subtle left border signal that
   the product is gone but we can still help find something similar */
.product-inquiry--sold {
    background: #fffbf5;
    border-left: 3px solid var(--color-gray-300);
}

.product-inquiry h2 {
    font-size: 1.125rem;
    margin-bottom: var(--space-xs);
}

.product-inquiry .inquiry-intro {
    color: var(--color-gray-600);
    font-size: 0.9375rem;
    margin-bottom: var(--space-md);
}

.product-inquiry .jet-form-builder__field {
    margin-bottom: var(--space-sm);
}

.product-inquiry .jet-form-builder__label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--color-gray-700);
}

.product-inquiry .jet-form-builder input[type="text"],
.product-inquiry .jet-form-builder input[type="email"],
.product-inquiry .jet-form-builder input[type="tel"],
.product-inquiry .jet-form-builder textarea {
    width: 100%;
    padding: 0.875rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
    transition: all var(--duration) var(--ease);
}

.product-inquiry .jet-form-builder input:focus,
.product-inquiry .jet-form-builder textarea:focus {
    outline: none;
    border-color: var(--color-black);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.product-inquiry .jet-form-builder textarea {
    min-height: 100px;
    resize: vertical;
}

.product-inquiry .jet-form-builder__submit {
    padding: 0.875rem 1.75rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 500;
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.product-inquiry .jet-form-builder__submit:hover {
    background: var(--color-gray-800);
    transform: translateY(-1px);
}

.product-inquiry .jet-form-builder__submit:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-black);
}

/* Inquiry form: touch-friendly sizing on mobile — full-width submit + 44px min-heights */
@media (max-width: 600px) {
    .product-inquiry .jet-form-builder input[type="text"],
    .product-inquiry .jet-form-builder input[type="email"],
    .product-inquiry .jet-form-builder input[type="tel"] {
        min-height: 44px;
    }
    .product-inquiry .jet-form-builder__submit {
        width: 100%;
        min-height: 44px;
    }
}

/* Inquiry submit result — unstyled by the plugin, and easy to overlook since it
   renders at the very bottom of the form (issue #928) */
.product-inquiry .jet-form-builder-messages-wrap:empty {
    display: none;
}

.product-inquiry .jet-form-builder-message {
    margin-top: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border-left: 3px solid transparent;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.product-inquiry .jet-form-builder-message:focus {
    outline: none;
}

.product-inquiry .jet-form-builder-message--success {
    background: var(--color-success-bg);
    border-left-color: var(--color-success);
    color: var(--color-success-text);
    font-weight: 500;
}

.product-inquiry .jet-form-builder-message--success::before {
    content: "✓";
    margin-right: 0.5rem;
    font-weight: 700;
}

.product-inquiry .jet-form-builder-message--error {
    background: #fdecea;
    border-left-color: var(--color-danger);
    color: #8f1d18;
}

/* Product Reviews */
.review-section {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-gray-200);
}

.review-section h2 {
    font-size: 1.5rem;
    margin-bottom: var(--space-md);
}

.review-stars {
    display: inline-flex;
    letter-spacing: 1px;
}

.review-star {
    color: var(--color-gray-300);
}

.review-star.is-filled {
    color: #e0a527;
}

.review-stars--small {
    font-size: 0.8125rem;
}

.review-summary {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.review-summary-text {
    color: var(--color-gray-600);
    font-size: 0.9375rem;
}

.review-list {
    list-style: none;
    margin: 0 0 var(--space-lg);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.review-item {
    padding: var(--space-md);
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
}

.review-item-meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin-top: 0.375rem;
}

.review-item-author {
    font-weight: 500;
    font-size: 0.875rem;
}

.review-item-date {
    color: var(--color-gray-500);
    font-size: 0.8125rem;
}

.review-verified-badge {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-success-text);
    background: var(--color-success-bg);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
}

.review-item-content {
    margin-top: var(--space-xs);
    font-size: 0.9375rem;
    color: var(--color-gray-700);
}

.review-empty {
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
}

.review-form-wrapper input[type="text"],
.review-form-wrapper input[type="email"],
.review-form-wrapper input[type="url"],
.review-form-wrapper textarea {
    width: 100%;
    padding: 0.875rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
    transition: all var(--duration) var(--ease);
}

.review-form-wrapper input:focus,
.review-form-wrapper textarea:focus {
    outline: none;
    border-color: var(--color-black);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.review-form-wrapper textarea {
    min-height: 100px;
    resize: vertical;
}

.review-form-wrapper #submit {
    padding: 0.875rem 1.75rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 500;
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.review-form-wrapper #submit:hover {
    background: var(--color-gray-800);
    transform: translateY(-1px);
}

/* Related Products */
.related-products {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-gray-200);
}

.related-products h2 {
    margin-bottom: var(--space-lg);
    text-align: center;
    font-size: 1.5rem;
}

.related-products-cta {
    text-align: center;
    margin-top: var(--space-lg);
}

@media (max-width: 480px) {
    .related-products-cta .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   PRODUCT BACK LINK (← Tilbage til shoppen)
   Appears below related products on single product pages.
   No specific CSS existed here — it was falling through to base.css `a`
   (black, full body font size, no margin). Add breathing room and muted style.
   ========================================================================== */
.product-back {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-gray-100);
}

.product-back .back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-gray-600);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}

.product-back .back-link:hover {
    color: var(--color-black);
    text-decoration: none;
}

.product-back .back-link:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
    border-radius: 2px;
    color: var(--color-black);
}



/* Ultra-narrow (≤360px, e.g. iPhone SE 320px): stack spec rows vertically.
   Side-by-side label/value pairs get cramped at 320px — material lists and
   dimension strings overflow or force tiny type. Column layout reads better. */
@media (max-width: 360px) {
    .spec-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        padding: 0.625rem 0;
        font-size: 0.8125rem;
    }
    .spec-label {
        white-space: normal;
    }
    .spec-value {
        text-align: left;
    }
}

/* Narrow mobile: tighten product page spacing */
@media (max-width: 480px) {
    .product-inquiry {
        padding: var(--space-md);
    }
    .related-products {
        margin-top: var(--space-xl);
        padding-top: var(--space-lg);
    }
    .related-products h2 {
        font-size: 1.25rem;
        margin-bottom: var(--space-md);
    }
    .related-products-cta {
        margin-top: var(--space-md);
    }
    /* Prevent oversized primary image on narrow phones (320-480px) */
    .gallery-primary-img {
        max-height: 300px;
    }
    /* Slightly smaller thumbs fit 4 tiles without scroll on 320px screens */
    .gallery-strip-thumb,
    .gallery-strip-more {
        flex: 0 0 48px;
        height: 48px;
    }
    /* Secondary-actions row: hide wishlist/stock-notify/price-drop text so
       the row fits neatly — stock-notify/price-drop only appear one at a
       time (sold-out vs. in-stock priced products), making this a 4-button
       row on narrow phones otherwise. */
    .wishlist-btn-large .wishlist-btn-text,
    .stock-notify-btn .stock-notify-btn-text,
    .price-drop-notify-btn .price-drop-notify-btn-text {
        display: none;
    }
    .product-secondary-actions .wishlist-btn-large,
    .product-secondary-actions .btn-reservation-act,
    .product-secondary-actions .stock-notify-btn,
    .product-secondary-actions .price-drop-notify-btn {
        justify-content: center !important;
    }
    /* Grid instead of flex-wrap: guest-notify-form (wishlist-lost/stock/
       price-drop email capture) needs full row width for its input, but
       flex-wrap put every unshrinkable item on its own line and stretched
       lone small icon buttons (wishlist, reservation, share) to fill their
       leftover row too — a stack of oversized, mismatched rows. Grid lets
       the email-capture forms span both columns while icon buttons pair up
       two-per-row regardless of DOM order. */
    .product-secondary-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: dense;
    }
    .product-secondary-actions .guest-notify-form {
        grid-column: 1 / -1;
    }
}


/* ==========================================================================
   PRODUCT TRUST STRIP (single product page)
   Compact reassurance row between the purchase CTA and delivery accordion.
   ========================================================================== */
.product-trust-strip {
    list-style: none;
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) 0;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    border-top: 1px solid var(--color-gray-100);
    flex-wrap: wrap;
}

.product-trust-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    white-space: nowrap;
}

.product-trust-item svg {
    flex-shrink: 0;
    color: var(--color-gray-400);
}

/* Inquiry anchor link inside trust strip */
.product-trust-inquiry-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: inherit;
    text-decoration: none;
    border-radius: 3px;
    transition: color 0.15s ease;
}
.product-trust-inquiry-link:hover {
    color: var(--color-primary, #2d4a3e);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.product-trust-inquiry-link:focus-visible {
    outline: 2px solid var(--color-primary, #2d4a3e);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .product-trust-strip {
        gap: var(--space-sm);
    }

    .product-trust-item {
        font-size: 0.75rem;
    }

    /* Enlarge tap target on the tappable inquiry link item at mobile (WCAG 2.5.5). */
    .product-trust-item:has(.product-trust-inquiry-link) {
        min-height: 44px;
    }
}


/* ==========================================================================
   BREADCRUMB (duplicated from product-card.css, night-loop item 633/#5414)
   product-card.css got merged with shop-leftover.css (breadcrumb rules lived
   there) into one file/handle to kill an extra /cart/ request. That handle
   is preload+onload-deferred on single-product pages (item 629/630, #5401)
   because its related-products grid is below the fold there — but the
   breadcrumb at the top of this template is NOT below the fold, so it would
   flash unstyled until the deferred file swaps in. Duplicating these rules
   here (always render-blocking on this page) keeps the breadcrumb styled
   immediately; harmless once the deferred file also applies them later.
   ========================================================================== */
.breadcrumbs {
    font-size: 0.8125rem;
    margin-bottom: var(--space-lg);
    color: var(--color-gray-600);
}

.breadcrumbs a {
    color: var(--color-gray-600);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease);
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
    color: var(--color-black);
}

.breadcrumb-sep {
    margin: 0 0.625rem;
    color: var(--color-gray-300);
}

.breadcrumb-current {
    color: var(--color-black);
    font-weight: 500;
}

@media (max-width: 768px) {
    .breadcrumbs a {
        display: inline-flex;
        align-items: center;
        padding-block: 0.375rem;
        font-size: 0.875rem;
    }

    .breadcrumb-current {
        font-size: 0.875rem;
    }
}