/* GENERATED by site/tools/build-theme-assets.py from PHASE-4/design-system/components.css — do not edit here. */
/* =====================================================================
   GOGO INDUSTRY · Components · Phase 4 Step 2 · « Précis »
   Requires tokens.css. Logical properties only (LTR + RTL).
   Responsive by CONTAINER: wrap a page or a demo in .gi-cq.
   Compact layout = container ≤ 760 px.
   ===================================================================== */

/* ---------- Base ---------- */
.gi, .gi * { box-sizing: border-box; }
.gi {
  font-family: var(--gi-font-latin);
  font-size: var(--gi-fs-body);
  line-height: var(--gi-lh-body);
  color: var(--gi-text);
  background: var(--gi-surface);
  -webkit-text-size-adjust: 100%;
}
.gi:lang(ar), .gi :lang(ar) { font-family: var(--gi-font-arabic); }
.gi-cq { container: gi / inline-size; min-width: 0; }
:where(.gi) a { color: inherit; }   /* zero specificity: component colours (buttons, footer, WhatsApp) always win */
.gi img, .gi svg { max-width: 100%; }
.gi h1, .gi h2, .gi h3, .gi h4 { margin: 0 0 var(--gi-sp-2); }
.gi-h1 { font-size: var(--gi-fs-h1); line-height: var(--gi-lh-h1); font-weight: var(--gi-fw-bold); }
.gi-h2 { font-size: var(--gi-fs-h2); line-height: var(--gi-lh-h2); font-weight: var(--gi-fw-bold); }
.gi-h3 { font-size: var(--gi-fs-h3); line-height: var(--gi-lh-h3); font-weight: var(--gi-fw-semibold); }
.gi-h4 { font-size: var(--gi-fs-h4); line-height: var(--gi-lh-h4); font-weight: var(--gi-fw-semibold); }
.gi-body { font-size: var(--gi-fs-body); line-height: var(--gi-lh-body); max-width: var(--gi-measure); }
.gi-small { font-size: var(--gi-fs-small); line-height: var(--gi-lh-small); }
.gi-caption { font-size: var(--gi-fs-caption); line-height: var(--gi-lh-caption); color: var(--gi-text-muted); }
.gi-muted { color: var(--gi-text-muted); }
.gi-kicker { font-size: var(--gi-fs-caption); font-weight: var(--gi-fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--gi-accent); }
:lang(ar) .gi-kicker, .gi-kicker:lang(ar) { letter-spacing: 0; }
.gi-num { font-variant-numeric: tabular-nums; }

/* LTR isolate for references, units, prices, phone, e-mail, numbers.
   Use <bdi dir="ltr" class="gi-ltr"> (or class gi-ltr on any inline element). */
.gi-ltr { direction: ltr; unicode-bidi: isolate; }
.gi-nb { white-space: nowrap; }          /* never break amount + currency, reference */

.gi-container { max-width: var(--gi-container-max); margin-inline: auto; padding-inline: var(--gi-gutter-lg); }
.gi-skip { position: absolute; inset-inline-start: var(--gi-sp-2); top: -100px; background: var(--gi-surface-inverse); color: var(--gi-text-inverse); padding: var(--gi-sp-2) var(--gi-sp-3); z-index: var(--gi-z-toast); }
.gi-skip:focus { top: var(--gi-sp-2); }

/* Focus (all interactive elements) */
.gi a:focus-visible, .gi button:focus-visible, .gi input:focus-visible, .gi select:focus-visible,
.gi textarea:focus-visible, .gi summary:focus-visible, .gi [tabindex]:focus-visible, .gi .is-focus {
  outline: var(--gi-focus-width) solid var(--gi-focus-color);
  outline-offset: var(--gi-focus-offset);
  box-shadow: 0 0 0 var(--gi-focus-offset) var(--gi-focus-halo);
}

/* Icons */
.gi-i { width: var(--gi-icon); height: var(--gi-icon); flex: none; }
.gi-i-sm { width: var(--gi-icon-sm); height: var(--gi-icon-sm); flex: none; }
[dir="rtl"] .gi-i-dir { transform: scaleX(-1); }   /* only directional icons (chevron, arrow) */

/* ---------- Buttons ---------- */
.gi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gi-sp-2);
  min-height: var(--gi-btn-h); min-width: var(--gi-target-min); padding: 0 var(--gi-btn-px);
  border: var(--gi-btn-border) solid transparent; border-radius: var(--gi-btn-radius);
  font: var(--gi-btn-fw) var(--gi-fs-button)/var(--gi-lh-control) inherit; font-family: inherit;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--gi-dur);
}
.gi-btn--quote     { background: var(--gi-action-quote-bg); color: var(--gi-action-quote-fg); }
.gi-btn--cart      { background: var(--gi-action-cart-bg); color: var(--gi-action-cart-fg); }
.gi-btn--brand     { background: var(--gi-action-brand-bg); color: var(--gi-action-brand-fg); }
.gi-btn--secondary { background: var(--gi-action-secondary-bg); color: var(--gi-action-secondary-fg); border-color: var(--gi-action-secondary-border); }
.gi-btn--quote:hover,     .gi-btn--quote.is-hover     { background: var(--gi-action-quote-bg-hover); }
.gi-btn--cart:hover,      .gi-btn--cart.is-hover      { background: var(--gi-action-cart-bg-hover); }
.gi-btn--brand:hover,     .gi-btn--brand.is-hover     { background: var(--gi-action-brand-bg-hover); }
.gi-btn--secondary:hover, .gi-btn--secondary.is-hover { background: var(--gi-action-secondary-bg-hover); }
.gi-btn:active, .gi-btn.is-pressed { transform: translateY(1px); box-shadow: inset 0 0 0 1px currentColor; }
.gi-btn:disabled, .gi-btn[aria-disabled="true"] {
  background: var(--gi-action-disabled-bg); color: var(--gi-action-disabled-fg);
  border-color: var(--gi-action-disabled-bg); cursor: not-allowed; transform: none; box-shadow: none;
}
.gi-btn.is-loading { cursor: progress; }
.gi-spin { width: 14px; height: 14px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: var(--gi-radius-round); animation: gi-spin 1s linear infinite; }
@keyframes gi-spin { to { transform: rotate(360deg); } }
.gi-btn--block { width: 100%; }
.gi-btn--icon { padding: 0; width: var(--gi-target-min); }
.gi-btn-row { display: flex; flex-wrap: wrap; gap: var(--gi-sp-2); }
@media (prefers-reduced-motion: reduce) { .gi-spin { animation: none; } .gi-btn { transition: none; } }

/* ---------- Links ---------- */
.gi-link { color: var(--gi-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.gi-link:hover, .gi-link.is-hover { text-decoration-thickness: 2px; color: var(--gi-accent); }
.gi-link--muted { color: var(--gi-text-muted); }
.gi-link--standalone { display: inline-flex; align-items: center; gap: var(--gi-sp-1); min-height: var(--gi-target-min); font-weight: var(--gi-fw-semibold); }

/* ---------- Header ---------- */
.gi-header { background: var(--gi-surface); border-block-end: var(--gi-bw-hair) solid var(--gi-line); }
.gi-topbar { background: var(--gi-surface-inverse); color: var(--gi-text-inverse); font-size: var(--gi-fs-caption); }
.gi-topbar__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gi-sp-1) var(--gi-sp-5); min-height: var(--gi-header-top-h); padding-inline: var(--gi-sp-4); }
.gi-topbar__item { display: inline-flex; align-items: center; gap: var(--gi-sp-2); }
.gi-topbar .gi-sp { flex: 1; }
.gi-topbar__ctl { font: inherit; color: inherit; background: none; border: 0; min-height: var(--gi-target-min); padding: 0 var(--gi-sp-2); display: inline-flex; align-items: center; gap: var(--gi-sp-1); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.gi-topbar a { color: inherit; display: inline-flex; align-items: center; min-height: var(--gi-target-min); }
.gi-header__main { display: flex; align-items: center; gap: var(--gi-sp-4); min-height: var(--gi-header-main-h); padding-inline: var(--gi-sp-4); }
.gi-logo { display: inline-flex; align-items: center; min-height: var(--gi-target-min); flex: none; }
.gi-logo svg, .gi-logo__img { height: 34px; width: auto; display: block; direction: ltr; }
.gi-tools { display: flex; gap: var(--gi-sp-1); }
.gi-tool { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; min-height: 48px; padding: 0 var(--gi-sp-1); font-size: var(--gi-fs-caption); text-decoration: none; border-radius: var(--gi-radius); }
.gi-tool:hover { background: var(--gi-surface-alt); }
.gi-count { position: absolute; top: 2px; inset-inline-end: 6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--gi-radius-round); background: var(--gi-c-red); color: var(--gi-c-white); font-size: 11px; line-height: 18px; text-align: center; font-weight: var(--gi-fw-bold); }
.gi-burger { display: none; }
.gi-search.gi-msearch { display: none; padding: 0 var(--gi-sp-4) var(--gi-sp-3); }

/* Main navigation */
.gi-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--gi-sp-1); padding-inline: var(--gi-sp-4); border-block-start: var(--gi-bw-hair) solid var(--gi-line); }
.gi-nav__link { display: inline-flex; align-items: center; gap: var(--gi-sp-1); min-height: 48px; padding: 0 var(--gi-sp-2); text-decoration: none; font-weight: var(--gi-fw-medium); font-size: var(--gi-fs-small); white-space: nowrap; }
.gi-nav__link:hover { color: var(--gi-accent); }
.gi-nav__link[aria-current="page"], .gi-nav__link.is-active { color: var(--gi-accent); box-shadow: inset 0 -3px 0 var(--gi-accent); }
.gi-nav .gi-sp { flex: 1; }
.gi-nav .gi-btn { flex: none; margin-block: var(--gi-sp-1); }

/* Mega menu */
.gi-mega { border: var(--gi-bw-hair) solid var(--gi-line-strong); border-radius: var(--gi-radius); background: var(--gi-surface); padding: var(--gi-sp-4); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.2fr); gap: var(--gi-sp-4); }
.gi-mega__item { display: grid; gap: var(--gi-sp-2); text-decoration: none; border-radius: var(--gi-radius); padding: var(--gi-sp-2); }
.gi-mega__item:hover { background: var(--gi-surface-alt); }
.gi-mega__item b { font-size: var(--gi-fs-small); }
.gi-mega__more { border-inline-start: var(--gi-bw-hair) solid var(--gi-line); padding-inline-start: var(--gi-sp-4); display: grid; align-content: start; gap: var(--gi-sp-1); font-size: var(--gi-fs-small); }

/* Mobile drawer */
.gi-drawer { background: var(--gi-surface); border: var(--gi-bw-hair) solid var(--gi-line-strong); border-radius: var(--gi-radius); max-width: 360px; }
.gi-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--gi-sp-2) var(--gi-sp-3); border-block-end: var(--gi-bw-hair) solid var(--gi-line); }
.gi-drawer__group { padding: var(--gi-sp-2) var(--gi-sp-3); border-block-end: var(--gi-bw-hair) solid var(--gi-line); }
.gi-drawer__group h4, .gi-drawer__title { font-weight: var(--gi-fw-bold); font-size: var(--gi-fs-caption); color: var(--gi-text-muted); margin: var(--gi-sp-1) 0; text-transform: uppercase; letter-spacing: .06em; }
.gi-drawer a { display: flex; align-items: center; justify-content: space-between; min-height: var(--gi-target-min); text-decoration: none; }

/* Breadcrumbs */
.gi-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--gi-sp-1); font-size: var(--gi-fs-small); color: var(--gi-text-muted); padding-block: var(--gi-sp-1); }
.gi-crumbs a { color: var(--gi-text-muted); display: inline-flex; align-items: center; min-height: var(--gi-target-min); }
.gi-crumbs [aria-current] { color: var(--gi-text); }

/* Section nav (product page) */
.gi-secnav { position: sticky; top: 0; z-index: var(--gi-z-sticky-nav); background: var(--gi-surface); border-block-end: var(--gi-bw-hair) solid var(--gi-line); display: flex; gap: var(--gi-sp-1); overflow-x: auto; white-space: nowrap; }
.gi-secnav a { display: inline-flex; align-items: center; min-height: var(--gi-target-min); padding: 0 var(--gi-sp-3); text-decoration: none; font-size: var(--gi-fs-small); font-weight: var(--gi-fw-medium); }
.gi-secnav a[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--gi-line-strong); font-weight: var(--gi-fw-semibold); }

/* Country / currency + language */
.gi-panel { border: var(--gi-bw-hair) solid var(--gi-line-strong); border-radius: var(--gi-radius); background: var(--gi-surface); padding: var(--gi-sp-4); max-width: 380px; display: grid; gap: var(--gi-sp-3); }
.gi-panel__title { font-weight: var(--gi-fw-semibold); }
.gi-langbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gi-sp-2) var(--gi-sp-4); padding: var(--gi-sp-2) var(--gi-sp-4); background: var(--gi-surface-info); border-block-end: var(--gi-bw-hair) solid var(--gi-line); }

/* ---------- Search ---------- */
.gi-search { display: flex; flex: 1; min-width: 0; }
.gi-search__input { flex: 1; width: 0; min-width: 0; min-height: var(--gi-field-h); padding: 0 var(--gi-field-px); border: var(--gi-bw-hair) solid var(--gi-field-border); border-inline-end: 0; border-start-start-radius: var(--gi-field-radius); border-end-start-radius: var(--gi-field-radius); font: inherit; color: var(--gi-text); background: var(--gi-field-bg); }
.gi-search__input:hover { border-color: var(--gi-field-border-hover); }
.gi-search__btn { border-start-start-radius: 0; border-end-start-radius: 0; }
.gi-suggest { border: var(--gi-bw-hair) solid var(--gi-line-strong); border-radius: var(--gi-radius); background: var(--gi-surface); padding: var(--gi-sp-1); max-width: 560px; }
.gi-suggest__h { font-size: var(--gi-fs-caption); color: var(--gi-text-muted); font-weight: var(--gi-fw-semibold); margin: var(--gi-sp-2) var(--gi-sp-2) var(--gi-sp-1); }
.gi-suggest__opt { display: flex; align-items: center; gap: var(--gi-sp-3); min-height: var(--gi-target-min); padding: 0 var(--gi-sp-2); text-decoration: none; border-radius: var(--gi-radius); }
.gi-suggest__opt[aria-selected="true"], .gi-suggest__opt:hover { background: var(--gi-surface-alt); box-shadow: inset 3px 0 0 var(--gi-line-strong); }
[dir="rtl"] .gi-suggest__opt[aria-selected="true"], [dir="rtl"] .gi-suggest__opt:hover { box-shadow: inset -3px 0 0 var(--gi-line-strong); }
.gi-suggest mark { background: none; color: inherit; font-weight: var(--gi-fw-bold); text-decoration: underline; }
.gi-ref { font-weight: var(--gi-fw-bold); white-space: nowrap; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* ---------- Badges / stock ---------- */
.gi-badge { display: inline-flex; align-items: center; gap: var(--gi-sp-1); min-height: var(--gi-badge-h); padding: 0 var(--gi-badge-px); border: var(--gi-bw-hair) solid currentColor; border-radius: var(--gi-badge-radius); font-size: var(--gi-fs-caption); font-weight: var(--gi-badge-fw); white-space: normal; background: var(--gi-surface); line-height: 1.3; padding-block: 2px; }
.gi-badge--in { color: var(--gi-stock-in); }
.gi-badge--order { color: var(--gi-stock-order); }
.gi-badge--quote { color: var(--gi-stock-quote); }
.gi-badge--off { color: var(--gi-stock-off); }
.gi-badge--neutral { color: var(--gi-text); }
.gi-status { display: inline-flex; align-items: center; gap: var(--gi-sp-1); font-size: var(--gi-fs-caption); font-weight: var(--gi-fw-semibold); padding: 2px var(--gi-sp-2); border: var(--gi-bw-hair) solid var(--gi-line-strong); border-radius: var(--gi-badge-radius); white-space: nowrap; }

/* ---------- Price block — primary amount follows the customer state (DR-1):
   guest/consumer TTC · B2B pending TTC · B2B approved HT · international indicative EUR HT ---------- */
.gi-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--gi-sp-2); }
.gi-price__main { font-size: var(--gi-fs-price); font-weight: var(--gi-fw-bold); font-variant-numeric: tabular-nums; }
.gi-price__main bdi, .gi-price__alt bdi { white-space: nowrap; }  /* amount + currency never break */
.gi-price__unit { font-size: var(--gi-fs-caption); font-weight: var(--gi-fw-semibold); }
.gi-price__alt { font-size: var(--gi-fs-small); color: var(--gi-text-muted); white-space: nowrap; }
.gi-price--sm .gi-price__main { font-size: var(--gi-fs-price-sm); }
.gi-price__note { flex-basis: 100%; font-size: var(--gi-fs-caption); color: var(--gi-text-muted); }

/* ---------- Product card ---------- */
.gi-card { background: var(--gi-surface); border: var(--gi-card-border); border-radius: var(--gi-card-radius); box-shadow: var(--gi-card-shadow); min-width: 0; }
.gi-pcard { container: gi-pcard / inline-size; }
.gi-pcard__in { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: var(--gi-sp-4); padding: var(--gi-sp-3); align-items: center; }
.gi-pcard__img, .gi-ph { background: repeating-linear-gradient(45deg, var(--gi-c-grey-light) 0 10px, var(--gi-c-white) 10px 20px); border: var(--gi-bw-hair) solid var(--gi-line); border-radius: var(--gi-radius); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; color: var(--gi-text-muted); font-size: var(--gi-fs-caption); text-align: center; padding: var(--gi-sp-2); }
.gi-ph span { background: var(--gi-surface); padding: 2px 6px; }
.gi-pcard__body { display: grid; gap: var(--gi-sp-1); min-width: 0; }
.gi-pcard__meta { font-size: var(--gi-fs-caption); color: var(--gi-text-muted); }
.gi-pcard__title { font-size: var(--gi-fs-h4); font-weight: var(--gi-fw-semibold); line-height: var(--gi-lh-h4); margin: 0; }
.gi-pcard__title a { text-decoration: none; }
.gi-pcard__title a:hover { text-decoration: underline; }
.gi-pcard__spec { font-size: var(--gi-fs-small); color: var(--gi-text-muted); margin: 0; }
.gi-pcard__buy { display: grid; gap: var(--gi-sp-2); justify-items: end; min-width: 190px; }
.gi-pcard__buy .gi-btn { width: 100%; }
.gi-grid-cards { display: grid; gap: var(--gi-sp-3); }
/* Vertical card (home, related) */
.gi-vcard { display: grid; gap: var(--gi-sp-2); padding: var(--gi-sp-3); align-content: start; }
.gi-vcard > .gi-badge, .gi-mcard .gi-badge { justify-self: start; }
.gi-grid-v { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gi-sp-3); }

/* ---------- Quantity control ---------- */
.gi-qty { display: inline-flex; align-items: stretch; border: var(--gi-bw-hair) solid var(--gi-field-border); border-radius: var(--gi-radius); background: var(--gi-field-bg); overflow: hidden; }
.gi-qty__btn { flex: none; width: var(--gi-target-min); min-height: var(--gi-target-min); border: 0; background: var(--gi-surface-alt); color: var(--gi-text); font: var(--gi-fw-semibold) 18px/1 var(--gi-font-latin); cursor: pointer; }
.gi-qty__btn:hover { background: var(--gi-c-border); }
.gi-qty__btn:disabled { color: var(--gi-text-muted); cursor: not-allowed; background: var(--gi-field-bg-disabled); }
.gi-qty__in { flex: none; width: 52px; border: 0; border-inline: var(--gi-bw-hair) solid var(--gi-line); text-align: center; font: inherit; font-variant-numeric: tabular-nums; color: var(--gi-text); background: var(--gi-field-bg); direction: ltr; }
.gi-qty.is-error { border: var(--gi-bw-strong) solid var(--gi-field-error); }

/* ---------- Models table + mobile model cards ---------- */
.gi-tablewrap { overflow-x: auto; border: var(--gi-bw-hair) solid var(--gi-line); border-radius: var(--gi-radius); background: var(--gi-surface); }
.gi-table { width: 100%; border-collapse: collapse; font-size: var(--gi-fs-table); font-variant-numeric: tabular-nums; }
.gi-table caption { text-align: start; padding: var(--gi-sp-2) var(--gi-table-cell-px); font-size: var(--gi-fs-caption); color: var(--gi-text-muted); }
.gi-table th, .gi-table td { padding: var(--gi-table-row-py) var(--gi-table-cell-px); text-align: start; vertical-align: middle; }
.gi-table thead th { border-block-end: var(--gi-table-head-rule); font-weight: var(--gi-fw-semibold); white-space: nowrap; background: var(--gi-surface); }
.gi-table tbody td, .gi-table tbody th { border-block-end: var(--gi-table-row-rule); }
.gi-table tbody tr:last-child > * { border-block-end: 0; }
.gi-table tbody tr:hover > * { background: var(--gi-surface-alt); }
.gi-table tr.is-selected > * { background: var(--gi-table-selected-bg); }
.gi-table tr.is-selected > :first-child { box-shadow: inset var(--gi-bw-accent) 0 0 var(--gi-line-strong); }
[dir="rtl"] .gi-table tr.is-selected > :first-child { box-shadow: inset calc(var(--gi-bw-accent) * -1) 0 0 var(--gi-line-strong); }
.gi-table .gi-n { text-align: end; white-space: nowrap; }
.gi-table .gi-col-primary { font-weight: var(--gi-fw-semibold); }
.gi-table td { white-space: nowrap; }
.gi-table--spec th { width: 40%; font-weight: var(--gi-fw-medium); color: var(--gi-text-muted); background: var(--gi-surface-alt); }
.gi-table--spec td { white-space: normal; }
.gi-mcards { display: none; gap: var(--gi-sp-2); }
.gi-mcard { border: var(--gi-bw-hair) solid var(--gi-line); border-radius: var(--gi-radius); padding: var(--gi-sp-3); display: grid; gap: var(--gi-sp-1); background: var(--gi-surface); }
.gi-mcard.is-selected { border: var(--gi-bw-strong) solid var(--gi-line-strong); background: var(--gi-table-selected-bg); }
.gi-mcard__row { display: flex; justify-content: space-between; align-items: center; gap: var(--gi-sp-2); flex-wrap: wrap; }
.gi-mcard__spec { font-size: var(--gi-fs-small); color: var(--gi-text-muted); margin: 0; }

/* ---------- Sticky selection bar ---------- */
.gi-selbar { position: sticky; bottom: 0; z-index: var(--gi-z-selbar); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gi-sp-2) var(--gi-sp-4); padding: var(--gi-selbar-py) var(--gi-sp-4); background: var(--gi-selbar-bg); border-block-start: var(--gi-selbar-rule); }
.gi-selbar__sum { display: grid; gap: 2px; }
.gi-selbar__count { font-weight: var(--gi-fw-bold); }
.gi-selbar__actions { display: flex; gap: var(--gi-sp-2); flex-wrap: wrap; }
.gi-selbar__hint { font-size: var(--gi-fs-caption); color: var(--gi-text-muted); }

/* ---------- Forms ---------- */
.gi-field { display: grid; gap: var(--gi-sp-1); min-width: 0; }
.gi-label { font-size: var(--gi-fs-label); font-weight: var(--gi-fw-semibold); line-height: var(--gi-lh-control); }
.gi-req { font-weight: var(--gi-fw-regular); color: var(--gi-text-muted); font-size: var(--gi-fs-caption); }
.gi-input, .gi-select, .gi-textarea {
  width: 100%; min-height: var(--gi-field-h); padding: 0 var(--gi-field-px);
  border: var(--gi-bw-hair) solid var(--gi-field-border); border-radius: var(--gi-field-radius);
  font: inherit; color: var(--gi-text); background: var(--gi-field-bg);
}
.gi-textarea { min-height: 112px; padding-block: var(--gi-sp-2); resize: vertical; }
.gi-select { appearance: none; padding-inline-end: var(--gi-sp-10); background-image: linear-gradient(45deg, transparent 50%, var(--gi-c-black) 50%), linear-gradient(135deg, var(--gi-c-black) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] .gi-select { background-position: 15px 50%, 20px 50%; }
.gi-input:hover, .gi-select:hover, .gi-textarea:hover, .gi-input.is-hover { border-color: var(--gi-field-border-hover); }
.gi-input:disabled, .gi-select:disabled, .gi-textarea:disabled { background: var(--gi-field-bg-disabled); color: var(--gi-text-muted); border-style: dashed; cursor: not-allowed; }
.gi-hint { font-size: var(--gi-fs-caption); color: var(--gi-text-muted); margin: 0; }
.gi-field.is-error .gi-input, .gi-field.is-error .gi-select, .gi-field.is-error .gi-textarea { border: var(--gi-bw-strong) solid var(--gi-field-error); }
.gi-field.is-success .gi-input { border: var(--gi-bw-strong) solid var(--gi-field-success); }
.gi-fmsg { display: flex; gap: var(--gi-sp-1); align-items: flex-start; margin: 0; font-size: var(--gi-fs-small); font-weight: var(--gi-fw-semibold); }
.gi-fmsg--error { color: var(--gi-field-error); }
.gi-fmsg--success { color: var(--gi-field-success); }
.gi-pw { display: flex; }
.gi-pw .gi-input { border-start-end-radius: 0; border-end-end-radius: 0; }
.gi-pw .gi-btn { border-start-start-radius: 0; border-end-start-radius: 0; border-width: var(--gi-bw-hair); border-color: var(--gi-field-border); font-weight: var(--gi-fw-medium); }
.gi-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gi-sp-4); }
.gi-errsum { border: var(--gi-bw-strong) solid var(--gi-state-error); border-inline-start-width: var(--gi-bw-accent); border-radius: var(--gi-radius); padding: var(--gi-sp-3) var(--gi-sp-4); }
.gi-errsum h3 { font-size: var(--gi-fs-body); display: flex; gap: var(--gi-sp-2); align-items: center; color: var(--gi-state-error); margin: 0 0 var(--gi-sp-1); }
.gi-errsum ul { margin: 0; padding-inline-start: var(--gi-sp-6); }

/* Checkbox / radio */
.gi-check, .gi-radio { display: flex; align-items: flex-start; gap: var(--gi-sp-3); min-height: var(--gi-target-min); padding-block: var(--gi-sp-2); cursor: pointer; }
.gi-check input, .gi-radio input { appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border: var(--gi-bw-strong) solid var(--gi-c-black); background: var(--gi-field-bg); display: grid; place-content: center; cursor: pointer; }
.gi-check input { border-radius: var(--gi-radius-sm); }
.gi-radio input { border-radius: var(--gi-radius-round); }
.gi-check input:checked { background: var(--gi-c-black); }
.gi-check input:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--gi-c-white); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.gi-radio input:checked::after { content: ""; width: 10px; height: 10px; border-radius: var(--gi-radius-round); background: var(--gi-c-black); }
.gi-check input:disabled, .gi-radio input:disabled { border-color: var(--gi-c-grey-text); background: var(--gi-field-bg-disabled); border-style: dashed; cursor: not-allowed; }
.gi-check.is-disabled, .gi-radio.is-disabled { color: var(--gi-text-muted); cursor: not-allowed; }
.gi-check.is-error input { border-color: var(--gi-state-error); }
.gi-check__count { color: var(--gi-text-muted); font-variant-numeric: tabular-nums; }
.gi-rcard { display: flex; gap: var(--gi-sp-3); align-items: flex-start; padding: var(--gi-sp-3); border: var(--gi-bw-hair) solid var(--gi-line); border-radius: var(--gi-radius); cursor: pointer; }
.gi-rcard:has(input:checked), .gi-rcard.is-checked { border: var(--gi-bw-strong) solid var(--gi-line-strong); background: var(--gi-surface-info); }
.gi-rcard input { appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border: var(--gi-bw-strong) solid var(--gi-c-black); border-radius: var(--gi-radius-round); display: grid; place-content: center; background: var(--gi-field-bg); }
.gi-rcard input:checked::after { content: ""; width: 10px; height: 10px; border-radius: var(--gi-radius-round); background: var(--gi-c-black); }
.gi-toggle { display: inline-flex; align-items: center; gap: var(--gi-sp-3); min-height: var(--gi-target-min); cursor: pointer; }
.gi-toggle input { appearance: none; width: 44px; height: 24px; border: var(--gi-bw-strong) solid var(--gi-c-black); border-radius: var(--gi-radius-round); background: var(--gi-field-bg); position: relative; cursor: pointer; margin: 0; }
.gi-toggle input::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: var(--gi-radius-round); background: var(--gi-c-black); transition: inset-inline-start var(--gi-dur); }
.gi-toggle input:checked { background: var(--gi-c-black); }
.gi-toggle input:checked::after { inset-inline-start: 22px; background: var(--gi-c-white); }

/* ---------- Messages ---------- */
.gi-msg { display: flex; gap: var(--gi-sp-3); align-items: flex-start; padding: var(--gi-sp-3) var(--gi-sp-4); border: var(--gi-bw-hair) solid; border-inline-start-width: var(--gi-msg-bar); border-radius: var(--gi-radius); background: var(--gi-surface); font-size: var(--gi-fs-small); }
.gi-msg p { margin: 0; }
.gi-msg .gi-i { margin-top: 1px; }
.gi-msg--info { border-color: var(--gi-state-info); background: var(--gi-surface-info); }
.gi-msg--info .gi-i { color: var(--gi-state-info); }
.gi-msg--success { border-color: var(--gi-state-success); }
.gi-msg--success .gi-i { color: var(--gi-state-success); }
.gi-msg--warning { border-color: var(--gi-state-warning); }
.gi-msg--warning .gi-i { color: var(--gi-state-warning); }
.gi-msg--error { border-color: var(--gi-state-error); }
.gi-msg--error .gi-i { color: var(--gi-state-error); }
.gi-msg__title { font-weight: var(--gi-fw-bold); }
.gi-toast { display: flex; gap: var(--gi-sp-3); align-items: center; padding: var(--gi-sp-3) var(--gi-sp-4); background: var(--gi-surface-inverse); color: var(--gi-text-inverse); border-radius: var(--gi-radius); max-width: 440px; }
.gi-toast a { color: inherit; font-weight: var(--gi-fw-semibold); }

/* ---------- Pagination ---------- */
.gi-pager { display: flex; flex-wrap: wrap; gap: var(--gi-sp-1); align-items: center; justify-content: center; }
.gi-pager a, .gi-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--gi-target-min); min-height: var(--gi-target-min); padding: 0 var(--gi-sp-2); border: var(--gi-bw-hair) solid var(--gi-line); border-radius: var(--gi-radius); text-decoration: none; font-variant-numeric: tabular-nums; }
.gi-pager a:hover { border-color: var(--gi-line-strong); }
.gi-pager [aria-current="page"] { background: var(--gi-c-black); color: var(--gi-c-white); border-color: var(--gi-c-black); font-weight: var(--gi-fw-bold); }
.gi-pager .is-disabled { color: var(--gi-text-muted); border-style: dashed; }

/* ---------- Filters ---------- */
.gi-filters { display: grid; gap: 0; border: var(--gi-bw-hair) solid var(--gi-line); border-radius: var(--gi-radius); padding: 0 var(--gi-sp-4); max-width: 300px; }
.gi-fgroup { border-block-end: var(--gi-bw-hair) solid var(--gi-line); padding-block: var(--gi-sp-2); }
.gi-fgroup:last-child { border-block-end: 0; }
.gi-fgroup summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: var(--gi-target-min); font-weight: var(--gi-fw-semibold); cursor: pointer; }
.gi-fgroup summary::-webkit-details-marker { display: none; }
.gi-fgroup summary::after { content: "−"; font-weight: var(--gi-fw-bold); }
.gi-fgroup:not([open]) summary::after { content: "+"; }
.gi-fgroup .gi-check { min-height: var(--gi-target-min); padding-block: var(--gi-sp-1); align-items: center; }
.gi-fgroup .gi-check input { margin-top: 0; }
.gi-range { display: flex; align-items: center; gap: var(--gi-sp-2); }
.gi-range .gi-input { min-width: 0; }
.gi-chips { display: flex; flex-wrap: wrap; gap: var(--gi-sp-2); align-items: center; }
.gi-chip { display: inline-flex; align-items: center; gap: var(--gi-sp-2); min-height: var(--gi-target-min); padding-inline: var(--gi-sp-3) 0; border: var(--gi-bw-hair) solid var(--gi-line-strong); border-radius: var(--gi-radius-sm); font-size: var(--gi-fs-small); background: var(--gi-surface); }
.gi-chip button { display: inline-flex; align-items: center; justify-content: center; width: var(--gi-target-min); height: var(--gi-target-min); border: 0; background: none; cursor: pointer; color: var(--gi-text); }
.gi-chip button:hover { background: var(--gi-surface-alt); }
.gi-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--gi-sp-2); }
.gi-toolbar .gi-select { width: auto; }
.gi-mfilter-btn { display: none; }

/* ---------- Cart / quote ---------- */
.gi-summary { border: var(--gi-bw-hair) solid var(--gi-line); border-radius: var(--gi-radius); padding: var(--gi-sp-4); display: grid; gap: var(--gi-sp-3); max-width: 380px; background: var(--gi-surface); }
.gi-summary dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gi-sp-2) var(--gi-sp-3); margin: 0; font-size: var(--gi-fs-small); }
.gi-summary dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gi-summary .gi-total { font-weight: var(--gi-fw-bold); font-size: var(--gi-fs-body); border-block-start: var(--gi-table-head-rule); padding-block-start: var(--gi-sp-2); }
.gi-or { display: flex; align-items: center; gap: var(--gi-sp-2); font-size: var(--gi-fs-caption); color: var(--gi-text-muted); }
.gi-or::before, .gi-or::after { content: ""; flex: 1; border-block-start: var(--gi-bw-hair) solid var(--gi-line); }
.gi-progress { height: 8px; border: var(--gi-bw-hair) solid var(--gi-line-strong); border-radius: var(--gi-radius-sm); overflow: hidden; background: var(--gi-surface); }
.gi-progress > i { display: block; height: 100%; background: var(--gi-c-black); }
.gi-cartline { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: var(--gi-sp-3); align-items: center; padding-block: var(--gi-sp-3); border-block-end: var(--gi-bw-hair) solid var(--gi-line); }
.gi-cartline .gi-ph { aspect-ratio: 1 / 1; padding: 0; }
.gi-cartline__img, .gi-vcard__img { aspect-ratio: 1 / 1; overflow: hidden; border: var(--gi-bw-hair) solid var(--gi-line); border-radius: var(--gi-radius); background: #FFFFFF; }
.gi-cartline__img img, .gi-vcard__img img { display: block; width: 100%; height: 100%; object-fit: contain; }   /* product photo, never cropped */
.gi-cartline__total { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Steps */
.gi-steps { display: flex; flex-wrap: wrap; gap: var(--gi-sp-2) var(--gi-sp-4); list-style: none; margin: 0; padding: 0; counter-reset: gi-step; font-size: var(--gi-fs-small); }
.gi-steps li { counter-increment: gi-step; display: flex; align-items: center; gap: var(--gi-sp-2); color: var(--gi-text-muted); }
.gi-steps li::before { content: counter(gi-step); width: 28px; height: 28px; border: var(--gi-bw-strong) solid currentColor; border-radius: var(--gi-radius-round); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--gi-fw-bold); font-size: var(--gi-fs-caption); }
.gi-steps li[aria-current="step"] { color: var(--gi-text); font-weight: var(--gi-fw-semibold); }
.gi-steps li[aria-current="step"]::before { background: var(--gi-c-black); color: var(--gi-c-white); border-color: var(--gi-c-black); }
.gi-steps li.is-done::before { content: "✓"; }

/* Accordion */
.gi-acc { border-block-start: var(--gi-bw-hair) solid var(--gi-line); }
.gi-acc details { border-block-end: var(--gi-bw-hair) solid var(--gi-line); }
.gi-acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--gi-sp-3); min-height: 52px; font-weight: var(--gi-fw-semibold); cursor: pointer; }
.gi-acc summary::-webkit-details-marker { display: none; }
.gi-acc summary::after { content: "+"; font-size: 22px; flex: none; }
.gi-acc details[open] summary::after { content: "−"; }
.gi-acc details > div { padding-block-end: var(--gi-sp-3); }

/* Empty state */
.gi-empty { border: var(--gi-bw-hair) dashed var(--gi-c-grey-text); border-radius: var(--gi-radius); padding: var(--gi-sp-6); display: grid; gap: var(--gi-sp-2); justify-items: start; }

/* Skeleton (loading) */
.gi-skel { background: var(--gi-c-grey-light); border-radius: var(--gi-radius-sm); height: 14px; }

/* Cookie banner (layout only — text [TBD] Phase 9) */
.gi-cookie { border: var(--gi-bw-strong) solid var(--gi-line-strong); border-radius: var(--gi-radius); background: var(--gi-surface); padding: var(--gi-sp-4); display: grid; gap: var(--gi-sp-3); max-width: 560px; }

/* WhatsApp button (floating; demo shown static) */
.gi-wa { display: inline-flex; align-items: center; justify-content: center; gap: var(--gi-sp-2); min-height: 52px; padding: 0 var(--gi-sp-4); border-radius: var(--gi-radius); background: var(--gi-c-black); color: var(--gi-c-white); text-decoration: none; font-weight: var(--gi-fw-semibold); border: var(--gi-bw-strong) solid var(--gi-c-white); }
.gi-wa--float { position: fixed; inset-inline-end: var(--gi-sp-4); bottom: var(--gi-sp-4); z-index: var(--gi-z-whatsapp); }

/* ---------- Footer ---------- */
.gi-footer { background: var(--gi-surface-inverse); color: var(--gi-text-inverse); padding: var(--gi-sp-8) var(--gi-sp-4) var(--gi-sp-4); }
.gi-footer__cols { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: var(--gi-sp-6); }
.gi-footer h2, .gi-footer h4 { font-size: var(--gi-fs-small); margin: 0 0 var(--gi-sp-2); }
.gi-footer a { color: var(--gi-text-inverse); display: flex; align-items: center; min-height: var(--gi-target-min); font-size: var(--gi-fs-small); text-decoration: none; }
.gi-footer a:hover { text-decoration: underline; }
.gi-footer p { font-size: var(--gi-fs-small); margin: var(--gi-sp-2) 0 0; }
.gi-footer__legal { border-block-start: var(--gi-bw-hair) solid var(--gi-c-grey-text); margin-block-start: var(--gi-sp-6); padding-block-start: var(--gi-sp-3); font-size: var(--gi-fs-caption); }
.gi-footer :focus-visible { outline-color: var(--gi-c-white) !important; box-shadow: 0 0 0 var(--gi-focus-offset) var(--gi-c-black) !important; }

/* =====================================================================
   COMPACT LAYOUT — container ≤ 760 px (phones; checked at 320 and 390)
   ===================================================================== */
@container gi (max-width: 760px) {
  .gi-h1 { font-size: calc(26px * var(--gi-script-scale)); }
  .gi-h2 { font-size: calc(21px * var(--gi-script-scale)); }
  .gi-container { padding-inline: var(--gi-gutter); }
  .gi-topbar .gi-hide-m, .gi-header .gi-hide-m, .gi-nav { display: none !important; }
  .gi-header__main { min-height: var(--gi-header-main-h-m); gap: var(--gi-sp-2); padding-inline: var(--gi-sp-3); }
  .gi-burger { display: inline-flex; }
  .gi-logo { flex: 1; min-width: 0; }
  .gi-logo svg, .gi-logo__img { height: 28px; }
  .gi-tool { min-width: 48px; }
  .gi-search.gi-msearch { display: flex; }
  .gi-header__main > .gi-search { display: none; }
  .gi-mega { grid-template-columns: minmax(0, 1fr); }
  .gi-tablewrap.gi-tablewrap--models { display: none; }
  .gi-mcards { display: grid; }
  .gi-btn { white-space: normal; text-align: center; }
  .gi-selbar { padding-inline: var(--gi-sp-3); }
  .gi-selbar__actions { width: 100%; }
  .gi-selbar__actions .gi-btn { flex: 1 1 140px; }
  .gi-fgrid { grid-template-columns: minmax(0, 1fr); }
  .gi-filters.gi-filters--side { display: none; }
  .gi-mfilter-btn { display: inline-flex; }
  .gi-summary { max-width: none; }
  .gi-cartline { grid-template-columns: 56px minmax(0, 1fr); }
  .gi-cartline > .gi-qty, .gi-cartline__total { grid-column: 2; }
  .gi-cartline__total { text-align: start; }
  .gi-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gi-footer__cols > :first-child { grid-column: 1 / -1; }
}
@container gi (max-width: 360px) {
  .gi-tool span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gi-tool { min-width: 44px; }
}
/* Product card reacts to ITS OWN width (works in lists, sidebars, demos) */
@container gi-pcard (max-width: 640px) {
  .gi-pcard__in { grid-template-columns: 96px minmax(0, 1fr); gap: var(--gi-sp-3); }
  .gi-pcard__buy { grid-column: 1 / -1; justify-items: stretch; min-width: 0; }
}
@container gi-pcard (max-width: 340px) {
  .gi-pcard__in { grid-template-columns: minmax(0, 1fr); }
  .gi-pcard__img { max-width: 160px; }
}

/* Tablet (container 761–1024 px): menu bar collapses into the ☰ drawer; search stays in the main bar */
@container gi (max-width: 1024px) {
  .gi-nav { display: none !important; }
  .gi-burger { display: inline-flex; }
  .gi-header__main .gi-search__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@container gi (min-width: 1025px) and (max-width: 1180px) {
  .gi-nav__link { padding: 0 6px; font-size: var(--gi-fs-caption); }
}