/* =========================================================================
   Let's Sell and Buy — v9 UI layer
   Loaded AFTER style.css and app.css.

   WHAT THIS FILE IS
   -----------------
   The v9 release reorganised the site: a three-column header, a mega menu,
   per-section shelves, recommendation cards, bundles, reviews, the trust
   passport. This file carries the LAYOUT for all of that, plus the visual
   language that goes with it.

   The visual language is the brand's own: a white page, navy and red from the
   logo, thin #E7E9F5 borders and one small, soft shadow. An earlier draft used
   a grey neumorphic ground with raised/inset plastic surfaces; that has been
   removed. The class names `neu-raised` / `neu-inset` survive as neutral
   SURFACE utilities so no template had to be rewritten:

        .neu-raised  →  a white card that sits on the page
        .neu-inset   →  a quiet panel, filled #F6F7FB, no fake depth

   Depth is never the only signal: every interactive surface also carries a
   border and a colour change, so pressed / active states remain obvious.
   ========================================================================= */

:root{
    /* ---- brand (from the logo) ---- */
    --navy:#363B96;        --navy-700:#2A2E78;     --navy-50:#EEF0FB;
    --red:#D7342A;         --red-600:#BD2B22;     --red-50:#FDECEA;
    --green:#16A34A;       --green-50:#E9F8EF;
    --gold:#E0A93B;        --gold-50:#FBF3E3;

    /* ---- text ---- */
    --ink:#1A1C2E;
    --ink-2:#4B4F6B;
    --muted:#8A8FB0;
    --muted-strong:#6B7091;   /* small print on tinted panels needs 4.5:1 */

    /* ---- surfaces ---- */
    --bg:#FFFFFF;
    --bg-2:#F6F7FB;
    --card:#FFFFFF;
    --line:#E7E9F5;
    --line-strong:#D8DBEC;
    --glass-brd:#E7E9F5;

    /* ---- elevation: three steps, all soft and cool-tinted ---- */
    --shadow-xs:0 1px 2px rgba(40,46,120,.06);
    --shadow:0 2px 8px rgba(40,46,120,.07);
    --shadow-md:0 6px 18px -8px rgba(40,46,120,.20);
    --shadow-lg:0 16px 40px -18px rgba(40,46,120,.26);

    /* ---- radii ---- */
    --r-sm:10px;
    --r:14px;
    --r-lg:20px;
    --r-pill:99px;

    /* The v9 templates still reference these names; they now resolve to the
       brand surfaces above instead of a neumorphic ground. */
    --neu-bg:var(--bg);
    --neu-bg-2:var(--bg-2);
    --neu-surface:#FFFFFF;
    --neu-surface-hi:#F6F7FB;
    --neu-radius-sm:var(--r-sm);
    --neu-radius-md:var(--r);
    --neu-radius-lg:var(--r-lg);
}

body{background:var(--bg);color:var(--ink)}

/* ---- compact market utility bar --------------------------------------- */
.topbar{position:relative;background:#292E72;color:#fff;border-bottom:1px solid rgb(255 255 255 / .12)}
.topbar::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;
    background:linear-gradient(90deg,var(--red) 0 18%,var(--gold) 18% 32%,transparent 32%)}
.topbar__inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
    gap:1rem;height:44px}
.topbar__flag{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;min-width:0}
.topbar__flag img{width:20px;height:14px;object-fit:cover;border-radius:2px}
.topbar__flag>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__promise{display:flex;align-items:center;justify-content:center;gap:.5rem;min-width:0;
    color:rgb(255 255 255 / .82);font-size:.78rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__promise i{width:7px;height:7px;border-radius:50%;background:#64D98B;box-shadow:0 0 0 4px rgb(100 217 139 / .14);flex:none}
.topbar__utilities,.topbar__links,.topbar__acc{display:flex;align-items:center}
.topbar__utilities{gap:.45rem}.topbar__links{gap:.35rem}
.topbar__acc{gap:.35rem;min-height:34px;padding:.25rem .55rem;border-radius:7px;font-weight:700;
    color:#fff;transition:background .18s ease}
.topbar__acc:hover{background:rgb(255 255 255 / .1)}
.topbar__acc svg{width:18px;height:18px;flex:none}
.topbar__lang{display:inline-flex;align-items:center;min-height:32px;padding:.2rem .65rem;border-radius:7px;
    border:1px solid rgb(255 255 255 / .3);font-weight:700;color:#fff;transition:.18s ease}
.topbar__lang:hover{background:#fff;color:#292E72;border-color:#fff}

/* ---- surface utilities ------------------------------------------------- */
.neu-raised,.glass,.card-solid{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r);
    box-shadow:var(--shadow);
    backdrop-filter:none;
}
.neu-inset{
    background:var(--bg-2);
    border:1px solid var(--line);
    border-radius:var(--r);
    box-shadow:none;
}
.neu-pressed{box-shadow:var(--shadow-xs)}

/* ---- accessibility ----------------------------------------------------- */
.skip-link{
    position:absolute;inset-inline-start:-9999px;top:0;z-index:200;
    background:var(--navy);color:#fff;padding:.7rem 1.2rem;
    border-radius:0 0 var(--r-sm) 0;font-weight:700;
}
.skip-link:focus{inset-inline-start:0}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
    outline:3px solid var(--navy);
    outline-offset:2px;
    border-radius:6px;
}

/* Touch targets */
.btn-primary,.btn-ghost,.btn-wa,.btn-post,.nav-toggle,.mainnav__all,.mainnav__link,
.collection,.card__fav,.chip,.drawer__link,.pager__btn{min-height:44px}
.btn-mini{min-height:36px}

/* =========================================================================
   HEADER  —  brand | banner | actions on one balanced row
   ========================================================================= */
.site-header{
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-xs);
}
.header__grid{
    display:grid;
    grid-template-columns:minmax(190px,auto) minmax(0,1fr) minmax(210px,auto);
    align-items:center;
    gap:1.25rem;
    padding-block:.7rem;
}
.brand{display:flex;align-items:center;gap:.65rem;flex-shrink:0}
.brand__logo{height:56px;width:56px;border-radius:50%;object-fit:contain;
    transition:transform .2s ease}
.brand__logo--wide{height:46px;width:auto;max-width:210px;border-radius:0;object-fit:contain}
.brand:hover .brand__logo{transform:scale(1.04)}
.brand__name{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand__name strong{font-size:1.02rem;font-weight:800;color:var(--navy);white-space:nowrap}
.brand__name small{font-size:.72rem;color:var(--muted);white-space:nowrap}

/* The banner box reserves its height up front, so nothing shifts when the
   AdSense iframe finally arrives. */
.header__banner{min-width:0}
.header__banner .adslot{margin:0}
.adslot--header{min-height:90px;display:flex;align-items:center}
.adslot--header ins{width:100%}

.housebanner{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
    min-height:90px;padding:.85rem 1.3rem;border-radius:var(--r);
    background:linear-gradient(110deg,var(--navy) 0%,var(--navy-700) 45%,#5b2f8f 100%);
    color:#fff;box-shadow:var(--shadow-md);
    transition:transform .18s ease,box-shadow .18s ease;
}
.housebanner:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.housebanner:active{transform:translateY(0)}
.housebanner__text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.housebanner__text strong{font-size:1.05rem;font-weight:800;line-height:1.25}
.housebanner__text span{font-size:.83rem;opacity:.9;line-height:1.35}
.housebanner__cta{display:inline-flex;align-items:center;gap:.4rem;flex-shrink:0;
    background:#fff;color:var(--navy);font-weight:800;font-size:.88rem;
    padding:.55rem 1.1rem;border-radius:var(--r-pill)}
.housebanner__cta svg{width:16px;height:16px}

/* ---- country header band -----------------------------------------------
   Fills the header banner slot when no advertising is configured.

   Two backgrounds, switched by viewport: the strip is a wide letterbox on a
   laptop and a much squarer block on a phone, so the owner uploads one image
   for each. Neither is ever tiled.

   .flagband--art   owner artwork, covering the whole strip.
   .flagband--flag  the fallback. A 4:3 flag cannot fill an ~11:1 box, so it is
                    shown WHOLE at the leading edge on a dark band rather than
                    cropped down to a single stripe or stretched out of shape. */
.adslot--header .flagband{margin:0}
.flagband{position:relative;display:flex;align-items:center;width:100%;min-height:90px;
    padding:.8rem 1.3rem;border-radius:var(--r);overflow:hidden;color:#fff;
    background-repeat:no-repeat;box-shadow:var(--shadow-md)}

.flagband--art{background-image:var(--flagband-img);background-size:cover;background-position:center}

.flagband--flag{background-color:#1b1e3a;background-image:var(--flagband-img);
    background-size:auto 74%;background-position:left center}
.rtl .flagband--flag{background-position:right center}

/* Scrim under the text. The flag variant needs a lighter one too: the flag is
   sized to fit rather than cropped, so on a short band it reaches under the
   line, and white text over Egypt's white stripe or Lebanon's field is
   marginal without it. */
.flagband__wash{position:absolute;inset:0;pointer-events:none}
.flagband--flag .flagband__wash{
    background:linear-gradient(90deg,rgba(10,12,28,0) 0%,rgba(10,12,28,.30) 28%,rgba(10,12,28,.62) 55%,rgba(10,12,28,.72) 100%)}
.rtl .flagband--flag .flagband__wash{
    background:linear-gradient(270deg,rgba(10,12,28,0) 0%,rgba(10,12,28,.30) 28%,rgba(10,12,28,.62) 55%,rgba(10,12,28,.72) 100%)}
.flagband--art .flagband__wash{
    background:linear-gradient(90deg,rgba(10,12,28,.86) 0%,rgba(10,12,28,.60) 34%,rgba(10,12,28,.12) 66%,rgba(10,12,28,0) 100%)}
.rtl .flagband--art .flagband__wash{
    background:linear-gradient(270deg,rgba(10,12,28,.86) 0%,rgba(10,12,28,.60) 34%,rgba(10,12,28,.12) 66%,rgba(10,12,28,0) 100%)}

.flagband__text{position:relative;display:flex;align-items:center;min-width:0}
/* Clear the flag, which sits at the leading edge. */
.flagband--flag .flagband__text{padding-inline-start:clamp(6rem,17%,10rem)}
.flagband__text span{font-size:.95rem;font-weight:600;line-height:1.4;
    text-shadow:0 1px 3px rgba(0,0,0,.5);
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

@media (max-width:900px){
    .flagband{min-height:76px;padding:.65rem .9rem}
    .flagband--art{background-image:var(--flagband-img-m)}
    .flagband--flag{background-image:var(--flagband-img-m);background-size:auto 66%}
    .flagband--flag .flagband__text{padding-inline-start:clamp(4.5rem,22%,7rem)}
    .flagband__text span{font-size:.82rem}
}


/* ---- promotional ticker shown on every category page ----------------- */
.category-promo-band{padding:.75rem 0 0;background:var(--bg)}
.category-promo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
    min-height:58px;overflow:hidden;border:1px solid color-mix(in srgb,var(--ticker-color) 24%,var(--line));
    border-radius:8px;background:color-mix(in srgb,var(--ticker-color) 7%,var(--card));box-shadow:var(--shadow-xs)}
.category-promo__label{align-self:stretch;display:flex;align-items:center;gap:.5rem;padding-inline:1rem;
    background:var(--ticker-color);color:#fff;white-space:nowrap}
.category-promo__icon{display:inline-flex}.category-promo__icon svg{width:21px;height:21px}
.category-promo__label strong{font-size:.86rem}
.category-promo__viewport{overflow:hidden;min-width:0;direction:ltr;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.category-promo__track{display:flex;width:max-content;will-change:transform;
    animation:category-ticker-rtl var(--ticker-speed,22s) linear infinite}
[dir="ltr"] .category-promo__track{animation-name:category-ticker-ltr}
.category-promo:hover .category-promo__track{animation-play-state:paused}
.category-promo__group{display:flex;align-items:center;flex:none}
[dir="rtl"] .category-promo__group{direction:rtl}
[dir="ltr"] .category-promo__group{direction:ltr}
.category-promo__group span{padding-inline:1.1rem;font-size:.84rem;font-weight:700;color:var(--ink-2);white-space:nowrap}
.category-promo__group i{width:6px;height:6px;border-radius:50%;background:var(--ticker-color);opacity:.65;flex:none}
.category-promo__cta{display:inline-flex;align-items:center;gap:.35rem;margin-inline:.55rem;padding:.5rem .8rem;
    min-height:38px;border-radius:7px;background:var(--card);border:1px solid var(--line-strong);
    color:var(--ink);font-size:.78rem;font-weight:800;white-space:nowrap;box-shadow:var(--shadow-xs)}
.category-promo__cta:hover{background:var(--ticker-color);border-color:var(--ticker-color);color:#fff}
.category-promo__cta svg{width:16px;height:16px}
@keyframes category-ticker-rtl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes category-ticker-ltr{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.header__actions{display:flex;align-items:center;justify-content:flex-end;gap:.6rem}
.header__actions .search{max-width:320px;flex:1 1 220px;
    background:#fff;border:1.5px solid var(--line);border-radius:var(--r-pill);box-shadow:none}
.header__actions .search:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-50)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:46px;height:46px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}

/* =========================================================================
   MAIN NAVIGATION  +  MEGA MENU
   ========================================================================= */
.mainnav{background:#fff;border-top:1px solid var(--line)}
.mainnav__inner{display:flex;align-items:center;gap:.6rem;padding-block:.5rem}

.mainnav__all{
    display:inline-flex;align-items:center;gap:.5rem;flex-shrink:0;
    padding:.6rem 1.15rem;border-radius:var(--r-pill);font-weight:800;font-size:.9rem;
    color:#fff;background:var(--navy);border:1px solid var(--navy);
    box-shadow:var(--shadow-xs);transition:background .18s ease,box-shadow .18s ease;
}
.mainnav__all svg{width:18px;height:18px}
.mainnav__all:hover{background:var(--navy-700);box-shadow:var(--shadow-md)}
.mainnav__all[aria-expanded="true"]{background:var(--navy-700)}
.mainnav__chev{width:14px;height:14px;transition:transform .2s ease}
.mainnav__all[aria-expanded="true"] .mainnav__chev,
.mainnav__link[aria-expanded="true"] .mainnav__chev{transform:rotate(180deg)}

.mainnav__list{display:flex;align-items:center;gap:.2rem;list-style:none;margin:0;padding:0;
    flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.mainnav__list::-webkit-scrollbar{display:none}
.mainnav__link{
    display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
    padding:.55rem .8rem;border-radius:var(--r-pill);font-size:.88rem;font-weight:700;
    color:var(--ink-2);background:none;border:1px solid transparent;transition:.18s ease;
}
.mainnav__link:hover{color:var(--c,var(--navy));background:var(--bg-2);border-color:var(--line)}
.mainnav__link[aria-expanded="true"]{color:var(--navy);background:var(--navy-50);border-color:var(--line)}
.mainnav__link .nav__ico svg{width:17px;height:17px}
.mainnav__drop{position:relative}
.mainnav__side{margin-inline-start:auto;flex-shrink:0;font-size:.85rem;font-weight:700;
    color:var(--navy);white-space:nowrap}
.mainnav__side:hover{text-decoration:underline}

/* drop cards (Discover / More) */
.dropcard{
    position:absolute;top:calc(100% + 10px);inset-inline-start:0;z-index:60;
    min-width:270px;max-height:70vh;overflow-y:auto;padding:.45rem;
    display:flex;flex-direction:column;gap:.1rem;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);
}
.dropcard__i{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:var(--r-sm);
    font-weight:700;font-size:.88rem;color:var(--ink-2);transition:.15s ease}
.dropcard__i:hover{background:var(--bg-2);color:var(--c,var(--navy))}
.dropcard__i .nav__ico{color:var(--c,var(--navy));display:inline-flex}
.dropcard__i .nav__ico svg{width:19px;height:19px}
.dropcard__i .nav__txt{flex:1;min-width:0}
.dropcard__i small{color:var(--muted);font-size:.75rem;font-weight:600}
.dropcard__i--muted{border-top:1px solid var(--line);margin-top:.25rem;padding-top:.7rem}

/* mega menu */
.megamenu{
    position:absolute;inset-inline:0;z-index:59;
    background:var(--card);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);
    max-height:76vh;overflow-y:auto;padding-block:1.4rem;
}
.megamenu[hidden]{display:none}
.megamenu__inner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem 1.6rem}
.megamenu__col{min-width:0}
.megamenu__head{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:.93rem;
    color:var(--c,var(--navy));padding-bottom:.4rem;margin-bottom:.4rem;border-bottom:2px solid var(--line)}
.megamenu__head .nav__ico svg{width:19px;height:19px}
.megamenu__head small{margin-inline-start:auto;font-size:.72rem;color:var(--muted);font-weight:700}
.megamenu__subs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.05rem}
.megamenu__subs a{display:block;padding:.28rem .4rem;border-radius:6px;font-size:.83rem;color:var(--ink-2)}
.megamenu__subs a:hover{background:var(--bg-2);color:var(--c,var(--navy))}
.megamenu__more{font-weight:700;color:var(--navy)!important}
.megamenu__foot{padding-top:1rem;margin-top:.6rem;border-top:1px solid var(--line)}
.megamenu__all{font-weight:800;color:var(--red)}
.megamenu__all:hover{text-decoration:underline}

/* =========================================================================
   MOBILE DRAWER
   ========================================================================= */
.drawer{background:var(--card);box-shadow:var(--shadow-lg)}
.drawer__head{background:var(--card);border-bottom:1px solid var(--line)}
.drawer__group{
    margin:1rem 1.2rem .3rem;font-size:.7rem;font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted);
}
.drawer__group--in{margin:.8rem 1rem .25rem}
.drawer__link{border-bottom:1px solid var(--line);align-items:center}
.drawer__link:hover{background:var(--bg-2)}
.drawer__link--cta{color:var(--red);font-weight:800}
.drawer__link--all{color:var(--navy);font-weight:700}
.drawer__link .nav__ico svg{width:20px;height:20px}

/* ---- drawer accordions --------------------------------------------------
   Fifteen sections × six subsections is far too long to print flat on a
   phone, so everything collapses behind a chevron. <details> gives keyboard
   support and a no-JS fallback for free; only the marker needs hiding. */
.dacc{border-bottom:1px solid var(--line)}
.dacc>summary{list-style:none;cursor:pointer}
.dacc>summary::-webkit-details-marker{display:none}
.dacc>summary::marker{content:""}

.dacc__sum{
    display:flex;align-items:center;gap:.6rem;
    padding:.85rem 1.2rem;min-height:48px;
    font-weight:700;font-size:.95rem;color:var(--ink);
}
.dacc__sum:hover{background:var(--bg-2)}
.dacc__sum--root{font-weight:800;color:var(--navy);background:var(--navy-50)}
.dacc__ico{width:19px;height:19px;flex-shrink:0}
.dacc__chev{width:17px;height:17px;flex-shrink:0;margin-inline-start:auto;
    color:var(--muted);transition:transform .2s ease}
.dacc[open]>summary .dacc__chev{transform:rotate(180deg)}
.dacc[open]>.dacc__sum--root{border-bottom:1px solid var(--line)}

.dacc__body{background:var(--card)}
.dacc__body>.drawer__link{padding-inline-start:1.6rem}

/* a section row inside the "all categories" accordion */
.dacc--cat{border-bottom:1px solid var(--line)}
.dacc__sum--cat{padding-inline-start:1.5rem;font-size:.9rem;font-weight:700}
.dacc__sum--cat .nav__ico{color:var(--c,var(--navy));display:inline-flex;flex-shrink:0}
.dacc__sum--cat .nav__ico svg{width:19px;height:19px}
.dacc__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dacc__sum--cat>small{color:var(--muted);font-size:.74rem;font-weight:700;flex-shrink:0}

.dacc__body--subs{background:var(--bg-2);padding:.3rem 0}
.dacc__sub{
    display:flex;align-items:center;justify-content:space-between;gap:.5rem;
    padding:.6rem 1.2rem .6rem 2.4rem;min-height:44px;
    font-size:.86rem;color:var(--ink-2);
}
[dir="rtl"] .dacc__sub{padding:.6rem 2.4rem .6rem 1.2rem}
.dacc__sub:hover{background:var(--card);color:var(--c,var(--navy))}
.dacc__sub small{color:var(--muted);font-size:.74rem;flex-shrink:0}
.dacc__sub--all{font-weight:800;color:var(--c,var(--navy))}


/* =========================================================================
   HERO + SEARCH
   ========================================================================= */
.hero{padding:3rem 0 2.4rem;background:linear-gradient(180deg,var(--navy-50) 0%,#fff 72%)}
.herofind{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);
    border-radius:var(--r-lg);padding:.7rem}
.herofind__main{background:var(--bg-2);border:1px solid var(--line);box-shadow:none}
.herofind__main:focus-within{border-color:var(--navy);background:#fff}
.herofind__main input{color:var(--ink)}
.herofind__f select{background:#fff;border:1.5px solid var(--line);box-shadow:none;
    color:var(--ink);min-height:44px}
.herofind__f select:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-50)}
.herofind__go{background:linear-gradient(135deg,var(--navy),var(--navy-700));
    box-shadow:var(--shadow-md);min-height:46px;transition:.18s ease}
.herofind__go:hover{filter:none;background:var(--navy-700);transform:translateY(-2px)}
.herofind__go:active{transform:translateY(0)}
.hero__search--slim{background:#fff;border:1.5px solid var(--line);box-shadow:var(--shadow)}
.hero__search--slim:focus-within{border-color:var(--navy)}
.hero__popular a{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-xs);
    padding:.3rem .8rem;border-radius:var(--r-pill);font-size:.83rem;font-weight:600;transition:.18s ease}
.hero__popular a:hover{border-color:var(--navy);color:var(--navy);background:var(--navy-50)}
.hero__stats{display:flex;justify-content:center;gap:1rem;margin-top:1.8rem;flex-wrap:wrap}
.hero__stats>div{display:flex;flex-direction:column;align-items:center;gap:.1rem;
    padding:.8rem 1.5rem;border-radius:var(--r);min-width:110px;
    background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.hero__stats strong{font-size:1.4rem;font-weight:800;color:var(--navy)}
.hero__stats span{font-size:.78rem;color:var(--muted);font-weight:600}

/* The commission promise sits in the exact strip between search and stats.
   Two identical groups make a seamless ticker; reduced-motion is already
   handled globally in style.css. */
.hero-commission-ticker{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
    max-width:850px;min-height:48px;margin:1.05rem auto 0;overflow:hidden;text-align:start;
    border:1px solid color-mix(in srgb,var(--green) 28%,var(--line));border-radius:10px;
    background:color-mix(in srgb,var(--green) 6%,var(--card));box-shadow:var(--shadow-xs);color:var(--ink)}
.hero-commission-ticker__badge{align-self:stretch;display:flex;align-items:center;padding-inline:.85rem;
    background:var(--green);color:#fff;font-size:.76rem;font-weight:900;letter-spacing:.02em}
.hero-commission-ticker__viewport{overflow:hidden;min-width:0;direction:ltr;
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hero-commission-ticker__track{display:flex;width:max-content;will-change:transform;
    animation:hero-commission-scroll 20s linear infinite}
.hero-commission-ticker:hover .hero-commission-ticker__track{animation-play-state:paused}
.hero-commission-ticker__group{display:flex;align-items:center;flex:none;direction:rtl;white-space:nowrap}
[dir="ltr"] .hero-commission-ticker__group{direction:ltr}
.hero-commission-ticker__group strong,.hero-commission-ticker__group span{padding-inline:.95rem;font-size:.84rem}
.hero-commission-ticker__group strong{color:var(--green);font-weight:900}
.hero-commission-ticker__group i{width:5px;height:5px;border-radius:50%;background:var(--red);flex:none}
.hero-commission-ticker__more{padding-inline:.8rem;color:var(--navy);font-size:.75rem;font-weight:800;white-space:nowrap}
@keyframes hero-commission-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="ltr"] .hero-commission-ticker__track{animation-direction:reverse}

/* =========================================================================
   SECTIONS · headings
   ========================================================================= */
.section--alt{background:var(--bg-2)}
.section--tight{padding-block:1.6rem}
/* A heading can carry a title, a subtitle, a "view all" link and a reset
   button. On a narrow phone those cannot share one line, so the row is
   allowed to wrap instead of pushing the page sideways. */
.section__head{align-items:flex-end;flex-wrap:wrap}
.section__headtext{min-width:0;flex:1 1 12rem}
.section__sub{color:var(--muted-strong);font-size:.9rem;margin-top:.2rem}
.section__tools{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;min-width:0}
.link-all{display:inline-flex;align-items:center;gap:.3rem}
.link-all:hover{text-decoration:underline}
.btn-sm{padding:.5rem 1rem;font-size:.85rem;min-height:40px}
.btn-mini--ghost{background:#fff;border:1px solid var(--line);color:var(--ink-2);
    padding:.35rem .85rem;border-radius:var(--r-pill);font-weight:700;font-size:.78rem}
.btn-mini--ghost:hover{border-color:var(--navy);color:var(--navy)}

/* =========================================================================
   SMART COLLECTIONS
   ========================================================================= */
.collections{margin-top:1.4rem}
.collections__title{font-size:1.05rem;font-weight:800;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.collections__title small{font-size:.82rem;font-weight:600;color:var(--muted-strong)}
.collections__row{display:flex;gap:.6rem;overflow-x:auto;padding:.9rem .2rem .4rem;scrollbar-width:none}
.collections__row::-webkit-scrollbar{display:none}
.collection{display:inline-flex;align-items:center;gap:.5rem;flex-shrink:0;
    padding:.6rem 1rem;border-radius:var(--r-pill);font-weight:700;font-size:.86rem;
    color:var(--ink-2);background:#fff;border:1px solid var(--line);
    box-shadow:var(--shadow-xs);transition:.18s ease}
.collection__ico{display:inline-flex;color:var(--navy)}
.collection__ico svg{width:18px;height:18px}
.collection small{background:var(--navy);color:#fff;border-radius:var(--r-pill);
    padding:.05rem .45rem;font-size:.7rem;font-weight:800}
.collection:hover{border-color:var(--navy);color:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.collection:active{transform:translateY(0)}

/* =========================================================================
   CATEGORY GRID + DISCOVER
   ========================================================================= */
.cat-grid{gap:1rem}
.cat-card{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
    border-radius:var(--r);transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--c,var(--navy))}
.cat-card:active{transform:translateY(0)}
.cat-card__ico{background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);box-shadow:none}

.discover-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.discover{padding:1.4rem;border-radius:var(--r-lg);display:flex;flex-direction:column;gap:.5rem;
    background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
    border-top:3px solid var(--c);transition:box-shadow .2s ease,transform .2s ease}
.discover:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.discover__ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;
    background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c)}
.discover__ico svg{width:26px;height:26px}
.discover h3{font-size:1.05rem;font-weight:800}
.discover h3 a{color:var(--c)}
.discover p{color:var(--ink-2);font-size:.89rem;flex:1}
.discover__foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
    padding-top:.7rem;border-top:1px solid var(--line)}
.discover__count{font-size:.8rem;color:var(--muted-strong);font-weight:700}

/* =========================================================================
   LISTING CARD
   ========================================================================= */
.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r);
    box-shadow:var(--shadow-xs);
    position:relative;overflow:hidden;
    transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
    display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.card:focus-within{box-shadow:var(--shadow-md)}
.card__media{background:linear-gradient(135deg,var(--navy-50),var(--bg-2))}

/* the whole card is one target; the favourite button sits above it */
.card__link::after{content:"";position:absolute;inset:0;z-index:1}
.card__title{margin:0}
.card__title a{color:inherit}
.card__fav{
    position:absolute;top:.5rem;inset-inline-end:.5rem;z-index:3;
    width:38px;height:38px;min-height:38px;display:grid;place-items:center;border-radius:50%;
    background:rgba(255,255,255,.94);color:var(--ink-2);border:1px solid var(--line);
    box-shadow:var(--shadow-xs);transition:.18s ease;
}
.card__fav svg{width:19px;height:19px}
.card__fav:hover{color:var(--red);border-color:var(--red)}
.card__fav.is-on{color:var(--red);background:#fff;border-color:var(--red)}
.card__fav.is-on svg{fill:currentColor}
/* ---- the ad page's favourite action -------------------------------------
   This is not the small round heart that floats over a card photo. It is a
   full-width button in the contact column, under "share", and two faults
   were reported against it on a phone.

   1. It collapsed into a circle with its label spilling out across the card.
      The (pointer:coarse) rule near the end of this file sized EVERY
      .card__fav as a 44x44 square; that is one class, exactly like
      .card__fav--wide, and it is written later, so it won on source order.
      That rule now exempts the wide variant. This block is written as
      .card__fav.card__fav--wide for the same reason in the other direction:
      .btn-ghost is declared later still and was repainting the button with
      the ghost face and border.

   2. Saved and not-saved looked alike. Pressing it now changes three things
      at once - the heart fills, the pill takes a red tint, and the label
      states the action the NEXT press performs - so the state survives a
      glance, a greyscale screen and a colour-blind reader, and never rests
      on hue alone. */
.card__fav.card__fav--wide{
    position:static;width:100%;height:auto;min-height:50px;
    display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
    padding:.8rem 1rem;border-radius:var(--r-pill);
    font-size:.95rem;font-weight:800;line-height:1.3;
    background:var(--card);color:var(--ink-2);
    border:1.5px solid var(--line-strong);box-shadow:none;
    transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.card__fav.card__fav--wide svg{width:21px;height:21px;flex:0 0 auto;transition:fill .18s ease}
.card__fav.card__fav--wide .card__fav-txt{min-width:0}
.card__fav.card__fav--wide:hover{color:var(--red);border-color:var(--red);
    background:var(--red-50);transform:none}
.card__fav.card__fav--wide.is-on{color:var(--red-600);background:var(--red-50);
    border-color:var(--red)}
.card__fav.card__fav--wide.is-on svg{fill:currentColor}
.card__fav.card__fav--wide:active{transform:scale(.99)}
.card__fav.card__fav--wide[disabled]{opacity:.55}
/* The listing-page favourite action shares the card favourite behaviour, but
   it is a normal full-width button.  It must never inherit the small card
   control's decorative pseudo-element. */
.card__fav.card__fav--wide::before{content:none}

/* ---- badges: one system, four brand colours, never more than two ---- */
.card__badges{position:absolute;top:.5rem;inset-inline-start:.5rem;z-index:2;
    display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;max-width:70%}
.card__badge{position:static;font-size:.66rem;font-weight:800;padding:.22rem .58rem;
    border-radius:var(--r-pill);color:#fff;line-height:1.5;letter-spacing:.01em;
    box-shadow:0 2px 6px rgba(26,28,46,.28)}
.card__badge--gold{background:var(--gold)}
.card__badge--navy{background:var(--navy)}
.card__badge--green{background:var(--green)}
.card__badge--red{background:var(--red)}

.card__chips{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.15rem}
.card__chip{font-size:.68rem;font-weight:700;padding:.14rem .5rem;border-radius:var(--r-pill);
    background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line)}
.card__chip--green{background:var(--green-50);color:#12823C;border-color:#BFE6CD}

/* Category and seller trust belong with the listing facts. They are repeated
   here for the compact mobile layout; desktop keeps the familiar photo tag. */
.card__context{display:none}

.listing-grid--shelf{margin-top:.2rem}

/* the "why this was recommended" line under a card */
.reccard{display:flex;flex-direction:column;gap:.35rem}
.reccard>.card{flex:1}
.reccard__why{display:flex;align-items:center;gap:.35rem;font-size:.75rem;color:var(--muted-strong);
    font-weight:600;padding-inline:.2rem;line-height:1.35}
.reccard__why svg{width:14px;height:14px;flex-shrink:0;color:var(--navy)}

/* =========================================================================
   PER-SECTION SHELVES
   ========================================================================= */
.shelves{display:flex;flex-direction:column;gap:2rem}
.shelf__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.shelf__title{display:flex;align-items:center;gap:.7rem;min-width:0}
.shelf__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;flex-shrink:0;
    background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c)}
.shelf__ico svg{width:22px;height:22px}
.shelf__title strong{display:block;font-size:1.02rem;font-weight:800;line-height:1.25}
.shelf__title small{display:block;font-size:.76rem;color:var(--muted-strong);font-weight:600}
.shelf__empty{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
    padding:1.1rem 1.3rem;border-radius:var(--r);color:var(--muted-strong);font-size:.9rem;
    background:var(--bg-2);border:1px dashed var(--line-strong)}

/* =========================================================================
   CATEGORY DIRECTORY (categories.php)
   ========================================================================= */
.catdir{display:flex;flex-direction:column;gap:1.2rem}
.catdir__cat{padding:1.3rem;border-radius:var(--r-lg);
    background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
    border-top:3px solid var(--c)}
.catdir__head{display:flex;align-items:center;gap:.7rem;padding-bottom:.8rem;margin-bottom:1rem;
    border-bottom:1px solid var(--line)}
.catdir__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
    background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c)}
.catdir__ico svg{width:22px;height:22px}
.catdir__head h2{font-size:1.05rem;font-weight:800}
.catdir__head h2 a{color:var(--c)}
.catdir__count{margin-inline-start:auto;font-size:.78rem;color:var(--muted-strong);font-weight:700}
.catdir__subs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.catdir__subhead{display:flex;align-items:baseline;justify-content:space-between;gap:.4rem;
    font-weight:800;font-size:.9rem;color:var(--ink);padding-bottom:.3rem;
    border-bottom:1px dashed var(--line-strong)}
.catdir__subhead:hover{color:var(--c)}
.catdir__subhead small{color:var(--muted);font-weight:700;font-size:.74rem}
.catdir__children{list-style:none;margin:.45rem 0 0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.catdir__children a{display:flex;align-items:baseline;justify-content:space-between;gap:.4rem;
    font-size:.82rem;color:var(--ink-2);padding:.2rem .3rem;border-radius:6px}
.catdir__children a:hover{background:var(--bg-2);color:var(--c)}
.catdir__children small{color:var(--muted);font-size:.72rem}

/* =========================================================================
   RECOMMENDATION SIGNALS PANEL (recommended.php)
   ========================================================================= */
.recsignals{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
    padding:1.1rem 1.3rem;border-radius:var(--r);margin-bottom:1.6rem;
    background:var(--bg-2);border:1px solid var(--line)}
.recsignals h2{font-size:1rem;font-weight:800;margin-bottom:.4rem}
.recsignals__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem;
    font-size:.86rem;color:var(--ink-2)}

/* =========================================================================
   BUNDLES: items, saving, readiness
   ========================================================================= */
.bundlebox__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:.9rem 0 1.2rem}
.bundlestat{padding:.9rem 1rem;border-radius:var(--r);display:flex;flex-direction:column;gap:.15rem;
    background:var(--bg-2);border:1px solid var(--line)}
.bundlestat strong{font-size:1.25rem;font-weight:800;color:var(--navy)}
.bundlestat span{font-size:.76rem;color:var(--muted-strong);font-weight:600;line-height:1.35}
.bundlestat--good{background:var(--green-50);border-color:#BFE6CD}
.bundlestat--good strong{color:#12823C}
.dtable--items td:first-child{font-weight:600}
.bundlebox__ready{font-size:1rem;font-weight:800;margin-top:1.4rem}
.bundlebox__readyline{color:var(--ink-2);font-size:.9rem;margin-top:.2rem}
.readiness{display:flex;flex-wrap:wrap;gap:.5rem;margin:.7rem 0 .5rem}
.readiness__i{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .8rem;
    border-radius:var(--r-pill);font-size:.8rem;font-weight:700;color:var(--muted-strong);
    background:var(--bg-2);border:1px solid var(--line)}
.readiness__i svg{width:15px;height:15px}
.readiness__i.is-on{color:#12823C;background:var(--green-50);border-color:#BFE6CD}

/* =========================================================================
   CO-LIVING COMPATIBILITY
   ========================================================================= */
.compat__result{display:flex;gap:1.4rem;align-items:flex-start;flex-wrap:wrap;margin:1rem 0}
.compat__dial{flex-shrink:0;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;
    text-align:center;padding:0;border:none;
    background:conic-gradient(var(--green) calc(var(--pct) * 1%), var(--line) 0)}
.compat__dial strong{font-size:1.7rem;font-weight:800;color:var(--navy);
    background:#fff;border-radius:50%;width:112px;height:112px;display:grid;place-items:center;
    box-shadow:var(--shadow-xs)}
.compat__dial span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.compat__cols{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;flex:1;min-width:240px}
.compat__cols h3{font-size:.88rem;font-weight:800;margin-bottom:.4rem}
.compat__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.compat__list li{display:flex;justify-content:space-between;gap:.6rem;font-size:.82rem;
    padding:.32rem .6rem;border-radius:8px;background:var(--bg-2)}
.compat__list span{color:var(--muted-strong)}
.compat__list--ok li{border-inline-start:3px solid var(--green)}
.compat__list--no li{border-inline-start:3px solid var(--gold)}
.compat__form{margin-top:1rem}
.compat__form summary{cursor:pointer;font-weight:800;color:var(--navy);padding:.6rem 0;
    min-height:44px;display:flex;align-items:center}
.compat__actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.9rem}

/* =========================================================================
   REVIEWS
   ========================================================================= */
.reviews__summary{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;margin:1rem 0 1.4rem}
.reviews__avg{padding:1rem 1.4rem;border-radius:var(--r);text-align:center;min-width:150px;
    background:var(--bg-2);border:1px solid var(--line)}
.reviews__avg strong{display:block;font-size:2rem;font-weight:800;color:var(--navy);line-height:1}
.reviews__avg span{display:block;font-size:.78rem;color:var(--muted-strong);font-weight:600;margin-top:.2rem}
.reviews__dist{flex:1;min-width:220px;display:flex;flex-direction:column;gap:.25rem}
.reviews__bar{display:flex;align-items:center;gap:.6rem;font-size:.76rem;color:var(--muted-strong)}
.reviews__bar>span:first-child{width:64px;flex-shrink:0}
.reviews__track{flex:1;height:8px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.reviews__track i{display:block;height:100%;background:var(--gold);border-radius:var(--r-pill)}
.reviews__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.8rem}
.reviews__item{padding:.9rem 1.1rem;border-radius:var(--r);
    background:var(--bg-2);border:1px solid var(--line)}
.reviews__head{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:.35rem}
.reviews__head time{margin-inline-start:auto;font-size:.74rem;color:var(--muted-strong)}
.reviews__badge{font-size:.68rem;font-weight:800;padding:.12rem .5rem;border-radius:var(--r-pill);
    background:#fff;color:var(--muted-strong);border:1px solid var(--line)}
.reviews__badge--ok{background:var(--green-50);color:#12823C;border-color:#BFE6CD}
.reviews__item p{font-size:.88rem;color:var(--ink-2)}
.reviews__form{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.reviews__form h3{font-size:.95rem;font-weight:800;margin-bottom:.6rem}
.reviews__gate{margin-top:1rem;padding:.8rem 1rem;border-radius:var(--r-sm);
    background:var(--bg-2);border:1px solid var(--line)}

.stars{display:inline-flex;gap:1px;vertical-align:middle}
.stars__s{width:15px;height:15px;fill:var(--line-strong)}
.stars__s--on{fill:var(--gold)}

/* =========================================================================
   TRUST PASSPORT
   ========================================================================= */
.passport{padding:1.1rem 1.2rem;border-radius:var(--r);margin-top:1rem;
    background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.passport__title{display:flex;align-items:center;gap:.5rem;font-size:.95rem;font-weight:800;
    color:var(--navy);margin-bottom:.8rem}
.passport__title svg{width:19px;height:19px}
.passport__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.passport__list li{display:flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--ink-2)}
.passport__ico{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;
    flex-shrink:0;background:var(--green-50);color:var(--green)}
.passport__ico svg{width:15px;height:15px}
.passport__label{flex:1;min-width:0}
.passport__list strong{font-weight:800;color:var(--ink)}
.passport__note{margin-top:.8rem;font-size:.73rem;color:var(--muted-strong);line-height:1.45}

/* =========================================================================
   BROWSE · filters · toolbar · empty
   ========================================================================= */
.filters{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.filters__row select,.filters__row input,.filters__pair input{
    background:#fff;border:1.5px solid var(--line);box-shadow:none;
    border-radius:var(--r-sm);min-height:44px;color:var(--ink)}
.filters__row select:focus,.filters__row input:focus,.filters__pair input:focus{
    border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-50);outline:none}
.toolbar{padding:.7rem 1rem;border-radius:var(--r);margin-bottom:1rem;
    background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-xs)}
.toolbar__sort select{background:#fff;border:1.5px solid var(--line);
    border-radius:var(--r-pill);min-height:40px;padding-inline:.8rem}
.toolbar__sort select:focus{border-color:var(--navy);outline:none}
.empty{padding:2rem 1.4rem;border-radius:var(--r-lg);text-align:center;color:var(--muted-strong);
    background:var(--bg-2);border:1px dashed var(--line-strong)}
.chips--collections{margin-top:.9rem}
.chip{background:#fff;border:1px solid var(--line);box-shadow:none;padding:.42rem .9rem}
.chip svg{width:15px;height:15px}
.chip--active{background:var(--c,var(--navy));color:#fff;border-color:var(--c,var(--navy))}

/* =========================================================================
   FORMS · post-ad · repeatable bundle items
   ========================================================================= */
.form{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.form__row input,.form__row select,.form__row textarea{
    background:#fff;border:1.5px solid var(--line);box-shadow:none;
    border-radius:var(--r-sm);min-height:44px;color:var(--ink)}
.form__row textarea{min-height:110px}
.form__row input:focus,.form__row select:focus,.form__row textarea:focus{
    border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-50);outline:none}

.bitems{display:flex;flex-direction:column;gap:.7rem;margin:.8rem 0}
.bitem{display:grid;grid-template-columns:2fr 1.2fr .7fr 1.2fr auto;gap:.6rem;align-items:end;
    padding:.8rem;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line)}
.bitem .form__row{margin:0}
.bitem__del{align-self:end;height:44px}

.wizard-bar li{background:#fff;border:1px solid var(--line)}
.wizard-bar li.is-active{border-color:var(--navy);color:var(--navy)}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn-primary{background:linear-gradient(135deg,var(--red),var(--red-600));
    box-shadow:var(--shadow-md);transition:.18s ease}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(215,52,42,.55)}
.btn-primary:active{transform:translateY(0);box-shadow:var(--shadow-xs)}
.btn-ghost{background:var(--card);border:1.5px solid var(--line);color:var(--ink-2);box-shadow:none;
    transition:.18s ease}
.btn-ghost:hover{color:var(--navy);border-color:var(--navy);background:var(--navy-50);transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(0)}
.btn-wa{background:#25D366;box-shadow:var(--shadow-md)}
.btn-wa:hover{transform:translateY(-2px)}
.btn-wa:active{transform:translateY(0)}
.btn-post{box-shadow:var(--shadow-md)}
.btn-post:active{transform:translateY(0);box-shadow:var(--shadow-xs)}
.cta__inner{border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}

/* admin: the inline "recommend" popover */
.recform{position:relative;display:inline-block}
.recform summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center}
.recform summary::-webkit-details-marker{display:none}
.recform__body{position:absolute;z-index:20;inset-inline-start:0;top:calc(100% + 6px);width:250px;
    display:flex;flex-direction:column;gap:.45rem;padding:.8rem;border-radius:var(--r);
    background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);text-align:start}
.recform__body label{display:flex;flex-direction:column;gap:.15rem;font-size:.74rem;
    font-weight:700;color:var(--muted-strong)}
.recform__body input{min-height:36px;border-radius:8px;border:1.5px solid var(--line);
    background:#fff;padding:.3rem .5rem}
.admin__note{font-size:.85rem;color:var(--ink-2);background:var(--navy-50);border:1px solid var(--line);
    padding:.8rem 1rem;border-radius:var(--r-sm);margin-bottom:1rem}

/* footer / misc surfaces */
.site-footer{border-top:1px solid var(--line)}
.botnav{background:#fff;border-top:1px solid var(--line);box-shadow:0 -2px 10px rgba(40,46,120,.06)}
.suggest{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg)}

/* -------------------------------------------------------------------------
   Grid and flex children default to `min-width:auto`, which lets wide content
   (a bundle item table, a long unbroken word) push a column past the screen.
   Every layout column is told explicitly that it may shrink, and anything
   genuinely wide scrolls inside its own box instead of the page.
   ------------------------------------------------------------------------- */
/* Mobile shows three cards per row (owner request); desktop widens to four. */
.listing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:640px){ .listing-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1024px){ .listing-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.cat-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1024px){ .cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:768px){  .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:480px){  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

.reccard,.card,.card__body,.card__meta,.card__title,.card__loc{min-width:0}
.card__title,.reccard__why,.shelf__title strong{overflow-wrap:anywhere}

.detail-grid{grid-template-columns:minmax(0,1fr) 360px}
.detail-main,.detail-side,.browse__main,.browse__side,.shelf,.catdir__cat{min-width:0}
.detail-block,.detail-desc,.bundlebox,.compatbox,.reviews__item p{overflow-wrap:anywhere}
.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dtable{min-width:520px}
@media (max-width:1024px){
    .detail-grid{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================================
   HOME ARTWORK — hero plate, sticky side rails, in-flow phone banners
   ========================================================================= */

/* ---- hero background plate ------------------------------------------------
   The artwork is decorative and sits behind the real hero markup. Both cuts
   are deliberately empty through the middle, so the title, the search bar and
   the stats stay on clean ground. A soft white scrim is laid over the plate
   so the copy keeps its contrast even where the artwork is busiest. */
.hero--media{position:relative;overflow:hidden;background:#fff}
.hero-media{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.hero-media::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(120% 85% at 50% 45%,
               rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 42%, rgba(255,255,255,0) 78%);
}
.hero-content{position:relative;z-index:1}

/* ---- three-column body: rail · content · rail ---------------------------- */
.home-with-ad-rails{
    width:min(1760px, calc(100% - 32px));
    margin-inline:auto;
    display:grid;
    grid-template-columns:
        clamp(150px, 13vw, 220px)
        minmax(0, 1fr)
        clamp(150px, 13vw, 220px);
    gap:20px;
    align-items:start;
    /* The rails are pinned physically (buy left, sell right) in both
       languages, so the grid itself never mirrors; the middle column gets the
       page direction handed back to it below. */
    direction:ltr;
}
[dir="rtl"] .home-with-ad-rails .home-rail-main{direction:rtl}
.home-rail-main{min-width:0}

.home-ad-rail{
    /* The site header is sticky and is 177px tall once the top bar has
       scrolled away (header row + category nav). Pinning at 150px would tuck
       the top of the rail behind it, so the rail parks just below instead. */
    position:sticky;
    top:200px;
    align-self:start;
}
.home-ad-rail>a,.home-ad-rail>.banner{display:block;border-radius:8px}
.home-ad-rail>.banner img{
    display:block;width:100%;height:auto;aspect-ratio:3 / 5;object-fit:cover;
    border-radius:8px;box-shadow:0 14px 35px rgba(40,46,120,.14);
}

.home-promo{position:relative;display:block;overflow:hidden;border:1px solid var(--line);
    background:var(--card);color:var(--ink);isolation:isolate;box-shadow:0 14px 35px rgba(40,46,120,.14)}
.home-promo--rail{width:100%;aspect-ratio:3 / 5;border-radius:8px}
.home-promo__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.home-promo--rail .home-promo__art{object-position:center}
.home-promo__wash{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,
    rgba(255,255,255,.98) 0%,rgba(255,255,255,.9) 24%,rgba(255,255,255,.12) 49%,
    rgba(255,255,255,.06) 68%,rgba(255,255,255,.94) 100%)}
.home-promo__content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
    padding:8% 8% 7%;text-align:center}
.home-promo__logo{display:block;width:76%;height:auto;max-height:42px;object-fit:contain;margin-bottom:.45rem}
.home-promo__kicker{font-size:clamp(.58rem,.74vw,.74rem);font-weight:800;color:var(--red);margin-bottom:.2rem}
.home-promo__content strong{font-size:clamp(.82rem,1.15vw,1.08rem);line-height:1.35;max-width:15ch}
.home-promo__content small{font-size:clamp(.56rem,.72vw,.7rem);line-height:1.45;color:var(--ink-2);margin-top:.25rem}
.home-promo__cta{margin-top:auto;display:inline-flex;align-items:center;gap:.35rem;background:var(--navy);
    color:#fff;font-size:clamp(.62rem,.82vw,.78rem);font-weight:800;padding:.55rem .8rem;border-radius:6px;
    box-shadow:0 8px 18px rgba(40,46,120,.2)}
.home-promo--sell .home-promo__cta{background:var(--red)}
.home-promo__cta b{display:inline-flex;font-size:1rem;line-height:1}
.home-promo{transition:transform .2s ease,box-shadow .2s ease}
.home-promo:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(40,46,120,.2)}

/* Below 1280px there is no room for rails beside the content. */
@media (max-width:1279px){
    .home-ad-rail{display:none}
    .home-with-ad-rails{
        width:100%;
        grid-template-columns:minmax(0,1fr);
        gap:0;
    }
}

/* ---- in-flow banner, phones only ---------------------------------------- */
.mobile-home-banner{display:none}

@media (max-width:767px){
    .mobile-home-banner{
        display:block;
        width:calc(100% - 28px);
        margin:24px auto;
        overflow:hidden;
        border-radius:8px;
        box-shadow:0 12px 28px rgba(60,57,136,.14);
    }
    .mobile-home-banner.banner img{
        display:block;width:100%;height:auto;
        aspect-ratio:9 / 5;object-fit:cover;
    }
    .home-promo--mobile{position:relative;aspect-ratio:9 / 5;border-radius:8px}
    .home-promo--mobile .home-promo__art{object-position:center}
    .home-promo--mobile .home-promo__wash{background:linear-gradient(90deg,
        rgba(255,255,255,.98) 0%,rgba(255,255,255,.88) 46%,rgba(255,255,255,.12) 72%)}
    [dir="ltr"] .home-promo--mobile .home-promo__wash{background:linear-gradient(270deg,
        rgba(255,255,255,.98) 0%,rgba(255,255,255,.88) 46%,rgba(255,255,255,.12) 72%)}
    .home-promo--mobile .home-promo__content{width:58%;padding:5%;align-items:flex-start;text-align:start}
    [dir="rtl"] .home-promo--mobile .home-promo__content{inset-inline-start:auto;inset-inline-end:0}
    [dir="ltr"] .home-promo--mobile .home-promo__content{inset-inline-start:0;inset-inline-end:auto}
    .home-promo--mobile .home-promo__logo{width:75%;max-height:30px;margin-bottom:.2rem}
    .home-promo--mobile .home-promo__kicker{font-size:.62rem}
    .home-promo--mobile .home-promo__content strong{font-size:.86rem;max-width:18ch}
    .home-promo--mobile .home-promo__content small{display:none}
    .home-promo--mobile .home-promo__cta{font-size:.65rem;padding:.4rem .55rem}
}

@media (prefers-reduced-motion:reduce){
    .home-ad-rail a:hover img{transform:none}
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1200px){
    .megamenu__inner{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1024px){
    .header__grid{grid-template-columns:minmax(160px,auto) minmax(0,1fr) auto;gap:.9rem}
    .brand__name{display:none}
    .header__actions .search{display:none}
    .discover-grid{grid-template-columns:minmax(0,1fr)}
    .catdir__subs{grid-template-columns:repeat(2,minmax(0,1fr))}
    .bundlebox__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .bitem{grid-template-columns:1fr 1fr;align-items:start}
    .bitem__del{grid-column:1/-1}
}
@media (max-width:768px){
    /* the logo and the banner stop sharing a row: the banner goes full width */
    .header__grid{grid-template-columns:1fr auto;gap:.6rem;padding-block:.6rem}
    .header__banner{grid-column:1/-1;order:3}
    .header__actions{order:2}
    .brand__name{display:flex}
    .brand__name strong{font-size:.92rem}
    .brand__logo{height:44px;width:44px}
    .brand__logo--wide{height:34px;width:auto;max-width:150px}
    .nav-toggle{display:flex}
    .mainnav__list,.mainnav__side{display:none}
    .mainnav__inner{padding-block:.45rem}
    .mainnav__all{width:100%;justify-content:center}
    .megamenu__inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
    .adslot--header{min-height:76px}
    .housebanner{min-height:76px;padding:.7rem .9rem}
    .housebanner__text strong{font-size:.94rem}
    .housebanner__text span{font-size:.76rem}
    .compat__cols{grid-template-columns:minmax(0,1fr)}
    .catdir__subs{grid-template-columns:minmax(0,1fr)}
    .reviews__summary{gap:1rem}
    .hero__stats>div{padding:.7rem 1.1rem;min-width:95px}
    .hero{padding:2.2rem 0 1.8rem}
}
@media (max-width:600px){
    .megamenu__inner{grid-template-columns:minmax(0,1fr)}
    .bundlebox__stats{grid-template-columns:minmax(0,1fr)}
    .bitem{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
    .section__tools{width:100%;justify-content:space-between}
    .section__tools .btn-mini--ghost{flex-shrink:1;min-width:0}
}
@media (max-width:420px){
    .brand__name small{display:none}
    .card__badges{max-width:72%}
    .collections__row{padding-inline:0}
}

/* A finger needs 44px even when the icon inside is small. */
@media (pointer:coarse){
    /* The wide variant is a full-width button that already clears 44px on its
       own; sizing it as a square is what squashed the ad page's control. */
    .card__fav:not(.card__fav--wide){width:44px;height:44px;min-height:44px}
}

/* Motion is decoration; the borders and colours carry the meaning without it. */
@media (prefers-reduced-motion:reduce){
    .card:hover,.cat-card:hover,.btn-primary:hover,.btn-ghost:hover,.housebanner:hover,
    .collection:hover,.discover:hover,.herofind__go:hover{transform:none}
    *{transition:none!important;animation:none!important}
}

/* High-contrast users get hard edges instead of soft shadows. */
@media (prefers-contrast:more){
    .neu-raised,.neu-inset,.glass,.card,.cat-card,.discover,.catdir__cat,.passport,.toolbar,.filters,.form{
        box-shadow:none;border-width:2px;border-color:var(--ink-2);
    }
}

/* Footer wordmark. Same asset as the header, a touch smaller. */
.footer__brand{display:inline-block;margin-bottom:1rem}
.footer__logo{height:42px;width:auto;max-width:200px;object-fit:contain;display:block}
@media (max-width:640px){.footer__logo{height:34px;max-width:165px}}


/* The proud band now shows a 4:3 national flag, not a square badge. */
.proud__logo{width:72px;height:54px;object-fit:cover;border-radius:6px;box-shadow:0 0 0 1px rgb(0 0 0 / .1);aspect-ratio:4/3}
@media (max-width:640px){.proud__logo{width:56px;height:42px}}

/* Country flag. Sized from the surrounding text so it works in an h1,
   the top bar and the footer band without three separate rules.
   !important because the theme sets img{display:block} globally. */
img.flag{display:inline-block !important;height:.72em !important;width:auto !important;
  vertical-align:-.06em;margin-inline:.3em;border-radius:2px;
  box-shadow:0 0 0 1px rgb(0 0 0 / .12)}

/* Ad lifecycle: archived states and the quotable reference. */
.pill--sold{background:#DCFCE7;color:#166534}
.pill--expired,.pill--archived{background:#F1F1F4;color:#65677A}
.btn-mini--ok{background:#16A34A;color:#fff;border-color:#16A34A}
.ad-ref{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;color:#8a8fa3;letter-spacing:.02em}

/* ---- Admin: ad review ---------------------------------------------------- */
.adrev{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.25rem;margin:1rem 0}
@media (max-width:900px){.adrev{grid-template-columns:1fr}}
.adrev__media{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;align-content:start}
.adrev__shot img{width:100%;height:130px;object-fit:cover;border-radius:.6rem;display:block}
.adrev__video{width:100%;border-radius:.6rem;grid-column:1/-1}
.adrev__nomedia{grid-column:1/-1;padding:2rem;text-align:center;border:1px dashed #d9dbe9;border-radius:.75rem;color:#8a8fa3}
.adrev__side{background:#fff;border:1px solid #E7E9F5;border-radius:.9rem;padding:1rem}
.adrev__ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.05rem;font-weight:700;margin-bottom:.4rem}
.adrev__facts{display:grid;grid-template-columns:auto 1fr;gap:.35rem .75rem;margin:.9rem 0;font-size:.9rem}
.adrev__facts dt{color:#8a8fa3}
.adrev__facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.adrev__desc{white-space:pre-wrap;background:#F6F7FB;border-radius:.6rem;padding:.75rem;font-size:.9rem;max-height:16rem;overflow:auto}
.adrev__actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;align-items:center}
.adrev__actions form{display:flex;gap:.35rem;align-items:center;margin:0}
.adrev__reject input{min-width:11rem}
.adrev__edit{margin-top:1.5rem}
.admin__search{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.75rem 0}
.admin__search input[type=search]{min-width:min(22rem,100%)}
.admin__count{margin-inline-start:auto;color:#8a8fa3;font-size:.85rem}
.admin__inline{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:0}
.admin__inline input,.admin__inline select{min-width:8rem}

/* Admin: taxonomy table. Indent shows the level at a glance. */
.cat-path{font-size:.78rem;color:#5b6070}
.cat-path--l2{padding-inline-start:1rem;opacity:.9}
.cat-path--l3{padding-inline-start:2rem;opacity:.75}
/* Marks a category that only exists in one market (a mobile network, an
   emirate plate set). Without it a national row looks like a duplicate. */
.cat-scope{display:inline-block;margin-inline-start:.4rem;padding:.05rem .35rem;border:1px solid currentColor;border-radius:.25rem;font-size:.65rem;font-weight:700;letter-spacing:.04em;color:#363B96;opacity:.85;vertical-align:middle}
.admin__hint{color:#5b6070;font-size:.9rem;margin:.5rem 0 1rem}
.admin__chk{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;white-space:nowrap}

/* =========================================================================
   Dark mode
   Only the tokens are redefined; every component already reads them. The
   brand hues are lifted, not kept, because #363B96 on a dark ground fails
   contrast — a navy that reads as ink in daylight reads as a hole at night.
   ========================================================================= */
:root[data-theme="dark"]{
    --navy:#8E95E8;        --navy-700:#A7ADEF;     --navy-50:#232647;
    --red:#FF6B5E;         --red-600:#FF8478;     --red-50:#33201E;
    --green:#4ADE80;       --green-50:#16301F;
    --gold:#F0C065;        --gold-50:#332A16;

    --ink:#E8E9F3;
    --ink-2:#B9BCD4;
    --muted:#8A8FB0;
    --muted-strong:#A2A7C6;

    --bg:#12131C;
    --bg-2:#1A1B27;
    --card:#1E2030;
    --glass:#1E2030;
    --line:#2C2F45;
    --line-strong:#3A3E59;
    --glass-brd:#2C2F45;

    --shadow-xs:0 1px 2px rgba(0,0,0,.5);
    --shadow:0 2px 8px rgba(0,0,0,.55);
    --shadow-md:0 6px 18px -8px rgba(0,0,0,.7);
    --shadow-lg:0 16px 40px -18px rgba(0,0,0,.8);

    --neu-bg:var(--bg);
    --neu-bg-2:var(--bg-2);
    --neu-surface:var(--card);
    --neu-surface-hi:var(--bg-2);

    color-scheme: dark;
}

/* "auto" means follow the OS, so the same block applies under the media query.
   It is duplicated rather than combined because :root[data-theme="dark"] must
   still win when the OS says light. */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{
    --navy:#8E95E8;        --navy-700:#A7ADEF;     --navy-50:#232647;
    --red:#FF6B5E;         --red-600:#FF8478;     --red-50:#33201E;
    --green:#4ADE80;       --green-50:#16301F;
    --gold:#F0C065;        --gold-50:#332A16;
    --ink:#E8E9F3;         --ink-2:#B9BCD4;        --muted:#8A8FB0;
    --muted-strong:#A2A7C6;
    --bg:#12131C;          --bg-2:#1A1B27;         --card:#1E2030;
    --glass:#1E2030;       --line:#2C2F45;         --line-strong:#3A3E59;
    --glass-brd:#2C2F45;
    --shadow-xs:0 1px 2px rgba(0,0,0,.5);
    --shadow:0 2px 8px rgba(0,0,0,.55);
    --shadow-md:0 6px 18px -8px rgba(0,0,0,.7);
    --shadow-lg:0 16px 40px -18px rgba(0,0,0,.8);
    --neu-bg:var(--bg);    --neu-bg-2:var(--bg-2);
    --neu-surface:var(--card); --neu-surface-hi:var(--bg-2);
    color-scheme: dark;
  }
}

/* Anything that hardcoded white rather than reading a token. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .section,
:root[data-theme="dark"] .card-solid,
:root[data-theme="dark"] .glass,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .neu-raised{background:var(--card);color:var(--ink)}
:root[data-theme="dark"] body{background:var(--bg)}
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{background:var(--bg-2);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{color:var(--muted)}
/* Photographs should not glow against a dark page. */
:root[data-theme="dark"] .card img,
:root[data-theme="dark"] .adrev__shot img{filter:brightness(.92)}

/* ---- the toggle itself ---- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:99px;border:1px solid rgb(255 255 255 / .25);
  background:transparent;color:inherit;cursor:pointer;font-size:.95rem;line-height:1;
  padding:0;margin-inline:.4rem;transition:background .15s,border-color .15s}
.theme-toggle:hover{background:rgb(255 255 255 / .12)}
.theme-toggle__moon{display:none}
:root[data-theme="dark"] .theme-toggle__sun{display:none}
:root[data-theme="dark"] .theme-toggle__moon{display:inline}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] .theme-toggle__sun{display:none}
  :root[data-theme="auto"] .theme-toggle__moon{display:inline}
}

/* Owner / admin control bar on a listing. Deliberately looks like a tool strip
   rather than part of the ad, so a buyer never mistakes it for content. */
.ownerbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;
  background:var(--bg-2);border:1px dashed var(--line-strong);border-radius:var(--r-sm);
  padding:.6rem .75rem;margin-bottom:.9rem}
.ownerbar__meta{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.ownerbar__ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;color:var(--ink-2)}
.ownerbar__views{font-size:.85rem;color:var(--ink-2)}
.ownerbar__acts{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.ownerbar__acts form{margin:0}

/* NOTE ON CASCADE ORDER
   Public pages load style.css -> app.css -> ui.css, so THIS file is the last
   word and anything that must beat an earlier rule belongs here. (The admin
   loads only style.css -> app.css, which is why admin-only modifiers live
   there instead.) The two blocks below were written against rules in this
   file and would silently lose from app.css. */

/* =========================================================================
   MOBILE — an application, not a squeezed desktop page
   =========================================================================
   Measured before this block, in Brave at 390px: the home page was 17,836px
   tall — 21 screens — and the single worst offender was the stack of fifteen
   category shelves at 8,525px, each printing a 2-across grid of four cards.

   The approach is structural rather than cosmetic:

     · every shelf becomes ONE horizontally-scrolled row, so a section costs a
       single card height instead of two rows plus a gap;
     · the hero gives up two thirds of its height and hands the first screen to
       the search field and real inventory;
     · the category grid gets denser and its icons smaller;
     · the bottom bar (Home · Browse · Post · Saved · Account) puts every
       primary task one tap away, so nothing has to be reachable by scrolling.

   Listing RESULT grids stay at two cards per row — that reads well at 320px
   and is what category, search and favourites pages use. Only the home shelves
   become sliders, because there the row is a preview with "view all" behind it.

   Everything here is inside a max-width query: the desktop layout, which is
   approved, is untouched.
   ========================================================================= */

/* ---- the fixed bottom bar must never sit on top of anything -------------- */
/* .site-main used to carry this padding, but the footer, the "proud" band and
   the cookie notice all live OUTSIDE <main> — so the bar covered the bottom of
   the footer, including the Digital Era credit. The padding belongs on <body>. */
@media (max-width:768px){
    .site-main{padding-bottom:0}
    body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
    .botnav{padding-bottom:env(safe-area-inset-bottom)}
    .cookiebar{bottom:calc(72px + env(safe-area-inset-bottom))}
}

@media (max-width:768px){

    /* ---- header: brand, search, menu. Nothing else. -------------------- */
    /* The search field was display:none below 1024px, so on every page except
       the home page there was no way to search without opening the drawer. */
    .header__grid{grid-template-columns:auto 1fr auto;align-items:center;
        gap:.5rem;padding-block:.45rem}
    .header__actions{order:0;display:flex;align-items:center;gap:.4rem;min-width:0}
    .header__actions .search{display:flex;min-width:0;flex:1;height:38px;
        padding-inline:.6rem;border-radius:99px}
    .header__actions .search input{font-size:.85rem;min-width:0}
    .header__actions .search button{display:none}     /* the icon is the button */
    .header__actions .search__icon{width:17px;height:17px}
    .brand__name{display:none}                        /* the wordmark says it */
    .brand__logo--wide{height:36px;max-width:144px}
    /* Post Ad lives in the bottom bar now; a second copy in the header only
       stole width from the search field. */
    .header__actions .btn-post{display:none}
    .header__banner{order:3}

    /* ---- hero: was 646px, over three quarters of the first screen ------- */
    .hero{padding:1rem 0 .9rem}
    .hero__title{font-size:1.32rem;line-height:1.3;margin-bottom:.15rem}
    .hero__sub{font-size:.82rem;line-height:1.45;margin-bottom:.7rem}
    .hero-media{opacity:.5}                           /* keep the art, lose the noise */
    .herofind{padding:.5rem;gap:.4rem;border-radius:16px}
    .herofind__main{padding:.45rem .6rem}
    .herofind__filters{gap:.35rem}
    .herofind__f{flex:1 1 calc(50% - .35rem);min-width:0}
    .herofind__f select{padding:.5rem;font-size:.82rem}
    .herofind__go{padding:.6rem;font-size:.9rem}
    /* the three stat pills become one quiet line instead of three big boxes */
    .hero__stats{gap:.4rem;margin-top:.7rem}
    .hero__stats>div{flex-direction:row;gap:.3rem;padding:.3rem .6rem;min-width:0;
        border-radius:99px;background:rgb(255 255 255 / .72)}
    .hero__stats strong{font-size:.9rem}
    .hero__stats span{font-size:.68rem}
    .hero__popular{font-size:.76rem;margin-top:.55rem}

    /* ---- sections: less air between, same content ---------------------- */
    .section{padding-block:1.15rem}
    .section--tight{padding-block:.9rem}
    .section__head,.shelf__head{margin-bottom:.55rem;gap:.5rem}
    .section__head h2,.shelf__title strong{font-size:1.02rem}
    .section__sub{font-size:.76rem;line-height:1.4}
    .link-all{font-size:.78rem;white-space:nowrap}

    /* ---- category grid: 2 across at 480px was the second biggest block -- */
    .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
    .cat-card{padding:.6rem .35rem;gap:.25rem;border-radius:14px}
    .cat-card__ico{width:32px;height:32px}
    .cat-card__ico svg{width:18px;height:18px}
    .cat-card__name{font-size:.74rem;line-height:1.25}
    .cat-card__count{font-size:.65rem}

    /* ---- home shelves become sliders ----------------------------------- */
    /* One row, snapped, with the next card peeking so the swipe is discoverable.
       Only .listing-grid--shelf: result grids keep their two-column layout. */
    .listing-grid--shelf{
        display:flex;gap:.6rem;overflow-x:auto;overflow-y:hidden;
        scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
        padding-bottom:.35rem;margin-inline:-14px;padding-inline:14px;
        scrollbar-width:none;
    }
    .listing-grid--shelf::-webkit-scrollbar{display:none}
    .listing-grid--shelf>*{flex:0 0 46%;scroll-snap-align:start;min-width:0}
    .shelf{margin-bottom:.2rem}
    .shelf__ico{width:28px;height:28px}
    .shelf__ico svg{width:16px;height:16px}
    .shelf__title small{font-size:.68rem}

    /* ---- cards: smaller type, same information ------------------------- */
    .listing-grid{gap:.6rem}
    .card__body{padding:.5rem .55rem .6rem}
    .card__title{font-size:.82rem;line-height:1.32;margin-bottom:.15rem}
    .card__price{font-size:.92rem}
    .card__meta,.card__loc{font-size:.7rem}
    .card__badges{gap:.25rem}
    .card__badge{font-size:.62rem;padding:.1rem .35rem}

    /* ---- the promo bands ------------------------------------------------ */
    .mobile-home-banner{margin:14px auto;width:calc(100% - 28px)}
    .cta{padding-block:1.4rem}
    .proud{padding-block:.9rem}
    .proud__text h3{font-size:.92rem}
    .proud__text p{font-size:.76rem}
}

/* The phone header keeps only identity and essentials in its top strip. */
@media (max-width:768px){
    .topbar__inner{grid-template-columns:minmax(0,1fr) auto;gap:.45rem;height:42px}
    .topbar__promise{display:none}
    .topbar__links{gap:.2rem}
    .topbar__acc{padding:.2rem .35rem;font-size:.76rem}
    .topbar__acc svg{width:17px;height:17px}
    .topbar__avatar{width:32px;height:32px;border-width:2px}
    .topbar__lang{padding:.18rem .5rem;font-size:.75rem}

    .category-promo-band{padding-top:.5rem}
    .category-promo{grid-template-columns:auto minmax(0,1fr) auto;min-height:50px}
    .category-promo__label{padding-inline:.65rem}
    .category-promo__label strong{display:none}
    .category-promo__icon svg{width:19px;height:19px}
    .category-promo__group span{font-size:.76rem;padding-inline:.75rem}
    .category-promo__cta{margin-inline:.35rem;padding:.4rem .55rem;min-height:34px}
    .category-promo__cta span{display:none}
}

/* Keep three legible cards down to the smallest phones. */
@media (max-width:400px){
    .listing-grid:not(.listing-grid--shelf){gap:.45rem}
    .listing-grid:not(.listing-grid--shelf) .card__body{padding:.45rem .45rem .55rem}
    .listing-grid:not(.listing-grid--shelf) .card__title{font-size:.76rem}
    .listing-grid:not(.listing-grid--shelf) .card__price{font-size:.84rem}
}

@media (max-width:359px){
    .topbar__flag>span{display:none}
    .topbar__acc span{display:none}
}

/* =========================================================================
   MOBILE READABILITY — larger type and fewer cramped listing cards

   The earlier compact pass fitted more content above the fold, but on a real
   phone it made category names, prices and navigation noticeably smaller than
   comparable marketplaces. This keeps the same information hierarchy while
   giving text and touch targets the room they need.
   ========================================================================= */
@media (max-width:768px){
    html{font-size:17px}
    .container{padding-inline:14px}

    .topbar__inner{height:46px}.topbar__acc,.topbar__lang{font-size:.84rem}
    .header__grid{gap:.6rem;padding-block:.55rem}.header__actions .search{height:44px}
    .header__actions .search input{font-size:.94rem}.brand__logo--wide{height:40px;max-width:156px}

    .hero{padding:1.25rem 0 1.1rem}.hero__title{font-size:1.55rem;line-height:1.3}
    .hero__sub{font-size:.96rem;line-height:1.65}.herofind__f>span{font-size:.78rem}
    .herofind__main,.herofind__f select{font-size:.94rem}.herofind__go{font-size:1rem;min-height:44px}
    .hero__stats strong{font-size:1.04rem}.hero__stats span{font-size:.78rem}
    .hero__popular{font-size:.86rem}

    .section{padding-block:1.5rem}.section--tight{padding-block:1.15rem}
    .section__head,.shelf__head{margin-bottom:.85rem}.section__head h2,.shelf__title strong{font-size:1.28rem;line-height:1.35}
    .section__sub{font-size:.88rem;line-height:1.55}.link-all{font-size:.88rem}

    .cat-grid{gap:.7rem}.cat-card{min-height:122px;padding:.85rem .45rem;gap:.42rem;border-radius:16px;justify-content:center}
    .cat-card__ico{width:44px;height:44px;border-radius:14px}.cat-card__ico svg{width:24px;height:24px}
    .cat-card__name{font-size:.91rem;line-height:1.42;font-weight:800}.cat-card__count{font-size:.75rem}

    .listing-grid:not(.listing-grid--shelf){grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
    .card__body,.listing-grid:not(.listing-grid--shelf) .card__body{padding:.72rem .72rem .8rem}
    .card__title,.listing-grid:not(.listing-grid--shelf) .card__title{font-size:.96rem;line-height:1.45;min-height:2.8em}
    .card__price,.listing-grid:not(.listing-grid--shelf) .card__price{font-size:1.08rem}
    .card__meta,.card__loc{font-size:.78rem}.card__badge{font-size:.7rem;padding:.18rem .45rem}
    .reccard__why{font-size:.8rem;line-height:1.45}.shelf__title small{font-size:.78rem}

    .discover h3,.trust-card h3,.plans--home h3{font-size:1rem}
    .discover p,.trust-card p{font-size:.86rem;line-height:1.55}.discover__count{font-size:.8rem}
    .plans--home .plan__meta,.plans--home ul{font-size:.82rem}.plans--home .plan__price{font-size:1.3rem}
    .plans--home .btn-block{font-size:.88rem;min-height:42px}

    .drawer__link,.dacc__sum{font-size:.98rem;min-height:48px}.dacc__sum--cat{font-size:.94rem}
    .category-promo__group span{font-size:.84rem}.flagband__text span{font-size:.9rem}
    .form input,.form select,.form textarea,.form__row input,.form__row select,.form__row textarea{font-size:1rem;min-height:46px}
    .btn-primary,.btn-ghost,.btn-wa{font-size:.95rem;min-height:44px}
    .botnav__i{font-size:.76rem}.botnav__i svg{width:23px;height:23px}
    .cookiebar{font-size:.84rem;line-height:1.5}
}

@media (max-width:380px){
    html{font-size:16.5px}
    .cat-card{min-height:116px}.cat-card__name{font-size:.88rem}
    .card__title,.listing-grid:not(.listing-grid--shelf) .card__title{font-size:.91rem}
    .botnav__i{font-size:.7rem}.botnav__i svg{width:21px;height:21px}
}

/* =========================================================================
   MOBILE PRODUCT-IMAGE SAFE AREA

   A product photo is the card's primary evidence. On a 166px-wide card, two
   stacked ribbons plus the category and favourite control covered roughly 41%
   of it. Mobile now reserves the photo for the product: category and trust
   move into the information area, while one compact promotional rail and a
   visually small (but still 44px tappable) favourite control remain.
   ========================================================================= */
@media (max-width:768px){
    .card__cat{display:none}
    .card__context{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem;margin:0 0 .42rem;min-width:0}
    .card__cat-inline,.card__trust{display:inline-flex;align-items:center;min-width:0;max-width:100%;
        min-height:23px;padding:.13rem .42rem;border-radius:var(--r-pill);font-size:.69rem;
        line-height:1.25;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .card__cat-inline{flex:0 1 auto}
    .card__trust{flex:0 0 auto;gap:.2rem;background:var(--green-50);color:#12823C;
        border:1px solid #BFE6CD}
    .card__trust svg{width:13px;height:13px;flex:0 0 auto}

    .card__badges{top:.38rem;inset-inline-start:.38rem;max-width:calc(100% - 3.25rem);
        flex-direction:row;align-items:center;gap:.22rem;overflow:hidden}
    .card__badge{flex:0 1 auto;min-width:0;max-width:100%;padding:.12rem .36rem;
        font-size:.64rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        box-shadow:0 1px 3px rgba(26,28,46,.22)}
    /* Verification remains visible below the image and no longer competes
       with featured/recommended status for photo space. */
    .card__badge--green{display:none}

    .card__fav:not(.card__fav--wide),.card__fav:not(.card__fav--wide).is-on{top:.14rem;inset-inline-end:.14rem;width:44px;height:44px;
        min-height:44px;background:transparent;border:0;box-shadow:none}
    .card__fav:not(.card__fav--wide)::before{content:"";position:absolute;inset:7px;border-radius:50%;
        background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:0 1px 3px rgba(26,28,46,.18)}
    .card__fav:not(.card__fav--wide).is-on::before{border-color:var(--red);background:#fff}
    .card__fav:not(.card__fav--wide) svg{position:relative;z-index:1;width:16px;height:16px}
    .card:hover .card__media img{transform:none}
}

@media (max-width:380px){
    .card__cat-inline,.card__trust{font-size:.65rem;padding-inline:.34rem}
    .card__context{gap:.22rem}
}

/* A defensive contrast fix for preview controls provided by optional modules. */
.btn-preview,.preview-btn,[data-action="preview"]{background:var(--bg-2);border:1px solid var(--line-strong);color:var(--navy-700)}
.btn-preview:hover,.preview-btn:hover,[data-action="preview"]:hover{background:var(--navy);color:#fff}

/* Dark mode is intentionally calmer than the brand-forward light theme. */
:root[data-theme="dark"]{
    --navy:#A4A8CE;--navy-700:#B8BBDD;--navy-50:#272A3D;
    --red:#D9827A;--red-600:#E49A94;--red-50:#2C1E1D;
    --green:#76B68D;--green-50:#1E3026;
    --gold:#C6A86F;--gold-50:#302A1D;
    --bg:#15161B;--bg-2:#1C1D24;--card:#22232B;--glass:#22232B;
    --line:#33353F;--line-strong:#424550;--ink:#ECECF0;--ink-2:#C4C5CE;
    --muted:#9699A7;--muted-strong:#B0B2BE;
}
:root[data-theme="dark"] .topbar{background:#20222A;color:var(--ink);border-bottom:1px solid var(--line)}
:root[data-theme="dark"] .category-promo{background:#22242B;border-color:#3A3D47}
:root[data-theme="dark"] .category-promo__cta{background:#2D2F38;border-color:#454852;color:var(--ink)}
:root[data-theme="dark"] .site-header,:root[data-theme="dark"] .mainnav{background:#1B1C22}
:root[data-theme="dark"] .hero-media::after{background:radial-gradient(120% 85% at 50% 45%,rgba(21,22,27,.9) 0%,rgba(21,22,27,.76) 48%,rgba(21,22,27,.28) 100%)}
:root[data-theme="dark"] .hero__title{background:none;color:var(--ink);-webkit-text-fill-color:var(--ink)}
:root[data-theme="dark"] .housebanner{background:#30323C;color:var(--ink);border:1px solid var(--line-strong);box-shadow:none}
:root[data-theme="dark"] .housebanner__cta{background:#E3E4EA;color:#242630}
:root[data-theme="dark"] .mainnav__all{background:#30323C;border-color:#4A4D5A;color:var(--ink)}
:root[data-theme="dark"] .home-promo__wash{background:linear-gradient(180deg,rgba(25,26,32,.98) 0%,rgba(25,26,32,.88) 27%,rgba(25,26,32,.14) 55%,rgba(25,26,32,.9) 100%)}
:root[data-theme="dark"] .home-promo__content strong,:root[data-theme="dark"] .home-promo__content small{color:var(--ink)}
:root[data-theme="dark"] .home-promo__logo{background:rgba(255,255,255,.9);padding:.2rem;border-radius:4px}
:root[data-theme="dark"] .hero__stats>div{background:rgba(34,35,43,.88)}
:root[data-theme="dark"] .hero-commission-ticker{background:#22242C;border-color:#315941;color:var(--ink)}
:root[data-theme="dark"] .hero-commission-ticker__more{color:#B8BDF4}
:root[data-theme="dark"] .hero__popular a{background:#292B33;border-color:#3D404B;color:var(--ink-2);box-shadow:none}
:root[data-theme="dark"] .cookiebar{background:#24262E;color:var(--ink);border-color:#3D404B;box-shadow:0 12px 32px rgba(0,0,0,.42)}
:root[data-theme="dark"] .cookiebar button{background:#404351;color:#fff}
:root[data-theme="dark"] .botnav{background:#1B1C22;border-color:#343640;box-shadow:0 -4px 16px rgba(0,0,0,.34)}
:root[data-theme="dark"] .botnav__i{color:var(--ink-2)}
:root[data-theme="dark"] .botnav__i.is-active{color:var(--navy-700)}
:root[data-theme="dark"] .botnav__i--cta,:root[data-theme="dark"] .botnav__i--cta.is-active{background:#A84F49;color:#fff;box-shadow:none}
@media(max-width:767px){
  .hero-commission-ticker{grid-template-columns:auto minmax(0,1fr);min-height:42px;margin-top:.7rem}
  .hero-commission-ticker__badge{padding-inline:.65rem;font-size:.68rem}
  .hero-commission-ticker__more{display:none}
  .hero-commission-ticker__group strong,.hero-commission-ticker__group span{padding-inline:.7rem;font-size:.73rem}
  :root[data-theme="dark"] .home-promo--mobile .home-promo__wash{background:linear-gradient(90deg,rgba(25,26,32,.98) 0%,rgba(25,26,32,.86) 48%,rgba(25,26,32,.14) 78%)}
  [dir="ltr"]:root[data-theme="dark"] .home-promo--mobile .home-promo__wash{background:linear-gradient(270deg,rgba(25,26,32,.98) 0%,rgba(25,26,32,.86) 48%,rgba(25,26,32,.14) 78%)}
}
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"]{
    --navy:#A4A8CE;--navy-700:#B8BBDD;--navy-50:#272A3D;--red:#D9827A;--red-600:#E49A94;--red-50:#2C1E1D;
    --green:#76B68D;--green-50:#1E3026;--gold:#C6A86F;--gold-50:#302A1D;
    --bg:#15161B;--bg-2:#1C1D24;--card:#22232B;--glass:#22232B;--line:#33353F;--line-strong:#424550;
    --ink:#ECECF0;--ink-2:#C4C5CE;--muted:#9699A7;--muted-strong:#B0B2BE;
  }
  :root[data-theme="auto"] .hero-media::after{background:radial-gradient(120% 85% at 50% 45%,rgba(21,22,27,.9) 0%,rgba(21,22,27,.76) 48%,rgba(21,22,27,.28) 100%)}
  :root[data-theme="auto"] .hero__title{background:none;color:var(--ink);-webkit-text-fill-color:var(--ink)}
}

@media (prefers-reduced-motion:reduce){
    .category-promo__track,.hero-commission-ticker__track{animation:none;transform:none}
}

/* Very narrow phones: three category tiles still fit, two cards still read. */
@media (max-width:359px){
    .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .listing-grid--shelf>*{flex:0 0 60%}
    .hero__title{font-size:1.18rem}
}

/* ---- bottom bar: five equal targets, the middle one raised -------------- */
@media (max-width:768px){
    .botnav{grid-template-columns:repeat(5,1fr);padding-top:.3rem;
        box-shadow:0 -6px 18px rgb(40 46 120 / .10)}
    .botnav__i{min-height:48px;justify-content:center;gap:.12rem;font-size:.65rem}
    .botnav__i svg{width:21px;height:21px}
    .botnav__i.is-active{color:var(--navy)}
    .botnav__i.is-active svg{stroke-width:2.4}
    .botnav__i--cta{margin:-.55rem .25rem .15rem;box-shadow:0 6px 16px -4px rgb(217 79 61 / .55)}
    .botnav__i--cta.is-active{color:#fff}
}

/* =========================================================================
   FOOTER
   =========================================================================
   Three real faults were measured in Brave at 1440px, not guessed at:

   1. The credit line rendered in rgb(107,112,145) and its link in
      rgb(54,59,150) — grey and dark blue on a navy band. "Developed by
      Digital Era" was effectively invisible. The cause: .footer__credit sat
      outside .footer__bar-inner, so it never picked up the bar's white colour,
      and its <a> fell through to the site-wide navy link colour.
   2. .footer__credit also sat outside the .container, so it ran from x=15 to
      x=1440 while the columns above it ran 127→1327. The bar and the grid did
      not share an edge.
   3. .footer__grid declared four columns but held FIVE children — the brand
      link was a grid item of its own, so it pushed a column onto a second row
      and left the block lopsided.

   The markup fix is in includes/footer.php (brand moved inside the first
   column, credit moved inside the container). These rules do the rest.
   ========================================================================= */

/* FOOTER — see the block in app.css, which owns the layout and the palette.
   Only two things are added here, because they must beat rules in this file
   or in style.css:

   The background is LIGHT (#f6f7fb, set in app.css) and deliberately so: the
   wordmark in the footer has BLACK "LET'S" and NAVY "BUY" in it and disappears
   on the navy band style.css originally painted. What nobody restated for the
   light background were the leftovers from the navy era — style.css still sets
   .footer__col a to rgba(255,255,255,.75), white on near-white — and the credit
   line sat on var(--muted-strong) #A2A7C6, which is 2.1:1 against #f6f7fb and
   fails WCAG AA outright. That is the "footer text is not properly visible"
   report, measured rather than guessed. */
.footer__col h4{color:var(--navy);margin:0 0 .85rem}
.footer__links a,.footer__col a{color:var(--ink-2)}          /* 7.4:1 */
.footer__links a:hover,.footer__col a:hover{color:var(--navy)}
.footer__impossible{display:inline-flex;align-items:center;gap:.35rem;font-weight:600}
.footer__impossible img{height:14px;width:auto;border-radius:2px}
.footer__bar-inner{color:var(--ink-2)}   /* style.css still says rgba(255,255,255,.7) */
.footer__copy,.footer__impossible{color:var(--ink-2)}
.footer__legal a{color:var(--ink-2);text-decoration:underline}
.footer__legal a:hover{color:var(--navy)}
/* ---- accordion columns -------------------------------------------------
   <details> so it works before JavaScript runs; main.js opens them from 768px
   up and the marker is removed there, so the desktop footer is a plain column
   of links exactly as it was. */
.footer__acc{border:0}
.footer__acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
    justify-content:space-between;gap:.5rem;padding:0;margin-bottom:1rem}
.footer__acc>summary::-webkit-details-marker{display:none}
.footer__links{display:flex;flex-direction:column}
.footer__links a{display:block;color:var(--ink-2);padding:.3rem 0;
    font-size:.9rem;transition:.2s}
.footer__links a:hover{color:var(--navy);padding-inline-start:.3rem}

@media (min-width:769px){
    .footer__acc>summary{cursor:default;pointer-events:none}
    .footer__acc>summary::after{content:none}
}

@media (max-width:768px){
    .footer__grid{grid-template-columns:minmax(0,1fr);gap:.2rem;padding:1.5rem 16px .9rem}
    .footer__about{margin-bottom:.6rem}
    .footer__about p{font-size:.82rem;line-height:1.6;max-width:none}
    .footer__logo{height:30px;max-width:150px}
    .footer__social{margin-top:.7rem;gap:.5rem}
    .footer__social a{width:36px;height:36px}

    .footer__acc{border-top:1px solid var(--line)}
    .footer__acc>summary{margin:0;padding:.75rem 0;min-height:44px}
    .footer__acc>summary h4{font-size:.92rem}
    /* a chevron that turns — the only affordance that says "this opens" */
    .footer__acc>summary::after{
        content:"";width:8px;height:8px;flex:none;
        border-right:2px solid var(--muted);
        border-bottom:2px solid var(--muted);
        transform:rotate(45deg);transition:transform .18s ease;margin-bottom:3px}
    .footer__acc[open]>summary::after{transform:rotate(-135deg);margin-bottom:-3px}
    .footer__links{padding-bottom:.6rem}
    .footer__links a{font-size:.85rem;padding:.32rem 0}

    .footer__bar-inner{justify-content:center;text-align:center;gap:.35rem;
        flex-direction:column;padding-block:.85rem;font-size:.78rem}
    .footer__credit{order:-1}     /* the credit reads first on a phone */
}

/* ---- home: shelves collapsed to six on phones, plus the home listing strips */
.shelves__more{display:none}
@media (max-width:768px){
    .shelves.is-collapsed .shelf:nth-of-type(n+7){display:none}
    .shelves__more{
        display:block;width:100%;margin-top:.4rem;padding:.7rem 1rem;min-height:44px;
        border:1px solid var(--line);border-radius:99px;background:#fff;
        color:var(--navy);font-weight:800;font-size:.86rem;cursor:pointer}
    .shelves__more[hidden]{display:none}

    /* The home page's own card strips scroll sideways too. Category, search and
       favourites keep the two-column grid — those pages ARE the results. */
    .home-rail-main .listing-grid:not(.listing-grid--shelf){
        display:flex;gap:.6rem;overflow-x:auto;overflow-y:hidden;
        scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
        padding-bottom:.35rem;margin-inline:-14px;padding-inline:14px;
        scrollbar-width:none}
    .home-rail-main .listing-grid:not(.listing-grid--shelf)::-webkit-scrollbar{display:none}
    .home-rail-main .listing-grid:not(.listing-grid--shelf)>*{
        flex:0 0 46%;scroll-snap-align:start;min-width:0}
}

/* 600–768px (tablet portrait) keeps the application layout — the header is
   already a hamburger here and the bottom bar is already showing — but it has
   the width for more per row than a phone does. */
@media (min-width:600px) and (max-width:768px){
    .cat-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
    .listing-grid--shelf>*,
    .home-rail-main .listing-grid:not(.listing-grid--shelf)>*{flex:0 0 31%}
    .hero__title{font-size:1.6rem}
    .shelves.is-collapsed .shelf:nth-of-type(n+9){display:none}
}
/* ---- category directory: a section list on phones, unchanged on desktop ----
   Each block is a <details open>. The inline script in footer.php closes them
   below 769px, so categories.php arrives as a scannable list of 15 headings
   instead of 19,000px of every sub-category at once. The heading is still a
   link to the section itself; only the rest of the row toggles. */
.catdir__cat>summary{list-style:none;cursor:default}
.catdir__cat>summary::-webkit-details-marker{display:none}
@media (min-width:769px){
    .catdir__cat>summary{pointer-events:none}
    .catdir__cat>summary a{pointer-events:auto}
}
@media (max-width:768px){
    .catdir__cat>summary{cursor:pointer;min-height:48px;align-items:center}
    .catdir__cat>summary::after{
        content:"";width:8px;height:8px;flex:none;margin-inline-start:auto;
        border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
        transform:rotate(45deg);transition:transform .18s ease}
    .catdir__cat[open]>summary::after{transform:rotate(-135deg)}
    .catdir{gap:.5rem}
    .catdir__cat{padding:.2rem .7rem}
    .catdir__head h2{font-size:.95rem}
    .catdir__ico{width:30px;height:30px}
    .catdir__ico svg{width:17px;height:17px}
    .catdir__count{font-size:.7rem}
    .catdir__subhead{font-size:.85rem;padding:.3rem 0}
    .catdir__children a{font-size:.8rem}
}

/* ---- the closed off-canvas drawer must not widen the page ----------------
   .drawer is position:fixed and parked with translateX(110%). At 320px in RTL
   that puts its right edge 9px past the viewport, and the document picked up a
   9px horizontal scroll — measured: scrollWidth 329 at a 320 viewport.

   The clip has to be on the ROOT, not just <body>: the drawer is position:fixed,
   so it is laid out against the viewport and a clip on <body> never contains it.
   clip rather than hidden because clip does not turn the element into a scroll
   container, so the sticky header and the sticky home rails keep working.
   The drawer is also hidden from assistive tech while it is closed, which it
   should have been anyway — pointer-events:none only stopped the mouse. */
html{overflow-x:clip}
body{overflow-x:clip}
.drawer:not(.open){visibility:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s .3s}
.drawer.open{visibility:visible;transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s}

/* =========================================================================
   AD VIDEO
   Sits under the photo gallery rather than inside it: the gallery swaps the
   src of one <img>, so a <video> placed in that slot would be wiped by the
   next thumbnail click. width:100% + height:auto keeps it responsive without
   ever pushing the page sideways, and the aspect-ratio box means the player
   reserves its space before the metadata arrives (no layout shift).
   ========================================================================= */
.advideo{margin-top:.85rem;width:100%}
.advideo video{
    display:block;width:100%;height:auto;max-height:70vh;
    background:#000;border-radius:var(--r,14px);
    aspect-ratio:16/9;object-fit:contain;
}
/* A portrait clip should not be stretched into a 16:9 letterbox. */
@supports (aspect-ratio: 1){
    .advideo video{aspect-ratio:auto}
}
.advideo__fallback{padding:1rem;color:var(--ink-2);font-size:.88rem;text-align:center}
.advideo__fallback a{color:var(--navy);text-decoration:underline}
.advideo--admin video{max-height:420px}

@media (max-width:768px){
    .advideo{margin-top:.6rem}
    .advideo video{border-radius:12px;max-height:60vh}
}

/* the video picker in the post-ad wizard */
.upload__drop--video{min-height:84px}
.form__hint--warn{color:var(--red)}

/* ===========================================================================
   VIP PLATES — the drawer, the landing page and the home banner
   The plate itself is an <svg> from includes/plates.php, so it never needs a
   width rule of its own: it carries a viewBox and scales to whatever box it is
   put in. Everything below is only the furniture around it.
   ========================================================================= */
.plate-svg{display:block;width:100%;height:auto}

/* ---- the drawer inside the post-ad wizard ------------------------------- */
.plate-drawer{margin:1rem 0 0;padding:1rem;border:1px solid var(--line-strong);
    border-radius:var(--r-lg);background:var(--bg-2)}
.plate-drawer__stage{max-width:520px;margin-inline:auto;
    filter:drop-shadow(0 10px 22px rgba(20,25,60,.18))}
.plate-drawer__note{margin:.85rem 0 0;text-align:center}

/* ---- the standalone drawer on /plates ---------------------------------- */
.platepage{display:grid;gap:1.4rem;grid-template-columns:minmax(0,1fr) minmax(0,420px);
    align-items:start}
.platepage__stage{position:sticky;top:88px;padding:1.5rem 1.25rem;border-radius:var(--r-lg);
    background:linear-gradient(160deg,#F7F8FC 0%,#E9ECF6 100%);border:1px solid var(--line-strong)}
.platepage__plate{filter:drop-shadow(0 14px 30px rgba(20,25,60,.22))}
.platepage__caption{margin:1.1rem 0 0;text-align:center;color:var(--ink-2);font-size:.9rem}
.platepage__form{display:grid;gap:.9rem}
.platepage__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.3rem}

/* ---- the home studio: a working drawer, not a poster --------------------- */
.plate-studio{position:relative;display:grid;gap:1.4rem;align-items:center;
    grid-template-columns:minmax(0,1fr) minmax(0,42%);
    padding:1.5rem;border-radius:var(--r-lg);overflow:hidden;
    background:linear-gradient(115deg,var(--navy) 0%,var(--navy-700) 52%,#5b2f8f 100%);
    color:#fff}
.plate-studio::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 140% at 88% 12%,rgba(255,255,255,.15),transparent 60%)}
.plate-studio__body{position:relative;z-index:1;min-width:0}
.plate-studio__kicker{display:inline-block;margin-bottom:.5rem;padding:.2rem .6rem;
    border-radius:99px;background:var(--gold);color:#2A2005;
    font-size:.72rem;font-weight:800;letter-spacing:.04em}
.plate-studio__title{margin:0 0 .35rem;font-size:clamp(1.1rem,2.3vw,1.5rem);
    font-weight:800;line-height:1.35;color:#fff}
.plate-studio__text{margin:0 0 1rem;color:rgba(255,255,255,.85);line-height:1.6;font-size:.92rem}

.plate-studio__fields{display:grid;gap:.6rem;
    grid-template-columns:minmax(0,1.2fr) minmax(0,.7fr) minmax(0,1fr);margin-bottom:.9rem}
.plate-studio__field{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.plate-studio__field>span{font-size:.74rem;font-weight:700;color:rgba(255,255,255,.88)}
.plate-studio__field select,.plate-studio__field input{width:100%;padding:.5rem .6rem;
    border-radius:9px;border:1px solid rgba(255,255,255,.42);
    background:rgba(255,255,255,.2);color:#fff;font:inherit;font-size:.9rem;font-weight:700}
.plate-studio__field select option{color:var(--ink);background:#fff}
.plate-studio__field input::placeholder{color:rgba(255,255,255,.55)}
.plate-studio__field select:focus,.plate-studio__field input:focus{
    outline:none;border-color:#fff;background:rgba(255,255,255,.2)}

.plate-studio__cta{margin:0 0 .6rem;font-size:.94rem;font-weight:800;color:#fff;
    line-height:1.5;display:flex;align-items:center;gap:.45rem}
.plate-studio__cta::before{content:"";flex:0 0 auto;width:4px;height:1.05em;border-radius:2px;
    background:var(--gold)}
.plate-studio__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.plate-studio__actions .btn{font-size:.88rem;padding:.55rem 1.05rem}
.plate-studio__actions .btn--primary{background:#fff;color:var(--navy);border-color:#fff}
.plate-studio__actions .btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.plate-studio__actions .btn--ghost:hover{background:rgba(255,255,255,.14)}
.plate-studio__again{padding:.5rem .3rem;background:none;border:0;color:rgba(255,255,255,.86);
    font:inherit;font-size:.86rem;font-weight:700;text-decoration:underline;cursor:pointer}
.plate-studio__again:hover{color:#fff}
/* A plate with no number is nothing to publish or download. */
.plate-studio .is-disabled,.platepage .is-disabled{opacity:.45;pointer-events:none}

.plate-studio__saved{position:relative;z-index:1;margin-top:.9rem;padding-top:.8rem;
    border-top:1px solid rgba(255,255,255,.18)}
.plate-studio__saved-label{display:block;margin-bottom:.45rem;
    font-size:.74rem;font-weight:700;color:rgba(255,255,255,.7)}
.plate-studio__saved-row{display:flex;flex-wrap:wrap;gap:.45rem}
.plate-chip{position:relative;padding:0;width:120px;border:0;border-radius:7px;background:none;cursor:pointer;
    filter:drop-shadow(0 3px 8px rgba(0,0,0,.3));transition:transform .18s ease}
.plate-chip:hover{transform:translateY(-2px)}
.plate-chip__plate{display:block}
.plate-chip .plate-svg{width:100%;height:auto;border-radius:4px}

/* ---- what the plate is FOR: the chooser and the mark --------------------
   Two labelled pictures rather than a dropdown, because the question has
   exactly two answers and this is mostly answered on a phone. The radio is
   still the control underneath, so the keyboard and the screen reader are the
   browser's job and not ours. */
.plate-kind{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .9rem}
.plate-kind__opt{display:inline-flex;align-items:center;gap:.45rem;position:relative;
    padding:.45rem .85rem;border-radius:99px;border:1px solid var(--line-strong);
    background:var(--bg-2);color:var(--ink);font-size:.84rem;font-weight:700;
    cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.plate-kind__radio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.plate-kind__icon{width:26px;height:26px;flex:0 0 auto}
.plate-kind__opt.is-on{border-color:var(--navy);background:var(--navy);color:#fff}
/* Until the script runs, the checked radio is the only thing that knows. */
.plate-kind__opt:has(.plate-kind__radio:checked){border-color:var(--navy);background:var(--navy);color:#fff}
.plate-kind__opt:has(.plate-kind__radio:focus-visible){outline:2px solid var(--gold);outline-offset:2px}

/* The same pills on the studio's dark ground. */
.plate-kind--studio .plate-kind__opt{border-color:rgba(255,255,255,.42);
    background:rgba(255,255,255,.14);color:#fff}
.plate-kind--studio .plate-kind__opt.is-on,
.plate-kind--studio .plate-kind__opt:has(.plate-kind__radio:checked){
    background:#fff;color:var(--navy);border-color:#fff}

/* The mark itself. White on every ground it appears on, because the same pill
   is drawn onto the studio photo by GD and the two should match. */
.plate-tag{display:inline-flex;align-items:center;gap:.4rem;
    padding:.34rem .8rem;border-radius:99px;
    background:#fff;color:#16203A;border:1px solid #C9D0E2;
    font-size:.82rem;font-weight:800;line-height:1}
.plate-tag__icon{width:22px;height:22px;flex:0 0 auto}
.plate-tag--stage{display:flex;width:fit-content;margin:.9rem auto 0}
.plate-chip__kind{position:absolute;inset-inline-end:3px;bottom:3px;display:inline-flex;
    padding:2px;border-radius:5px;background:rgba(255,255,255,.92);color:#16203A}
.plate-chip__kind svg{width:14px;height:14px}

/* The plate leans; the mark under it does not. */
.plate-studio__art{position:relative;z-index:1;display:grid;gap:.75rem;justify-items:center}
.plate-studio__plate{width:100%;
    filter:drop-shadow(0 16px 32px rgba(0,0,0,.34));
    transform:rotate(-2deg);transition:transform .35s ease}
.plate-studio:hover .plate-studio__plate{transform:rotate(0)}
@media (prefers-reduced-motion:reduce){
    .plate-studio__plate,.plate-chip{transition:none}
    .plate-studio:hover .plate-studio__plate{transform:rotate(-2deg)}
}

/* The saved strip appears on /plates too, where the ground is light. */
.platepage .plate-studio__saved{border-top-color:var(--line-strong)}
.platepage .plate-studio__saved-label{color:var(--ink-2)}
.platepage .plate-studio__again{color:var(--navy)}

@media (max-width:900px){
    .platepage{grid-template-columns:1fr}
    .platepage__stage{position:static}
}
@media (max-width:640px){
    .plate-studio{grid-template-columns:1fr;padding:1.2rem 1rem}
    .plate-studio__art{order:-1}
    .plate-studio__plate{transform:none}
    .plate-studio__fields{grid-template-columns:1fr 1fr}
    .plate-studio__field:last-child{grid-column:1/-1}
    .plate-studio__actions .btn{flex:1 1 auto;text-align:center}
}

/* ---- checkout (pay.php) ------------------------------------------------
   One screen for every paid thing: package, promotion, commission. The
   discount box lives here because this is the only place a price is changed,
   so what is shown and what is charged come from the same row. */
.checkout{padding:1.5rem;border-radius:var(--r);display:flex;flex-direction:column;gap:1.1rem}
.checkout__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding-bottom:.8rem;border-bottom:1px solid var(--line)}
.checkout__what{font-weight:800;font-size:1.05rem}
.checkout__ref{font-size:.8rem;color:var(--muted)}
.checkout__item{margin:0;color:var(--ink-2);font-size:.92rem}
.checkout__lines{display:flex;flex-direction:column;gap:.5rem;margin:0}
.checkout__lines>div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.checkout__lines dt{color:var(--ink-2);font-size:.92rem;display:flex;align-items:center;gap:.4rem}
.checkout__lines dd{margin:0;font-weight:600}
.checkout__was{text-decoration:line-through;color:var(--muted)}
.checkout__off{color:var(--green)}
.checkout__code{font-size:.72rem;font-weight:700;padding:.05rem .4rem;border-radius:.25rem;
    background:var(--green-50);color:var(--green)}
.checkout__total{padding-top:.6rem;border-top:1px dashed var(--line)}
.checkout__total dt{font-weight:800;color:var(--ink);font-size:1rem}
.checkout__total dd{font-size:1.5rem;font-weight:800;color:var(--navy)}
.checkout__fx{margin:0;font-size:.84rem;color:var(--muted)}
.checkout__promo{display:flex;flex-direction:column;gap:.4rem;padding:.9rem;border-radius:var(--r);
    background:var(--bg-2);border:1px dashed var(--line-strong)}
.checkout__promo label{font-size:.85rem;font-weight:700}
.checkout__promorow{display:flex;gap:.5rem}
.checkout__promorow input{flex:1;min-width:0;text-transform:uppercase}
.checkout__promo--on{flex-direction:row;align-items:center;justify-content:space-between;
    border-style:solid;border-color:var(--green);background:var(--green-50)}
.checkout__go{display:flex;flex-direction:column;gap:.5rem;margin:0}
.checkout__note{color:var(--muted);font-size:.8rem;text-align:center}
.checkout__back{text-align:center;font-size:.9rem;color:var(--muted)}
@media (max-width:600px){
    .checkout{padding:1.1rem}
    .checkout__total dd{font-size:1.3rem}
}

/* ---- inbox rows: unread badge, and removing your own copy -------------- */
.chat__row{position:relative;display:flex;align-items:stretch;gap:.25rem}
.chat__row .chat__thread{flex:1;min-width:0}
.chat__row.is-unread .chat__thread strong{font-weight:800}
.chat__row.is-unread{background:color-mix(in srgb,var(--navy) 5%,transparent);border-radius:var(--r)}
.chat__badge{display:inline-block;min-width:1.15rem;padding:0 .3rem;margin-inline-start:.35rem;
    border-radius:99px;background:var(--red);color:#fff;font-size:.68rem;font-weight:800;
    line-height:1.15rem;text-align:center;vertical-align:middle}
.chat__del{display:flex;align-items:center}
.chat__del button{background:none;border:0;cursor:pointer;color:var(--muted);padding:.35rem;
    border-radius:.35rem;line-height:0}
.chat__del button:hover{color:var(--red);background:var(--red-50,rgba(220,38,38,.08))}
.chat__del svg{width:16px;height:16px}

/* ---- a message the SITE recorded, not a person ------------------------- */
.chat__msg--system{align-self:center;max-width:min(90%,32rem);text-align:center;
    background:var(--bg-2);border:1px dashed var(--line-strong);color:var(--ink-2);
    font-size:.82rem;border-radius:var(--r)}
.chat__msg--system time{opacity:.7}

/* ---- unread badges: bottom bar and header inbox ------------------------ */
.botnav__ico{position:relative;display:inline-flex}
.botnav__badge,.topbar__badge{position:absolute;top:-5px;inset-inline-end:-8px;
    min-width:16px;height:16px;padding:0 4px;border-radius:99px;
    background:#E11D48;color:#fff;font-size:.62rem;font-weight:800;line-height:16px;
    text-align:center;font-style:normal;box-shadow:0 0 0 2px var(--card,#fff)}
.topbar__inbox{position:relative;display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:50%;color:inherit}
.topbar__inbox svg{width:18px;height:18px}
.topbar__inbox:hover{background:rgba(255,255,255,.12)}
.topbar__badge{box-shadow:0 0 0 2px var(--navy,#363B96)}
/* The badge is decorative; the count is announced through the link's label. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Six items now that Messages is in the bar, not five. On the narrowest
   phones the labels need a little less room to stay on one line each. */
@media (max-width:380px){
    .botnav__i{font-size:.6rem}
    .botnav__i svg{width:19px;height:19px}
}

/* ---- saves (likes) counter in "my ads" -------------------------------- */
.saves{display:inline-flex;align-items:center;gap:.3rem;color:var(--muted);font-weight:600}
.saves--on{color:var(--red)}
.saves svg{width:15px;height:15px}

/* =========================================================================
   PHONE: two cards per row for the three "story" sections
   =========================================================================
   Discover, Merchant packages and Why choose us each carried three cards and
   each dropped to ONE per row on a phone. Together they ran about 2,400px —
   a quarter of the whole home page — to say nine short things, and the reader
   had to scroll past all of it to reach the listings.

   Two per row, with the amount of copy deciding how hard each one is
   compacted: the trust cards are a title and one line, the discover cards add
   a sentence and a footer, the plan cards carry a price and a perk list and
   need the most trimming.

   THE THIRD CARD SPANS BOTH COLUMNS. Three items in two columns otherwise
   leaves the last one stranded as a half-width orphan; full width reads as a
   deliberate finish to the row. `:last-child:nth-child(odd)` handles any odd
   count and leaves even ones alone.
   ========================================================================= */
@media (max-width:768px){

    /* ---- Discover: title + a sentence + a footer ---- */
    .discover-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
    .discover{padding:.9rem;gap:.4rem;border-radius:var(--r)}
    .discover__ico{width:38px;height:38px;border-radius:11px}
    .discover__ico svg{width:20px;height:20px}
    .discover h3{font-size:.9rem;line-height:1.35}
    /* Clamped rather than shortened: the full sentence still reaches a wide
       screen, and a card that grows with its text would break the row. */
    .discover p{font-size:.78rem;line-height:1.45;
        display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
    .discover__foot{flex-direction:column;align-items:stretch;gap:.35rem;padding-top:.5rem}
    .discover__count{font-size:.72rem}
    .discover__foot .btn-ghost{width:100%;justify-content:center;font-size:.75rem;padding:.35rem .5rem}
    .discover-grid>.discover:last-child:nth-child(odd){grid-column:1/-1}

    /* ---- Merchant packages: the most copy, so the most trimming ---- */
    .plans--home{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
    .plans--home .plan{padding:.95rem .8rem;border-width:1.5px}
    .plans--home .plan__flag{font-size:.62rem;padding:.1rem .5rem;inset-inline-start:.6rem}
    .plans--home h3{font-size:.85rem;margin-bottom:.15rem}
    .plans--home .plan__price{font-size:1.15rem;line-height:1.25}
    .plans--home .plan__meta{font-size:.7rem;margin-bottom:.35rem}
    /* "Who it is for" is the first thing to go: the perks say it better. */
    .plans--home .plan__for{display:none}
    .plans--home ul{font-size:.72rem;gap:.2rem;margin-bottom:.6rem}
    /* Two perks, not three. The third is the least distinguishing and the
       full list is one tap away on the packages page. */
    .plans--home li:nth-child(n+3){display:none}
    .plans--home .btn-block{font-size:.78rem;padding:.45rem .6rem}
    /* The odd card out spans the row, so it gets a horizontal layout instead
       of a column of text against an empty half. */
    .plans--home>.plan:last-child:nth-child(odd){grid-column:1/-1;
        display:grid;grid-template-columns:auto minmax(0,1fr);
        column-gap:.9rem;align-items:center}
    .plans--home>.plan:last-child:nth-child(odd) h3,
    .plans--home>.plan:last-child:nth-child(odd) .plan__price,
    .plans--home>.plan:last-child:nth-child(odd) .plan__meta{grid-column:1;margin:0}
    .plans--home>.plan:last-child:nth-child(odd) ul{grid-column:2;grid-row:1/4;margin:0;align-self:center}
    .plans--home>.plan:last-child:nth-child(odd) .btn-block{grid-column:1/-1;margin-top:.6rem}

    /* ---- Why choose us: a title and one line, so the least trimming ---- */
    .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
    .trust-card{padding:1rem .75rem;border-radius:var(--r)}
    .trust-card__ico{width:42px;height:42px;border-radius:13px;margin-bottom:.5rem}
    .trust-card__ico svg{width:22px;height:22px}
    .trust-card h3{font-size:.9rem;margin-bottom:.2rem}
    .trust-card p{font-size:.76rem;line-height:1.45}
    .trust-grid>.trust-card:last-child:nth-child(odd){grid-column:1/-1}
}

/* Very narrow phones: the two columns stay, the type gives way instead. */
@media (max-width:360px){
    .discover h3,.trust-card h3,.plans--home h3{font-size:.82rem}
    .discover p,.trust-card p{font-size:.73rem}
    .plans--home .plan__price{font-size:1.05rem}
}

/* =========================================================================
   Home page: search first on a phone, category bar first on a laptop
   =========================================================================
   The bar renders AFTER the hero in the markup, which is what a phone wants —
   you land on the search, not on a list of sections. A laptop has room for
   both above the fold, and the bar belongs under the header there, so it is
   ordered back up. Only this page is affected; every other page keeps the bar
   between the header and the content. */
@media (min-width:769px){
    .site-main--navflow{display:flex;flex-direction:column}
    .site-main--navflow>.mainnav{order:-1}
}

/* The top bar repeats the flag band directly beneath it. On a phone that row
   is the most crowded on the page, so the words go and the flag stays. */
@media (max-width:768px){
    .topbar__proud{display:none}
    .topbar__flag{gap:0}
}

/* -------------------------------------------------------------------------
   Pricing grid on /packages.php — two per row on a phone, like the home page
   ------------------------------------------------------------------------- */
@media (max-width:768px){
    .plans--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
    .plans--3 .plan{padding:.95rem .8rem}
    .plans--3 .plan input{inset-inline-end:.55rem;top:.55rem}
    .plans--3 .plan__flag{font-size:.62rem;padding:.1rem .5rem;inset-inline-start:.6rem}
    .plans--3 h3{font-size:.85rem;margin-bottom:.15rem}
    .plans--3 .plan__price{font-size:1.15rem;line-height:1.25}
    .plans--3 .plan__meta{font-size:.7rem;margin-bottom:.35rem}
    .plans--3 .plan__for{font-size:.72rem;margin-bottom:.4rem}
    .plans--3 ul{font-size:.72rem;gap:.2rem}
    /* Same rule as the home page: an odd last card spans rather than sitting
       stranded at half width. */
    .plans--3>.plan:last-child:nth-child(odd){grid-column:1/-1}
}

/* The business name now leads the order, so it gets the width of the grid
   rather than the narrow column the button sits in. */
.plans-form__who{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.plans-form__who label{font-weight:700;font-size:.92rem}
.plans-form__who input{width:100%}
.plans-form{max-width:1000px;margin-inline:auto}

/* Commission: the discount-code hint under the button. */
.commission-summary__promo{display:block;margin-top:.5rem;font-size:.8rem;color:var(--muted);text-align:center}

/* -------------------------------------------------------------------------
   Forms on a phone: stop the padding stacking
   -------------------------------------------------------------------------
   A field on /post-ad.php sat inside three nested paddings — the page
   container, the form card, then the fieldset — which on a 375px screen ate
   62px per side and left 248px for the input itself. Each level was
   symmetric; the total was not affordable. Trimmed to about 40px per side,
   which gives the fields ~19% more room and keeps every edge aligned.

   Desktop is untouched: the generous padding is right when there is room. */
@media (max-width:768px){
    .form{padding-inline:.85rem}
    .form__section{padding-inline:.55rem}
    /* The fieldset legend and the fields now share one left edge. */
    .form__section>legend,.commission-step{padding-inline:0}
}

/* When the owner has uploaded their own band artwork, the motto is NOT printed
   over it. Designed artwork carries its own words, and ours landed on top of
   them. The line stays on the flag fallback, where it is the only caption. */
.flagband--art .flagband__text,
.flagband--art .flagband__wash{display:none}
.checkout__min{margin:0;font-size:.84rem;font-weight:600;color:var(--gold);
    background:var(--gold-50);border:1px solid var(--gold);border-radius:var(--r);padding:.6rem .8rem}

/* =========================================================================
   RELEASE: Saudi plates · number reveal · notifications · inbox states
   ·  ad validity
   ========================================================================= */

/* ---- the Saudi plate ---------------------------------------------------- */
/* The plate is 2.16:1, not the UAE's 4.7:1, so a stage sized for a letterbox
   leaves a Saudi plate floating in a tall empty box. The stage tracks the
   drawing instead of the other way round. */
.plate-svg--ksa{max-width:100%}
.platepage__plate .plate-svg--ksa,
.plate-drawer__stage .plate-svg--ksa{max-width:420px;margin-inline:auto}
.plate-studio__art .plate-svg--ksa{max-width:340px;margin-inline:auto}

/* The letters box is typed in either script, so it is centred and set large —
   it holds three characters, not a sentence. */
input[data-plate-letters]{text-align:center;letter-spacing:.28em;
    font-size:1.15rem;font-weight:800;text-transform:uppercase}
[data-plate-letters-hint]{display:block;min-height:1.2em}

/* ---- "show number" ----------------------------------------------------- */
.reveal-btn{position:relative;display:flex;align-items:center;justify-content:center;
    gap:.5rem;flex-wrap:wrap}
.reveal-btn__mask{font-weight:800;letter-spacing:.06em;opacity:.75;
    font-variant-numeric:tabular-nums}
.reveal-btn.is-busy{opacity:.72;pointer-events:none}
.price-card__actions [hidden]{display:none!important}
.reveal-note{margin:.45rem 0 0;font-size:.82rem;color:var(--ink-2);text-align:center}
[data-reveal-number]{font-weight:800;letter-spacing:.04em;
    font-variant-numeric:tabular-nums}

/* ---- notifications ----------------------------------------------------- */
.notif-list{display:grid;gap:.55rem}
.notif{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem .95rem;
    border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
    color:inherit;text-decoration:none;transition:border-color .16s,transform .16s}
a.notif:hover{border-color:var(--navy);transform:translateY(-1px)}
/* Unread is a left/right edge, not a background wash: a list where half the
   rows are tinted stops reading as a list. */
.notif.is-new{border-inline-start:3px solid var(--navy);background:var(--bg-2)}
.notif__mark{flex:0 0 34px;height:34px;display:grid;place-items:center;
    border-radius:50%;background:var(--bg-2);color:var(--navy)}
.notif.is-new .notif__mark{background:var(--navy);color:#fff}
.notif__icon{width:18px;height:18px}
.notif__body{display:grid;gap:.2rem;min-width:0}
.notif__body strong{font-size:.94rem;line-height:1.45}
.notif__body span{color:var(--ink-2);font-size:.86rem;overflow-wrap:anywhere}
.notif__body time{color:var(--muted-strong);font-size:.76rem}
.notif__new{display:inline-block;margin-inline-start:.4rem;padding:.05rem .4rem;
    border-radius:999px;background:var(--navy);color:#fff;font-size:.68rem;
    font-style:normal;font-weight:700;vertical-align:middle}
.notif-actions{display:flex;gap:.5rem;align-items:center;margin-top:1rem}
.topbar__bell{margin-inline-start:.15rem}

/* ---- inbox: filters and states ---------------------------------------- */
.chat__tabs{display:flex;flex-wrap:wrap;gap:.3rem;margin:.5rem 0 .8rem}
.chat__tab{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem;
    border:1px solid var(--line);border-radius:999px;font-size:.82rem;
    color:var(--ink-2);text-decoration:none}
.chat__tab small{padding:0 .32rem;border-radius:999px;background:var(--bg-2);
    font-size:.72rem;font-variant-numeric:tabular-nums}
.chat__tab.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.chat__tab.is-on small{background:rgba(255,255,255,.22);color:#fff}
.chat__state{display:inline-block;margin-top:.2rem;padding:.05rem .4rem;
    border-radius:999px;font-size:.7rem;font-style:normal;font-weight:700}
.chat__state--new{background:var(--navy);color:#fff}
.chat__state--read{background:var(--bg-2);color:var(--ink-2)}
.chat__state--closed{background:var(--bg-2);color:var(--muted-strong)}
/* A closed conversation is dimmed, never hidden: it is still there and one
   reply brings it back. */
.chat__row.is-closed .chat__thread{opacity:.68}
.chat__rowacts{display:flex;flex-direction:column;gap:.15rem}
.chat__rowacts button{display:grid;place-items:center;width:26px;height:26px;
    padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted-strong);
    cursor:pointer}
.chat__rowacts button:hover{background:var(--bg-2);color:var(--ink)}
.chat__rowacts svg{width:15px;height:15px}
.chat__headact{margin-inline-start:auto}
.chat__closednote{margin:.6rem .8rem 0}

/* ---- ad validity ------------------------------------------------------- */
/* Doubled class on purpose: this line lives inside .dtable, whose `.dtable
   small` rule is more specific than a single class and was quietly winning the
   colour — so the urgent state came out muted grey like every other row. */
.ad-expiry.ad-expiry{display:block;margin-top:.25rem;font-size:.76rem;
    color:var(--muted-strong);font-variant-numeric:tabular-nums}
/* Emphasised only inside the reminder window. A badge that shouts for 60 days
   is a badge nobody reads on day 59. */
.ad-expiry.ad-expiry--soon{color:#B4231F;font-weight:700}
:root[data-theme="dark"] .ad-expiry.ad-expiry--soon{color:#FF8E86}
.ad-hold-reason{display:block;margin-top:.3rem;max-width:28rem;color:#B4231F!important;font-size:.76rem;line-height:1.45;font-weight:700}
:root[data-theme="dark"] .ad-hold-reason{color:#FF8E86!important}
.validity-note{color:var(--ink-2)}

@media (max-width:768px){
    .plate-studio__art .plate-svg--ksa,
    .platepage__plate .plate-svg--ksa{max-width:100%}
    .notif{padding:.7rem .75rem}
    .chat__rowacts{flex-direction:row}
}