/* =========================================================================
   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;
    --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 only under the text, and only over artwork — the flag fallback sits on
   a dark band already and does not need dimming. */
.flagband__wash{position:absolute;inset:0;pointer-events:none}
.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:#fff;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:#fff;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:#fff;box-shadow:var(--shadow-lg)}
.drawer__head{background:#fff;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:#fff}
.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:#fff;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}

/* =========================================================================
   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}
.card__fav--wide{position:static;width:auto;height:auto;border-radius:var(--r-pill);
    gap:.5rem;display:inline-flex}

/* ---- 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}

.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:#fff;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){
    .card__fav{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;
    --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;
    --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))}
    .fab-wa{bottom:calc(76px + env(safe-area-inset-bottom));width:48px;height:48px}
    .fab-wa svg{width:26px;height:26px}
}

@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}
}

/* 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;
    --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__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){
  :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;
    --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{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{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}

.plate-studio__art{position:relative;z-index:1;
    filter:drop-shadow(0 16px 32px rgba(0,0,0,.34));
    transform:rotate(-2deg);transition:transform .35s ease}
.plate-studio:hover .plate-studio__art{transform:rotate(0)}
@media (prefers-reduced-motion:reduce){
    .plate-studio__art,.plate-chip{transition:none}
    .plate-studio:hover .plate-studio__art{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{transform:none;order:-1}
    .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}
}