/* ------------------------------------------------------------------
 * Shared footer styles — used by both the home page and the
 * products page via _footer.twig.
 *
 * Markup uses BEM-style .footer__* classes (mirrors the home page
 * design). Padding has been trimmed from the original (was
 * 120px 96px 48px) to fit a more compact layout per request.
 * ------------------------------------------------------------------ */

/* z-index: 0 establishes a stacking context for the footer so its
 * absolutely-positioned background layers paint relative to the
 * footer instead of bleeding into siblings' contexts.
 *
 * Background composition mirrors the React reference design exactly:
 * three layers — Rect 2 (back) → image → Rect 3 (front) — all sized
 * 1048px tall, anchored to the bottom of the footer, all rendered at
 * opacity 0.25 so the body navy shows through and the rectangle
 * gradients alone handle the top/bottom fades (no CSS mask needed).
 *
 * `overflow: hidden` is critical here. The 1048px-tall layers are a
 * "big enough canvas" deliberately oversized so the gradient never
 * runs out on tall screens. The footer's natural content height is
 * much smaller (~400px), so without clipping these layers extend
 * upward past the footer's box and paint over the FAQ / why-us /
 * reviews sections above (the footer comes after them in document
 * order, all share the auto z-index, so the footer wins paint
 * order). Clipping confines the gradient to the footer where it
 * was meant to live. */
.footer {
    position: relative;
    z-index: 0;
    /* Pull the footer's box upward so the absolutely-positioned bg
     * layers (especially .footer__bg, which is 1048px tall) extend
     * higher into the area above. The matching padding-top puts the
     * footer CONTENT back where it was — visually, only the city
     * image now fades over a much taller distance, blending more
     * gently with the page above. .cms-page / .product-page sit at
     * z-index: 1 within their own stacking contexts, so the
     * overlap area doesn't visually cover content above. */
    margin-top: -260px;
    padding: 260px clamp(20px, 6vw, 96px) 24px;
    overflow: hidden;
}
/* On narrow viewports the FAQ card stacks above the footer's
 * gradient column, and the 260px upward overlap pulled the footer's
 * brand block (NANO SCRIPTS / socials / payments) right on top of
 * the FAQ card. Drop the overlap entirely on phones so the footer
 * content sits flush below the FAQ — the bottom-anchored bg layers
 * still produce the city-image fade within the footer's own height. */
@media (max-width: 720px) {
    .footer {
        margin-top: 0;
        padding-top: 0;
    }
}

/* Only the homepage / category pages (no body class) want the
 * upward overlap — the FAQ + reviews sections fade into the
 * footer's city image there. Card-based pages
 * (.product-page-body: cms, product, checkout, options, login)
 * have a glass card whose bottom corners would get clipped by
 * the overlap, so reset both the negative margin and the
 * compensating padding-top. The 1048px bg image still sits
 * absolutely bottom-anchored and is clipped by the footer's
 * own overflow:hidden, so visuals stay clean. */
.product-page-body .footer {
    margin-top: 0;
    padding-top: 24px;
}
/* Rectangle 2 — transparent → navy gradient. Sits BEHIND the image. */
.footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1048px;
    z-index: 0;
    opacity: 0.8;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(72, 86, 129, 0) 0%, #0F121B 100%);
}
/* Rectangle 3 — navy → transparent gradient. Sits ABOVE the image,
 * fading the top of the layer back into the navy page background.
 *
 * Critical: this layer must span EXACTLY the footer height (top:0
 * to bottom:0), not the legacy 1048px-tall bottom-anchored variant.
 * With a 1048px layer most of the gradient ran above the visible
 * footer, so by the time the visible 0% stop met the footer's top
 * edge the navy alpha had already dropped to ~40%, producing the
 * hard horizontal seam where the city image suddenly appeared.
 * Calibrating the gradient to the footer's real height makes the
 * top stop sit exactly at the page→footer boundary, where it
 * matches the body's #0F121B and the join becomes seamless. */
.footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg,
        #0F121B 0%,
        rgba(15, 18, 27, 0.92) 25%,
        rgba(15, 18, 27, 0.65) 55%,
        rgba(15, 18, 27, 0) 100%);
}

.footer__bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1048px;
    z-index: 1;
    /* Top-to-bottom navy fade (#0F121B 100% → transparent) painted
     * over the footer image, so the image fades out from the top. */
    background:
        linear-gradient(180deg, #0F121B 0%, rgba(15, 18, 27, 0) 100%),
        var(--asset-footer-bg) center bottom / 100% 100% no-repeat;
    opacity: 0.25;
    pointer-events: none;
}

.footer__inner {
    position: relative;
    z-index: 3;
    max-width: 1728px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 24px 40px;
    align-items: center;
}

.footer__brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 418px;
    justify-self: start;
}

.footer__brand-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.footer__rights {
    color: rgba(255, 255, 255, 0.46);
    font-size: 13px;
    font-family: 'GTA Art Deco', sans-serif;
    font-weight: 500;
}

.footer__logo {
    width: 100%;
    max-width: 220px;
    height: auto;
    max-height: 76px;
    object-fit: contain;
    display: block;
}

.footer__brand-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer__headline {
    margin: 0;
    font-size: 24px;
    font-family: 'GTA Art Deco', sans-serif;
    font-weight: 500;
    line-height: 1.2;
}

.footer__headline-white { color: #fff; }
.footer__headline-accent { color: #fa4039; }

.footer__tagline {
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    font-family: 'GTA Art Deco', sans-serif;
    font-weight: 400;
    line-height: 1.45;
}

.footer__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.footer__social-sep {
    width: 12px;
    height: 2px;
    background: rgba(198, 212, 255, 0.25);
    flex-shrink: 0;
}

.footer__social-btn {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    flex-shrink: 0;
}

.footer__social-btn--primary {
    background: radial-gradient(ellipse 94% 188% at 50% 100%, #fa4039 0%, #942622 100%);
}

.footer__social-btn--ghost {
    outline: 1px solid rgba(198, 212, 255, 0.25);
    outline-offset: -1px;
    color: rgba(198, 212, 255, 0.25);
}

.footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* The column gap was a flat 64px, set when the nav held three columns.
       A fourth (Categories) pushed the row past the middle grid track on
       anything under ~1350px, so it wrapped to two ragged rows. Clamping
       keeps the original 64px on large screens and tightens toward 32px as
       the track narrows, so all four stay on one row down to the 1120px
       breakpoint - where the grid re-flows and takes over anyway. */
    gap: 24px clamp(32px, 3.4vw, 64px);
    padding-top: 4px;
    justify-self: center;
    width: max-content;
    max-width: 100%;
}

.footer__nav-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 85px;
}

.footer__nav-marker {
    width: 17px;
    height: 3px;
    background: #fa4039;
    border-radius: 0 0 2px 2px;
}

.footer__nav-title {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-family: 'GTA Art Deco', sans-serif;
    font-weight: 500;
}

.footer__nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.footer__nav-list a {
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
    font-family: 'GTA Art Deco', sans-serif;
    font-weight: 400;
    text-decoration: none;
}

.footer__nav-list a:hover { color: rgba(255, 255, 255, 0.6); }

.footer__payments {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    justify-self: end;
    width: max-content;
    max-width: 100%;
}

.footer__pay-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.footer__pay-slot {
    height: 32px;
    min-width: 44px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}

.footer__pay-icon {
    display: block;
    height: 20px;
    width: auto;
    max-width: 52px;
    object-fit: contain;
}

.footer__pay-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
    font-family: 'GTA Art Deco', sans-serif;
    font-weight: 400;
}

.footer__pay-dot {
    width: 8px;
    height: 8px;
    background: #2dff7b;
    border-radius: 2px;
    flex-shrink: 0;
}

.footer__meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.footer__tebex {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer__tebex-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.footer__tebex-badge {
    width: 22px;
    height: 22px;
    background: #fa4039;
    border-radius: 2px;
    flex-shrink: 0;
}

.footer__tebex-text {
    color: rgba(255, 255, 255, 0.3);
    font-size: 13px;
    font-family: 'GTA Art Deco', sans-serif;
    font-weight: 500;
}

.footer__rule {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
}

.footer__legal {
    margin: 0;
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    font-family: 'GTA Art Deco', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    max-width: 100%;
}

@media (max-width: 1120px) {
    /* margin-top MUST be reset alongside the padding. The desktop rule
     * pairs `margin-top: -260px` with 260px of top padding so the footer
     * tucks under the FAQ card without covering it. This block replaced
     * the padding with 28px but left the -260px margin, so for every
     * viewport from 721px to 1120px the footer was pulled 232px up over
     * the section above it - iPads and small laptops. The <=720 block
     * already zeroes the margin; this closes the band between them. */
    .footer { margin-top: 0; padding: 28px 32px 20px; }
    .footer__main {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'brand brand'
            'nav   nav'
            'pay   pay';
    }
    .footer__brand    { grid-area: brand; max-width: none; }
    .footer__nav      { grid-area: nav; justify-content: space-around; gap: 24px 40px; }
    .footer__payments { grid-area: pay; align-items: center; justify-self: center; }
}

@media (max-width: 768px) {
    .footer { padding: 24px 24px 16px; }
    .footer__main {
        grid-template-columns: 1fr;
        grid-template-areas:
            'brand'
            'nav'
            'pay';
    }
    .footer__nav { flex-direction: column; align-items: center; gap: 24px; }
    .footer__payments { align-items: center; }
    .footer__headline { font-size: 22px; }
}

@media (max-width: 480px) {
    .footer { padding: 20px 16px 14px; }
    .footer__headline { font-size: 20px; }
    .footer__tagline  { font-size: 13px; }
    .footer__nav      { gap: 18px; }
    .footer__legal    { font-size: 10px; }
}