/* ==========================================================================
   /e/product.php

   Layout and spacing follow the Raqtive product template; every colour comes
   from the /e theme tokens (e/includes/header.php), so dark mode needs no
   second palette here. Template colour -> token:

       text    #151515 -> --text          border  #e5e5e5 -> --border
       muted   #737373 -> --text-muted    accent  #ff5525 -> --primary
       surface #f7f7f7 -> --white + a border. The page itself is already --bg,
                          so a --bg card would be invisible.
       solid dark buttons / the chosen size -> background --text, colour --bg,
                          which inverts correctly when the theme flips.

   Anything that must be hidden is hidden with .epd-is-hidden, never with the
   [hidden] attribute: that only lives in the browser's own stylesheet, and any
   rule here that sets display would beat it.
   ========================================================================== */

:root {
    --epd-bn-h: 75px;        /* visible height of the /e bottom nav; product.js measures the real one */
    --epd-sticky-h: 64px;
    --epd-fab-gap: 76px;     /* kept clear in the middle of the sticky bar for the centre button */
}

.epd-is-hidden { display: none !important; }

.epd-wrap { width: 100%; padding-bottom: 1rem; }

/* ── Top bar ──────────────────────────────────────────────────────────── */
.epd-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; margin-bottom: 1rem;
}
.epd-cartbtn { position: relative; }
.epd-cartbtn .cnt {
    position: absolute; top: -8px; right: -8px;
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px;
    display: flex; align-items: center; justify-content: center;
    background: var(--danger); color: #fff;
    font-size: .7rem; font-weight: 700; line-height: 1;
}

/* ── Hero: gallery + buy box ──────────────────────────────────────────── */
.epd-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 55px;
    margin-top: 1.25rem;
}

.epd-gallery { min-width: 0; }
.epd-image-wrap {
    position: relative; width: 100%; aspect-ratio: 1 / 1;
    overflow: hidden; border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--white);
    display: flex; align-items: center; justify-content: center;
}
/* Product photos are normalised onto a white canvas by the uploader, so the
   frame behind one stays white in dark mode too -- otherwise the photo shows
   as a white square floating in a dark one. */
.epd-image-wrap.has-image { background: #fff; }
.epd-image-wrap img {
    display: block; width: 100%; height: 100%;
    object-fit: contain;
    transition: opacity .2s ease;
}
.epd-image-wrap .ph { color: var(--text-muted); opacity: .45; font-size: 3.5rem; }

.epd-badge {
    position: absolute; z-index: 5; top: 14px; left: 14px;
    padding: 7px 15px; border-radius: 50px;
    background: #151515; color: #fff;          /* sits on the white photo frame in both themes */
    font-size: .72rem; font-weight: 700; letter-spacing: .05em;
}
.epd-badge--finisher { background: var(--warning); }

.epd-thumbs {
    display: flex; align-items: center; gap: 10px;
    margin-top: 12px; padding-bottom: 6px;
    overflow-x: auto;
}
.epd-thumb {
    flex: 0 0 80px; width: 80px; height: 80px;
    margin: 0; padding: 0; overflow: hidden;
    border: 2px solid transparent; border-radius: 7px;
    background: #fff; cursor: pointer;
}
.epd-thumb.sel { border-color: var(--primary); }
.epd-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.epd-info { min-width: 0; }
.epd-collection {
    margin: 0 0 12px;
    color: var(--primary);
    font-size: .78rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase;
}
.epd-name {
    margin: 0 0 16px;
    color: var(--text);
    font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 800; line-height: 1.08;
}
.epd-price-row {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px;
    margin-bottom: 25px;
}
.epd-price { color: var(--text); font-size: 1.6rem; font-weight: 800; }
.epd-old-price { color: var(--text-muted); text-decoration: line-through; font-size: 1rem; }
.epd-summary { margin: 0 0 21px; color: var(--text-muted); line-height: 1.7; }

.epd-stock { display: flex; align-items: center; gap: 9px; margin-bottom: 30px; color: var(--text); font-size: .92rem; }
.epd-stock-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--success); }
.epd-stock.is-out { color: var(--danger); }
.epd-stock.is-out .epd-stock-dot { background: var(--danger); }

.epd-block { margin-bottom: 28px; }
.epd-option-heading {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
    font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text);
}
.epd-size-guide {
    color: var(--text-muted); text-decoration: underline;
    font-weight: 500; letter-spacing: 0; text-transform: none;
    background: none; border: 0; padding: 0; cursor: pointer; font-size: .85rem;
}
.epd-size-guide:hover { color: var(--primary); }

.epd-sizes { display: flex; flex-wrap: wrap; gap: 10px; border-radius: 9px; }
.epd-size {
    min-width: 64px; height: 54px; padding: 0 15px;
    border: 1px solid var(--border); border-radius: 7px;
    background: var(--white); color: var(--text);
    font-weight: 600; font-size: .92rem; cursor: pointer;
}
.epd-size:hover { border-color: var(--text); }
.epd-size.sel { border-color: var(--text); background: var(--text); color: var(--bg); }
.epd-size.oos { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.epd-size.oos:hover { border-color: var(--border); }
/* Drawn around the sizes when the sticky bar's "Select size" sends the buyer back up. */
.epd-sizes.epd-pulse { animation: epd-pulse 1.2s ease; }
@keyframes epd-pulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    30%      { box-shadow: 0 0 0 6px var(--primary-light), 0 0 0 8px var(--primary); }
}

.epd-qty {
    display: flex; width: 158px; height: 48px; overflow: hidden;
    border: 1px solid var(--border); border-radius: 7px;
}
.epd-qty button {
    width: 48px; border: 0; cursor: pointer;
    background: var(--bg); color: var(--text); font-size: 1.25rem;
}
.epd-qty input {
    flex: 1; min-width: 0; border: 0; outline: 0;
    background: var(--white); color: var(--text);
    text-align: center; font-weight: 600;
}

.epd-actions { display: flex; gap: 10px; margin-bottom: 28px; }
.epd-actions > * { flex: 1; }
.epd-btn {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; min-height: 54px; padding: 0 1.25rem;
    border: 1px solid transparent; border-radius: 6px;
    font-weight: 700; font-size: .92rem; letter-spacing: .04em; text-transform: uppercase;
    text-decoration: none; cursor: pointer;
    transition: background .15s, opacity .15s;
}
.epd-btn:disabled { opacity: .45; cursor: not-allowed; }
.epd-btn--cart { background: var(--primary); border-color: var(--primary); color: #fff; }
.epd-btn--cart:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.epd-btn--buy { background: var(--text); border-color: var(--text); color: var(--bg); }
.epd-btn--buy:hover:not(:disabled) { opacity: .88; color: var(--bg); }

.epd-trust {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    padding: 19px 0;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.epd-trust-item { display: flex; align-items: center; gap: 9px; min-width: 0; }
.epd-trust-icon {
    flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--white); border: 1px solid var(--border);
    color: var(--primary); font-size: .9rem;
}
.epd-trust-copy { display: flex; flex-direction: column; min-width: 0; }
.epd-trust-copy strong { color: var(--text); font-size: .85rem; }
.epd-trust-copy span { color: var(--text-muted); font-size: .75rem; }

/* ── Sections under the hero ──────────────────────────────────────────── */
.epd-section { margin-top: 90px; }
.epd-section-title { margin-bottom: 34px; text-align: center; }
.epd-eyebrow {
    margin: 0; color: var(--primary);
    font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.epd-section-title h2 { margin: 7px 0 0; color: var(--text); font-size: 1.5rem; font-weight: 800; }

.epd-feature-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
/* Fewer than four cards: stay centred rather than leaving a hole on the right. */
.epd-feature-grid[data-count="1"] { grid-template-columns: minmax(0, 320px); justify-content: center; }
.epd-feature-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; }
.epd-feature-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.epd-feature {
    padding: 30px 24px; border-radius: 12px; text-align: center;
    background: var(--white); border: 1px solid var(--border);
}
.epd-feature-icon {
    width: 65px; height: 65px; margin: 0 auto; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg); border: 1px solid var(--border);
    color: var(--primary); font-size: 1.6rem;
}
.epd-feature h3 { margin: 18px 0 8px; color: var(--text); font-size: 1rem; font-weight: 700; }
.epd-feature p { margin: 0; color: var(--text-muted); line-height: 1.55; font-size: .9rem; }

/* ── Accordion ────────────────────────────────────────────────────────────
   Bootstrap themes its accordion from data-bs-theme; /e flips data-theme. So
   every colour is pinned to a token here, and the chevron (a dark SVG) is
   inverted by hand in dark mode. */
.epd-accordion {
    max-width: 1100px; margin: 0 auto;
    border-top: 1px solid var(--border);
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--text-muted);
    --bs-accordion-btn-color: var(--text);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-color: var(--text);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-border-color: var(--border);
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-btn-padding-y: 25px;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-focus-border-color: var(--border);
}
.epd-accordion .accordion-item {
    border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
    background: transparent;
    scroll-margin-top: 72px;          /* clear the fixed navbar when jumped to */
}
.epd-accordion .accordion-button {
    font-weight: 700; font-size: 1rem;
    background: transparent; box-shadow: none; border-radius: 0 !important;
}
.epd-accordion .accordion-button:not(.collapsed) { background: transparent; box-shadow: none; }
.epd-accordion .accordion-body { padding: 0 45px 28px 0; color: var(--text-muted); line-height: 1.7; }
.epd-accordion .accordion-body p:last-child,
.epd-accordion .accordion-body ul:last-child { margin-bottom: 0; }
.epd-accordion .accordion-body ul { padding-left: 1.2rem; }
.epd-accordion .epd-sizechart { display: block; max-width: 100%; height: auto; border-radius: 8px; background: #fff; }
html[data-theme="dark"] .epd-accordion .accordion-button::after { filter: invert(1) brightness(2); }

/* ── Mobile sticky bar ────────────────────────────────────────────────────
   Sits ON TOP of the /e bottom nav, not over it: bottom is the nav's height and
   the z-index is one below the nav's (999), so the navbar (1030), the search
   dropdown (1029) and the login modal all stay above it. The middle column is
   empty so the nav's centre button, which pokes up above the bar, overlaps
   nothing. */
.epd-sticky { display: none; }
@media (max-width: 767px) {
    .epd-sticky {
        position: fixed; left: 0; right: 0;
        bottom: calc(var(--epd-bn-h) + env(safe-area-inset-bottom, 0px));
        z-index: 998;
        display: grid; align-items: center; gap: 8px;
        grid-template-columns: minmax(0, 1fr) var(--epd-fab-gap) minmax(0, 1fr);
        min-height: var(--epd-sticky-h); padding: 8px 14px;
        background: var(--white);
        border-top: 1px solid var(--border);
        box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
        transition: transform .2s ease, visibility .2s;
    }
    .epd-sticky--nofab { grid-template-columns: minmax(0, 1fr) auto; }
    .epd-sticky--nofab .epd-sticky-gap { display: none; }
    .epd-sticky.epd-is-off { transform: translateY(130%); visibility: hidden; pointer-events: none; }
    .epd-sticky-info { display: flex; flex-direction: column; min-width: 0; }
    .epd-sticky-info span {
        color: var(--text-muted); font-size: .72rem;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .epd-sticky-info strong { color: var(--text); font-size: .95rem; }
    .epd-sticky .epd-btn { min-height: 46px; padding: 0 12px; font-size: .78rem; white-space: nowrap; }

    /* Room for the bar is reserved for as long as the bar exists, shown or not.
       Reserving it only while shown changes the page height as it appears, which
       makes the observer flip it on and off at the end of the page. */
    body.epd-has-sticky {
        padding-bottom: calc(108px + var(--epd-sticky-h) + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Lightbox ─────────────────────────────────────────────────────────────
   Above everything on the page, including the navbar (1030) and the login
   modal, because while it is open it IS the page. The images sit side by side
   in a scroll-snap track, so a swipe or a sideways scroll moves between them. */
.epd-image-wrap.epd-zoomable { cursor: zoom-in; }
.epd-image-wrap.epd-zoomable:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

body.epd-lb-open { overflow: hidden; }

.epd-lb {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(8, 10, 14, .94);
    display: flex; align-items: stretch; justify-content: center;
}
.epd-lb-track {
    display: flex; width: 100%; height: 100%;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;      /* a swipe past the last image must not drag the page */
    scrollbar-width: none;
    outline: none;
}
.epd-lb-track::-webkit-scrollbar { display: none; }
.epd-lb-slide {
    flex: 0 0 100%; width: 100%; height: 100%;
    scroll-snap-align: center; scroll-snap-stop: always;
    display: flex; align-items: center; justify-content: center;
    padding: 64px 72px;
}
.epd-lb-slide img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;                  /* product photos are cut out on white */
    user-select: none; -webkit-user-drag: none;
}

.epd-lb-close,
.epd-lb-nav {
    position: absolute; z-index: 2;
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .12); color: #fff;
    font-size: 1.1rem; cursor: pointer;
    transition: background .15s, opacity .15s;
}
.epd-lb-close:hover,
.epd-lb-nav:hover:not(:disabled) { background: rgba(255, 255, 255, .26); }
.epd-lb-close:focus-visible,
.epd-lb-nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.epd-lb-close { top: 14px; right: 14px; }
.epd-lb-nav { top: 50%; transform: translateY(-50%); }
.epd-lb-prev { left: 14px; }
.epd-lb-next { right: 14px; }
.epd-lb-nav:disabled { opacity: .25; cursor: default; }

.epd-lb-count {
    position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%);
    padding: 5px 14px; border-radius: 99px;
    background: rgba(255, 255, 255, .14); color: #fff;
    font-size: .8rem; font-weight: 600; letter-spacing: .04em;
}

@media (max-width: 767px) {
    .epd-lb-slide { padding: 60px 12px; }
    /* On a phone the finger does the moving; the arrows would only cover the picture. */
    .epd-lb-nav { display: none; }
}

/* ── Breakpoints (the template's) ─────────────────────────────────────── */
@media (max-width: 991px) {
    .epd-main { gap: 35px; }
    .epd-feature-grid,
    .epd-feature-grid[data-count="3"] { grid-template-columns: repeat(2, 1fr); }
    .epd-trust { grid-template-columns: 1fr; }
    .epd-actions { flex-direction: column; }
}
@media (max-width: 767px) {
    .epd-main { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .epd-thumb { flex-basis: 62px; width: 62px; height: 62px; }
    .epd-trust { grid-template-columns: repeat(3, 1fr); }
    .epd-trust-item { display: block; text-align: center; }
    .epd-trust-icon { margin: 0 auto 7px; }
    .epd-trust-copy { align-items: center; }
    .epd-section { margin-top: 65px; }
    .epd-feature-grid { gap: 10px; }
    .epd-feature-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
    .epd-feature-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
    .epd-feature { padding: 22px 12px; }
    .epd-accordion .accordion-body { padding-right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .epd-image-wrap img, .epd-sticky, .epd-btn { transition: none; }
    .epd-sizes.epd-pulse { animation: none; }
}

/* ── Share (with Share & Earn) ─────────────────────────────────────────── */
.epd-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.epd-share-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--white); color: var(--text);
    font-weight: 600; font-size: .88rem; cursor: pointer;
}
.epd-share-btn:hover { border-color: var(--primary); color: var(--primary); }
.epd-share-earn { font-size: .82rem; font-weight: 600; color: var(--success); }
.epd-share-join { font-size: .82rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.epd-share-join:hover { text-decoration: underline; }