/* ============================================================
   GGR TRADE — MOBILE APP SHELL, DIALOGS, SHEETS, RTL, PRINT
   ============================================================ */
@layer components {
  /* ---------- Mobile drawer ---------- */
  .scrim{ position:fixed; inset:0; background:rgba(6,16,38,.5); backdrop-filter:blur(2px); z-index:290; opacity:0; visibility:hidden; transition:opacity var(--dur-2),visibility var(--dur-2); }
  .scrim.show{ opacity:1; visibility:visible; }

  .drawer{ position:fixed; inset-block:0; inset-inline-start:0; inline-size:min(92vw,380px); background:#fff; z-index:300; transform:translateX(-102%); transition:transform var(--dur-3) var(--ease-out); display:flex; flex-direction:column; box-shadow:var(--sh-4); }
  [dir="rtl"] .drawer{ inset-inline-start:auto; inset-inline-end:0; transform:translateX(102%); }
  .drawer.open{ transform:none; }
  .drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:var(--sp-4); border-block-end:1px solid var(--c-line); }
  .drawer-body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:var(--sp-3) var(--sp-4) var(--sp-6); -webkit-overflow-scrolling:touch; }
  .drawer-search{ padding:var(--sp-3) var(--sp-4); border-block-end:1px solid var(--c-line); }
  .m-acc{ border-block-end:1px solid var(--c-line); }
  .m-acc > button{ inline-size:100%; display:flex; align-items:center; justify-content:space-between; padding:.95em .3em; font-family:var(--font-heading); font-weight:600; font-size:1.02rem; color:var(--ink-1); text-align:start; }
  .m-acc > button .caret{ inline-size:.85em; block-size:.85em; transition:transform var(--dur-2); color:var(--ink-3); }
  .m-acc.open > button .caret{ transform:rotate(180deg); }
  .m-acc-panel{ display:none; padding-block-end:var(--sp-3); }
  .m-acc.open .m-acc-panel{ display:block; }
  .m-acc-panel a{ display:flex; align-items:center; gap:.7rem; padding:.7em .3em; color:var(--ink-2); font-size:.95rem; }
  .m-acc-panel a:hover{ color:var(--brand); }
  .m-acc-panel a .mi{ inline-size:30px; block-size:30px; border-radius:var(--r-1); background:var(--c-surface-3); color:var(--brand); display:grid; place-items:center; flex-shrink:0; }
  .m-acc-panel a .mi svg{ inline-size:16px; block-size:16px; }
  .drawer-cta{ padding:var(--sp-4); border-block-start:1px solid var(--c-line); display:grid; gap:.5rem; }

  /* ---------- Bottom navigation ---------- */
  .bottom-nav{ position:fixed; inset-block-end:0; inset-inline:0; z-index:170; background:rgba(255,255,255,.98); backdrop-filter:blur(10px); border-block-start:1px solid var(--c-line); display:none; grid-template-columns:repeat(5,1fr); padding-block-end:env(safe-area-inset-bottom); }
  .bottom-nav a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:.5em 0; min-block-size:var(--bottomnav-h); font-size:.66rem; font-weight:600; color:var(--ink-3); position:relative; }
  .bottom-nav a svg{ inline-size:23px; block-size:23px; }
  .bottom-nav a[aria-current="page"]{ color:var(--brand); }
  .bottom-nav a.bn-quote{ color:#fff; }
  .bottom-nav a.bn-quote .bn-fab{ position:absolute; inset-block-start:-20px; inline-size:56px; block-size:56px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; box-shadow:var(--sh-3); border:4px solid #fff; }
  .bottom-nav a.bn-quote .bn-fab svg{ inline-size:26px; block-size:26px; }
  .bottom-nav a.bn-quote span{ margin-block-start:38px; color:var(--accent); }
  .bottom-nav a .bn-badge{ position:absolute; inset-block-start:6px; inset-inline-end:calc(50% - 22px); min-inline-size:16px; block-size:16px; padding:0 3px; background:var(--accent); color:#fff; font-size:.6rem; border-radius:var(--r-pill); display:grid; place-items:center; font-weight:700; }
  .bn-badge:empty,.bn-badge[data-count="0"]{ display:none; }
  @media (max-width:900px){ .bottom-nav{ display:grid; } body{ padding-block-end:calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); } }

  /* ---------- Bottom sheet (filters / search) ---------- */
  .sheet{ position:fixed; inset-block-end:0; inset-inline:0; z-index:310; background:#fff; border-radius:var(--r-4) var(--r-4) 0 0; box-shadow:var(--sh-4); transform:translateY(102%); transition:transform var(--dur-3) var(--ease-out); max-block-size:88vh; display:flex; flex-direction:column; }
  .sheet.open{ transform:none; }
  .sheet-grab{ inline-size:44px; block-size:5px; border-radius:var(--r-pill); background:var(--c-line-strong); margin:.6rem auto; }
  .sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:0 var(--sp-4) var(--sp-3); border-block-end:1px solid var(--c-line); }
  .sheet-body{ flex:1; overflow-y:auto; padding:var(--sp-4); }
  .sheet-foot{ padding:var(--sp-4); border-block-start:1px solid var(--c-line); display:flex; gap:.6rem; position:sticky; inset-block-end:0; background:#fff; }

  /* ---------- Search overlay ---------- */
  .search-overlay{ position:fixed; inset:0; z-index:320; background:rgba(255,255,255,.99); display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:opacity var(--dur-2),visibility var(--dur-2); }
  .search-overlay.open{ opacity:1; visibility:visible; }
  .search-overlay-head{ border-block-end:1px solid var(--c-line); padding:var(--sp-4) 0; }
  .search-overlay-head .wrap{ display:flex; gap:.6rem; align-items:center; }
  .search-box{ flex:1; display:flex; align-items:center; gap:.6rem; border:1.5px solid var(--c-line-strong); border-radius:var(--r-2); padding:.6em 1em; }
  .search-box input{ flex:1; border:0; outline:none; font-size:var(--fs-600); }
  .search-box svg{ inline-size:22px; block-size:22px; color:var(--ink-3); }
  .search-results{ flex:1; overflow-y:auto; padding-block:var(--sp-5); }
  .search-group-title{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; color:var(--ink-3); margin-block:var(--sp-4) var(--sp-2); }
  .search-hit{ display:flex; align-items:center; gap:.8rem; padding:.7em .6em; border-radius:var(--r-2); }
  .search-hit:hover,.search-hit.active{ background:var(--c-surface-2); }
  .search-hit .sh-ico{ inline-size:40px; block-size:40px; border-radius:var(--r-1); background:var(--c-surface-3); color:var(--brand); display:grid; place-items:center; flex-shrink:0; }
  .search-hit strong{ display:block; color:var(--ink-1); font-size:.95rem; }
  .search-hit span{ font-size:.8rem; color:var(--ink-3); }
  mark{ background:#FFF1A8; color:inherit; padding:0 .1em; border-radius:2px; }

  /* ---------- Dialog / modal ---------- */
  dialog.modal{ border:0; border-radius:var(--r-4); padding:0; max-inline-size:min(92vw,560px); box-shadow:var(--sh-4); }
  dialog.modal::backdrop{ background:rgba(6,16,38,.55); backdrop-filter:blur(2px); }
  .modal-head{ padding:var(--sp-5) var(--sp-5) 0; display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-3); }
  .modal-body{ padding:var(--sp-4) var(--sp-5) var(--sp-5); }

  /* ---------- Compare tray ---------- */
  .compare-tray{ position:fixed; inset-block-end:0; inset-inline:0; z-index:175; background:var(--c-navy); color:#fff; transform:translateY(102%); transition:transform var(--dur-3) var(--ease-out); }
  .compare-tray.show{ transform:none; }
  @media (max-width:900px){ .compare-tray{ inset-block-end:var(--bottomnav-h); } }
  .compare-tray .wrap-wide{ display:flex; align-items:center; gap:var(--sp-4); padding-block:var(--sp-3); }
  .compare-slots{ display:flex; gap:.6rem; flex:1; overflow-x:auto; }
  .compare-slot{ inline-size:58px; block-size:58px; border-radius:var(--r-2); background:rgba(255,255,255,.1); border:1px dashed rgba(255,255,255,.3); flex-shrink:0; position:relative; display:grid; place-items:center; font-size:.65rem; color:var(--ink-inv-2); }
  .compare-slot.filled{ background:#fff; border-style:solid; }
}

@layer utilities {
  /* ---------- RTL parity ---------- */
  [dir="rtl"]{ }
  [dir="rtl"] .eyebrow::before{ }
  [dir="rtl"] .hero::after{ inset-inline-end:auto; inset-inline-start:-10%; }
  [dir="rtl"] .diag-accent::before{ inset-inline-end:auto; inset-inline-start:0; transform:scaleX(-1); }
  /* logical properties handle the rest automatically */

  /* ---------- Print ---------- */
  @media print{
    .utilbar,.site-header,.bottom-nav,.qtray,.compare-tray,.toast-region,.site-footer .footer-social,.mega,.drawer,.scrim,.hero-cta,.hero-search,.btn,.no-print{ display:none!important; }
    body{ padding:0; color:#000; background:#fff; font-size:11pt; }
    .hero{ background:none!important; color:#000; }
    .hero h1,.section-navy,.cta-panel{ color:#000!important; background:none!important; }
    a[href]::after{ content:""; }
    .card,.spec-table-wrap,.accordion{ break-inside:avoid; border-color:#ccc; }
    .spec-table th{ background:#f2f2f2!important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    main{ padding:0; }
    .print-header{ display:block!important; border-block-end:2px solid #000; padding-block-end:8pt; margin-block-end:12pt; }
    section{ padding-block:8pt; }
  }
  .print-header{ display:none; }
}