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

/* ---- 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{width:auto;border-radius:8px}
.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}

.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.
   ------------------------------------------------------------------------- */
.listing-grid{grid-template-columns:repeat(2,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(1600px, calc(100% - 32px));
    margin-inline:auto;
    display:grid;
    grid-template-columns:
        clamp(120px, 11vw, 180px)
        minmax(0, 1fr)
        clamp(120px, 11vw, 180px);
    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{display:block;border-radius:22px}
.home-ad-rail img{
    display:block;width:100%;height:auto;
    aspect-ratio:1 / 2;object-fit:cover;
    border-radius:22px;
    box-shadow:0 14px 35px rgba(60,57,136,.16);
    transition:transform .2s ease, box-shadow .2s ease;
}
.home-ad-rail a:hover img{transform:translateY(-3px);box-shadow:0 18px 42px rgba(60,57,136,.22)}

/* 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:20px;
        box-shadow:0 12px 28px rgba(60,57,136,.14);
    }
    .mobile-home-banner img{
        display:block;width:100%;height:auto;
        aspect-ratio:9 / 5;object-fit:cover;
    }
}

@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}
    .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);
    }
}