/*
  ASIGNA PROXIMA — Cloudy UI (AR/FR) — Rebuild
  - Mobile-first, soft cloudy gradients, pastel accents (matching provided screenshots)
  - Works with existing HTML structure from fix_invalid_json build
*/

:root{
  --ink:#0b1a38;
  --ink2:#1b2b4b;
  --muted:#466081;
  --muted2:#64748b;
  --bg:#f3f9ff;
  --card:rgba(255,255,255,.78);
  --card2:rgba(255,255,255,.64);
  --stroke:rgba(15,23,42,.14);
  --stroke2:rgba(15,23,42,.10);
  --shadow:0 12px 40px rgba(2,8,23,.12);
  --shadow2:0 8px 22px rgba(2,8,23,.10);
  --radius:22px;
  --radius2:16px;

  /* accent palette (pastel) */
  --blue:#60a5fa;
  --sky:#22d3ee;
  --indigo:#6366f1;
  --purple:#a855f7;
  --green:#22c55e;
  --amber:#f59e0b;
  --orange:#fb923c;
  --skyBlue:#7dd3fc;
  --rose:#f43f5e;

  
  /* Theme A — Cloud Blue (brand) */
  --brandA1:#3b82f6;   /* primary blue */
  --brandA2:#38bdf8;   /* sky */
  --brandA3:#22d3ee;   /* cyan */
  --success:#22c55e;   /* success green */
/* default accent pair (used by homepage gradients) */
  --accent: var(--skyBlue);
  --accent2: var(--blue);

  --grad:linear-gradient(135deg, rgba(56,189,248,.46), rgba(59,130,246,.30), rgba(6,182,212,.22), rgba(255,255,255,.94));
  --grad2:linear-gradient(135deg, rgba(56,189,248,.34), rgba(99,102,241,.22), rgba(6,182,212,.22));

  /* Header warm-sky palette (blue + hint red/purple + hint yellow/gold) */
  --hdr-1:#F0F7FC;     /* very light icy blue */
  --hdr-2:#BCD3F0;     /* soft periwinkle */
  --hdr-3:#A2CAE7;     /* sky pastel */
  --hdr-4:#E2E4E7;     /* light neutral */

  /* Header text (for light/bright headers) */
  /* Solar (sunny orange-red) text that contrasts well with light blue headers */
  --hdr-text-strong:#0B2A6F; /* main text (brand + pills) */ /* main text (brand + pills) */
  --hdr-text:#0E3A8A;        /* secondary text */        /* secondary text */
  --hdr-text-muted:#295AA8;  /* muted text */  /* muted text */

  /* Header accents */
  --hdr-accent:#4D90FF;
  --hdr-accent-warm:#4D90FF;

}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-size:16px;
  font-family: "Cairo","Tajawal",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 8% 6%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 600px at 92% 10%, rgba(34,197,94,.16), transparent 62%),
    radial-gradient(900px 600px at 70% 80%, rgba(245,158,11,.14), transparent 64%),
    radial-gradient(900px 700px at 20% 80%, rgba(244,63,94,.10), transparent 62%),
    linear-gradient(180deg, #f7fbff, var(--bg));
}

body.rtl{direction:rtl}
body.ltr{direction:ltr}

/* ---------- RTL polish ---------- */
html[dir="rtl"] body{direction:rtl}
html[dir="rtl"] .card{ text-align:right; }
html[dir="rtl"] .input, html[dir="rtl"] .select, html[dir="rtl"] textarea{ text-align:right; }
html[dir="rtl"] .table th, html[dir="rtl"] .table td{ text-align:start; }
html[dir="rtl"] .table td:nth-child(1)::before, html[dir="rtl"] .table td:nth-child(2)::before{ text-align:right; }
@media (max-width: 520px){
  html[dir="rtl"] .table td:nth-child(3){ justify-content:flex-start; }
}
@media (max-width: 720px){
  html[dir="rtl"] .topbar .container.nav{justify-content:flex-end !important;}
  html[dir="rtl"] .topbar .brandText{align-items:flex-end; text-align:right;}
}

/* Make mixed RTL/LTR text render correctly */
[dir="rtl"] .ltr-span, .ltr-span{direction:ltr; unicode-bidi:embed}
[dir="ltr"] .rtl-span, .rtl-span{direction:rtl; unicode-bidi:embed}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.container{max-width:1100px; margin:0 auto; padding:18px 14px}

/* ---------- contact page tuning ---------- */
body.page-contact .container{max-width:1000px}
body.page-contact .card{max-width:1000px; margin-left:auto; margin-right:auto}
body.page-contact #identityCard{max-width:920px}
body.page-contact .card + .card{margin-top:12px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:
    radial-gradient(900px 260px at 52% 18%, rgba(250,204,21,.10), transparent 60%),
    radial-gradient(900px 260px at 18% 30%, rgba(56,189,248,.16), transparent 62%),
    radial-gradient(820px 260px at 78% 26%, rgba(59,130,246,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,252,235,.88), rgba(255,252,235,.62));
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(15,23,42,.10);
}
.topbar::after{
  content:"";
  display:block;
  height:2px;
  background:linear-gradient(90deg,
    rgba(56,189,248,.70),
    rgba(34,211,238,.55),
    rgba(59,130,246,.62),
    rgba(56,189,248,.58)
  );
}

.nav{display:flex; align-items:center; justify-content:space-between; gap:12px}

/* Keep header layout stable: brand always on the LEFT, actions always on the RIGHT
   (even when the page language is RTL). Only the text language should change. */
.topbar .container.nav{direction:ltr;}

/* Keep the Actions visual order stable (Menu • Cart • Language) */
.topActions .mnav-topbtn{order:1;}
.topActions a.topPill{order:2;}
.topActions #langSwitch{order:3;}

/* ---------- header quick menu (under topbar) ---------- */
.hqm-wrap{
  background:
    radial-gradient(700px 180px at 20% 30%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(640px 170px at 80% 35%, rgba(56,189,248,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.44));
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.hqm{
  display:flex;
  gap:8px;
  padding:10px 0 12px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  /* RTL + horizontal scrolling is inconsistent across browsers.
     Force stable scrolling and keep the visual order correct via flex-direction rules below. */
  direction:ltr;
  flex-wrap:nowrap;
  scroll-snap-type:x proximity;
  touch-action: pan-x;
  scrollbar-width:none;
}
.hqm::-webkit-scrollbar{display:none}

/* Keep visual order for RTL while preserving stable (LTR) scrolling */
.hqm-wrap[dir="rtl"] .hqm{flex-direction:row-reverse}
.hqm-wrap[dir="ltr"] .hqm{flex-direction:row}

.hqm-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 18px rgba(2,8,23,.08);
  text-decoration:none;
  color:var(--text);
  font-weight:1000;
  white-space:nowrap;
  flex:0 0 auto;
  scroll-snap-align:start;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hqm-item:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 24px rgba(2,8,23,.12);
}
.hqm-item.active{
  border-color:rgba(56,189,248,.55);
  box-shadow:0 14px 28px rgba(56,189,248,.18);
}

.hqm-ico{
  width:34px; height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#0f172a;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.10), 0 10px 16px rgba(2,8,23,.10);
}
.hqm-ico svg{width:18px; height:18px}

.hqm-ico-home{
  background: radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
              linear-gradient(135deg, rgba(248,113,113,.95), rgba(251,146,60,.95));
}
.hqm-ico-catalog{
  background: radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
              linear-gradient(135deg, rgba(245,158,11,.95), rgba(250,204,21,.95));
}
.hqm-ico-pages{
  background: radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
              linear-gradient(135deg, rgba(34,211,238,.95), rgba(56,189,248,.95));
}
.hqm-ico-admin{
  background: radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
              linear-gradient(135deg, rgba(139,92,246,.95), rgba(99,102,241,.95));
}

@media (max-width: 520px){
  .hqm-item{padding:9px 12px}
  .hqm-ico{width:32px;height:32px}
}

/* Ultra-small screens: allow wrapping instead of looking "broken" */
@media (max-width: 360px){
  .hqm{flex-wrap:wrap; overflow-x:visible; justify-content:center}
}
/* ---------- /header quick menu ---------- */


.brand{display:flex; align-items:center; gap:10px; min-width:200px}
.brand img{
  width:clamp(30px, 3.0vw, 40px);
  height:clamp(30px, 3.0vw, 40px);
  border-radius:16px;
  background: radial-gradient(120% 120% at 20% 18%, rgba(255,255,255,.92), rgba(255,255,255,.35) 38%, rgba(255,255,255,.14) 65%, rgba(255,255,255,.10));
  border:1px solid rgba(15,23,42,.12);
  box-shadow:
    0 14px 38px rgba(2,8,23,.16),
    0 0 0 1px rgba(255,255,255,.55) inset,
    0 0 26px rgba(34,211,238,.22),
    0 0 18px rgba(34,197,94,.14);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.brand:hover img{
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.06) saturate(1.08);
  box-shadow:
    0 16px 44px rgba(2,8,23,.18),
    0 0 0 1px rgba(255,255,255,.62) inset,
    0 0 34px rgba(34,211,238,.26),
    0 0 22px rgba(34,197,94,.18);
}
.brand .title{
  font-weight:1000;
  letter-spacing:.35px;
  font-size:clamp(13.5px, 1.7vw, 18px);
  line-height:1.15;
  color:#0b1220;
}
@supports (-webkit-background-clip:text){
  .brand .title{
    background:linear-gradient(135deg, rgba(2,8,23,.95), rgba(2,8,23,.65));
    -webkit-background-clip:text;
    color:transparent;
    text-shadow: 0 10px 24px rgba(2,8,23,.12);
  }
}
.brand .sub{color:rgba(15,23,42,.70); font-size:clamp(10.5px, 1.05vw, 12.5px); margin-top:4px}

/* --- Brand text alignment: keep brand at left, but render Arabic subline in proper RTL direction --- */
.brandText{display:flex; flex-direction:column; justify-content:center;}
.brandSubline{width:100%;}

body.ltr .brandSubline{direction:ltr; unicode-bidi:isolate; text-align:left;}
body.rtl .brandSubline{direction:rtl; unicode-bidi:plaintext; text-align:right;}
/* --- Brand professional subline + micro services tags (bilingual) --- */
.brandText{min-width:0}
.brandSubline{
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  direction:inherit; /* follow the page language direction */
  color:rgba(15,23,42,.72);
  font-size:11px;
}
.brandSubline .sub-fr{font-weight:650}
.brandSubline .sub-ar{font-weight:800}
.brandSubline .sep{opacity:.55}
.brandTags{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.brandTag{
  font-size:10.5px;
  padding:5px 9px;
  border-radius:999px;
  background: rgba(0,0,0,.045);
  border: 1px solid rgba(0,0,0,.06);
  color: rgba(18,24,38,.86);
  backdrop-filter: blur(6px);
}

/* Keep topbar compact in menu mode + small screens */
:is(body.mnav-enabled, html.mnav-enabled) .brandTags{display:none !important}
@media (max-width: 820px){
  .brandTags{display:none}
}

/* User preference: hide the tagline/subline under the brand in both AR & FR */
.brandSubline{display:none !important; margin-top:0 !important;}


.links{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end}

/* Injected by JS (desktop + mobile) */
.mnav-topbtn{display:none}

/* --- Menu mode: replace crowded top links with a topbar Menu button + grid-cards sheet --- */
body.mnav-open{overflow:hidden}

  /* Brand on start, Menu on end (LTR: brand left/menu right — RTL: brand right/menu left) */
  .topbar .container.nav{justify-content:space-between}

  /* Prevent the brand from forcing overflow on small screens */
  .brand{min-width:0}

  /* hide links row (we use the menu overlay instead) */
  :is(body.mnav-enabled, html.mnav-enabled) .topbar .links{display:none !important}


  /* Topbar Menu button (premium solar) */
  :is(body.mnav-enabled, html.mnav-enabled) .mnav-topbtn{
    display:flex;
    position:relative;
    align-items:center;
    gap:8px;
    cursor:pointer;
    user-select:none;
    overflow:hidden;

    height:clamp(32px, 3.2vw, 38px);
    padding:0 clamp(8px, 1.2vw, 12px);
    border-radius:999px;

    min-width:clamp(120px, 14vw, 170px);

    border:1px solid rgba(255,255,255,.62);
    background:
      radial-gradient(160px 100px at 16% 20%, rgba(255,255,255,.88), rgba(255,255,255,0) 62%),
      radial-gradient(260px 160px at 82% 22%, rgba(255,255,255,.34), rgba(255,255,255,0) 66%),
      radial-gradient(220px 160px at 88% 78%, rgba(80,170,255,.22), rgba(80,170,255,0) 62%),
      linear-gradient(135deg,
        rgba(255,236,160,.98) 0%,
        rgba(255,210,120,.98) 24%,
        rgba(255,168,108,.92) 40%,
        rgba(255,120,110,.16) 48%,
        rgba(120,220,255,.72) 72%,
        rgba(70,150,255,.84) 100%
      );

    backdrop-filter: blur(12px);
    box-shadow:
      0 20px 58px rgba(255,185,70,.18),
      0 16px 50px rgba(70,150,255,.14),
      0 10px 26px rgba(2,6,23,.14),
      0 0 0 1px rgba(255,255,255,.22) inset;

    filter: saturate(1.08) contrast(1.02);
    transition: transform .18s ease, box-shadow .22s ease, filter .22s ease;
  }

  /* Static glossy layer (always) */
  :is(body.mnav-enabled, html.mnav-enabled) .mnav-topbtn::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,
      rgba(255,255,255,.62) 0%,
      rgba(255,255,255,.18) 38%,
      rgba(255,255,255,0) 68%
    );
    opacity:.42;
    pointer-events:none;
    mix-blend-mode:soft-light;
  }

  /* Glossy shine (only on hover) */
  :is(body.mnav-enabled, html.mnav-enabled) .mnav-topbtn::before{
    content:"";
    position:absolute;
    top:-70%;
    left:-80%;
    width:160%;
    height:200%;
    background:linear-gradient(120deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.58) 42%,
      rgba(255,255,255,0) 62%
    );
    transform:rotate(12deg) translateX(-22%);
    opacity:.55;
    pointer-events:none;
    transition: transform .45s ease, opacity .45s ease;
  }
    :is(body.mnav-enabled, html.mnav-enabled) .mnav-topbtn:hover{
    transform: translateY(-1px);
    filter: saturate(1.08) brightness(1.02);
    box-shadow:
      0 18px 44px rgba(2,6,23,.14),
      0 0 0 1px rgba(255,255,255,.22) inset;
  }

:is(body.mnav-enabled, html.mnav-enabled) .mnav-topbtn:hover::before{
    /* no sweeping shine */
    transform:rotate(12deg) translateX(-22%);
    opacity:0;
  }

  :is(body.mnav-enabled, html.mnav-enabled) .mnav-topbtn-ico{
    width:clamp(20px, 2.2vw, 24px);
    height:clamp(20px, 2.2vw, 24px);
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    /* Hide the legacy ☰ character in HTML (we draw the icon with ::before/::after) */
    font-size:0;
    color:transparent;

    /* Sky-blue icon tile */
    background:
      radial-gradient(circle at 28% 28%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 56%),
      linear-gradient(135deg,
        rgba(56,189,248,.38),
        rgba(255,255,255,.60)
      );
    box-shadow:
      0 14px 30px rgba(56,189,248,.22),
      0 0 0 1px rgba(255,255,255,.22) inset;
    position:relative;
    flex:0 0 auto;
  }
  :is(body.mnav-enabled, html.mnav-enabled) .mnav-topbtn-ico::before{
    content:"";
    position:absolute;
    left:5px; right:5px; top:7px;
    border-top:2px solid rgba(56,189,248,.95);
    opacity:.98;
  }
  :is(body.mnav-enabled, html.mnav-enabled) .mnav-topbtn-ico::after{
    content:"";
    position:absolute;
    left:5px; right:5px; bottom:7px;
    border-top:2px solid rgba(56,189,248,.95);
    box-shadow: 0 -7px 0 rgba(56,189,248,.95);
    opacity:.98;
  }

  :is(body.mnav-enabled, html.mnav-enabled) .mnav-topbtn-text{
    font-weight:1000;
    letter-spacing:.1px;
    font-size:clamp(14px, 1.6vw, 16px);
    color:var(--hdr-text-strong);
    white-space:nowrap;
  }
  /* Overlay + Sheet */
  .mnav-overlay{
    position:fixed;
    inset:0;
    /* Must stay ABOVE the bottom QuickDock */
    z-index:300;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
    background:rgba(2,6,23,.55);
    backdrop-filter: blur(6px);
  }
  .mnav-overlay.open{opacity:1; pointer-events:auto}

  .mnav-sheet{
    position:absolute;
    left:50%;
    bottom:14px;
    transform:translateX(-50%) translateY(14px);
    width:calc(100% - 22px);
    max-width:calc(100vw - 16px);
    /* Ensure the sheet never exceeds the viewport height (small phones) */
    max-height:calc(100svh - 26px);
    max-height:calc(100dvh - 26px);
    border-radius:26px;
    padding:14px;
    background:linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.56));
    border:1px solid rgba(255,255,255,.40);
    box-shadow: 0 26px 65px rgba(2,6,23,.35);
    transition:transform .18s ease;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }

  /* If QuickDock is enabled, keep the navigation sheet ABOVE it (no overlap). */
  body.has-quickdock .mnav-sheet{
    bottom:calc(14px + 92px + env(safe-area-inset-bottom));
    /* When quickdock exists, reduce available height accordingly */
    max-height:calc(100svh - (26px + 92px + env(safe-area-inset-bottom)));
    max-height:calc(100dvh - (26px + 92px + env(safe-area-inset-bottom)));
  }
  .mnav-overlay.open .mnav-sheet{transform:translateX(-50%) translateY(0)}

  .mnav-sheet::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(900px 380px at 0% 0%, rgba(59,130,246,.16), transparent 55%),
      radial-gradient(780px 320px at 100% 0%, rgba(6,182,212,.14), transparent 58%),
      radial-gradient(760px 320px at 20% 100%, rgba(244,63,94,.12), transparent 60%),
      radial-gradient(720px 320px at 100% 100%, rgba(99,102,241,.14), transparent 62%);
    pointer-events:none;
  }
  .mnav-sheet::after{
    /* no shine / no glossy sweep */
    content:"";
    position:absolute;
    inset:0;
    background:none;
    opacity:0;
    pointer-events:none;
  }

  .mnav-head{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:2px 2px 10px;
  }
  .mnav-title{
    font-weight:800;
    letter-spacing:.2px;
    font-size:14px;
    color:#0f172a;
    opacity:.92;
  }
  .mnav-close{
    width:40px;height:40px;border-radius:14px;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(255,255,255,.60);
    display:flex;align-items:center;justify-content:center;
    box-shadow: 0 10px 26px rgba(2,6,23,.10);
    cursor:pointer;
    position:relative;
    overflow:hidden;
  }
  .mnav-close::before{
    content:"";
    width:16px;height:16px;
    border-right:2px solid rgba(15,23,42,.65);
    border-bottom:2px solid rgba(15,23,42,.65);
    transform: rotate(135deg);
    display:block;
  }

  .mnav-grid{
    position:relative;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    /* If content is taller than the sheet, allow scrolling inside the grid */
    flex:1 1 auto;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom:6px;
  }

  /* Grid Cards (clear navigation look) */
  .mnav-card{
    position:relative;
    border-radius:20px;
    padding: 10px 8px;
    min-height: 76px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 8px;
    text-decoration:none;
    cursor:pointer;
    border:1px solid rgba(15,23,42,.10);
    background:linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.56));
    box-shadow:
      0 22px 55px rgba(2,6,23,.14),
      0 0 0 1px rgba(255,255,255,.16) inset;
    overflow:hidden;
  }
  .mnav-card:active{transform: translateY(1px)}
  .mnav-card::before{
    /* static soft tint (no animated shimmer) */
    content:"";
    position:absolute;
    inset:-2px;
    background:linear-gradient(90deg, rgba(59,130,246,.40), rgba(6,182,212,.38), rgba(99,102,241,.38));
    opacity:.10;
    pointer-events:none;
  }
  .mnav-card::after{
    /* no moving shine */
    content:"";
    position:absolute;
    inset:0;
    background:none;
    opacity:0;
    pointer-events:none;
  }
  .mnav-card-title{
    position:relative;
    font-weight:900;
    font-size: 15px;
    color:#0b1220;
    opacity:.92;
    text-align:center;
    line-height: 1.15;
    word-break:break-word;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .mnav-card-lang{grid-column: 1 / -1}

  .mnav-ico{
    position:relative;
    width: 34px;
    height: 34px;
    border-radius: 14px;
    background:linear-gradient(90deg, rgba(59,130,246,.16), rgba(6,182,212,.14), rgba(99,102,241,.14));
    border:1px solid rgba(15,23,42,.08);
    box-shadow: 0 16px 40px rgba(2,6,23,.10);
    background-repeat:no-repeat;
    background-position:center;
    background-size: 18px 18px;
    z-index:1;
  }

  /* Simple inline SVG icons (non-animated) */
  .mnav-ico-home{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E");}
  .mnav-ico-grid{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2'%3E%3Crect x='4' y='4' width='7' height='7' rx='1'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1'/%3E%3C/svg%3E");}
  .mnav-ico-cart{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6h15l-2 9H7L6 6Z'/%3E%3Cpath d='M6 6 5 3H2'/%3E%3Ccircle cx='9' cy='19' r='1.6'/%3E%3Ccircle cx='18' cy='19' r='1.6'/%3E%3C/svg%3E");}
  .mnav-ico-user{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3C/svg%3E");}
  .mnav-ico-chat{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/svg%3E");}
  .mnav-ico-gear{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z'/%3E%3Cpath d='M19.4 15a7.8 7.8 0 0 0 .1-1l2-1.2-2-3.5-2.3.6a7.9 7.9 0 0 0-1.7-1L15 5h-6l-.5 2.9a7.9 7.9 0 0 0-1.7 1L4.5 8.3l-2 3.5 2 1.2a7.8 7.8 0 0 0 .1 1L2.5 16.2l2 3.5 2.3-.6a7.9 7.9 0 0 0 1.7 1L9 22h6l.5-2.9a7.9 7.9 0 0 0 1.7-1l2.3.6 2-3.5z'/%3E%3C/svg%3E"); background-size:22px 22px;}
  .mnav-ico-track{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10H7z'/%3E%3Cpath d='M7 12h10'/%3E%3Cpath d='M12 7v10'/%3E%3C/svg%3E");}

  /* =============================
     Product Action Sheet (mobile)
     - modern tiles like the mobile menu
     ============================= */
  .ps-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:none;
    align-items:flex-end;
    justify-content:center;
    padding:12px;
    z-index:9997;
  }
  .ps-overlay.open{display:flex}
  .ps-sheet{
    position:relative;
    width:min(720px, 100%);
    max-height:calc(100svh - 26px);
    max-height:calc(100dvh - 26px);
    border-radius:26px;
    padding:14px;
    background:linear-gradient(135deg, rgba(255,255,255,.80), rgba(255,255,255,.58));
    border:1px solid rgba(255,255,255,.40);
    box-shadow: 0 26px 65px rgba(2,6,23,.35);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  body.has-quickdock .ps-sheet{
    margin-bottom:calc(92px + env(safe-area-inset-bottom));
    max-height:calc(100svh - (26px + 92px + env(safe-area-inset-bottom)));
    max-height:calc(100dvh - (26px + 92px + env(safe-area-inset-bottom)));
  }
  .ps-sheet::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(900px 380px at 0% 0%, rgba(59,130,246,.16), transparent 55%),
      radial-gradient(780px 320px at 100% 0%, rgba(6,182,212,.14), transparent 58%),
      radial-gradient(760px 320px at 20% 100%, rgba(244,63,94,.12), transparent 60%),
      radial-gradient(720px 320px at 100% 100%, rgba(99,102,241,.14), transparent 62%);
    pointer-events:none;
  }
  .ps-head{
    position:relative;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    padding:2px 2px 10px;
  }
  .ps-mini{display:flex; gap:10px; align-items:center; min-width:0}
  .ps-thumb{
    width:56px; height:56px;
    border-radius:18px;
    overflow:hidden;
    background:rgba(255,255,255,.60);
    border:1px solid rgba(15,23,42,.08);
    box-shadow: 0 16px 40px rgba(2,6,23,.10);
    flex:0 0 auto;
  }
  .ps-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .ps-info{min-width:0}
  .ps-title{
    font-weight:900;
    font-size:15px;
    color:#0b1220;
    opacity:.92;
    line-height:1.2;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    word-break:break-word;
  }
  .ps-sub{margin-top:4px; font-size:12px; color:rgba(15,23,42,.72)}
  .ps-close{
    width:40px;height:40px;border-radius:14px;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(255,255,255,.60);
    display:flex;align-items:center;justify-content:center;
    box-shadow: 0 10px 26px rgba(2,6,23,.10);
    cursor:pointer;
    position:relative;
    overflow:hidden;
    flex:0 0 auto;
  }
  .ps-close::before{
    content:"";
    width:16px;height:16px;
    border-right:2px solid rgba(15,23,42,.65);
    border-bottom:2px solid rgba(15,23,42,.65);
    transform: rotate(135deg);
    display:block;
  }

  .ps-grid{
    position:relative;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom:6px;
  }
  .ps-card{
    position:relative;
    border-radius:20px;
    padding: 10px 8px;
    min-height: 76px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 8px;
    text-decoration:none;
    cursor:pointer;
    border:1px solid rgba(15,23,42,.10);
    background:linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.56));
    box-shadow:
      0 22px 55px rgba(2,6,23,.14),
      0 0 0 1px rgba(255,255,255,.16) inset;
    overflow:hidden;
  }
  .ps-card:active{transform: translateY(1px)}
  .ps-card::before{
    content:"";
    position:absolute;
    inset:-2px;
    background:linear-gradient(90deg, rgba(59,130,246,.40), rgba(6,182,212,.38), rgba(99,102,241,.38));
    opacity:.10;
    pointer-events:none;
  }
  .ps-ico{
    position:relative;
    width: 34px;
    height: 34px;
    border-radius: 14px;
    background:linear-gradient(90deg, rgba(59,130,246,.16), rgba(6,182,212,.14), rgba(99,102,241,.14));
    border:1px solid rgba(15,23,42,.08);
    box-shadow: 0 16px 40px rgba(2,6,23,.10);
    background-repeat:no-repeat;
    background-position:center;
    background-size: 18px 18px;
    z-index:1;
  }
  .ps-txt{
    position:relative;
    font-weight:900;
    font-size: 15px;
    color:#0b1220;
    opacity:.92;
    text-align:center;
    line-height: 1.15;
    word-break:break-word;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .ps-card-wide{grid-column: 1 / -1}

  /* inline SVG icons (no faces / non-animated) */
  .ps-ico-info{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 10v7'/%3E%3Cpath d='M12 7h.01'/%3E%3C/svg%3E");}
  .ps-ico-add{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");}
  .ps-ico-cart{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6h15l-2 9H7L6 6Z'/%3E%3Cpath d='M6 6 5 3H2'/%3E%3Ccircle cx='9' cy='19' r='1.6'/%3E%3Ccircle cx='18' cy='19' r='1.6'/%3E%3C/svg%3E");}
  .ps-ico-link{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 1 0-7l1-1a5 5 0 0 1 7 7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 1 0 7l-1 1a5 5 0 0 1-7-7l1-1'/%3E%3C/svg%3E");}
  .ps-ico-heart{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 8.3c0-2.1-1.7-3.8-3.8-3.8-1.3 0-2.5.7-3.2 1.7-.7-1-1.9-1.7-3.2-1.7-2.1 0-3.8 1.7-3.8 3.8 0 6.3 7 10.7 7 10.7s7-4.4 7-10.7z'/%3E%3C/svg%3E");}
  .ps-ico-open{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M21 14v7h-7'/%3E%3Cpath d='M3 10v11h11'/%3E%3C/svg%3E");}

  .ps-details{
    position:relative;
    margin-top:10px;
    padding:12px;
    border-radius:20px;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(255,255,255,.70);
    box-shadow: 0 18px 44px rgba(2,8,23,.08);
    overflow:auto;
    max-height: 38vh;
  }
  .ps-details .ps-desc{margin:0; white-space:pre-wrap; opacity:.90; color:#0b1220; font-size:14px; line-height:1.45}
  .ps-details .ps-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
  .ps-details .btn{white-space:nowrap}

  @media (max-width: 380px){
    .ps-grid{grid-template-columns:1fr}
  }
  .mnav-ico-lang{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h6'/%3E%3Cpath d='M7 19V5h6'/%3E%3Cpath d='M14 15h6'/%3E%3Cpath d='M17 15V5'/%3E%3C/svg%3E");}
  .mnav-ico-dot{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%230f172a'/%3E%3C/svg%3E"); background-size:10px 10px;}

  /* Rain layer inside sheet (extra 'khair' drops) */
  .mnav-rain{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.18;
    mix-blend-mode: screen;
    background-image:
      repeating-linear-gradient(115deg,
        rgba(59,130,246,.0) 0px,
        rgba(59,130,246,.0) 18px,
        rgba(59,130,246,.22) 19px,
        rgba(59,130,246,.0) 22px);
    background-size: 220px 220px;
    animation:mnavRain 1.1s linear infinite;
  }

  /* Keyframes */
  @keyframes mnavGrad{
    0%{background-position: 0% 50%}
    50%{background-position: 100% 50%}
    100%{background-position: 0% 50%}
  }
  @keyframes mnavPulse{
    0%,100%{transform:scale(1); filter:saturate(1.10) brightness(1.02)}
    50%{transform:scale(1.06); filter:saturate(1.20) brightness(1.06)}
  }
  @keyframes mnavHalo{
    0%,100%{opacity:.55}
    50%{opacity:.95}
  }
  @keyframes mnavShine{
    0%,100%{transform: rotate(18deg) translateX(-48%)}
    50%{transform: rotate(18deg) translateX(48%)}
  }
  @keyframes mnavBtnShine{
    0%,100%{transform: translateX(-65%)}
    50%{transform: translateX(65%)}
  }
  @keyframes mnavBtnPulse{
    0%,100%{box-shadow: 0 18px 45px rgba(2,6,23,.14), 0 0 18px rgba(56,189,248,.12), 0 0 26px rgba(6,182,212,.10)}
    50%{box-shadow: 0 22px 55px rgba(2,6,23,.16), 0 0 22px rgba(59,130,246,.18), 0 0 34px rgba(99,102,241,.14)}
  }
  @keyframes mnavRain{
    0%{background-position: 0px -220px}
    100%{background-position: -180px 220px}
  }

/* Desktop: a bit wider + 3 columns */
@media (min-width: 900px){
  .mnav-sheet{max-width:720px; bottom:22px}
  body.has-quickdock .mnav-sheet{ bottom:calc(22px + 92px + env(safe-area-inset-bottom)); }
  .mnav-grid{grid-template-columns: repeat(3, 1fr)}
  .mnav-card-lang{grid-column: 1 / -1}
}

.link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 22px rgba(2,8,23,.08);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  font-weight:800;
  font-size:13px;
}
.link:hover{transform:translateY(-1px); box-shadow: 0 16px 30px rgba(2,8,23,.10); background:rgba(255,255,255,.82)}
.link.active{
  border-color:rgba(59,130,246,.35);
  background:linear-gradient(135deg, rgba(59,130,246,.16), rgba(255,255,255,.78));
}

/* ---------- buttons ---------- */
.btn{
  border:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  color:#0b1530;
  background:
    radial-gradient(120px 80px at 22% 20%, rgba(255,255,255,.80), rgba(255,255,255,0) 58%),
    linear-gradient(135deg, rgba(56,189,248,.30), rgba(59,130,246,.22), rgba(34,211,238,.18), rgba(255,255,255,.90));
  border:1px solid rgba(56,189,248,.18);
  box-shadow: 0 12px 26px rgba(2,8,23,.10);
  font-weight:900;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow: 0 18px 34px rgba(2,8,23,.12), 0 0 0 6px rgba(56,189,248,.12);
  filter:saturate(1.06);
}

.btn.ghost{
  background:rgba(255,255,255,.66);
  border:1px solid rgba(15,23,42,.12);
}

.btn.danger{background:linear-gradient(135deg, rgba(244,63,94,.18), rgba(255,255,255,.86)); border-color:rgba(244,63,94,.25)}

/* ---------- layout blocks ---------- */
.hero{display:grid; gap:12px; grid-template-columns: 1.1fr .9fr}
@media (max-width: 900px){ .hero{grid-template-columns:1fr} }

/* ---------- page: login (dimensions + no effects) ---------- */
/* Wider card zone to avoid large empty sides on desktop */
body.page-login .hero{grid-template-columns:1fr; max-width:980px; width:100%; margin-inline:auto}
@media (max-width: 520px){ body.page-login .hero{max-width:100%;} }
body.page-login .card{padding:18px}
body.page-login .card::before{display:none}

/* Disable hover "glow/zoom" on demand */
body.nofx .btn:hover{transform:none; box-shadow:var(--shadow1); filter:none}

.grid{display:grid; gap:12px; grid-template-columns:repeat(4,1fr)}
@media (max-width: 980px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 520px){ .grid{grid-template-columns:1fr} }

.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row > *{flex:0 0 auto}

/* ---------- cards ---------- */
.card{
  position:relative;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow2);
  padding:16px;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  left:10px; right:10px; top:0;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,
    rgba(56,189,248,.70),
    rgba(34,211,238,.55),
    rgba(59,130,246,.62),
    rgba(56,189,248,.58)
  );
  opacity:.95;
}

.h1{margin:0 0 8px; font-size:clamp(22px, 2.2vw, 30px); letter-spacing:.2px}
.p{margin:6px 0 0; color:var(--muted); line-height:1.6}
.small{color:var(--muted); font-size:13px; line-height:1.5}

.hr{height:1px; background:rgba(15,23,42,.10); margin:12px 0}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:7px 12px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.12);
  font-size:12px;
  color:var(--ink2);
}

/* ---------- forms ---------- */
.form{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.form .full{grid-column:1 / -1}
@media (max-width: 720px){ .form{grid-template-columns:1fr} }

.input, .select, textarea{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(15,23,42,.12);
  outline:none;
  font-weight:700;
  color:var(--ink2);
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.input:focus, .select:focus, textarea:focus{border-color:rgba(59,130,246,.35); box-shadow: 0 0 0 4px rgba(59,130,246,.12); background:#fff}
textarea{resize:vertical}

/* ---------- product cards ---------- */
.product-card{display:flex; flex-direction:column; gap:10px}
.product-card img{
  border-radius:16px;
  height:150px;
  object-fit:cover;
  background:linear-gradient(135deg, rgba(56,189,248,.10), rgba(56,189,248,.10), rgba(255,255,255,.70));
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 28px rgba(2,8,23,.10);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.product-card:hover img{
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 18px 34px rgba(2,8,23,.12);
  filter: saturate(1.05) contrast(1.02);
}
.product-card .name{font-weight:900; font-size:15px}
.product-card .meta{display:flex; justify-content:space-between; align-items:center; gap:10px}

/* ---------- tables ---------- */
.table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:16px; border:1px solid rgba(15,23,42,.10)}
.table th, .table td{padding:10px 10px; text-align:start; border-bottom:1px solid rgba(15,23,42,.08); vertical-align:top}
.table thead th{background:rgba(255,255,255,.72); font-size:13px; color:var(--muted)}
.table tbody tr:last-child td{border-bottom:0}

/* --- Cart table: mobile -> cards --- */
@media (max-width: 520px){
  .table{border:0; background:transparent;}
  .table thead{display:none;}
  .table tbody, .table tr, .table td{display:block; width:100%;}
  .table tbody tr{
    margin:10px 0;
    padding:12px 12px;
    border-radius:18px;
    border:1px solid rgba(15,23,42,.10);
    background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
    box-shadow:0 10px 22px rgba(2,6,23,.10);
  }
  .table td{
    padding:6px 0;
    border:0 !important;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
  }
  .table td:nth-child(1)::before,
  .table td:nth-child(2)::before{
    font-size:12px;
    color:var(--muted);
    opacity:.95;
    flex:0 0 auto;
    margin-top:2px;
  }
  html[lang="fr"] .table td:nth-child(1)::before{content:"Produit";}
  html[lang="fr"] .table td:nth-child(2)::before{content:"Prix";}
  html[lang="ar"] .table td:nth-child(1)::before{content:"المنتج";}
  html[lang="ar"] .table td:nth-child(2)::before{content:"السعر";}

  .table td:nth-child(3){
    justify-content:flex-end;
    padding-top:10px;
  }
}

/* ---------- toasts ---------- */
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%) translateY(20px);
  opacity:0;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(15,23,42,.12);
  box-shadow: var(--shadow);
  z-index:999;
  transition: opacity .18s ease, transform .18s ease;
  font-weight:900;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:rgba(34,197,94,.25); background:linear-gradient(135deg, rgba(34,197,94,.16), rgba(255,255,255,.86))}
.toast.err{border-color:rgba(244,63,94,.25); background:linear-gradient(135deg, rgba(244,63,94,.14), rgba(255,255,255,.86))}

/* ---------- footer ---------- */
.footer{margin-top:22px; padding-bottom:28px}

/* If the bottom QuickDock is enabled, keep the footer fully visible ABOVE it */
body.has-quickdock .footer{
  margin-bottom:calc(92px + env(safe-area-inset-bottom));
}
/* --- Footer legal box: compact on mobile --- */
.legalDetails{border:1px solid rgba(15,23,42,.10); border-radius:16px; background:rgba(255,255,255,.66); backdrop-filter: blur(10px);}
.legalDetails > summary{
  cursor:pointer;
  list-style:none;
  padding:10px 12px;
  font-weight:900;
  color:rgba(15,23,42,.92);
}
.legalDetails > summary::-webkit-details-marker{display:none;}
.legalDetails[open] > summary{border-bottom:1px solid rgba(15,23,42,.08);}
.legalDetails .legalInner{padding:10px 12px; color:rgba(15,23,42,.86); line-height:1.45;}
@media (max-width:520px){
  #legalBox{font-size:13px;}
}

/* ---------- tabs (member panel) ---------- */
.tabs{display:flex; flex-wrap:wrap; gap:8px}
.tab{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.70);
  font-weight:900;
  cursor:pointer;
}
.tab.active{border-color:rgba(99,102,241,.30); background:linear-gradient(135deg, rgba(99,102,241,.16), rgba(255,255,255,.80))}

/* helpers */
.hidden{display:none !important}

/* ---------- homepage extras ---------- */
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin:16px 0 10px;
}
.section-head h2{margin:0; font-size:18px; letter-spacing:.2px}

.searchbar{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:center;
}
@media (max-width: 520px){ .searchbar{grid-template-columns:1fr} }

.cat-grid{display:grid; gap:12px; grid-template-columns:repeat(4,1fr)}
@media (max-width: 980px){ .cat-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 520px){ .cat-grid{grid-template-columns:1fr} }

.cat-card{padding:14px}
.cat-card .title{font-weight:1000; font-size:15px}
.cat-card .meta{display:flex; justify-content:space-between; gap:10px; margin-top:8px}
.cat-card .meta b{font-weight:1000}
.cat-card:hover{transform:translateY(-1px)}

.icon-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  background:linear-gradient(135deg, rgba(59,130,246,.9), rgba(6,182,212,.8), rgba(34,197,94,.7));
  box-shadow: 0 10px 18px rgba(2,8,23,.10);
}

.step-grid{display:grid; gap:12px; grid-template-columns:repeat(3,1fr)}
@media (max-width: 900px){ .step-grid{grid-template-columns:1fr} }
.step{padding:14px}
.step .num{font-weight:1000; font-size:12px; color:var(--muted)}
.step .t{margin:6px 0 0; font-weight:1000}

.hp-pill-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.hp-pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.70); border:1px solid rgba(15,23,42,.10); font-weight:900; font-size:12.5px}

.hero-home .h1{font-size:clamp(24px, 2.4vw, 34px)}
@media (max-width: 520px){ .hero-home .h1{font-size:26px} }



/* ---------- homepage hero (compact) ---------- */
.homeHeroWrap{margin-top:14px}
.homeHero{padding:16px}
.homeHeroTop{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap}
.homeHeroStatus{display:flex; align-items:center; justify-content:flex-end}
.homeTitle{margin:8px 0 6px}
.homeDesc{margin:0}
.homeTools{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:12px}
@media (max-width: 980px){ .homeTools{grid-template-columns:1fr} }
.homeTool{padding:14px}
.homeToolTitle{font-weight:1000; font-size:15px; letter-spacing:.2px}
.homeMiniSteps{display:grid; gap:8px; margin-top:10px}
.homeStep{display:flex; align-items:flex-start; gap:10px; font-weight:900; font-size:13px; color:var(--ink2)}
.homeStep b{font-weight:1000}

/* ---------- admin db editor ---------- */
.codearea{
  width:100%;
  min-height:420px;
  resize:vertical;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.78);
  box-shadow: 0 12px 26px rgba(2,8,23,.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px;
  line-height:1.55;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.70);
  font-weight:900;
  font-size:12px;
}

.pill.ok{border-color:rgba(34,197,94,.25); background:linear-gradient(135deg, rgba(34,197,94,.14), rgba(255,255,255,.82))}
.pill.err{border-color:rgba(244,63,94,.25); background:linear-gradient(135deg, rgba(244,63,94,.12), rgba(255,255,255,.82))}

/* ---------- admin db editor ---------- */
.codearea{
  width:100%;
  min-height:420px;
  resize:vertical;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.78);
  box-shadow: 0 12px 26px rgba(2,8,23,.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px;
  line-height:1.5;
}
.codehint{font-size:12px; color:var(--muted)}
.badge.warn{border-color:rgba(245,158,11,.28); background:linear-gradient(135deg, rgba(245,158,11,.14), rgba(255,255,255,.86))}
.badge.neutral{border-color:rgba(148,163,184,.28); background:linear-gradient(135deg, rgba(148,163,184,.14), rgba(255,255,255,.86))}

/* ---------- categories strip (catalog/home) ---------- */
.catbar{
  display:flex;
  gap:10px;
  overflow:auto;
  padding:10px calc(var(--edgeW,44px) + 10px);
  margin-top:10px;
  scroll-behavior:smooth;
}
.catbar::-webkit-scrollbar{height:8px}
.catbar::-webkit-scrollbar-thumb{background:rgba(2,8,23,.12);border-radius:999px}
.chip{
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 22px rgba(2,8,23,.06);
  padding:9px 14px;
  border-radius:999px;
  font-weight:900;
  font-size:14.5px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.chip:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.96);
  box-shadow:0 14px 26px rgba(2,8,23,.10);
}
.chip.active{
  border-color:rgba(59,130,246,.42);
  background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(34,197,94,.14));
  box-shadow:0 16px 30px rgba(2,8,23,.12), 0 0 0 1px rgba(255,255,255,.70) inset;
}
.section-title{margin:18px 0 10px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.section-title .small{margin:0}


/* ---------- Sky FX: Clouds + Rain + Thunder (no external deps) ---------- */
#skyfx{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}

/* Ensure content is above FX */
.topbar, .container, .footer{position:relative;z-index:1}

.skyfx-clouds{position:absolute;left:0;right:0;top:-30px;height:220px;opacity:.90;filter:blur(.2px)}
.skyfx-clouds.layer2{top:-10px;height:260px;opacity:.70}

.cloud{--sc:1;position:absolute;top:0;left:-260px;width:260px;height:74px;border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.55));
  box-shadow: 0 18px 60px rgba(2,8,23,.10), inset 0 1px 0 rgba(255,255,255,.65);
  border:1px solid rgba(15,23,42,.08);
}
.cloud::before,.cloud::after{content:"";position:absolute;background:inherit;border:inherit;border-radius:999px}
.cloud::before{width:110px;height:110px;left:34px;top:-52px}
.cloud::after{width:150px;height:150px;right:28px;top:-72px;opacity:.95}

/* Cloud drift animations */
@keyframes cloudDrift{from{transform:translateX(-30vw) scale(var(--sc))}to{transform:translateX(140vw) scale(var(--sc))}}

.cloud.c1{top:28px;--sc:.70;animation:cloudDrift 46s linear infinite}
.cloud.c2{top:92px;--sc:.95;animation:cloudDrift 64s linear infinite;animation-delay:-22s}
.cloud.c3{top:56px;--sc:.55;animation:cloudDrift 38s linear infinite;animation-delay:-12s}
.cloud.c4{top:120px;--sc:.75;animation:cloudDrift 52s linear infinite;animation-delay:-30s}

.skyfx-clouds.layer2 .cloud{opacity:.95}
.skyfx-clouds.layer2 .cloud.c1{top:18px;--sc:1.15;animation-duration:92s;animation-delay:-44s}
.skyfx-clouds.layer2 .cloud.c2{top:110px;--sc:.90;animation-duration:78s;animation-delay:-10s}
.skyfx-clouds.layer2 .cloud.c3{top:62px;--sc:1.35;animation-duration:110s;animation-delay:-70s}

/* Rain: heavy diagonal streaks (multi-layer) */
.skyfx-rain{
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(120deg, rgba(255,255,255,.32) 0, rgba(255,255,255,.32) 1px, transparent 1px, transparent 9px),
    repeating-linear-gradient(120deg, rgba(255,255,255,.16) 0, rgba(255,255,255,.16) 1px, transparent 1px, transparent 5px);
  background-size: 240px 240px, 140px 140px;
  opacity:.44;
  mix-blend-mode:soft-light;
  animation: rainMove .26s linear infinite;
  filter: blur(.10px);
  transform: translate3d(0,0,0);
}

/* Secondary rain layer for depth */
.skyfx-rain2{
  position:absolute;inset:0;
  background-image:repeating-linear-gradient(120deg, rgba(255,255,255,.24) 0, rgba(255,255,255,.24) 1px, transparent 1px, transparent 10px);
  background-size: 320px 320px;
  opacity:.28;
  mix-blend-mode:overlay;
  animation: rainMove2 .18s linear infinite;
  filter: blur(.05px);
  transform: translate3d(0,0,0);
}

@keyframes rainMove{from{background-position:0 -520px, 0 -360px}to{background-position:0 0, 0 0}}
@keyframes rainMove2{from{background-position:120px -760px}to{background-position:0 0}}

/* Thunder flash overlay */
.skyfx-lightning{position:absolute;inset:-10%;opacity:0;
  background:radial-gradient(ellipse at 30% 10%, rgba(255,255,255,.88), transparent 55%),
             radial-gradient(ellipse at 70% 20%, rgba(255,255,255,.70), transparent 60%);
  filter:blur(.6px)
}
body.fx-thunder .skyfx-lightning{animation: lightningFlash .9s ease-out 1}
@keyframes lightningFlash{
  0%{opacity:0}
  6%{opacity:.72}
  12%{opacity:.08}
  18%{opacity:.55}
  26%{opacity:.10}
  34%{opacity:.38}
  52%{opacity:.05}
  70%{opacity:0}
  100%{opacity:0}
}

/* Cloud-shaped buttons */
.btn, .link, .tab, .chip{position:relative}
.btn::before,.btn::after{content:"";position:absolute;pointer-events:none;
  background:linear-gradient(135deg, rgba(56,189,248,.12), rgba(34,197,94,.06), rgba(255,255,255,.60));
  border:1px solid rgba(15,23,42,.08);
  border-bottom:0;
  border-radius:999px;
  box-shadow: 0 10px 18px rgba(2,8,23,.06);
  opacity:.80;
}
.btn::before{width:18px;height:18px;top:-9px;left:18px}
.btn::after{width:24px;height:24px;top:-12px;right:22px;opacity:.70}

.link::before,.link::after{content:"";position:absolute;pointer-events:none;
  background:linear-gradient(135deg, rgba(56,189,248,.12), rgba(34,197,94,.06), rgba(255,255,255,.60));
  border:1px solid rgba(15,23,42,.08);
  border-bottom:0;border-radius:999px;
  opacity:.55
}
.link::before{width:14px;height:14px;top:-7px;left:14px}
.link::after{width:18px;height:18px;top:-9px;right:16px;opacity:.45}

@media (prefers-reduced-motion: reduce){
  .skyfx-clouds .cloud, .skyfx-rain, .skyfx-rain2{animation:none}
}

/* ---------- catalog AJAX pager + skeleton ---------- */
.pager{
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin:18px 0 6px;
}
.pagebtn{
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.78);
  box-shadow:0 10px 22px rgba(2,8,23,.06);
  padding:9px 12px;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
  min-width:44px;
}
.pagebtn.active{
  border-color:rgba(59,130,246,.40);
  background:linear-gradient(135deg, rgba(59,130,246,.20), rgba(236,253,245,.86));
}
.pagebtn:disabled{opacity:.55; cursor:not-allowed}
.pager .ellipsis{padding:0 6px; color:var(--muted); font-weight:900}

.skeleton{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.72);
}
.skeleton::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  animation:skel 1.15s infinite;
  transform:translateX(-40%);
}
@keyframes skel{0%{transform:translateX(-40%)}100%{transform:translateX(40%)}}
.skel-img{
  height:140px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(2,8,23,.06);
}
.skel-line{
  height:12px;
  border-radius:999px;
  background:rgba(2,8,23,.06);
  margin-top:10px;
}
.skel-line.w80{width:80%}
.skel-line.w70{width:70%}
.skel-line.w55{width:55%}
.skel-line.w40{width:40%}

/* Prevent rapid double-click navigation */
a.is-loading{opacity:.75;pointer-events:none}


/* ---- brand sizing (final override) ---- */
.brand .title{font-size:clamp(13.5px, 1.7vw, 18px);
  line-height:1.05}
.brand .sub{font-size:clamp(12px, 1.2vw, 13.5px)}
.brand img{object-fit:contain}

/* ---- link sizing ---- */
@media (min-width: 980px){.link{padding:10px 14px; font-size:13.5px} }


/* ---------- Galaxy S5 catalog fit ---------- */

/* Catalog layout helpers */
.page-catalog .catalog-hero{justify-content:space-between; align-items:flex-start}
.page-catalog .catalog-title{margin:0; font-size:24px}
.page-catalog .catalog-searchbox{flex:0 0 360px; max-width:420px}
.page-catalog .catalog-filters{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin-top:10px}
.page-catalog .catalog-filters .fcol{min-width:0}

/* Small phones (Galaxy S5 ~360px CSS width) */
@media (max-width: 380px){
  .container{padding:14px 10px}
  .card{padding:12px}
  .page-catalog .catalog-title{font-size:21px}
  .page-catalog .catalog-searchbox{flex:1 1 100%; max-width:none}
  .page-catalog .catalog-filters{grid-template-columns:1fr}
  .input, .select, textarea{padding:10px 10px; border-radius:13px; font-size:15px}
  .catbar{gap:8px}
  .chip{padding:8px 12px; font-size:14px}
  .product-card img{height:132px}
  .product-card .name{font-size:16px}
  .badge{font-size:13px; padding:7px 10px}
  .pagebtn{padding:8px 10px; border-radius:12px}
}

/* Very small height: reduce hero spacing a bit */
@media (max-width: 380px) and (max-height: 640px){
  .page-catalog .catalog-hero{gap:8px}
  .page-catalog .p{margin-top:4px}
}

/* Phones: keep product cards clean (actions go to the Product Sheet) */
@media (max-width: 560px){
  .page-catalog .p-card{cursor:pointer}
  /* keep only price + type (hide category + id pills) */
  .page-catalog .p-card .p-meta .p-pill:nth-child(n+3){display:none}
}

/* Catalog product card: sky / clouds / rain / rainbow look */
.page-catalog .p-card.card{
  border-radius:22px;
  background:
    radial-gradient(180px 120px at 14% 18%, rgba(56,189,248,.20), transparent 60%),
    radial-gradient(220px 160px at 92% 8%, rgba(168,85,247,.14), transparent 62%),
    radial-gradient(240px 170px at 108% 34%, rgba(250,204,21,.14), transparent 62%),
    radial-gradient(260px 190px at 78% 84%, rgba(34,211,238,.12), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(240,249,255,.78));
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 18px 40px rgba(2,8,23,.10);
}

.page-catalog .p-card.card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.24) 0px,
      rgba(255,255,255,.24) 1px,
      transparent 1px,
      transparent 12px
    );
  mix-blend-mode:overlay;
}

.page-catalog .p-card .p-img{
  position:relative;
  background:
    radial-gradient(90px 70px at 30% 28%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(120px 90px at 70% 18%, rgba(56,189,248,.18), transparent 62%),
    linear-gradient(135deg, rgba(56,189,248,.16), rgba(255,255,255,.62));
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 14px 26px rgba(2,8,23,.10);
}

.page-catalog .p-card .p-title{font-weight:950; letter-spacing:.1px}

.page-catalog .p-card .p-actions .btn{
  border-radius:999px;
  padding:9px 12px;
  font-weight:900;
}

.page-catalog .p-card .p-actions .btn.ghost{
  background:rgba(255,255,255,.86);
}

.page-catalog .p-card .p-actions .btn:not(.ghost){
  background:linear-gradient(135deg, rgba(56,189,248,.26), rgba(255,255,255,.92));
  border-color:rgba(56,189,248,.28);
}

@media (max-width: 560px){
  .page-catalog .p-card.card{padding:14px}
  .page-catalog .p-card .p-actions{gap:10px}
  .page-catalog .p-card .p-actions .btn{flex:1 1 auto; justify-content:center}
}


/* ---------- Catalog: categories rail (professional) ---------- */
.hscrollWrap{
  position:relative;
  overflow:hidden;
  margin-top:12px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  background:linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.56));
  box-shadow:0 18px 40px rgba(2,8,23,.10);
}

/* The scrolling chips area (reserve space for nav buttons) */
.hscrollWrap .catbar{
  padding:10px 54px;
  margin-top:0;
  scrollbar-width:none;
}
.hscrollWrap .catbar::-webkit-scrollbar{display:none}

/* Edge fades (no arrows text, just a subtle fade) */
.hscrollWrap::before,
.hscrollWrap::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:46px;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
  z-index:2;
}
.hscrollWrap::before{
  inset-inline-start:0;
  background:linear-gradient(to right, rgba(248,250,252,.95), rgba(248,250,252,0));
}
.hscrollWrap::after{
  inset-inline-end:0;
  background:linear-gradient(to left, rgba(248,250,252,.95), rgba(248,250,252,0));
}
.hscrollWrap.show-left::before{ opacity:1; }
.hscrollWrap.show-right::after{ opacity:1; }

/* Nav buttons: compact, clean, never overlapping */
.hscrollWrap .catNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 26px rgba(2,8,23,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:4;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.hscrollWrap .catNav span{
  font-size:22px;
  line-height:1;
  color:rgba(15,23,42,.90);
  transform:translateY(-1px);
}
.hscrollWrap .catNav:active{ transform:translateY(-50%) scale(.98); }
.hscrollWrap .catNav[disabled]{ opacity:.25; box-shadow:none; }

/* LTR default */
.hscrollWrap .catNavPrev{ left:10px; }
.hscrollWrap .catNavNext{ right:10px; }

/* RTL swap sides + flip glyph */
.hscrollWrap[dir="rtl"] .catNavPrev{ right:10px; left:auto; }
.hscrollWrap[dir="rtl"] .catNavNext{ left:10px; right:auto; }
.hscrollWrap[dir="rtl"] .catNavPrev span,
.hscrollWrap[dir="rtl"] .catNavNext span{ transform:translateY(-1px) scaleX(-1); }


/* CatRail v29: edge strips (transparent bars) + safe padding so first chip never goes under the right strip */
.hscrollWrap.catRail{
  /* Category rail (chips) + nav buttons BELOW (no overlap) */
  --railPad:12px;
}

/* Chips row */
.hscrollWrap.catRail .catbar{
  padding-top:10px;
  padding-bottom:8px;
  padding-inline: var(--railPad);
}

/* Remove edge gradients on this rail (clean) */
.hscrollWrap.catRail::before,
.hscrollWrap.catRail::after{ display:none; }

/* Nav row under chips */
.hscrollWrap.catRail .catNavRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 0 var(--railPad) 10px;
}

/* Nav buttons now live in the row (not absolute) */
.hscrollWrap.catRail .catNav{
  position:static;
  top:auto;
  left:auto;
  right:auto;
  transform:none;
  width:52px;
  height:40px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 22px rgba(2,8,23,.10);
}

.hscrollWrap.catRail .catNav span{
  transform:none;
  opacity:.92;
}

/* RTL sizing tweaks (keeps the visual "stronger" indicator on the main direction) */
.hscrollWrap.catRail[dir="rtl"] .catNavPrev span{ font-size:16px; }
.hscrollWrap.catRail[dir="rtl"] .catNavNext span{ font-size:22px; }

/* Scroll hint: simple, below the rail (no overlay) */
.scrollHint{
  position:static;
  transform:none;
  margin:6px auto 0;
  width:max-content;
  max-width:100%;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 22px rgba(2,8,23,.08);
  font-size:13px;
  font-weight:900;
  color:rgba(15,23,42,.80);
  display:flex;
  align-items:center;
  gap:8px;
  pointer-events:none;
}
.scrollHint .hintIcon{ font-size:15px; line-height:1; opacity:.9; }

@media (max-width: 380px){
  /* On very small screens keep enough side padding so nav strips never overlap chips */
  .hscrollWrap .catbar{ padding:9px 40px 26px; }
  .hscrollWrap.catRail .catbar{ padding-top:9px; padding-bottom:10px; padding-inline: var(--railPad); }
  .hscrollWrap::before, .hscrollWrap::after{ width:30px; font-size:17px; }
  .scrollHint{ font-size:11px; padding:5px 9px; bottom:5px; }
  .scrollHint .hintIcon{ font-size:15px; }
}


/* === Catalog Search Sheet (like Menu) === */
.search-topbtn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:46px;
  padding:0 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.42);
  background:linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.56));
  box-shadow: 0 18px 44px rgba(2,6,23,.18), 0 0 0 1px rgba(255,255,255,.16) inset;
  cursor:pointer;
  user-select:none;
}
.search-topbtn-text{
  font-weight:1000;
  font-size:clamp(12px, 1.4vw, 14px);
  color:rgba(10,32,70,.92);
  white-space:nowrap;
}
.search-topbtn-ico{
  width:18px;height:18px;
  border:2px solid rgba(10,32,70,.65);
  border-radius:999px;
  position:relative;
}
.search-topbtn-ico::after{
  content:"";
  position:absolute;
  width:8px;height:2px;
  background:rgba(10,32,70,.65);
  right:-6px;
  bottom:-3px;
  transform:rotate(45deg);
  border-radius:2px;
}

/* Hide the panel in the page; it will be moved into overlay */
.searchPanel{ display:none; }
.search-overlay .searchPanel{ display:block; }

.search-overlay{
  position:fixed;
  inset:0;
  /* Must stay ABOVE the bottom QuickDock */
  z-index:300;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  background:rgba(2,6,23,.55);
  backdrop-filter: blur(6px);
}
.search-overlay.open{ opacity:1; pointer-events:auto; }

.search-sheet{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%) translateY(14px);
  width:calc(100% - 22px);
  max-width:620px;
  border-radius:26px;
  padding:14px;
  background:linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.56));
  border:1px solid rgba(255,255,255,.40);
  box-shadow: 0 26px 65px rgba(2,6,23,.35);
  transition:transform .18s ease;
  overflow:hidden;
}

/* If QuickDock is enabled, keep the search sheet ABOVE it (no overlap). */
body.has-quickdock .search-sheet{
  bottom:calc(14px + 92px + env(safe-area-inset-bottom));
}
.search-overlay.open .search-sheet{ transform:translateX(-50%) translateY(0); }

.search-sheet::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 380px at 0% 0%, rgba(59,130,246,.16), transparent 55%),
    radial-gradient(780px 320px at 100% 0%, rgba(6,182,212,.14), transparent 58%),
    radial-gradient(760px 320px at 20% 100%, rgba(244,63,94,.12), transparent 60%),
    radial-gradient(720px 320px at 100% 100%, rgba(99,102,241,.14), transparent 62%);
  pointer-events:none;
}

.search-rain{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.30;
  background-image:
    linear-gradient(transparent 0, rgba(255,255,255,.55) 50%, transparent 100%);
  background-size: 2px 18px;
  background-repeat: repeat;
  transform:skewX(-12deg);
  filter: blur(.15px);
}

.search-head{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:2px 2px 10px;
}
.search-title{
  font-weight:900;
  letter-spacing:.2px;
  font-size:14px;
  color:#0f172a;
  opacity:.92;
}
.search-close{
  width:40px;height:40px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.60);
  display:flex;align-items:center;justify-content:center;
  box-shadow: 0 10px 26px rgba(2,6,23,.10);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.search-close::before{
  content:"";
  width:16px;height:16px;
  border-right:2px solid rgba(15,23,42,.65);
  border-bottom:2px solid rgba(15,23,42,.65);
  transform: rotate(135deg);
  display:block;
}

.search-body{
  position:relative;
  max-height:70vh;
  overflow:auto;
  padding:2px;
}

.searchPanelTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.searchPanelTitle{ display:none; }
.searchPanelClear{
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.65);
  padding:10px 12px;
  border-radius:16px;
  cursor:pointer;
  font-weight:900;
  font-size:12px;
  color:rgba(15,23,42,.85);
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
}
.searchPanelTip{ margin-top:10px; opacity:.85; }



/* --- Topbar 122-like (dark pill) --- */
:is(html.mnav-enabled, body.mnav-enabled) .topbar{
  position:sticky;
  top:10px;
  z-index:60;
  padding:10px 0 12px;
  background:transparent;
  border-bottom:0;
  backdrop-filter:none;
}
:is(html.mnav-enabled, body.mnav-enabled) .topbar::after{display:none !important}

:is(html.mnav-enabled, body.mnav-enabled) .topbar .container.nav{
  max-width:1100px;
  margin:0 auto;
  padding:14px 16px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.42);

  /* Cool lavender (like screenshot #3): soft icy blue + periwinkle */
  background:
    radial-gradient(980px 260px at 40% 8%, rgba(255,231,168,.28), rgba(0,0,0,0) 62%),
    radial-gradient(980px 260px at 18% 22%, rgba(244,248,238,.92), rgba(0,0,0,0) 62%),
    radial-gradient(860px 240px at 52% 18%, rgba(188,211,240,.70), rgba(0,0,0,0) 62%),
    radial-gradient(760px 240px at 78% 26%, rgba(162,202,231,.42), rgba(0,0,0,0) 62%),
    radial-gradient(720px 220px at 92% 18%, rgba(255,255,255,.55), rgba(0,0,0,0) 60%),
    linear-gradient(90deg,
      rgba(244,248,238,.92) 0%,
      rgba(188,211,240,.78) 45%,
      rgba(162,202,231,.62) 75%,
      rgba(244,248,238,.92) 100%
    ),
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0));

  box-shadow:
    0 22px 60px rgba(2,6,23,.22),
    0 8px 24px rgba(2,6,23,.14);
  backdrop-filter: blur(12px);
}


:is(html.mnav-enabled, body.mnav-enabled) .topbar .brandText .title{
  color:var(--hdr-text-strong);
  text-shadow:0 2px 10px rgba(255,255,255,.35);
}
:is(html.mnav-enabled, body.mnav-enabled) .topbar .brandSubline{
  color:var(--hdr-text);
}
:is(html.mnav-enabled, body.mnav-enabled) .topbar .brandSubline span{color:inherit}
:is(html.mnav-enabled, body.mnav-enabled) .topbar .brandLogo{
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.40));
}

@media (max-width: 520px){
  :is(html.mnav-enabled, body.mnav-enabled) .topbar{ top:6px; padding:8px 0 10px; }
  :is(html.mnav-enabled, body.mnav-enabled) .topbar .container.nav{
    padding:10px 12px;
    border-radius:22px;
  }
  :is(html.mnav-enabled, body.mnav-enabled) .topbar .brandText .title{ font-size:14px; }
  :is(html.mnav-enabled, body.mnav-enabled) .topbar .brandSubline{ font-size:11px; }
}

/* Actions (Lang / Cart / Menu) */

/* Warm-sky header: make text/icons readable on the lighter pill */
:is(html.mnav-enabled, body.mnav-enabled) .topActions .topPill,
:is(html.mnav-enabled, body.mnav-enabled) .topActions .mnav-topbtn{
  border:1px solid rgba(77,144,255,.22);
  background:
    radial-gradient(220px 120px at 18% 30%, rgba(77,144,255,.12), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.40));
  color:var(--hdr-text-strong);
  box-shadow: 0 10px 24px rgba(2,6,23,.14);
}

:is(html.mnav-enabled, body.mnav-enabled) .topActions .topPill.primary{
  border-color: rgba(77,144,255,.40);
  background:
    radial-gradient(240px 120px at 20% 35%, rgba(77,144,255,.18), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.44));
}

/* Badge readable on light background */
:is(html.mnav-enabled, body.mnav-enabled) .topActions .topBadge{
  background:linear-gradient(135deg, rgba(56,189,248,.12), rgba(34,197,94,.06), rgba(255,255,255,.60));
  border:1px solid rgba(77,144,255,.22);
  color:var(--hdr-text-strong);
}

/* Cart icon: keep warm hint (yellow) without being harsh */
:is(html.mnav-enabled, body.mnav-enabled) .topActions svg.icoCart,
:is(html.mnav-enabled, body.mnav-enabled) .topActions .cartIco{
  color:var(--hdr-accent);
}
:is(html.mnav-enabled, body.mnav-enabled) .topActions a.topPill:hover svg.icoCart,
:is(html.mnav-enabled, body.mnav-enabled) .topActions a.topPill:hover .cartIco{
  color:#2F7BFF;
}


.topActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

/* Topbar pills: larger dark-blue text */
.topbar .topPill{
  color:var(--hdr-text-strong);
  font-size:clamp(17px, 2.4vw, 21px);
}
.topbar .mnav-topbtn-text{
  color:var(--hdr-text-strong);
  font-size:clamp(17px, 2.4vw, 21px);
}
.topPill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:40px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  color:rgba(255,255,255,.92);
  font-weight:800;
  cursor:pointer;
  user-select:none;
  box-shadow: 0 10px 24px rgba(2,6,23,.28);
}

/* Icon-only pills (Catalog / Search) */
.topPill.iconOnly{
  padding:0;
  width:44px;
  justify-content:center;
}
.topPill.iconOnly .icoSvg{width:20px; height:20px}

/* Make top actions fit better on small screens */
@media (max-width: 520px){
  .topActions{gap:8px;}
  .topActions .topPill{height:38px; padding:0 12px;}
  .topActions .topPill.iconOnly{width:42px; padding:0;}
  .topActions .mnav-topbtn{height:38px; padding:0 12px;}
}
@media (max-width: 420px){
  .topActions .mnav-topbtn-text{display:none;}
  .topActions .mnav-topbtn{width:42px; padding:0; justify-content:center;}
}
.topPill:hover{filter:brightness(1.03)}
.topPill:active{transform:translateY(1px)}
.topPill.primary{
  border-color: rgba(56,189,248,.35);
  background:
    radial-gradient(220px 120px at 18% 30%, rgba(56,189,248,.18), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
}

.topPill-ico{display:inline-flex; align-items:center; justify-content:center; font-size:18px; line-height:1}
.icoSvg{width:18px; height:18px; display:block}

/* Cart icon: force the color on the SVG itself for better compatibility across browsers */
.topActions svg.icoCart{color:var(--amber)}
.topActions a.topPill:hover svg.icoCart{color:var(--orange)}
.topActions svg.icoCart{width:20px; height:20px}
.topActions .topPill-ico{min-width:20px}
.topActions svg.icoCart{filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));}

/* Backward-compatible (keep the span class too) */
.topActions .cartIco{color:var(--amber)}
.topActions a.topPill:hover .cartIco{color:var(--orange)}

.topBadge{
  min-width:26px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.14);
  font-size:14px;
  font-weight:900;
  color:rgba(255,255,255,.92);
}

/* Slightly smaller actions (icons + text) in the 122-like topbar */
:is(html.mnav-enabled, body.mnav-enabled) .topActions .topPill,
:is(html.mnav-enabled, body.mnav-enabled) .topActions .mnav-topbtn{
  height:38px;
  padding:0 14px;
  gap:8px;
}
:is(html.mnav-enabled, body.mnav-enabled) .topActions .topPill{font-size:18px; color:var(--hdr-text-strong);}
:is(html.mnav-enabled, body.mnav-enabled) .topActions .topPill-ico{font-size:18px;}
:is(html.mnav-enabled, body.mnav-enabled) .topActions .topBadge{
  min-width:22px;
  height:22px;
  font-size:13px;
  padding:0 7px;
}

/* Make the existing menu button match topPill */
:is(html.mnav-enabled, body.mnav-enabled) .topActions .mnav-topbtn{
  display:inline-flex;
  min-width:unset;
  height:32px;
  padding:0 12px;
  gap:8px;
  /* Keep the same visual order in both languages (match FR layout): icon then text */
  direction:ltr;
  flex-direction:row;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(220px 120px at 18% 30%, rgba(56,189,248,.18), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  box-shadow: 0 10px 24px rgba(2,6,23,.28);
  backdrop-filter: blur(12px);
  filter:none;
  transition: filter .15s ease, transform .15s ease;
}

/* Arabic stays RTL globally, but the Menu button remains LTR to keep icon then label */
html.mnav-enabled body.rtl .topActions .mnav-topbtn{direction:ltr; flex-direction:row;}
:is(html.mnav-enabled, body.mnav-enabled) .topActions .mnav-topbtn::before,
:is(html.mnav-enabled, body.mnav-enabled) .topActions .mnav-topbtn::after{display:none !important}

:is(html.mnav-enabled, body.mnav-enabled) .topActions .mnav-topbtn-ico{
  /* Keep the sky-blue Menu icon inside the Topbar actions */
  width:clamp(20px, 2.2vw, 24px);
  height:clamp(20px, 2.2vw, 24px);
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:0;
  color:transparent;
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 56%),
    linear-gradient(135deg, rgba(56,189,248,.38), rgba(255,255,255,.60));
  box-shadow:
    0 14px 30px rgba(56,189,248,.22),
    0 0 0 1px rgba(255,255,255,.22) inset;
  position:relative;
}
:is(html.mnav-enabled, body.mnav-enabled) .topActions .mnav-topbtn-ico::before{
  content:"";
  position:absolute;
  left:5px; right:5px; top:7px;
  border-top:2px solid rgba(56,189,248,.95);
  opacity:.98;
}
:is(html.mnav-enabled, body.mnav-enabled) .topActions .mnav-topbtn-ico::after{
  content:"";
  position:absolute;
  left:5px; right:5px; bottom:7px;
  border-top:2px solid rgba(56,189,248,.95);
  box-shadow: 0 -7px 0 rgba(56,189,248,.95);
  opacity:.98;
}

:is(html.mnav-enabled, body.mnav-enabled) .topActions .mnav-topbtn-text{
  color:var(--hdr-text-strong);
  font-size:18px;
  font-weight:900;
}



/* ---------- Quick Dock (desktop + mobile actions: Menu / Cart / Lang) ---------- */
/* Pointer cursor on all QuickDock buttons/links (desktop hover) */
.quickdock .qd-btn, .quickdock .qd-btn *{ cursor:pointer !important; }

.quickdock{
  display:block;
  position:fixed;
  top:auto;
  bottom:calc(12px + env(safe-area-inset-bottom));
  left:50%;
  right:auto;
  transform:translateX(-50%);
  z-index:120;
  padding:0;
  pointer-events:none; /* enable clicks only on inner */
}

/* On RTL pages, keep the dock away from the brand (dock on the left) */
/* Keep header actions visible even when quickdock exists (quickdock is bottom, no overlap) */
/* body.has-quickdock .topbar .topActions{ display:none !important; } */


/* Prevent content from being covered by the bottom dock */
body.has-quickdock{ padding-bottom:calc(140px + env(safe-area-inset-bottom)); }
/* Base (desktop) look */
.quickdock-inner{
  pointer-events:auto;
  width:max-content;
  max-width:none;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  border-radius:20px;
  background:
    radial-gradient(520px 140px at 18% 25%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(520px 160px at 82% 35%, rgba(188,211,240,.55), transparent 62%),
    linear-gradient(135deg, rgba(240,247,252,.92), rgba(188,211,240,.74), rgba(240,247,252,.92));
  backdrop-filter: blur(14px);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 26px rgba(2,6,23,.16);
}

.qd-btn{
  height:40px;
  min-width:40px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  color:rgba(15,23,42,.92);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.qd-btn:active{ transform: translateY(1px); }
.qd-ico{ width:22px; height:22px; display:inline-flex; }
.qd-ico svg{ width:22px; height:22px; }

.qd-cart{ min-width:52px; }
.qd-lang{ min-width:52px; font-weight:900; letter-spacing:.6px; }

.qd-badge{
  position:absolute;
  top:5px;
  right:5px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:rgba(15,23,42,.86);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  display:flex;
  align-items:center;
  justify-content:center;
}

@media (max-width: 620px){
  /* quick actions stay visible as a bottom dock */
  /* Keep header actions visible even on mobile (user wants them back) */
  /* .topbar .topActions{display:none !important;} */
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom));}

  .quickdock{
    display:block;
    position:fixed;
    top:auto;
    bottom:calc(10px + env(safe-area-inset-bottom));
    left:50%;
    right:auto;
    transform:translateX(-50%);
    z-index:120;
    padding:0;
    pointer-events:none;
  }
.quickdock-inner{
    pointer-events:auto;
    width:max-content;
    max-width:calc(100vw - 16px);
    margin:0 auto;
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 8px;
    border-radius:18px;
    background:
    radial-gradient(600px 140px at 18% 25%, rgba(34,211,238,.26), transparent 62%),
    radial-gradient(560px 160px at 82% 35%, rgba(168,85,247,.22), transparent 62%),
    linear-gradient(135deg, rgba(59,130,246,.28), rgba(16,185,129,.16), rgba(168,85,247,.18));
  backdrop-filter: blur(14px);
    border:1px solid rgba(15,23,42,.10);
    box-shadow:0 10px 26px rgba(2,6,23,.16);
  }

  .qd-btn{
    height:40px;
    min-width:40px;
    border-radius:14px;
    border:1px solid rgba(15,23,42,.10);
    background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
    color:rgba(15,23,42,.92);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
    user-select:none;
    -webkit-tap-highlight-color: transparent;
  }
  .qd-btn:active{ transform: translateY(1px); }
  .qd-ico{ width:22px; height:22px; display:inline-flex; }
  .qd-ico svg{ width:22px; height:22px; }

  .qd-cart{ min-width:46px; }
  .qd-lang{ min-width:46px; font-weight:900; letter-spacing:.6px; }

  .qd-badge{
    position:absolute;
    top:5px;
    right:5px;
    min-width:18px;
    height:18px;
    padding:0 6px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    background:rgba(15,23,42,.86);
    color:#fff;
    border:1px solid rgba(255,255,255,.16);
    display:flex;
    align-items:center;
    justify-content:center;
  }
}

@media (max-width: 420px){
  body{padding-bottom:70px;}
  .quickdock-inner{gap:8px; padding:6px 8px; border-radius:16px;}
  .qd-btn{height:38px; min-width:38px; border-radius:13px;}
  .qd-cart, .qd-lang{min-width:44px;}
}


/* ---------- UX upgrades (catalog search + categories) ---------- */
.searchRow{
  display:flex;
  gap:10px;
  align-items:center;
  margin: 0 0 10px 0;
}
.searchRow .select{flex: 1 1 auto;}
.btn.btn-apply{min-width:110px; padding:11px 14px;}

.section-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.sectionTitleLeft{display:flex; flex-direction:column; gap:4px; min-width:0;}
.sectionTitleLeft h2{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.viewToggle{
  display:inline-flex;
  gap:8px;
  padding:6px;
  border-radius:16px;
  background:rgba(255,255,255,.60);
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 24px rgba(2,8,23,.10);
}
.vtbtn{
  border:0;
  cursor:pointer;
  padding:9px 12px;
  border-radius:14px;
  font-weight:900;
  background:rgba(15,23,42,.06);
  color:var(--ink2);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.vtbtn:hover{transform: translateY(-1px); box-shadow: 0 10px 22px rgba(2,8,23,.10);}
.vtbtn.active{
  background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(34,197,94,.16));
  box-shadow: 0 16px 30px rgba(2,8,23,.12), 0 0 0 1px rgba(255,255,255,.60) inset;
}

.catSection{margin-top:14px;}
.catSectionHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding: 4px 2px;
}
.catSectionTitle{
  margin:0;
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 1000;
  color: var(--ink2);
}

@media (max-width: 420px){
  body{font-size:17px;}
  .input, .select, textarea{padding:12px 13px;}
  .btn.btn-apply{min-width:92px; padding:12px 14px;}
  .viewToggle{padding:5px;}
  .vtbtn{padding:9px 10px;}
}


/* Ensure dock fits small screens */
.quickdock-inner{ max-width:min(520px, calc(100vw - 20px)); }


/* ============================
   Mobile: header shows ONLY the brand
   (Menu/Cart/Lang moved to bottom QuickDock)
   ============================ */
@media (max-width: 720px){
  /* hide header actions pills */
  .topbar .topActions{display:none !important;}

  /* brand aligned to LEFT on mobile (as requested) */
  .topbar .container.nav{justify-content:flex-start !important;}
  .topbar .brand{margin-inline:0 !important;}
  .topbar .brandText{align-items:flex-start; text-align:left;}
  .topbar .brand .title{font-size:clamp(18px, 5.2vw, 24px) !important; line-height:1.05;}
}



/* ===== v22 catalog/search polish ===== */
.searchInputWrap{
  display:flex;
  gap:10px;
  align-items:stretch;
}
.searchInputWrap .input{flex:1 1 auto;}
.searchGo{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  min-width:96px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(34,197,94,.12), rgba(255,255,255,.68));
  box-shadow:0 12px 26px rgba(2,6,23,.12);
  cursor:pointer;
  font-weight:1000;
  color:rgba(15,23,42,.88);
}
.searchGoIco{
  width:16px;height:16px;
  border:2px solid rgba(15,23,42,.55);
  border-radius:999px;
  position:relative;
}
.searchGoIco::after{
  content:"";
  position:absolute;
  width:7px;height:2px;
  background:rgba(15,23,42,.55);
  right:-6px;
  bottom:-3px;
  transform:rotate(45deg);
  border-radius:2px;
}
.searchGoTxt{font-size:13px;}

/* collapsible category sections */
.catSectionHead{
  width:100%;
  background:transparent;
  border:0;
  cursor:pointer;
  text-align:start;
  padding: 10px 10px;
  border-radius:16px;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;
}
/* kill legacy chevron pseudo-element (older builds) */
.catSectionHead::after{content:none !important; display:none !important;}

.catSectionTitle{flex:1 1 auto; min-width:0;}

.catSectionCount{
  flex:0 0 auto;
  min-width:34px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.10);
  font-weight:1000;
  font-size:13px;
  text-align:center;
  color:rgba(15,23,42,.75);
}

.catSectionChevron{
  flex:0 0 auto;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(15,23,42,.05);
  border:1px solid rgba(15,23,42,.10);
  transition: transform .15s ease, background .15s ease;
  opacity:.85;
}

.catSection.collapsed .catSectionBody{display:none;}
.catSection.collapsed .catSectionChevron{transform:rotate(-90deg);}

.catSectionHead:hover{
  background:rgba(15,23,42,.04);
}

/* slightly larger legibility baseline */
body{font-size:17px;}
.small{font-size:13px;}
.product-card .name{font-size:16px;}
.input, .select, textarea{font-size:15px;}



/* ============================
   Catalogue: actions + Quick View
   ============================ */
.product-card .actions{display:flex; gap:10px; margin-top:auto;}
.product-card .actions .btn{flex:1; min-width:0;}

.qv-overlay{position:fixed; inset:0; background:rgba(15,23,42,.45); backdrop-filter: blur(8px);
  display:flex; align-items:flex-end; justify-content:center; padding:14px; z-index:9999;
  opacity:0; pointer-events:none; transition:opacity .18s ease;}
.qv-overlay.open{opacity:1; pointer-events:auto;}
.qv-sheet{width:min(980px,100%); max-height:82vh; overflow:auto;
  background:rgba(255,255,255,.90); border:1px solid rgba(148,163,184,.35);
  border-radius:18px; box-shadow:0 18px 60px rgba(2,6,23,.25);}
.qv-head{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; position:sticky; top:0; background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(148,163,184,.25);}
.qv-title{font-weight:900;}
.qv-close{width:38px; height:38px; border-radius:14px; border:1px solid rgba(148,163,184,.35);
  background:rgba(255,255,255,.75); position:relative; cursor:pointer;}
.qv-close:before,.qv-close:after{content:""; position:absolute; left:50%; top:50%;
  width:18px; height:2px; background:rgba(15,23,42,.65); transform-origin:center;}
.qv-close:before{transform:translate(-50%,-50%) rotate(45deg);}
.qv-close:after{transform:translate(-50%,-50%) rotate(-45deg);}
.qv-body{padding:14px;}
.qv-grid{display:grid; grid-template-columns:240px 1fr; gap:14px; align-items:start;}
.qv-img{width:100%; height:220px; object-fit:cover; border-radius:16px; border:1px solid rgba(148,163,184,.25);}
.qv-badge{font-size:12px; opacity:.85}
.qv-name{font-weight:950; font-size:18px; margin-top:6px;}
.qv-price{font-weight:950; font-size:18px; margin-top:10px;}
.qv-actions{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;}
.qv-actions .btn{flex:1; min-width:160px;}
.qv-packs{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.qv-desc{margin-top:12px; padding-top:12px; border-top:1px solid rgba(148,163,184,.25); white-space:pre-wrap;}
.qv-loading{padding:2px;}
@media (max-width:720px){
  .qv-grid{grid-template-columns:1fr;}
  .qv-img{height:180px;}
}


/* ===== v25 Search UI redesign (clarity + colors + bigger fonts) ===== */
.searchPanelTitle{ display:block; font-size:16px; font-weight:1000; color:rgba(15,23,42,.92); }
.searchPanelTop{ margin-bottom:12px; }

.searchPanelClear{
  font-size:14px;
  padding:10px 14px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,.75), rgba(56,189,248,.12));
}

.searchInputWrap .input,
.search-body .input,
.search-body .select,
.searchPanel .input,
.searchPanel .select{
  font-size:16px;
  padding:12px 12px;
  border-radius:16px;
}

.searchGo{
  min-width:112px;
  border-radius:18px;
  padding:0 16px;
  background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(34,197,94,.16), rgba(255,255,255,.70));
  border:1px solid rgba(59,130,246,.22);
}
.searchGoTxt{ font-size:15px; }

.sp-section{
  position:relative;
  margin: 10px 0;
  padding: 10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.45);
  background:linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.55));
  box-shadow: 0 14px 32px rgba(2,6,23,.10);
}
.sp-section::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  background:
    radial-gradient(520px 180px at 0% 0%, rgba(59,130,246,.12), transparent 55%),
    radial-gradient(520px 180px at 100% 0%, rgba(34,197,94,.10), transparent 55%),
    radial-gradient(520px 180px at 0% 100%, rgba(99,102,241,.10), transparent 55%),
    radial-gradient(520px 180px at 100% 100%, rgba(244,63,94,.08), transparent 55%);
  pointer-events:none;
}

.sp-grid{ position:relative; display:grid; gap:10px; }
.sp-grid-2{ grid-template-columns: 1fr 1fr; }
@media (max-width:420px){
  .sp-grid-2{ grid-template-columns: 1fr; }
}

.sp-field{ position:relative; }
.sp-label{
  font-size:13px;
  font-weight:1000;
  color:rgba(15,23,42,.78);
  margin: 2px 2px 6px;
}
.sp-subtitle{
  position:relative;
  font-size:14px;
  font-weight:1000;
  color:rgba(15,23,42,.86);
  margin: 0 2px 8px;
  padding-inline-start: 10px;
}
.sp-subtitle::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:50%;
  width:6px;
  height:18px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(59,130,246,.85), rgba(34,197,94,.70));
}

/* Make placeholders clearer */
.searchPanel .input::placeholder{ color: rgba(15,23,42,.55); font-weight:800; }

/* Slightly bigger helper text */
.searchPanelTip.small{ font-size:13px; }



/* v26 – Catbar redesign + clearer pager info */
.hscrollWrap{
  position:relative;
  margin-top:14px;
  padding-top:2px;
}
.hscrollWrap::before,
.hscrollWrap::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:26px;
  pointer-events:none;
  z-index:2;
}
.hscrollWrap::before{
  left:0;
  background:linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}
.hscrollWrap::after{
  right:0;
  background:linear-gradient(270deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}

.catbar{
  gap:12px;
  padding:10px 18px;
  margin-top:8px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(56,189,248,.12), rgba(34,197,94,.06), rgba(255,255,255,.60));
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 14px 30px rgba(2,8,23,.07);
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}
.catbar::-webkit-scrollbar{height:8px}
.catbar::-webkit-scrollbar-thumb{background:rgba(15,23,42,.18); border-radius:999px}
.catbar::-webkit-scrollbar-track{background:transparent}

.chip{
  scroll-snap-align:start;
  font-size:16px;
  line-height:1;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.78);
  box-shadow:0 10px 22px rgba(2,8,23,.06);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.chip:active{ transform:scale(.98); }
.chip:hover{ box-shadow:0 16px 34px rgba(2,8,23,.10); }

.chip.active{
  border-color:rgba(59,130,246,.45);
  background:linear-gradient(135deg, rgba(59,130,246,.24), rgba(34,197,94,.14), rgba(255,255,255,.78));
  box-shadow:0 18px 40px rgba(2,8,23,.12);
  color:rgba(15,23,42,.96);
}

.scrollHint{
  position:relative;
  margin:8px auto 0;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  width:fit-content;
  padding:6px 10px;
  border-radius:999px;
  font-size:13px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(15,23,42,.10);
  color:rgba(15,23,42,.75);
  box-shadow:0 10px 22px rgba(2,8,23,.06);
}
.scrollHint .hintIcon{
  font-weight:900;
  opacity:.75;
}

@media (max-width:420px){
  .chip{ font-size:15px; padding:11px 14px; }
  .catbar{ padding:10px 14px; }
}

/* Make the result line more readable on mobile */
#resultInfo{
  font-size:14px;
  color:rgba(15,23,42,.72);
}

/* v27 safeguard: never show legacy arrow glyphs */
.hscrollWrap::before, .hscrollWrap::after{ content:"" !important; font-size:0 !important; color:transparent !important; }


/* =========================================================
   v30 — FINAL Catalog Categories Rail (clean + professional)
   Fixes overlap + duplicated old styles.
   Scoped to .page-catalog to avoid breaking other pages.
   ========================================================= */
.page-catalog .hscrollWrap{
  position:relative;
  overflow:hidden;
  margin-top:12px;
  border-radius:20px;
  border:1px solid rgba(15,23,42,.10);
  background:linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.60));
  box-shadow:0 18px 42px rgba(2,8,23,.10);
}

.page-catalog .hscrollWrap.catRail{ --edgeW:44px; }

/* Reserve space for edge strips using logical paddings (fix RTL right overlap) */
.hscrollWrap.catRail .catbar{
  padding-top:10px;
  padding-bottom:10px;
  padding-inline: calc(var(--edgeW,44px) + 12px);
}
.hscrollWrap.catRail[dir="rtl"] .catbar{
  /* In RTL the first chip starts on the RIGHT (inline-start) */
  padding-inline-start: calc(var(--edgeW,44px) + 18px + env(safe-area-inset-right, 0px));
  padding-inline-end:   calc(var(--edgeW,44px) + 12px + env(safe-area-inset-left, 0px));
}


.page-catalog .hscrollWrap .catbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  border:0;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  padding:10px calc(var(--edgeW,44px) + 10px);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.page-catalog .hscrollWrap .catbar::-webkit-scrollbar{ display:none; }

.page-catalog .chip{
  font-size:15.5px;
  font-weight:900;
  line-height:1;
  padding:11px 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.84);
  box-shadow:0 10px 22px rgba(2,8,23,.06);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  white-space:nowrap;
}
.page-catalog .chip:active{ transform:scale(.98); }
.page-catalog .chip:hover{ box-shadow:0 16px 32px rgba(2,8,23,.10); }
.page-catalog .chip.active{
  border-color:rgba(59,130,246,.40);
  background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(34,197,94,.12), rgba(255,255,255,.86));
  box-shadow:0 18px 40px rgba(2,8,23,.12);
}

/* Edge strips: large tap targets, no overlap with chips thanks to padding */
.page-catalog .hscrollWrap.catRail .catNav{
  position:absolute;
  top:0; bottom:0;
  width:var(--edgeW,44px);
  border:0;
  border-radius:0;
  background:rgba(255,255,255,.60);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  cursor:pointer;
  box-shadow:none;
}
.page-catalog .hscrollWrap.catRail .catNav span{
  font-size:22px;
  line-height:1;
  opacity:.92;
  transform:translateY(-1px);
}
.page-catalog .hscrollWrap.catRail .catNav[disabled]{ opacity:.25; }

/* subtle inner divider */
.page-catalog .hscrollWrap.catRail .catNavPrev{ inset-inline-start:0; }
.page-catalog .hscrollWrap.catRail .catNavNext{ inset-inline-end:0; }
.page-catalog .hscrollWrap.catRail .catNavPrev{ box-shadow: 1px 0 0 rgba(15,23,42,.08) inset; }
.page-catalog .hscrollWrap.catRail .catNavNext{ box-shadow: -1px 0 0 rgba(15,23,42,.08) inset; }

/* Directional gradients */
.page-catalog .hscrollWrap[dir="ltr"].catRail .catNavPrev{ background:linear-gradient(90deg, rgba(255,255,255,.88), rgba(255,255,255,.00)); }
.page-catalog .hscrollWrap[dir="ltr"].catRail .catNavNext{ background:linear-gradient(270deg, rgba(255,255,255,.88), rgba(255,255,255,.00)); }
.page-catalog .hscrollWrap[dir="rtl"].catRail .catNavPrev{ background:linear-gradient(270deg, rgba(255,255,255,.88), rgba(255,255,255,.00)); }
.page-catalog .hscrollWrap[dir="rtl"].catRail .catNavNext{ background:linear-gradient(90deg, rgba(255,255,255,.88), rgba(255,255,255,.00)); }
.page-catalog .hscrollWrap[dir="rtl"].catRail .catNavPrev span,
.page-catalog .hscrollWrap[dir="rtl"].catRail .catNavNext span{ transform:translateY(-1px) scaleX(-1); }

/* Hint below the rail (clean, non-overlapping) */
.page-catalog .scrollHint{
  position:relative;
  margin:8px auto 0;
  width:max-content;
  max-width:100%;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 22px rgba(2,8,23,.08);
  font-size:13px;
  font-weight:900;
  color:rgba(15,23,42,.80);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  pointer-events:none;
}
.page-catalog .scrollHint .hintIcon{ font-size:15px; line-height:1; opacity:.9; }

@media (max-width:380px){
  .page-catalog .hscrollWrap.catRail{ --edgeW:40px; }
  .page-catalog .chip{ font-size:15px; padding:10px 13px; }
}

/* =========================================================
   v33.1 — HARD OVERRIDE: nav buttons UNDER chips (NO overlap)
   Some older scoped rules re-introduced absolute edge-strips.
   Keep this block at the very END of the stylesheet.
   ========================================================= */
.page-catalog .hscrollWrap.catRail{
  /* force a two-row layout */
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden;
}

/* Chips row must NOT reserve side space for edge strips */
.page-catalog .hscrollWrap.catRail .catbar{
  padding-inline: 12px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Nav row lives under chips */
.page-catalog .hscrollWrap.catRail .catNavRow{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 0 12px 10px !important;
}

/* Disable ANY absolute edge-strip behaviour */
.page-catalog .hscrollWrap.catRail .catNav{
  position:static !important;
  inset:auto !important;
  top:auto !important;
  bottom:auto !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  width:56px !important;
  height:40px !important;
  border-radius:16px !important;
  border:1px solid rgba(15,23,42,.14) !important;
  background:rgba(255,255,255,.86) !important;
  box-shadow:0 10px 22px rgba(2,8,23,.10) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  z-index:1 !important;
}
.page-catalog .hscrollWrap.catRail .catNav span{
  transform:none !important;
  font-size:22px !important;
}
.page-catalog .hscrollWrap.catRail .catNav:active{
  transform:scale(.98) !important;
}

@media (max-width:380px){
  .page-catalog .hscrollWrap.catRail .catbar{ padding-inline:10px !important; }
  .page-catalog .hscrollWrap.catRail .catNavRow{ padding:0 10px 10px !important; }
  .page-catalog .hscrollWrap.catRail .catNav{ width:52px !important; height:38px !important; }
}


/* About: Offerings grid */
.offerGrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.offerBox{border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:12px;background:rgba(255,255,255,.04);}
.offerBox .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.offerTag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-size:12px;white-space:nowrap}
.offerList{margin:0;padding:0;list-style:none;display:grid;gap:8px;}
.offerItem{border-top:1px dashed rgba(255,255,255,.12);padding-top:8px;}
.offerItem:first-child{border-top:none;padding-top:0;}
.offerTitle{font-weight:800;line-height:1.2;}
.offerSub{font-size:13px;opacity:.85;line-height:1.35;margin-top:3px;}
.offerFoot{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:13px;opacity:.92;}
.offerFoot code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:12px;opacity:.9}
@media (max-width:380px){.offerGrid{grid-template-columns:1fr;}}

/* ---------- homepage hero (compact) ---------- */
.homeHeroWrap{margin-top:14px}
.homeHero{padding:16px}
.homeHeroTop{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap}
.homeHeroStatus{display:flex; align-items:center; justify-content:flex-end}
.homeTitle{margin:8px 0 6px}
.homeDesc{margin:0}
.homeTools{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:12px}
@media (max-width: 980px){ .homeTools{grid-template-columns:1fr} }
.homeTool{padding:14px}
.homeToolTitle{font-weight:1000; font-size:15px; letter-spacing:.2px}
.homeMiniSteps{display:grid; gap:8px; margin-top:10px}
.homeStep{display:flex; align-items:flex-start; gap:10px; font-weight:900; font-size:13px; color:var(--ink2)}
.homeStep b{font-weight:1000}

/* ========== Homepage polish (v7) ========== */
.homeHeroWrap{margin-top:18px}
.homeHeroWrap .homeHero{
  position:relative;
  padding:22px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  background:linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
  box-shadow:0 22px 55px rgba(2,8,23,.10);
}
.homeHeroWrap .homeHero:before{
  content:"";
  position:absolute;
  top:-90px;
  right:-120px;
  width:360px;
  height:360px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%, rgba(56,189,248,.35), transparent 60%),
             radial-gradient(circle at 70% 60%, rgba(34,197,94,.22), transparent 55%),
             radial-gradient(circle at 40% 80%, rgba(245,158,11,.18), transparent 60%);
  filter:blur(2px);
  pointer-events:none;
}
.homeHeroWrap .homeHero:after{
  content:"";
  position:absolute;
  bottom:-120px;
  left:-140px;
  width:420px;
  height:420px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%, rgba(59,130,246,.22), transparent 62%),
             radial-gradient(circle at 70% 60%, rgba(236,72,153,.12), transparent 55%),
             radial-gradient(circle at 40% 80%, rgba(250,204,21,.14), transparent 60%);
  filter:blur(2px);
  pointer-events:none;
}

.homeHeroTop{align-items:center; gap:14px}
.homeHeroTop > div:first-child{min-width:min(540px, 100%)}
.homeTitle{margin:10px 0 8px; font-size:clamp(26px, 2.8vw, 40px); line-height:1.15; letter-spacing:.2px}
.homeDesc{margin:0; font-size:15.5px; color:var(--muted)}

.homeTools{grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:16px}
@media (max-width: 980px){ .homeTools{grid-template-columns:1fr} }

.homeTool{
  padding:16px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.84);
  box-shadow:0 18px 38px rgba(2,8,23,.07);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.homeTool:hover{transform:translateY(-1px); background:rgba(255,255,255,.92); box-shadow:0 22px 48px rgba(2,8,23,.10)}
.homeToolTitle{font-size:15.5px}

.homeSearchbar{margin-top:12px}
.homeSearchbar .input{height:44px; border-radius:14px}
.homeSearchbar .btn{height:44px; border-radius:14px; white-space:nowrap}

.homeHeroStatus .pill{padding:7px 12px; font-size:13px; background:rgba(255,255,255,.80)}

.homeHero .row{margin-top:14px !important; justify-content:center}
.homeHero .row .btn{border-radius:999px}
@media (max-width: 520px){ .homeHero .row{justify-content:stretch} .homeHero .row .btn{flex:1 1 auto; text-align:center} }

/* =========================================================
   Mobile sticky stack polish
   - Prevent "gap" showing page text between Topbar and Catalog search toolbar
   ========================================================= */
@media (max-width: 560px){
  /* Topbar pill: slightly more opaque on phones so content under it doesn't show through */
  :is(html.mnav-enabled, body.mnav-enabled) .topbar .container.nav{
    background: linear-gradient(180deg, rgba(248,253,255,.98), rgba(248,253,255,.94)) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
  }

  /* Catalog mobile toolbar: more opaque glass (catalog.html / catalog_fr.html) */
  body.page-catalog .cat-mbarPro{
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,249,255,.95)) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    overflow: hidden;
  }
}

/* =========================================================
   Phone: remove Grid toggle (keep List only)
   ========================================================= */
@media (max-width: 560px){
  /* Desktop switch buttons inside the hero */
  #btnGrid{display:none !important;}
  /* Mobile bubble toggle */
  #mToggleView{display:none !important;}
}

/* Desktop: keep Product Action Sheet mobile-only */
@media (min-width: 561px){
  .ps-overlay{display:none !important;}
}



/* =========================
   Contact page (about_contact) – pro layout, no overlap with QuickDock
   ========================= */
body.page-contact{
  padding-bottom:calc(160px + env(safe-area-inset-bottom));
}
body.page-contact .container{
  max-width:1100px;
}
body.page-contact .card{
  border-radius:22px;
}
body.page-contact .card + .card{ margin-top:14px; }
body.page-contact .card:last-of-type{ margin-bottom:calc(130px + env(safe-area-inset-bottom)); }

body.page-contact .identity-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
@media (min-width: 900px){
  body.page-contact .identity-grid{ grid-template-columns: 1.2fr .8fr; }
}

body.page-contact .contact-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 12px;
}
body.page-contact .contact-form .full{ grid-column:1/-1; }
@media (max-width: 820px){
  body.page-contact .contact-form{ grid-template-columns: 1fr; }
}

body.page-contact .field{
  position:relative;
}
body.page-contact .field input,
body.page-contact .field textarea{
  width:100%;
  box-sizing:border-box;
  border-radius:14px;
  border:1px solid rgba(2,6,23,.10);
  background:rgba(255,255,255,.86);
  padding:12px 12px;
  outline:none;
}
body.page-contact .field textarea{ min-height:170px; resize:vertical; }

body.page-contact .field label{
  position:absolute;
  inset-inline-start:10px;
  top:-10px;
  font-size:12px;
  font-weight:900;
  padding:2px 8px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.65));
  border:1px solid rgba(255,255,255,.55);
  color:rgba(2,6,23,.78);
}

body.page-contact .contact-actions{
  grid-column:1/-1;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:6px;
  flex-wrap:wrap;
}
html[dir="rtl"] body.page-contact .contact-actions{ justify-content:flex-start; }

body.page-contact .btn{
  border-radius:999px;
  padding:10px 14px;
}
body.page-contact .btn.primary{
  box-shadow: 0 10px 24px rgba(2,6,23,.12);
}

body.page-contact .statusbar{
  display:none;
  margin-top:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.55);
  background:linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
}
body.page-contact .statusbar.show{ display:block; }
body.page-contact .statusbar .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
body.page-contact .chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(2,6,23,.06);
  border:1px solid rgba(2,6,23,.08);
  font-weight:900;
  font-size:12px;
}


/* ---------- contact page (pro info + actions) ---------- */
body.page-contact .identityList{display:none;} /* legacy */
.infoGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 720px){ .infoGrid{grid-template-columns:1fr;} }
.infoItem{
  background: rgba(255,255,255,.70);
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  padding:10px 12px;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.infoItem .lbl{font-size:12px; color:var(--muted); font-weight:800; margin-bottom:4px}
.infoItem .val{display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:900; color:var(--ink2)}
.infoItem .val a{color:inherit; text-decoration:none}
.infoItem .val a:hover{ text-decoration:underline }
.copyBtn{
  border:1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.72);
  border-radius:999px;
  padding:6px 10px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.copyBtn:active{transform: translateY(1px)}
.contactActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.contactActions .btn{
  padding:10px 12px;
  border-radius:999px;
}
.contactActions .btn.secondary{
  background: rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.14);
  color: var(--ink2);
}
.formActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
@media (max-width: 720px){
  .formActions{justify-content:stretch;}
  .formActions .btn{flex:1;}
}
.btn.loading{
  opacity:.8;
  pointer-events:none;
  position:relative;
}
.btn.loading::after{
  content:'';
  width:16px;height:16px;
  border:2px solid rgba(255,255,255,.65);
  border-top-color: rgba(15,23,42,.45);
  border-radius:50%;
  display:inline-block;
  margin-inline-start:8px;
  vertical-align:middle;
  animation: spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{
  position:fixed;
  bottom:14px;
  left:14px;
  right:14px;
  z-index:999;
  max-width:560px;
  margin:auto;
  background: rgba(255,255,255,.82);
  border:1px solid rgba(15,23,42,.14);
  backdrop-filter: blur(14px);
  border-radius:16px;
  padding:10px 12px;
  box-shadow: 0 18px 50px rgba(15,23,42,.18);
  display:none;
}
.toast.show{display:block; animation: pop .18s ease-out;}
@keyframes pop{from{transform:translateY(8px); opacity:0} to{transform:translateY(0); opacity:1}}
.toast b{display:block; margin-bottom:2px}

/* =========================
   Stable mode (no flicker)
   =========================
   - Disable SkyFX (cloud/rain/lightning)
   - Disable decorative pulsing/shine/rain animations
*/

/* SkyFX (legacy) */
#skyfx{display:none !important;}
body.fx-thunder .skyfx-lightning{animation:none !important; opacity:0 !important;}
.skyfx-clouds .cloud, .skyfx-rain, .skyfx-rain2{animation:none !important;}

/* Mobile nav decorative FX */
.mnav-rain{display:none !important; animation:none !important;}
.mnav-sheet::before, .mnav-sheet::after{animation:none !important;}
.mnav-card::before, .mnav-card::after{animation:none !important;}

/* Any element that explicitly uses the mnav* keyframes */
*[style*='mnavGrad'], *[style*='mnavPulse'], *[style*='mnavHalo'], *[style*='mnavShine'],
*[style*='mnavBtnShine'], *[style*='mnavBtnPulse'], *[style*='mnavRain']{animation:none !important;}


/* Cart: force single-column layout on PC & mobile (AR/FR) */
.cartStack{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.cartStackBox{width:100%}
.cartTotalsBox .row{width:100%}


/* ---------- Stepper (checkout) ---------- */
.stepper{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0 14px}
.stepItem{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(15,23,42,.10);background:rgba(255,255,255,.55)}
.stepBox{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:1000;color:var(--ink);border:1px solid rgba(15,23,42,.12);
  background:
    radial-gradient(90px 60px at 22% 20%, rgba(255,255,255,.80), rgba(255,255,255,0) 58%),
    linear-gradient(135deg, rgba(56,189,248,.22), rgba(59,130,246,.16), rgba(6,182,212,.14), rgba(255,255,255,.90));
}
.stepLbl{font-size:12px;font-weight:950;color:var(--ink);white-space:nowrap}
.stepItem.done .stepBox{background:linear-gradient(135deg, rgba(34,197,94,.18), rgba(255,255,255,.88)); border-color:rgba(34,197,94,.22)}
.stepItem.active{border-color:rgba(59,130,246,.24); box-shadow:0 10px 22px rgba(2,8,23,.08)}
.stepItem.active .stepBox{background:linear-gradient(135deg, rgba(59,130,246,.24), rgba(255,255,255,.88)); border-color:rgba(59,130,246,.28)}
@media (max-width:520px){
  .stepper{gap:10px}
  .stepItem{flex:1 1 auto; justify-content:center}
  .stepLbl{font-size:11px}
}

/* ---------- Stepper C+ Premium (mobile-friendly, icons + badges) ---------- */
.stepperC{
  --c:36px;
  --line:rgba(148,163,184,.48);
  --done:rgba(34,197,94,.78);
  --active1:rgba(59,130,246,.95);
  --active2:rgba(14,165,233,.86);
  --panel1:rgba(255,255,255,.92);
  --panel2:rgba(248,252,255,.80);
  display:flex;
  align-items:flex-start;
  padding:10px 12px 12px;
  margin:10px 0 14px;
  border-radius:18px;
  background:
    radial-gradient(120% 120% at 10% -10%, rgba(186,230,253,.35), rgba(186,230,253,0) 48%),
    radial-gradient(120% 120% at 100% 0%, rgba(167,243,208,.20), rgba(167,243,208,0) 45%),
    linear-gradient(180deg, var(--panel1), var(--panel2));
  border:1px solid rgba(77,144,255,.17);
  box-shadow:0 10px 24px rgba(2,8,23,.06), inset 0 1px 0 rgba(255,255,255,.65);
}

.stepperC__row{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  width:100%;
  min-width:0;
}

.stepperC__row::before,
.stepperC__row::after{
  content:"";
  position:absolute;
  inset-inline-start:calc(var(--c)/2 + 2px);
  inset-inline-end:calc(var(--c)/2 + 2px);
  top:calc(var(--c)/2 - 1px);
  height:4px;
  border-radius:999px;
  z-index:0;
}
.stepperC__row::before{
  background:linear-gradient(90deg, rgba(148,163,184,.28), rgba(148,163,184,.54), rgba(148,163,184,.28));
}
.stepperC__row::after{
  background:linear-gradient(90deg, rgba(34,197,94,.72), rgba(16,185,129,.72), rgba(45,212,191,.65));
  z-index:1;
  transform:scaleX(var(--p));
  transform-origin:left center;
  box-shadow:0 0 0 1px rgba(16,185,129,.08), 0 0 10px rgba(16,185,129,.15);
}
html[dir="rtl"] .stepperC__row::after{ transform-origin:right center; }

.stepperC .step{
  position:relative;
  z-index:2;
  display:flex;
  flex:1 1 0;
  min-width:0;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:0;
  text-decoration:none;
  color:inherit;
  user-select:none;
  cursor:pointer;
  opacity:.9;
  transition:transform .14s ease, opacity .14s ease;
}
.stepperC a.step:hover{ transform:translateY(-1px); }

.stepperC .circleWrap{
  position:relative;
  width:var(--c);
  height:var(--c);
}
.stepperC .circle{
  width:var(--c); height:var(--c);
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-weight:1000;
  font-size:14px;
  border:2px solid rgba(15,23,42,.16);
  background:
    radial-gradient(80% 80% at 30% 20%, rgba(255,255,255,.95), rgba(255,255,255,.72) 48%, rgba(255,255,255,.5) 100%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,250,252,.78));
  color:rgba(15,23,42,.92);
  box-shadow:0 6px 14px rgba(2,8,23,.07), inset 0 1px 0 rgba(255,255,255,.9);
}
.stepperC .ico{
  position:absolute;
  inset-inline-end:-3px;
  bottom:-3px;
  min-width:16px;
  height:16px;
  padding:0 3px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  line-height:1;
  border:1px solid rgba(15,23,42,.06);
  background:rgba(255,255,255,.95);
  box-shadow:0 4px 10px rgba(2,8,23,.07);
}

.stepperC .text{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  line-height:1.12;
  max-width:128px;
  gap:3px;
}
.stepperC .label{
  font-size:12.8px;
  font-weight:950;
  color:rgba(15,23,42,.84);
  white-space:normal;
}
.stepperC .sub{
  font-size:11px;
  font-weight:800;
  color:rgba(15,23,42,.50);
}
.stepperC .pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  line-height:1;
  border:1px solid rgba(148,163,184,.25);
  background:rgba(255,255,255,.75);
  color:rgba(15,23,42,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

/* states */
.stepperC .step.is-active{ opacity:1; }
.stepperC .step.is-active .circle{
  border-color:transparent;
  background:linear-gradient(135deg, var(--active1), rgba(59,130,246,.86), var(--active2));
  color:#fff;
  box-shadow:0 8px 18px rgba(59,130,246,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
.stepperC .step.is-active .ico{
  background:linear-gradient(135deg, rgba(219,234,254,.98), rgba(255,255,255,.98));
  color:rgba(30,64,175,.95);
  border-color:rgba(59,130,246,.18);
}
.stepperC .step.is-active .label{ color:rgba(15,23,42,.96); }
.stepperC .step.is-active .pill{
  border-color:rgba(59,130,246,.20);
  background:linear-gradient(180deg, rgba(239,246,255,.92), rgba(219,234,254,.82));
  color:rgba(30,64,175,.92);
}

.stepperC .step.is-done{ opacity:1; }
.stepperC .step.is-done .circle{
  border-color:transparent;
  background:linear-gradient(135deg, rgba(34,197,94,.92), rgba(16,185,129,.78));
  color:#fff;
  box-shadow:0 8px 18px rgba(16,185,129,.22);
}
.stepperC .step.is-done .ico{
  background:linear-gradient(180deg, rgba(236,253,245,.98), rgba(255,255,255,.96));
  color:rgba(4,120,87,.95);
  border-color:rgba(16,185,129,.16);
}
.stepperC .step.is-done .pill{
  border-color:rgba(16,185,129,.18);
  background:linear-gradient(180deg, rgba(236,253,245,.90), rgba(209,250,229,.82));
  color:rgba(4,120,87,.92);
}

.stepperC .step.is-disabled{ opacity:.55; cursor:not-allowed; }
.stepperC .step.is-disabled .circle{ box-shadow:none; }
.stepperC .step.is-disabled .ico{ box-shadow:none; }
.stepperC .step.is-disabled .pill{ opacity:.9; }

/* show sub only on active on narrow screens */
@media (max-width:700px){
  .stepperC .step:not(.is-active) .sub{ display:none; }
}

.stepperC--sticky{
  position:sticky;
  top:10px;
  z-index:40;
  backdrop-filter:saturate(120%) blur(2px);
}

/* mobile compact */
@media (max-width:520px){
  .stepperC{ --c:31px; padding:9px 9px 10px; border-radius:16px; margin:8px 0 12px; }
  .stepperC__row{ gap:6px; }
  .stepperC__row::before,
  .stepperC__row::after{
    inset-inline-start:calc(var(--c)/2 + 1px);
    inset-inline-end:calc(var(--c)/2 + 1px);
    height:3px;
  }
  .stepperC .text{ max-width:82px; gap:2px; }
  .stepperC .label{ font-size:11px; line-height:1.05; }
  .stepperC .sub{ font-size:9.5px; }
  .stepperC .pill{ padding:2px 5px; font-size:9px; }
  .stepperC .ico{ min-width:14px; height:14px; font-size:9px; inset-inline-end:-2px; bottom:-2px; }
}

html[dir="rtl"] .stepperC{
  background:
    radial-gradient(120% 120% at 90% -10%, rgba(186,230,253,.35), rgba(186,230,253,0) 48%),
    radial-gradient(120% 120% at 0% 0%, rgba(167,243,208,.20), rgba(167,243,208,0) 45%),
    linear-gradient(180deg, var(--panel1), var(--panel2));
}
/* Checkout: mini total line (no cart details on step 2) */
/* ---------- Terms / CGV (document style, FR/AR isolated) ---------- */
.termsDoc{
  white-space:normal;
  color:var(--ink2);
  font-size:16.5px;
  line-height:1.9;
  font-weight:760;
}
.termsDoc .tdHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
  flex-wrap:wrap;
}
.termsDoc .tdHeadL{min-width:0}
.termsDoc .tdTitle{
  font-weight:1000;
  font-size:23px;
  line-height:1.2;
  letter-spacing:.2px;
}
.termsDoc .tdSub{
  margin-top:4px;
  font-size:13.5px;
  font-weight:800;
  color:var(--muted);
  line-height:1.55;
}
.termsDoc .tdMeta{
  font-size:12.5px;
  font-weight:950;
  color:var(--muted);
  white-space:nowrap;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(15,23,42,.05);
  border:1px solid rgba(15,23,42,.10);
  display:flex;
  align-items:center;
  gap:6px;
}
.termsDoc .tdMeta b{font-weight:1000;color:rgba(15,23,42,.82)}

.termsDoc .tdBox{
  border-radius:18px;
  padding:14px 14px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(15,23,42,.10);
}

.termsDoc .tdSection{margin-top:14px}
.termsDoc .tdSection:first-child{margin-top:0}
.termsDoc .tdSectionTitle{
  font-weight:1000;
  font-size:15px;
  margin:0 0 10px;
  color:var(--ink2);
  display:flex;
  align-items:center;
  gap:10px;
}
.termsDoc .tdSectionTitle::before{
  content:"";
  width:10px;height:10px;
  border-radius:3px;
  background:rgba(59,130,246,.55);
  box-shadow:0 0 0 6px rgba(59,130,246,.10);
  flex:0 0 auto;
}

.termsDoc ul.tdRefs{
  margin:0;
  padding-inline-start:22px;
}
.termsDoc ul.tdRefs li{margin:6px 0}
.termsDoc li b{font-weight:1000}

.termsDoc .tdSteps{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.termsDoc .tdStep{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 12px;
  border-radius:16px;
  background:rgba(15,23,42,.03);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 18px rgba(2,6,23,.05);
}
.termsDoc .tdNum{
  width:30px;
  height:30px;
  min-width:30px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(15,23,42,.14);
  box-shadow:0 8px 16px rgba(2,6,23,.06);
}
.termsDoc .tdText{flex:1;min-width:0}

.termsDoc .tdFooterNote{
  margin-top:14px;
  padding:12px 12px;
  border-radius:16px;
  background:rgba(15,23,42,.03);
  border:1px solid rgba(15,23,42,.10);
  color:var(--ink2);
  font-weight:900;
}

.termsDoc .tdLegal{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed rgba(15,23,42,.14);
  color:var(--muted);
  font-size:13.6px;
  line-height:1.75;
}
.termsDoc .tdLegalTitle{
  font-weight:1000;
  color:var(--ink2);
  font-size:14px;
  margin:0 0 8px;
  display:flex;
  align-items:center;
  gap:10px;
}
.termsDoc .tdLegalTitle::before{
  content:"";
  width:9px;height:9px;
  border-radius:3px;
  background:rgba(59,130,246,.45);
  box-shadow:0 0 0 5px rgba(59,130,246,.09);
  flex:0 0 auto;
}
.termsDoc .tdLegalNote{margin-top:8px;font-weight:850}

/* Modal: nicer reading + scroll */
.apxModalV2 .apxDesc .termsDoc{font-weight:760}
.apxModalV2 .apxDesc .termsDoc .tdBox{background:rgba(255,255,255,.92)}

@media (max-width:520px){
  .termsDoc{font-size:16.2px; line-height:1.95}
  .termsDoc .tdTitle{font-size:20px}
  .termsDoc .tdSub{font-size:12.8px}
  .termsDoc .tdBox{padding:12px 10px;border-radius:16px}
  .termsDoc ul.tdRefs{padding-inline-start:20px}
  .termsDoc .tdMeta{font-size:12px}
  .termsDoc .tdNum{width:28px;height:28px;min-width:28px;border-radius:10px}
  .termsDoc .tdStep{padding:11px 10px;border-radius:14px}
  .termsDoc .tdLegal{font-size:13.2px}
}

@media print{
  .termsDoc .tdMeta{border-color:rgba(0,0,0,.25)}
  .termsDoc .tdBox{background:#fff}
  .termsDoc .tdStep{box-shadow:none}
}

.termsDoc .tdBox{background:#fff}
}



/* ===== ASIGNA checkout/cart/terms flow polish v600 ===== */
.page-flow .container{
  max-width:min(980px, calc(100vw - 32px));
}
.page-terms .container{max-width:min(900px, calc(100vw - 24px));}
.page-flow .card{
  border-radius:18px;
  border-color:rgba(67,151,255,.14);
  box-shadow:0 12px 28px rgba(2,8,23,.06), inset 0 1px 0 rgba(255,255,255,.55);
}
.page-flow .card > .h1{letter-spacing:.1px;}
.page-flow .topbar .topPill,
.page-flow .topbar .btn{
  min-height:36px;
}
.page-flow .small{line-height:1.45;}

/* Stepper visual harmony */
.page-flow [data-stepper="checkout"]{--step-ok:#22c55e; --step-active:#60a5fa;}
.page-flow .stepperC{border-radius:16px; background:linear-gradient(180deg, rgba(248,252,255,.92), rgba(243,250,255,.86)); border:1px solid rgba(67,151,255,.14);}
.page-flow .stepperC__rail{background:rgba(148,163,184,.28); height:3px;}
.page-flow .stepperC__fill{height:3px;}
.page-flow .stepperC__badge{box-shadow:0 8px 16px rgba(2,8,23,.12), inset 0 1px 0 rgba(255,255,255,.9);}
.page-flow .stepperC__title{font-weight:900;}
.page-flow .stepperC__sub{opacity:.78;}

/* Cart page */
.page-cart #cartBox .table thead th:last-child{width:120px;}
.page-cart #cartBox .table td .btn,
.page-cart #cartBox .table td button.btn,
.page-cart #cartBox .table td .stepFlowBtn,
.page-cart #cartBox .table td button{
  border-radius:999px;
}
.page-cart .cartStack{display:flex; justify-content:flex-end;}
.page-cart .cartTotalsBox{
  width:min(420px, 100%);
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,251,255,.9));
  border:1px solid rgba(67,151,255,.12);
}
.page-cart .stepFlowNav[data-step-nav='cart']{align-items:center;}
.page-cart .stepFlowNav[data-step-nav='cart'] .stepFlowBtn{min-width:144px;}

/* Checkout page form */
.page-checkout .form{gap:10px;}
.page-checkout #shipSelectRow .select,
.page-checkout #shipSelectRow .input{flex:1 1 220px; max-width:100% !important;}
.page-checkout #checkoutActionsRow,
.page-terms .terms-next-row{margin-top:4px;}
.page-checkout #checkoutActionsRow .stepFlowBtn,
.page-terms .terms-next-row .stepFlowBtn{min-width:170px;}
.page-checkout #out .badge{
  display:block;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(34,197,94,.18);
  background:linear-gradient(180deg, rgba(236,253,245,.95), rgba(248,255,251,.94));
}
.page-checkout #out .checkoutResultActions{align-items:stretch;}
.page-checkout #out .checkoutResultActions .btn,
.page-checkout #out .checkoutResultActions button.btn{
  min-height:38px;
  font-weight:900;
}

/* Terms page */
.page-terms .terms-simple-card{padding:14px;}
.page-terms .terms-checklist-box,
.page-terms #termsChecklistWrap{
  border-radius:16px;
  border:1px solid rgba(67,151,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,252,255,.9));
}
.page-terms .terms-check-item{
  border-radius:10px;
  border-color:rgba(34,197,94,.18);
  background:rgba(255,255,255,.72);
}
.page-terms .terms-check-item .terms-check-text{font-size:13px; line-height:1.55;}
.page-terms .topbar .container.nav{gap:10px;}
.page-terms .topbar .links{display:none !important;}
.page-terms .topbar .topActions{gap:8px;}
.page-terms .topbar .topPill:not(.iconOnly){padding-inline:12px; font-weight:900;}
body.rtl.page-flow .stepFlowBtn{letter-spacing:0;}

@media (max-width: 900px){
  .page-flow .container{max-width:calc(100vw - 18px);}
  .page-flow .card{border-radius:16px;}
  .page-cart .stepFlowNav[data-step-nav='cart'] .stepFlowBtn{min-width:unset;}
}

@media (max-width: 680px){
  .page-flow .container{max-width:calc(100vw - 12px);}
  .page-flow .topbar .container.nav{padding-inline:10px; gap:8px;}
  .page-flow .topbar .brand .title{font-size:14px;}
  .page-flow .topbar .topActions{gap:6px;}
  .page-flow .topbar .topPill{min-height:34px;}

  .page-cart #cartBox .table td:nth-child(2)::before{content:"Qté";}
  .page-cart #cartBox .table td:nth-child(3)::before{content:"Total";}
  html[lang="ar"] .page-cart #cartBox .table td:nth-child(2)::before{content:"الكمية";}
  html[lang="ar"] .page-cart #cartBox .table td:nth-child(3)::before{content:"المجموع";}

  .page-cart .stepFlowNav[data-step-nav='cart'],
  .page-checkout #checkoutActionsRow,
  .page-terms .terms-next-row{
    display:grid !important;
    grid-template-columns:1fr;
    gap:8px !important;
  }
  .page-cart .stepFlowNav[data-step-nav='cart'] .stepFlowBtn,
  .page-checkout #checkoutActionsRow .stepFlowBtn,
  .page-terms .terms-next-row .stepFlowBtn,
  .page-checkout #out .checkoutResultActions .btn,
  .page-checkout #out .checkoutResultActions button.btn{
    width:100%;
    justify-content:center;
  }
  .page-checkout #out .checkoutResultActions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px !important;
    justify-content:stretch !important;
  }
  .page-checkout #out .small{line-height:1.55;}
  .page-terms .terms-check-item .terms-check-text{font-size:12.5px;}
}


/* ===== v601 flow hierarchy + explicit actions (FR/AR, desktop/mobile) ===== */
.page-flow .stepFlowBtn,
.page-flow .stepFlowNav .stepFlowBtn{
  min-height:42px !important;
  height:auto !important;
  padding:0 14px !important;
  border-radius:12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1.12 !important;
  font-weight:900 !important;
  font-size:13.5px !important;
  white-space:normal;
  box-shadow:0 8px 18px rgba(2,8,23,.08), inset 0 1px 0 rgba(255,255,255,.6);
  border:1px solid rgba(67,151,255,.18) !important;
}
html[lang="ar"] .page-flow .stepFlowBtn,
body.rtl.page-flow .stepFlowBtn{
  min-height:42px !important;
  font-size:13.5px !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
}
.page-flow .stepFlowBtn.stepFlowGhost{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,255,.94)) !important;
  color:rgba(15,23,42,.92) !important;
  border-color:rgba(148,163,184,.28) !important;
  box-shadow:0 6px 14px rgba(2,8,23,.05), inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.page-flow .stepFlowBtn:not(.is-disabled):not([aria-disabled="true"]),
.page-flow .btn:not([disabled]),
.page-flow button:not([disabled]){
  cursor:pointer !important;
}

.page-flow .stepFlowBtn:not(.stepFlowGhost):not(.is-disabled){
  background:linear-gradient(180deg, rgba(239,246,255,.98), rgba(219,234,254,.95)) !important;
  color:rgba(30,64,175,.98) !important;
  border-color:rgba(96,165,250,.34) !important;
  box-shadow:0 10px 18px rgba(59,130,246,.12), inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.page-flow .stepFlowBtn.is-disabled,
.page-flow .stepFlowBtn[aria-disabled="true"]{
  opacity:.62 !important;
  cursor:not-allowed !important;
}

/* stronger visual hierarchy in step actions */
.page-checkout #checkoutActionsRow,
.page-terms .terms-next-row{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:10px !important;
  align-items:stretch;
}
.page-checkout #checkoutActionsRow .stepFlowBtn,
.page-terms .terms-next-row .stepFlowBtn{
  width:100%;
  min-width:0 !important;
}
.page-cart .stepFlowNav[data-step-nav='cart']{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(108px, auto) minmax(0,1fr);
  gap:10px !important;
  align-items:stretch;
}
.page-cart .stepFlowNav[data-step-nav='cart'] .stepFlowBtn{
  width:100%;
  min-width:0 !important;
}
.page-cart .stepFlowNav[data-step-nav='cart'] .stepFlowBtn:last-child{
  font-weight:950 !important;
}

/* stepper: active step must dominate visually (even after previous validations) */
.page-flow .stepperC .step.is-active{ transform:translateY(-1px); }
.page-flow .stepperC .step.is-active .circle{
  box-shadow:0 10px 20px rgba(59,130,246,.24), 0 0 0 4px rgba(59,130,246,.10) !important;
}
.page-flow .stepperC .step.is-active .label{ font-weight:1000; }
.page-flow .stepperC .step.is-active .pill{
  font-size:10px;
  font-weight:1000;
}
.page-flow .stepperC .step.is-done:not(.is-active) .label{ color:rgba(15,23,42,.72); }

/* mobile compact stepper */
@media (max-width: 520px){
  .page-flow .stepperC{ --c:28px; padding:7px 7px 8px; border-radius:14px; margin:6px 0 10px; }
  .page-flow .stepperC__row{ gap:4px; }
  .page-flow .stepperC__row::before,
  .page-flow .stepperC__row::after{ height:2.5px; top:calc(var(--c)/2 - 1px); }
  .page-flow .stepperC .circle{ font-size:12px; border-width:2px; }
  .page-flow .stepperC .ico{ min-width:13px; height:13px; font-size:8px; inset-inline-end:-2px; bottom:-2px; }
  .page-flow .stepperC .text{ max-width:68px; gap:1px; }
  .page-flow .stepperC .label{ font-size:10.3px; line-height:1.02; }
  .page-flow .stepperC .sub{ display:none !important; }
  .page-flow .stepperC .pill{ display:none; }
  .page-flow .stepperC .step.is-active .pill{ display:inline-flex; padding:2px 4px; font-size:8.6px; }

  .page-flow .stepFlowBtn,
  .page-flow .stepFlowNav .stepFlowBtn{ min-height:40px !important; padding:0 12px !important; font-size:13px !important; border-radius:11px !important; }
}


/* v6 checkout/terms polish */
body.rtl.page-flow .topActions .topPill,
body.rtl.page-flow .topActions .mnav-topbtn{direction:rtl; unicode-bidi:plaintext;}
body.rtl.page-flow .topActions .topPill.iconOnly{direction:ltr;}
.page-terms .terms-actions.terms-actions--single{display:flex; align-items:center; justify-content:flex-end;}
body.rtl.page-terms .terms-actions.terms-actions--single{justify-content:flex-start;}
.page-terms .terms-actions.terms-actions--single .stepFlowBtn{min-width:240px;}
@media (max-width:720px){
  .page-terms .terms-actions.terms-actions--single .stepFlowBtn{min-width:0; width:100%;}
}


/* v11 interactive cursor polish */
a[href],
button:not(:disabled),
.btn:not([disabled]),
.topPill,
.stepFlowBtn:not(.is-disabled):not([aria-disabled="true"]),
[role="button"]{cursor:pointer;}
button:disabled,
.btn[disabled],
.stepFlowBtn.is-disabled,
.stepFlowBtn[aria-disabled="true"]{cursor:not-allowed;}