/**
 * "Everything we filmed" — product view
 *
 * Modal on desktop, bottom sheet on mobile. Opens over the collection with its
 * own veil; the collection stays where it was underneath.
 *
 * @package Qatarshoes
 * @since 3.2.0
 */

.tiktok-sheet-root {
    position: fixed;
    inset: 0;
    z-index: 9600;
    visibility: hidden;
}

.tiktok-sheet-root.is-open {
    visibility: visible;
}

.tiktok-sheet-veil {
    position: absolute;
    inset: 0;
    background: rgba(20, 15, 13, 0.55);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tiktok-sheet-root.is-open .tiktok-sheet-veil {
    opacity: 1;
}

/* ── shell ───────────────────────────────────────────────── */

.tiktok-sheet {
    position: absolute;
    background: #fff;
    display: flex;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(20, 15, 13, 0.35);

    /* Desktop: a centred modal, media beside the detail. The height follows the
       media rather than being fixed — a 9:16 clip and a square product photo
       want very different frames, and a fixed one letterboxes whichever it was
       not drawn for. */
    inset-inline-start: 50%;
    top: 50%;
    transform: translate(-50%, -46%);
    width: min(1020px, calc(100vw - 60px));
    height: auto;
    min-height: 580px;
    max-height: calc(100vh - 72px);
    border-radius: 14px;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.2, 0.86, 0.24, 1), opacity 0.3s ease;
}

html[dir="rtl"] .tiktok-sheet {
    transform: translate(50%, -46%);
}

.tiktok-sheet-root.is-open .tiktok-sheet {
    opacity: 1;
    transform: translate(-50%, -50%);
}

html[dir="rtl"] .tiktok-sheet-root.is-open .tiktok-sheet {
    transform: translate(50%, -50%);
}

/* ── media ───────────────────────────────────────────────── */

.tiktok-sheet-media {
    position: relative;
    flex: 0 0 45%;
    /* Hard cap: with an aspect-ratio set, a wide frame would otherwise pull the
       panel past its share and crush the detail column next to it. */
    max-width: 45%;
    /* White, not a tint: a fitted photo leaves the panel visible around it, and
       product shots already sit on white. */
    background: #fff;

    /* The product photo's shape, read as it loads. The clip is cropped into
       the same frame rather than bringing its own. */
    aspect-ratio: var(--tiktok-media-ratio, 3 / 4);
    max-height: calc(100vh - 72px);
}

.tiktok-sheet-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Product shots carry their own margins, so they are fitted rather than
   cropped — the panel is already their shape. */
.tiktok-sheet-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.tiktok-sheet-video[hidden],
.tiktok-sheet-photo[hidden] {
    display: none;
}

/* Sits low over the media, clear of the product itself. */
.tiktok-sheet-switch {
    position: absolute;
    bottom: 18px;
    inset-inline-start: 18px;
    display: flex;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    box-shadow: 0 4px 14px rgba(43, 35, 32, 0.16);
}

.tiktok-sheet-switch button {
    border: 0;
    background: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6E6259;
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.tiktok-sheet-switch button.is-active {
    background: #2E211C;
    color: #fff;
}

/* ── detail ──────────────────────────────────────────────── */

.tiktok-sheet-detail {
    flex: 1;
    /* Enough room for the name, price and buttons whatever the media does. */
    min-width: 320px;
    padding: 30px 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;

    /* This column carries everything the product page's right-hand side does,
       so on a short screen it is the part that runs out of room. It scrolls
       instead of being clipped by the sheet's own overflow.

       min-height: 0 undoes a flex item's automatic minimum, which otherwise
       holds the column open at its full content height and leaves nothing to
       scroll — that is what was cutting the description off. The explicit cap
       repeats the sheet's own, since a percentage height has nothing definite
       to resolve against here. */
    min-height: 0;
    max-height: calc(100vh - 72px);
    overflow-y: auto;

    /* Reaching the end of the column should not start scrolling the page
       behind the sheet. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Nothing in this column may be squeezed. Letting it scroll (min-height: 0
   above) also lets flexbox shrink its children to make them fit, and a block
   with overflow: hidden — the description — collapses to nothing at all. The
   column scrolls; its contents keep their own height. */
.tiktok-sheet-detail > * {
    flex: 0 0 auto;
}

/* No scroller of its own: the whole column scrolls, and a second scrollbar
   inside it only splits the gesture in two. The row takes whatever height its
   pieces need and the column carries it. */

/* The bar to pull on, and the only way out on a phone: the photo's two corners
   are already taken by the wishlist and the link to the product page, and the
   round close sits underneath the wishlist at this width. Desktop keeps the
   close and never shows this. */
.tiktok-sheet-grip {
    display: none;
    width: 100%;
    padding: 10px 0 6px;
    border: 0;
    background: none;
    cursor: grab;

    /* The browser must not claim the downward drag for its own scroll. */
    touch-action: none;
}

.tiktok-sheet-grip-bar {
    display: block;
    width: 42px;
    height: 4px;
    margin: 0 auto;
    border-radius: 2px;
    background: #D8D0C9;
}

.tiktok-sheet-close {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    /* The heart holds the photo's corner; this one belongs to the sheet. */
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #E4DED8;
    background: #fff;
    color: #2B2320;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.tiktok-sheet-name {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: #2B2320;
}

.tiktok-sheet-price {
    font-size: 18px;
    color: #2B2320;
}

.tiktok-sheet-price .compare-price {
    margin-inline-start: 10px;
    font-size: 14px;
    color: #9A928B;
    text-decoration: line-through;
}

/* ── delivery lines ──────────────────────────────────────── */

/* The block itself is styled by assets/css/components/product-shipping-info.css,
   the same file the product page loads. Only its spacing in the sheet, and the
   dropdown's need to stay inside a shorter panel, belong here. */

.tiktok-sheet .shipping-info {
    margin: 4px 0 0;
}

.tiktok-sheet .shipping-info[hidden] {
    display: none;
}

/* The product page has a whole page to drop this into; here it has to stay
   within the sheet. */
.tiktok-sheet .shipping-city-dropdown {
    max-height: 210px;
}

/* ── product row ─────────────────────────────────────────── */

.tiktok-sheet-strip[hidden] {
    display: none;
}

/* Desktop wraps rather than scrolls: the detail column has height to spare,
   and a colour hidden off the right edge is a colour nobody buys. */
.tiktok-sheet-strip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 6px;
}

.tiktok-sheet-item {
    flex: none;
    width: 128px;
    border: 1px solid #E9E3DD;
    border-radius: 10px;
    background: #fff;
    padding: 8px;
    cursor: pointer;
    text-align: start;
    scroll-snap-align: start;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tiktok-sheet-item:hover {
    border-color: #C7A97B;
}

.tiktok-sheet-item.is-selected {
    border-color: #2E211C;
    box-shadow: 0 0 0 1px #2E211C inset;
}

.tiktok-sheet-item-photo {
    width: 100%;
    height: 96px;
    object-fit: contain;
    background: #F7F5F3;
    border-radius: 6px;
    display: block;
}

.tiktok-sheet-item-label {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.35;
    color: #2B2320;
}

/* Two lines, then an ellipsis: a long colour name must not push the card into
   a column of single words. */
.tiktok-sheet-item-label span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tiktok-sheet-item-dot {
    margin-top: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
    border: 1px solid rgba(43, 35, 32, 0.12);
}

.tiktok-sheet-item-price {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #9A928B;
}

/* Sold out, matching the swatch treatment used across the site. */
.tiktok-sheet-item.is-unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    position: relative;
}

.tiktok-sheet-item.is-unavailable::before {
    content: '';
    position: absolute;
    top: 42px;
    left: -2px;
    right: -2px;
    height: 2px;
    background: #999;
    transform: rotate(-20deg);
    pointer-events: none;
}

/* ── size and quantity ───────────────────────────────────── */

/* The product page's own controls (product-page.css), scoped here — that
   stylesheet is not loaded on the home page. */
.tiktok-sheet-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2d1f1f;
    margin-bottom: 8px;
}

.tiktok-sheet-sizes[hidden] {
    display: none;
}

/* The size buttons come from assets/css/components/product-size-selector.css,
   the product page's own rules. */

.tiktok-sheet-qty-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tiktok-sheet-qty-controls button {
    width: 40px;
    height: 40px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
    color: #2d1f1f;
    font-size: 16px;
    cursor: pointer;
}

.tiktok-sheet-qty-controls button:active {
    background: #f5f5f5;
}

.tiktok-sheet-qty-controls input {
    width: 56px;
    height: 40px;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    color: #2d1f1f;
    -moz-appearance: textfield;
}

.tiktok-sheet-qty-controls input::-webkit-inner-spin-button,
.tiktok-sheet-qty-controls input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── actions ─────────────────────────────────────────────── */

.tiktok-sheet-note {
    font-size: 13px;
    line-height: 1.5;
    color: #6E6259;
}

.tiktok-sheet-note[hidden] {
    display: none;
}

.tiktok-sheet-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 8px;
}

/* The product page's own buttons, copied so a clip and a product page offer
   the same two controls: #add-to-cart is the outline, #buy-now the solid one
   (assets/css/product-page.css). */
.tiktok-sheet-add,
.tiktok-sheet-buy {
    box-sizing: border-box;
    height: 56px;
    border-radius: 900px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.2s;
}

.tiktok-sheet-add {
    width: 100%;
    padding: 0 15px;
    background: transparent;
    border: 1px solid var(--color-primary, #2d1f1f);
    color: var(--color-primary, #2d1f1f);
    font-weight: 600;
}

@media (hover: hover) {
    .tiktok-sheet-add:hover:not(:disabled) {
        background: var(--color-primary, #2d1f1f);
        color: #fff;
    }
}

.tiktok-sheet-buy {
    width: 100%;
    padding: 0 18px;
    background: #2d1f1f;
    border: none;
    color: #fff;
    font-weight: 700;
}

.tiktok-sheet-buy:hover:not(:disabled) {
    background: #1a1212;
}

.tiktok-sheet-add:disabled {
    background: #f5f5f5;
    border-color: #ccc;
    color: #999;
    cursor: not-allowed;
}

.tiktok-sheet-buy:disabled {
    background: #e5e5e5;
    color: #999;
    cursor: not-allowed;
}

/* Same spinner the product page shows while the cart call is in flight. */
.tiktok-sheet-add.is-loading,
.tiktok-sheet-buy.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.tiktok-sheet-add.is-loading::after,
.tiktok-sheet-buy.is-loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: tiktok-sheet-spin 0.8s linear infinite;
}

.tiktok-sheet-add.is-loading::after {
    border-color: var(--color-primary, #2d1f1f);
    border-top-color: transparent;
}

@keyframes tiktok-sheet-spin {
    to { transform: rotate(360deg); }
}

/* Over the photo's top corner rather than beside the buttons, the way the
   wishlist heart sits on every product card. */
/* Leading corner of the photo, mirroring the heart on the other side. Shown
   only on phones, where the sheet is the whole screen and there is no other
   route to the product page. */
.tiktok-sheet-open {
    display: none;
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    z-index: 2;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 4px rgba(43, 35, 32, 0.16);
    border-radius: 50%;
    color: #2d1f1f;
    text-decoration: none;
    transition: all 0.2s;
}

/* The arrow points away from the reader in either direction. */
html[dir="rtl"] .tiktok-sheet-open svg {
    transform: scaleX(-1);
}

.tiktok-sheet-wish {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 4px rgba(43, 35, 32, 0.16);
    border-radius: 50%;
    cursor: pointer;
    color: #2d1f1f;
    font-size: 16px;
    line-height: 1;
    transition: all 0.2s;
}

.tiktok-sheet-wish:hover {
    background: #fff;
}

.tiktok-sheet-wish.is-active {
    color: #b32d2e;
    border-color: #b32d2e;
}

/* ── mobile: bottom sheet ────────────────────────────────── */

@media (max-width: 1023px) {
    .tiktok-sheet {
        inset-inline-start: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        /* Reset the desktop minimum: 580px is taller than a small phone, which
           made the sheet fill the screen and pushed the detail out of sight. */
        min-height: 0;

        /* Full height, held down by a transform rather than sized short of the
           top. Moving between the two heights is then a transform the
           compositor animates on its own — changing max-height instead laid the
           whole sheet out again on every frame, which is what made it stutter.

           dvh where it is supported, since a phone browser's own bars come and
           go and vh does not notice. */
        --tiktok-sheet-offset: 84px;
        --tiktok-sheet-drag: 0px;

        height: calc(100vh - 12px);
        height: calc(100dvh - 12px);
        max-height: none;

        border-radius: 16px 16px 0 0;
        flex-direction: column;
        transform: translateY(100%);
        transition:
            transform 0.46s cubic-bezier(0.32, 0.72, 0, 1),
            opacity 0.25s ease;
    }

    /* Open: down by the offset for its resting height, plus whatever a finger
       is currently pulling. Both in one transform, so a drag never fights the
       height it is being dragged from. */
    .tiktok-sheet-root.is-open .tiktok-sheet,
    html[dir="rtl"] .tiktok-sheet-root.is-open .tiktok-sheet {
        transform: translateY(calc(var(--tiktok-sheet-offset) + var(--tiktok-sheet-drag)));
    }

    .tiktok-sheet-root.is-full .tiktok-sheet {
        --tiktok-sheet-offset: 0px;
    }

    /* The offset hangs that much of the sheet below the screen, so the column
       ends above it rather than in the part nobody can see. Moves in step with
       the sheet. */
    .tiktok-sheet-detail {
        padding-bottom: calc(24px + var(--tiktok-sheet-offset));
    }

    html[dir="rtl"] .tiktok-sheet {
        transform: translateY(100%);
    }


    .tiktok-sheet-media {
        flex: none;
        width: 100%;
        max-width: none;
        height: 42vh;
        min-height: 0;
        max-height: none;
        aspect-ratio: auto;
    }

    /* The panel is a fixed slice of the screen here rather than the photo's
       shape, so the photo fills it instead of leaving bands. */
    .tiktok-sheet-photo {
        object-fit: cover;
    }

    .tiktok-sheet-switch {
        bottom: 14px;
        inset-inline-start: 14px;
    }

    .tiktok-sheet-grip {
        display: block;
        flex: none;
    }

    /* The column carries the drag that closes the sheet, so the browser must
       not claim it — but only downwards; pan-y leaves its own scrolling alone. */
    .tiktok-sheet-detail {
        touch-action: pan-y;
    }

    /* Covered by the wishlist at this width — the grip above replaces it. */
    .tiktok-sheet-close {
        display: none;
    }


    .tiktok-sheet-open {
        display: flex;
    }

    .tiktok-sheet-detail {
        padding: 20px 18px 24px;
        gap: 12px;
        min-width: 0;

        /* A column here, so the media takes its 42vh and this takes the rest of
           the 92vh, scrolling within it. Without the zero minimum the column
           stands at its full content height and everything past the buttons —
           the description and delivery tabs — is simply cut off. */
        min-height: 0;
        max-height: none;
    }

    .tiktok-sheet-name {
        font-size: 20px;
    }

    .tiktok-sheet-actions {
        padding-top: 4px;
    }


    /* One row that scrolls sideways, with the trailing card faded so it reads
       as scrollable rather than cut off. Sideways, so it is not a second
       vertical scroll inside the column — it is the row itself. */
    .tiktok-sheet-strip-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
    }

    html[dir="rtl"] .tiktok-sheet-strip-row {
        mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent);
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent);
    }

    .tiktok-sheet-strip-row::-webkit-scrollbar {
        display: none;
    }
}

/* ── description ───────────────────────────────── */

/* The block itself — tabs, panels, delivery footer — is styled by
   assets/css/components/product-description.css, the same file the product page
   loads. Only where it sits inside the sheet belongs here. */

.tiktok-sheet-desc {
    margin-top: 8px;
    overflow: hidden;
    max-width: 100%;
}

.tiktok-sheet-desc[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .tiktok-sheet,
    .tiktok-sheet-veil {
        transition: opacity 0.15s ease;
        transform: translate(-50%, -50%);
    }

    @media (max-width: 1023px) {
        .tiktok-sheet {
            transform: translateY(0);
        }
    }
}