/* ── Self-hosted Cairo font ──────────────────────────────── */
    @font-face {
      font-family: 'Cairo';
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
      src: url('/assets/fonts/cairo-arabic.woff2') format('woff2');
      unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
    }
    @font-face {
      font-family: 'Cairo';
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
      src: url('/assets/fonts/cairo-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Cairo';
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
      src: url('/assets/fonts/cairo-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    :root {
      --font:    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
      --font-ar: "SF Arabic", "Cairo", "Geeza Pro", "Arial Unicode MS", sans-serif;
      --white:  #ffffff;
      --g50:    #f9f9f9;
      --g100:   #f2f2f2;
      --g200:   #e2e2e2;
      --g300:   #c8c8c8;
      --g400:   #a0a0a0;
      --g500:   #787878;
      --g600:   #525252;
      --g800:   #262626;
      --g900:   #141414;
      --accent:  #0a84ff;
      --accent2: #5e5ce6;
      --green:   #2dbd55;
      --orange:  #e08c00;
      --red:     #e0392e;
      --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 36px;
      --spring: cubic-bezier(0.34,1.56,0.64,1);
      --ease:   cubic-bezier(0.25,0.46,0.45,0.94);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; overflow-x: clip; }
    body { font-family: var(--font); background: #fff; color: var(--g900); -webkit-font-smoothing: antialiased; overflow-x: clip; }
    img  { display: block; max-width: 100%; }
    a    { text-decoration: none; color: inherit; }
    ul   { list-style: none; }
    button, input, textarea, select { font-family: inherit; border: none; background: none; cursor: pointer; }

    /* ── NAVBAR ── */
    .navbar-wrap {
      position: sticky; top: 0; z-index: 500;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--g100);
    }
    .navbar {
      max-width: 1200px; margin: 0 auto; padding: 12px 24px;
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    .nav-logo { font-size: 20px; font-weight: 700; letter-spacing: -.5px; display: flex; align-items: center; }
    .nav-logo span { color: var(--accent); }
    .nav-logo-img { height: 52px !important; width: auto !important; display: block; max-width: none !important; }
    .nav-links { display: flex; gap: 2px; }
    .nav-links a { font-size: 14px; font-weight: 500; color: var(--g600); padding: 7px 13px; border-radius: 100px; transition: background .15s; }
    .nav-links a:hover { background: var(--g100); color: var(--g900); }
    .nav-right { display: flex; gap: 8px; align-items: center; }
    .nav-icon-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--g50); border: 1px solid var(--g200); border-radius: var(--r-sm); transition: all .2s; color: var(--g600); }
    .nav-icon-btn:hover { background: var(--g100); }
    .cart-rel { position: relative; }
    .cart-dot { position: absolute; top: -3px; right: -3px; width: 15px; height: 15px; background: var(--accent); color: #fff; font-size: 8px; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid #fff; }
    .ham { display: none; flex-direction: column; gap: 5px; width: 36px; height: 36px; align-items: center; justify-content: center; background: var(--g50); border: 1px solid var(--g200); border-radius: var(--r-sm); }
    .ham span { display: block; width: 18px; height: 2px; background: var(--g600); border-radius: 2px; }

    /* ── BUTTONS ── */
    .btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; border-radius: 100px; font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .25s var(--spring); }
    .btn:hover  { transform: translateY(-2px); }
    .btn:active { transform: translateY(0); }
    .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 16px rgba(10,132,255,.28); }
    .btn-primary:hover { box-shadow: 0 8px 24px rgba(10,132,255,.38); }
    .btn-dark    { background: var(--g900); color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.22); }
    .btn-dark:hover { box-shadow: 0 8px 24px rgba(0,0,0,.32); }
    .btn-outline { background: transparent; color: var(--g600); border: 1.5px solid var(--g200); }
    .btn-outline:hover { border-color: var(--g300); color: var(--g900); }
    .btn-white { background: #fff; color: var(--g900); border: 1.5px solid var(--g200); }
    .btn-white:hover { background: var(--g50); border-color: var(--g300); }
    .btn-lg   { padding: 14px 32px; font-size: 16px; }
    .btn-full { width: 100%; justify-content: center; }
    .cta-row  { display: flex; gap: 10px; align-items: stretch; }
    .qty-ctrl { display: flex; align-items: center; border: 1.5px solid var(--g200); border-radius: 100px; overflow: hidden; flex-shrink: 0; }
    .qty-btn  { background: none; border: none; cursor: pointer; padding: 0 14px; font-size: 22px; font-weight: 400; color: var(--g900); display: flex; align-items: center; justify-content: center; transition: background .2s; }
    .qty-btn:hover { background: var(--g100); }
    .qty-num  { min-width: 30px; text-align: center; font-size: 15px; font-weight: 600; color: var(--g900); }

    /* ── BREADCRUMB ── */
    .breadcrumb { display: none; }
    .breadcrumb a, .breadcrumb span { font-size: 13px; color: var(--g400); transition: color .2s; }
    .breadcrumb a:hover { color: var(--accent); }
    .breadcrumb .sep { color: var(--g300); }
    .breadcrumb .cur { color: var(--g700); font-weight: 500; }

    /* ════════════════════════════════════
       PRODUCT HERO
    ════════════════════════════════════ */
    .product-hero { max-width: 1200px; margin: 24px auto 0; padding: 0 24px; display: grid; grid-template-columns: 1fr 440px; gap: 28px; align-items: start; }

    /* GALLERY */
    .gallery { border-radius: var(--r-xl); overflow: hidden; position: sticky; top: 72px; border: 1px solid var(--g100); background: #ffffff; min-width: 0; }
    .gallery-main { background: #ffffff; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 0; }
    #mainProductImg { width: 100%; height: 100%; object-fit: cover; transition: opacity .28s var(--ease), transform .32s var(--ease); }
    .gallery-main::after { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg,rgba(255,255,255,.30) 0%,transparent 55%); pointer-events: none; }
    .gallery-thumbs { display: flex; gap: 8px; padding: 12px 16px; background: #fff; justify-content: flex-start; }
    .thumb { width: 72px; flex-shrink: 0; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; cursor: pointer; border: 2px solid transparent; background: var(--g50); transition: all .2s; }
    .thumb img { width: 100%; height: 100%; object-fit: cover; }
    .thumb:hover  { border-color: var(--g300); }
    .thumb.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(10,132,255,.15); }

    /* BUY PANEL */
    .buy-panel { border-radius: var(--r-xl); padding: 28px; display: flex; flex-direction: column; gap: 20px; border: 1px solid var(--g100); background: #fff; min-width: 0; }
    .product-brand   { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #0064d1; margin-bottom: 4px; }
    .product-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
    .product-name    { font-size: 26px; font-weight: 700; letter-spacing: -.8px; line-height: 1.12; color: var(--g900); }
    .product-name-ar { font-family: var(--font-ar); font-size: 22px; font-weight: 700; color: var(--g900); direction: rtl; line-height: 1.2; }
    .product-tagline      { font-size: 14px; color: var(--g600); margin-top: 6px; line-height: 1.6; }
    .product-tagline-ar   { font-family: var(--font-ar); font-size: 12px; color: var(--g400); direction: rtl; text-align: right; margin-top: 2px; }
    .product-short-desc   { font-size: 13px; color: var(--g500); line-height: 1.7; margin-top: 10px; }
    .product-short-desc-ar{ font-family: var(--font-ar); font-size: 12px; color: var(--g400); direction: rtl; text-align: right; line-height: 1.8; margin-top: 4px; }
    .stock-status-badge { position: absolute; top: 14px; left: 14px; z-index: 10; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 20px; font-size: 11.5px; font-weight: 700; letter-spacing: .2px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
    .stock-in_stock    { background: rgba(220,252,231,.82); color: #166534; }
    .stock-out_of_stock{ background: rgba(254,226,226,.82); color: #b91c1c; }
    .stock-restocking  { background: rgba(255,237,213,.82); color: #9a3412; }
    .stock-on_order    { background: rgba(237,233,254,.82); color: #6d28d9; }
    .rating-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .stars span { font-size: 13px; color: #f5a623; }
    .rating-num { font-size: 14px; font-weight: 600; color: var(--g800); }
    .rating-cnt { font-size: 13px; color: var(--g400); }
    .panel-div { height: 1px; background: var(--g100); }
    .opt-label { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--g600); margin-bottom: 10px; }
    .opt-label span { font-weight: 700; color: var(--g700); font-size: 13px; letter-spacing: 0; text-transform: none; }

    /* Colour swatches */
    .c-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
    .c-swatch { width: 54px; height: 54px; border-radius: 10px; overflow: hidden; cursor: pointer; border: 2.5px solid transparent; transition: all .22s var(--spring); box-shadow: 0 2px 8px rgba(0,0,0,.10); }
    .c-swatch img { width: 100%; height: 100%; object-fit: cover; }
    .c-swatch:hover:not(.active) { transform: scale(1.06); }
    .c-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,132,255,.18); transform: scale(1.06); }

    /* Storage chips */
    .s-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .s-chip { padding: 8px 16px; text-align: center; border-radius: var(--r-sm); border: 1.5px solid var(--g200); background: var(--g50); font-size: 13px; font-weight: 600; color: var(--g600); cursor: pointer; transition: all .2s; }
    .s-chip:hover  { border-color: var(--g300); color: var(--g900); background: var(--g100); }
    .s-chip.active { border-color: var(--accent); background: rgba(10,132,255,.06); color: var(--accent); box-shadow: 0 0 0 3px rgba(10,132,255,.10); }
    .chip-sub { font-size: 11px; font-weight: 700; color: var(--g700); display: block; margin-top: 2px; }
    .chip-oos .chip-sub { color: #b91c1c; font-weight: 700; }

    /* Price */
    .price-block { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
    .price-main  { font-size: 36px; font-weight: 800; letter-spacing: -1px; color: var(--g900); display: inline-flex; align-items: baseline; gap: 5px; }
    .ttc-tag     { font-size: 11px; font-weight: 700; color: var(--g600); letter-spacing: .6px; text-transform: uppercase; line-height: 1; }
    .price-old   { font-size: 16px; color: var(--g300); text-decoration: line-through; font-weight: 400; }
    .price-save  { font-size: 12px; font-weight: 600; background: rgba(45,189,85,.10); color: var(--green); padding: 3px 9px; border-radius: 100px; }

    /* Stock */
    .stock-row  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
    .stock-left { display: flex; align-items: center; gap: 7px; }
    .stock-dot  { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(45,189,85,.18); animation: pulse 2s ease-in-out infinite; }
    @keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(45,189,85,.18); } 50% { box-shadow: 0 0 0 6px rgba(45,189,85,.06); } }
    .stock-text { font-size: 13px; color: var(--green); font-weight: 600; }
    .stock-ar   { font-family: var(--font-ar); font-size: 12px; color: var(--green); direction: rtl; }

    /* ── GUARANTEE STICKER ── */
    .guarantee-sticker {
      position: absolute; top: 18px; right: 18px;
      width: 82px; height: 82px; border-radius: 50%;
      background: rgba(255,255,255,0.78);
      backdrop-filter: blur(12px) saturate(200%);
      -webkit-backdrop-filter: blur(12px) saturate(200%);
      border: 1.5px solid rgba(255,255,255,0.82);
      box-shadow:
        0 0 0 1.5px rgba(10,132,255,0.14),
        0 0 24px rgba(10,132,255,0.22),
        0 4px 14px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,1);
      display: flex; align-items: center; justify-content: center; z-index: 10;
    }
    .guarantee-sticker .gs-ring {
      position: absolute; inset: 0; width: 100%; height: 100%;
      animation: sticker-spin 10s linear infinite; overflow: visible;
    }
    @keyframes sticker-spin { to { transform: rotate(360deg); } }
    .guarantee-sticker .gs-inner {
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 3px; z-index: 2; position: relative;
    }
    .guarantee-sticker .gs-logo { height: 15px; width: auto; display: block; }
    .guarantee-sticker .gs-years {
      font-size: 9px; font-weight: 800; color: #0a84ff;
      letter-spacing: .5px; line-height: 1;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    }

    /* ── TRUST BAR (dark teal) ── */
    .trust-bar * { box-sizing: border-box; }
    .tb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .tb-item { background: #fff; border: 1px solid #ececf0; border-radius: 12px; padding: 13px 14px; display: flex; align-items: center; color: var(--g900); min-height: 64px; gap: 11px; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease; text-decoration: none; }
    .tb-item:hover { background: rgba(255,255,255,.55); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-color: rgba(255,255,255,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 28px rgba(20,30,60,.07); transform: translateY(-1px); }
    .tb-icon-wrap { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #f4f5f8; border-radius: 9px; color: var(--g700); transition: background .3s, color .3s; }
    .tb-item:hover .tb-icon-wrap { background: rgba(10,132,255,.10); color: var(--accent); }
    .tb-text-wrap { display: flex; flex-direction: column; gap: 1px; }
    .tb-fr { font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--g900); }
    .tb-ar { font-family: var(--font-ar); font-size: 10px; font-weight: 500; color: var(--g400); direction: rtl; margin-top: 1px; }
    .tb-bottom { grid-column: 1 / -1; }

    /* WhatsApp call-to-action — minimalist + animated icon */
    .tb-wa { position: relative; background: #fff; border: 1px solid #ececf0; border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; color: var(--g900); gap: 12px; overflow: hidden; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease; text-decoration: none; }
    .tb-wa::after { content:''; position:absolute; inset:0; background: linear-gradient(120deg, transparent 0%, rgba(43,194,14,.08) 50%, transparent 100%); transform: translateX(-100%); animation: tb-wa-shine 3.5s ease-in-out infinite; pointer-events: none; }
    .tb-wa:hover { background: rgba(255,255,255,.55); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-color: rgba(255,255,255,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 28px rgba(43,194,14,.10); transform: translateY(-1px); }
    .tb-wa-icon { position: relative; width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #2bc20e; border-radius: 50%; box-shadow: 0 0 0 0 rgba(43,194,14,.55); animation: tb-wa-pulse 1.8s ease-out infinite; }
    .tb-wa-icon::before { content:''; position:absolute; inset:-3px; border-radius:50%; border:2px solid #2bc20e; opacity:.6; animation: tb-wa-ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
    .tb-wa-texts { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
    .tb-wa-fr  { font-size: 12px; font-weight: 700; color: var(--g900); }
    .tb-wa-ar  { font-family: var(--font-ar); font-size: 10px; color: var(--g400); direction: rtl; }
    .tb-wa-sub { font-size: 11px; font-weight: 600; color: #2bc20e; }

    @keyframes tb-wa-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(43,194,14,.55); }
      70%  { box-shadow: 0 0 0 10px rgba(43,194,14,0); }
      100% { box-shadow: 0 0 0 0 rgba(43,194,14,0); }
    }
    @keyframes tb-wa-ping {
      0%   { transform: scale(1);   opacity: .6; }
      80%  { transform: scale(1.6); opacity: 0;   }
      100% { transform: scale(1.6); opacity: 0;   }
    }
    @keyframes tb-wa-shine {
      0%, 100% { transform: translateX(-100%); }
      60%      { transform: translateX(100%);  }
    }
    @media (prefers-reduced-motion: reduce) {
      .tb-wa-icon, .tb-wa-icon::before, .tb-wa::after { animation: none; }
    }

    /* CTAs */
    .cta-group { display: flex; flex-direction: column; gap: 10px; }

    /* Badges */
    .badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 100px; font-size: 11px; font-weight: 600; }
    .bdg-bl { background: rgba(10,132,255,.08);  color: var(--accent); }
    .bdg-gr { background: rgba(45,189,85,.08);   color: var(--green); }

    /* ════════════════════════════════════
       STICKY CARD  — 3 segments
    ════════════════════════════════════ */
    /* ══ Sticky bar — floating card on all sizes ══ */
    .sticky-bar {
      position: fixed;
      bottom: 12px; left: 16px; right: 16px;
      z-index: 400;
      background: #fff;
      border-radius: 20px;
      border: 1px solid rgba(0,0,0,.09);
      box-shadow: 0 8px 32px rgba(0,0,0,.16);
      transform: translateY(calc(100% + 20px));
      transition: transform .42s var(--ease);
      overflow: hidden;
    }
    .sticky-bar.visible { transform: translateY(0); }

    .sb-title-desk {
      font-size: 15px; font-weight: 700; color: var(--g900);
      letter-spacing: -.3px; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
      margin-bottom: 3px;
    }

    /* ══ Middle: price left | selectors right ══ */
    .sb-mid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-bottom: 1px solid var(--g100);
    }
    .sb-mid.sb-simple { grid-template-columns: 1fr; }
    .sb-mid.sb-simple .sb-sel-col { display: none; }
    .sb-mid.sb-simple .sb-price-col { border-right: none; align-items: center; text-align: center; }
    .sb-price-col {
      padding: 12px 16px;
      display: flex; flex-direction: column; gap: 5px;
      justify-content: center;
      border-right: 1px solid var(--g100);
      min-width: 0;
    }
    .sb-big-price {
      font-size: 28px; font-weight: 800; color: var(--g900);
      letter-spacing: -1px; line-height: 1;
      display: flex; align-items: baseline; gap: 4px;
    }
    .sb-old-price {
      font-size: 12px; font-weight: 500; color: var(--g400);
      text-decoration: line-through;
    }
    .sb-sel-col {
      padding: 10px 14px;
      display: flex; flex-direction: column; gap: 8px;
      justify-content: center;
      min-width: 0;
    }

    /* ══ Laptop card (≥1024px) ══ */
    @media (min-width: 1024px) {
      .sticky-bar {
        left: 50%; right: auto;
        bottom: 16px;
        width: 760px;
        transform: translateX(-50%) translateY(calc(100% + 24px));
        border-radius: 18px;
      }
      .sticky-bar.visible { transform: translateX(-50%) translateY(0); }
      .sb-title-desk { font-size: 13px; margin-bottom: 2px; }
      .sb-price-col { padding: 8px 14px; gap: 2px; }
      .sb-sel-col   { padding: 6px 12px; gap: 5px; }
      .sb-big-price { font-size: 20px; }
      .sb-old-price { font-size: 11px; }
      .sb-foot      { padding: 8px 14px 10px; gap: 6px; }
      .sb-cta       { padding: 8px 14px; border-radius: var(--r-sm); }
      .sb-cta-fr    { font-size: 12px; }
      .sb-cta-ar    { font-size: 10px; }
      .sb-trust-row { gap: 14px; }
      .sb-trust-item { font-size: 10px; }
      .sb-swatch    { width: 24px; height: 24px; }
      .sb-select    { font-size: 11px; padding: 5px 22px 5px 8px; }
      .sb-sel-label { font-size: 8px; }
    }
    .sb-sel-group { display: flex; flex-direction: column; gap: 4px; }
    .sb-sel-label { font-size: 9px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--g400); }
    .sb-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
    .sb-swatch { width: 30px; height: 30px; border-radius: 7px; border: 2px solid var(--g200); padding: 0; background: var(--g50); overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s; flex-shrink: 0; }
    .sb-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .sb-swatch:hover { border-color: var(--g400); }
    .sb-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(10,132,255,.2); }
    .sb-select {
      appearance: none; -webkit-appearance: none;
      padding: 7px 28px 7px 10px; width: 100%; max-width: 100%; min-width: 0;
      border: 1.5px solid var(--g200); border-radius: var(--r-sm);
      background: var(--g50); color: var(--g900);
      font-family: var(--font); font-size: 12px; font-weight: 600;
      cursor: pointer; transition: all .2s;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 8px center;
    }
    .sb-select:hover { border-color: var(--g300); background-color: var(--g100); }
    .sb-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,132,255,.12); }

    /* ══ Footer: CTA + trust row ══ */
    .sb-foot {
      padding: 12px 16px 14px;
      display: flex; flex-direction: column; gap: 10px;
    }
    .sb-cta {
      width: 100%; justify-content: center;
      padding: 13px 16px; font-size: 14px;
      border-radius: var(--r-md); line-height: 1;
      display: flex; flex-direction: column; align-items: center; gap: 2px;
    }
    .sb-cta-fr { font-size: 14px; font-weight: 700; }
    .sb-cta-ar { font-family: var(--font-ar); font-size: 11px; opacity: .82; }
    .sb-trust-row {
      display: flex; align-items: center; justify-content: center; gap: 20px;
    }
    .sb-trust-item {
      display: flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: 600; white-space: nowrap;
    }
    .sb-trust-item.green { color: var(--accent); }
    .sb-trust-item.teal  { color: #064e4c; }

    /* ════════════════════════════════════
       SECTIONS
    ════════════════════════════════════ */
    .section { max-width: 1200px; margin: 56px auto 0; padding: 0 24px; }
    .s-eyebrow  { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
    .s-title    { font-size: 34px; font-weight: 700; letter-spacing: -.8px; color: var(--g900); line-height: 1.15; }
    .s-title-ar { font-family: var(--font-ar); font-size: 20px; font-weight: 700; color: var(--g400); direction: rtl; text-align: right; margin-top: 4px; }
    .s-sub    { font-size: 16px; color: var(--g500); line-height: 1.7; max-width: 560px; margin-top: 10px; }
    .s-sub-ar { font-family: var(--font-ar); font-size: 13px; color: var(--g400); direction: rtl; text-align: right; line-height: 1.8; margin-top: 3px; }

    /* FEATURES */
    .features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 32px; }
    .f-card { border-radius: var(--r-lg); padding: 26px; background: #fff; border: 1px solid var(--g100); transition: all .3s var(--spring); }
    .f-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.07); border-color: var(--g200); }
    .f-card-wide { grid-column: span 2; }
    .f-card-wide .f-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: center; }
    .f-visual { aspect-ratio: 16/9; border-radius: var(--r-md); background: var(--g50); border: 1px solid var(--g100); display: flex; align-items: center; justify-content: center; }
    .f-icon-wrap { width: 46px; height: 46px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
    .fi-bl { background: rgba(10,132,255,.08); color: var(--accent); }
    .fi-pu { background: rgba(94,92,230,.08); color: var(--accent2); }
    .fi-gr { background: rgba(45,189,85,.08); color: var(--green); }
    .fi-or { background: rgba(255,159,10,.08); color: var(--orange); }
    .fi-te { background: rgba(90,200,250,.10); color: #32ade6; }
    .fi-re { background: rgba(224,57,46,.08); color: var(--red); }
    .f-title    { font-size: 16px; font-weight: 700; color: var(--g900); margin-bottom: 3px; }
    .f-title-ar { font-family: var(--font-ar); font-size: 13px; font-weight: 700; color: var(--g400); direction: rtl; text-align: right; margin-bottom: 8px; }
    .f-desc     { font-size: 13px; color: var(--g600); line-height: 1.7; }
    .f-desc-ar  { font-family: var(--font-ar); font-size: 12px; color: var(--g400); direction: rtl; text-align: right; line-height: 1.8; margin-top: 4px; }
    .f-link     { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
    .f-link:hover { border-bottom-color: var(--accent); }

    /* SPECS */
    .specs-grid { columns: 2; column-gap: 14px; margin-top: 28px; }
    .spec-card   { break-inside: avoid; display: block; position: relative; border-radius: var(--r-lg); padding: 24px 26px 20px; background: #fff; border: 1px solid #ececf0; margin-bottom: 14px; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
    .spec-card:hover { background: rgba(255,255,255,.55); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-color: rgba(255,255,255,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 32px rgba(20,30,60,.08); transform: translateY(-1px); }
    .spec-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f3; }
    .spec-gt    { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--g700); }
    .spec-gt-ar { font-family: var(--font-ar); font-size: 11px; font-weight: 600; color: var(--g400); direction: rtl; }
    .spec-row   { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #f4f4f7; gap: 12px; }
    .spec-row:last-child { border-bottom: none; padding-bottom: 0; }
    .spec-key       { font-size: 13px; color: var(--g500); font-weight: 500; flex-shrink: 0; }
    .spec-val       { font-size: 13px; color: var(--g900); font-weight: 600; text-align: right; }
    .spec-val-link  { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); text-decoration: none; font-weight: 700; transition: opacity .2s; }
    .spec-val-link:hover { opacity: .75; }
    .spec-unit-tag  { font-size: 13px; font-weight: 600; color: var(--g900); }

    /* ════════════════════════════════════
       REVIEWS + FORM
    ════════════════════════════════════ */
    .rev-header { display: grid; grid-template-columns: 200px 1fr; gap: 20px; margin-top: 28px; }
    .rev-score  { border-radius: var(--r-lg); padding: 24px; background: var(--g50); border: 1px solid var(--g100); text-align: center; }
    .rev-big    { font-size: 64px; font-weight: 800; letter-spacing: -2px; line-height: 1; color: var(--g900); }
    .rev-stars  { font-size: 18px; margin: 6px 0 3px; color: #f5a623; }
    .rev-total  { font-size: 12px; color: var(--g400); }
    .rev-total-ar { font-family: var(--font-ar); font-size: 11px; color: var(--g300); direction: rtl; margin-top: 2px; }
    .rev-bars-card { border-radius: var(--r-lg); padding: 24px 28px; background: var(--g50); border: 1px solid var(--g100); display: flex; align-items: center; }
    .rev-bars { display: flex; flex-direction: column; gap: 8px; width: 100%; }
    .bar-row  { display: flex; align-items: center; gap: 8px; }
    .bar-lbl  { font-size: 12px; color: var(--g500); width: 24px; text-align: right; flex-shrink: 0; }
    .bar-track { flex: 1; height: 5px; border-radius: 100px; background: var(--g200); overflow: hidden; }
    .bar-fill  { height: 100%; border-radius: 100px; background: linear-gradient(90deg,var(--accent),var(--accent2)); }
    .bar-cnt   { font-size: 11px; color: var(--g400); width: 24px; flex-shrink: 0; }

    .rev-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 20px; }
    .rev-card { border-radius: var(--r-lg); padding: 20px; background: #fff; border: 1px solid var(--g100); transition: all .28s var(--spring); }
    .rev-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
    .rev-top  { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .rev-av   { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; background: var(--g50); border: 1px solid var(--g200); overflow: hidden; }
    .rev-av.is-emoji { font-size: 22px; background: var(--g100); }
    .rev-av-letter { font-size: 15px; font-weight: 700; color: var(--g600); }
    .rev-name { font-size: 13px; font-weight: 700; color: var(--g800); }
    .rev-date { font-size: 11px; color: var(--g400); }
    .rev-strs { font-size: 12px; color: #f5a623; margin-left: auto; }
    .rev-title { font-size: 14px; font-weight: 700; color: var(--g900); margin-bottom: 5px; }
    .rev-body  { font-size: 13px; color: var(--g600); line-height: 1.7; }

    /* ── REVIEW FORM ── */
    .rev-form-wrap { margin-top: 32px; border-radius: var(--r-xl); border: 1.5px solid var(--g200); background: #fff; overflow: hidden; }

    .rev-form-header { padding: 24px 28px 20px; border-bottom: 1px solid var(--g100); }
    .rev-form-title    { font-size: 20px; font-weight: 700; color: var(--g900); letter-spacing: -.3px; }
    .rev-form-title-ar { font-family: var(--font-ar); font-size: 14px; color: var(--g400); direction: rtl; margin-top: 3px; }

    .rev-form-body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 20px; }

    /* Avatar picker */
    .form-block { display: flex; flex-direction: column; gap: 8px; }
    .form-lbl    { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--g400); }
    .form-lbl-ar { font-family: var(--font-ar); font-size: 11px; color: var(--g300); direction: rtl; }

    .avatar-picker { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .av-btn {
      width: 44px; height: 44px; border-radius: 50%;
      background: var(--g50); border: 2px solid var(--g200);
      font-size: 22px; display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all .2s; flex-shrink: 0;
    }
    .av-btn:hover  { border-color: var(--g300); background: var(--g100); transform: scale(1.1); }
    .av-btn.active { border-color: var(--accent); background: rgba(10,132,255,.06); box-shadow: 0 0 0 3px rgba(10,132,255,.12); transform: scale(1.12); }

    .av-preview {
      width: 44px; height: 44px; border-radius: 50%;
      background: var(--g100); border: 2px solid var(--g200);
      display: flex; align-items: center; justify-content: center;
      font-size: 24px; flex-shrink: 0; transition: all .2s;
    }

    /* Star picker */
    .star-picker { display: flex; gap: 4px; }
    .sp-star { font-size: 28px; color: var(--g200); cursor: pointer; transition: color .15s, transform .15s; line-height: 1; }
    .sp-star:hover, .sp-star.active { color: #f5a623; transform: scale(1.15); }

    /* Form row */
    .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

    /* Inputs */
    .form-input, .form-textarea {
      width: 100%; padding: 11px 14px;
      background: var(--g50); border: 1.5px solid var(--g200);
      border-radius: var(--r-sm); font-family: var(--font);
      font-size: 14px; color: var(--g900); outline: none; transition: all .2s;
    }
    .form-input:focus, .form-textarea:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(10,132,255,.10); }
    .form-input::placeholder, .form-textarea::placeholder { color: var(--g300); }
    .form-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

    .rev-submit { align-self: flex-start; }

    /* RELATED */
    .related-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 28px; }
    .rel-card { border-radius: var(--r-lg); padding: 18px; cursor: pointer; background: #fff; border: 1px solid var(--g100); transition: all .3s var(--spring); }
    .rel-card:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(0,0,0,.08); border-color: var(--g200); }
    .rel-img {
      aspect-ratio: 1; border-radius: var(--r-md); background: var(--g50); border: 1px solid var(--g100);
      display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
    }
    .rel-img svg { color: var(--g300); }
    .rel-cat    { font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--g400); margin-bottom: 3px; }
    .rel-name   { font-size: 14px; font-weight: 700; color: var(--g900); margin-bottom: 3px; }
    .rel-name-ar { font-family: var(--font-ar); font-size: 11px; color: var(--g400); direction: rtl; margin-bottom: 6px; }
    .rel-price  { font-size: 15px; font-weight: 700; color: var(--accent); }
    .rel-old    { font-size: 12px; color: var(--g400); text-decoration: line-through; margin-left: 5px; }

    /* FOOTER */
    .footer-wrap { background: #f4f5f7; margin-top: 0; border-top: 1px solid #e8e8e8; }
    .footer { max-width: 1200px; margin: 0 auto; padding: 44px 32px 0; }
    .footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 24px; border-bottom: 1px solid #e2e2e2; align-items: start; }
    .footer-logo-img { height: 72px !important; width: auto !important; max-width: none !important; display: block; }
    .footer-desc    { font-size: 13px; line-height: 1.8; color: var(--g600); max-width: 240px; }
    .footer-desc-ar { font-family: var(--font-ar); font-size: 12px; color: var(--g600); direction: rtl; line-height: 1.8; margin-top: 6px; }
    .footer-socials { display: flex; gap: 8px; margin-top: 20px; }
    .footer-social  { width: 34px; height: 34px; background: #e8e8e8; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--g500); transition: all .2s; }
    .footer-social:hover { background: var(--accent); color: #fff; }
    .footer-trust { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
    .footer-trust-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--g600); }
    .footer-trust-item svg { color: var(--accent); flex-shrink: 0; }
    .fc-title { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--g600); margin-bottom: 16px; }
    .fc-links li { margin-bottom: 10px; }
    .fc-links a  { font-size: 13px; color: var(--g600); transition: color .2s; }
    .fc-links a:hover { color: var(--accent); }
    .footer-bottom { max-width: 1200px; margin: 0 auto; padding: 15px 32px 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
    .footer-copy    { font-size: 12px; color: var(--g600); }
    .footer-credit  { margin-left: 10px; padding-left: 10px; border-left: 1px solid #e5e5e5; color: #888; }
    .footer-credit a { color: #0a84ff; text-decoration: none; font-weight: 600; letter-spacing: .3px; transition: opacity .15s; }
    .footer-credit a:hover { opacity: .7; }
    @media (max-width: 640px) { .footer-credit { margin-left: 0; padding-left: 0; border-left: 0; display: block; margin-top: 4px; } }
    .pay-row  { display: flex; gap: 6px; align-items: center; }
    .pay-chip { padding: 4px 10px; background: #fff; border: 1px solid #e2e2e2; border-radius: 7px; font-size: 11px; font-weight: 700; color: var(--g600); }

    /* ════════════════════════════════════
       RESPONSIVE
    ════════════════════════════════════ */
    @media (max-width: 1024px) {
      .product-hero { grid-template-columns: 1fr 360px; }
      .features-grid { grid-template-columns: 1fr 1fr; }
      .f-card-wide { grid-column: span 2; }
      .related-grid { grid-template-columns: 1fr 1fr; }
      .footer-grid  { grid-template-columns: 1fr 1fr; gap: 28px; }
      .nav-links { display: none; }
      .ham { display: flex; }
    }

    @media (max-width: 768px) {
      :root { --r-xl: 20px; --r-lg: 16px; }
      .navbar { padding: 10px 16px; }
      .breadcrumb { padding: 0 16px; margin-top: 12px; }
      .product-hero { grid-template-columns: 1fr; padding: 0 16px; margin-top: 16px; gap: 16px; }
      .gallery   { position: relative; top: auto; }
      .buy-panel { padding: 20px; }
      .product-name { font-size: 20px; }
      .product-name-ar { font-size: 18px; }
      .price-main   { font-size: 34px; }
      .section { padding: 0 16px; margin-top: 40px; }
      .s-title  { font-size: 26px; }
      .features-grid { grid-template-columns: 1fr; }
      .f-card-wide { grid-column: span 1; }
      .f-card-wide .f-inner { grid-template-columns: 1fr; }
      .specs-grid   { columns: 1; }
      .rev-header   { grid-template-columns: 1fr; }
      .rev-grid     { grid-template-columns: 1fr; }
      .related-grid { grid-template-columns: 1fr 1fr; }
      .footer-grid  { grid-template-columns: 1fr 1fr; gap: 28px; }
      .footer       { padding: 32px 20px 0; }
      .footer-bottom { padding: 16px 20px 24px; flex-direction: column; align-items: flex-start; }
      .form-row-2   { grid-template-columns: 1fr; }

    }

    @media (max-width: 480px) {
      .product-name { font-size: 18px; }
      .product-name-ar { font-size: 16px; }
      .price-main   { font-size: 28px; }
      .s-title      { font-size: 22px; }
      .related-grid { grid-template-columns: 1fr; }
      .av-btn       { width: 38px; height: 38px; font-size: 20px; }
      .rev-form-body { padding: 18px; }
      .sb-big-price { font-size: 26px; }
    }

    /* ════════════════════════════════════
       MOBILE NAV
    ════════════════════════════════════ */
    .mobile-nav { position: fixed; inset: 0; z-index: 600; pointer-events: none; }
    .mobile-nav.open { pointer-events: auto; }
    .mobile-nav-bg {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0);
      transition: background .3s;
    }
    .mobile-nav.open .mobile-nav-bg { background: rgba(0,0,0,.5); }
    .no-nav-trans .mobile-nav-panel { transition: none !important; }
    .mobile-nav-panel {
      position: absolute; top: 0; right: 0; bottom: 0;
      width: 300px; max-width: 88vw;
      background: #fff;
      transform: translateX(100%);
      transition: transform .35s cubic-bezier(0.25,0.46,0.45,0.94);
      display: flex; flex-direction: column;
      overflow-y: auto;
      box-shadow: none;
    }
    .mobile-nav.open .mobile-nav-panel { transform: translateX(0); }

    .mn-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 20px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
    }
    .mn-logo { font-size: 18px; font-weight: 800; letter-spacing: -.4px; }
    .mn-logo span { color: var(--accent); }
    .mn-close {
      width: 34px; height: 34px; background: #f4f5f7; border: none; border-radius: 8px;
      display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
    }
    .mn-links { flex: 1; padding: 8px 0; }
    .mn-links a {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 24px; font-size: 15px; font-weight: 500; color: #444;
      border-left: 3px solid transparent; transition: all .15s; text-decoration: none;
    }
    .mn-links a:hover { background: #f7f8fa; color: #1a1a2e; }
    .mn-links a.active { background: #f0f7ff; color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
    .mn-sep { height: 1px; background: #f4f5f7; margin: 6px 20px; }
    .mn-cart-link {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 24px; font-size: 15px; font-weight: 600; color: var(--accent);
      text-decoration: none; border-left: 3px solid transparent; transition: all .15s;
    }
    .mn-cart-link:hover { background: #f0f7ff; border-left-color: var(--accent); }
    .mn-foot {
      padding: 20px 24px; border-top: 1px solid #f0f0f0; flex-shrink: 0;
    }
    .mn-foot-phone { font-size: 14px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px; }
    .mn-foot-sub { font-size: 12px; color: #6e6e6e; }
    .mn-foot-wa {
      display: inline-flex; align-items: center; gap: 7px;
      margin-top: 12px; font-size: 13px; font-weight: 600; color: #2bc20e;
      text-decoration: none;
    }

    /* Hamburger → X animation */
    .ham span { transition: transform .25s ease, opacity .2s ease; transform-origin: center; }
    .ham.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .ham.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .ham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ════════════════════════════════════
       PRODUCT CARD (.pcard) — shared
    ════════════════════════════════════ */
    .pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid #ebebeb; border-radius: 14px; overflow: hidden; color: inherit; transition: box-shadow .2s, transform .2s; }
    .pcard:hover { box-shadow: 0 8px 32px rgba(0,0,0,.10); transform: translateY(-2px); }
    .pcard-main { display: flex; flex-direction: column; flex: 1 1 auto; text-decoration: none; color: inherit; }
    .pcard-img-wrap { position: relative; background: #fff; height: 150px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .pcard-img { width: 100%; height: 100%; object-fit: contain; transition: opacity .2s; }
    .pcard-img-ph { width: 64px; height: 64px; background: #e8e8e8; border-radius: 12px; }
    .pcard-badge { position: absolute; top: 10px; left: 10px; background: #0066cc; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
    .pcard-oos { position: absolute; top: 10px; right: 10px; background: rgba(254,226,226,.95); color: #b91c1c; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
    .pcard-body { padding: 12px 14px 8px; }
    .pcard-brand { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #6e6e6e; margin-bottom: 4px; }
    .pcard-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; line-height: 1.3; }
    .pcard-tagline { font-size: 12px; color: #6e6e6e; }
    .pcard-tagline-ar { font-size: 12px; color: #6e6e6e; text-align: right; font-family: 'Noto Sans Arabic', Arial, sans-serif; }
    .pcard-from { font-size: 10px; font-weight: 500; color: #6e6e6e; display: block; text-align: center; }
    .pcard-colors { display: flex; gap: 6px; padding: 8px 14px 10px; flex-wrap: wrap; justify-content: center; margin-top: auto; }
    .pcard-col { width: 35px; height: 35px; border-radius: 7px; overflow: hidden; border: 2px solid #e2e2e2; cursor: pointer; transition: border-color .15s; flex-shrink: 0; }
    .pcard-col.active, .pcard-col:hover { border-color: #0a84ff; }
    .pcard-col img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
    .pcard-footer { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid #f4f4f4; align-items: center; }
    .pcard-price { display: flex; flex-direction: column; align-items: center; gap: 2px; }
    .pcard-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: center; }
    .pcard-price-val { font-size: 24px; font-weight: 800; color: #141414; letter-spacing: -.5px; }
    .pcard-price-old { font-size: 12px; color: #aaa; text-decoration: line-through; font-weight: 400; }
    .pcard-btn { display: flex; align-items: center; justify-content: center; background: #141414; color: #fff; border-radius: 100px; padding: 8px 14px; font-size: 12px; font-weight: 600; text-decoration: none; transition: background .15s; font-family: inherit; width: 100%; box-sizing: border-box; }
    .pcard-btn:hover { background: #333; }

    /* ════════════════════════════════════
       CATEGORY SCROLL ROW
    ════════════════════════════════════ */
    .cat-scroll-section { padding-top: 48px; }
    .cat-scroll-outer {
      position: relative;
      margin: 24px -24px 0;
      overflow: hidden;
    }
    .cat-scroll-track {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      padding: 4px 24px 20px;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      cursor: grab;
      user-select: none;
    }
    .cat-scroll-track::-webkit-scrollbar { display: none; }
    .cat-scroll-track.dragging { cursor: grabbing; scroll-behavior: auto; }
    .cat-scroll-card {
      flex: 0 0 220px;
      text-decoration: none;
      color: inherit;
    }
    @media (max-width: 600px) {
      .cat-scroll-card { flex: 0 0 172px; }
      .cat-scroll-outer { margin: 20px -16px 0; }
      .cat-scroll-track { padding: 4px 16px 16px; gap: 12px; }
    }