/* Native cross-fade between page navigations (listing → listing, listing →
   product and back) — no JS router needed, supporting browsers animate the
   swap automatically; everywhere else this is simply ignored. */
@view-transition{ navigation:auto; }

:root{
  --paper:#EDEEE4; --paper-raised:#FBFAF2; --paper-sunken:#E3E4D6;
  --ink:#1B211D; --ink-soft:#575D51; --ink-faint:#8A8F7E;
  --line:#CBC7B3; --line-strong:#B7B29A;
  --stamp:#C6491A; --stamp-ink:#96350F;
  --verify:#2F5D50; --gold:#A6791C;
  --radius:3px;
  --serif:Rockwell,"Roboto Slab","Bitter",Georgia,"Iowan Old Style",serif;
  --sans:"Segoe UI","Noto Sans","Helvetica Neue",Arial,sans-serif;
  --mono:Consolas,"SFMono-Regular","Roboto Mono",Menlo,"Liberation Mono",monospace;
  /* Fixed dark surface pair — deliberately NOT part of the --ink/--paper
     swap above (those flip meaning between light/dark mode). Used by the
     footer and the category sub-nav band so they read as one consistent
     "dark shelf label" surface regardless of site theme. */
  --footer-bg:#14170F;
  --footer-fg:#ECE8DC;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#14170F; --paper-raised:#1D2118; --paper-sunken:#10120C;
    --ink:#ECE8DC; --ink-soft:#B2AE98; --ink-faint:#787461;
    --line:#3A3B2E; --line-strong:#4B4C3B;
    --stamp:#EA7A42; --stamp-ink:#FFB98C;
    --verify:#6FB79B; --gold:#D3A83F;
  }
}
:root[data-theme="dark"]{
  --paper:#14170F; --paper-raised:#1D2118; --paper-sunken:#10120C;
  --ink:#ECE8DC; --ink-soft:#B2AE98; --ink-faint:#787461;
  --line:#3A3B2E; --line-strong:#4B4C3B;
  --stamp:#EA7A42; --stamp-ink:#FFB98C;
  --verify:#6FB79B; --gold:#D3A83F;
}
:root[data-theme="light"]{
  --paper:#EDEEE4; --paper-raised:#FBFAF2; --paper-sunken:#E3E4D6;
  --ink:#1B211D; --ink-soft:#575D51; --ink-faint:#8A8F7E;
  --line:#CBC7B3; --line-strong:#B7B29A;
  --stamp:#C6491A; --stamp-ink:#96350F;
  --verify:#2F5D50; --gold:#A6791C;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:15px}
a{text-decoration:none;color:inherit}

.topbar{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.topbar-inner{max-width:1200px;margin:0 auto;padding:16px 14px 0}
.brand-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.logo{font-family:var(--serif);font-weight:700;font-size:22px;display:flex;align-items:center;gap:8px;white-space:nowrap;letter-spacing:-.01em}
.search-wrap{position:relative;flex:1;min-width:240px}
.search{width:100%;height:44px;border:1px solid var(--line-strong);border-radius:var(--radius);padding:0 14px 0 42px;outline:none;background:var(--paper-raised);color:var(--ink);font-size:14px;font-family:var(--sans)}
.search:focus-visible{outline:2px solid var(--stamp);outline-offset:1px}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-faint);display:flex}
.header-controls{display:flex;align-items:center;gap:8px;margin-left:auto;font-family:var(--mono);font-size:12px}
.language-picker{height:38px;border:1px solid var(--line-strong);border-radius:999px;background:var(--paper-raised);padding:0 28px 0 12px;color:var(--ink);font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--mono)}
.chips{display:flex;gap:2px;align-items:center;flex-wrap:wrap;flex-basis:100%;overflow-x:auto;border-top:1px solid var(--line);border-bottom:2px solid var(--ink);padding-top:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{padding:9px 14px 11px;font-size:12px;letter-spacing:.03em;color:var(--ink-soft);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-2px;font-family:var(--mono);transition:color .15s ease,border-color .15s ease}
.chip:hover{color:var(--ink);border-bottom-color:var(--line-strong)}
.chip.active{color:var(--ink);border-bottom-color:var(--stamp);font-weight:700}
.currency-picker{position:relative}
.currency-button{height:38px;padding:0 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--paper-raised);color:var(--ink);display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;white-space:nowrap;font-family:var(--mono)}
.currency-label{font-weight:700}.currency-current{color:var(--ink-soft)}
.currency-menu{position:absolute;right:0;top:46px;z-index:80;min-width:190px;background:var(--paper-raised);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 10px 28px -14px rgba(20,20,10,.4);padding:6px;display:none}
.currency-menu.open{display:block}
.currency-option{width:100%;border:0;background:transparent;border-radius:2px;padding:9px 10px;text-align:left;cursor:pointer;font-size:12.5px;color:var(--ink);font-family:var(--mono)}
.currency-option:hover,.currency-option.active{background:var(--paper-sunken);color:var(--stamp-ink);font-weight:700}

.container{max-width:1200px;margin:18px auto 60px;padding:0 14px}
.section-title{display:flex;align-items:baseline;justify-content:space-between;margin:16px 0 12px;gap:12px;flex-wrap:wrap}
.section-title h1{font-family:var(--serif);margin:0;font-size:24px;font-weight:700;text-wrap:balance}
.meta{font-size:12.5px;color:var(--ink-faint);font-family:var(--mono)}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 16px;flex-wrap:wrap}
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px}
.filters label{display:flex;align-items:center;gap:7px;color:var(--ink-faint);font-family:var(--mono);font-size:11.5px;letter-spacing:.03em}
.filters select{height:36px;border:1px solid var(--line-strong);border-radius:2px;background:var(--paper-raised);color:var(--ink);padding:0 26px 0 10px;font-family:var(--sans);font-size:13px;font-weight:600}
.price-filter{display:flex;align-items:center;gap:6px}
.price-filter input{width:66px;height:36px;border:1px solid var(--line-strong);border-radius:2px;background:var(--paper-raised);color:var(--ink);padding:0 8px;font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.price-filter span.sep{color:var(--ink-faint);font-family:var(--mono);font-size:12px}
.price-filter button,.price-filter .price-apply{height:36px;padding:0 16px;border:1px solid var(--stamp);border-radius:2px;background:var(--stamp);color:#FFF8EF;font-family:var(--sans);font-size:12.5px;font-weight:700;cursor:pointer}
.price-filter button:hover,.price-filter .price-apply:hover{opacity:.88;border-color:var(--stamp)}
.price-filter .clear-link{font-family:var(--mono);font-size:11px;color:var(--ink-faint);white-space:nowrap}
.price-filter .clear-link:hover{color:var(--stamp-ink)}

.value-band{background:var(--paper-sunken);border-bottom:1px solid var(--line)}
.value-band-inner{max-width:1200px;margin:0 auto;padding:14px 14px;font-family:var(--serif);font-size:16px;line-height:1.4;text-wrap:balance}
.value-band-inner b{color:var(--stamp-ink)}
.value-line{font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin:0;padding:8px 12px;background:var(--paper-sunken);border:1px solid var(--line);border-radius:2px;display:inline-block}

/* Category promo banner — fills the empty space next to .value-line with a
   real, currently-stocked advertiser (see category_top_advertiser() in
   bootstrap.php). Flex row so it shrinks/wraps responsively instead of
   overflowing on narrow viewports. */
.value-row{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.category-ad{
  flex:1 1 260px;
  display:flex;align-items:center;gap:10px;
  min-width:0;
  padding:7px 12px;
  background:var(--paper-raised);
  border:1px solid var(--line-strong);
  border-radius:2px;
  color:var(--ink);
}
.category-ad:hover{border-color:var(--stamp)}
.category-ad__badge{
  flex:none;
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gold);
  background:var(--paper-sunken);
  border:1px solid var(--line);
  border-radius:2px;
  padding:3px 6px;
  white-space:nowrap;
}
.category-ad__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.category-ad__name{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.category-ad__sector{font-size:11px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.category-ad__cta{
  flex:none;
  font-family:var(--sans);font-weight:700;font-size:11.5px;
  color:var(--stamp-ink);
  white-space:nowrap;
}
@media (max-width:560px){
  .category-ad__sector{display:none}
}
.per{display:flex;gap:6px;align-items:center;color:var(--ink-faint);font-size:12.5px;font-family:var(--mono)}
.per a{padding:7px 10px;border:1px solid var(--line-strong);border-radius:2px;background:var(--paper-raised)}
.per a.active{background:var(--stamp);border-color:var(--stamp);color:#FFF8EF;font-weight:700}

.category-nav-wrap{position:relative}
.category-nav{display:flex;gap:2px;align-items:center;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none;border-bottom:1px solid var(--line)}
.category-nav::-webkit-scrollbar{display:none}
.category-nav a{padding:8px 12px;font-size:11.5px;color:var(--ink-soft);white-space:nowrap;font-family:var(--mono);border-bottom:2px solid transparent;margin-bottom:-1px}
.category-nav a.active{color:var(--ink);border-bottom-color:var(--gold);font-weight:700}
.category-nav-expand{position:absolute;right:0;top:0;bottom:10px;width:34px;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;color:var(--ink-soft);background:linear-gradient(to right, transparent, var(--paper) 60%)}
.category-nav-expand svg{transition:transform .2s ease}
.category-nav-expand:hover{color:var(--ink)}
.category-nav-wrap.expanded .category-nav{flex-wrap:wrap;overflow-x:visible;padding-right:30px}
.category-nav-wrap.expanded .category-nav-expand{background:none;bottom:auto;height:24px}
.category-nav-wrap.expanded .category-nav-expand svg{transform:rotate(180deg)}
.category-select{display:none}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px}
@media (max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.grid{grid-template-columns:repeat(1,1fr)}}

.card{background:var(--paper-raised);border:1px solid var(--line);border-top:2px solid var(--ink);border-radius:var(--radius);padding:0;display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease;content-visibility:auto;contain-intrinsic-size:340px;opacity:0;animation:card-rise .5s ease-out forwards;animation-delay:calc(var(--i,0) * 45ms)}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(20,20,10,.35)}
@keyframes card-rise{ from{opacity:0} to{opacity:1} }
/* Une carte part a opacity:0 et ne devient visible QUE si l'animation tourne.
   C'est un point unique de defaillance pour la totalite du catalogue : si le
   navigateur refuse l'animation — reglage systeme « reduire les animations »,
   extension, mode economie —, chaque grille du site reste vide sans la moindre
   erreur. Rien ne le compensait (2026-07-26). L'etat final est donc declare
   explicitement partout ou l'animation n'a pas lieu d'etre. */
@media (prefers-reduced-motion:reduce){.card{opacity:1;animation:none}}
.card-head{display:flex;justify-content:space-between;align-items:center;padding:9px 12px 0;font-family:var(--mono)}
.catalog-no{font-size:10px;color:var(--ink-faint);letter-spacing:.03em}
.tab-label{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%;background:var(--paper-sunken);padding:3px 7px;border-radius:2px;border:1px solid var(--line)}
/* La pastille de catégorie est CLIQUABLE (2026-07-28) : elle mène à la
   sous-catégorie du produit. L'apparence au repos ne change pas — c'était déjà
   l'étiquette la plus précise de la carte, et la rendre voyante volerait
   l'attention au titre et au prix. Seuls le curseur et l'état de survol
   annoncent qu'elle se suit. `display:inline-block` parce qu'un <a> ne prend
   pas le max-width/ellipsis du <span> sans lui. */
a.tab-label-link{display:inline-block;text-decoration:none;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
a.tab-label-link:hover,a.tab-label-link:focus-visible{color:var(--paper);background:var(--gold);border-color:var(--gold)}
.imgwrap{margin:9px 12px 0;border:1px solid var(--line);border-radius:2px;background:#fff;overflow:hidden;height:160px;display:flex;align-items:center;justify-content:center}
.img{width:100%;height:160px;object-fit:contain;display:block;transition:transform .35s ease}
.card:hover .img{transform:scale(1.06)}
.card-body{padding:12px;display:flex;flex-direction:column;gap:7px;flex:1}
.name{font-size:13px;font-weight:600;line-height:1.35;margin:0;min-height:35px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Attributs de carte — rendus seulement quand la photo est generique (voir
   inc/render_product_card.php). Puces monospace discretes : elles doivent se
   lire comme une fiche technique, pas concurrencer le titre ni le prix.
   `gap` en `4px 6px` pour que deux lignes d'attributs restent lisibles. */
.card-attrs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 6px}
.card-attrs li{font-family:var(--mono);font-size:10px;line-height:1.2;color:var(--ink-soft);border:1px solid var(--line);border-radius:2px;padding:2px 5px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.price{font-family:var(--mono);font-weight:700;font-size:18px;color:var(--stamp-ink);font-variant-numeric:tabular-nums}
.category-label{color:var(--ink-faint);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono)}
.verify-line{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;color:var(--verify)}
.verify-line .n{color:var(--ink-soft);font-variant-numeric:tabular-nums}

.actions{display:flex;align-items:center;gap:8px;margin-top:auto}
.actions .left{flex:1;display:flex}
.actions .right{flex:1;display:flex}
.btn{display:inline-flex;flex:1;align-items:center;justify-content:center;border-radius:2px;padding:9px 10px;font-weight:600;font-size:12.5px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);font-family:var(--sans);transition:border-color .15s ease,opacity .15s ease,transform .1s ease}
.btn:hover{border-color:var(--ink)}
.btn:active{transform:scale(.96)}
.btn-primary{border-color:var(--stamp);background:var(--stamp);color:#FFF8EF;font-weight:700}
.btn-primary:hover{opacity:.88}

.dropdown{position:absolute;left:0;right:0;top:52px;background:var(--paper-raised);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 14px 32px -16px rgba(20,20,10,.4);overflow:hidden;display:none}
.drop-item{display:flex;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.drop-item:last-child{border-bottom:none}
.drop-item:hover{background:var(--paper-sunken)}
.drop-img{width:42px;height:42px;border-radius:2px;border:1px solid var(--line);object-fit:contain;background:#fff}
.drop-name{font-weight:600;font-size:13px;line-height:1.25}
.drop-sub{font-size:11.5px;color:var(--ink-faint);margin-top:2px;font-family:var(--mono)}
.drop-right{margin-left:auto;font-weight:700;font-size:12px;white-space:nowrap;font-family:var(--mono)}

.pagination{display:flex;gap:8px;align-items:center;justify-content:center;margin:22px 0 0;flex-wrap:wrap;font-family:var(--mono)}
.discover-section{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.discover-title{font-family:var(--serif);font-size:19px;margin:0 0 14px;font-weight:700}
.empty{grid-column:1/-1;padding:40px;text-align:center;background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink-faint)}
.pagebtn{padding:9px 12px;border:1px solid var(--line-strong);border-radius:2px;background:var(--paper-raised);font-weight:700;font-size:12.5px}
.pagebtn.active{background:var(--stamp);border-color:var(--stamp);color:#FFF8EF}
.pagebtn.disabled{opacity:.4;pointer-events:none}
/* Tetes de bloc (PD-01) : rangee complete sur sa propre ligne au-dessus des
   numeros de page, pour que la pagination dense reste lisible sur les grosses
   categories (jusqu'a 40 numeros + 7 plages). */
.pageblocks{flex-basis:100%;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}
.blockbtn{padding:5px 9px;border:1px solid var(--line);border-radius:2px;background:transparent;font-size:11px;font-weight:700;color:var(--ink-faint)}
.blockbtn.active{border-color:var(--stamp);color:var(--stamp);background:var(--paper-raised)}

/* The homepage's two product blocks (inc/foryou_strip.php):
     .foryou--personal — "Picked for you", 8 cards, inserted above by
                         assets/js/foryou.js for a visitor with a profile.
     .foryou--latest   — "Recently verified", the page's own h1 and its index of
                         240 products over real /?page=N URLs.
   The index is the main content since the "Popular products" grid was removed,
   so it needs no separator above it; the personal block, when present, is
   visibly a shorter thing sitting on top and is closed off with a rule. */
.foryou{margin-top:10px}
.foryou__head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.foryou__title{font-family:var(--serif);font-size:23px;margin:0;font-weight:700;letter-spacing:-.01em}
.foryou--personal .foryou__title{font-size:20px}
.foryou__note{margin:0;color:var(--ink-faint);font-size:12.5px}
.foryou--personal{padding-bottom:26px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.foryou__optout{margin-top:14px;background:none;border:0;padding:0;color:var(--ink-faint);font-family:var(--sans);font-size:12px;text-decoration:underline;cursor:pointer}
.foryou__optout:hover{color:var(--ink)}
/* Replié : titre et carrousel disparaissent, le bouton reste — c'est lui qui
   rouvre. Rien n'est retiré du DOM, la bascule est donc instantanée. */
.foryou--collapsed .foryou__head,
.foryou--collapsed .foryou__carousel{display:none}
.foryou--collapsed{padding-bottom:16px}
.foryou--collapsed .foryou__optout{margin-top:0}
/* Bouton seul dans le conteneur (replié dès le chargement) : il porte sa marge. */
.foryou-slot>.foryou__optout{margin:14px 0 22px}
/* 12/24/48: real links to /?per=N, on the index only, styled by the shared .per
   rules above. */
.foryou__per{margin-left:auto}
.foryou__pagination{margin-top:18px}

/* The personalised block is a carousel: one track, two arrows, no pages. The
   track holds the visitor's whole personalised set, so it scrolls rather than
   paginating — and it stays a plain scroll container, which means touch swipe,
   trackpad and keyboard all work without a line of JS. */
.foryou__carousel{position:relative;display:flex;align-items:center;gap:8px;margin-top:16px}
/* Grid (not flex) for the track: Chrome resolves % flex-basis inside
   overflow-x:auto against the scrollable content width → cards of unequal
   width and a clipped last column (Edge often looked fine on the same CSS).
   grid-auto-columns % resolve against the scrollport — same 4-up as .grid.
   2026-07-29 Chrome vs Edge on « Sélection pour vous ». */
.foryou__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px) / 4);
  align-items:stretch;gap:16px;overflow-x:auto;overflow-y:hidden;flex:1;min-width:0;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 2px 12px;               /* room for the cards' hover lift */
  scrollbar-width:none;-ms-overflow-style:none;
}
.foryou__track::-webkit-scrollbar{display:none}
.foryou__track:focus-visible{outline:2px solid var(--stamp);outline-offset:3px}
/* Kill layout-breaking card features inside the track:
   - content-visibility:auto + contain-intrinsic-size → staircase heights
   - store3d preserve-3d / translateZ → Chrome stretch heights diverge
   - card-rise opacity:0 → flash / delayed equal-height pass */
.foryou__track>.card{
  scroll-snap-align:start;min-width:0;
  content-visibility:visible;contain:none;contain-intrinsic-size:none;
  transform:none;transform-style:flat;opacity:1;animation:none;
}
.foryou__track>.card:hover{
  transform:none;box-shadow:0 12px 24px -14px rgba(20,20,10,.35);
}
.foryou__track>.card .imgwrap,
.foryou__track>.card .card-body{transform:none}
.foryou__arrow{
  flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;
  border:1px solid var(--line-strong);border-radius:50%;background:var(--paper-raised);
  color:var(--ink);cursor:pointer;transition:opacity .15s ease,background .15s ease;
  position:relative;z-index:1;
}
.foryou__arrow:hover:not([disabled]){background:var(--stamp);border-color:var(--stamp);color:#FFF8EF}
.foryou__arrow[disabled]{opacity:.25;cursor:default}
@media (prefers-reduced-motion:reduce){.foryou__track{scroll-behavior:auto}}
/* Card width follows the same breakpoints as .grid, so the carousel shows the
   same number of products per screen as the index right below it. */
@media (max-width:1100px){.foryou__track{grid-auto-columns:calc((100% - 32px) / 3)}}
@media (max-width:780px){.foryou__track{grid-auto-columns:calc((100% - 16px) / 2)}}
@media (max-width:460px){
  .foryou__track{grid-auto-columns:100%}
  /* Arrows would eat the width a single card needs; the track still swipes. */
  .foryou__arrow{display:none}
}
/* Empty until foryou.js has something to put in it — and for most visitors it
   stays that way, so it must occupy no space at all. */
.foryou-slot:empty{display:none}

/* Niche hub: every peopled category as a tile (representative product image).
   Name on hover/focus; click opens the category listing. No product grid here. */
.category-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 18px}
.category-tile{position:relative;display:block;overflow:hidden;border:1px solid var(--line);border-radius:2px;background:var(--paper-raised);aspect-ratio:4/3;text-decoration:none;color:inherit}
.category-tile__img{display:block;width:100%;height:100%;object-fit:cover}
.category-tile__name{
  position:absolute;inset:auto 0 0 0;padding:14px 16px 12px;font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:-.01em;
  color:#FFF8EF;background:linear-gradient(transparent,rgba(20,16,12,.78));
  opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease
}
.category-tile:hover .category-tile__name,
.category-tile:focus-visible .category-tile__name{opacity:1;transform:translateY(0)}
.category-tile:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}
@media (max-width:1100px){.category-tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.category-tiles{grid-template-columns:repeat(2,1fr);gap:10px}}
@media (max-width:620px){
  .category-tiles{grid-template-columns:1fr}
  .category-tile__name{opacity:1;transform:none}
}

@media (max-width:900px){
  .category-nav{display:none}.category-select{display:flex;align-items:center;gap:8px;color:var(--ink-faint);font-size:12.5px;margin-bottom:10px}
  .category-select select{height:38px;border:1px solid var(--line-strong);border-radius:2px;background:var(--paper-raised);color:var(--ink);padding:0 26px 0 10px;font-family:var(--sans);font-size:13px;font-weight:600;flex:1;max-width:260px}
}
@media (max-width:620px){
  .brand-row{gap:10px}.logo{font-size:19px}
  .header-controls{order:1;margin-left:0}.language-picker{max-width:120px}
  .search-wrap{order:2;flex-basis:100%}
  .container{margin-top:12px}.category-select select{max-width:none}
  .actions{gap:6px}.card-body{padding:10px}.imgwrap,.img{height:145px}
}