/* GENERATED by site/tools/build-theme-assets.py from PHASE-4/mockups/mockups.css (review-only rules removed, .mk- → .gi-l-) — do not edit here. */
.gi-l-main { padding-block-end: var(--gi-sp-12); }
.gi-l-sec { margin-block: var(--gi-sp-8); }
.gi-l-sec__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--gi-sp-2); margin-block-end: var(--gi-sp-4); }
.gi-l-band { background: var(--gi-surface-info); padding-block: var(--gi-sp-8); }
.gi-l-band--grey { background: var(--gi-surface-alt); }
.gi-l-band .gi-l-sec, .gi-l-band--grey .gi-l-sec { margin-block: 0; }
.gi-l-stack { display: grid; gap: var(--gi-sp-3); }
.gi-l-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gi-sp-4); }
.gi-l-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gi-sp-4); }
.gi-l-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gi-sp-4); }
.gi-l-list { margin: 0; padding-inline-start: var(--gi-sp-5); display: grid; gap: var(--gi-sp-1); }
.gi-l-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gi-sp-2); font-size: var(--gi-fs-small); }
.gi-l-checks li { display: flex; gap: var(--gi-sp-2); align-items: flex-start; }
.gi-l-checks .gi-i-sm { color: var(--gi-c-success); margin-top: 3px; }
.gi-l-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gi-sp-1) var(--gi-sp-4); margin: 0; font-size: var(--gi-fs-small); }
.gi-l-kv dt { color: var(--gi-text-muted); }
.gi-l-kv dd { margin: 0; font-weight: var(--gi-fw-semibold); }
/* Home */
.gi-l-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--gi-sp-8); align-items: center; padding-block: var(--gi-sp-8); }
.gi-l-hero__title { margin: var(--gi-sp-2) 0; }
.gi-l-hero .gi-search { margin-block: var(--gi-sp-4); max-width: 560px; }
.gi-l-hero__visual { aspect-ratio: 4 / 3; }
.gi-l-hero__product { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #FFFFFF; border: var(--gi-bw-hair) solid var(--gi-line); border-radius: var(--gi-radius); text-decoration: none; }
.gi-l-hero__product img { display: block; width: 100%; height: 100%; object-fit: contain; }   /* home visual = photo of ref. 12205, never cropped */
.gi-l-fam { display: grid; gap: var(--gi-sp-2); text-decoration: none; padding: var(--gi-sp-3); }
.gi-l-fam .gi-ph { aspect-ratio: 4 / 3; }
.gi-l-fam__img { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #FFFFFF; border: var(--gi-bw-hair) solid var(--gi-line); border-radius: var(--gi-radius); }
.gi-l-fam__img img { display: block; width: 100%; height: 100%; object-fit: contain; }   /* family photo (category image), never cropped */
.gi-l-fam:hover h2, .gi-l-fam:hover h3 { text-decoration: underline; }
.gi-l-adv h3 { margin-block-end: var(--gi-sp-1); }
.gi-l-howto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gi-sp-4); counter-reset: gi-l; }
.gi-l-howto li { counter-increment: gi-l; border-block-start: 2px solid var(--gi-c-black); padding-block-start: var(--gi-sp-3); font-size: var(--gi-fs-small); }
.gi-l-howto li::before { content: counter(gi-l); display: block; font-size: var(--gi-fs-h2); font-weight: var(--gi-fw-bold); line-height: 1.1; margin-block-end: var(--gi-sp-1); }
/* Listing (family, search, brand) */
.gi-l-listing { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--gi-sp-6); align-items: start; }
.gi-l-listing .gi-filters { max-width: none; }
/* Product page */
.gi-l-pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--gi-sp-8); align-items: start; padding-block: var(--gi-sp-2) var(--gi-sp-6); }
.gi-l-gallery__main { aspect-ratio: 1 / 1; }
.gi-l-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gi-sp-2); margin-block-start: var(--gi-sp-2); }
.gi-l-thumbs button { padding: 0; border: 1px solid var(--gi-line); border-radius: var(--gi-radius); background: none; cursor: pointer; aspect-ratio: 1 / 1; min-height: var(--gi-target-min); }
.gi-l-thumbs button[aria-current="true"] { border: 2px solid var(--gi-c-black); }
.gi-l-thumbs .gi-ph { border: 0; height: 100%; font-size: 11px; }
.gi-l-buy { display: grid; gap: var(--gi-sp-3); align-content: start; }
.gi-l-buy .gi-l-kv { margin-block: var(--gi-sp-1); }
.gi-l-sec-anchor { scroll-margin-block-start: 56px; }
.gi-l-drawing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gi-sp-4); align-items: start; }
.gi-l-drawing .gi-ph { aspect-ratio: 4 / 3; }
/* Cart / checkout */
.gi-l-cart { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--gi-sp-6); align-items: start; }
.gi-l-cart .gi-summary { max-width: none; position: sticky; top: var(--gi-sp-4); }
.gi-l-form { display: grid; gap: var(--gi-sp-4); }
.gi-l-fieldset { border: 1px solid var(--gi-line); border-radius: var(--gi-radius); padding: var(--gi-sp-4); margin: 0; display: grid; gap: var(--gi-sp-3); min-width: 0; }
.gi-l-fieldset legend { font-weight: var(--gi-fw-bold); padding-inline: var(--gi-sp-2); font-size: var(--gi-fs-body); }
.gi-l-qline { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr) var(--gi-target-min); gap: var(--gi-sp-3); align-items: end; padding-block: var(--gi-sp-3); border-block-end: 1px solid var(--gi-line); }
/* Account */
.gi-l-account { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--gi-sp-6); align-items: start; }
.gi-l-accnav { display: grid; border: 1px solid var(--gi-line); border-radius: var(--gi-radius); }
.gi-l-accnav a { display: flex; align-items: center; min-height: var(--gi-target-min); padding-inline: var(--gi-sp-3); text-decoration: none; border-block-end: 1px solid var(--gi-line); font-size: var(--gi-fs-small); }
.gi-l-accnav a:last-child { border-block-end: 0; }
.gi-l-accnav a[aria-current="page"] { font-weight: var(--gi-fw-bold); background: var(--gi-surface-alt); box-shadow: inset 4px 0 0 var(--gi-c-black); }
[dir="rtl"] .gi-l-accnav a[aria-current="page"] { box-shadow: inset -4px 0 0 var(--gi-c-black); }
.gi-l-maccnav { display: none; }
.gi-l-stat { border: 1px solid var(--gi-line); border-radius: var(--gi-radius); padding: var(--gi-sp-3); display: grid; gap: 2px; }
.gi-l-stat b { font-size: var(--gi-fs-h2); line-height: 1.1; }
/* Text pages (legal, about, FAQ) */
.gi-l-text { max-width: var(--gi-container-text); }
.gi-l-legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--gi-sp-8); align-items: start; }
.gi-l-toc { position: sticky; top: var(--gi-sp-4); border-inline-start: 2px solid var(--gi-c-black); padding-inline-start: var(--gi-sp-3); }
.gi-l-toc ol { margin: 0; padding-inline-start: var(--gi-sp-5); display: grid; }
.gi-l-toc a { display: inline-flex; align-items: center; min-height: var(--gi-target-min); font-size: var(--gi-fs-small); }
/* Compact (container ≤ 760 px) */
@container gi (max-width: 1024px) {
  .gi-l-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gi-l-howto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gi-l-cart { grid-template-columns: minmax(0, 1fr) 320px; }
}
@container gi (max-width: 760px) {
  .gi-l-hero { grid-template-columns: minmax(0, 1fr); gap: var(--gi-sp-4); padding-block: var(--gi-sp-4); }
  .gi-l-hero__visual { order: -1; aspect-ratio: 16 / 9; }
  .gi-l-grid-4, .gi-l-grid-3, .gi-l-grid-2, .gi-l-howto { grid-template-columns: minmax(0, 1fr); }
  .gi-l-fam { grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
  .gi-l-fam .gi-ph, .gi-l-fam__img { grid-row: span 3; }
  .gi-l-listing, .gi-l-pdp, .gi-l-cart, .gi-l-account, .gi-l-legal, .gi-l-drawing { grid-template-columns: minmax(0, 1fr); }
  .gi-l-cart .gi-summary { position: static; }
  .gi-l-checkout .gi-summary { order: -1; }   /* checkout: summary on top on mobile (Phase 3 §E-7) */
  .gi-l-accnav { display: none; }
  .gi-l-maccnav { display: grid; }
  .gi-l-toc { position: static; }
  .gi-l-qline { grid-template-columns: minmax(0, 1fr) auto; }
  .gi-l-qline > :nth-child(3) { grid-column: 1 / -1; }
  .gi-l-sec { margin-block: var(--gi-sp-6); }
  .gi-l-band { padding-block: var(--gi-sp-6); }
}
/* Product pages: floating WhatsApp button sits above the sticky selection bar (Phase 3 §C) */
.gi-l-has-selbar .gi-wa--float { bottom: 88px; }
@media (max-width: 760px) { .gi-l-has-selbar .gi-wa--float { bottom: 150px; } }
/* Two-column splits (contact, about) — collapse on phones */
.gi-l-split { display: grid; gap: var(--gi-sp-6); align-items: start; }
.gi-l-split--contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.gi-l-split--about { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.gi-l-kv dd { overflow-wrap: anywhere; }
@container gi (max-width: 760px) { .gi-l-split--contact, .gi-l-split--about { grid-template-columns: minmax(0, 1fr); } }
/* A-1 · View switch « Cartes / Tableau » (Phase 3 §E-2 F3) — radio group, no script.
   Built only from approved tokens; same visual language as the pagination current page. */
.gi-l-seg { display: inline-flex; margin: 0; padding: 0; border: var(--gi-bw-strong) solid var(--gi-c-black); border-radius: var(--gi-radius); overflow: hidden; }
.gi-l-seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gi-l-seg__in { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.gi-l-seg__lab { display: inline-flex; align-items: center; gap: var(--gi-sp-1); min-height: var(--gi-target-min); padding: 0 var(--gi-sp-3); font-size: var(--gi-fs-small); font-weight: var(--gi-fw-semibold); cursor: pointer; background: var(--gi-surface); color: var(--gi-text); }
.gi-l-seg__lab + .gi-l-seg__in + .gi-l-seg__lab { border-inline-start: var(--gi-bw-hair) solid var(--gi-c-black); }
.gi-l-seg__in:checked + .gi-l-seg__lab { background: var(--gi-c-black); color: var(--gi-c-white); }
.gi-l-seg__in:focus-visible + .gi-l-seg__lab { box-shadow: inset 0 0 0 2px var(--gi-c-white), inset 0 0 0 5px var(--gi-c-black); }
.gi-l-view__table { display: none; }
.gi-l-view:has(.gi-l-seg__in[value="table"]:checked) .gi-l-view__table { display: block; }
.gi-l-view:has(.gi-l-seg__in[value="table"]:checked) .gi-l-view__cards { display: none; }
/* A-4 · Mobile filter panel on the search page (Phase 3B S4m) — <details>, visible on phones only */
.gi-l-mfilters { display: none; }
.gi-l-mfilters > summary { list-style: none; }
.gi-l-mfilters > summary::-webkit-details-marker { display: none; }
.gi-l-mfilters[open] > .gi-panel { margin-top: var(--gi-sp-2); max-width: none; }
@container gi (max-width: 760px) { .gi-l-mfilters { display: block; } }