/**
 * "Everything we filmed" — the full clip grid
 *
 * Slides up over the home page rather than navigating away, so the shopper
 * keeps their place, and stops at the bottom edge of the header instead of
 * covering it — the home page's own dark header on desktop, the white sticky
 * bar on phones. The mosaic repeats a nine-tile rhythm of mixed sizes on
 * desktop and a six-tile one on mobile, per the delivered prototypes.
 *
 * @package Qatarshoes
 * @since 3.2.0
 */

.tiktok-collection {
    position: fixed;

    /* The top edge is the header's bottom edge, measured once the rules below
       have had their say. Zero when no header is showing, which is simply
       full height. */
    inset: var(--tiktok-collection-top, 0px) 0 0 0;

    /* Under the header layers of the z-scale in components/header/_variables.css
       (sticky header 200, mobile drawer 300, search 400, cart 500), so the
       header stays visible and its own menus still open over the overlay. */
    z-index: 250;
    display: flex;
    flex-direction: column;
    background: #F7F4F1;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.66s cubic-bezier(0.2, 0.86, 0.24, 1),
                opacity 0.35s ease,
                visibility 0s linear 0.66s;
}

.tiktok-collection.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.66s cubic-bezier(0.2, 0.86, 0.24, 1),
                opacity 0.35s ease,
                visibility 0s;
}

/* ── the header above it ─────────────────────── */

/* The strip the overlay leaves free is filled by the site's white sticky
   header — the same one a phone shows, at every width.

   Freezing the page behind the overlay puts the document at scroll 0, and the
   home page's own header script reads that as "back at the hero": it parks the
   sticky bar and brings the transparent hero header back. Neither is what this
   wants, so for as long as the overlay is open the bar is held in place and the
   hero header stays out of the way. Nothing about either header's behaviour
   changes — these last only while the overlay is up, and there is no script
   writing to them, so closing it restores both exactly. */

body.tiktok-collection-open .homepage-sticky-wrapper {
    transform: translateY(0);
}

/* Desktop only, where this header exists at all. */
@media (min-width: 1024px) {
    body.tiktok-collection-open .homepage-desktop-header {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* ── filters ──────────────────────────────────── */

/* No header of its own: the section's heading is hidden and the site's header
   is already on the page. What follows is the collection page's own filter —
   quick bar, active tags and refine drawer — copied here because those rules
   live inline in
   template-collection.php (lines ~120-620) and are not enqueued anywhere the
   home page can reach. Keep the two in step when either is restyled. */

.tiktok-collection-filters {
    background: #fff;
    border-bottom: 1px solid #EEE9E4;
    padding: 16px 40px 0;
    flex: none;
}

.tiktok-collection .quick-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 0 0 16px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tiktok-collection .quick-filter-bar::-webkit-scrollbar {
    display: none;
}

.tiktok-collection .quick-filter-refine {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    background: #2D1F1F1A;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.tiktok-collection .quick-filter-refine:hover {
    background: #f5f5f5;
}

.tiktok-collection .quick-filter-refine svg {
    width: 14px;
    height: 14px;
}

.tiktok-collection .quick-filter-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tiktok-collection .quick-filter-chips::-webkit-scrollbar {
    display: none;
}

.tiktok-collection .quick-filter-chip {
    height: 40px;
    padding: 0 20px;
    border: 1px solid rgba(45, 31, 31, 0.1);
    background: white;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #2D1F1F;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
    border-radius: 8px;
}

@media (hover: hover) {
    .tiktok-collection .quick-filter-chip:hover {
        border-color: #333;
    }
}

.tiktok-collection .quick-filter-chip.active {
    background: #333;
    color: white;
    border-color: #333;
}

/* Clip tally, in the same small grey the collection page gives its results
   count. Pushed to the trailing edge so the chips keep the room they need. */
.tiktok-collection .results-count {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 100%;
    color: #666666;
    white-space: nowrap;
    flex-shrink: 0;
    margin-inline-start: auto;
    padding-inline-start: 12px;
}

.tiktok-collection .active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-bottom: 16px;
}

.tiktok-collection .active-filters[hidden] {
    display: none;
}

.tiktok-collection .active-filter-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f5f5f5;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
}

.tiktok-collection .active-filter-tag .remove {
    cursor: pointer;
    font-weight: bold;
    color: #999;
    margin-left: 4px;
}

.tiktok-collection .active-filter-tag .remove:hover {
    color: #2D1F1F;
}

.tiktok-collection .clear-all-filters {
    color: #2D1F1F;
    text-decoration: underline;
    font-size: 13px;
    cursor: pointer;
}

/* ── refine drawer ───────────────────────────── */

/* Kept inside the strip the overlay occupies: the overlay is its own stacking
   context, so a drawer in it can never paint over the header anyway. */
.tiktok-collection .filter-overlay {
    display: none;
    position: fixed;
    top: var(--tiktok-collection-top, 0px);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
}

.tiktok-collection .filter-overlay.active {
    display: block;
}

.tiktok-collection .filter-drawer {
    position: fixed;
    top: var(--tiktok-collection-top, 0px);
    left: -100%;
    width: 85%;
    max-width: 350px;
    height: calc(100% - var(--tiktok-collection-top, 0px));
    background: #fff;
    z-index: 999;
    overflow-y: auto;
    transition: left 0.3s ease;
}

.tiktok-collection .filter-drawer.active {
    left: 0;
}

/* The collection page's drawer predates RTL; in Arabic it should come from the
   side the reading starts on. */
html[dir="rtl"] .tiktok-collection .filter-drawer {
    left: auto;
    right: -100%;
    transition: right 0.3s ease;
}

html[dir="rtl"] .tiktok-collection .filter-drawer.active {
    right: 0;
}

.tiktok-collection .filter-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e5e5e5;
}

.tiktok-collection .filter-drawer-title {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tiktok-collection .filter-drawer-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.tiktok-collection .filter-drawer-content {
    padding: 20px;
}

.tiktok-collection .filter-section {
    border-bottom: 1px solid #e5e5e5;
}

.tiktok-collection .filter-section:last-of-type {
    border-bottom: none;
}

.tiktok-collection .filter-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 18px 0;
    user-select: none;
}

.tiktok-collection .filter-section-title {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333;
    margin: 0;
}

.tiktok-collection .filter-section-arrow {
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    color: #666;
}

.tiktok-collection .filter-section-arrow svg {
    width: 12px;
    height: 12px;
}

.tiktok-collection .filter-section.collapsed .filter-section-content {
    display: none;
}

.tiktok-collection .filter-section.collapsed .filter-section-arrow {
    transform: rotate(0deg);
}

.tiktok-collection .filter-section:not(.collapsed) .filter-section-arrow {
    transform: rotate(180deg);
}

.tiktok-collection .filter-section-content {
    padding-bottom: 18px;
}

.tiktok-collection .filter-search-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e5e5;
    font-size: 14px;
    margin-bottom: 16px;
}

.tiktok-collection .filter-search-input:focus {
    outline: none;
    border-color: #2D1F1F;
}

.tiktok-collection .filter-list {
    max-height: 300px;
    overflow-y: auto;
}

.tiktok-collection .filter-item {
    padding: 8px 0;
}

.tiktok-collection .filter-item[hidden] {
    display: none;
}

.tiktok-collection .filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.tiktok-collection .filter-checkbox input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex: none;
}

.tiktok-collection .filter-checkbox-label {
    font-size: 14px;
    flex: 1;
}

.tiktok-collection .filter-checkbox-count {
    font-size: 12px;
    color: #999;
}

.tiktok-collection .apply-filters-btn {
    width: 100%;
    padding: 16px;
    background: #68683D;
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    margin-top: 20px;
}

.tiktok-collection .apply-filters-btn:hover {
    background: #1a1212;
}

/* ── mosaic ──────────────────────────────────────────────── */

.tiktok-collection-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* The grid carries the drag that closes the view, so the browser must not
       claim it outright — pan-y leaves its own scrolling alone. */
    touch-action: pan-y;
    padding: 26px 40px 44px;
}

.tiktok-mosaic {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    grid-auto-flow: dense;
}

.tiktok-tile {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #EFEAE5;
    cursor: pointer;
    border: 0;
    padding: 0;
    display: block;
    width: 100%;
    opacity: 0;
    transform: translateY(14px);
}

.tiktok-tile.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
    /* Tiles arrive in sequence rather than all at once. */
    transition-delay: calc(var(--tiktok-tile-index, 0) * 55ms);
}

/* The nine-tile rhythm from the prototype, repeated down the grid. */
.tiktok-tile:nth-child(9n + 1) { grid-column: span 2; height: 420px; }
.tiktok-tile:nth-child(9n + 2) { grid-column: span 1; height: 420px; }
.tiktok-tile:nth-child(9n + 3) { grid-column: span 1; height: 420px; }
.tiktok-tile:nth-child(9n + 4) { grid-column: span 1; height: 300px; }
.tiktok-tile:nth-child(9n + 5) { grid-column: span 1; height: 300px; }
.tiktok-tile:nth-child(9n + 6) { grid-column: span 2; height: 300px; }
.tiktok-tile:nth-child(9n + 7) { grid-column: span 1; height: 340px; }
.tiktok-tile:nth-child(9n + 8) { grid-column: span 1; height: 340px; }
.tiktok-tile:nth-child(9n + 9) { grid-column: span 2; height: 340px; }

.tiktok-tile-media,
.tiktok-tile-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tiktok-tile-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0) 45%, rgba(14, 10, 9, 0.8));
    pointer-events: none;
}

.tiktok-tile-caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    text-align: start;
    pointer-events: none;
}

.tiktok-tile-name {
    display: block;
    color: #fff;
    font-size: 15px;
    line-height: 1.35;
}

.tiktok-tile-price {
    display: block;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
}

/* ── multi-product badge ─────────────────────────────────── */

.tiktok-tile-badge {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.93);
    border-radius: 999px;
    padding: 6px 12px;
    pointer-events: none;
}

.tiktok-tile-dots {
    display: flex;
}

.tiktok-tile-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.9);
    margin-inline-start: -4px;
}

.tiktok-tile-dot:first-child {
    margin-inline-start: 0;
}

.tiktok-tile-count {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #2B2320;
}

/* ── empty + loading ─────────────────────────────────────── */

.tiktok-collection-empty,
.tiktok-collection-loading {
    padding: 60px 0;
    text-align: center;
    color: #6E6259;
    font-size: 14px;
}

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

@media (max-width: 1023px) {
    .tiktok-collection-filters {
        padding: 12px 16px 0;
    }

    /* No room for the tally beside the chips on a phone — the collection page
       drops the same count at this width. */
    .tiktok-collection .results-count {
        display: none;
    }

    .tiktok-collection .quick-filter-chip {
        height: 36px;
        padding: 0 16px;
        font-size: 13px;
    }

    .tiktok-collection-body {
        padding: 16px 14px 32px;
    }

    .tiktok-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    /* Six-tile rhythm, per the mobile prototype. */
    .tiktok-tile:nth-child(n) { grid-column: span 1; height: auto; }
    .tiktok-tile:nth-child(6n + 1) { grid-column: span 2; height: 300px; }
    .tiktok-tile:nth-child(6n + 2) { grid-column: span 1; height: 210px; }
    .tiktok-tile:nth-child(6n + 3) { grid-column: span 1; height: 210px; }
    .tiktok-tile:nth-child(6n + 4) { grid-column: span 1; height: 168px; }
    .tiktok-tile:nth-child(6n + 5) { grid-column: span 1; height: 168px; }
    .tiktok-tile:nth-child(6n + 6) { grid-column: span 2; height: 240px; }

    .tiktok-tile-name { font-size: 13px; }
    .tiktok-tile-price { font-size: 12px; }
    .tiktok-tile-caption { left: 12px; right: 12px; bottom: 10px; }
}

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

@media (prefers-reduced-motion: reduce) {
    .tiktok-collection {
        transition: opacity 0.2s ease, visibility 0s;
        transform: none;
    }

    .tiktok-tile {
        opacity: 1;
        transform: none;
    }

    .tiktok-tile.is-in {
        transition: none;
        transition-delay: 0s;
    }
}