.hero-swiper { width: 100%; max-width: 100vw; height: calc(100vh + 3.5rem); overflow: hidden; }
.hero-swiper .swiper-slide {
    position: relative;
    background: #1a1a2e;
}
.hero-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}
.hero-slide-overlay {
    position: absolute;
    bottom: 4rem;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 5rem 4rem 4rem;
    width: 90%;
    background: linear-gradient(to right, rgba(0,0,0,.92) 0%, rgba(0,0,0,.65) 55%, transparent 100%);
}
.hero-slide-overlay .slide-title {
    color: var(--fws-white);
    font-size: 2.75rem;
    font-weight: 700;
    margin: 0 0 .4em;
}
.hero-slide-overlay .slide-desc {
    color: rgba(255,255,255,.88);
    font-size: 1.2rem;
    margin: 0 0 1.4em;
    max-width: 60%;
}
.hero-slide-overlay .slide-btn { cursor: pointer; }
.hero-slide-overlay {
    opacity: 1;
    transition: opacity .3s ease;
}
.hero-slide-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
    transition: none;
}
.hero-swiper .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    background: var(--fws-disabled);
    opacity: 1;
}
.hero-swiper .swiper-pagination-bullet-active {
    background: var(--fws-white);
}
/* swiper-button-next/prev base styles are global in main.css */

/* ------------------------------------------------------------------ */
/*  The add-to-cart toast                                              */
/* ------------------------------------------------------------------ */
/*  NOT A MODAL, for the same reason the cart page's error line is not: adding a
    game is the most ordinary thing a visitor does on this site, and a dialog
    per addition is a dialog nobody reads. Fixed, bottom-centre, gone in three
    seconds.

    `aria-live` is on the ELEMENT (set in cart-add.js) rather than being a focus
    move, because the message confirms something the visitor did and must not
    steal the keyboard from whatever they were doing next. */
.cart-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 400;
    padding: .7rem 1.15rem;
    border-radius: 8px;
    background: rgba(24,24,27,.96);
    border: 1px solid rgba(255,255,255,.14);
    color: var(--fws-white);
    font-size: .9rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    max-width: min(92vw, 28rem);
    text-align: center;
}
.cart-toast[data-kind="error"] {
    border-color: var(--fws-red, #ff4040);
    background: rgba(60,16,16,.97);
}

/* ------------------------------------------------------------------ */
/*  The add-to-cart affordance                                         */
/* ------------------------------------------------------------------ */
/*  Every card in the shop is an <a>, and a <button> nested inside a link is
    invalid HTML that every browser resolves by navigating instead of
    activating. So the cards are wrapped in `.shop-card`, which is the positioned
    ancestor the button anchors itself to, and the card keeps the geometry it
    already had.

    `display: block` + `position: relative` rather than a flex wrapper: the grid
    rows are sized by the card, and making the wrapper a flex box would take the
    height out of the card and let the button decide the row's height instead. */
.shop-card {
    position: relative;
    display: block;
}

/* The button itself. Top-left rather than centred, because the bottom of a
   `.discover-grid-card` is an absolutely-positioned info panel over the
   artwork and a control in that corner covers the title. */
.shop-card-add {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.62);
    color: var(--fws-white);
    font-size: .9rem;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .15s ease, transform .15s ease;
}
.shop-card-add:hover,
.shop-card-add:focus-visible {
    background: var(--fws-red, #ff4040);
    transform: scale(1.08);
}
.shop-card-add:disabled {
    opacity: .5;
    cursor: default;
    transform: none;
}
.shop-card-add:focus-visible {
    outline: 2px solid var(--fws-white);
    outline-offset: 2px;
}

/* Community favourites */
.community-section {
    padding: 3rem 3.5rem;
}
.community-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}
.game-card {
    display: flex;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    text-decoration: none;
}
.game-card-img-wrap {
    flex-shrink: 0;
    width: 33%;
    border-radius: 8px;
    overflow: hidden;
    /* Force compositing layer so overflow:hidden reliably clips children */
    transform: translateZ(0);
}
.game-card img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    /* Mirror the wrapper radius so the image is clipped even without overflow:hidden */
    border-radius: inherit;
}
.game-card-body {
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .35rem;
    text-align: left;
}
.game-card-title {
    color: var(--fws-white);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}
.game-card-stars {
    color: var(--fws-white);
    font-size: 1.1rem;
    letter-spacing: .05em;
}
.game-card-price-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}
.game-card-price {
    color: var(--fws-white);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}
.game-card-price-original {
    color: rgba(255,255,255,.4);
    font-size: .9rem;
    font-weight: 400;
    text-decoration: line-through;
}
.game-card-price-new {
    color: var(--fws-red, #ff4040);
    font-size: 1rem;
    font-weight: 700;
}
.game-card-badge {
    background: var(--fws-red, #ff4040);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: .2em .55em;
    border-radius: 3px;
}

/* FWS Games section */
.fws-games-section {
    padding: 3rem 3.5rem;
    text-align: center;
}
.other-creator-section {
    padding: 3rem 3.5rem;
}
.other-creator-section .other-creator-title {
    color: var(--fws-white);
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
    margin: 0 0 2rem;
}
.fws-games-title {
    color: var(--fws-white);
    font-size: 1.6rem;
    font-weight: 400;
    margin: 0 0 2rem;
}
.fws-games-title strong {
    font-weight: 700;
}
.fws-games-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto 2rem;
}
.fws-game-card {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    text-decoration: none;
}
.fws-game-card img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
.fws-game-card-title {
    color: var(--fws-white);
    font-size: .95rem;
    font-weight: 700;
    margin: 0;
    text-align: left;
}
.fws-game-card .game-card-price-row {
    justify-content: flex-start;
}
.fws-games-more {
    margin-top: .5rem;
}

/* Promo banner */
.promo-banner {
    position: relative;
    height: 200px;
    overflow: hidden;
}
.promo-banner-bg {
    position: absolute;
    inset: 0;
}
.promo-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.promo-banner-label {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--fws-white);
    color: var(--fws-black);
    font-family: 'Futura PT Medium', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
    padding: 1.25rem 5rem 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    clip-path: polygon(0 0, calc(100% - 60px) 0, 100% 100%, 0 100%);
    z-index: 2;
}
.promo-banner-icon {
    position: absolute;
    right: 2.5rem;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.promo-banner-icon img {
    /* Square icon, no overflow */
    width: calc(200px - 2rem);
    height: calc(200px - 2rem);
    object-fit: contain;
    display: block;
}
/* Découvrez aussi */
.discover-section {
    padding: 3rem 0 3rem;
}
.discover-section .section-title {
    color: var(--fws-white);
    font-size: 2rem;
    text-align: center;
    margin: 0 0 1.5rem;
}
/* Featured swiper */
.discover-swiper-wrap {
    position: relative;
}
.discover-swiper {
    overflow: hidden;
}
.discover-swiper .swiper-slide {
    width: 40%;
    flex-shrink: 0;
}
.discover-swiper .swiper-slide a {
    display: block;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
}
.discover-swiper .swiper-slide a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
}
.discover-swiper .swiper-slide img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
.discover-slide-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem 1rem .8rem;
    background: linear-gradient(transparent, rgba(0,0,0,.85) 55%, rgba(0,0,0,.95) 100%);
    color: var(--fws-white);
    z-index: 2;
}
.discover-slide-info .d-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 .3em;
}
.discover-slide-info .d-stars {
    font-size: .85rem;
    margin: 0 0 .25em;
}
.discover-slide-info .d-price-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.discover-slide-info .d-price {
    font-size: 1rem;
    color: rgba(255,255,255,.9);
    margin: 0;
}
.discover-slide-info .d-price-original {
    font-size: .8rem;
    color: rgba(255,255,255,.5);
    text-decoration: line-through;
    margin: 0;
}
.discover-slide-info .d-price-new {
    font-size: 1rem;
    color: var(--fws-red, #e02020);
    font-weight: 700;
    margin: 0;
}
.discover-slide-info .d-badge {
    background: var(--fws-red, #e02020);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    padding: .1em .45em;
    border-radius: 3px;
}
.discover-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,.55);
    border: none;
    color: var(--fws-white);
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.discover-nav-prev { left: .75rem; }
.discover-nav-next { right: .75rem; }
/* swiper-button-next/prev base styles are global in main.css */
/* Thumbnail strip */
.discover-thumbs {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
    padding: .85rem 3.5rem 0;
}
.discover-thumb {
    width: 100px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    opacity: .45;
    transition: opacity .2s;
    border: 2px solid transparent;
    flex-shrink: 0;
}
.discover-thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
.discover-thumb.is-active {
    opacity: 1;
    border-color: var(--fws-white);
}
/* Category pills */
.discover-cats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    padding: 0.4rem 3.5rem 0;
}
.discover-cat-pill {
    border: 1px solid rgba(255,255,255,.35);
    color: var(--fws-white);
    background: transparent;
    border-radius: 20px;
    padding: .3em 1em;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}
.discover-cat-pill:hover,
.discover-cat-pill.active {
    background: var(--fws-white);
    color: var(--fws-black);
    border-color: var(--fws-white);
}
/* Browse grid */
.discover-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 2rem 3.5rem 0;
}
.discover-grid-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    display: block;
}
.discover-grid-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
}
.discover-grid-card img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
.discover-grid-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem .9rem .7rem;
    background: linear-gradient(transparent, rgba(0,0,0,.85) 50%, rgba(0,0,0,.95) 100%);
    color: var(--fws-white);
    z-index: 2;
}
.discover-grid-card-info .d-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 .25em;
}
.discover-grid-card-info .d-stars {
    font-size: .8rem;
    margin: 0 0 .2em;
}
.discover-grid-card-info .d-price-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
.discover-grid-card-info .d-price {
    font-size: .9rem;
    color: rgba(255,255,255,.9);
    margin: 0;
}
.discover-grid-card-info .d-price-original {
    font-size: .75rem;
    color: rgba(255,255,255,.5);
    text-decoration: line-through;
    margin: 0;
}
.discover-grid-card-info .d-price-new {
    font-size: .9rem;
    color: var(--fws-red, #e02020);
    font-weight: 700;
    margin: 0;
}
.discover-grid-card-info .d-badge {
    background: var(--fws-red, #e02020);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    padding: .1em .4em;
    border-radius: 3px;
}

.shop-searchbar {
    position: fixed;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(200px, 38vw, 520px);
    max-width: calc(100vw - 1rem);
    z-index: 105;
    /* BELOW the navbar (110) so its dropdowns drop over this bar rather than
       behind it, and ABOVE the navbar's afterglow (99) so the bar still sits on
       a clean edge. The cart portal (150) stays above both. */
    background: var(--fws-black);
    clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 28px 100%);
    padding: .45rem 2.8rem .65rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}
@media (max-width: 1024px) {
    .shop-searchbar {
        width: clamp(200px, 55vw, 520px);
    }
}
@media (max-width: 640px) {
    .shop-searchbar {
        width: calc(100vw - 1rem);
        clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 14px 100%);
        padding: .45rem 1.5rem .65rem;
    }
}
.shop-searchbar svg,
.shop-searchbar i {
    flex-shrink: 0;
    color: var(--fws-white);
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
}
.shop-searchbar input {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.6);
    outline: none;
    color: var(--fws-white);
    font-size: .88rem;
    font-family: 'Proxima Nova', sans-serif;
    padding-bottom: .15rem;
}
.shop-searchbar input::placeholder {
    color: rgba(255,255,255,.4);
}

/* =====================================================
   THE PAGE WITH NO GAMES IN IT
   =====================================================
   A catalogue with nothing published is ONE centred block: a mark, a sentence
   and the shop's own surface. The sections are not drawn empty — a heading with
   no grid under it is an empty state by another name — so this is the only
   thing the page has to say.

   `--sp-*` lives on the three selectors below rather than on a page wrapper:
   the shop front has no root class, and these are the ONLY colours Lumière+
   has to flip, because --fws-white deliberately stays pure white in that theme
   (it is what "white" means for text over artwork) and this text sits on the
   page surface, not on art. The mark is FULLY OPAQUE and takes --sp-text, not
   a tint of it: a dimmed glyph reads as a rendering artefact rather than as a
   mark, and there is nothing here to stay out of the way of. */
.shop-soon,
.shop-empty,
.shop-results-count {
    --sp-text:      #ffffff;
    --sp-text-soft: rgba(255, 255, 255, .55);
}
.shop-soon {
    background: var(--fws-new-gray);
    /* IT TAKES THE SLACK, rather than a fixed fraction of the viewport. The
       body's column (see the page shell in main.css) hands the leftover height
       to `flex: 1`, so the mark is centred in the space that is actually
       visible; a `min-height: 55vh` box left a band of dead grey under the
       sentence and a different band again between the block and the footer. */
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
    /* The navbar is `position: fixed` (main.css), so NOTHING on the page
       reserves room for it — not this block, not the body. 5rem is its own
       `h-20` and 1.25rem is the 20px shadow fade on `.fws-nav-afterglow`, so
       the mark clears the fixed bar instead of starting under it. */
    padding: 6.25rem 1.5rem 4rem;
}
.shop-soon svg,
.shop-soon i {
    width: 7rem;
    height: 7rem;
    font-size: 7rem;
    color: var(--sp-text);
}
/* FA glyphs are NOT square — the shop mark's viewBox is 448x512, i.e. .875em
   wide — so a fixed 7rem box would leave the glyph sitting left of centre in
   the column. Same `i { width: auto }` the social buttons and the cart use. */
.shop-soon i { width: auto; }
.shop-soon h1 {
    color: var(--sp-text);
    font-size: clamp(1.5rem, 4.5vw, 2.5rem);
    font-weight: 500;
    margin: 0;
    /* NO `max-width` in CHARS. A 22ch cap wrapped the French line at the wrong
       place and left the "!" alone on a line of its own, and the wrap point
       moves with the locale. `text-wrap: balance` splits the lines evenly
       instead, so a heading that must wrap does so without an orphan. */
    text-wrap: balance;
}
.shop-soon p {
    color: var(--sp-text-soft);
    font-size: 1rem;
    margin: 0;
}

/* ---- A search that matched nothing — the ONE empty state left in the page,
       and it had no rule at all: two bare <p>s at body size and weight, flush
       against the section's left edge, with the "back to the shop" <a> in
       Tailwind's preflight `text-decoration: inherit` (so not even underlined). */
.shop-empty {
    color: var(--sp-text-soft);
    text-align: center;
    padding: 1rem 3.5rem 0;
}
.shop-empty a {
    color: var(--sp-text);
    text-decoration: underline;
}
.shop-results-count {
    color: var(--sp-text-soft);
    text-align: center;
    padding: 0 3.5rem;
}

/* ---- A search that matched nothing takes the page's slack ----
   The search page has no hero, so its one short section used to leave the
   footer — which is `margin-top: auto` (see the page shell in head.php) — sitting
   at the bottom of the viewport with a band of empty page above it. That band is
   the hole. THIS SECTION GROWS INTO IT instead, and centres its one sentence
   inside the space: "nothing matched" then reads as an answer that fills the
   page rather than as a page that failed to load. The top padding is what
   carries the sentence clear of the fixed navbar (`h-20`) and the search bar
   under it. Only the empty branch wears this class — a real grid keeps the
   top-aligned layout it already has. */
.discover-section.shop-noresult {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* The same navbar clearance `.shop-soon` uses — 5rem of bar plus the 1.25rem
       afterglow below it. */
    padding-top: 6.25rem;
}

/* Prevent horizontal overflow on all viewports */
body {
    overflow-x: hidden;
}

/* =====================================================
   RESPONSIVE BREAKPOINTS
   ===================================================== */

/* ---- Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
    .community-section {
        padding: 2.5rem 2rem;
    }
    .fws-games-section {
        padding: 2.5rem 2rem;
    }
    .fws-games-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .discover-swiper .swiper-slide {
        width: 55%;
    }
    .discover-thumbs,
    .discover-cats {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .discover-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 2rem 2rem 0;
    }
}

/* ---- Small tablets / large phones (≤ 768px) ---- */
@media (max-width: 768px) {
    /* Hero overlay */
    .hero-slide-overlay {
        width: 100%;
        padding: 2.25rem 1.75rem 1.75rem;
        bottom: 3.5rem;
    }
    .hero-slide-overlay .slide-title {
        font-size: 1.75rem;
    }
    .hero-slide-overlay .slide-desc {
        max-width: 90%;
        font-size: 1rem;
    }

    /* Community */
    .community-section {
        padding: 2rem 1.25rem;
        border-radius: 0 !important;
    }
    .community-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    /* FWS games */
    .fws-games-section {
        padding: 2rem 1.25rem;
    }
    .fws-games-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Promo banner */
    .promo-banner {
        height: 160px;
    }
    .promo-banner-label {
        font-size: 1.6rem;
        padding: 1rem 4rem 1rem 1rem;
    }
    .promo-banner-icon img {
        width: calc(160px - 2rem);
        height: calc(160px - 2rem);
    }

    /* Discover */
    .discover-swiper .swiper-slide {
        width: 75%;
    }
    .discover-thumbs {
        padding: .75rem 1.25rem 0;
    }
    .discover-cats {
        padding: 1rem 1.25rem 0;
    }
    .discover-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 1.5rem 1.25rem 0;
        gap: .75rem;
    }
}

/* ---- Mobile (≤ 480px) ---- */
@media (max-width: 480px) {
    /* Hero */
    .hero-swiper {
        height: max(65vw, 280px);
    }
    .hero-slide-overlay {
        bottom: 2.5rem;
        padding: 1.25rem 1.25rem 1.5rem;
        background: linear-gradient(to right, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 70%, transparent 100%);
    }
    .hero-slide-overlay .slide-title {
        font-size: 1.35rem;
    }
    .hero-slide-overlay .slide-desc {
        display: none;
    }

    /* Community – stack card image on top */
    .game-card {
        flex-direction: column;
    }
    .game-card-img-wrap {
        width: 100%;
        border-radius: 8px 8px 0 0;
    }
    .game-card-body {
        padding: .7rem .75rem;
    }

    /* FWS games – keep 2 cols, tighten spacing */
    .fws-games-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .6rem;
    }
    .fws-game-card-title {
        font-size: .82rem;
    }

    /* Promo banner – hide logo box, shrink height */
    .promo-banner {
        height: 120px;
    }
    .promo-banner-label {
        font-size: 1.1rem;
        padding: .75rem 3rem .75rem 1rem;
    }
    .promo-banner-icon {
        display: none;
    }

    /* Discover */
    .discover-swiper .swiper-slide {
        width: 85%;
    }
    .discover-thumbs {
        padding: .6rem .75rem 0;
        gap: .3rem;
    }
    .discover-thumb {
        width: 68px;
    }
    .discover-cats {
        padding: .75rem .75rem 0;
    }
    .discover-grid {
        grid-template-columns: 1fr;
        padding: 1.25rem .75rem 0;
    }
}