/**
 * Homepage — "Everything we filmed"
 *
 * A row of tilted clip cards on desktop, a scattered stack of three on mobile,
 * both per the delivered prototypes. Card widths and media ratios are held as
 * proportions rather than the prototype's pixel values so the collage keeps its
 * arrangement between 1024px and 1920px.
 *
 * @package Qatarshoes
 * @since 3.2.0
 */

/* A spacer left standing above a hidden section would be a gap with nothing
   on either side of it. */
.tiktok-section[style*="display: none"] + .tiktok-section-spacer {
    display: none;
}

/* The gap to Featured Edit, taken on its own top edge.
 *
 * Padding, not margin, and matching that section's own mechanism: its rule
 * says "separation from the sections above and below comes from the vertical
 * padding", and its desktop `padding: 24px 46px 24px 56px` shorthand resets any
 * top padding — so the gap has to be stated after it, with a selector that
 * outranks it (.page-homepage … = three classes, against its two).
 *
 * Wider than the 72px between other sections on purpose: the cards are dropped
 * down the row by up to 76px and tilted, so the lowest one hangs well below the
 * row's baseline and eats most of a standard gap. */
.page-homepage .tiktok-section-spacer + .featured-edit-section {
    padding-top: 120px;
}

.tiktok-section {
    background-color: #FFFFFF;

    /* The horizontal padding lives on the section itself, exactly like
       .best-sellers-products-container, so both sections put their content on
       the same left and right lines. */
    box-sizing: border-box;
    max-width: 100%;

    /* Rotated cards and their shadows reach a little past their layout boxes;
       clip that overhang rather than letting it add a horizontal scrollbar to
       the page. `clip` rather than `hidden` so nothing here can become a
       scroll container. */
    overflow-x: clip;
}

@media (min-width: 1024px) and (max-width: 1979px) {
    .tiktok-section {
        padding: 0 40px;
    }
}

@media (max-width: 1023px) {
    .tiktok-section {
        padding: 0 15px;
    }
}

/* Vertical rhythm only; the sides are the section's job now. */
.tiktok-section-inner {
    padding: 40px 0 60px;
    box-sizing: border-box;
    max-width: 100%;
}

.tiktok-section-eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9A928B;
}

.tiktok-section .showcase-section-heading-row {
    margin-bottom: 34px;
}

/* Carries the shared .section-mobile-view-more styling on a button, since this
   one opens the collection rather than following a link. Width and spacing are
   left to the shared rule so it sits exactly like the other sections' — it is
   a block inside the section's own padding. */
button.section-mobile-view-more {
    border: 0;
    width: 100%;
    font: inherit;
    color: #fff;
    cursor: pointer;
}

/* ── collage ─────────────────────────────────────────────── */

.tiktok-collage {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    padding: 0 8px 6px;

    /* Cards run from the left in their own order. Only a full row spreads
       across the container — with two clips, spreading would put one at each
       end of the screen instead of side by side. */
    justify-content: flex-start;
}

.tiktok-collage[data-count="5"] {
    justify-content: space-between;
}

/* js/homepage-tiktok.js marks the collage [data-reveal] once it is watching,
   and [data-revealed] when the section has been reached. Both live here rather
   than on the cards, so a page without that script — or one asking for reduced
   motion — never hides them in the first place. */

.tiktok-card {
    /* Shrinks below the cap so the fixed 26px gaps can never push the row
       wider than its container. */
    flex: 0 1 auto;
    min-width: 0;
    background: #fff;
    padding: 11px 11px 16px;
    box-shadow: 0 8px 26px rgba(43, 35, 32, 0.16);
    position: relative;

    /* Set per card below; the tilt is applied through a variable so the
       hover and scroll-in transforms can compose with it. */
    --tiktok-tilt: 0deg;
    --tiktok-lift: 0px;
    --tiktok-drop: 0px;

    transform: translateY(calc(var(--tiktok-drop) + var(--tiktok-lift))) rotate(var(--tiktok-tilt));
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Proportions taken from the desktop prototype: five cards of unequal width,
   each dropped down the row by a different amount. */
/* clamp keeps each card between a readable minimum and a little above its
   drawn size; the percentage in the middle is the prototype's proportion. */
.tiktok-card:nth-child(1) { width: clamp(150px, 20.06%, 292px); --tiktok-tilt: -4deg; --tiktok-drop: 34px; }
/* 0px, not 0: these feed calc(var(--tiktok-drop) + var(--tiktok-lift)), and a
   unitless zero makes that calc invalid — which drops the whole transform, so
   the card loses its tilt and its offset. */
.tiktok-card:nth-child(2) { width: clamp(138px, 18.46%, 269px); --tiktok-tilt: 4deg;  --tiktok-drop: 0px; }
.tiktok-card:nth-child(3) { width: clamp(126px, 16.85%, 245px); --tiktok-tilt: -2deg; --tiktok-drop: 76px; }
.tiktok-card:nth-child(4) { width: clamp(142px, 18.94%, 276px); --tiktok-tilt: 3deg;  --tiktok-drop: 16px; }
.tiktok-card:nth-child(5) { width: clamp(130px, 17.33%, 252px); --tiktok-tilt: -3deg; --tiktok-drop: 60px; }

/* ── hover: pick the photo up ────────────────────────────────
   A scattered pile of polaroids invites one gesture — lifting a print out of
   the pile to look at it straight. So the hovered card straightens to level,
   rises, deepens its shadow and eases its image forward, while the others fall
   back a little. That says "this is the one you are about to open", which a
   gust of wind never did.

   Everything here is transform and opacity, so it stays on the compositor and
   the layout never moves. */

.tiktok-card {
    --tiktok-hover-rot: var(--tiktok-tilt);
    --tiktok-hover-scale: 1;

    /* The cards sit where they belong from the start — they arrive by fading in,
       not by sliding into place. Hover is the only thing that moves them. */
    transform:
        translateY(calc(var(--tiktok-drop) + var(--tiktok-lift)))
        rotate(var(--tiktok-hover-rot))
        scale(var(--tiktok-hover-scale));
    transition:
        transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.35s ease;
}

/* ── arriving ────────────────────────────────────────────────
   Each card waits its turn and then fades up into place. The delay is the only
   thing that differs between them, so they arrive one after another rather
   than together — and because it is a transition rather than a scrub, a card
   that has started always finishes, whatever the scroll does next. */

.tiktok-collage[data-reveal] .tiktok-card {
    opacity: 0;
    --tiktok-lift: 18px;
    transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The queue's delay belongs to the arrival and nothing else. A transition takes
   its timing from the state it is heading into, so this is where the wait has
   to be declared — and why it must be cleared again for hover below, or the
   fifth card would sit still for half a second before answering the cursor. */
.tiktok-collage[data-reveal][data-revealed] .tiktok-card {
    opacity: 1;
    --tiktok-lift: 0px;
    transition-delay: calc(var(--tiktok-seq, 0) * 0.13s);
}

/* Leaving arms it again for the next visit; going back out should simply stop,
   not run the queue backwards. */
.tiktok-collage[data-reveal]:not([data-revealed]) .tiktok-card {
    transition-duration: 0.2s;
}

/* The order they arrive in — first to last, left to right. */
.tiktok-card:nth-child(1) { --tiktok-seq: 0; }
.tiktok-card:nth-child(2) { --tiktok-seq: 1; }
.tiktok-card:nth-child(3) { --tiktok-seq: 2; }
.tiktok-card:nth-child(4) { --tiktok-seq: 3; }
.tiktok-card:nth-child(5) { --tiktok-seq: 4; }

/* Right to left in Arabic, so the sequence still runs from the side the
   reading starts on. */
html[dir="rtl"] .tiktok-card:nth-child(1) { --tiktok-seq: 4; }
html[dir="rtl"] .tiktok-card:nth-child(2) { --tiktok-seq: 3; }
html[dir="rtl"] .tiktok-card:nth-child(4) { --tiktok-seq: 1; }
html[dir="rtl"] .tiktok-card:nth-child(5) { --tiktok-seq: 0; }

/* The lift shadow rides on its own layer: fading a ready-made shadow in costs
   nothing to paint, where animating box-shadow repaints every frame. */
.tiktok-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    box-shadow: 0 26px 50px rgba(43, 35, 32, 0.28);
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.tiktok-card-media {
    /* The image easing forward inside its frame — the frame itself never
       changes size, so nothing around it shifts. */
    overflow: hidden;
}

.tiktok-card-video,
.tiktok-card-media img {
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
    .tiktok-section .tiktok-collage .tiktok-card:hover,
    .tiktok-section .tiktok-collage .tiktok-card:focus-within {
        /* Straightened, lifted, and a hair larger. */
        --tiktok-hover-rot: 0deg;
        --tiktok-hover-scale: 1.035;
        --tiktok-lift: -14px;
        z-index: 2;

        /* Every card answers at the same speed: the queue's wait is for
           arriving, not for being pointed at. */
        transition:
            transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
            opacity 0.35s ease;
        transition-delay: 0s;
    }

    .tiktok-section .tiktok-collage .tiktok-card:hover::before,
    .tiktok-section .tiktok-collage .tiktok-card:focus-within::before {
        opacity: 1;
    }

    .tiktok-section .tiktok-collage .tiktok-card:hover .tiktok-card-video,
    .tiktok-section .tiktok-collage .tiktok-card:focus-within .tiktok-card-video {
        transform: scale(1.06);
    }

    /* The rest of the pile steps back, so the raised one reads as chosen
       rather than merely bigger. */
    .tiktok-section .tiktok-collage:hover .tiktok-card:not(:hover) {
        opacity: 0.62;

        /* The rest step back at that same speed, rather than each waiting out
           its own place in the queue. */
        transition:
            transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
            opacity 0.35s ease;
        transition-delay: 0s;
    }
}

.tiktok-card-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: start;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.tiktok-card-media {
    display: block;
    background: #EDE8E3;
    overflow: hidden;
    aspect-ratio: 250 / 300;
}

.tiktok-card:nth-child(2) .tiktok-card-media { aspect-ratio: 230 / 330; }
.tiktok-card:nth-child(3) .tiktok-card-media { aspect-ratio: 210 / 250; }
.tiktok-card:nth-child(4) .tiktok-card-media { aspect-ratio: 236 / 290; }
.tiktok-card:nth-child(5) .tiktok-card-media { aspect-ratio: 216 / 262; }

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

.tiktok-card-body {
    display: block;
    padding-top: 11px;
}

.tiktok-card-name {
    display: block;
    font-size: 14px;
    line-height: 1.35;
    color: #2B2320;
}

.tiktok-card-price {
    display: block;
    font-size: 14px;
    color: #9A928B;
}

/* Every card is taped down. The strip sits at a slightly different spot on
   each one so the row looks stuck up by hand rather than stamped. */
.tiktok-card::after {
    content: '';
    position: absolute;
    top: -11px;
    left: 35%;
    width: 76px;
    height: 22px;
    background: rgba(212, 188, 170, 0.8);
    pointer-events: none;
    /* Pinned along the edge that holds it to the card. */
    transform-origin: 50% 100%;
}

.tiktok-card:nth-child(1)::after { left: 32%; }
.tiktok-card:nth-child(2)::after { left: 39%; }
.tiktok-card:nth-child(3)::after { left: 29%; }
.tiktok-card:nth-child(4)::after { left: 42%; }
.tiktok-card:nth-child(5)::after { left: 34%; }

/* ── RTL ─────────────────────────────────────────────────── */

html[dir="rtl"] .tiktok-collage {
    flex-direction: row-reverse;
}

html[dir="rtl"] .tiktok-card:nth-child(1) { --tiktok-tilt: 4deg; }
html[dir="rtl"] .tiktok-card:nth-child(2) { --tiktok-tilt: -4deg; }
html[dir="rtl"] .tiktok-card:nth-child(3) { --tiktok-tilt: 2deg; }
html[dir="rtl"] .tiktok-card:nth-child(4) { --tiktok-tilt: -3deg; }
html[dir="rtl"] .tiktok-card:nth-child(5) { --tiktok-tilt: 3deg; }

html[dir="rtl"] .tiktok-card::after {
    left: auto;
    right: 35%;
}

html[dir="rtl"] .tiktok-card:nth-child(1)::after { right: 32%; }
html[dir="rtl"] .tiktok-card:nth-child(2)::after { right: 39%; }
html[dir="rtl"] .tiktok-card:nth-child(3)::after { right: 29%; }
html[dir="rtl"] .tiktok-card:nth-child(4)::after { right: 42%; }
html[dir="rtl"] .tiktok-card:nth-child(5)::after { right: 34%; }

/* ── mobile ──────────────────────────────────────────────── */

@media (max-width: 1023px) {
    .tiktok-section-inner {
        /* The gap to the next section is the shared spacer, not padding here. */
        padding: 6px 0 12px;
    }

    /* Featured Edit also flattens the spacer directly above it on phones
       (featured-edit.css: "the image is its own separation"), which was
       written for when it sat under New Arrivals. Putting the gap on its own
       top rather than fighting that rule keeps it off :has() and stops the two
       stacking. Slightly tighter than desktop, since the section opens with a
       full-bleed image. */
    .page-homepage .tiktok-section-spacer + .featured-edit-section {
        padding-top: 56px;
    }

    .tiktok-section-eyebrow {
        padding-top: 20px;
    }

    .tiktok-section .showcase-section-heading-row {
        margin-bottom: 16px;
    }

    /* Three cards scattered inside a fixed stage, per the mobile prototype.
       The stage keeps its drawn proportion instead of a pixel height so the
       arrangement holds from a small phone up to a tablet. */
    .tiktok-collage {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        /* Taller than the drawn 347/470 because a real two-line product name
           needs more room than the prototype's one-liners — but only as much
           as the three cards actually occupy. At 560 the stage was half empty
           and the cards had grown to fill it, colliding with each other. */
        aspect-ratio: 347 / 430;
        overflow: visible;
        margin-bottom: 8px;
    }

    .tiktok-card {
        position: absolute;
        width: auto;
        padding: 8px 8px 12px;
        box-shadow: 0 6px 18px rgba(43, 35, 32, 0.16);
    }

    /* Anything past the third card is desktop-only. */
    .tiktok-card:nth-child(n + 4) {
        display: none;
    }

    /* Widths that leave the two columns clear of each other: 1 and 3 keep to
       the leading side, 2 to the trailing one, with room either side for the
       tilt, which swings a rotated card several pixels past its own box. */
    .tiktok-card:nth-child(1) {
        left: 2%;
        top: 0;
        width: 38%;
        --tiktok-tilt: -4deg;

        /* Declared outright here: the desktop drop for this card has the
           same specificity and comes earlier in the file, so a blanket rule
           would not clear it and the card would sit that far out of place. */
        --tiktok-drop: 0px;
    }

    /* Anchored from the bottom, not the top: a card measured from its top edge
       grows downward when its caption wraps, and the tallest one was reaching
       past the stage into the button below it. Anchored this way, extra height
       goes upward into the empty space instead. */
    .tiktok-card:nth-child(2) {
        left: auto;
        right: 4%;
        top: auto;
        bottom: 12%;
        width: 34%;
        --tiktok-tilt: 5deg;

        /* Declared outright here: the desktop drop for this card has the
           same specificity and comes earlier in the file, so a blanket rule
           would not clear it and the card would sit that far out of place. */
        --tiktok-drop: 0px;
    }

    /* Lifted clear of the bottom edge: its shadow spills ~18px past the card,
       and the button sits directly under the stage. */
    .tiktok-card:nth-child(3) {
        left: 7%;
        top: auto;
        bottom: 2%;
        width: 29%;
        --tiktok-tilt: 3deg;

        /* Declared outright here: the desktop drop for this card has the
           same specificity and comes earlier in the file, so a blanket rule
           would not clear it and the card would sit that far out of place. */
        --tiktok-drop: 0px;
    }

    .tiktok-card:nth-child(1) .tiktok-card-media { aspect-ratio: 164 / 160; }
    .tiktok-card:nth-child(2) .tiktok-card-media { aspect-ratio: 150 / 212; }
    .tiktok-card:nth-child(3) .tiktok-card-media { aspect-ratio: 124 / 118; }

    .tiktok-card-name,
    .tiktok-card-price {
        font-size: 13px;
    }

    .tiktok-card-name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .tiktok-card-body {
        padding-top: 8px;
    }

    .tiktok-card::after {
        top: -9px;
        width: 60px;
        height: 18px;
    }

    /* Centred and only as wide as its label, the way the mobile prototype draws
       it — the full-width bar the other sections use would sit oddly under a
       loose scatter of polaroids. Height, radius and colour still come from the
       shared rule. */
    button.section-mobile-view-more {
        width: fit-content;
        min-width: 190px;
        margin-inline: auto;
        margin-top: 28px;
        padding: 0 34px;
        /* Above the polaroids' shadows, which spill past their boxes. */
        position: relative;
        z-index: 1;
    }

    /* Mirrored scatter so the composition reads the same in Arabic. */
    html[dir="rtl"] .tiktok-card:nth-child(1) { left: auto; right: 1.2%; --tiktok-tilt: 4deg; }
    html[dir="rtl"] .tiktok-card:nth-child(2) { right: auto; left: 0.6%; --tiktok-tilt: -5deg; }
    html[dir="rtl"] .tiktok-card:nth-child(3) { left: auto; right: 9.8%; --tiktok-tilt: -3deg; }
}

/* ── reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    /* No fanning out: the row is simply already scattered. */
    /* Nothing arrives: the cards are simply there. */
    .tiktok-collage[data-reveal] .tiktok-card,
    .tiktok-card {
        --tiktok-lift: 0px;
        opacity: 1;
        transition: none;
    }

    /* No lift, no straightening, no zoom — only the shadow marks the card,
       and the rest of the row is left alone. */
    .tiktok-section .tiktok-collage .tiktok-card:hover,
    .tiktok-section .tiktok-collage .tiktok-card:focus-within {
        --tiktok-hover-rot: var(--tiktok-tilt);
        --tiktok-hover-scale: 1;
        --tiktok-lift: 0px;
    }

    .tiktok-section .tiktok-collage .tiktok-card:hover .tiktok-card-video,
    .tiktok-section .tiktok-collage .tiktok-card:focus-within .tiktok-card-video {
        transform: none;
    }

    .tiktok-section .tiktok-collage:hover .tiktok-card:not(:hover) {
        opacity: 1;
    }
}