/* Extracted from app/Views/site/layouts/master.php on 2026-06-09.
   Global static storefront CSS — cached externally for performance.
   Dynamic theme blocks remain inline in master.php. */

    :root{
      --bg:#f4f8ff;
      --card:#ffffff;
      --card2: rgba(255,255,255,.84);
      --line: rgba(56,76,104,.22);
      --line2: rgba(56,76,104,.14);
      --txt:#16314f;
      --muted:#56708e;
      --a:#0ea5a4;
      --b:#0ea5e9;
      --warn:#d9465f;
      --bg-grad-1: rgba(14,165,233,.14);
      --bg-grad-2: rgba(14,165,164,.11);
      --bg-grad-top:#f8fbff;
      --bg-grad-bottom:#f0f6ff;
      --btn-bg: rgba(255,255,255,.78);
      --btn-hover-bg: rgba(255,255,255,.97);
      --btn-hover-border: rgba(14,165,233,.38);
      --btn-primary-border: rgba(14,165,164,.36);
      --btn-primary-hover-border: rgba(14,165,164,.58);
      --btn-primary-bg: linear-gradient(180deg, rgba(14,165,164,.24), rgba(14,165,164,.11));
      --btn-primary-color:#0f4f4b;
      --btn-info-border: rgba(14,165,233,.34);
      --btn-info-bg: linear-gradient(180deg, rgba(14,165,233,.20), rgba(14,165,233,.10));
      --btn-info-color:#0f4e75;
      --btn-warn-border: rgba(217,70,95,.34);
      --btn-warn-bg: linear-gradient(180deg, rgba(217,70,95,.18), rgba(217,70,95,.08));
      --btn-warn-color:#7d1f32;
      --pill-bg: rgba(255,255,255,.74);
      --pill-soft-bg: rgba(14,165,233,.12);
      --pill-soft-border: rgba(14,165,233,.28);
      --pill-outline-border: rgba(56,76,104,.38);
      --badge-float-border: rgba(56,76,104,.24);
      --badge-float-bg: rgba(255,255,255,.84);
      --cmp-tray-border: rgba(56,76,104,.24);
      --cmp-tray-bg: rgba(255,255,255,.95);
      --cmp-tray-shadow: 0 18px 44px rgba(22,49,79,.20);
      --cmp-modal-bg: rgba(22,49,79,.28);
      --cmp-card-border: rgba(56,76,104,.24);
      --cmp-card-bg: rgba(249,252,255,.98);
      --cmp-card-shadow: 0 18px 44px rgba(22,49,79,.22);
      --cmp-section-bg: rgba(14,165,233,.10);
      --cmp-section-border: rgba(14,165,233,.28);
      --cmp-section-border-soft: rgba(14,165,233,.20);
      --cmp-section-color: var(--txt);
      --cmp-diff-bg: rgba(14,165,164,.08);
      --cookie-bg: rgba(255,255,255,.97);
      --cookie-border: rgba(56,76,104,.24);
      --cookie-shadow: 0 18px 38px rgba(22,49,79,.18);
      --cookie-desc: var(--muted);
      --cookie-accept-bg: linear-gradient(180deg, rgba(14,165,164,.24), rgba(14,165,164,.10));
      --cookie-accept-border: rgba(14,165,164,.35);
      --cookie-badge-border: rgba(56,76,104,.22);
      --cookie-badge-color: rgba(22,49,79,.78);
      --cookie-switch-border: rgba(56,76,104,.24);
      --cookie-switch-bg: rgba(190,205,224,.42);
      --cookie-switch-dot: rgba(255,255,255,.96);
      --cookie-switch-on-border: rgba(14,165,164,.32);
      --cookie-switch-on-bg: rgba(14,165,164,.20);
      --r: 18px;
      --shadow: 0 16px 36px rgba(22,49,79,.14);
      --shadow2: 0 8px 20px rgba(22,49,79,.10);
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
      --sans: "Manrope", "Segoe UI", Roboto, Arial, sans-serif;
      --head: "Sora", "Manrope", "Segoe UI", Roboto, Arial, sans-serif;
      --serif: ui-serif, Georgia, "Times New Roman", serif;
      --site-max: 1440px;
      --fs: 16.5px;
      --lh: 1.6;
    }

    /* ── Homepage block wrapper: CSS-variable-driven overrides ── */
    .blk-wrap > section h2,
    .blk-wrap > section .h2 {
      text-align:   var(--blk-title-align,  inherit) !important;
      font-size:    var(--blk-title-size,   inherit) !important;
      font-weight:  var(--blk-title-weight, inherit) !important;
      color:        var(--blk-title-color,  inherit) !important;
    }
    .blk-wrap > section .muted,
    .blk-wrap > section [class*="sub"] {
      color: var(--blk-sub-color, inherit) !important;
    }
    /* Container-width: constrain inner glass/shell wrappers */
    .blk-wrap[style*="--blk-max-w"] .cat-section-shell,
    .blk-wrap[style*="--blk-max-w"] .glass.soft:first-child,
    .blk-wrap[style*="--blk-max-w"] > section > div:first-child {
      max-width: var(--blk-max-w, none);
      margin-left: auto;
      margin-right: auto;
    }

    *{box-sizing:border-box}
    html{
      height:100%;
      background:
        linear-gradient(180deg, #fbfdff 0%, #f3f8ff 44%, #edf4ff 100%);
      background-repeat:no-repeat;
      background-color:#edf4ff;
    }
    html,body{height:100%}
    html, body { max-width: 100%; overflow-x: clip; }

    body{
      margin:0;
      position:relative;
      min-height:100%;
      isolation:isolate;
      font-family: var(--sans);
      font-size: var(--fs);
      line-height: var(--lh);
      color: var(--txt);
      background:
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.28) 18%),
        linear-gradient(180deg, #fbfdff 0%, #f3f8ff 44%, #edf4ff 100%);
      background-repeat:no-repeat;
      background-color:#edf4ff;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    body::before,
    body::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
    }
    body::before{
      z-index:-2;
      opacity:.94;
      background:
        radial-gradient(34rem 18rem at 8% -4%, rgba(56,189,248,.17), transparent 60%),
        radial-gradient(22rem 14rem at 92% 5%, rgba(34,197,94,.10), transparent 56%),
        radial-gradient(30rem 18rem at 50% 112%, rgba(14,165,233,.08), transparent 62%);
      background-repeat:no-repeat;
    }
    body::after{
      z-index:-1;
      opacity:.72;
      background:
        linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 22%),
        radial-gradient(50rem 28rem at 50% 32%, rgba(125,146,173,.07), transparent 74%);
      background-repeat:no-repeat;
    }

    @media (min-width: 521px){
      :root{ --lh: 1.65; }
    }
    @media (min-width: 761px){
      body::before{
        opacity:.98;
        background:
          radial-gradient(72rem 36rem at 8% -8%, rgba(56,189,248,.16), transparent 60%),
          radial-gradient(46rem 26rem at 92% 3%, rgba(14,165,164,.10), transparent 58%),
          radial-gradient(58rem 30rem at 50% 118%, rgba(14,165,233,.08), transparent 62%),
          radial-gradient(30rem 18rem at 18% 52%, rgba(125,211,252,.07), transparent 72%);
        background-repeat:no-repeat;
      }
    }

    .skip{
      position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
    }
    .skip:focus{
      left:12px;top:12px;width:auto;height:auto;overflow:visible;
      z-index:99999;
      padding:.6rem .9rem;
      border-radius:12px;
      background: rgba(56,189,248,.14);
      border:1px solid rgba(56,189,248,.35);
      color: var(--txt);
      text-decoration:none;
    }

    a{color:inherit}
    a.link{
      color: rgba(56,189,248,.95);
      text-decoration: none;
      border-bottom: 1px solid rgba(56,189,248,.25);
    }
    a.link:hover{border-bottom-color: rgba(56,189,248,.55)}

    .wrap{
      width: min(var(--site-max), 100%);
      max-width: 100%;
      margin: 0;
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
      padding-top: 14px;
      padding-bottom: 56px;
    }
    @media (min-width: 521px){
      .wrap{
        max-width: var(--site-max);
        margin: 0 auto;
        padding: 18px clamp(16px, 2vw, 24px) 72px;
      }
    }

    .muted{color:var(--muted)}
    .mono{font-family:var(--mono)}

    .glass{
      border:1px solid var(--line);
      background: var(--card);
      border-radius: var(--r);
      box-shadow: var(--shadow);
    }
    .glass.soft{
      background: var(--card2);
      box-shadow: var(--shadow2);
    }

    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      padding:.72rem 1.05rem;
      border-radius:999px;
      border:1px solid var(--line);
      background: var(--btn-bg);
      color: var(--txt);
      text-decoration:none;
      transition: transform .12s ease, border-color .12s ease, background .12s ease;
      user-select:none;
      white-space:nowrap;
      font-weight: 850;
      letter-spacing: .01em;
      min-height: 44px;
    }
    .btn:hover{
      border-color: var(--btn-hover-border);
      transform: translateY(-1px);
      background: var(--btn-hover-bg);
    }
    .btn.primary{
      border-color: var(--btn-primary-border);
      background: var(--btn-primary-bg);
      color: var(--btn-primary-color);
    }
    .btn.primary:hover{border-color: var(--btn-primary-hover-border)}
    .btn.info{
      border-color: var(--btn-info-border);
      background: var(--btn-info-bg);
      color: var(--btn-info-color);
    }
    .btn.warn{
      border-color: var(--btn-warn-border);
      background: var(--btn-warn-bg);
      color: var(--btn-warn-color);
    }
    .btn.ghost{ background: transparent; }
    .btn.ghost{ color: var(--txt); }
    .btn:disabled, .btn[disabled]{
      opacity:.45;
      cursor:not-allowed;
      transform:none !important;
    }

    .h1{
      margin:0;
      font-family: var(--head);
      font-weight: 1000;
      letter-spacing:-.03em;
      line-height:1.1;
      font-size: clamp(1.55rem, 2.2vw, 2.15rem);
    }
    .h2{
      margin:0;
      font-family: var(--head);
      font-weight: 950;
      letter-spacing:-.02em;
      font-size: 1.12rem;
    }

    .divider{
      height:1px;
      background: var(--line2);
      margin:18px 0;
    }

    .grid{display:grid; gap:10px}
    .g2,.g3,.g4,.g5,.g6{grid-template-columns:1fr}
    @media (min-width: 521px){
      .grid{gap:12px}
      .g4,.g5,.g6{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media (min-width: 861px){
      .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
      .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
    }
    @media (min-width: 981px){
      .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
      .g5{grid-template-columns:repeat(5,minmax(0,1fr))}
      .g6{grid-template-columns:repeat(6,minmax(0,1fr))}
    }

    .pill{
      display:inline-flex;align-items:center;gap:8px;
      padding:.30rem .62rem;
      border-radius:999px;
      border:1px solid var(--line2);
      background: var(--pill-bg);
      font-size:.82rem;
      opacity:.98;
    }
    .pill.soft{
      background: var(--pill-soft-bg);
      border-color: var(--pill-soft-border);
    }
    .pill.outline{
      background: transparent;
      border-color: var(--pill-outline-border);
    }
    .btn.outline{
      background: transparent;
      border-color: var(--pill-outline-border);
    }

    .p-card{
      display:block;
      border:1px solid var(--line);
      border-radius: 22px;
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(255,255,255,.99), rgba(244,248,255,.95)),
        var(--card);
      text-decoration:none;
      transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
      position:relative;
      content-visibility:auto;
      contain-intrinsic-size: 420px;
      box-shadow: var(--shadow2);
    }
    .p-card-link{
      display:block;
      color:inherit;
      text-decoration:none;
    }
    .p-card:hover{
      transform: translateY(-2px);
      border-color: rgba(56,189,248,.26);
      box-shadow: 0 20px 42px rgba(22,49,79,.16);
    }

    .p-img{
      height: 168px;
      background: radial-gradient(circle at 60% 30%, rgba(14,165,233,.07), transparent 60%), #f8faff;
      position:relative;
      overflow:hidden;
      display:flex;align-items:center;justify-content:center;
      border-bottom:1px solid rgba(148,163,184,.10);
    }
    @media (min-width: 521px){
      .p-img{ height: 178px; }
    }

    .p-img img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
      padding:12px;
      background:transparent;
      transition: transform .22s ease;
    }
    .p-card:hover .p-img img{ transform:scale(1.05); }
    .p-img picture{
      width:100%;
      height:100%;
      display:block;
    }
    .p-img::after{
      content:"";
      position:absolute;bottom:0;left:0;right:0;height:36px;
      background:linear-gradient(to bottom, transparent, rgba(248,250,255,.45));
      pointer-events:none;
    }
    .img-ph{
      width:100%;
      height:100%;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      gap:6px;
      padding:12px;
      color: rgba(71,85,105,.92);
      background:
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%),
        repeating-linear-gradient(
          -45deg,
          rgba(148,163,184,.08) 0px,
          rgba(148,163,184,.08) 8px,
          rgba(148,163,184,.03) 8px,
          rgba(148,163,184,.03) 16px
        );
      font-size:.82rem;
      line-height:1.35;
      letter-spacing:.01em;
    }
    .img-ph i{
      font-size:1.05rem;
      opacity:.9;
      color:#64748b;
    }

    .p-body{
      padding:14px;
      display:flex;
      flex-direction:column;
      gap:8px;
      background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,250,255,.96));
    }
    .p-meta-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      flex-wrap:wrap;
      min-height:20px;
    }
    .p-brand{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:.24rem .56rem;
      border-radius:999px;
      border:1px solid rgba(56,189,248,.20);
      background: rgba(56,189,248,.10);
      color: #0f4e75;
      font-size:.72rem;
      font-weight:800;
      letter-spacing:.01em;
    }
    .p-name{
      font-weight: 850;
      line-height:1.24;
      color: var(--txt);
      font-size: 1rem;
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
      overflow:hidden;
    }
    .p-sku{
      opacity:1;
      color: #6b7f95;
      font-size:.78rem;
      margin-top:0;
    }
    .p-detail{
      color: var(--muted);
      font-size:.84rem;
      line-height:1.4;
      min-height:2.7em;
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
      overflow:hidden;
    }
    .p-price{
      margin-top:2px;
      font-weight: 980;
      display:flex;gap:10px;align-items:baseline;
      font-size: 1.12rem;
      flex-wrap:wrap;
      color: var(--txt);
    }
    .p-price small{opacity:.78;text-decoration:line-through;font-weight:800;color:#7890a8}
    .p-link{color:inherit;text-decoration:none}
    .p-card-action .p-name.p-link:hover{opacity:.92}
    .p-actions{margin-top:10px;display:grid;grid-template-columns:1fr;gap:8px}
    .p-card-action .p-actions{
      grid-template-columns:minmax(0,1fr) auto;
      align-items:stretch;
    }
    .p-card-action .p-action-form{grid-column:1}
    .p-action-form{margin:0;display:block;width:100%}
    .p-action-btn{
      width:100%;
      min-height:42px;
      padding:.5rem .85rem;
      font-size:.86rem;
      border-radius:14px;
      white-space:nowrap;
    }
    .p-aux{
      padding:0 14px 14px;
      display:grid;
      grid-template-columns:1fr;
      gap:8px;
      background:linear-gradient(180deg, rgba(246,250,255,.96), rgba(243,248,255,.94));
    }
    .p-aux-inline.has-compare{
      grid-template-columns:minmax(0,1fr) auto;
      align-items:stretch;
    }
    .p-compare-btn{
      width:100%;
      min-height:42px;
      border-radius:14px;
      font-size:.84rem;
    }
    .p-aux-inline.has-compare .p-compare-btn{
      width:auto;
      min-width:122px;
    }
    .js-compare-toggle.is-active{
      border-color: rgba(56,189,248,.52);
      background: rgba(56,189,248,.16);
    }

    .badge-float{
      position:absolute; top:10px; left:10px;
      padding:.25rem .58rem;
      border-radius:999px;
      border:1px solid var(--badge-float-border);
      background: var(--badge-float-bg);
      font-size:.78rem;
      display:inline-flex;align-items:center;gap:8px;
      z-index:2;
    }
    .badge-sale{
      position:absolute;
      top:10px;
      right:10px;
      padding:.24rem .54rem;
      border-radius:999px;
      border:1px solid rgba(34,197,94,.26);
      background: rgba(34,197,94,.16);
      color: rgba(220,252,231,.98);
      font-size:.76rem;
      font-weight:900;
      z-index:2;
    }

    .prose{
      color: var(--txt);
      opacity: .98;
      max-width: 85ch;
      overflow-wrap:anywhere;
    }
    .prose p{margin:.55rem 0}
    .prose ul{margin:.55rem 0; padding-left: 1.1rem}
    .prose li{margin:.25rem 0}
    .prose code{
      font-family: var(--mono);
      font-size: .95em;
      background: rgba(56,189,248,.08);
      border:1px solid rgba(56,189,248,.18);
      padding: .10rem .35rem;
      border-radius: 10px;
      white-space: pre-wrap;
      word-break: break-word;
    }

    :focus-visible{
      outline: 2px solid rgba(56,189,248,.60);
      outline-offset: 2px;
      border-radius: 12px;
    }

    [data-reveal]{
      opacity:1;
      transform: translate3d(0, 0, 0);
    }
    .reveal-ready [data-reveal]{
      opacity:0;
      transform: translate3d(0, 14px, 0);
      transition: opacity .38s ease, transform .38s ease;
      will-change: opacity, transform;
    }
    .reveal-ready [data-reveal].is-visible{
      opacity:1;
      transform: translate3d(0, 0, 0);
      will-change:auto;
    }

    .cmp-tray{
      position:fixed;
      left:10px;
      right:10px;
      bottom:10px;
      z-index:1190;
      border:1px solid var(--cmp-tray-border);
      background:var(--cmp-tray-bg);
      border-radius:16px;
      box-shadow:var(--cmp-tray-shadow);
      padding:10px;
    }
    .cmp-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .cmp-list{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      flex:1;
    }
    .cmp-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      border:1px solid rgba(56,189,248,.30);
      background:rgba(56,189,248,.12);
      padding:.34rem .64rem;
      font-size:.82rem;
      max-width:320px;
    }
    .cmp-pill-text{
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .cmp-mini{
      border:0;
      background:transparent;
      color:inherit;
      width:22px;
      height:22px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
    }
    .cmp-actions{
      display:flex;
      gap:8px;
      align-items:center;
      flex-wrap:wrap;
    }
    .cmp-modal{
      position:fixed;
      inset:0;
      z-index:1300;
      background:var(--cmp-modal-bg);
      display:none;
      align-items:center;
      justify-content:center;
      padding:16px;
    }
    .cmp-modal.open{display:flex}
    .cmp-card{
      width:min(1000px, 96vw);
      max-height:86vh;
      overflow:auto;
      border:1px solid var(--cmp-card-border);
      border-radius:18px;
      background:var(--cmp-card-bg);
      box-shadow:var(--cmp-card-shadow);
      padding:14px;
    }
    .cmp-table{
      width:100%;
      border-collapse:collapse;
      font-size:.9rem;
    }
    .cmp-table th,
    .cmp-table td{
      border-bottom:1px solid rgba(148,163,184,.18);
      padding:9px 8px;
      text-align:left;
      vertical-align:top;
    }
    .cmp-table th{
      color:var(--muted);
      font-weight:800;
      width:110px;
    }
    .cmp-section-row th{
      background:var(--cmp-section-bg);
      border-top:1px solid var(--cmp-section-border);
      border-bottom:1px solid var(--cmp-section-border-soft);
      color:var(--cmp-section-color);
      font-weight:900;
      letter-spacing:.01em;
    }
    .cmp-row-diff td{
      background:var(--cmp-diff-bg);
    }
    .cmp-cell-empty{
      color:rgba(148,163,184,.85);
    }
    .cmp-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom:10px;
    }
    .cmp-close{
      width:34px;
      height:34px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.30);
      background:transparent;
      color:inherit;
    }
    body.cmp-active .ai-chat-root{
      bottom:84px;
    }
    @media (min-width: 681px){
      .cmp-tray{left:14px;right:14px;bottom:14px;}
      .cmp-pill{max-width:320px}
      .cmp-table th{width:140px}
      body.cmp-active .ai-chat-root{bottom:92px;}
    }

    @media (prefers-reduced-motion: reduce){
      .btn, .p-card, [data-reveal]{transition:none}
      .p-card:hover{transform:none}
      .btn:hover{transform:none}
      [data-reveal]{opacity:1;transform:none}
    }

    main, header, footer, .wrap { max-width: 100%; }
    main { overflow-x: hidden; }
    img, svg, video, canvas, iframe { max-width: 100%; height:auto; display:block; }
    img[loading="lazy"]{ content-visibility:auto; }
    * { overflow-wrap:anywhere; }
    table{ display:block; max-width:100%; overflow-x:auto; }

    /* ═══════════════════════════════════════════════════════════════
       RESPONSIVE GUARDRAILS — 2026 overhaul
       Prevent horizontal overflow on every viewport without locking
       any page to a fixed "mobile" or "desktop" mode. Layered with
       low specificity so per-page styles can still override.
       ═══════════════════════════════════════════════════════════════ */
    html, body { overflow-x: hidden; }
    body { min-width: 0; }

    /* Containers shrink with their parent at any width */
    .wrap, .container, main, section, article, header, footer,
    .pd-grid, .pd-tabs, .pd-tab-panel, .pd-spec-grid,
    .cart-grid, .checkout-grid, .checkout-shell,
    .acc-wrap, .acc-main, .acc-side,
    .fb-block, .fb-section,
    .pcard, .pcard-grid {
      max-width: 100%;
      min-width: 0;
    }

    /* Anything inside a flex/grid item should be allowed to shrink */
    .flex > *, [class*="flex-"] > *,
    .pd-tab-panel > *, .pd-grid > *, .cart-grid > *,
    .checkout-grid > *, .checkout-shell > * { min-width: 0; }

    /* Long words / URLs in user content break safely */
    p, li, td, th, .desc, .prose, .desc-p, .pcard-name, .pcard-detail,
    .fb-section, .acc-body, .qr-text, .qa-text {
      word-break: break-word;
      overflow-wrap: anywhere;
    }

    /* Horizontal scroll groups (chip rails, filter pills) get momentum
       on touch but never break the page */
    .chip-rail, .pill-rail, .filter-rail-horizontal, .pd-tab-nav,
    .scroll-x {
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }

    /* Buttons + form inputs are full-width by default on narrow screens */
    @media (max-width: 520px){
      .btn-block-sm, .pd-cta-row .btn,
      .checkout-actions .btn, .fb-form .btn,
      .review-form button[type="submit"], .qa-form button[type="submit"] {
        width: 100%;
      }
      .pd-cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
      .pd-spec-grid { grid-template-columns: 1fr !important; }
    }

    /* Sticky elements never overlap the bottom safe-area */
    .pd-sticky, .checkout-summary-sticky {
      position: sticky;
      top: 84px;
    }
    @media (max-width: 860px){
      .pd-sticky, .checkout-summary-sticky { position: static; top: auto; }
    }

    /* Modals + drawers never exceed viewport */
    .modal, .modal-card, .drawer, .pop, .panel-card {
      max-width: min(100%, 720px);
      max-height: calc(100dvh - 32px);
      overflow-y: auto;
    }
    @media (max-width: 520px){
      .modal-card, .drawer, .panel-card {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
      }
    }

    /* Iframes (YouTube embeds, etc.) honour their aspect ratio */
    .embed-16x9 {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
    }
    .embed-16x9 > iframe {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      border: 0;
    }

    /* ═══════════════════════════════════════════════════════════════
       PERFORMANCE HINTS — content-visibility for offscreen blocks
       Skips paint + layout work on blocks scrolled out of view.
       Each block declares its intrinsic size so scroll positions stay
       stable; the browser still places exact pixels once the block
       enters the viewport.
       ═══════════════════════════════════════════════════════════════ */
    .fb-block,                  /* Reviews + Q&A on PDP */
    .cmm-grid,                  /* Admin community moderation grid */
    .cm-grid,                   /* Public community gallery */
    .pcard-grid,                /* Product card grids */
    .acc-orders, .acc-kits      /* Account dashboard sections */
    {
      content-visibility: auto;
      contain-intrinsic-size: 600px;
    }
    /* And large image sections render faster when their height is reserved */
    .cm-card-img, .cmd-photo, .cmm-card-img {
      content-visibility: auto;
      contain-intrinsic-size: 320px;
    }

    /* CLS guardrail — reserve aspect ratio for every product card image
       container, so layout doesn't shift when WebP variants stream in. */
    .p-card .p-img, .p-link .p-img, .pcard .p-img,
    .pcard-grid .p-img, .pcard-image, .pcard-image-wrap {
      aspect-ratio: 1 / 1;
      overflow: hidden;
      background: #f1f5f9;
    }
    .p-img picture, .p-img picture > img,
    .pcard-image picture, .pcard-image picture > img {
      width: 100%; height: 100%; display: block; object-fit: cover;
    }

    /* ═══════════════════════════════════════════════════════════════
       RTL GUARDRAILS — applied when <html dir="rtl"> (Arabic mode)
       Flips horizontal margins, paddings, borders, and float-style
       alignment so the entire storefront mirrors cleanly without
       touching every individual page.
       ═══════════════════════════════════════════════════════════════ */
    html[dir="rtl"] body {
      font-family: "Tajawal", "Cairo", "Manrope", system-ui, sans-serif;
      letter-spacing: 0;
    }
    html[dir="rtl"] .sh-nav, html[dir="rtl"] .sh-actions {
      flex-direction: row-reverse;
    }
    html[dir="rtl"] .pd-cta-row,
    html[dir="rtl"] .checkout-actions,
    html[dir="rtl"] .cm-hero .actions {
      flex-direction: row-reverse;
    }
    /* Common horizontal margin/padding utilities — mirror under RTL */
    html[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: .25rem !important; }
    html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .5rem  !important; }
    html[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem   !important; }
    html[dir="rtl"] .ms-1 { margin-left: 0  !important; margin-right: .25rem !important; }
    html[dir="rtl"] .ms-2 { margin-left: 0  !important; margin-right: .5rem  !important; }
    html[dir="rtl"] .ms-3 { margin-left: 0  !important; margin-right: 1rem   !important; }
    html[dir="rtl"] .pe-1 { padding-right: 0 !important; padding-left: .25rem !important; }
    html[dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: .5rem  !important; }
    html[dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem   !important; }
    html[dir="rtl"] .ps-1 { padding-left: 0  !important; padding-right: .25rem !important; }
    html[dir="rtl"] .ps-2 { padding-left: 0  !important; padding-right: .5rem  !important; }
    html[dir="rtl"] .ps-3 { padding-left: 0  !important; padding-right: 1rem   !important; }
    html[dir="rtl"] .text-end   { text-align: left  !important; }
    html[dir="rtl"] .text-start { text-align: right !important; }
    /* Floating UI elements anchored to a side */
    html[dir="rtl"] .byk-tray {
      right: auto;
      left: max(16px, env(safe-area-inset-left));
    }
    html[dir="rtl"] .byk-toggle {
      right: auto;
      left: max(16px, env(safe-area-inset-left));
    }
    /* Carets / chevrons that point "forward" need to flip */
    html[dir="rtl"] .bi-chevron-right::before { content: "\f284"; } /* chevron-left */
    html[dir="rtl"] .bi-chevron-left::before  { content: "\f285"; } /* chevron-right */
    html[dir="rtl"] .bi-arrow-right::before   { content: "\f12f"; } /* arrow-left */
    html[dir="rtl"] .bi-arrow-left::before    { content: "\f138"; } /* arrow-right */
    /* Tab nav scroll direction reads natural under RTL */
    html[dir="rtl"] .pd-tab-nav { direction: rtl; }

    /* ═══════════════════════════════════════════════════════════════
       BUILD-YOUR-OWN-KIT TRAY — floating bottom-right cluster
       ═══════════════════════════════════════════════════════════════ */
    .byk-tray{
      position:fixed;
      right:max(16px, env(safe-area-inset-right));
      bottom:calc(max(16px, env(safe-area-inset-bottom)) + 78px);
      z-index:1100;
      display:none;
      width:320px;
      max-width:calc(100vw - 32px);
      background:#ffffff;
      border:1px solid #e5e9f0;
      border-radius:18px;
      box-shadow:0 24px 50px -10px rgba(15,23,42,.25);
      overflow:hidden;
      font-family:"Manrope", system-ui, sans-serif;
    }
    .byk-tray.show{ display:block; animation: bykSlide .25s ease both; }
    @keyframes bykSlide{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
    .byk-head{
      padding:14px 16px;
      background:linear-gradient(160deg, #0a1224, #1e293b);
      color:#f1f5f9;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
    }
    .byk-head h4{
      margin:0 !important;
      font-family:"Sora","Manrope",system-ui,sans-serif !important;
      font-size:.9rem !important;
      font-weight:850 !important;
      letter-spacing:-.01em !important;
      color:#fff !important;
      display:flex; align-items:center; gap:8px;
    }
    .byk-head h4 i{ color:#fde68a; }
    .byk-close{
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.16);
      color:#cbd5e1;
      width:28px; height:28px;
      border-radius:8px;
      display:inline-flex; align-items:center; justify-content:center;
      cursor:pointer;
    }
    .byk-close:hover{ background:rgba(255,255,255,.16); color:#fff; }
    .byk-body{
      max-height:280px;
      overflow-y:auto;
      padding:10px;
    }
    .byk-row{
      display:flex; align-items:center; gap:10px;
      padding:8px 10px;
      border-radius:10px;
      background:#f7fafc;
      margin-bottom:6px;
      font-size:.84rem;
      color:#0f172a;
    }
    .byk-row:last-child{ margin-bottom:0; }
    .byk-row-name{
      flex:1; min-width:0;
      font-weight:700;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .byk-row-qty{
      display:inline-flex; align-items:center;
      padding:.18rem .55rem;
      border-radius:999px;
      background:#0b1220;
      color:#fff;
      font-size:.72rem;
      font-weight:800;
    }
    .byk-row-del{
      background:none; border:0; color:#94a3b8; cursor:pointer;
      font-size:1rem; padding:2px 4px;
    }
    .byk-row-del:hover{ color:#dc2626; }
    .byk-foot{
      padding:12px 14px;
      border-top:1px solid #e5e9f0;
      background:#fff;
      display:flex; gap:8px; flex-wrap:wrap;
    }
    .byk-foot .btn-quote{
      flex:1; min-width:120px;
      display:inline-flex; align-items:center; justify-content:center; gap:6px;
      padding:.7rem .95rem;
      border-radius:10px;
      background:#0b1220;
      color:#fff;
      border:1px solid #0b1220;
      font-family:"Sora","Manrope",system-ui,sans-serif;
      font-weight:850;
      font-size:.84rem;
      text-decoration:none;
      cursor:pointer;
    }
    .byk-foot .btn-quote:hover{ background:#1e293b; }
    .byk-foot .btn-clear{
      background:#fff;
      color:#64748b;
      border:1px solid #e5e9f0;
      padding:.7rem .85rem;
      border-radius:10px;
      font-weight:700;
      font-size:.82rem;
      cursor:pointer;
    }
    .byk-empty{
      text-align:center;
      padding:24px 16px;
      color:#94a3b8;
      font-size:.85rem;
    }

    /* Toggle button (floats on PDP) */
    .byk-toggle{
      position:fixed;
      right:max(16px, env(safe-area-inset-right));
      bottom:calc(max(16px, env(safe-area-inset-bottom)) + 78px);
      z-index:1090;
      display:none;
      align-items:center; gap:8px;
      padding:.7rem 1.1rem;
      border-radius:999px;
      background:#0b1220;
      color:#fff;
      border:1px solid #0b1220;
      font-family:"Sora","Manrope",system-ui,sans-serif;
      font-weight:850;
      font-size:.84rem;
      box-shadow:0 14px 30px -10px rgba(15,23,42,.45);
      cursor:pointer;
    }
    .byk-toggle.show{ display:inline-flex; }
    .byk-toggle:hover{ background:#1e293b; }
    .byk-toggle .count{
      display:inline-flex; align-items:center; justify-content:center;
      min-width:22px; height:22px; padding:0 7px;
      border-radius:999px;
      background:#fde68a;
      color:#1f2937;
      font-size:.72rem;
      font-weight:900;
    }
    @media (max-width: 640px){
      .byk-toggle, .byk-tray{
        bottom:calc(max(16px, env(safe-area-inset-bottom)) + 70px);
      }
    }

    /* ═══════════════════════════════════════════════════════════════
       STICKY COMPACT HEADER on scroll
       ═══════════════════════════════════════════════════════════════ */
    .sh-header{ position:sticky; top:0; z-index:100; transition:box-shadow .2s ease, padding .2s ease; }
    body.sh-scrolled .sh-header{
      box-shadow:0 6px 18px -8px rgba(15,23,42,.16);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      background: rgba(255,255,255,.92) !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       PRODUCT-CARD IMAGE HOVER (subtle zoom)
       ═══════════════════════════════════════════════════════════════ */
    .p-card .p-img{ overflow:hidden; }
    .p-card .p-img img{ transition: transform .35s ease; }
    .p-card:hover .p-img img{ transform: scale(1.06); }

    /* ═══════════════════════════════════════════════════════════════
       PRODUCT-CARD IMAGE CENTERING FIX
       Root cause: <a class="p-link"> defaults to display:inline, so
       the link shrinks to fit the image and the .p-img wrapper only
       stretches as wide as the image (~178px) instead of filling the
       card (~280px). Making the link a block element lets every
       descendant stretch to the full card width.
       ═══════════════════════════════════════════════════════════════ */
    article.p-card .p-link{
      display: block !important;
      width: 100% !important;
    }
    article.p-card .p-img{
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
    }
    article.p-card .p-img picture{
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
      height: 100% !important;
    }
    article.p-card .p-img img{
      max-width: 78% !important;
      max-height: 90% !important;
      width: auto !important;
      height: auto !important;
      object-fit: contain !important;
      object-position: center center !important;
      margin: auto !important;
      display: block !important;
      padding: 0 !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       WISHLIST HEART — global product card button
       ═══════════════════════════════════════════════════════════════ */
    .pcard-heart{
      position:absolute;
      top:10px; right:10px;
      width:38px; height:38px;
      border-radius:50%;
      background:rgba(255,255,255,.95);
      border:1px solid #e5e9f0;
      color:#94a3b8;
      display:inline-flex; align-items:center; justify-content:center;
      font-size:1.05rem;
      cursor:pointer;
      z-index:5;
      box-shadow:0 4px 10px rgba(15,23,42,.08);
      transition:transform .15s ease, color .15s ease, border-color .15s ease, background .15s ease;
    }
    .pcard-heart:hover{
      transform:scale(1.08);
      color:#dc2626;
      border-color:#fca5a5;
      background:#ffffff;
    }
    .pcard-heart.is-saved{
      color:#dc2626 !important;
      border-color:#fca5a5;
      background:#fef2f2;
    }
    .pcard-heart.is-saved .bi-heart::before{ content:"\f415"; }
    .pcard-heart:focus-visible{ outline:2px solid #0ea5e9; outline-offset:2px; }
    .p-card{ position:relative; }

    .wishlist-toast{
      position:fixed;
      left:50%;
      bottom:24px;
      transform:translateX(-50%) translateY(20px);
      z-index:10080;
      padding:.7rem 1.1rem;
      border-radius:12px;
      background:#0b1220;
      color:#fff;
      font-family:"Sora","Manrope",system-ui,sans-serif;
      font-weight:800;
      font-size:.88rem;
      box-shadow:0 18px 36px -10px rgba(8,15,30,.5);
      opacity:0;
      pointer-events:none;
      transition:opacity .2s ease, transform .2s ease;
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .wishlist-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
    .wishlist-toast i{ color:#fde68a; }
    .wishlist-toast a{ color:#bae6fd; text-decoration:underline; }

    /* ═══════════════════════════════════════════════════════════════
       COOKIE CONSENT — showroom DNA refresh
       Premium light banner, cinematic dark FAB, clean toggles.
       ═══════════════════════════════════════════════════════════════ */

    /* — Floating "Cookie Settings" trigger button — */
    .cookie-settings-fab{
      position: fixed;
      right: max(16px, env(safe-area-inset-right));
      bottom: calc(max(16px, env(safe-area-inset-bottom)) + 78px);
      z-index: 10040;
      display: none;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: .55rem .95rem .55rem .8rem;
      border-radius: 999px;
      border: 1px solid rgba(125,211,252,.32);
      background: linear-gradient(160deg, #0a1224 0%, #0e1a32 50%, #08101f 100%);
      color: #f1f5f9;
      box-shadow:
        0 14px 30px -10px rgba(3,8,20,.45),
        inset 0 1px 0 rgba(255,255,255,.08);
      font-family: "Sora","Manrope",system-ui,sans-serif;
      font-size: .82rem;
      font-weight: 800;
      letter-spacing: .01em;
      white-space: nowrap;
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }
    .cookie-settings-fab.show{ display: inline-flex; }
    .cookie-settings-fab:hover{
      transform: translateY(-2px);
      border-color: rgba(125,211,252,.55);
      box-shadow:
        0 20px 38px -10px rgba(3,8,20,.5),
        inset 0 1px 0 rgba(255,255,255,.12);
    }
    .cookie-settings-fab .bi{
      width: 26px; height: 26px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 50%;
      background: rgba(125,211,252,.16);
      border: 1px solid rgba(125,211,252,.32);
      color: #bae6fd;
      font-size: .82rem;
    }
    .cookie-settings-fab .label{
      display: inline-flex; align-items: center; line-height: 1;
    }
    .cookie-settings-fab:focus-visible{
      outline: 2px solid rgba(125,211,252,.65);
      outline-offset: 2px;
    }

    /* — Backdrop overlay for the banner — */
    .cookie-banner{
      position: fixed;
      inset: auto 0 0 0;
      z-index: 10050;
      display: none;
      padding: 16px;
      pointer-events: none;
    }
    .cookie-banner.show{
      display: flex;
      align-items: flex-end;
      justify-content: center;
      pointer-events: auto;
    }
    .cookie-banner::before{
      content: "";
      position: fixed;
      inset: 0;
      background: rgba(8,15,30,.45);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      animation: cookieFadeIn .25s ease both;
      z-index: -1;
    }
    @keyframes cookieFadeIn{ from{ opacity: 0; } to{ opacity: 1; } }

    /* — Banner card — */
    .cookie-banner > *{
      width: 100%;
      max-width: 560px;
      animation: cookieRise .35s cubic-bezier(.22,.61,.36,1) both;
    }
    @keyframes cookieRise{
      from{ transform: translateY(24px); opacity: 0; }
      to{ transform: translateY(0); opacity: 1; }
    }
    .cookie-banner .cookie-card{
      background: #ffffff;
      border: 1px solid #e5e9f0;
      border-radius: 24px;
      box-shadow: 0 30px 60px -20px rgba(8,15,30,.4);
      overflow: hidden;
      padding: 24px 26px;
    }
    @media (max-width: 560px){
      .cookie-banner .cookie-card{ padding: 20px 22px; border-radius: 20px; }
    }

    .cookie-copy{
      display: flex; flex-direction: column; gap: 10px;
    }
    .cookie-kicker{
      display: inline-flex; align-items: center; gap: 8px;
      width: max-content; max-width: 100%;
      padding: .35rem .8rem;
      border-radius: 999px;
      background: #e0f2fe;
      border: 1px solid #bae6fd;
      color: #075985;
      font-size: .68rem;
      font-weight: 850;
      letter-spacing: .14em;
      text-transform: uppercase;
      line-height: 1;
    }
    .cookie-kicker::before{
      content: ""; width: 6px; height: 6px; border-radius: 50%;
      background: #16a34a;
      box-shadow: 0 0 0 0 rgba(22,163,74,.5);
      animation: cookiePulse 2s ease-out infinite;
    }
    @keyframes cookiePulse{
      0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.45); }
      70%  { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
      100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
    }
    .cookie-banner h3{
      margin: 4px 0 0 !important;
      font-family: "Sora","Manrope",system-ui,sans-serif !important;
      font-size: 1.25rem !important;
      font-weight: 900 !important;
      letter-spacing: -.02em !important;
      line-height: 1.2 !important;
      color: #0f172a !important;
    }
    .cookie-banner p{
      margin: 0;
      color: #475569;
      font-size: .92rem;
      line-height: 1.55;
    }

    /* — Primary action row — */
    .cookie-actions{
      display: flex; flex-direction: column; gap: 8px;
      margin-top: 18px;
    }
    .cookie-actions .btn{
      flex: 0 0 auto;
      width: 100%;
      min-height: 46px;
      padding: .72rem 1.1rem;
      border-radius: 12px;
      font-family: "Sora","Manrope",system-ui,sans-serif;
      font-weight: 850;
      font-size: .9rem;
      letter-spacing: .005em;
      border: 1px solid transparent;
      cursor: pointer;
      text-align: center;
      transition: background .15s ease, border-color .15s ease, transform .15s ease;
      white-space: normal;
      box-shadow: none;
    }
    .cookie-actions .btn.cookie-accept{
      background: #0b1220;
      border-color: #0b1220;
      color: #ffffff;
    }
    .cookie-actions .btn.cookie-accept:hover{
      background: #1e293b;
      border-color: #1e293b;
      transform: translateY(-1px);
    }
    .cookie-actions .btn.warn{
      background: #ffffff;
      border-color: #cbd5e1;
      color: #0f172a;
    }
    .cookie-actions .btn.warn:hover{
      background: #f7fafc;
      border-color: #94a3b8;
    }
    .cookie-actions .btn.ghost{
      background: transparent;
      border-color: transparent;
      color: #0369a1;
      text-decoration: underline;
      text-underline-offset: 3px;
      min-height: 36px;
      padding: .4rem .6rem;
      font-size: .85rem;
    }
    .cookie-actions .btn.ghost:hover{
      color: #0b1220;
      background: transparent;
    }
    .cookie-actions .btn:focus-visible,
    .cookie-switch:focus-visible{
      outline: 2px solid #0ea5e9;
      outline-offset: 2px;
    }

    /* — Expandable preferences panel — */
    .cookie-panel{
      display: none;
      margin-top: 16px;
      padding: 16px;
      border-radius: 16px;
      background: #f7fafc;
      border: 1px solid #e5e9f0;
    }
    .cookie-panel.open{ display: block; }
    .cookie-row{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 12px 0;
      border-bottom: 1px solid #e5e9f0;
    }
    .cookie-row:first-child{ padding-top: 4px; }
    .cookie-row:last-child{ border-bottom: none; padding-bottom: 4px; }
    .cookie-row .meta{ flex: 1 1 auto; min-width: 0; }
    .cookie-row .label{
      margin: 0 0 4px;
      font-family: "Sora","Manrope",system-ui,sans-serif;
      font-weight: 850;
      font-size: .92rem;
      line-height: 1.3;
      color: #0f172a;
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    }
    .cookie-row .desc{
      margin: 0;
      color: #64748b;
      font-size: .84rem;
      line-height: 1.5;
    }
    .cookie-badge{
      display: inline-flex; align-items: center;
      padding: .15rem .55rem;
      border-radius: 999px;
      background: #e0f2fe;
      border: 1px solid #bae6fd;
      color: #075985;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      line-height: 1.35;
      white-space: nowrap;
    }

    /* — Toggle switch — */
    .cookie-switch{
      position: relative;
      width: 46px;
      height: 26px;
      border-radius: 999px;
      border: 1px solid #cbd5e1;
      background: #e5e9f0;
      flex: 0 0 auto;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease;
    }
    .cookie-switch::after{
      content: '';
      position: absolute;
      top: 2px; left: 2px;
      width: 20px; height: 20px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 2px 4px rgba(15,23,42,.18);
      transition: transform .18s ease;
    }
    .cookie-switch.on{
      background: #16a34a;
      border-color: #15803d;
    }
    .cookie-switch.on::after{ transform: translateX(20px); }
    .cookie-switch.disabled{
      cursor: not-allowed;
      opacity: .65;
    }

    .cookie-note{
      margin-top: 14px;
      color: #94a3b8;
      font-size: .78rem;
      line-height: 1.5;
      text-align: center;
    }

    /* — Desktop layout: actions side-by-side — */
    @media (min-width: 641px){
      .cookie-actions{
        flex-direction: row;
        align-items: center;
      }
      .cookie-actions .btn{
        width: auto;
        flex: 1 1 0;
      }
      .cookie-actions .btn.ghost{
        flex: 0 0 auto;
      }
      .cookie-settings-fab{
        bottom: calc(max(20px, env(safe-area-inset-bottom)) + 88px);
      }
    }