/* Miga-Photobook — stylesheet
 * Split out of index.html so visual tweaks (colours, sizes, the
 * product rows, the cards) live in one small file instead of being
 * hunted for inside five thousand lines of markup and logic.
 * Loaded by index.html; the two files must be uploaded together. */

  :root{
    --ink:#0c0c10;
    --ink-2:#17161d;
    --ink-3:#201f28;
    --paper:#fff8ec;
    --paper-dim:#c9c4d6;
    --brass:#ffc94d;
    --brass-dim:#e3a429;
    --sage:#2fe6b0;
    --steel:#3ea7ff;
    --rose:#ff5c96;
    --line:rgba(255,248,236,0.12);
  }
  /* ===== Day mode — same variable names, repainted for a light surface.
     Everything built on the variables above (the large majority of the
     site) follows automatically; a few literal dark backgrounds meant for
     framing photos/devices are left as-is on purpose, the same way a photo
     mat stays dark in a bright room. Category accent hues are deepened
     slightly here so text and icons keep enough contrast on a light
     background — same identity, tuned for the new surface. */
  html[data-theme="light"]{
    --ink:#faf7f0;
    --ink-2:#ffffff;
    --ink-3:#ece6d6;
    --paper:#211c10;
    --paper-dim:#6b6455;
    --brass:#a8710a;
    --brass-dim:#8a5c08;
    --sage:#0e8f6c;
    --steel:#1c6fcf;
    --rose:#c93368;
    --line:rgba(30,25,10,0.14);
  }
  /* ===== Living background watermark ===== */
  /* A slow-drifting collage of the site's own product photos, heavily faded and
     blurred, plus a diagonal repeating "Miga-Photobook" wordmark — reads as texture,
     not content. Fixed behind everything; #appRoot is raised above it so it never
     interferes with legibility or interaction. */
  #appRoot{ position:relative; z-index:1; }
  .site-watermark-bg{
    position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
    background:#000; /* pure black, matching the brand's dark/gold look — no blue tint */
  }
  .wm-photos{
    position:absolute; inset:-12% -6%; width:112%; height:124%;
    display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:230px; gap:16px;
    /* Was a permanent 34s drift animation — now a still texture. With this,
       the circle showcase, and the hero strip all animating non-stop at the
       same time, it read as visual noise competing for attention rather
       than atmosphere. A still backdrop still gives the "living background"
       depth without fighting the page's one intentional motion moment. */
    will-change:auto;
  }
  @media(max-width:760px){ .wm-photos{ grid-template-columns:repeat(3, 1fr); grid-auto-rows:180px; } }
  .wm-photos img{
    width:100%; height:100%; object-fit:cover; border-radius:18px;
    filter:grayscale(15%) blur(0.5px) brightness(1.1) contrast(1.05); opacity:0.28;
  }
  .wm-logo-layer{
    position:absolute; inset:-35% -15%; display:flex; flex-direction:column; justify-content:space-between;
    transform:rotate(-13deg);
  }
  .wm-logo-row{
    display:flex; gap:64px; white-space:nowrap;
    font-family:'Rakkas','IBM Plex Sans Arabic',serif;
    font-size:52px; color:var(--brass); opacity:0.09; letter-spacing:4px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; overflow-x:hidden;}
  body{
    background:var(--ink);
    color:var(--paper);
    font-family:'IBM Plex Sans Arabic', sans-serif;
    line-height:1.7;
    min-height:100vh;
    overflow-x:hidden;
    /* Clips any element that overflows the viewport horizontally (even by a
       sub-pixel rounding amount from a grid/gap combination) so the page can
       never shift sideways off-center — the exact symptom reported: the
       mobile view sitting slightly right of center instead of flush. Every
       intentional horizontal-scroll area on the page (category pills, the
       testimonials row, etc.) already scrolls within its own container via
       its own overflow-x:auto, so this doesn't affect any of them. */
  }
  /* Site-wide brand-colored scrollbars — a slim gold thumb on a dark track
     everywhere the browser would otherwise draw its flat grey default
     (the admin panel's tall modal, its horizontal tab strip, any overflow
     list). Applied on :root/body so it's the fallback for every scrollable
     element on the page; the pills-strip rule above still wins locally
     where it's more specific, so nothing there needs to change. Chromium/
     Safari via ::-webkit-scrollbar*, Firefox via scrollbar-color/-width. */
  *{
    scrollbar-width:thin; scrollbar-color:var(--brass) var(--ink-3);
  }
  *::-webkit-scrollbar{
    width:8px; height:8px;
  }
  *::-webkit-scrollbar-track{
    background:var(--ink-3); border-radius:100px;
  }
  *::-webkit-scrollbar-thumb{
    background:var(--brass); border-radius:100px; border:2px solid var(--ink-3);
  }
  *::-webkit-scrollbar-thumb:hover{
    background:var(--brass-dim);
  }
  *::-webkit-scrollbar-corner{
    background:var(--ink-3);
  }
  h1,h2,.display{
    font-family:'Rakkas', 'IBM Plex Sans Arabic', serif;
    font-weight:400;
    letter-spacing:0.3px;
  }
  h3{font-family:'IBM Plex Sans Arabic', sans-serif; font-weight:700; letter-spacing:0.1px;}
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}
  button{font-family:inherit; cursor:pointer; border:none; transition:transform .12s ease;}
  button:active{transform:scale(0.96);}

  /* ===== Sprocket strip motif ===== */
  .sprockets{
    height:14px;
    background-image: radial-gradient(circle, var(--ink) 3px, transparent 3.5px);
    background-size: 22px 14px;
    background-position: 10px center;
    background-color: var(--brass-dim);
    opacity:0.55;
  }

  /* ===== Promo marquee ===== */
  .promo-marquee{
    position:relative; z-index:49; overflow:hidden;
    background:linear-gradient(90deg, var(--brass-dim), var(--brass), var(--brass-dim));
    padding:7px 0; white-space:nowrap;
  }
  .promo-marquee-track{
    display:inline-flex; gap:64px; animation:marqueeScroll 52s linear infinite;
    will-change:transform;
  }
  .promo-marquee-track span{
    font-size:15px; font-weight:800; color:#1a1305; letter-spacing:0.4px; padding-inline-end:64px;
    font-family:"Playfair Display", Georgia, "Times New Roman", serif;
    text-shadow:0 1px 0 rgba(255,255,255,0.25);
  }
  @keyframes marqueeScroll{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
  }
  html[dir="rtl"] .promo-marquee-track{ animation-name:marqueeScrollRtl; }
  @keyframes marqueeScrollRtl{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(50%); }
  }
  @media(prefers-reduced-motion: reduce){ .promo-marquee-track{animation:none;} }

  /* ===== Header ===== */
  .sticky-top-group{
    position:sticky; top:0; z-index:55;
    display:flex; flex-direction:column;
  }
  /* ===== Category pills row (Option 1 + visible pills) — same #catNav
     element and click logic as the dropdown version, restyled to render as
     an always-visible horizontal-scroll strip instead of a hidden panel.
     The trigger button stays in the DOM (hidden) so nothing in the existing
     dropdown-open/close JS needs to change. */
  .cat-dropdown.cat-pills-mode{max-width:1180px; margin:0 auto; padding:0 24px 16px;}
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu{
    position:static; display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    background:transparent; border:none; padding:2px 0 12px; box-shadow:none; min-width:auto;
    overscroll-behavior-x:contain;
  }
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu button{
    display:inline-block; width:auto; white-space:nowrap; flex-shrink:0;
    background:transparent; color:var(--paper-dim); border:1px solid var(--line);
    padding:8px 16px; border-radius:100px; font-size:13.5px; font-weight:600;
  }
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu button:hover,
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu button.active{
    color:var(--ink); background:var(--brass); border-color:var(--brass);
  }
  /* Brand-colored scrollbar for the pills strip — a slim gold thumb on a
     dark track instead of the browser's default flat grey bar, so even the
     scroll hint reads as part of the site's own look rather than generic
     chrome. Chromium/Safari via ::-webkit-scrollbar*, Firefox via the
     scrollbar-color/-width properties (both applied for full coverage). */
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu{
    scrollbar-width:thin; scrollbar-color:var(--brass) var(--ink-3);
  }
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu::-webkit-scrollbar{
    height:6px;
  }
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu::-webkit-scrollbar-track{
    background:var(--ink-3); border-radius:100px;
  }
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu::-webkit-scrollbar-thumb{
    background:var(--brass); border-radius:100px;
  }
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu::-webkit-scrollbar-thumb:hover{
    background:var(--brass-dim);
  }
  @media(max-width:700px){
    .cat-dropdown.cat-pills-mode{padding:0 16px 14px;}
  }

  header{
    background:rgba(12,12,16,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  /* ===== Utility strip — the quiet, secondary controls (language, theme,
     device-preview, order tracking) live here in a thin bar above the main
     navigation, instead of competing for attention with categories/search/
     login in one crowded row. This is what turns "random-looking buttons"
     into a deliberate two-tier hierarchy: main row = what most visitors do
     every visit, utility strip = preferences most visitors never touch. */
  .header-utility{
    max-width:1180px; margin:0 auto; padding:6px 24px;
    display:flex; align-items:center; justify-content:flex-end; gap:10px;
    border-bottom:1px solid var(--line);
  }
  .util-link{
    background:transparent; border:none; color:var(--paper-dim); font-size:12.5px;
    padding:6px 4px; text-decoration:underline; text-decoration-color:transparent;
    transition:color .18s ease, text-decoration-color .18s ease;
  }
  .util-link:hover{color:var(--brass); text-decoration-color:var(--brass);}
  .nav-wrap{
    max-width:1180px; margin:0 auto; padding:16px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
  }
  .logo{
    font-size:22px; letter-spacing:0.5px; color:var(--paper); font-weight:600;
    display:flex; align-items:center; gap:10px;
  }
  .logo-mark{flex-shrink:0;}
  .logo-accent{color:var(--brass);}
  nav.cats{display:flex; gap:6px; flex-wrap:wrap;}
  nav.cats button{
    background:transparent; color:var(--paper-dim);
    padding:9px 16px; border-radius:100px; font-size:14.5px;
    border:1px solid transparent; transition:.22s;
  }
  nav.cats button:hover, nav.cats button.active{
    color:var(--ink); background:var(--paper); border-color:var(--paper);
    box-shadow:0 3px 10px rgba(0,0,0,0.2);
  }

  /* ===== Categories dropdown (replaces the row of pill buttons) ===== */
  .cat-dropdown{position:relative;}
  .cat-dropdown-btn{
    display:flex; align-items:center; gap:10px;
    background:transparent; color:var(--paper); border:1.5px solid var(--brass);
    padding:11px 20px; border-radius:10px; font-size:17px; font-weight:800;
    transition:.2s;
  }
  .cat-dropdown-btn:hover{background:rgba(255,201,77,0.08);}
  .cat-dropdown-btn .cdi{display:flex; align-items:center; font-size:20px; line-height:1;}
  .cat-dropdown-btn .cdi svg{width:1em; height:1em; display:block;}
  .cat-dropdown-btn .cdc{font-size:15px; transition:transform .18s; margin-inline-start:2px;}
  .cat-dropdown.open .cat-dropdown-btn .cdc{transform:rotate(180deg);}
  .cat-dropdown-menu{
    display:none; position:absolute; top:calc(100% + 8px); inset-inline-end:0;
    background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
    padding:6px; min-width:210px; z-index:60; box-shadow:0 12px 30px rgba(0,0,0,0.35);
  }
  .cat-dropdown.open .cat-dropdown-menu{display:block;}
  .cat-dropdown-menu button{
    display:block; width:100%; text-align:inherit; background:transparent; color:var(--paper-dim);
    padding:12px 15px; border-radius:8px; font-size:16px; font-weight:700; border:none;
  }
  .cat-dropdown-menu button:hover, .cat-dropdown-menu button.active{
    background:var(--paper); color:var(--ink);
  }
  .admin-bell-btn{position:relative;}
  .admin-bell-badge{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:20px; height:20px; padding:0 5px; border-radius:10px;
    background:#e0524a; color:#fff; font-size:12px; font-weight:800;
    line-height:1; margin-inline-start:-2px;
  }

  /* ===== Collapsible sections (How it works / Testimonials / About / FAQ) —
     opened and closed entirely by their tile/tab trigger elsewhere on the
     page (the category tiles grid, or the section-tabs row), which already
     display that section's name and icon; no separate header is rendered
     inside the section itself, so nothing repeats it. ===== */
  .cat-section.collapsible > .cs-body{
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .cat-section.collapsible.open > .cs-body{max-height:100000px;}
  .cat-section.collapsible > .cs-body > *:first-child{margin-top:20px;}

  /* The 52px/16px vertical padding below comes from the shared .cat-section
     rule further down and applies to the <section> itself, not to .cs-body —
     so a CLOSED collapsible section was still reserving ~68px of empty,
     transparent vertical space even with its content fully hidden. With 8
     category sections plus 4 more (why-us/how-it-works/testimonials/about/
     faq) closed by default, that space stacks up into a large gap where the
     fixed watermark background shows through clearly instead of staying a
     subtle texture in a normal margin. Zeroing it while closed, and only
     restoring it once .open is added, removes that gap without touching how
     an opened section looks. */
  .cat-section.collapsible{ padding:0 24px; transition:padding .25s ease; }
  .cat-section.collapsible.open{ padding:52px 24px 16px; }
  body.view-mode-mobile .cat-section.collapsible{ padding:0 16px; }
  body.view-mode-mobile .cat-section.collapsible.open{ padding:36px 16px 10px; }

  /* Tab panel (لماذا / كيف يعمل / من نحن / أسئلة شائعة): a plain
     visible/hidden swap, not an animated accordion expand — whichever tab
     is selected just appears, instantly, in this one fixed spot right
     below the tab row. No scrolling needed since nothing else competes for
     space here; only one .tab-panel is ever shown at a time. */
  #sectionTabPanel{ position:relative; }
  #sectionTabPanel .cat-section.tab-panel{ display:none; padding:28px 24px 16px; }
  #sectionTabPanel .cat-section.tab-panel.active{ display:block; }
  body.view-mode-mobile #sectionTabPanel .cat-section.tab-panel{ padding:20px 16px 10px; }

  /* Quick-nav row: one row of bold, large tab buttons that jump to and open
     each of the sections below (why-us / how it works / testimonials /
     about / faq), so a visitor finds all of it at a glance instead of
     scrolling past five separate stacked headers. */
  .section-tabs{
    display:grid; grid-template-columns:1fr; gap:12px; margin:0 0 28px;
  }
  .section-tab-btn{
    display:flex; align-items:center; justify-content:center; gap:12px;
    width:100%; height:66px; box-sizing:border-box; text-align:center;
    background:var(--ink-2); border:1.5px solid var(--brass); color:var(--paper);
    padding:0 20px; border-radius:14px;
    font-size:18px; font-weight:800; letter-spacing:0.2px; font-family:inherit;
    transition:.2s;
  }
  .section-tab-btn:hover{background:rgba(255,201,77,0.08);}
  .section-tab-btn.active{
    background:var(--brass); color:var(--ink); border-color:var(--brass);
  }
  .section-tab-btn.active .icon-badge{border-color:var(--ink); color:var(--ink);}
  @media(max-width:700px){
    .section-tab-btn{font-size:16px; height:60px; padding:0 16px;}
  }
  /* All tab buttons stay visible side by side at all times now — only the
     active one's background highlights which panel is currently showing
     below. No more hiding the other four when one is selected. */

  /* Admin orders: total/completed/pending counts, click to expand a live table */
  .order-stats-bar{
    display:flex; align-items:center; gap:22px; cursor:pointer; user-select:none; flex-wrap:wrap;
    background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
    padding:16px 20px; margin-bottom:16px;
  }
  .order-stat{display:flex; flex-direction:column; align-items:flex-start; gap:2px;}
  .order-stat-num{font-size:26px; font-weight:800; color:var(--brass); line-height:1;}
  .order-stat-label{font-size:12.5px; color:var(--paper-dim);}
  .order-stats-chevron{margin-inline-start:auto; color:var(--brass); font-size:15px; transition:transform .2s;}
  .order-stats-bar.open .order-stats-chevron{transform:rotate(180deg);}
  #orderStatsTable{
    background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
    padding:10px; margin-bottom:16px; font-size:13.5px;
  }
  #orderStatsTable table{width:100%; border-collapse:collapse;}
  #orderStatsTable th, #orderStatsTable td{padding:8px 10px; text-align:inherit; border-bottom:1px solid var(--line);}
  #orderStatsTable th{color:var(--paper-dim); font-weight:600; font-size:12px;}

  .order-type-badge{
    display:inline-block; font-size:11.5px; font-weight:800; padding:3px 10px; border-radius:100px;
  }
  .order-type-badge.type-transform{background:rgba(62,167,255,0.16); color:var(--steel);}
  .order-type-badge.type-prompt{background:rgba(255,201,77,0.16); color:var(--brass);}

  .my-order-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--ink-2); border:1px solid var(--line); border-radius:10px;
    padding:10px 14px; margin-bottom:8px; font-size:13px;
  }
  .my-order-row .mo-info{display:flex; flex-direction:column; gap:2px;}
  .my-order-row .mo-date{color:var(--paper-dim); font-size:11.5px;}

  .purchased-prompt-box{
    background:var(--ink); border:1px solid var(--line); border-radius:10px;
    padding:12px; display:flex; flex-direction:column; gap:8px;
  }
  .purchased-prompt-box p{
    font-size:13px; line-height:1.7; color:var(--paper-dim); margin:0;
    white-space:pre-wrap;
  }

  /* ===== Image crop tool (admin uploads) ===== */
  .crop-stage{
    display:flex; justify-content:center; margin:14px 0; background:#0a0806;
    border-radius:10px; overflow:hidden; border:1px solid var(--line);
  }
  #cropCanvas{cursor:grab; touch-action:none; display:block;}
  #cropCanvas:active{cursor:grabbing;}
  .crop-zoom-row{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
  .crop-zoom-row input[type="range"]{flex:1; accent-color:var(--brass);}

  .popularity-badge{
    display:inline-flex; align-items:center; gap:4px; align-self:center;
    background:rgba(255,201,77,0.14); color:var(--brass); font-weight:800; font-size:13px;
    padding:5px 10px; border-radius:100px; white-space:nowrap;
  }
  .request-count-overlay{
    position:absolute; bottom:8px; inset-inline-start:8px; z-index:2;
    display:flex; align-items:center; gap:4px;
    background:rgba(10,8,4,0.75); color:var(--brass); font-weight:800; font-size:12px;
    padding:4px 9px; border-radius:100px; backdrop-filter:blur(2px);
  }
  .admin-btn{
    display:inline-flex; align-items:center; gap:8px; height:44px; box-sizing:border-box;
    background:transparent; border:1.5px solid var(--brass); color:var(--paper-dim);
    padding:0 16px; border-radius:10px; font-size:13px;
  }
  .admin-btn:hover{background:rgba(255,201,77,0.08); color:var(--brass);}
  /* The one filled, high-contrast control in the header — everything else
     (categories, search, utility strip) stays outlined/quiet so this is
     unmistakably the primary action, per the same "one accent per view"
     idea already used for the active section tab and active view toggle. */
  .admin-btn.admin-btn-primary{
    background:var(--brass); color:var(--ink); font-weight:700; border-color:var(--brass);
  }
  .admin-btn.admin-btn-primary:hover{background:var(--brass-dim); color:var(--ink);}

  /* ===== Hero ===== */
  .hero{
    max-width:1180px; margin:0 auto; padding:64px 24px 40px;
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;
    position:relative;
  }
  .hero::before{
    content:""; position:absolute; z-index:0; pointer-events:none;
    top:-140px; left:-120px; width:560px; height:560px; border-radius:50%;
    background:
      radial-gradient(circle at 30% 30%, rgba(255,201,77,0.38), transparent 55%),
      radial-gradient(circle at 65% 55%, rgba(255,92,150,0.30), transparent 55%),
      radial-gradient(circle at 45% 70%, rgba(47,230,176,0.22), transparent 55%);
    filter:blur(70px);
  }
  .eyebrow{
    color:var(--brass); font-size:13px; letter-spacing:3px; font-weight:600;
    display:flex; align-items:center; gap:10px; margin-bottom:18px;
  }
  .eyebrow::before{content:""; width:26px; height:1px; background:var(--brass);}
  .tagline{
    font-family:'Rakkas','IBM Plex Sans Arabic',serif; font-size:22px; color:var(--rose);
    margin-bottom:14px; letter-spacing:0.3px;
  }
  .hero h1{font-size:52px; line-height:1.25; color:var(--paper); margin-bottom:20px;}
  .hero h1 em{font-style:normal; color:var(--brass);}
  .hero h1 .brand-mark{font-style:normal; color:var(--brass); font-family:'Georgia','Times New Roman',serif; letter-spacing:0.3px; text-shadow:0 0 14px rgba(227,164,41,0.35);}
  .hero p{color:var(--paper-dim); font-size:16.5px; max-width:480px; margin-bottom:28px;}
  .hero-ctas{display:flex; gap:12px;}
  .trust-checks{
    display:flex; flex-wrap:wrap; gap:14px; margin:18px 0 24px; font-size:13px; color:var(--paper-dim);
  }

  .why-us-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:14px;
  }
  .why-edge{
    margin-top:18px; position:relative;
    background:linear-gradient(180deg, rgba(255,201,77,0.11), rgba(255,201,77,0.02) 55%, transparent);
    border:2px solid var(--brass); border-radius:18px; padding:28px 24px 24px;
    box-shadow:0 0 44px rgba(255,201,77,0.18), inset 0 0 30px rgba(255,201,77,0.05);
  }
  .why-edge::before{
    content:"💡 السر"; position:absolute; top:-14px; right:24px; background:var(--brass);
    color:var(--ink); font-size:11.5px; font-weight:700; padding:4px 14px; border-radius:100px;
    box-shadow:0 4px 12px rgba(0,0,0,0.35);
  }
  html[dir="rtl"] .why-edge::before{ right:24px; left:auto; }
  .why-edge h3{margin:0 0 10px; font-size:16.5px; color:var(--brass);}
  .why-edge p{margin:0 0 10px; color:var(--paper); font-size:14.5px; line-height:1.85;}
  .why-edge p:last-child{margin-bottom:0;}
  .why-edge .lead{font-weight:700; font-size:17px; color:#fff8e1;}
  .why-edge-link{
    display:inline-block; margin-top:4px; color:var(--brass); font-weight:600;
    text-decoration:underline; text-underline-offset:3px;
  }
  .why-item{
    background:var(--ink-2); border:1px solid var(--line); border-radius:10px;
    padding:16px; font-size:14.5px; color:var(--paper); display:flex; align-items:center; gap:8px;
  }

  .how-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;}
  @media(max-width:860px){ .how-grid{grid-template-columns:repeat(2, 1fr);} }
  @media(max-width:480px){ .how-grid{grid-template-columns:1fr;} }
  .how-step{
    background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
    padding:22px 18px; position:relative; overflow:hidden;
  }
  .how-step-num{
    font-family:'Rakkas','IBM Plex Sans Arabic',serif; font-size:34px; color:var(--brass);
    opacity:0.5; line-height:1; margin-bottom:10px;
  }
  .how-step h3{font-size:15.5px; color:var(--paper); margin-bottom:6px;}
  .how-step p{font-size:13px; color:var(--paper-dim); margin:0;}
  .how-arrow{
    display:none; position:absolute; top:26px; inset-inline-end:-11px; color:var(--brass-dim); font-size:18px; z-index:1;
  }
  @media(min-width:861px){ .how-step:not(:last-child) .how-arrow{display:block;} }
  html[dir="rtl"] .how-arrow{transform:scaleX(-1);}

  /* ===== Promo video ===== */
  .promo-video-outer{
    display:flex; align-items:stretch; gap:0; flex-wrap:wrap; justify-content:center;
    width:fit-content; max-width:100%; margin:0 auto;
    border:2px solid var(--brass); border-radius:20px; padding:22px;
    background:rgba(255,201,77,0.03);
    box-shadow:0 0 60px rgba(255,201,77,0.12), inset 0 0 40px rgba(255,201,77,0.04);
  }
  .promo-video-wrap{
    display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:center; width:100%;
  }
  .promo-video-copy{
    flex:1 1 280px; max-width:400px; align-self:stretch;
    display:flex; flex-direction:column; justify-content:center;
    border:1.5px solid var(--brass); border-radius:16px; padding:22px 24px;
    background:linear-gradient(180deg, rgba(255,201,77,0.08), rgba(255,201,77,0.02));
    box-shadow:0 0 24px rgba(255,201,77,0.14);
  }
  .promo-video-copy h2{
    margin-bottom:10px; font-family:'Georgia','Times New Roman',serif; font-weight:700;
    background:linear-gradient(90deg, var(--brass) 0%, #fff8e1 45%, var(--brass) 90%);
    background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 0 22px rgba(227,164,41,0.45);
    animation:promoShimmer 3.2s linear infinite;
  }
  @keyframes promoShimmer{
    0%{background-position:0% center;}
    100%{background-position:200% center;}
  }
  /* Frame matches the source clip's real 9:16 (1080x1920) portrait shape.
     It used to be locked to a wide landscape ratio, which forced object-fit:cover
     to crop away most of the top/bottom of every frame to fill the wrong box —
     that was the actual cause of the video looking cropped/unclear, not the
     video file itself. Sized like a phone screen since that's the shape the
     footage was actually shot/rendered in. */
  .promo-video-frame{
    position:relative; flex:0 1 380px; width:380px; max-width:380px; aspect-ratio:9/16;
    border-radius:22px; border:4px solid var(--brass); overflow:hidden; box-sizing:border-box;
    box-shadow:0 0 50px rgba(255,201,77,0.3), 0 20px 60px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.15);
    animation:promoFrameGlow 3.4s ease-in-out infinite;
  }
  @keyframes promoFrameGlow{
    0%,100%{box-shadow:0 0 50px rgba(255,201,77,0.3), 0 20px 60px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.15);}
    50%{box-shadow:0 0 82px rgba(255,201,77,0.52), 0 20px 60px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.22);}
  }
  .promo-video{
    width:100%; height:100%; object-fit:cover; border-radius:18px; display:block; background:#000;
  }
  @keyframes promoWaveScroll{
    0%{background-position-y:0;}
    100%{background-position-y:48px;}
  }
  @media(max-width:640px){
    .promo-video-frame{width:100%; max-width:300px; flex-basis:auto; margin:0 auto; border-radius:20px;}
    .promo-video{border-radius:16px;}
    .promo-video-outer{
      padding:0; border:none; background:none; box-shadow:none; border-radius:0;
    }
    .promo-video-copy{padding:18px;}
  }

  .before-after-wrap{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
  .ba-item{position:relative; width:260px;}
  .ba-item img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:12px; border:1px solid var(--line);}
  .ba-label{
    position:absolute; bottom:10px; left:10px; background:rgba(10,6,20,0.75); color:var(--brass);
    padding:4px 12px; border-radius:100px; font-size:12px; font-weight:700; backdrop-filter:blur(4px);
  }
  .ba-arrow{font-size:32px; color:var(--brass);}
  html[dir="rtl"] .ba-arrow{display:inline-block; transform:scaleX(-1);}

  /* Reviews — same display style as Design MIGA 3: a horizontal scrollable
     row of compact text-only cards (no result photo), with filled/empty
     stars reflecting the exact rating rather than always five icons. */
  .testimonials-grid{ display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
  .review-photo-thumb{
    position:relative; width:66px; height:66px; border-radius:10px; overflow:hidden;
    border:2.5px solid var(--line); cursor:pointer; flex-shrink:0; transition:border-color .15s ease;
  }
  .review-photo-consent{
    display:flex; align-items:center; gap:9px; cursor:pointer; font-size:13.5px; color:var(--paper);
  }
  .review-photo-consent input[type="checkbox"]{width:18px; height:18px; accent-color:var(--brass); cursor:pointer; flex-shrink:0;}
  .review-photo-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .review-photo-thumb.selected{border-color:var(--brass);}
  .review-photo-thumb.selected::after{
    content:"✓"; position:absolute; top:2px; right:2px; width:18px; height:18px;
    background:var(--brass); color:var(--ink); border-radius:50%; font-size:11px;
    font-weight:800; display:flex; align-items:center; justify-content:center;
  }
  .proof-results-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:12px;
  }
  .proof-tile{
    aspect-ratio:4/5; border-radius:12px; overflow:hidden; border:1.5px solid var(--brass-dim);
    box-shadow:0 6px 18px rgba(0,0,0,0.3);
  }
  .proof-tile img{width:100%; height:100%; object-fit:cover; display:block;}
  .testimonial-card{
    flex:0 0 250px; background:var(--ink-2); border:1px solid var(--line); border-radius:12px; padding:18px;
  }
  .testimonial-card .stars{font-size:15px; margin-bottom:10px; color:var(--brass);}
  .testimonial-card p{color:var(--paper); font-size:14px; font-style:italic; margin:0;}
  .testimonial-author{color:var(--brass); font-size:12.5px; margin-top:10px; font-weight:600;}

  .trust-badges{
    display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
    background:var(--ink-2); border:1px solid var(--line); border-radius:14px; padding:24px;
  }
  .trust-badge{
    display:flex; align-items:center; gap:8px; font-size:14px; color:var(--paper);
    padding:8px 16px; border-radius:100px; background:rgba(255,201,77,0.06);
  }

  .faq-list{display:flex; flex-direction:column; gap:10px; max-width:760px;}
  .faq-item{
    background:var(--ink-2); border:1px solid var(--line); border-radius:10px; padding:16px 18px;
  }
  .faq-item summary{
    cursor:pointer; font-weight:600; color:var(--paper); font-size:15px; list-style:none;
    display:flex; justify-content:space-between; align-items:center;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:"+"; color:var(--brass); font-size:20px; font-weight:400;}
  .faq-item[open] summary::after{content:"−";}
  .faq-item p{margin:12px 0 0; color:var(--paper-dim); font-size:14px; line-height:1.8;}

  @media(max-width:620px){
    .before-after-wrap{justify-content:center;}
    .ba-item{width:44%;}
  }
  .btn-primary{
    background:var(--brass); color:var(--ink); font-weight:700; font-size:15px;
    padding:14px 26px; border-radius:9px; transition:.22s;
    box-shadow:0 4px 14px rgba(255,201,77,0.18);
  }
  .btn-primary:hover{background:#ffd873; transform:translateY(-1px); box-shadow:0 6px 20px rgba(255,201,77,0.28);}
  .btn-ghost{
    background:transparent; border:1px solid var(--line); color:var(--paper);
    padding:14px 22px; border-radius:9px; font-size:15px; transition:.22s;
  }
  .btn-ghost:hover{border-color:var(--paper); background:rgba(255,248,236,0.04);}

  .contact-sheet{overflow:hidden; border:1px solid var(--line); border-radius:4px; direction:ltr;}
  .strip-track{
    display:flex; gap:2px; width:max-content; direction:ltr;
    animation:scrollStrip 110s linear infinite;
  }
  .strip-track:hover{animation-play-state:paused;}
  @keyframes scrollStrip{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  .frame{position:relative; width:150px; height:190px; background:var(--ink-3); flex-shrink:0;}
  .frame img{width:100%; height:100%; object-fit:cover; filter:grayscale(35%) contrast(1.05);}
  .frame .fno{
    position:absolute; bottom:6px; left:6px; font-size:10px; letter-spacing:1px;
    color:var(--brass); background:rgba(0,0,0,0.55); padding:2px 6px; border-radius:3px;
  }

  /* ===== Section shells ===== */
  section.cat-section{max-width:1180px; margin:0 auto; padding:52px 24px 16px;}
  .section-head{
    display:flex; align-items:center; justify-content:flex-start; gap:12px;
    margin-bottom:32px; padding-bottom:20px;
    border-bottom:1px solid transparent;
    border-image:linear-gradient(90deg, var(--line), transparent) 1;
  }
  .section-head h2{font-size:32px; font-weight:800; letter-spacing:0.2px;}
  .section-head .tag{
    font-size:13px; padding:6px 13px; border-radius:100px; font-weight:800;
    letter-spacing:0.5px;
  }
  .tag-children{background:rgba(47,230,176,0.16); color:var(--sage);}
  .tag-male{background:rgba(62,167,255,0.16); color:var(--steel);}
  .tag-female{background:rgba(255,92,150,0.16); color:var(--rose);}
  .tag-business{background:rgba(62,167,255,0.16); color:var(--steel);}
  .tag-cinematic{background:rgba(255,92,150,0.16); color:var(--rose);}
  .tag-luxury{background:rgba(255,201,77,0.18); color:var(--brass);}
  .tag-artistic{background:rgba(47,230,176,0.16); color:var(--sage);}
  .tag-magazine{background:rgba(227,164,41,0.18); color:var(--brass-dim);}

  /* ===== Category tiles: one icon per section, built from that section's own
     photos, arranged in neat aligned rows on desktop and mobile. Clicking a
     tile opens (and scrolls to) the matching collapsible category section
     further down the page. ===== */
  .cat-tiles-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
  }
  @media(max-width:980px){ .cat-tiles-grid{grid-template-columns:repeat(3, 1fr);} }
  @media(max-width:700px){ .cat-tiles-grid{grid-template-columns:repeat(2, 1fr); gap:14px;} }
  .cat-tile{
    display:flex; flex-direction:column; align-items:stretch; gap:8px;
    width:100%; background:var(--ink-2); color:var(--paper); border:1px solid var(--line); border-radius:16px;
    padding:8px; text-align:center; transition:transform .15s ease, border-color .15s ease;
  }
  .cat-tile:hover{ border-color:var(--brass-dim); transform:translateY(-2px); }
  .cat-tile:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
  .cat-tile.open{ border-color:var(--brass); }
  /* One tall cover photo per category rather than a four-way collage. A single
     large image reads as a deliberate choice; four thumbnails squeezed into
     squares crop faces off and look accidental. The 4:5 frame matches the
     portrait ratio the photos are actually produced in, so nothing is lost. */
  .cat-tile-cover{
    position:relative; aspect-ratio:4/5; border-radius:12px; overflow:hidden;
    background:var(--ink-3);
  }
  .cat-tile-cover img{
    width:100%; height:100%; object-fit:cover; display:block;
    /* Faces sit in the upper half of a portrait, so bias the crop upward and
       never slice the head off when the frame is tighter than the photo. */
    object-position:center 22%;
    transition:transform .35s ease;
  }
  .cat-tile:hover .cat-tile-cover img{transform:scale(1.05);}

  /* A small, deliberate control for stepping through the category's best
     photos. Kept separate from the tile itself so a tap on the tile always
     does the one thing it promises: open the category. */
  .cat-tile-cover .ct-cycle{
    position:absolute; inset-inline-start:8px; inset-block-start:8px; z-index:3;
    width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(12,12,16,0.72); border:1px solid rgba(255,255,255,0.16);
    color:var(--paper); font-size:15px; line-height:1; cursor:pointer;
    transition:background .15s ease, transform .25s ease, color .15s ease;
  }
  .cat-tile-cover .ct-cycle:hover{
    background:rgba(255,201,77,0.9); color:var(--ink); transform:rotate(180deg);
  }
  .cat-tile-cover .ct-cycle:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
  /* Brief fade while the photo is exchanged, so the swap reads as intentional. */
  .cat-tile-cover img.swapping{opacity:0;}

  @media (prefers-reduced-motion: reduce){
    .cat-tile:hover .cat-tile-cover img{transform:none;}
    .cat-tile-cover .ct-cycle:hover{transform:none;}
    .cat-tile-cover img{transition:none;}
  }
  /* Dark wash under the text so the label stays readable over any photo. */
  .cat-tile-cover::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to top,
      rgba(8,8,12,0.92) 0%, rgba(8,8,12,0.55) 28%, rgba(8,8,12,0) 55%);
  }
  .cat-tile-cover .ct-count{
    position:absolute; inset-inline-end:8px; inset-block-start:8px; z-index:2;
    background:rgba(12,12,16,0.78); color:var(--paper); font-size:11px; font-weight:700;
    padding:4px 9px; border-radius:100px; letter-spacing:0.2px;
    border:1px solid rgba(255,255,255,0.10);
  }
  .cat-tile-cover .ct-empty{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    padding:14px; font-size:12px; color:var(--paper-dim); text-align:center;
  }
  /* The label sits on the photo instead of below it, so the tile is one block
     of image rather than a picture with a caption stuck underneath. */
  .cat-tile-label{
    position:absolute; inset-inline:0; inset-block-end:0; z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:0 10px 14px;
  }
  /* ===== Unified icon+name chip, used for a category's identity everywhere
     it appears (tile overview, opened section header, search results) — one
     visual unit instead of a plain name plus a separate colour tag repeating
     the same information. The tint always comes from the same tag-<cat>
     palette already used across the site, so the colour coding survives even
     though the redundant text is gone. New categories added from the admin
     panel pick this up automatically since it's generated by the same
     function that builds the tile. */
  .cat-chip{
    display:inline-flex; align-items:center; gap:7px;
    padding:6px 14px; border-radius:100px; font-weight:800; font-size:14px;
    letter-spacing:0.2px; line-height:1; backdrop-filter:blur(2px);
  }
  .cat-chip .cicon{display:flex; font-size:15px;}
  .cat-chip .cicon svg{width:1em; height:1em; display:block;}
  @media(max-width:460px){
    .cat-chip{font-size:12px; padding:5px 11px; gap:5px;}
    .cat-chip .cicon{font-size:13px;}
  }
  .cat-tile .sh-chevron{
    font-size:13px; color:var(--brass); transition:transform .2s; margin-inline-start:4px;
  }
  .cat-tile.open .sh-chevron{transform:rotate(180deg);}

  /* Dedicated icon-only tints for the opened section header, sharing the
     exact colours of the tag-<cat> palette above but without a pill
     background — the header already has its own dark bg, so the icon alone
     carries the category colour. */
  .icon-children{color:var(--sage);}
  .icon-male,.icon-business{color:var(--steel);}
  .icon-female,.icon-cinematic{color:var(--rose);}
  .icon-luxury{color:var(--brass);}
  .icon-artistic{color:var(--sage);}
  .icon-magazine{color:var(--brass-dim);}

  /* Product row: one horizontal, snap-scrolling line instead of a wrapped
     grid. The arrows under the row scroll by exactly one container width, so
     on desktop that is one full set of 5 cards and on mobile it is exactly
     one card — no page numbers needed. */
  .grid{
    display:flex; gap:18px; align-items:flex-start;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; scroll-behavior:smooth;
    scrollbar-width:none; -ms-overflow-style:none;
    padding-bottom:4px;
    /* Without this, dragging past the first (or last) card triggers iOS
       Safari's native elastic "rubber-band" overscroll bounce — which
       briefly reveals whatever sits behind the carousel's edge instead of
       just stopping cleanly, reading as the card being shifted/misaligned.
       This contains the bounce to the carousel itself. */
    overscroll-behavior-x:contain;
  }
  .grid::-webkit-scrollbar{display:none;}
  .grid > .card{
    flex:0 0 calc((100% - 4*18px) / 5);
    scroll-snap-align:start;
  }
  @media(max-width:1180px){ .grid > .card{flex-basis:calc((100% - 3*18px) / 4);} }
  @media(max-width:980px){ .grid > .card{flex-basis:calc((100% - 2*18px) / 3);} }
  @media(max-width:700px){ .grid{gap:14px;} .grid > .card{flex-basis:calc((100% - 14px) / 2);} }
  @media(max-width:560px){
    .grid > .card{
      flex-basis:100%;
      /* On mobile, exactly one card is meant to fill the view. "start"
         snapping aligns the card's RIGHT edge (the RTL inline-start) to the
         container's edge — but flex-basis:100% combined with the row's
         gap leaves a few sub-pixels of rounding error per card, so that
         "exact" right-edge alignment consistently left a stray sliver of
         empty space bleeding through on the left instead of being split
         evenly. Centering the snap point removes the dependency on either
         edge being pixel-perfect, so the card sits centered regardless. */
      scroll-snap-align:center;
    }
  }
  .grid > .empty-note{flex:0 0 100%;}

  /* Results showcase: smaller, denser thumbnails than the product grid — still
     click-to-zoom (openLightbox), just meant to be skimmed quickly rather than
     shopped from. */
  .results-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:10px; align-items:stretch;}
  .results-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px; overflow:visible;}
  .results-grid > .card{flex:none;}
  .results-grid .card-media{aspect-ratio:1/1;}
  @media(max-width:1180px){ .results-grid{grid-template-columns:repeat(5, 1fr);} }
  @media(max-width:700px){ .results-grid{grid-template-columns:repeat(4, 1fr);} }
  @media(max-width:460px){ .results-grid{grid-template-columns:repeat(3, 1fr); gap:8px;} }
  .grid-nav-wrap{position:relative;}
  .order-status-spinner{
    width:34px; height:34px; margin:6px auto 0; border-radius:50%;
    border:3px solid var(--line); border-top-color:var(--brass);
    animation:mp-spin 0.8s linear infinite;
  }
  @keyframes mp-spin{ to{ transform:rotate(360deg); } }
  /* Pagination bar: left arrow — page numbers — right arrow, replacing the
     small dots. Kept in a fixed left-to-right order (arrow, numbers, arrow)
     regardless of the page's RTL text direction, since page numbers read the
     same way for everyone and this avoids ambiguity about which arrow means
     "forward". */
  .grid-page-dots{
    display:flex; align-items:center; justify-content:center; gap:14px;
    margin-top:18px; direction:ltr;
  }
  .grid-page-dots .gp-arrow{
    display:flex; align-items:center; justify-content:center;
    width:52px; height:46px; border-radius:12px;
    background:var(--ink-2); border:2px solid var(--brass); color:var(--brass);
    font-size:26px; font-weight:800; cursor:pointer; line-height:1;
    box-shadow:0 2px 10px rgba(0,0,0,0.35);
  }
  .grid-page-dots .gp-arrow:hover{background:rgba(255,201,77,0.12);}
  .grid-page-dots .gp-arrow:disabled{opacity:0.28; cursor:default; background:transparent;}
  .grid-page-dots .gp-nums{display:none;}
  .grid-page-dots .gp-num{
    min-width:34px; height:34px; padding:0 6px; border-radius:8px;
    background:transparent; border:none; color:var(--paper-dim);
    font-size:19px; font-weight:800; cursor:pointer;
  }
  .grid-page-dots .gp-num:hover{color:var(--paper);}
  .grid-page-dots .gp-num.active{color:var(--brass); background:rgba(255,201,77,0.14);}
  @media(max-width:640px){
    .grid-page-dots{gap:22px; margin-top:14px;}
    .grid-page-dots .gp-arrow{width:64px; height:50px; font-size:30px;}
  }
  .empty-note{
    color:var(--paper-dim); font-size:14.5px; border:1px dashed var(--line);
    border-radius:10px; padding:26px; text-align:center;
  }

  /* ===== Product Card ===== */
  .card{
    background:var(--ink-2); border:1px solid var(--line); border-radius:14px;
    overflow:hidden; display:flex; flex-direction:column;
    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    box-shadow:0 2px 10px rgba(0,0,0,0.25);
  }
  .card:hover{
    transform:translateY(-4px);
    border-color:var(--brass-dim);
    box-shadow:0 14px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,201,77,0.15);
  }
  .card-media{position:relative; aspect-ratio:4/5; background:#150c26; overflow:hidden;}
  .card-media img{width:100%; height:100%; object-fit:cover;}
  .card-badge{
    position:absolute; top:10px; right:10px; left:10px; font-size:10.5px; letter-spacing:0.3px;
    background:rgba(10,6,20,0.72); backdrop-filter:blur(4px); color:var(--brass);
    padding:5px 10px; border-radius:8px; font-weight:600; text-align:center;
    max-width:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .card-body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:11px; flex:1;}
  .card-title{font-size:16px; font-weight:600; color:var(--paper); line-height:1.4;}
  .card-price{
    color:var(--brass); font-weight:700; font-size:14px; letter-spacing:0.2px;
    display:inline-flex; align-self:flex-start; padding:3px 0; gap:8px; align-items:baseline;
  }
  .price-old{color:var(--paper-dim); font-weight:500; font-size:12.5px; text-decoration:line-through; opacity:0.7;}
  .price-new{color:var(--brass); font-weight:700; font-size:16px;}
  /* Inside a .buy-btn (gold background), the default light-on-dark price
     colors above are nearly invisible — override to dark-on-gold so the
     prompt-purchase button's price reads exactly as clearly as the plain
     price text in the transform button next to it. */
  .buy-btn .price-old{color:rgba(20,15,5,0.55); opacity:1;}
  .buy-btn .price-new{color:var(--ink); font-weight:800; font-size:13.5px;}

  .prompt-panel{
    border:1px solid var(--line); border-radius:8px; padding:12px; font-size:13px;
    background:var(--ink); position:relative; min-height:64px;
    color:var(--paper-dim);
  }
  .prompt-panel.locked p{
    opacity:0.4; user-select:none; -webkit-user-select:none; font-style:italic;
  }
  .prompt-missing{opacity:0.7; font-style:italic; margin-bottom:8px;}
  .lock-overlay{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:4px; font-size:12px; color:var(--paper-dim);
  }
  .lock-overlay svg{width:16px; height:16px; stroke:var(--brass);}
  .prompt-panel.unlocked{
    animation:develop 0.9s ease forwards;
    border-color:var(--brass-dim);
  }
  @keyframes develop{
    0%{box-shadow:inset 0 0 0 60px rgba(255,201,77,0.32); filter:blur(4px);}
    100%{box-shadow:inset 0 0 0 0 rgba(255,201,77,0); filter:blur(0);}
  }
  .card-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto;}
  .card-actions .buy-btn, .card-actions .copy-btn{flex:1 1 auto;}
  .buy-btn{
    flex:1; background:var(--brass); color:var(--ink); font-weight:700; font-size:13.5px;
    padding:11px; border-radius:8px; transition:.2s;
  }
  .buy-btn:hover{background:#ffd873; transform:translateY(-1px);}
  .copy-btn{
    flex:1; background:transparent; border:1px solid var(--line); color:var(--paper);
    padding:11px; border-radius:8px; font-size:13.5px; transition:.2s;
  }
  .copy-btn:hover{border-color:var(--brass); background:rgba(255,201,77,0.06);}
  .reject-btn{border-color:rgba(224,122,122,0.4); color:#e07a7a;}
  .reject-btn:hover{border-color:#e07a7a; background:rgba(224,122,122,0.08);}
  .owned-pill{
    font-size:11px; color:var(--sage); border:1px solid rgba(47,230,176,0.35);
    padding:3px 10px; border-radius:100px; align-self:flex-start; font-weight:600; letter-spacing:0.2px;
  }

  /* ===== Pricing ===== */
  .pricing{max-width:1180px; margin:0 auto; padding:70px 24px;}
  .pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px;}
  .plan{
    border:1px solid var(--line); border-radius:12px; padding:28px 24px;
    background:var(--ink-2); display:flex; flex-direction:column; gap:14px;
  }
  .plan.featured{border-color:var(--brass); position:relative; background:linear-gradient(180deg, rgba(255,201,77,0.12), transparent 60%);}
  .plan.featured::before{
    content:"⭐ الأكثر طلبًا"; position:absolute; top:-13px; right:24px; background:var(--brass);
    color:var(--ink); font-size:11.5px; font-weight:700; padding:4px 12px; border-radius:100px;
  }
  .plan h3{font-size:20px; color:var(--paper);}
  .plan .price{font-size:34px; color:var(--brass); font-weight:700;}
  .plan .price span{font-size:14px; color:var(--paper-dim); font-weight:400;}
  .plan ul{list-style:none; display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--paper-dim);}
  .plan ul li::before{content:"✓ "; color:var(--sage);}
  .plan .btn-primary, .plan .btn-ghost{width:100%; text-align:center;}

  footer{border-top:1px solid var(--line); padding:34px 24px; text-align:center; color:var(--paper-dim); font-size:13px;}
  .footer-links{margin-top:12px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap;}
  .footer-links a{color:var(--paper-dim); font-size:12.5px; text-decoration:none; border-bottom:1px solid transparent;}
  .footer-links a:hover{color:var(--brass); border-bottom-color:var(--brass);}

  /* ===== Modal ===== */
  .modal-bg{
    position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none;
    align-items:center; justify-content:center; z-index:200; padding:20px;
  }
  .modal-bg.show{display:flex;}
  #dailyReportModalBg{z-index:260;}
  /* Crop tool opens while the admin panel is still open behind it — both
     shared the same .modal-bg z-index (200), and since #adminModalBg comes
     later in the DOM, it was winning the stacking tie and burying the crop
     tool underneath the admin panel. Bumping this above 200 (matching the
     daily-report modal's own fix above) makes it appear on top as expected,
     and closing/confirming it correctly reveals the admin panel again. */
  #cropModalBg{z-index:260;}
  .modal{
    background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
    max-width:440px; width:100%; padding:26px; max-height:88vh; overflow:auto;
  }
  .modal h3{font-size:20px; margin-bottom:6px;}
  .modal p.sub{color:var(--paper-dim); font-size:13.5px; margin-bottom:18px;}
  .field{margin-bottom:14px;}
  .field label{display:block; font-size:13px; color:var(--paper-dim); margin-bottom:6px;}
  .field input, .field select, .field textarea{
    width:100%; background:var(--ink); border:1px solid var(--line); color:var(--paper);
    padding:10px 12px; border-radius:7px; font-size:14px; font-family:inherit;
  }
  .field textarea{min-height:90px; resize:vertical;}
  .account-tabs{display:flex; gap:8px; margin-bottom:20px; border-bottom:1px solid var(--line);}
  .account-tab{
    background:transparent; color:var(--paper-dim); padding:10px 4px; font-size:14.5px;
    border-bottom:2px solid transparent; margin-bottom:-1px;
  }
  .account-tab.active{color:var(--brass); border-bottom-color:var(--brass); font-weight:600;}
  .modal-actions{display:flex; gap:10px; margin-top:8px;}
  .modal-actions button{flex:1;}
  .close-x{
    background:transparent; color:var(--paper-dim); float:left; font-size:20px; line-height:1;
  }

  .instapay-box{
    background:var(--ink); border:1px solid var(--brass-dim); border-radius:10px;
    padding:16px; margin-bottom:16px; text-align:center;
  }
  .ip-label{font-size:12.5px; color:var(--paper-dim); margin-bottom:6px;}
  .ip-number{font-size:24px; font-weight:700; color:var(--brass); letter-spacing:1px; direction:ltr;}
  .ip-copy{
    margin-top:10px; background:transparent; border:1px solid var(--line); color:var(--paper);
    padding:6px 14px; border-radius:7px; font-size:12.5px;
  }
  .ip-copy:hover{border-color:var(--brass);}

  .admin-tabs{display:flex; gap:8px; margin-bottom:16px;}
  .admin-tabs button{
    flex:1; background:var(--ink); border:1px solid var(--line); color:var(--paper-dim);
    padding:9px; border-radius:7px; font-size:13.5px;
  }
  .admin-tabs button.active{border-color:var(--brass); color:var(--brass);}
  .order-row{
    border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:10px; font-size:13px;
  }
  .order-row .oline{display:flex; justify-content:space-between; color:var(--paper-dim); margin-bottom:4px;}
  .order-row .oline b{color:var(--paper); font-weight:600;}
  .order-status{font-size:11.5px; padding:2px 8px; border-radius:100px; font-weight:600;}
  .status-pending{background:rgba(255,201,77,0.15); color:var(--brass);}
  .status-approved{background:rgba(47,230,176,0.15); color:var(--sage);}
  .status-rejected{background:rgba(224,122,122,0.15); color:#e07a7a;}
  .order-actions{display:flex; gap:8px; margin-top:8px;}
  .order-actions button{flex:1; padding:7px; border-radius:6px; font-size:12.5px;}

  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120%);
    background:var(--paper); color:var(--ink); padding:12px 22px; border-radius:8px;
    font-size:14px; font-weight:600; z-index:300; transition:transform .3s ease;
  }
  .toast.show{transform:translateX(-50%) translateY(0);}

  .contact-widget{position:fixed; bottom:26px; left:26px; z-index:200; display:flex; flex-direction:column; align-items:flex-start; gap:12px;}

  /* ===== Admin: floating launcher + collapsible panel =====
     The admin panel is a working surface, not a one-shot dialog: it can be
     folded away to a small floating badge while the storefront underneath is
     checked, then unfolded again without losing what was typed. */
  /* A single, quiet nudge for a visitor who has browsed but not ordered.
     Shows once per visit, sits at the bottom out of the way of the content,
     and is dismissible — deliberately not a modal that blocks the page. */
  /* Purchase confirmation: a deliberate second action before an order is
     created, so "I've paid" cannot be tapped on reflex before transferring. */
  .pay-confirm-row{
    display:flex; align-items:flex-start; gap:10px; cursor:pointer;
    background:var(--ink); border:1px solid var(--line); border-radius:9px;
    padding:11px 13px; margin-bottom:10px; font-size:13.5px; line-height:1.6;
  }
  .pay-confirm-row input{
    width:19px; height:19px; margin:2px 0 0; accent-color:var(--brass); flex-shrink:0;
  }
  .pay-warning{
    background:rgba(220,80,60,0.10); border:1px solid rgba(220,80,60,0.45);
    border-radius:9px; padding:10px 13px; margin-bottom:12px;
    font-size:12.8px; line-height:1.65; color:#f0b9ae;
  }
  #buyConfirmBtn[disabled]{opacity:0.45; cursor:not-allowed;}

  /* Shown once the customer's photo is actually ready. Thanks them at the one
     moment they are most pleased, and puts sharing and reviewing right there
     — the two things that grow the shop and cost the customer nothing. */
  /* Already thanked: kept visible rather than hidden so the admin can tell
     "done" apart from "not offered", but clearly inert. */
  .thanked-btn, .thanked-btn:hover{
    opacity:0.45; cursor:default; pointer-events:none;
    border-color:var(--line); color:var(--paper-dim); background:transparent;
  }

  .thanks-panel{
    display:none; margin-top:16px; padding:16px 18px;
    background:rgba(255,201,77,0.07); border:1.5px solid var(--brass-dim);
    border-radius:12px; text-align:center;
  }
  .thanks-panel.show{display:block;}
  .thanks-panel h4{margin:0 0 6px; font-size:16px; color:var(--brass);}
  .thanks-panel p{margin:0 0 12px; font-size:13.5px; line-height:1.7; color:var(--paper);}
  .thanks-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
  .thanks-actions button{flex:1 1 150px; padding:11px 14px; font-size:13.5px;}

  .stay-nudge{
    position:fixed; bottom:-200px; inset-inline-start:50%; transform:translateX(-50%);
    z-index:205; width:min(440px, calc(100vw - 32px));
    background:var(--ink-2); border:2px solid var(--brass); border-radius:16px;
    padding:18px 20px 16px; box-shadow:0 18px 50px rgba(0,0,0,0.55);
    transition:bottom .45s cubic-bezier(.22,1,.36,1);
  }
  .stay-nudge.show{bottom:26px;}
  .stay-nudge h4{font-size:16.5px; color:var(--brass); margin:0 0 6px; padding-inline-end:26px;}
  .stay-nudge p{font-size:14px; color:var(--paper); line-height:1.7; margin:0 0 14px;}
  .stay-nudge-actions{display:flex; gap:10px; flex-wrap:wrap;}
  .stay-nudge-actions .btn-primary,
  .stay-nudge-actions .btn-ghost{flex:1 1 auto; padding:11px 16px; font-size:14px; text-align:center;}
  .stay-nudge-close{
    position:absolute; top:10px; inset-inline-end:12px;
    background:none; border:none; color:var(--paper-dim); font-size:22px; line-height:1; cursor:pointer;
  }
  .stay-nudge-close:hover{color:var(--paper);}
  @media(max-width:560px){ .stay-nudge.show{bottom:92px;} }

  .admin-fab{
    position:fixed; bottom:96px; left:26px; z-index:210;
    display:none; align-items:center; gap:8px;
    height:48px; padding:0 16px 0 14px; border-radius:26px;
    background:var(--ink-2); border:2px solid var(--brass); color:var(--brass);
    font-size:14px; font-weight:800; font-family:inherit; cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,0.45);
    transition:transform .18s ease, background .18s ease;
  }
  .admin-fab.show{display:inline-flex;}
  .admin-fab:hover{transform:translateY(-3px); background:rgba(255,201,77,0.12);}
  .admin-fab .af-icon{font-size:18px; line-height:1;}
  .admin-fab .af-badge{
    min-width:20px; height:20px; padding:0 6px; border-radius:10px;
    background:var(--brass); color:var(--ink); font-size:12px; font-weight:800;
    display:none; align-items:center; justify-content:center;
  }
  .admin-fab .af-badge.show{display:inline-flex;}

  .admin-head{
    display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
    margin-bottom:6px;
  }
  .admin-head-actions{display:flex; align-items:center; gap:6px; flex-shrink:0;}
  .admin-icon-btn{
    width:34px; height:34px; border-radius:9px; flex-shrink:0;
    background:var(--ink); border:1px solid var(--line); color:var(--paper-dim);
    font-size:17px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:color .15s, border-color .15s;
  }
  .admin-icon-btn:hover{color:var(--brass); border-color:var(--brass-dim);}
  /* Folded: header stays, everything below it is tucked away. */
  .modal.admin-modal.collapsed #adminLoginView,
  .modal.admin-modal.collapsed #adminFormView,
  .modal.admin-modal.collapsed p.sub{display:none !important;}
  .modal.admin-modal.collapsed{padding-bottom:18px;}
  .modal.admin-modal{max-width:520px;}
  body.view-mode-desktop .modal.admin-modal{max-width:920px;}
  .field-grid-2{display:grid; grid-template-columns:1fr; gap:0 16px;}
  body.view-mode-desktop .field-grid-2{grid-template-columns:1fr 1fr;}
  .admin-tabs{flex-wrap:wrap;}
  .admin-tabs button{flex:1 1 auto; min-width:104px;}

  /* Back to top + vertical scroll ruler — pinned to the physical right edge
     with a plain "right" (not the logical inset-inline-end), which in RTL
     was flipping to the same left edge as the contact widget above and
     landing right on top of it. */
  .back-to-top-fab{
    position:fixed; bottom:26px; right:26px; z-index:200;
    width:48px; height:48px; border-radius:50%;
    background:var(--brass); color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
    transition:opacity .2s, transform .2s;
  }
  .back-to-top-fab:hover{transform:translateY(-3px);}

  .scroll-ruler{
    position:fixed; top:50%; right:16px; transform:translateY(-50%); z-index:190;
    display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .scroll-ruler-arrow{
    width:32px; height:28px; border-radius:8px;
    background:var(--ink-2); border:1px solid var(--steel); color:var(--steel); font-size:12px;
  }
  .scroll-ruler-arrow:hover{background:rgba(62,167,255,0.12);}
  .scroll-ruler-track{
    position:relative; width:7px; height:280px; border-radius:5px;
    background:var(--line); cursor:pointer; overflow:hidden;
  }
  .scroll-ruler-thumb{
    position:absolute; top:0; inset-inline-start:0; width:100%; height:50px;
    background:var(--steel); border-radius:5px;
  }
  @media(max-width:860px){
    .scroll-ruler{display:none;} /* the floating back-to-top button already covers this on small screens */
  }

  /* ===== Search (with per-visitor search history) ===== */
  .search-box{position:relative; display:flex; align-items:center;}
  .search-box .search-icon-btn{
    position:absolute; inset-inline-start:10px; color:var(--brass);
    background:transparent; border:none; display:flex; align-items:center; pointer-events:none;
  }
  .search-box input{
    width:220px; background:var(--ink-2); border:1.5px solid var(--brass); color:var(--paper);
    border-radius:10px; padding:10px 14px 10px 36px; font-size:14px; transition:box-shadow .2s ease;
  }
  html[dir="rtl"] .search-box input{padding:10px 36px 10px 14px;}
  html[dir="rtl"] .search-box .search-icon-btn{inset-inline-start:auto; inset-inline-end:10px;}
  .search-box input:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(255,201,77,0.18);}
  .search-dropdown{
    display:none; position:absolute; top:calc(100% + 8px); inset-inline-start:0; width:100%;
    min-width:280px; background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
    padding:8px; z-index:70; max-height:360px; overflow-y:auto;
    box-shadow:0 12px 30px rgba(0,0,0,0.35);
  }
  .search-box.open .search-dropdown{display:block;}
  .search-dropdown .sd-section-label{
    font-size:11px; color:var(--paper-dim); padding:8px 10px 4px; text-transform:uppercase; letter-spacing:0.5px;
  }
  .search-dropdown .sd-history-item{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:9px 10px; border-radius:8px; font-size:13.5px; color:var(--paper-dim); cursor:pointer;
  }
  .search-dropdown .sd-history-item:hover{background:rgba(255,255,255,0.05); color:var(--paper);}
  .search-dropdown .sd-history-item .sd-remove{opacity:0.5; padding:2px 6px;}
  .search-dropdown .sd-history-item .sd-remove:hover{opacity:1; color:#e07a7a;}
  .search-dropdown .sd-result{
    display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer;
  }
  .search-dropdown .sd-result:hover{background:rgba(255,255,255,0.05);}
  .search-dropdown .sd-result img{width:38px; height:38px; border-radius:8px; object-fit:cover; flex-shrink:0;}
  .search-dropdown .sd-result .sd-title{font-size:13.5px; color:var(--paper);}
  .search-dropdown .sd-result .sd-cat{font-size:11.5px; color:var(--paper-dim);}
  .search-dropdown .sd-empty{padding:14px 10px; font-size:13px; color:var(--paper-dim); text-align:center;}
  @media(max-width:980px){
    .search-box input{width:150px;}
  }
  @media(max-width:700px){
    .search-box{order:4; width:100%;}
    .search-box input{width:100%;}
  }
  .contact-fab{
    width:56px; height:56px; border-radius:50%; background:var(--brass); color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(255,201,77,0.35); transition:transform .25s ease, box-shadow .25s ease;
  }
  .contact-fab:hover{transform:scale(1.08) rotate(8deg); box-shadow:0 10px 30px rgba(255,201,77,0.5);}
  .contact-menu{
    display:flex; flex-direction:column; gap:8px;
    opacity:0; pointer-events:none; transform:translateY(10px) scale(0.9); transform-origin:bottom left;
    transition:opacity .22s ease, transform .22s ease;
  }
  .contact-menu.show{opacity:1; pointer-events:auto; transform:translateY(0) scale(1);}
  .contact-item{
    width:46px; height:46px; border-radius:50%; background:var(--ink-2); border:1px solid var(--line);
    color:var(--paper); display:flex; align-items:center; justify-content:center;
    transition:transform .2s ease, background .2s ease, border-color .2s ease;
  }
  .contact-item:hover{transform:scale(1.1); background:var(--brass); color:var(--ink); border-color:var(--brass);}

  .lightbox{
    position:fixed; inset:0; background:rgba(5,3,12,0.92); z-index:400;
    display:none; align-items:center; justify-content:center; padding:30px;
    cursor:zoom-out; backdrop-filter:blur(4px);
  }
  .lightbox.show{display:flex;}
  .lightbox img{max-width:92vw; max-height:92vh; object-fit:contain; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,0.6);}

  .admin-product-row{
    display:flex; align-items:center; gap:12px; padding:10px; border-bottom:1px solid var(--line);
  }
  .admin-product-row img{width:44px; height:56px; object-fit:cover; border-radius:6px; flex-shrink:0;}
  .admin-product-info{flex:1; display:flex; flex-direction:column; gap:2px; font-size:13px;}
  .admin-product-info span{color:var(--paper-dim); font-size:12px;}
  .admin-move-cat{
    margin-top:4px; background:var(--ink); color:var(--paper); border:1px solid var(--line);
    border-radius:6px; padding:3px 6px; font-size:11.5px; max-width:150px;
  }
  .admin-cat-group{margin-bottom:10px;}
  .admin-cat-group h4{
    font-size:12px; color:var(--brass); text-transform:uppercase; letter-spacing:0.5px;
    margin:14px 0 6px; padding-bottom:4px; border-bottom:1px solid var(--line);
  }
  .admin-product-actions button:disabled{opacity:0.25; cursor:default;}
  .admin-product-actions{display:flex; gap:6px;}
  .admin-product-actions button{background:var(--ink-2); border:1px solid var(--line); border-radius:6px; padding:6px 10px; font-size:14px;}
  .admin-product-actions button:hover{border-color:var(--brass);}

  .soft-launch-banner{
    background:linear-gradient(90deg, var(--brass), #ffe08a, var(--brass));
    background-size:200% 100%;
    animation:bannerShimmer 3.5s ease-in-out infinite;
    color:var(--ink); text-align:center; font-weight:700; font-size:14px;
    padding:10px 16px; letter-spacing:0.2px;
  }
  @keyframes bannerShimmer{
    0%, 100%{ background-position:0% 50%; box-shadow:0 0 0 rgba(255,201,77,0); }
    50%{ background-position:100% 50%; box-shadow:0 0 18px rgba(255,201,77,0.55); }
  }
  .promo-countdown{
    display:inline-block; margin-inline-start:10px; background:rgba(12,12,16,0.35);
    padding:3px 12px; border-radius:100px; font-variant-numeric:tabular-nums;
  }
  @media(prefers-reduced-motion: reduce){ .soft-launch-banner{animation:none;} }

  /* Logo: a slow gold sheen sweeps across the wordmark every few seconds — a
     subtle, recurring flash rather than a one-off entrance animation, so it
     keeps catching the eye without being distracting while reading. */
  .logo > span > .logo-accent{
    background:linear-gradient(90deg, var(--brass) 0%, #fff3c4 50%, var(--brass) 100%);
    background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:logoSheen 4s ease-in-out infinite;
  }
  @keyframes logoSheen{
    0%, 15%{ background-position:200% 0; }
    50%, 65%{ background-position:0% 0; }
    100%{ background-position:-200% 0; }
  }
  @media(prefers-reduced-motion: reduce){ .logo span > span.logo-accent{animation:none;} }

  @media(max-width:860px){
    .hero{grid-template-columns:1fr;}
    .hero::before{width:340px; height:340px; top:-90px; left:-70px; filter:blur(55px);}
    .pricing-grid{grid-template-columns:1fr;}
    .hero h1{font-size:36px;}
  }

  /* ===== Header controls (lang / view toggles) — same height, weight of
     border, and radius as the other header controls (theme switch, account,
     track order) so the whole row reads as one deliberate family instead of
     five differently-sized pieces. ===== */
  .ctrl-group{
    display:flex; align-items:center; gap:4px; height:44px; box-sizing:border-box;
    background:var(--ink-2); border:1.5px solid var(--brass); border-radius:10px; padding:0 4px;
  }
  .ctrl-group button{
    display:inline-flex; align-items:center; gap:6px; height:36px; box-sizing:border-box;
    background:transparent; color:var(--paper-dim); padding:0 12px; border-radius:7px; font-size:12.5px;
  }
  .ctrl-group button.active{background:var(--brass); color:var(--ink); font-weight:700;}
  .ctrl-group button.active .icon-badge{border-color:var(--ink); color:var(--ink);}
  /* Utility-strip sizing — the same gold-outlined pill family, scaled down
     since these live in the quiet secondary strip, not the main row. */
  .ctrl-group.ctrl-group-sm{height:30px; border-width:1px;}
  .ctrl-group.ctrl-group-sm button{height:24px; padding:0 8px; font-size:11px; gap:4px;}
  .ctrl-group.ctrl-group-sm .icon-badge{width:18px; height:18px;}
  .ctrl-group.ctrl-group-sm .icon-badge svg{width:11px; height:11px;}

  /* ===== Icon badge — a small ring in the site's signature gold, used to
     frame a standalone icon (view toggle, account) the same way the
     categories/admin dropdown buttons already frame themselves, so every
     icon in the header reads as one consistent, deliberately-sized family
     instead of mismatched emoji at whatever size the system font gives
     them. */
  .icon-badge{
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:28px; height:28px; border-radius:50%;
    border:1.5px solid var(--brass); color:var(--brass);
  }
  .icon-badge svg{width:17px; height:17px; display:block;}
  @media(max-width:460px){
    .icon-badge{width:24px; height:24px;}
    .icon-badge svg{width:15px; height:15px;}
  }

  /* ===== Day/night switch — one rectangle whose sky changes with the mode:
     a lit sun on a pale blue/gold sky for day, a crescent in a dark starry
     sky for night. The knob carries whichever icon is active and slides to
     that side; inset-inline-start (not left) so it slides the right way in
     both Arabic (RTL) and English (LTR). Same height and gold border-weight
     as the other four header controls (view/lang toggles, account, track
     order) so the row reads as one family instead of five different sizes.
     Reused as-is (at a smaller scale) in the admin panel. */
  .theme-toggle{
    position:relative; width:84px; height:44px; border-radius:100px; flex-shrink:0; box-sizing:border-box;
    border:1.5px solid var(--brass); padding:0; cursor:pointer; overflow:hidden;
    background:linear-gradient(90deg,#bfe3ff,#ffe8a3); transition:background .35s ease;
  }
  .theme-toggle.is-night{ background:linear-gradient(90deg,#0c1233,#1c2760); }
  .theme-toggle:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
  .theme-toggle .tt-stars{ position:absolute; inset:0; opacity:0; transition:opacity .3s ease; }
  .theme-toggle.is-night .tt-stars{ opacity:1; }
  .theme-toggle .tt-star{ position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:0.85; }
  /* Static end icons ringed in the site's signature gold, same framing
     language as the categories/admin dropdown buttons, so the sun and moon
     read as one equally-sized pair rather than two differently-weighted
     glyphs (a filled moon vs. an outline sun previously looked mismatched
     even at the same box size). */
  .theme-toggle .tt-icon{
    position:absolute; top:50%; transform:translateY(-50%); z-index:1;
    width:22px; height:22px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1.3px solid rgba(255,201,77,0.65);
  }
  .theme-toggle .tt-icon svg{width:14px; height:14px; display:block;}
  .theme-toggle .tt-sun{ inset-inline-start:7px; color:#c98a12; }
  .theme-toggle .tt-moon{ inset-inline-end:7px; color:#c7c4ff; }
  .theme-toggle .tt-knob{
    position:absolute; top:3px; inset-inline-start:3px; width:38px; height:38px; border-radius:50%;
    background:#fff8ec; color:#c98a12; display:flex; align-items:center; justify-content:center;
    border:1.5px solid var(--brass);
    box-shadow:0 1px 5px rgba(0,0,0,0.35); transition:inset-inline-start .35s cubic-bezier(.4,1.5,.6,1), background .35s ease, color .35s ease;
  }
  .theme-toggle.is-night .tt-knob{ inset-inline-start:43px; background:#171b35; color:#f2efff; }
  .theme-toggle .tt-knob svg{width:23px; height:23px; display:block;}
  .theme-toggle .tt-knob-sun,.theme-toggle .tt-knob-moon{display:flex; width:23px; height:23px;}
  .theme-toggle .tt-knob-moon{display:none;}
  .theme-toggle.is-night .tt-knob-sun{display:none;}
  .theme-toggle.is-night .tt-knob-moon{display:flex;}
  .theme-toggle.theme-toggle-sm{width:60px; height:32px;}
  .theme-toggle.theme-toggle-sm .tt-icon{width:16px; height:16px;}
  .theme-toggle.theme-toggle-sm .tt-icon svg{width:10px; height:10px;}
  .theme-toggle.theme-toggle-sm .tt-knob{width:27px; height:27px;}
  .theme-toggle.theme-toggle-sm .tt-knob svg{width:16px; height:16px;}
  .theme-toggle.theme-toggle-sm .tt-knob-sun,.theme-toggle.theme-toggle-sm .tt-knob-moon{width:16px; height:16px;}
  .theme-toggle.theme-toggle-sm.is-night .tt-knob{inset-inline-start:30px;}
  @media (prefers-reduced-motion: reduce){
    .theme-toggle, .theme-toggle .tt-knob, .theme-toggle .tt-stars{transition:none;}
  }
  .header-controls{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  @media(max-width:700px){
    .header-utility{justify-content:center; flex-wrap:wrap; padding:6px 16px; gap:8px;}
  }

  /* ===== Forced view modes ===== */
  body.view-mode-desktop{overflow-x:auto;}
  body.view-mode-desktop #appRoot{min-width:1180px;}

  body.view-mode-mobile{background:#120a22; display:flex; justify-content:center; padding:22px 0;}
  body.view-mode-mobile #appRoot{
    max-width:412px; width:100%; border:1px solid var(--line); border-radius:26px;
    overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.6);
    /* No opaque background here on purpose — an opaque fill would sit on top of
       the fixed, full-viewport .site-watermark-bg layer and block it from
       showing through the phone-frame preview, which is why it looked
       "not working" in mobile mode. Letting it stay transparent lets the
       watermark (and its animation) show through exactly like on desktop. */
  }
  body.view-mode-mobile .header-utility{justify-content:center; flex-wrap:wrap; padding:6px 16px;}
  body.view-mode-mobile .nav-wrap{flex-wrap:wrap; gap:10px; padding:14px 16px;}
  body.view-mode-mobile nav.cats{width:100%; order:3; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;}
  body.view-mode-mobile .hero{grid-template-columns:1fr; padding:28px 18px 24px; gap:24px;}
  body.view-mode-mobile .hero::before{width:320px; height:320px; top:-80px; left:-80px; filter:blur(50px);}
  body.view-mode-mobile .hero h1{font-size:26px;}
  body.view-mode-mobile .hero p{font-size:14.5px;}
  body.view-mode-mobile .eyebrow{font-size:11px;}
  body.view-mode-mobile .cat-section{padding:36px 16px 10px;}
  body.view-mode-mobile .section-head h2{font-size:22px;}
  body.view-mode-mobile .grid > .card{flex-basis:100%;}
  body.view-mode-mobile .cat-tiles-grid{grid-template-columns:repeat(2, 1fr); gap:14px;}
  body.view-mode-mobile .pricing{padding:40px 16px;}
  body.view-mode-mobile .pricing-grid{grid-template-columns:1fr;}
  body.view-mode-mobile .modal{padding:20px;}
  body.view-mode-mobile .frame{width:110px; height:140px;}
  body.view-mode-mobile footer{padding:24px 16px; font-size:12px;}

  @media(max-width:860px){
    body:not(.view-mode-desktop) .hero{grid-template-columns:1fr;}
    body:not(.view-mode-desktop) .pricing-grid{grid-template-columns:1fr;}
    body:not(.view-mode-desktop) .hero h1{font-size:36px;}
  }
  @media (prefers-reduced-motion: reduce){
    .strip-track{animation:none;}
    .prompt-panel.unlocked{animation:none;}
  }

  /* ===== Performance report (period selector, chart, narrative) ===== */
  .report-period-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
  .report-period-btn{
    padding:6px 14px; border-radius:100px; border:1px solid var(--line);
    background:transparent; color:var(--paper-dim); font-size:12.5px; cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .report-period-btn.active{background:var(--brass); color:var(--ink); border-color:var(--brass); font-weight:600;}
  .report-custom-range{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
  .report-custom-range input[type="date"]{
    background:var(--ink-3); border:1px solid var(--line); color:var(--paper);
    border-radius:6px; padding:6px 8px; font-size:12.5px;
  }
  .report-h4{margin:0 0 8px; font-size:14px; color:var(--brass); font-weight:700;}
  .report-scope-note{font-weight:400; color:var(--paper-dim); font-size:11.5px;}
  .report-compare-note{font-size:13px; color:var(--paper-dim);}
  .report-up{color:var(--sage); font-weight:700;}
  .report-down{color:#e07a7a; font-weight:700;}
  .report-chart-wrap{background:var(--ink-3); border:1px solid var(--line); border-radius:10px; padding:10px;}
  .report-chart-wrap canvas{width:100%; display:block;}
  .report-narrative{background:var(--ink-3); border:1px solid var(--line); border-radius:10px; padding:12px 14px;}
  .report-narrative p{margin:0 0 8px; font-size:13px; color:var(--paper-dim); line-height:1.6;}
  .report-narrative p:last-child{margin-bottom:0;}

  /* Regeneration guarantee — kept near the pricing plans/CTA per audit
     feedback, instead of being buried only inside the FAQ accordion. */
  .pricing-guarantee{
    margin-top:16px; text-align:center; font-size:13.5px; font-weight:600;
    color:var(--brass); background:rgba(255,201,77,0.08); border:1px solid var(--brass-dim);
    border-radius:10px; padding:10px 16px;
  }