/* ============================================================
   The-Bikini.com · Maqueta storefront (Milimetric Marketing)
   Disseny editorial premium · marca indigo #3333cc
   Aquest CSS està pensat per portar-se al SCSS del tema Shopware.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&display=swap');

:root {
    --indigo: #3333cc;
    --indigo-deep: #24249a;
    --indigo-soft: #ececff;
    --ink: #15141a;
    --ink-2: #4a4954;
    --muted: #8b8a93;
    --paper: #ffffff;
    --cream: #f5f2ec;
    --cream-2: #efe9df;
    --line: #e6e2d9;
    --coral: #e35d6a;

    --ff-display: 'Hanken Grotesk', -apple-system, sans-serif;
    --ff-body: 'Hanken Grotesk', -apple-system, sans-serif;

    --wrap: 1320px;
    --gut: clamp(20px, 4vw, 64px);
    --radius: 16px;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--ff-body);
    color: var(--ink);
    background: var(--paper);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--ff-display); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }

.eyebrow {
    font-family: var(--ff-body);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--indigo);
}

/* ---------- Botons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .01em;
    padding: 14px 26px;
    border-radius: 60px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
}
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: var(--indigo); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(51,51,204,.6); }
.btn--ghost { border-color: currentColor; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--indigo); }
.btn--light:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(0,0,0,.5); }
.btn .arw { transition: transform .25s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
    background: var(--indigo);
    color: #fff;
    font-size: .78rem;
    letter-spacing: .02em;
}
.topbar__in {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 9px var(--gut);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.topbar__msg { display: flex; align-items: center; gap: 9px; opacity: .96; }
.topbar__msg b { font-weight: 700; }
.topbar__social { display: flex; align-items: center; gap: 14px; }
.topbar__social a { opacity: .8; transition: opacity .2s, transform .2s; display: inline-flex; }
.topbar__social a:hover { opacity: 1; transform: translateY(-2px); }
.topbar__social svg { width: 16px; height: 16px; fill: #fff; }

/* ============================================================
   HEADER
   ============================================================ */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.86);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.header__in {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 18px var(--gut);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}
.logo { justify-self: start; line-height: 1; }
.logo__name { font-family: var(--ff-display); font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; }
.logo__name .lo { color: var(--ink-2); }
.logo__name .hi { color: var(--indigo); }
.logo__tag { display: block; font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

.nav { justify-self: center; display: flex; gap: 30px; }
.nav a {
    font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink-2); position: relative; padding: 6px 0;
}
.nav a::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--indigo);
    transition: width .3s var(--ease);
}
.nav a:hover, .nav a.is-active { color: var(--ink); }
.nav a:hover::after, .nav a.is-active::after { width: 100%; }

.actions { justify-self: end; display: flex; align-items: center; gap: 18px; }
.actions button, .actions a.icon {
    background: none; border: 0; cursor: pointer; color: var(--ink); display: inline-flex; position: relative;
    transition: color .2s, transform .2s;
}
.actions button:hover, .actions a.icon:hover { color: var(--indigo); transform: translateY(-1px); }
.actions svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.cart-count {
    position: absolute; top: -7px; right: -9px; background: var(--indigo); color: #fff;
    font-size: .6rem; font-weight: 700; width: 16px; height: 16px; border-radius: 50%;
    display: grid; place-items: center; font-family: var(--ff-body);
}

/* ============================================================
   HERO (split editorial)
   ============================================================ */
.hero { background: var(--cream); border-bottom: 1px solid var(--line); }
.hero__grid {
    max-width: var(--wrap); margin: 0 auto;
    display: grid; grid-template-columns: 1.02fr 1fr; align-items: stretch;
}
.hero__copy { padding: clamp(48px, 7vw, 110px) var(--gut); display: flex; flex-direction: column; justify-content: center; }
.hero__copy .eyebrow { margin-bottom: 22px; }
.hero h1 { font-size: clamp(2.3rem, 5vw, 4.1rem); }
.hero h1 em { color: var(--indigo); }
.hero__sub { margin: 26px 0 36px; font-size: 1.08rem; color: var(--ink-2); max-width: 30ch; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__meta { margin-top: 40px; display: flex; gap: 28px; font-size: .78rem; color: var(--muted); flex-wrap: wrap; }
.hero__meta span { display: flex; align-items: center; gap: 7px; }
.hero__meta b { color: var(--ink); font-weight: 700; font-size: 1.05rem; font-family: var(--ff-display); }
.hero__media { position: relative; overflow: hidden; min-height: 520px; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, var(--cream) 0%, transparent 22%); }
.hero__badge {
    position: absolute; left: -50px; bottom: 56px; z-index: 2;
    background: var(--indigo); color: #fff; font-weight: 700;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .16em;
    padding: 11px 54px; transform: rotate(-90deg); transform-origin: left bottom;
}

/* ============================================================
   SECTION HEAD
   ============================================================ */
.section { padding: clamp(64px, 9vw, 130px) 0; }
.section--cream { background: var(--cream); }
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.shead__l .eyebrow { display: block; margin-bottom: 14px; }
.shead h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.shead h2 em { color: var(--indigo); }
.shead__link { font-size: .85rem; font-weight: 600; letter-spacing: .02em; color: var(--indigo); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.shead__link:hover .arw { transform: translateX(4px); }
.arw { transition: transform .25s var(--ease); display: inline-block; }

/* ============================================================
   CATEGORY GRID
   ============================================================ */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cat {
    position: relative; display: block; overflow: hidden; border-radius: var(--radius);
    aspect-ratio: 4 / 5; background: var(--cream-2);
}
.cat--wide { grid-column: span 2; aspect-ratio: 16 / 10; }
.cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,30,0) 38%, rgba(10,10,30,.74) 100%); }
.cat__c { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; color: #fff; }
.cat__n { font-family: var(--ff-display); font-weight: 700; font-size: 1.12rem; line-height: 1.15; letter-spacing: -.02em; display: block; }
.cat--wide .cat__n { font-size: 1.6rem; }
.cat__k { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .82; margin-top: 7px; display: inline-flex; align-items: center; gap: 8px; }
.cat__k .arw { color: var(--indigo); }
.cat:hover img { transform: scale(1.07); }

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 22px; }
.card { position: relative; }
.card__media {
    position: relative; overflow: hidden; border-radius: var(--radius); background: var(--cream);
    aspect-ratio: 3 / 4;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
.card__badge {
    position: absolute; top: 14px; left: 14px; z-index: 3; background: #fff; color: var(--ink);
    font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 6px 11px; border-radius: 40px;
}
.card__badge--sale { background: var(--coral); color: #fff; }
.card__fav {
    position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.9); border: 0; display: grid; place-items: center; cursor: pointer;
    opacity: 0; transform: translateY(-6px); transition: .3s var(--ease);
}
.card:hover .card__fav { opacity: 1; transform: none; }
.card__fav svg { width: 17px; height: 17px; stroke: var(--ink); fill: none; stroke-width: 1.6; }
.card__quick {
    position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3;
    background: var(--ink); color: #fff; text-align: center; font-weight: 600; font-size: .82rem;
    padding: 12px; border-radius: 50px; opacity: 0; transform: translateY(12px); transition: .35s var(--ease);
}
.card:hover .card__quick { opacity: 1; transform: none; }
.card__quick:hover { background: var(--indigo); }
.card__info { padding: 16px 2px 0; }
.card__name { font-family: var(--ff-display); font-weight: 700; font-size: 1rem; line-height: 1.25; letter-spacing: -.015em; }
.card__name a:hover { color: var(--indigo); }
.card__meta { display: flex; align-items: baseline; gap: 10px; margin-top: 7px; }
.card__price { font-weight: 700; color: var(--indigo); font-size: 1.02rem; }
.card__old { color: var(--muted); text-decoration: line-through; font-size: .88rem; }
.card__cat { font-size: .74rem; color: var(--muted); letter-spacing: .04em; }

/* ============================================================
   EDITORIAL BANNER
   ============================================================ */
.feature { position: relative; min-height: 64vh; display: grid; align-items: center; overflow: hidden; }
.feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,12,40,.78), rgba(15,12,40,.15)); }
.feature__c { position: relative; z-index: 2; color: #fff; max-width: 540px; }
.feature__c .eyebrow { color: #fff; opacity: .85; }
.feature__c h2 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); margin: 18px 0 22px; }
.feature__c p { opacity: .9; margin-bottom: 30px; font-size: 1.05rem; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.news { background: var(--indigo); color: #fff; text-align: center; }
.news__in { max-width: 640px; margin: 0 auto; padding: clamp(60px, 8vw, 110px) var(--gut); }
.news .eyebrow { color: #fff; opacity: .8; }
.news h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 16px 0 14px; }
.news p { opacity: .88; margin-bottom: 30px; }
.news__form { display: flex; gap: 10px; background: #fff; border-radius: 60px; padding: 7px; max-width: 460px; margin: 0 auto; }
.news__form input { flex: 1; border: 0; outline: 0; background: none; padding: 0 18px; font-family: var(--ff-body); font-size: .95rem; color: var(--ink); }
.news__form .btn { white-space: nowrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ink); color: #cfced8; font-size: .9rem; }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: clamp(56px, 7vw, 90px) 0 56px; }
.footer__brand .logo__name { color: #fff; }
.footer__brand .logo__name .lo { color: #8b8a9c; }
.footer__brand .logo__name .hi { color: #8f8fff; }
.footer__brand p { margin-top: 16px; max-width: 32ch; color: #9b9aa6; }
.footer h4 { font-family: var(--ff-body); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.footer ul { list-style: none; display: grid; gap: 11px; }
.footer ul a { color: #b6b5c0; transition: color .2s; }
.footer ul a:hover { color: #fff; }
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0; display: flex; align-items: center;
    justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: #87868f;
}
.footer__pay { display: flex; gap: 8px; }
.footer__pay span { background: rgba(255,255,255,.08); border-radius: 5px; padding: 4px 9px; font-size: .68rem; letter-spacing: .06em; color: #cfced8; }

/* ============================================================
   ANIMACIONS D'ENTRADA
   ============================================================ */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; animation: rise .9s var(--ease) forwards; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .15s; } .d3 { animation-delay: .25s; }
.d4 { animation-delay: .35s; } .d5 { animation-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { animation: none; opacity: 1; }
}

/* ============================================================
   BREADCRUMB (compartit)
   ============================================================ */
.crumbs { padding: 22px 0 0; font-size: .8rem; color: var(--muted); display: flex; gap: 9px; align-items: center; }
.crumbs a:hover { color: var(--indigo); }
.crumbs span { opacity: .5; }
.crumbs b { color: var(--ink); font-weight: 600; }

/* ============================================================
   PLANA DE CATEGORIA
   ============================================================ */
.cat-head { padding: 26px 0 36px; border-bottom: 1px solid var(--line); }
.cat-head .eyebrow { display: block; margin-bottom: 12px; }
.cat-head h1 { font-size: clamp(2rem, 4vw, 3rem); }
.cat-head p { max-width: 56ch; margin-top: 14px; color: var(--ink-2); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; flex-wrap: wrap; }
.toolbar__count { font-size: .9rem; color: var(--muted); }
.toolbar__count b { color: var(--ink); }
.toolbar__sort { display: flex; align-items: center; gap: 10px; font-size: .85rem; }
.toolbar__sort select {
    font-family: var(--ff-body); font-size: .85rem; padding: 9px 34px 9px 14px; border: 1px solid var(--line);
    border-radius: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2315141a' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center;
    appearance: none; cursor: pointer; color: var(--ink);
}

.listing { display: grid; grid-template-columns: 264px 1fr; gap: 44px; padding-bottom: 80px; align-items: start; }
.filters { position: sticky; top: 110px; display: grid; gap: 30px; }
.fgroup__t { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.fswatches { display: flex; flex-wrap: wrap; gap: 9px; }
.swatch {
    width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line);
    cursor: pointer; background-size: cover; background-position: center; transition: transform .18s var(--ease), box-shadow .18s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.is-active { box-shadow: 0 0 0 2px var(--indigo); transform: scale(1.08); }
.fopts { display: grid; gap: 11px; }
.fopt { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--ink-2); cursor: pointer; }
.fopt input { accent-color: var(--indigo); width: 16px; height: 16px; }
.fopt .n { margin-left: auto; color: var(--muted); font-size: .8rem; }
.fprice { display: flex; align-items: center; gap: 10px; }
.fprice input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-family: var(--ff-body); font-size: .85rem; }
.listing .prods { grid-template-columns: repeat(3, 1fr); gap: 30px 22px; }

.pager { display: flex; justify-content: center; gap: 8px; padding-top: 50px; }
.pager a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: .88rem; border: 1px solid var(--line); color: var(--ink-2); transition: .2s; }
.pager a:hover { border-color: var(--ink); color: var(--ink); }
.pager a.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ============================================================
   FITXA DE PRODUCTE (PDP)
   ============================================================ */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; padding: 30px 0 90px; align-items: start; }
.gallery { display: grid; grid-template-columns: 76px 1fr; gap: 14px; position: sticky; top: 104px; }
.gallery__thumbs { display: grid; gap: 12px; }
.gthumb { border-radius: 12px; overflow: hidden; aspect-ratio: 3/4; cursor: pointer; border: 2px solid transparent; }
.gthumb.is-active { border-color: var(--indigo); }
.gthumb img { width: 100%; height: 100%; object-fit: cover; }
.gmain { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; background: var(--cream); position: relative; }
.gmain img { width: 100%; height: 100%; object-fit: cover; }
.gmain .card__badge { font-size: .7rem; }

.pdp__info { padding-top: 6px; }
.pdp__cat { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--indigo); font-weight: 700; }
.pdp__info h1 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin: 12px 0 14px; }
.pdp__rating { display: flex; align-items: center; gap: 9px; font-size: .85rem; color: var(--muted); margin-bottom: 18px; }
.pdp__rating .stars { color: #f2b01e; letter-spacing: 2px; }
.pdp__price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; }
.pdp__price .now { font-size: 1.7rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.pdp__price .was { color: var(--muted); text-decoration: line-through; font-size: 1.05rem; }
.pdp__price .save { background: var(--coral); color: #fff; font-size: .7rem; font-weight: 700; padding: 4px 9px; border-radius: 30px; }
.pdp__desc { color: var(--ink-2); margin-bottom: 28px; max-width: 50ch; }

.opt-block { margin-bottom: 26px; }
.opt-block__h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.opt-block__h .lbl { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.opt-block__h .val { font-size: .85rem; color: var(--muted); }
.opts { display: flex; flex-wrap: wrap; gap: 9px; }
.opt {
    padding: 10px 17px; border: 1px solid var(--line); border-radius: 40px; font-size: .84rem; font-weight: 500;
    cursor: pointer; color: var(--ink-2); transition: .18s var(--ease); background: #fff;
}
.opt:hover { border-color: var(--ink); color: var(--ink); }
.opt.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.swatch--lg { width: 40px; height: 40px; }

.buybar { display: flex; gap: 12px; margin: 30px 0 22px; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 50px; overflow: hidden; }
.qty button { width: 44px; height: 52px; border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--ink); }
.qty button:hover { color: var(--indigo); }
.qty span { width: 36px; text-align: center; font-weight: 600; }
.buybar .btn { flex: 1; justify-content: center; height: 52px; }
.pdp__usps { display: grid; gap: 11px; border-top: 1px solid var(--line); padding-top: 22px; }
.pdp__usps li { list-style: none; display: flex; align-items: center; gap: 11px; font-size: .88rem; color: var(--ink-2); }
.pdp__usps svg { width: 18px; height: 18px; stroke: var(--indigo); fill: none; stroke-width: 1.7; flex: none; }

.accordion { margin-top: 30px; border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); }
.acc summary { padding: 18px 2px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 1.3rem; color: var(--indigo); font-weight: 400; }
.acc[open] summary::after { content: "–"; }
.acc__body { padding: 0 2px 20px; color: var(--ink-2); font-size: .92rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
    .cats, .prods { grid-template-columns: repeat(3, 1fr); }
    .nav { gap: 20px; }
}
@media (max-width: 860px) {
    .header__in { grid-template-columns: auto 1fr auto; }
    .nav { display: none; }
    .hero__grid { grid-template-columns: 1fr; }
    .hero__media { min-height: 380px; }
    .hero__media::after { background: linear-gradient(0deg, var(--cream) 0%, transparent 30%); }
    .cats, .prods { grid-template-columns: repeat(2, 1fr); }
    .cat--wide { grid-column: span 2; }
    .footer__top { grid-template-columns: 1fr 1fr; }
    .shead { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 1080px) {
    .listing .prods { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .listing { grid-template-columns: 1fr; }
    .filters { position: static; grid-template-columns: repeat(2, 1fr); }
    .pdp { grid-template-columns: 1fr; gap: 30px; }
    .gallery { position: static; grid-template-columns: 1fr; }
    .gallery__thumbs { grid-template-columns: repeat(4, 1fr); grid-row: 2; }
}
@media (max-width: 520px) {
    .topbar__msg span { display: none; }
    .prods, .listing .prods { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
    .footer__top { grid-template-columns: 1fr; }
    .hero__badge { display: none; }
    .filters { grid-template-columns: 1fr; }
}