:root{
    /* Theme Customizer -- these 20+ variables are overridden by
       includes/theme-head.php's generated <style> block when the site
       owner customizes colors/fonts/etc in Admin Panel -> Account ->
       Theme. Left untouched, these defaults reproduce the original
       hand-built design exactly. */
    --blue-500:#3B6EF6;
    --blue-600:#2F5FE0;
    --purple-500:#8B6EF0;
    --ink-900:#0E1730;
    --ink-700:#22304A;
    --ink-500:#5B6B85;
    --ink-300:#94A3B8;
    --line:#E7EAF0;
    --bg-soft:#F6F7FB;
    --card-bg:#FFFFFF;
    --yellow:#FFB020;
    --radius-lg:20px;
    --radius-md:14px;
    --radius-sm:10px;
    --dgv-page-bg:#FFFFFF;
    --dgv-price:var(--blue-600);
    --dgv-link:var(--blue-600);
    --dgv-icon:var(--ink-500);
    --dgv-btn-text:#FFFFFF;
    --dgv-header-bg:rgba(255,255,255,.38);
    --dgv-header-text:var(--ink-900);
    --dgv-footer-bg:var(--ink-900);
    --dgv-footer-text:#B9C1D4;
    --dgv-footer-heading:#FFFFFF;
    --dgv-font:'Segoe UI',Arial,Helvetica,sans-serif;
    --dgv-font-bn:'Hind Siliguri','Segoe UI',Arial,sans-serif;
    --dgv-shadow:0 8px 30px rgba(60,90,180,.06);
    --dgv-section-py:24px;
    --dgv-banner-overlay:#0E1730;
    --dgv-banner-overlay-opacity:0;
    --dgv-banner-text:#FFFFFF;
    --dgv-video-btn:#FF4D4F;
  }
  *{box-sizing:border-box;}
  /* Theme Customizer -> Dark Mode -> "Let visitors switch themselves" off --
     hides the sidebar's whole Appearance section (used to hide the old
     standalone header theme icon button, now removed entirely). */
  html.theme-toggle-locked .menu-sidebar-appearance-section{display:none;}
  /* Language flash-of-untranslated-content guard: header.php's early inline
     script adds this before paint when the saved language is Bangla, and
     assets/js/index.js removes it right after applyTranslations() finishes,
     so Bangla visitors never see a blink of English on reload. */
  html.lang-loading body{visibility:hidden;}
  /* Admin-authored bilingual content (Legal Pages builder): both language
     versions are rendered server-side, then one is hidden by CSS based on
     the same body.lang-bn class assets/js/index.js already toggles for
     [data-i18n]. display:contents keeps the visible span from affecting
     layout (headings, paragraphs, list items) as if it were never wrapped. */
  .lang-only-bn{display:none;}
  body.lang-bn .lang-only-bn{display:contents;}
  body.lang-bn .lang-only-en{display:none;}
  /* "clip" (not "hidden") on purpose: per spec, setting overflow-x to
     "hidden" forces the browser to silently turn overflow-y into "auto"
     too (even when overflow-y is written out as "visible" here) — and an
     "auto" ancestor breaks header's position:sticky. "clip" is exempt
     from that auto-promotion, so it blocks the horizontal white-gap
     without breaking the sticky topbar. */
  html,body{max-width:100%;overflow-x:clip;overflow-y:visible;}
  body{margin:0;font-family:var(--dgv-font);color:var(--ink-900);background:var(--dgv-page-bg);}
  body.lang-bn{font-family:var(--dgv-font-bn);}
  /* Kills the mobile browser's own gray/blue flash on tap -- purely the
     OS/browser's default "you tapped something" effect, not any of the
     site's own hover/active styling. */
  *{-webkit-tap-highlight-color:transparent;}
  a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;}
  button{font-family:inherit;cursor:pointer;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1240px;margin:0 auto;padding:0 24px;}

  /* HEADER */
  /* background is deliberately hardcoded, NOT var(--dgv-header-bg) -- Theme
     Customizer's "Header Background Color" field can save a fully opaque
     color (e.g. #ffffff), which would silently defeat the glass/blur look
     entirely. The topbar's translucency is a fixed part of the design now. */
  header{
    border-bottom:1px solid rgba(255,255,255,.6);
    padding:16px 0;
    position:sticky;top:0;z-index:100;
    background:rgba(255,255,255,.38);
    color:var(--dgv-header-text);
    backdrop-filter:blur(26px) saturate(200%);
    -webkit-backdrop-filter:blur(26px) saturate(200%);
    box-shadow:var(--dgv-shadow);
  }
  header::before{
    content:'';position:absolute;left:0;right:0;top:-46px;height:100px;
    background:linear-gradient(90deg,#8fdcec 0%,#a9c6f7 22%,#c3b3f4 45%,#e5b9ef 68%,#ffd7c2 100%);
    filter:blur(34px);opacity:.55;pointer-events:none;z-index:-1;
  }
  header .wrap{display:flex;align-items:center;justify-content:space-between;}
  /* Permanent search bar in the topbar — visible on every device, all
     the time (no scroll-trigger, no tap-to-open needed). */
  .header-search{
    position:relative;
    display:flex;align-items:center;flex-shrink:1;flex-grow:0;
    max-width:480px;opacity:1;margin:0 16px;
    /* Smooth two-sided grow/shrink between this and the .search-active
       rule below -- flex-grow/max-width/margin are all real interpolable
       values (not "none"), so this animates instead of snapping. */
    transition:max-width .35s ease,margin .35s ease,flex-grow .35s ease;
  }
  .header-search-bar{
    display:flex;align-items:center;background:#fff;border:1px solid var(--line);
    border-radius:999px;padding:4px 4px 4px 18px;width:100%;overflow:hidden;
    filter:drop-shadow(0 8px 16px rgba(30,40,80,.10));
  }
  .header-search-bar input{border:none;outline:none;background:transparent;flex:1;font-size:14px;padding:9px 0;color:var(--ink-900);min-width:0;}
  .header-search-bar input::placeholder{color:var(--ink-300);}
  .header-search-btn{
    width:44px;height:44px;border-radius:50%;flex-shrink:0;border:1px solid var(--line);
    background:#fff;color:var(--ink-900);display:flex;align-items:center;justify-content:center;
    transition:background .15s,transform .15s;
  }
  .header-search-btn:hover{background:var(--bg-soft);transform:scale(1.05);}
  .header-search-btn svg{width:16px;height:16px;stroke:var(--ink-900);stroke-width:1.8;fill:none;stroke-linecap:round;}
  .header-search-clear{border:0;background:transparent;color:var(--ink-500);font-size:23px;line-height:1;padding:0 6px;cursor:pointer;}
  /* Search-focused mode -- every device: clicking the search box hides the
     logo/topbar icons and lets the search bar expand to fill the topbar.
     .header-search now LIVES inside .header-right (see header.php, moved
     there so it flows naturally with the other right-side buttons instead
     of needing a margin-left:auto hack) -- so hiding header-right's other
     children individually, instead of the whole container, is what lets
     the search bar itself stay visible and expand while everything beside
     it (theme/lang/account/menu) still disappears the same as before. */
  header.search-active .logo,header.search-active .header-right > *:not(.header-search){display:none;}
  /* .header-right itself also needs to grow now (it didn't before, when it
     only ever held small icon buttons) -- otherwise .header-search's own
     flex-grow:1 below only fills header-right's own shrink-to-fit box
     instead of the full topbar width. */
  header.search-active .header-right{flex-grow:1;margin-left:0;}
  header.search-active .header-search{flex-grow:1;max-width:100%;margin:0;}
  header.search-active .header-search-bar{padding:4px 4px 4px 18px;width:100%;height:auto;justify-content:flex-start;background:var(--card-bg);border:1px solid var(--line);box-shadow:0 8px 16px rgba(30,40,80,.10);filter:drop-shadow(0 8px 16px rgba(30,40,80,.10));}
  /* The baseline (collapsed) rule further down sets the input to zero
     width/opacity so only the icon shows -- that must NOT still apply once
     the dropdown is actually open (missing this was the bug: the button
     was rendering hard against the left edge because the input next to it
     was still collapsed to nothing, instead of filling the bar with the
     button trailing at its right end). */
  header.search-active .header-search-bar input{width:auto;min-width:0;flex:1;padding:9px 0;opacity:1;}

  /* ---------- Collapsed search (the DEFAULT/baseline look) ----------
     Icon-only search + theme/language moved into the hamburger's sidebar
     (see .menu-sidebar further down -- Appearance/Language sections are
     always visible there now) is the BASELINE appearance -- correct
     for guests always, and for signed-in customers on a narrow screen.
     header.search-expanded (added only once BOTH a customer is signed in
     AND, via the @media rule further down, there's enough room) restores
     the full search box instead of the icon-only version.
     Baseline-first (rather than an opt-in "collapse" class) means a plain
     guest visitor's very first paint already matches reality with no JS
     needed at all -- includes/header.php also seeds search-expanded
     server-side from a cheap session hint for the signed-in case, so that
     one rarely needs correcting either; index.js's own check is still what
     definitively confirms/fixes it once it resolves.
     The search input stays in the DOM at zero width (not display:none) so
     it's still focusable -- clicking the icon calls .focus() on it, which
     triggers search-dropdown.js's existing focus-opens-the-dropdown
     behavior, same as clicking directly into an expanded box already does.
     :not(.search-active) throughout so none of this fights the real
     full-takeover state once the dropdown is actually open. ---------- */
  .header-search{max-width:44px;margin:0;}
  .header-search-bar{padding:0;width:44px;height:44px;justify-content:center;background:transparent;border:none;box-shadow:none;filter:none;}
  .header-search-bar input{width:0;min-width:0;flex:0;padding:0;opacity:0;}
  /* Collapsed search leaves a lot of dead space between the (now tiny) icon
     and the right-side buttons if the header just relies on the wrap's own
     justify-content:space-between across all 3 children -- pin header-right
     to the far edge instead, so logo+search stay snug together on the left
     regardless of how much room the collapsed search bar isn't using. */
  .header-right{margin-left:auto;}

  /* ---------- Search dropdown (Recent / Popular Searches / Popular Products) ---------- */
  .header-search-dropdown{
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    background:#fff;border:1px solid var(--line);border-radius:20px;
    box-shadow:0 24px 60px rgba(20,30,60,.18);
    padding:18px;opacity:0;visibility:hidden;
    /* CLOSE animation -- this (base, no .show) rule is what actually runs
       the instant .show gets removed. Opacity + visibility ONLY, nothing
       else: no transform, no width/height change here at all. The search
       bar above shrinks on its own, independently and immediately --
       search-dropdown.js freezes this element as position:fixed at its
       exact current size/position right before removing .show, so it is
       fully decoupled from that shrink and simply fades in place at full
       size for 0.5s. */
    transition:opacity .5s ease,visibility .5s ease;
    z-index:120;max-height:min(70vh,560px);overflow-y:auto;
  }
  /* OPEN animation -- its own separate, faster entrance (a quick fade +
     slight slide-down), untouched by the close behavior above since a
     CSS animation's transform doesn't persist as a static value once it
     finishes (there's no transform in the base rule for it to clash with). */
  .header-search-dropdown.show{
    opacity:1;visibility:visible;
    transition:opacity .15s ease,visibility .15s ease;
    animation:dgvSearchDdIn .18s ease;
  }
  @keyframes dgvSearchDdIn{
    from{opacity:0;transform:translateY(-8px);}
    to{opacity:1;transform:translateY(0);}
  }
  .hsd-section{margin-bottom:18px;}
  .hsd-section:last-of-type{margin-bottom:14px;}
  .hsd-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
  .hsd-section-title{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.05em;color:var(--ink-500);text-transform:uppercase;}
  .hsd-section-title svg{width:14px;height:14px;stroke:var(--ink-500);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
  .hsd-clear-btn{background:none;border:none;font-size:12.5px;font-weight:700;color:var(--blue-600);cursor:pointer;padding:0;}
  .hsd-recent-pills,.hsd-popular-pills{display:flex;flex-wrap:wrap;gap:8px;}
  .hsd-recent-wrap{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:#fff;overflow:hidden;}
  .hsd-recent-wrap .hsd-recent-pill{border:0;border-radius:0;}
  .hsd-recent-remove{border:0;background:transparent;color:var(--ink-400);font-size:18px;line-height:1;padding:4px 9px 5px 2px;cursor:pointer;}
  .hsd-recent-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:600;color:var(--ink-700);cursor:pointer;}
  .hsd-recent-pill svg{width:13px;height:13px;stroke:var(--ink-500);stroke-width:1.8;fill:none;flex-shrink:0;}
  .hsd-popular-pill{padding:8px 16px;border-radius:999px;background:var(--bg-soft);border:1px solid transparent;font-size:13px;font-weight:700;color:var(--blue-600);cursor:pointer;}
  .hsd-recent-pill.kbd-active,.hsd-popular-pill.kbd-active{background:var(--blue-500);border-color:var(--blue-500);color:#fff;}
  .hsd-recent-pill.kbd-active svg{stroke:#fff;}
  .hsd-products-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  @media (max-width:480px){.hsd-products-grid{grid-template-columns:1fr;}}
  .hsd-product-card{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;border:1px solid var(--line);cursor:pointer;}
  .hsd-product-card:hover,.hsd-product-card.kbd-active{background:var(--bg-soft);}
  .hsd-product-thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--bg-soft);}
  .hsd-product-info{min-width:0;}
  .hsd-product-name{font-size:13.5px;font-weight:700;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .hsd-product-price{font-size:12.5px;color:var(--ink-500);margin-top:2px;}
  .hsd-product-arrow{margin-left:auto;width:16px;height:16px;stroke:var(--ink-300);flex-shrink:0;fill:none;stroke-width:1.8;}
  .hsd-empty{padding:20px 0;text-align:center;font-size:13.5px;color:var(--ink-500);}
  .hsd-empty strong,.hsd-empty span{display:block;}.hsd-empty strong{color:var(--ink-800);margin-bottom:4px;}.hsd-empty button{margin-top:10px;border:0;border-radius:999px;background:var(--bg-soft);color:var(--blue-600);font-weight:700;padding:7px 12px;cursor:pointer;}
  .hsd-filter-row{display:flex;gap:8px;margin:0 0 14px;}.hsd-filter-row select{min-width:0;flex:1;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink-700);padding:8px;font-size:12px;}
  .hsd-live-head{margin-bottom:8px;}
  .hsd-live-count{font-size:11.5px;font-weight:800;letter-spacing:.05em;color:var(--ink-500);text-transform:uppercase;}
  .hsd-live-seeall{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:var(--blue-600);text-decoration:none;}
  .hsd-live-seeall svg{width:14px;height:14px;stroke:var(--blue-600);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .hsd-live-list{display:flex;flex-direction:column;gap:6px;}
  .hsd-live-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;border:1px solid transparent;text-decoration:none;}
  .hsd-live-row:hover{background:var(--bg-soft);}
  .hsd-live-row.kbd-active{background:var(--bg-soft);border-color:var(--blue-500);}
  .hsd-live-thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--bg-soft);}
  .hsd-live-info{min-width:0;flex:1;}
  .hsd-live-name{font-size:13.5px;font-weight:700;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .hsd-live-name mark{background:#FFF0A6;color:inherit;border-radius:3px;padding:0 1px;}
  .hsd-live-category{font-size:12px;color:var(--ink-500);margin-top:2px;}
  .hsd-live-price{font-size:12.5px;font-weight:700;color:var(--ink-700);flex-shrink:0;}
  .hsd-live-enter-hint{display:none;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--blue-600);flex-shrink:0;margin-left:8px;}
  .hsd-live-enter-hint kbd{display:inline-block;padding:2px 6px;border-radius:5px;background:#fff;border:1px solid var(--line);font-family:inherit;font-size:11px;}
  .hsd-live-row.kbd-active .hsd-live-enter-hint{display:inline-flex;}
  .hsd-footer{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--line);gap:10px;flex-wrap:wrap;}
  .hsd-footer-hints{display:flex;gap:16px;font-size:11.5px;color:var(--ink-500);flex-wrap:wrap;}
  .hsd-footer-hints kbd{display:inline-block;padding:2px 6px;border-radius:5px;background:var(--bg-soft);border:1px solid var(--line);font-family:inherit;font-size:11px;margin-right:2px;}
  .hsd-footer-brand{font-size:11.5px;font-weight:700;color:var(--ink-300);}
  .logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:22px;color:var(--ink-900);}
  .logo .dot{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--blue-500),var(--purple-500));display:inline-block;position:relative;}
  .menu-wrap{position:relative;}
  .menu-trigger{
    display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);
    width:44px;height:44px;border-radius:50%;color:var(--ink-700);position:relative;
    transition:background .15s,border-color .15s;
  }
  .menu-trigger .badge{position:absolute;top:-6px;right:-6px;background:var(--purple-500);color:var(--dgv-btn-text);font-size:10px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
  .menu-trigger:hover{background:var(--bg-soft);border-color:#d7dce6;}
  .menu-trigger .burger{width:18px;height:13px;stroke:var(--ink-700);stroke-width:1.6;fill:none;stroke-linecap:round;}
  .nav-menu-icon{width:18px;height:18px;stroke:var(--ink-700);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
  .nav-menu-icon-solid{width:18px;height:18px;fill:var(--ink-700);stroke:none;flex-shrink:0;}
  .header-right{display:flex;align-items:center;gap:12px;}
  .icon-btn{width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--card-bg);display:flex;align-items:center;justify-content:center;font-size:16px;position:relative;color:var(--dgv-icon);}
  .icon-btn .badge{position:absolute;top:-6px;right:-6px;background:var(--purple-500);color:var(--dgv-btn-text);font-size:10px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
  .icon-btn .person{width:19px;height:19px;stroke:var(--dgv-btn-text);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .icon-btn .cart-icon{width:19px;height:19px;stroke:var(--ink-700);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
  body.theme-dark .icon-btn .cart-icon{stroke:#EDF1F9;}
  .create-account-btn{background:var(--blue-500);border:none;overflow:hidden;}
  .account-btn-avatar-img{width:100%;height:100%;object-fit:cover;display:block;}
  .account-btn-initial{color:var(--dgv-btn-text);font-size:16px;font-weight:800;line-height:1;}
  /* Signed-out topbar state (see accountWrap/headerAuthButtons toggle in
     index.js's renderAccountUI()) -- Sign In stays a plain outline pill so
     it doesn't visually compete with Sign Up's solid fill (the action most
     new visitors actually want). */
  .header-auth-buttons{display:flex;align-items:center;gap:8px;}
  .header-signin-btn,.header-signup-btn{height:42px;padding:0 18px;border-radius:21px;font-size:13.5px;font-weight:700;white-space:nowrap;}
  .header-signin-btn{background:var(--card-bg);border:1px solid var(--line);color:var(--ink-700);}
  .header-signin-btn:hover{background:var(--bg-soft);border-color:#d7dce6;}
  .header-signup-btn{background:var(--blue-500);border:none;color:var(--dgv-btn-text);}
  body.theme-dark .header-signin-btn{background:#131B2C;border-color:#232F45;color:#EDF1F9;}
  body.theme-dark .header-signin-btn:hover{background:#1B2438;}
  @media(max-width:640px){
    .header-signin-btn,.header-signup-btn{height:38px;padding:0 13px;font-size:12.5px;}
    .header-auth-buttons{gap:6px;}
  }
  /* position:relative so #headerVerifiedBadge (a sibling of #createAccountBtn,
     not a child -- that button's own innerHTML gets fully replaced by JS)
     can be positioned at the avatar's corner. */
  .account-wrap{position:relative;}
  /* ---------- Verified-customer badge -- small checkmark circle overlaid
     on a customer's avatar wherever it appears (header icon, sidebar
     header; profile.php has its own equivalent .profile-verified-badge at
     a bigger size). Base rule + one sized variant per avatar context. ---------- */
  .avatar-verified-badge{
    position:absolute;bottom:-2px;right:-2px;background:#1D9BF0;
    border:2px solid var(--card-bg);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
  }
  .avatar-verified-badge svg{stroke:#fff;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .account-wrap .avatar-verified-badge{width:16px;height:16px;stroke-width:2.6;}
  .account-wrap .avatar-verified-badge svg{width:9px;height:9px;stroke-width:2.6;}
  .menu-sidebar-header-avatar-wrap .avatar-verified-badge{width:18px;height:18px;}
  .menu-sidebar-header-avatar-wrap .avatar-verified-badge svg{width:10px;height:10px;stroke-width:2.6;}
  .lang-option{background:transparent;border:none;text-align:left;padding:10px 14px;border-radius:10px;font-weight:600;font-size:14.5px;color:var(--ink-700);width:100%;}
  .lang-option:hover{background:var(--bg-soft);color:var(--blue-600);}
  .lang-option.active{color:var(--blue-600);background:var(--bg-soft);}
  .theme-option{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-weight:600;font-size:14.5px;color:var(--ink-700);background:transparent;border:none;text-align:left;width:100%;}
  .theme-option:hover{background:var(--bg-soft);}
  .theme-option .opt-icon{width:17px;height:17px;flex-shrink:0;}
  .theme-option .opt-icon.sun-icon{stroke:var(--ink-500);stroke-width:1.8;fill:none;stroke-linecap:round;}
  .theme-option .opt-icon.moon-icon{fill:var(--ink-500);stroke:none;}
  .theme-option.active{background:#EAF1FF;color:var(--blue-600);}
  .theme-option.active .opt-icon.sun-icon{stroke:var(--blue-600);}
  .theme-option.active .opt-icon.moon-icon{fill:var(--blue-600);}

  /* ---------- Sidebar Appearance/Language segmented pills -- the ONLY
     place these controls live now (standalone header theme/lang dropdowns
     were removed entirely). Margin matches .menu-sidebar-section-label's
     own 20px side padding above it, so the pill lines up flush with the
     label instead of sitting narrower/offset. ---------- */
  .menu-segmented{display:flex;background:var(--bg-soft);border-radius:999px;padding:4px;margin:0 20px 14px;gap:4px;}
  .menu-segmented .theme-option,.menu-segmented .lang-option{
    flex:1;width:auto;justify-content:center;text-align:center;padding:11px 10px;gap:7px;border-radius:999px;font-size:14px;
  }
  /* Selected segment needs to read clearly at a glance -- white pill +
     visible shadow + a hairline border (the shadow alone was too subtle
     against the light-gray track) on top of the blue text/icon. */
  .menu-segmented .theme-option.active,.menu-segmented .lang-option.active{
    background:var(--card-bg);color:var(--blue-600);
    box-shadow:0 2px 8px rgba(20,30,60,.16);
    border:1px solid rgba(20,30,60,.06);
  }
  .menu-segmented .check-icon{display:none;}
  .menu-segmented .opt-icon{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
  body.theme-dark .menu-segmented{background:#0B1220;}
  body.theme-dark .menu-segmented .theme-option.active,
  body.theme-dark .menu-segmented .lang-option.active{background:#1B2740;color:#8FB4FF;border-color:rgba(255,255,255,.06);}

  /* ---------- Left slide-in menu sidebar (replaces the old small hamburger
     dropdown -- see #menuSidebarOverlay in header.php, opened/closed by
     index.js's openMenuSidebar()/closeMenuSidebar()). Same fixed-overlay +
     .show-class convention as .auth-overlay above, just a left-edge panel
     instead of a centered modal. ---------- */
  .menu-sidebar-overlay{
    position:fixed;inset:0;background:rgba(14,23,48,.5);backdrop-filter:blur(2px);
    z-index:400;opacity:0;visibility:hidden;
    /* Keep the overlay visible until the panel finishes sliding back out.
       Without the delayed visibility change, removing .show hides the
       panel immediately and its right-to-left close transition is lost. */
    transition:opacity .28s, visibility 0s linear .28s;
    /* Centers .menu-sidebar-backdrop-hint in the backdrop space actually
       left over once .menu-sidebar (itself position:fixed, so it doesn't
       consume flex space on its own) is accounted for -- padding-left is
       just a positioning offset here, matching .menu-sidebar's own width
       at each breakpoint below. */
    display:flex;align-items:center;justify-content:center;padding-left:320px;
  }
  .menu-sidebar-overlay.show{opacity:1;visibility:visible;transition:opacity .28s, visibility 0s linear 0s;}
  .menu-sidebar{
    position:fixed;top:0;left:0;bottom:0;width:320px;max-width:86vw;
    background:var(--card-bg);box-shadow:0 0 40px rgba(20,30,60,.24);
    display:flex;flex-direction:column;overflow:hidden;
    transform:translateX(-100%);transition:transform .28s cubic-bezier(.32,.72,0,1);
  }
  .menu-sidebar-overlay.show .menu-sidebar{transform:translateX(0);}
  /* No close (X) button anymore -- this sits on the backdrop instead,
     explaining that a tap anywhere out here closes the sidebar (it's a
     real click target too, not just decorative text: see the overlay's
     click handler in index.js). Fades in/out in sync with the backdrop
     itself rather than sliding, since it's not part of the sliding panel. */
  .menu-sidebar-backdrop-hint{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    color:#fff;opacity:.85;cursor:pointer;padding:20px;text-align:center;
  }
  .menu-sidebar-backdrop-hint svg{width:28px;height:28px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .menu-sidebar-backdrop-hint span{font-size:13.5px;font-weight:600;max-width:180px;}

  .menu-sidebar-header{
    display:flex;align-items:center;gap:14px;padding:26px 20px 20px;
    background:linear-gradient(135deg,#EAF1FF,#F3EEFF);flex-shrink:0;
  }
  .menu-sidebar-header-avatar{
    width:52px;height:52px;border-radius:50%;flex-shrink:0;overflow:hidden;
    background:linear-gradient(135deg,var(--blue-500),var(--purple-500));
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:800;
  }
  .menu-sidebar-header-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
  .menu-sidebar-header-avatar.guest{background:var(--ink-300);}
  .menu-sidebar-header-avatar .person{width:24px;height:24px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  /* Wraps .menu-sidebar-header-avatar (not the avatar itself) so the
     verified badge can sit at the circle's edge without being clipped by
     the avatar's own overflow:hidden (needed there to crop photos into a
     circle). */
  .menu-sidebar-header-avatar-wrap{position:relative;flex-shrink:0;}
  .menu-sidebar-header-text{min-width:0;}
  .menu-sidebar-greeting{font-size:15px;font-weight:800;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .menu-sidebar-email{font-size:12.5px;color:var(--ink-500);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* The ONLY scrollable region in the sidebar -- header above and the
     Logout footer below (added further down) both stay flex-shrink:0 and
     never move. Thin, on-brand scrollbar (same gradient-thumb recipe as
     .auth-modal's) instead of the browser's default chunky one. */
  .menu-sidebar-body{
    flex:1;min-height:0;overflow-y:auto;padding:8px 0 20px;
    scrollbar-width:thin;scrollbar-color:rgba(139,110,240,.45) transparent;
  }
  .menu-sidebar-body::-webkit-scrollbar{width:6px;}
  .menu-sidebar-body::-webkit-scrollbar-track{background:transparent;}
  .menu-sidebar-body::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--blue-500),var(--purple-500));border-radius:10px;
  }
  .menu-sidebar-body::-webkit-scrollbar-thumb:hover{background:var(--purple-500);}
  body.theme-dark .menu-sidebar-body{scrollbar-color:rgba(139,110,240,.55) transparent;}
  .menu-sidebar-section-label{font-size:11px;font-weight:700;color:var(--ink-300);letter-spacing:.04em;text-transform:uppercase;padding:16px 20px 6px;}
  /* Appearance and Language read as one related pair -- tighter gap between
     them than the usual 16px section-to-section spacing elsewhere in the
     list. Targets specifically the label right after the Appearance
     section (via adjacent-sibling), so Main/Support/App spacing is
     untouched. */
  .menu-sidebar-appearance-section .menu-segmented{margin-bottom:4px;}
  .menu-sidebar-appearance-section + .menu-sidebar-section-label{padding-top:4px;}
  .menu-sidebar-item{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;padding:12px 20px;border:none;background:transparent;text-align:left;
    font-weight:600;font-size:14.5px;color:var(--ink-700);
  }
  .menu-sidebar-item:hover{background:var(--bg-soft);}
  .menu-sidebar-item-left{display:flex;align-items:center;gap:14px;min-width:0;}
  .menu-sidebar-item-left>span:not(.menu-sidebar-icon){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .menu-sidebar-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ink-500);}
  .menu-sidebar-item-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .menu-sidebar-item-sub{font-size:12px;font-weight:500;color:var(--ink-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .menu-sidebar-item-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
  .menu-sidebar-chevron{width:16px;height:16px;stroke:var(--ink-300);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
  .menu-sidebar-item .menu-count-badge{background:var(--purple-500);color:var(--dgv-btn-text);font-size:11px;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px;flex-shrink:0;}
  .menu-sidebar-body .menu-sidebar-section-label:first-child{padding-top:6px;}

  /* Fixed footer -- flex-shrink:0 sibling of .menu-sidebar-body, so it
     never scrolls with the nav list above (see the overflow:hidden on
     .menu-sidebar itself, which pushed all scrolling down into the body). */
  .menu-sidebar-footer{flex-shrink:0;padding:14px 20px;border-top:1px solid var(--line);}
  .menu-sidebar-logout-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
    padding:13px;border-radius:999px;border:1px solid var(--line);background:var(--card-bg);
    font-weight:700;font-size:14.5px;color:var(--ink-700);transition:background .15s,border-color .15s;
  }
  .menu-sidebar-logout-btn:hover{background:var(--bg-soft);border-color:#d7dce6;}
  .menu-sidebar-logout-btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
  body.theme-dark .menu-sidebar-footer{border-color:#232F45;}
  body.theme-dark .menu-sidebar-logout-btn{background:#131B2C;border-color:#232F45;color:#EDF1F9;}
  body.theme-dark .menu-sidebar-logout-btn:hover{background:#1B2438;}

  body.theme-dark .menu-sidebar{background:#0F1728;}
  body.theme-dark .menu-sidebar-header{background:linear-gradient(135deg,#131B2C,#161022);}
  body.theme-dark .menu-sidebar-greeting{color:#EDF1F9;}
  body.theme-dark .menu-sidebar-item{color:#C9D2E3;}
  body.theme-dark .menu-sidebar-item:hover{background:#131B2C;}
  body.theme-dark .menu-sidebar-section-label{color:#6B7690;}

  @media (min-width:640px){
    .menu-sidebar{width:360px;}
    .menu-sidebar-overlay{padding-left:360px;}
  }

  .btn-primary{background:var(--blue-500);color:var(--dgv-btn-text);border:none;padding:11px 20px;border-radius:24px;font-weight:600;font-size:14px;}

  /* HERO */
  .hero{padding:var(--dgv-section-py) 0;text-align:center;}
  .hero-banner{width:100%;height:auto;display:block;margin:0 auto;border-radius:var(--radius-lg);box-shadow:0 24px 60px -18px rgba(10,15,30,.45);}
  .hero h1{font-size:42px;font-weight:800;margin:0 0 18px;color:var(--ink-900);line-height:1.25;}
  .hero p{max-width:620px;margin:0 auto 30px;color:var(--ink-500);font-size:15.5px;line-height:1.6;}

  /* HERO SLIDER (Business Information -> Landing Page Hero Image(s), 2+ images) */
  .hero-slider{position:relative;border-radius:var(--radius-lg);overflow:hidden;cursor:grab;touch-action:pan-y;box-shadow:0 24px 60px -18px rgba(10,15,30,.45);}
  .hero-slider.is-dragging{cursor:grabbing;}
  .hero-slider-track{display:flex;transition:transform .6s cubic-bezier(.65,0,.35,1);}
  .hero-slider-track img,.hero-slider-track video{-webkit-user-drag:none;user-select:none;pointer-events:none;}
  .hero-slide{flex:0 0 100%;width:100%;position:relative;}
  .hero-media-link{display:block;}
  .hero-media-wrap{position:relative;display:block;}
  .hero-mute-btn{position:absolute;right:14px;bottom:14px;z-index:3;width:38px;height:38px;border-radius:50%;border:none;background:rgba(14,23,48,.55);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
  .hero-mute-btn svg{width:18px;height:18px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .hero-mute-btn .icon-unmuted{display:none;}
  .hero-mute-btn.unmuted .icon-muted{display:none;}
  .hero-mute-btn.unmuted .icon-unmuted{display:block;}
  /* Optional tint over hero images -- off (opacity 0) unless the site owner
     turns it on in Theme Customizer -> Banner (useful if they add their own
     text/logo over the banner image via Custom CSS and need better contrast). */
  .hero-slide::after{content:'';position:absolute;inset:0;background:var(--dgv-banner-overlay);opacity:var(--dgv-banner-overlay-opacity);pointer-events:none;border-radius:var(--radius-lg);}
  .hero-slide .hero-banner{border-radius:0;margin:0;box-shadow:none;}
  .hero-slider-dots{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:8px;z-index:2;}
  .hero-dot{width:8px;height:8px;border-radius:999px;border:none;padding:0;cursor:pointer;background:rgba(255,255,255,.5);position:relative;overflow:hidden;transition:width .35s ease,background .35s ease;box-shadow:0 1px 3px rgba(0,0,0,.15);}
  .hero-dot.active{width:26px;background:rgba(255,255,255,.4);}
  .hero-dot.active::after{content:'';position:absolute;inset:0;background:#fff;border-radius:999px;transform:scaleX(0);transform-origin:left;animation:heroDotFill var(--hero-interval,5000ms) linear forwards;}
  @keyframes heroDotFill{to{transform:scaleX(1);}}
  .search-bar{max-width:640px;margin:0 auto;display:flex;align-items:center;background:#fff;border-radius:999px;padding:6px 6px 6px 22px;box-shadow:0 12px 30px rgba(30,40,80,.08);}
  .search-bar input{flex:1;border:none;outline:none;background:transparent;font-size:15px;padding:12px 0;color:var(--ink-900);}
  .search-bar input::placeholder{color:var(--ink-300);}
  .search-bar button{width:44px;height:44px;border-radius:50%;flex-shrink:0;border:1px solid var(--line);background:#fff;color:var(--ink-900);display:flex;align-items:center;justify-content:center;transition:transform .15s,background .15s;box-shadow:0 2px 6px rgba(20,30,60,.05);}
  .search-bar button:hover{transform:scale(1.05);background:var(--bg-soft);}
  .search-bar button svg{width:18px;height:18px;stroke:var(--ink-900);stroke-width:1.8;fill:none;stroke-linecap:round;}
  .blob{position:absolute;border-radius:50%;opacity:.55;filter:blur(1px);}
  .blob.b1{width:140px;height:140px;left:-30px;top:120px;background:radial-gradient(circle at 30% 30%,#9be8f0,#5cc7e0);}
  .blob.b2{width:150px;height:150px;right:-30px;top:70px;background:radial-gradient(circle at 30% 30%,#c9b6f5,#9a7ce8);}

  /* FILTER BAR */
  .category-section-title{font-size:24px;font-weight:800;margin:36px 0 18px;color:var(--ink-900);}
  .filters-top{display:flex;align-items:center;flex-wrap:nowrap;gap:14px;padding:0 0 20px;}
  .category-scroll-wrap{position:relative;flex:1;min-width:0;display:flex;align-items:center;}
  .category-scroll{
    display:flex;align-items:center;gap:12px;flex:1;min-width:0;overflow-x:auto;padding:2px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .category-scroll::-webkit-scrollbar{display:none;}
  .category-scroll-fade{
    position:absolute;top:0;right:0;bottom:0;width:64px;pointer-events:none;
    /* Uses the Admin Panel Theme -> Background Color variable, so this
       scroll-edge fade never leaves a white shadow on a custom background. */
    background:linear-gradient(to right, transparent, var(--dgv-page-bg));
  }
  .category-empty-hint{color:var(--ink-300);font-size:14px;white-space:nowrap;}
  .category-pill{
    display:flex;align-items:center;gap:9px;flex-shrink:0;white-space:nowrap;cursor:pointer;
    border:none;border-radius:13px;padding:6px 16px 6px 6px;font-weight:700;font-size:13.5px;color:var(--ink-900);
    transition:transform .15s,background .15s,color .15s;
  }
  .category-pill:hover{transform:translateY(-2px);}
  .category-pill-icon{
    width:28px;height:28px;border-radius:9px;background:#fff;flex-shrink:0;overflow:hidden;
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:var(--ink-700);
    transition:background .15s,color .15s;
  }
  .category-pill-icon img{width:100%;height:100%;object-fit:cover;}

  .cat-color-0{background:#E9F0FF;}
  .cat-color-1{background:#FFEEDD;}
  .cat-color-2{background:#F3E9FF;}
  .cat-color-3{background:#FFF6D8;}
  .cat-color-4{background:#E4F8EE;}
  .cat-color-5{background:#FFE9EE;}

  .stars{color:var(--yellow);font-size:13px;}

  /* PRODUCT LISTING (Popular Products + one row per category) */
  .product-section{padding:34px 0;}
  .product-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px;}
  .product-section-heading{display:flex;align-items:center;gap:14px;}
  .product-section-icon{
    width:44px;height:44px;border-radius:14px;background:var(--bg-soft);flex-shrink:0;overflow:hidden;
    display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:var(--ink-700);
  }
  .product-section-icon img{width:100%;height:100%;object-fit:cover;}
  .product-section-eyebrow{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--blue-600);margin-bottom:2px;}
  .product-section-heading h2{margin:0;font-size:22px;font-weight:800;color:var(--ink-900);}
  .view-all-btn{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:24px;padding:10px 18px;font-weight:700;font-size:14px;background:#fff;color:var(--ink-900);flex-shrink:0;white-space:nowrap;}
  .view-all-btn:hover{background:var(--bg-soft);}
  /* Only shown on devices where the product grid can't be horizontally
     scrolled (it wraps into a plain 2-column grid instead, see
     .product-card-grid's max-width:640px rule) -- on desktop/tablet you
     just scroll the row sideways to see more, so this stays hidden there. */
  .category-view-more-wrap{display:none;justify-content:center;margin-top:20px;}
  @media (max-width:640px){ .category-view-more-wrap{display:flex;} }
  .category-view-more-btn{border:1px solid var(--line);border-radius:24px;padding:10px 26px;font-weight:700;font-size:13.5px;background:#fff;color:var(--ink-900);cursor:pointer;font-family:inherit;}
  .category-view-more-btn:hover{background:var(--bg-soft);}
  .category-view-more-btn:disabled{opacity:.6;cursor:default;}

  .product-card-grid-wrap{position:relative;}
  .product-card-grid{
    display:flex;gap:20px;overflow-x:auto;padding:4px 2px 10px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .product-card-grid::-webkit-scrollbar{display:none;}
  .product-card-grid-fade{
    position:absolute;top:0;right:0;bottom:10px;width:70px;pointer-events:none;
    background:linear-gradient(to right, transparent, var(--dgv-page-bg));
  }

  /* flex column (not block) so .product-card-body can stretch to fill
     the card's full height and push the "View Plans" button down to a
     shared baseline, regardless of how many lines the name/category
     above it wraps to on any given card. */
  .product-card{display:flex;flex-direction:column;flex:0 0 200px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--card-bg);transition:transform .2s,box-shadow .2s;}
  .product-card-rating{font-size:12px;color:var(--ink-500);margin-bottom:6px;}
  .product-card-rating .stars{color:var(--yellow);letter-spacing:1px;}
  @media (max-width:640px){
    /* No swipe on mobile — wraps into a plain 2-column grid instead of a horizontal scroller. */
    .product-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;overflow-x:visible;padding:4px 2px;}
    .product-card-grid-fade{display:none;}
  }
  .product-card:hover{transform:translateY(-4px);box-shadow:var(--dgv-shadow);}
  .product-card-media{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--bg-soft);isolation:isolate;}
  .product-card-media-image{position:absolute;inset:0;z-index:0;display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;object-fit:cover!important;object-position:center!important;background:var(--bg-soft);}
  .product-card-media.has-image-error{background:linear-gradient(145deg,var(--bg-soft),var(--card-bg));}
  .product-card-media.has-image-error .product-card-no-image{white-space:normal;width:80%;}
  .product-card-media>[hidden]{display:none!important;}
  .product-card-no-image,.product-card-outofstock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12.5px;font-weight:700;color:var(--ink-300);text-align:center;white-space:nowrap;}
  .product-card-outofstock{color:#fff;background:#E5484D;padding:6px 16px;border-radius:20px;letter-spacing:.03em;text-transform:uppercase;font-size:11.5px;box-shadow:0 4px 12px rgba(229,72,77,.4);}
  .prod-color-0{background:#E9F0FF;}
  .prod-color-1{background:#FFEEDD;}
  .prod-color-2{background:#F3E9FF;}
  .prod-color-3{background:#FFF6D8;}
  .prod-color-4{background:#E4F8EE;}
  .prod-color-5{background:#FFE9EE;}
  .product-badge{position:absolute;top:12px;left:12px;background:var(--ink-900);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:5px 12px;border-radius:20px;}
  .product-wish-btn{position:absolute;top:-16px;right:-16px;width:83px;height:83px;border-radius:50%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:visible;}
  .product-wish-btn svg{overflow:visible;}
  /* Round white badge behind the icon (idle look), sized to the icon itself --
     not the whole button, which is deliberately oversized to give the burst
     particles below room to fly outward without being clipped. */
  .product-wish-btn::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.9);z-index:0;}
  /* Solid pink fill that scales in from the center on like (springy pop) and
     scales back out on unlike (plain ease, no bounce, no burst) -- coded to
     match the site owner's supplied reference animation exactly. */
  .wish-fill{
    position:absolute;top:50%;left:50%;width:30px;height:30px;border-radius:50%;
    transform:translate(-50%,-50%) scale(0);
    background:radial-gradient(circle at 35% 30%,#ff5d8d,#E2136E 75%);
    box-shadow:0 0 0 0 rgba(226,19,110,.5);
    z-index:0;
    transition:transform .3s ease-in,box-shadow .3s ease-in;
  }
  .product-wish-btn.active .wish-fill{
    transform:translate(-50%,-50%) scale(1);
    box-shadow:0 0 14px 4px rgba(226,19,110,.55);
    transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .45s ease-out;
  }
  .product-wish-btn.no-anim .wish-fill{transition:none;}
  .wish-heart-icon{position:relative;z-index:2;width:20px;height:20px;stroke:var(--ink-700);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px rgba(0,0,0,.25));transition:stroke .25s ease;}
  .product-wish-btn.active .wish-heart-icon{stroke:#fff;}
  /* Quick squash-then-pop on the heart itself, played once per tap (see
     assets/js/wishlist.js's playLiked()) -- not tied to .active so it never
     replays just from toggling state programmatically. */
  .product-wish-btn.pop .wish-heart-icon{animation:dgvWishHeartPop .45s cubic-bezier(.34,1.56,.64,1);}
  @keyframes dgvWishHeartPop{
    0%{transform:scale(1);}
    30%{transform:scale(.72,1.28);}
    55%{transform:scale(1.22);}
    100%{transform:scale(1);}
  }
  /* Ring of 12 small sparks that fly outward and fade -- only on like, never
     on unlike (matches the reference animation). Each spark is centered on
     the button's exact center (top/left -50% of its own size) so rotate()
     then translateY() spreads them evenly around the ring; --a is set per
     nth-child below. */
  .wish-burst{position:absolute;top:50%;left:50%;width:0;height:0;z-index:1;pointer-events:none;}
  .wish-spark{position:absolute;top:-3.5px;left:-1.5px;width:3px;height:7px;border-radius:2px;background:#E2136E;opacity:0;}
  .product-wish-btn.burst .wish-spark{animation:dgvWishSpark .55s ease-out both;}
  @keyframes dgvWishSpark{
    0%{opacity:1;transform:rotate(var(--a)) translateY(-13px) scale(1);}
    100%{opacity:0;transform:rotate(var(--a)) translateY(-27px) scale(.35);}
  }
  .wish-spark:nth-child(1){--a:0deg;}
  .wish-spark:nth-child(2){--a:30deg;}
  .wish-spark:nth-child(3){--a:60deg;}
  .wish-spark:nth-child(4){--a:90deg;}
  .wish-spark:nth-child(5){--a:120deg;}
  .wish-spark:nth-child(6){--a:150deg;}
  .wish-spark:nth-child(7){--a:180deg;}
  .wish-spark:nth-child(8){--a:210deg;}
  .wish-spark:nth-child(9){--a:240deg;}
  .wish-spark:nth-child(10){--a:270deg;}
  .wish-spark:nth-child(11){--a:300deg;}
  .wish-spark:nth-child(12){--a:330deg;}

  /* ---------- Toast notifications (assets/js/toast.js) ----------
     Wishlist add/remove + cart-add confirmations. Card-stack effect (like
     the reference the owner supplied): the newest toast sits fully on top,
     older ones peek out slightly behind/below it (smaller + dimmer, offset
     down by --i), rather than each getting its own row in a growing list.
     assets/js/toast.js sets --i (0 = frontmost) on every active toast
     whenever one is added or removed, so the stack re-settles smoothly. */
  .dgv-toast-stack{
    position:fixed;top:max(12px, env(safe-area-inset-top));left:50%;transform:translateX(-50%);
    z-index:9999;width:100%;max-width:420px;padding:0 16px;pointer-events:none;
  }
  .dgv-toast{
    --i:0;
    position:absolute;top:0;left:16px;right:16px;
    pointer-events:auto;display:flex;align-items:center;gap:10px;
    background:#fff;color:var(--ink-900);
    border-radius:16px;box-shadow:0 10px 30px rgba(20,30,60,.18);
    padding:14px 18px;box-sizing:border-box;
    font-size:14.5px;font-weight:600;line-height:1.35;
    transform:translateY(-120%);opacity:0;
    z-index:calc(100 - var(--i));
    transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;
    user-select:none;cursor:grab;touch-action:none;
  }
  .dgv-toast.show{
    transform:translateY(calc(var(--i) * 10px)) scale(calc(1 - (var(--i) * 0.045)));
    opacity:calc(1 - (var(--i) * 0.18));
  }
  .dgv-toast.dragging{transition:none;cursor:grabbing;}
  .dgv-toast-icon{
    width:24px;height:24px;border-radius:50%;background:var(--ink-900);color:#fff;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;font-weight:800;
  }
  .dgv-toast-icon.emoji{background:none;color:inherit;width:auto;height:auto;font-size:19px;}
  .dgv-toast-msg{flex:1;}
  body.theme-dark .dgv-toast{background:#131B2C;color:#EDF1F9;box-shadow:0 10px 30px rgba(0,0,0,.4);}
  body.theme-dark .dgv-toast-icon{background:#EDF1F9;color:#131B2C;}

  .product-card-body{padding:12px 18px 14px;display:flex;flex-direction:column;flex:1;}
  .product-card-category{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-300);margin-bottom:4px;}
  .product-card-name{font-size:16px;font-weight:800;color:var(--ink-900);margin-bottom:6px;line-height:1.3;}
  .product-card-name-bn{display:block;font-size:13px;font-weight:600;color:var(--ink-500);margin-top:2px;font-family:var(--dgv-font-bn);}
  /* margin-top:auto here (not on the button) -- this keeps Stock+Price+View
     Plans stuck together as one group at the card's bottom; the flexible
     gap goes above them instead, absorbing however many lines the
     category/name/rating above happen to wrap to. */
  .product-card-stock{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-500);margin-bottom:6px;margin-top:auto;}
  .product-card-stock .dot{width:7px;height:7px;border-radius:50%;background:#94A3B8;}
  .product-card-stock.in-stock .dot{background:#1FAE6E;}
  .product-card-stock.out-stock .dot{background:#E5484D;}
  .product-card-price{font-size:18px;font-weight:800;color:var(--dgv-price);margin-bottom:10px;}
  .product-card-original-price{font-size:14px;font-weight:600;color:var(--ink-300);text-decoration:line-through;margin-right:8px;}
  .product-view-plans-btn{display:block;text-align:center;background:var(--blue-500);color:var(--dgv-btn-text);border-radius:12px;padding:9px;font-weight:700;font-size:14px;}
  .product-view-plans-btn:hover{opacity:.92;}
  .product-view-plans-btn.unavailable{background:var(--bg-soft);color:var(--ink-300);cursor:not-allowed;}
  .product-view-plans-btn.unavailable:hover{opacity:1;}
  body.theme-dark .product-view-plans-btn.unavailable{background:#131B2C;color:#5B6980;}

  /* CATEGORY "VIEW ALL" PAGE */
  .category-page-head{display:flex;align-items:center;gap:16px;padding-top:36px;padding-bottom:26px;}
  .category-page-icon{width:56px;height:56px;border-radius:16px;font-size:24px;}
  .category-page-head h1{margin:2px 0 0;font-size:26px;font-weight:800;color:var(--ink-900);}
  .category-page-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;padding-bottom:40px;}
  @media (max-width:980px){ .category-page-grid{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:640px){ .category-page-grid{grid-template-columns:repeat(2,1fr);gap:14px;} }

  /* "All Products" page -- category filter pill row */
  .products-filter-row{margin-bottom:26px;}
  .products-filter-row .category-scroll{gap:10px;}
  .products-filter-pill{flex-shrink:0;padding:8px 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:13.5px;font-weight:700;color:var(--ink-700);white-space:nowrap;transition:background .15s,color .15s,border-color .15s;}
  .products-filter-pill:hover{background:var(--bg-soft);}
  .products-filter-pill.active{background:var(--blue-500);border-color:var(--blue-500);color:var(--dgv-btn-text);}

  /* PRODUCT DETAILS PAGE */
  .product-detail-wrap{padding-top:24px;padding-bottom:60px;}
  .product-breadcrumb{font-size:13px;color:var(--ink-300);margin-bottom:22px;}
  .product-breadcrumb a{color:var(--ink-500);}
  .product-breadcrumb a:hover{color:var(--blue-600);}

  .product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:40px;}
  @media (max-width:860px){ .product-detail-grid{grid-template-columns:1fr;gap:24px;} }

  .product-gallery-main{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--bg-soft);}
  .product-gallery-main img{width:100%;height:100%;object-fit:cover;display:block;}
  .product-gallery-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:800;color:var(--ink-700);}
  .product-gallery-zoom-btn{
    position:absolute;bottom:14px;right:14px;width:38px;height:38px;border-radius:50%;border:none;
    background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;cursor:pointer;
    box-shadow:0 4px 14px rgba(20,30,60,.18);
  }
  /* Fixed dark color, not var(--ink-900) -- the button's own background
     (rgba(255,255,255,.92) above) never changes with the theme, but
     --ink-900 flips to a near-white color in dark mode, which made the
     icon invisible against its own always-white button. */
  .product-gallery-zoom-btn svg{width:18px;height:18px;stroke:#0E1730;stroke-width:2;fill:none;stroke-linecap:round;}
  .product-gallery-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
  .product-gallery-thumb-btn{width:64px;height:64px;border-radius:10px;overflow:hidden;border:2px solid var(--line);padding:0;cursor:pointer;background:none;}
  .product-gallery-thumb-btn.active{border-color:var(--blue-500);}
  .product-gallery-thumb-btn img{width:100%;height:100%;object-fit:cover;display:block;}

  .product-lightbox-overlay{
    position:fixed;inset:0;background:rgba(10,14,26,.92);z-index:500;display:none;
    align-items:center;justify-content:center;padding:40px;
  }
  .product-lightbox-overlay.show{display:flex;}
  .product-lightbox-overlay img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
  .product-lightbox-close{
    position:absolute;top:20px;right:24px;width:42px;height:42px;border-radius:50%;border:none;
    background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;cursor:pointer;
  }
  .product-lightbox-close:hover{background:rgba(255,255,255,.2);}
  .product-lightbox-nav{
    position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:none;
    background:rgba(255,255,255,.12);color:#fff;font-size:16px;cursor:pointer;
  }
  .product-lightbox-nav:hover{background:rgba(255,255,255,.2);}
  .product-lightbox-nav.prev{left:20px;}
  .product-lightbox-nav.next{right:20px;}

  /* Everything from the product name down through the Add to Cart/Buy Now
     buttons lives in one card (name, rating, price, plan picker, qty row,
     buttons, unavailable notice), matching the reference design. */
  .product-detail-info{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;}
  .product-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:10px;}
  .product-detail-info h1{margin:0;font-size:26px;font-weight:800;color:var(--ink-900);}
  .product-detail-name-bn{display:block;font-size:16px;font-weight:600;color:var(--ink-500);margin-top:4px;font-family:var(--dgv-font-bn);}
  .product-detail-rating{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-500);margin-bottom:14px;}
  .product-detail-rating .stars,.reviews-summary .stars{color:var(--yellow);letter-spacing:1px;}
  .product-detail-rating .rating-num{font-weight:800;color:var(--ink-900);}
  .product-detail-price{font-size:30px;font-weight:800;color:var(--dgv-price);margin-bottom:20px;}

  .product-video-btn{display:inline-flex;align-items:center;gap:7px;background:var(--dgv-video-btn);color:var(--dgv-btn-text);border:none;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:800;cursor:pointer;box-shadow:var(--dgv-shadow);white-space:nowrap;}
  .product-video-btn svg{width:16px;height:16px;flex-shrink:0;}
  .product-video-btn:hover{filter:brightness(1.06);}
  .product-video-frame-wrap{width:min(900px,92vw);aspect-ratio:16/9;}
  .product-video-frame-wrap iframe{width:100%;height:100%;border:0;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);}

  .product-plan-section{margin-bottom:20px;}
  .product-plan-label{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-500);margin-bottom:10px;}
  .product-plan-options{display:flex;flex-direction:column;gap:10px;}
  .product-plan-option{display:flex;align-items:center;gap:12px;width:100%;border:2px solid var(--line);background:#fff;border-radius:14px;padding:14px 16px;font:inherit;text-align:left;}
  .product-plan-options .product-plan-option{cursor:pointer;}
  .product-plan-option.selected{border-color:var(--blue-500);background:rgba(59,110,246,.06);}
  .plan-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);background:#fff;flex-shrink:0;transition:border-color .2s;}
  .product-plan-option.selected .plan-radio{border:5px solid var(--blue-500);}
  .plan-name{flex:1;font-weight:700;color:var(--ink-900);}
  .plan-value-tag{font-size:11px;font-weight:800;color:#fff;padding:3px 10px;border-radius:999px;}
  .plan-price{font-weight:800;color:var(--dgv-price);}
  .product-plan-note-card{display:flex;gap:10px;align-items:flex-start;background:rgba(59,110,246,.08);border:1px solid rgba(59,110,246,.25);border-radius:12px;padding:12px 16px;margin-top:12px;font-size:13.5px;color:var(--ink-900);line-height:1.65;}
  .product-plan-note-card svg{width:18px;height:18px;flex-shrink:0;margin-top:1px;stroke:var(--blue-600);stroke-width:2;fill:none;}
  .product-plan-note-card span{display:block;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;}

  .product-qty-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px;font-weight:700;color:var(--ink-900);font-size:14px;}
  .qty-stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
  .qty-stepper button{width:36px;height:36px;border:none;background:var(--bg-soft);font-size:16px;font-weight:700;color:var(--ink-900);cursor:pointer;}
  .qty-stepper input{width:44px;text-align:center;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);font-weight:700;color:var(--ink-900);background:#fff;}
  .product-payable{margin-left:auto;display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-soft);border-radius:10px;}
  .product-payable-label{font-size:12px;font-weight:600;color:var(--ink-500);text-transform:uppercase;letter-spacing:.03em;}
  .product-payable #productPayableAmount{font-size:16px;font-weight:800;color:var(--blue-600);}

  .product-cta-row{display:flex;gap:14px;margin-bottom:20px;}
  .product-btn-outline,.product-btn-solid{flex:1;padding:13px;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;border:none;}
  .product-btn-outline{background:var(--card-bg);border:1.5px solid var(--blue-500);color:var(--blue-600);}
  .product-btn-solid{background:var(--blue-500);color:var(--dgv-btn-text);}
  .product-btn-outline:disabled,.product-btn-solid:disabled{opacity:.5;cursor:not-allowed;}
  .product-unavailable-note{background:#FDECEC;color:#C0292E;border:1px solid #F6C6C8;border-radius:10px;padding:11px 14px;font-size:13px;font-weight:600;text-align:center;margin-bottom:20px;}
  body.theme-dark .product-unavailable-note{background:rgba(229,72,77,.12);color:#FF9FA3;border-color:rgba(229,72,77,.3);}

  .product-trust-row{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-500);font-weight:600;margin-top:16px;}
  .product-trust-row span{display:flex;align-items:center;gap:6px;}
  .product-trust-row svg{width:17px;height:17px;stroke:var(--blue-500);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
  .trust-badge-custom-icon{width:17px;height:17px;object-fit:contain;flex-shrink:0;vertical-align:-3px;}

  .product-info-table{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:40px;}
  .product-info-row{display:flex;justify-content:space-between;padding:13px 20px;border-bottom:1px solid var(--line);font-size:14px;}
  .product-info-row:last-child{border-bottom:none;}
  .product-info-row:nth-child(odd){background:var(--bg-soft);}
  .info-label{color:var(--ink-500);font-weight:600;}
  .info-value{color:var(--ink-900);font-weight:700;}

  .product-description-section,.product-reviews-section{
    margin-bottom:40px;background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:28px;box-shadow:0 8px 30px rgba(60,90,180,.06);
  }
  .product-description-section h2,.product-reviews-section h2,.related-products-section h2{font-size:20px;font-weight:800;color:var(--ink-900);margin:0 0 16px;}
  .product-description-section p{color:var(--ink-500);line-height:1.7;font-size:14.5px;white-space:pre-line;}

  .reviews-summary{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line);}
  .reviews-summary-num{font-size:28px;font-weight:800;color:var(--ink-900);}
  .review-item{border-bottom:1px solid var(--line);padding:16px 0;display:flex;gap:14px;}
  .review-item:last-child{border-bottom:none;}
  .review-item-avatar{
    width:38px;height:38px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--blue-500),var(--purple-500));
    display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;
  }
  .review-item-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
  .review-item-name{font-weight:700;font-size:13.5px;color:var(--ink-900);}
  .review-item-comment{margin:0;color:var(--ink-500);font-size:14px;line-height:1.6;}
  .review-form{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);}
  .review-form-label{font-size:13px;font-weight:800;color:var(--ink-900);margin-bottom:10px;}
  .review-form-stars{display:flex;gap:4px;font-size:28px;color:var(--yellow);margin-bottom:14px;}
  .review-form-stars button{background:none;border:none;cursor:pointer;padding:0;color:inherit;line-height:1;transition:transform .1s;}
  .review-form-stars button:hover{transform:scale(1.15);}
  .review-form textarea{width:100%;min-height:90px;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-family:inherit;font-size:13.5px;color:var(--ink-900);background:var(--bg-soft);resize:vertical;margin-bottom:14px;transition:border-color .15s;}
  .review-form textarea:focus{outline:none;border-color:var(--blue-500);}

  .related-products-section{margin-bottom:20px;}

  /* CART DRAWER */
  .cart-drawer-overlay{
    position:fixed;inset:0;background:rgba(10,14,26,.5);z-index:600;
    display:flex;justify-content:flex-end;opacity:0;visibility:hidden;transition:opacity .25s;
  }
  .cart-drawer-overlay.show{opacity:1;visibility:visible;}
  .cart-drawer{
    width:420px;max-width:92vw;height:100%;background:var(--card-bg);display:flex;flex-direction:column;
    transform:translateX(100%);transition:transform .3s cubic-bezier(.25,.8,.35,1);box-shadow:-10px 0 40px rgba(20,30,60,.15);
  }
  .cart-drawer-overlay.show .cart-drawer{transform:translateX(0);}
  .cart-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line);}
  .cart-drawer-title{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;color:var(--ink-900);}
  .cart-drawer-title svg{width:20px;height:20px;stroke:var(--blue-500);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .cart-drawer-close{width:34px;height:34px;border-radius:50%;border:none;background:var(--bg-soft);font-size:20px;line-height:1;color:var(--ink-700);cursor:pointer;}
  .cart-drawer-items{flex:1;overflow-y:auto;padding:10px 24px;}
  .cart-empty{text-align:center;color:var(--ink-300);padding:60px 20px;font-size:14px;}

  .cart-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);transform-origin:center;}
  .cart-item:last-child{border-bottom:none;}
  .cart-item-thumb{width:64px;height:64px;border-radius:12px;object-fit:cover;flex-shrink:0;background:var(--bg-soft);}
  .cart-item-body{flex:1;min-width:0;}
  .cart-item-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
  .cart-item-name{font-weight:700;font-size:14.5px;color:var(--ink-900);}
  .cart-item-remove{
    width:30px;height:30px;flex-shrink:0;border:none;background:var(--bg-soft);border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;color:var(--ink-500);
    transition:background .15s,color .15s,transform .1s;
  }
  .cart-item-remove:hover{background:#FCEAEA;color:#E5484D;}
  .cart-item-remove:active{transform:scale(.86);}
  .cart-item-remove svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;}

  @keyframes cartItemPopIn{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:scale(1);}}
  @keyframes cartItemPopOut{from{opacity:1;transform:scale(1);}to{opacity:0;transform:scale(.7);}}
  @keyframes cartItemPulse{0%{transform:scale(1);}45%{transform:scale(1.025);}100%{transform:scale(1);}}
  .cart-item-enter{animation:cartItemPopIn .3s cubic-bezier(.34,1.56,.64,1) both;}
  .cart-item-exit{animation:cartItemPopOut .22s ease both;pointer-events:none;}
  .cart-item-pulse{animation:cartItemPulse .28s ease;}
  .cart-item-meta{font-size:12.5px;color:var(--ink-300);margin:2px 0 10px;}
  .cart-item-bottom{display:flex;align-items:center;justify-content:space-between;}
  .qty-stepper.small button{width:28px;height:28px;font-size:14px;}
  .qty-stepper.small input{width:32px;font-size:13px;}
  .cart-item-price{font-weight:800;color:var(--blue-600);font-size:14.5px;}

  .cart-drawer-footer{padding:18px 24px 24px;border-top:1px solid var(--line);}
  .cart-drawer-row{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-500);margin-bottom:8px;}
  .cart-drawer-row.total{font-size:17px;font-weight:800;color:var(--ink-900);margin-bottom:16px;}
  .cart-drawer-actions{display:flex;gap:12px;}
  .cart-checkout-note{margin:12px 0 0;font-size:12.5px;color:var(--ink-300);text-align:center;}

  @media (max-width:640px){
    .cart-drawer-overlay{align-items:flex-end;justify-content:center;}
    .cart-drawer{width:100%;max-width:100%;height:auto;max-height:85vh;border-radius:20px 20px 0 0;transform:translateY(100%);box-shadow:0 -10px 40px rgba(20,30,60,.2);}
    .cart-drawer-overlay.show .cart-drawer{transform:translateY(0);}
  }

  body.theme-dark .cart-drawer{background:#0F1728;}
  body.theme-dark .cart-drawer-head{border-color:#232F45;}
  body.theme-dark .cart-drawer-title{color:#EDF1F9;}
  body.theme-dark .cart-drawer-close{background:#131B2C;color:#C9D2E3;}
  body.theme-dark .cart-item{border-color:#232F45;}
  body.theme-dark .cart-item-remove{background:#131B2C;color:#8590A6;}
  body.theme-dark .cart-item-name{color:#EDF1F9;}
  body.theme-dark .cart-drawer-footer{border-color:#232F45;}
  body.theme-dark .cart-drawer-row.total{color:#EDF1F9;}

  body.theme-dark .product-gallery-main{background:#131B2C;border-color:#232F45;}
  body.theme-dark .product-gallery-thumb-btn{border-color:#232F45;}
  body.theme-dark .product-detail-info h1{color:#EDF1F9;}
  body.theme-dark .product-detail-name-bn{color:#8590A6;}
  body.theme-dark .product-plan-option{background:#131B2C;border-color:#232F45;}
  body.theme-dark .product-plan-option.selected{background:rgba(59,110,246,.15);border-color:var(--blue-500);}
  body.theme-dark .plan-name{color:#EDF1F9;}
  body.theme-dark .plan-radio{background:#131B2C;border-color:#2E3B54;}
  body.theme-dark .product-plan-note-card{background:rgba(59,110,246,.12);border-color:rgba(59,110,246,.3);color:#C9D2E3;}
  body.theme-dark .qty-stepper{border-color:#232F45;}
  body.theme-dark .qty-stepper button{background:#131B2C;color:#EDF1F9;}
  body.theme-dark .qty-stepper input{background:#0F1728;color:#EDF1F9;border-color:#232F45;}
  body.theme-dark .product-btn-outline{background:#131B2C;}
  body.theme-dark .product-info-table{border-color:#232F45;}
  body.theme-dark .product-info-row{border-color:#232F45;}
  body.theme-dark .product-info-row:nth-child(odd){background:#131B2C;}
  body.theme-dark .info-value{color:#EDF1F9;}
  body.theme-dark .product-description-section h2,body.theme-dark .product-reviews-section h2,body.theme-dark .related-products-section h2{color:#EDF1F9;}
  body.theme-dark .review-item{border-color:#232F45;}
  body.theme-dark .review-item-name{color:#EDF1F9;}
  body.theme-dark .review-form{border-color:#232F45;}
  body.theme-dark .review-form textarea{background:#131B2C;border-color:#232F45;color:#EDF1F9;}


  /* FOOTER */
  footer{background:var(--dgv-footer-bg);color:var(--dgv-footer-text);padding:44px 0 24px;border-radius:28px 28px 0 0;box-shadow:0 20px 45px rgba(15,23,42,.25);}
  footer h5{color:var(--dgv-footer-heading);font-size:15px;margin:0 0 14px;}
  footer p{font-size:13.5px;line-height:1.7;color:var(--dgv-footer-text);}
  footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
  footer ul a{font-size:13.5px;color:var(--dgv-footer-text);}
  footer ul a:hover{color:var(--dgv-footer-heading);}

  /* Centered logo + tagline + trust badges block, above the 2-column grid */
  .footer-top-center{text-align:center;padding-bottom:30px;}
  .footer-top-center .logo{margin-bottom:12px;justify-content:center;}
  .footer-top-center .footer-tagline{max-width:480px;margin:0 auto 18px;}
  .footer-top-center .footer-trust-badges{justify-content:center;}
  .footer-trust-badges{display:flex;flex-wrap:wrap;gap:10px 22px;}
  .footer-trust-badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--dgv-footer-text);}
  .footer-trust-badge svg{width:15px;height:15px;stroke:#8FB4FF;stroke-width:1.8;fill:none;flex-shrink:0;}
  .footer-trust-badge img{width:16px;height:16px;object-fit:contain;flex-shrink:0;border-radius:3px;}

  /* Left col: Quick Links (top) + Contact (below); Right col: Support (top) + Legal (below) */
  .footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-bottom:24px;}
  .footer-col-left,.footer-col-right{display:flex;flex-direction:column;gap:26px;}
  .footer-link-group:last-child{margin-bottom:0;}

  /* Quick Links / Support -- plain text links, no card/button styling */
  .footer-plain-links{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
  .footer-plain-link{font-size:13.5px;font-weight:500;color:var(--dgv-footer-text);}
  .footer-plain-link:hover{color:var(--dgv-footer-heading);}
  button.footer-plain-link{border:none;background:none;padding:0;margin:0;font-family:inherit;cursor:pointer;text-align:left;}

  /* Contact Support card — Business Info -> Footer Emails, each row opens Gmail compose */
  .footer-contact-modal-box{max-width:420px;}
  .footer-contact-email-list{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
  .footer-contact-email-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;color:var(--ink-900);transition:background .15s,border-color .15s;}
  .footer-contact-email-item:hover{background:var(--bg-soft);border-color:var(--blue-500);}
  .footer-contact-email-icon{width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
  .footer-contact-email-icon svg{width:20px;height:15px;}
  .footer-contact-email-info{display:flex;flex-direction:column;line-height:1.3;min-width:0;}
  .footer-contact-email-info .label{font-size:14px;font-weight:700;color:var(--ink-900);}
  .footer-contact-email-info .addr{font-size:12px;color:var(--ink-500);}
  body.theme-dark .footer-contact-email-item{border-color:#232F45;}
  body.theme-dark .footer-contact-email-item:hover{background:#131B2C;}
  body.theme-dark .footer-contact-email-info .label{color:#EDF1F9;}

  /* Contact -- icon + label rows (Social & Web Links, reused) */
  .footer-contact-list{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
  .footer-contact-item{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--dgv-footer-text);}
  .footer-contact-item:hover{color:var(--dgv-footer-heading);}
  .footer-contact-icon{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 0 14px rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#0E1730;flex-shrink:0;overflow:hidden;}
  .footer-contact-icon img{width:100%;height:100%;object-fit:cover;transform:scale(1.6);}

  /* Rounded-end divider bar (instead of a plain full-width border line) */
  .footer-divider{height:3px;border-radius:999px;background:rgba(255,255,255,.14);margin:6px 0 20px;}

  .footer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--dgv-footer-text);flex-wrap:wrap;gap:14px;}
  .footer-copyright-link{color:inherit;text-decoration:none;}
  .footer-copyright-link:hover{color:var(--dgv-footer-heading);text-decoration:underline;}
  .socials{display:flex;gap:10px;flex-wrap:wrap;}
  .socials a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--dgv-footer-heading);overflow:hidden;}
  .socials a img{width:100%;height:100%;object-fit:cover;transform:scale(1.6);}
  .footer-bottom-socials{margin-left:auto;}
  .footer-bottom-socials a{background:rgba(255,255,255,.95);box-shadow:0 0 14px rgba(255,255,255,.55);color:#0E1730;}

  /* Product content generator (fake data blocks) */
  .thumb.t1{background:linear-gradient(135deg,#5B3BE0,#B93BE0);}
  .thumb.t2{background:linear-gradient(135deg,#3B6EF6,#7B8CF6);}
  .thumb.t3{background:linear-gradient(135deg,#101828,#334066);}
  .thumb.t4{background:linear-gradient(135deg,#0EA5A5,#1E293B);}
  .thumb.t5{background:linear-gradient(135deg,#1E293B,#0F1B33);}
  .thumb.t6{background:linear-gradient(135deg,#F1F5F9,#E2E8F0);color:#0E1730;}
  .thumb.t7{background:linear-gradient(135deg,#E2E8F0,#CBD5E1);color:#0E1730;}
  .thumb.t8{background:linear-gradient(135deg,#111827,#7C3AED);}
  .thumb.t9{background:linear-gradient(135deg,#F97316,#1D4ED8);}
  .thumb.t10{background:linear-gradient(135deg,#312E81,#1E293B);}
  .thumb.t11{background:linear-gradient(135deg,#0F172A,#334155);}
  .thumb.t12{background:linear-gradient(135deg,#E2E8F0,#F8FAFC);color:#0E1730;}

  /* ---------- WARM LIGHT STYLE ("Eye Protection") ---------- */
  body.style-warm{--blue-500:#F97316;--purple-500:#EF4444;--blue-600:#EA580C;}
  /* A full-viewport warm/amber tint blended over everything already
     rendered (images, hardcoded colors, all of it) — the standard "night
     light / eye protection" technique. pointer-events:none so it never
     blocks clicks; only shown while style-warm is active (light mode only,
     see themeStyleSection being hidden in dark mode in assets/js/index.js). */
  .eye-protect-overlay{position:fixed;inset:0;pointer-events:none;z-index:9999;background:#FF9F1C;opacity:0;mix-blend-mode:multiply;transition:opacity .3s ease;}
  body.style-warm .eye-protect-overlay{opacity:.10;}

  /* Page-load splash (Business Info -> Brand Assets -> App Splash Screen) --
     above everything, including .eye-protect-overlay, since it must hide
     the page underneath completely until that page is actually ready. */
  .dgv-page-splash{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .4s ease;}
  .dgv-page-splash img,.dgv-page-splash video{width:100%;height:100%;object-fit:cover;display:block;}
  .dgv-page-splash-hide{opacity:0;pointer-events:none;}

  /* ---------- DARK MODE ---------- */
  /* Theme Customizer dark-mode variable overrides -- includes/theme-head.php
     replaces these defaults with the site owner's own dark colors when set;
     left untouched, they reproduce the original hand-built dark palette
     below (the specific rules further down that repeat these same hex
     values are harmless duplicates kept for safety, not required). */
  body.theme-dark{
    --blue-500:#5B8CFF; --blue-600:#3B6EF6; --purple-500:#A78BFA;
    --ink-900:#EDF1F9; --ink-700:#C7CEDD; --ink-500:#8A93A8; --ink-300:#5B6B85;
    --line:#232F45; --bg-soft:#131B2C; --card-bg:#131B2C;
    --dgv-page-bg:#0B1220; --dgv-price:var(--blue-500); --dgv-link:var(--blue-500); --dgv-icon:var(--ink-500);
    --dgv-header-bg:rgba(11,18,32,.45); --dgv-header-text:#EDF1F9;
    --dgv-footer-bg:#080D18; --dgv-footer-text:#8A93A8; --dgv-footer-heading:#EDF1F9;
    --dgv-video-btn:#FF4D4F;
    background:var(--dgv-page-bg);
  }
  body.theme-dark header{background:rgba(11,18,32,.45);border-color:rgba(30,42,62,.7);}
  body.theme-dark .logo{color:#EDF1F9;}
  body.theme-dark .icon-btn{background:#131B2C;border-color:#232F45;color:#EDF1F9;}
  body.theme-dark .menu-trigger{background:#131B2C;border-color:#232F45;color:#EDF1F9;}
  body.theme-dark .menu-trigger .burger{stroke:#EDF1F9;}
  body.theme-dark .nav-menu-icon{stroke:#C9D2E3;}
  body.theme-dark .nav-menu-icon-solid{fill:#C9D2E3;}
  body.theme-dark .lang-option,
  body.theme-dark .theme-option{color:#C9D2E3;}
  body.theme-dark .lang-option:hover,
  body.theme-dark .theme-option:hover{background:#1B2436;}
  body.theme-dark .lang-option.active,
  body.theme-dark .theme-option.active{background:#1B2740;color:#8FB4FF;}
  body.theme-dark .theme-option .opt-icon.sun-icon{stroke:#9AA6BD;}
  body.theme-dark .theme-option .opt-icon.moon-icon{fill:#9AA6BD;}
  body.theme-dark .theme-option.active .opt-icon.sun-icon{stroke:#8FB4FF;}
  body.theme-dark .theme-option.active .opt-icon.moon-icon{fill:#8FB4FF;}

  body.theme-dark .hero h1{color:#F1F4FA;}
  body.theme-dark .hero p{color:#9AA6BD;}
  body.theme-dark .search-bar{background:#131B2C;box-shadow:0 12px 30px rgba(0,0,0,.5);}
  body.theme-dark .search-bar input{color:#EDF1F9;}
  body.theme-dark .search-bar input::placeholder{color:#6B7690;}
  body.theme-dark .search-bar button{background:#1B263B;border-color:#232F45;}
  body.theme-dark .search-bar button svg{stroke:#EDF1F9;}
  body.theme-dark .search-bar button:hover{background:#22304A;}
  body.theme-dark .header-search-bar{background:#131B2C;border-color:#232F45;box-shadow:0 8px 20px rgba(0,0,0,.4);}
  body.theme-dark .header-search-bar input{color:#EDF1F9;}
  body.theme-dark .header-search-bar input::placeholder{color:#6B7690;}
  body.theme-dark .header-search-btn{background:#1B263B;border-color:#232F45;color:#EDF1F9;}
  body.theme-dark .header-search-btn svg{stroke:#EDF1F9;}
  body.theme-dark .header-search-btn:hover{background:#22304A;}
  body.theme-dark .header-search-dropdown{background:#0F1728;border-color:#232F45;}
  body.theme-dark .hsd-recent-pill{background:#131B2C;border-color:#232F45;color:#C9D2E3;}
  body.theme-dark .hsd-popular-pill{background:#131B2C;color:#8FB4FF;}
  body.theme-dark .hsd-product-card{border-color:#232F45;}
  body.theme-dark .hsd-product-card:hover,body.theme-dark .hsd-product-card.kbd-active{background:#131B2C;}
  body.theme-dark .hsd-product-name{color:#EDF1F9;}
  body.theme-dark .hsd-live-row:hover{background:#131B2C;}
  body.theme-dark .hsd-live-row.kbd-active{background:#131B2C;border-color:#3D7CFF;}
  body.theme-dark .hsd-live-name{color:#EDF1F9;}
  body.theme-dark .hsd-live-price{color:#C9D2E3;}
  body.theme-dark .hsd-live-enter-hint kbd{background:#1B263B;border-color:#232F45;}
  body.theme-dark .hsd-footer{border-color:#232F45;}
  body.theme-dark .hsd-footer-hints kbd{background:#131B2C;border-color:#232F45;}

  body.theme-dark .category-section-title{color:#EDF1F9;}
  body.theme-dark .category-empty-hint{color:#6B7690;}
  body.theme-dark .category-scroll-fade{background:linear-gradient(to right, transparent, var(--dgv-page-bg));}
  body.theme-dark .category-pill{color:#EDF1F9;}
  body.theme-dark .category-pill-icon{background:#0B1220;color:#EDF1F9;}
  body.theme-dark .cat-color-0{background:#182B4D;}
  body.theme-dark .cat-color-1{background:#3D2A15;}
  body.theme-dark .cat-color-2{background:#2B2145;}
  body.theme-dark .cat-color-3{background:#3A331A;}
  body.theme-dark .cat-color-4{background:#153A2A;}
  body.theme-dark .cat-color-5{background:#3A1E28;}

  body.theme-dark .product-section-icon{background:#131B2C;color:#C9D2E3;}
  body.theme-dark .product-section-heading h2{color:#EDF1F9;}
  body.theme-dark .category-page-head h1{color:#EDF1F9;}
  body.theme-dark .view-all-btn{background:#131B2C;border-color:#232F45;color:#EDF1F9;}
  body.theme-dark .view-all-btn:hover{background:#1B2438;}
  body.theme-dark .products-filter-pill{background:#131B2C;border-color:#232F45;color:#EDF1F9;}
  body.theme-dark .products-filter-pill:hover{background:#1B2438;}
  body.theme-dark .products-filter-pill.active{background:var(--blue-500);border-color:var(--blue-500);color:var(--dgv-btn-text);}
  body.theme-dark .category-view-more-btn{background:#131B2C;border-color:#232F45;color:#EDF1F9;}
  body.theme-dark .category-view-more-btn:hover{background:#1B2438;}
  body.theme-dark .product-card-grid-fade{background:linear-gradient(to right, transparent, var(--dgv-page-bg));}
  body.theme-dark .product-card{background:#131B2C;border-color:#232F45;}
  body.theme-dark .product-card-name{color:#EDF1F9;}
  body.theme-dark .product-card-name-bn{color:#8590A6;}
  body.theme-dark .product-card-original-price{color:#5B6980;}
  body.theme-dark .product-card-category{color:#6B7690;}
  body.theme-dark .product-wish-btn::before{background:rgba(19,27,44,.85);}
  body.theme-dark .wish-heart-icon{stroke:#EDF1F9;}
  body.theme-dark .prod-color-0{background:#182B4D;}
  body.theme-dark .prod-color-1{background:#3D2A15;}
  body.theme-dark .prod-color-2{background:#2B2145;}
  body.theme-dark .prod-color-3{background:#3A331A;}
  body.theme-dark .prod-color-4{background:#153A2A;}
  body.theme-dark .prod-color-5{background:#3A1E28;}

  @media(max-width:640px){
    .hero h1{font-size:28px;}
    .header-right{gap:6px;}
    .header-search,.header-search-bar,.header-search-btn,.icon-btn,.menu-trigger{width:40px;height:40px;}
    /* Keep Quick Links+Contact / Support+Legal side-by-side even on
       phones (per the owner's explicit choice) -- just tighten the gap
       and text size so two narrow columns still read comfortably. */
    .footer-grid{gap:16px;}
    .footer-plain-link,.footer-contact-item,footer ul a{font-size:12.5px;}
    .footer-contact-item{gap:8px;}
  }

  /* ---------- AUTH MODAL (Register / Login popup) ---------- */
  .auth-overlay{
    position:fixed;inset:0;background:rgba(14,23,48,.55);backdrop-filter:blur(4px);
    display:none;align-items:center;justify-content:center;z-index:300;padding:20px;
  }
  .auth-overlay.show{display:flex;}
  .auth-modal{
    position:relative;background:#fff;border-radius:24px;padding:40px 40px 32px;
    max-width:440px;width:100%;box-shadow:0 30px 70px rgba(20,30,60,.28);
    max-height:92vh;overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(139,110,240,.45) transparent;
  }
  .auth-modal::-webkit-scrollbar{width:6px;}
  .auth-modal::-webkit-scrollbar-track{background:transparent;}
  .auth-modal::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--blue-500),var(--purple-500));
    border-radius:10px;
  }
  .auth-modal::-webkit-scrollbar-thumb:hover{background:var(--purple-500);}
  body.theme-dark .auth-modal{scrollbar-color:rgba(139,110,240,.55) transparent;}
  .auth-close{
    position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;
    border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;
    font-size:20px;color:var(--ink-500);line-height:1;transition:background .15s;
  }
  .auth-close:hover{background:var(--bg-soft);}
  .auth-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px;color:var(--ink-900);margin-bottom:26px;}
  .auth-logo .dot{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--blue-500),var(--purple-500));display:inline-block;}
  .auth-view h2{font-size:24px;font-weight:800;margin:0 0 22px;color:var(--ink-900);}
  .auth-msg{margin:-8px 0 18px;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:600;line-height:1.4;}
  .auth-msg.error{background:#FCEAEA;color:#C0392B;}
  .auth-msg.success{background:#E7F8F0;color:#1FAE6E;}
  body.theme-dark .auth-msg.error{background:rgba(229,72,77,.15);color:#FF8A8A;}
  body.theme-dark .auth-msg.success{background:rgba(31,174,110,.15);color:#4ADE9A;}

  .auth-field{margin-bottom:18px;}
  .auth-field label{display:block;font-size:13px;font-weight:700;color:var(--ink-900);margin-bottom:7px;}
  .auth-field-box{position:relative;}
  .auth-field-box input{
    width:100%;border:1px solid var(--line);background:var(--bg-soft);border-radius:12px;
    padding:13px 42px 13px 15px;font-size:14px;color:var(--ink-900);outline:none;
    transition:border-color .15s,background .15s;
  }
  .auth-field-box input::placeholder{color:var(--ink-300);}
  .auth-field-box input:focus{border-color:var(--blue-500);background:#fff;}
  .auth-field-box svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--ink-300);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

  .auth-agree-row{display:flex;align-items:center;gap:9px;margin-bottom:20px;font-size:13.5px;color:var(--ink-500);}
  .auth-agree-row input{width:17px;height:17px;accent-color:var(--blue-500);}
  .auth-agree-row a{color:var(--blue-600);font-weight:600;}

  .auth-row-between{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;font-size:13.5px;color:var(--ink-500);flex-wrap:wrap;gap:8px;}
  .auth-row-between label{display:flex;align-items:center;gap:9px;}
  .auth-row-between input{width:17px;height:17px;accent-color:var(--blue-500);}
  .auth-row-between a{color:var(--blue-600);font-weight:600;}

  .auth-btn-gradient{
    width:100%;border:none;border-radius:14px;padding:14px;font-size:14.5px;font-weight:700;color:var(--dgv-btn-text);
    background:var(--blue-500);
    box-shadow:0 14px 28px rgba(59,110,246,.28);margin-bottom:12px;transition:transform .15s,box-shadow .15s;
  }
  .auth-btn-gradient:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(59,110,246,.34);}

  .auth-btn-outline{
    width:100%;border:1px solid var(--line);border-radius:14px;padding:13px;font-size:14px;font-weight:600;
    background:#fff;color:var(--ink-700);display:flex;align-items:center;justify-content:center;gap:10px;
    transition:background .15s,border-color .15s;
  }
  .auth-btn-outline:hover{background:var(--bg-soft);border-color:#d7dce6;}

  .auth-switch-line{margin-top:20px;text-align:center;font-size:14px;color:var(--ink-500);}
  .auth-switch-line a{color:var(--blue-600);font-weight:700;}

  body.theme-dark .auth-modal{background:#0F1728;}
  body.theme-dark .auth-close{background:#131B2C;border-color:#232F45;color:#C9D2E3;}
  body.theme-dark .auth-logo{color:#EDF1F9;}
  body.theme-dark .auth-view h2{color:#EDF1F9;}
  body.theme-dark .auth-field label{color:#EDF1F9;}
  body.theme-dark .auth-field-box input{background:#131B2C;border-color:#232F45;color:#EDF1F9;}
  body.theme-dark .auth-field-box input::placeholder{color:#6B7690;}
  body.theme-dark .auth-btn-outline{background:#131B2C;border-color:#232F45;color:#EDF1F9;}
  body.theme-dark .auth-btn-outline:hover{background:#1B2438;}

  /* Logout confirmation popup -- a real styled modal (extends .auth-modal)
     instead of the browser's own window.confirm(), so it matches the rest
     of the site's design. */
  .logout-confirm-modal{max-width:360px;text-align:center;padding:36px 30px 28px;}
  .logout-confirm-icon{width:56px;height:56px;border-radius:50%;background:#FCEAEA;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
  .logout-confirm-icon svg{width:26px;height:26px;stroke:#E5484D;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .logout-confirm-title{font-size:19px;font-weight:800;color:var(--ink-900);margin-bottom:8px;}
  .logout-confirm-msg{font-size:14px;color:var(--ink-500);margin-bottom:22px;line-height:1.5;}
  body.theme-dark .logout-confirm-icon{background:rgba(229,72,77,.15);}
  body.theme-dark .logout-confirm-title{color:#EDF1F9;}

  /* PROFILE PAGE */
  .auth-field-box input:disabled{background:var(--bg-soft);color:var(--ink-500);cursor:not-allowed;}
  .profile-wrap{max-width:760px;padding-top:40px;padding-bottom:80px;}
  .profile-page-title{font-size:26px;font-weight:800;margin:0 0 24px;color:var(--ink-900);}
  .profile-card{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;margin-bottom:24px;box-shadow:0 8px 30px rgba(60,90,180,.06);}
  .profile-card-title{font-size:17px;font-weight:800;margin:0 0 20px;color:var(--ink-900);}
  .profile-avatar-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
  .profile-avatar-circle{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,var(--blue-500),var(--purple-500));display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
  .profile-avatar-circle img{width:100%;height:100%;object-fit:cover;}
  .profile-avatar-circle span{color:#fff;font-size:32px;font-weight:800;}
  .profile-avatar-actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
  .profile-avatar-hint{margin:0;font-size:12px;color:var(--ink-300);}
  .profile-avatar-buttons{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
  .profile-upload-btn{display:inline-flex;align-items:center;justify-content:center;width:fit-content;cursor:pointer;}
  .profile-remove-btn{background:none;border:none;color:#E5484D;font-size:13px;font-weight:700;padding:0;cursor:pointer;}
  .profile-remove-btn:hover{text-decoration:underline;}
  .profile-card .auth-msg{margin-top:16px;}
  .profile-field-row{display:flex;gap:16px;}
  .profile-field-row .auth-field{flex:1;min-width:0;}
  @media (max-width:640px){.profile-field-row{flex-direction:column;gap:0;}}

  /* Email Verification -- Profile Picture card's avatar badge + green label,
     and the Verify button beside the (disabled) email field. */
  .profile-avatar-wrap{position:relative;flex-shrink:0;}
  .profile-verified-badge{position:absolute;bottom:0;right:0;width:24px;height:24px;background:#1D9BF0;border:2.5px solid var(--card-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;}
  .profile-verified-badge svg{width:13px;height:13px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .profile-verified-label{margin-left:auto;display:flex;align-items:center;gap:6px;color:#16A34A;font-weight:700;font-size:13.5px;}
  .profile-verified-label svg{width:16px;height:16px;stroke:#16A34A;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
  .profile-email-row{display:flex;gap:10px;}
  .profile-email-row .auth-field-box{flex:1;min-width:0;}
  .profile-verify-email-btn{flex-shrink:0;padding:0 18px;font-size:13.5px;white-space:nowrap;width:auto;}
  .profile-verify-modal{max-width:380px;}
  .profile-verify-hint{margin:-8px 0 18px;font-size:13px;color:var(--ink-500);}
  .profile-verify-hint strong{color:var(--ink-900);}
  #emailVerifyResendBtn{margin-top:10px;}

  body.theme-dark .auth-field-box input:disabled{background:#0B1220;color:#6B7690;}
  body.theme-dark .profile-page-title,body.theme-dark .profile-card-title{color:#EDF1F9;}
  body.theme-dark .profile-card{background:#0F1728;border-color:#232F45;}
  body.theme-dark .profile-avatar-hint{color:#8590A6;}
  body.theme-dark .profile-verify-hint strong{color:#EDF1F9;}

  /* CHECKOUT PAGE */
  .checkout-wrap{padding-top:36px;padding-bottom:80px;}
  .checkout-head{margin-bottom:26px;}
  .checkout-head h1{font-size:28px;font-weight:800;margin:0 0 6px;color:var(--ink-900);}
  .checkout-head p{margin:0;font-size:14px;color:var(--ink-500);}

  .checkout-loading{text-align:center;padding:60px 0;color:var(--ink-500);font-size:14.5px;font-weight:600;}

  .checkout-signin-gate,.checkout-empty-state{text-align:center;padding:60px 24px;background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);}
  .checkout-signin-gate p,.checkout-empty-state p{margin:0 0 18px;font-size:15px;font-weight:600;color:var(--ink-700);}

  .checkout-grid{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start;}
  @media (max-width:900px){.checkout-grid{grid-template-columns:1fr;}}

  .checkout-card{margin-bottom:24px;}
  .checkout-step-title{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:800;color:var(--ink-900);margin-bottom:22px;}
  .checkout-step-num{width:28px;height:28px;border-radius:50%;background:var(--blue-500);color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

  .checkout-field{margin-bottom:18px;}
  .checkout-field label{display:block;font-size:13px;font-weight:700;color:var(--ink-900);margin-bottom:7px;}
  .checkout-optional{font-weight:500;color:var(--ink-300);}
  .checkout-field input,.checkout-field select,.checkout-field textarea{
    width:100%;border:1px solid var(--line);background:var(--bg-soft);border-radius:12px;
    padding:13px 15px;font-size:14px;color:var(--ink-900);outline:none;font-family:inherit;
    transition:border-color .15s,background .15s;
  }
  .checkout-field textarea{min-height:88px;resize:vertical;}
  .checkout-field input::placeholder,.checkout-field textarea::placeholder{color:var(--ink-300);}
  .checkout-field input:focus,.checkout-field select:focus,.checkout-field textarea:focus{border-color:var(--blue-500);background:#fff;}
  .checkout-field-error{display:none;margin-top:6px;font-size:12px;font-weight:600;color:#E5484D;}
  .checkout-field.has-error input,.checkout-field.has-error select,.checkout-field.has-error textarea{border-color:#E5484D;}
  .checkout-field.has-error .checkout-field-error{display:block;}
  .checkout-field-row{display:flex;gap:16px;}
  .checkout-field-row .checkout-field{flex:1;min-width:0;}
  @media (max-width:560px){.checkout-field-row{flex-direction:column;gap:0;}}

  .checkout-payment-tabs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
  .checkout-payment-tab{
    position:relative;flex:1;min-width:110px;display:flex;flex-direction:column;align-items:center;gap:8px;
    border:1.5px solid var(--line);border-radius:14px;padding:16px 10px;background:var(--card-bg);
    transition:border-color .15s,background .15s;
  }
  .checkout-payment-tab:hover{border-color:#c7cede;}
  .checkout-payment-tab.selected{border-color:var(--blue-500);background:var(--bg-soft);}
  .checkout-payment-tab-check{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--blue-500);display:none;align-items:center;justify-content:center;}
  .checkout-payment-tab-check svg{width:11px;height:11px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .checkout-payment-tab.selected .checkout-payment-tab-check{display:flex;}
  .checkout-payment-tab-icon{width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;}
  .checkout-payment-tab-icon img{width:100%;height:100%;object-fit:cover;}
  .checkout-payment-tab-icon-fallback{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;}
  .checkout-payment-tab-name{font-size:13.5px;font-weight:700;color:var(--ink-900);}
  .checkout-empty-hint{padding:18px;text-align:center;color:var(--ink-300);font-size:13.5px;font-weight:600;background:var(--bg-soft);border-radius:12px;}

  .checkout-send-box{background:var(--bg-soft);border:2px solid transparent;border-radius:14px;padding:16px 18px;margin-bottom:20px;}
  .checkout-send-label{font-size:11.5px;font-weight:800;letter-spacing:.4px;color:var(--ink-300);margin-bottom:8px;}
  /* Payment Page Designer overrides (assets/js/payment.js's applyMethodDesign()) --
     empty/unset by default, so an undesigned method looks exactly like before. */
  .checkout-send-subheading{font-size:12.5px;font-weight:700;margin-bottom:10px;opacity:.85;}
  .checkout-send-qr{display:block;width:140px;height:140px;object-fit:contain;margin:14px auto 0;border-radius:10px;background:#fff;padding:8px;}
  .checkout-box-align-center{text-align:center;}
  .checkout-box-align-center .checkout-send-number-row,
  .checkout-box-align-center .checkout-branded-trx-row,
  .checkout-box-align-center .checkout-branded-number-row{justify-content:center;}
  .checkout-send-number-row{display:flex;align-items:center;gap:10px;}
  .checkout-send-icon{width:20px;height:20px;flex-shrink:0;display:flex;}
  .checkout-send-icon svg{width:100%;height:100%;stroke:var(--blue-500);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .checkout-send-number{flex:1;font-size:17px;font-weight:800;color:var(--ink-900);letter-spacing:.3px;}
  .checkout-copy-btn{display:flex;align-items:center;gap:7px;border:none;border-radius:10px;padding:9px 16px;background:var(--blue-500);color:#fff;font-size:13px;font-weight:700;flex-shrink:0;}
  .checkout-copy-btn svg{width:14px;height:14px;stroke:#fff;stroke-width:2;fill:none;}
  .checkout-copy-btn:hover{background:var(--blue-600);}
  .checkout-send-instructions{margin-top:10px;font-size:12.5px;color:var(--ink-500);}

  /* Branded step-by-step "how to pay" card (bKash/Nagad/Rocket) -- color
     comes from --cb-color/--cb-color-light, set inline in JS per method. */
  .checkout-branded-box{
    position:relative;background:var(--cb-color,#E2136E);border:2px solid transparent;border-radius:20px;padding:24px 22px;margin-bottom:20px;color:#fff;
    overflow:hidden;
  }
  .checkout-branded-title{font-size:19px;font-weight:800;margin-bottom:16px;}
  .checkout-branded-qr{display:block;width:130px;height:130px;object-fit:contain;margin:0 0 16px;border-radius:10px;background:#fff;padding:8px;}
  .checkout-box-align-center .checkout-branded-qr{margin-left:auto;margin-right:auto;}
  .checkout-branded-helper{margin-top:14px;font-size:12.5px;font-weight:600;line-height:1.5;opacity:.9;}
  /* This box's inner chips/inputs are always white regardless of site theme
     (they sit on top of the brand's own solid color) -- so their text uses
     fixed colors here, never the --ink-* theme variables, which flip to
     near-white in dark mode and would disappear on a white chip. */
  .checkout-branded-trx-row{display:flex;gap:8px;margin-bottom:18px;}
  .checkout-branded-trx-input{
    flex:1;min-width:0;border:none;border-radius:14px;padding:14px 18px;font-size:14.5px;font-weight:700;
    color:#0E1730;background:#fff;outline:none;
  }
  .checkout-branded-trx-input.has-error{box-shadow:0 0 0 2.5px #FFD6D6;}
  .checkout-branded-trx-input::placeholder{color:#8A93A8;font-weight:600;}
  .checkout-branded-paste-btn{
    display:flex;align-items:center;gap:6px;border:1.5px solid #E7EAF0;border-radius:14px;padding:0 16px;
    background:#fff;color:#0E1730;font-size:12.5px;font-weight:700;flex-shrink:0;
  }
  .checkout-branded-paste-btn svg{width:14px;height:14px;stroke:#22304A;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .checkout-branded-paste-btn:hover{background:#F6F7FB;}
  .checkout-branded-steps{list-style:none;margin:0;padding:0;}
  .checkout-branded-steps li{
    font-size:13.5px;line-height:1.6;font-weight:600;padding:12px 0;border-top:1px solid rgba(255,255,255,.25);
  }
  .checkout-branded-steps li:first-child{border-top:none;padding-top:0;}
  .checkout-branded-chip{
    display:inline-block;background:rgba(255,255,255,.92);color:#0E1730;font-weight:800;
    padding:2px 10px;border-radius:7px;
  }
  .checkout-branded-number-row{display:flex;align-items:center;gap:10px;margin-top:8px;background:#fff;border-radius:12px;padding:10px 12px;}
  .checkout-branded-number{flex:1;font-size:16px;font-weight:800;color:#0E1730;letter-spacing:.3px;}
  .checkout-branded-copy-btn{display:flex;align-items:center;gap:6px;border:1.5px solid #E7EAF0;border-radius:9px;padding:7px 13px;background:#fff;color:#0E1730;font-size:12.5px;font-weight:700;flex-shrink:0;}
  .checkout-branded-copy-btn svg{width:13px;height:13px;stroke:#22304A;stroke-width:2;fill:none;}
  .checkout-branded-copy-btn:hover{background:#F6F7FB;}

  .checkout-gateway-note{display:flex;align-items:center;gap:10px;background:#E9F1FF;border-radius:12px;padding:14px 16px;font-size:13px;font-weight:600;color:var(--blue-600);}
  .checkout-gateway-note svg{width:18px;height:18px;flex-shrink:0;stroke:var(--blue-500);stroke-width:1.8;fill:none;}

  .checkout-summary-card{position:sticky;top:96px;}
  .checkout-summary-title{font-size:17px;font-weight:800;margin:0 0 18px;color:var(--ink-900);}
  .checkout-summary-items{display:flex;flex-direction:column;gap:14px;margin-bottom:18px;}
  .checkout-summary-loading{color:var(--ink-300);font-size:13px;font-weight:600;}
  .checkout-summary-item{display:flex;align-items:center;gap:12px;}
  .checkout-summary-item-thumb{width:48px;height:48px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--bg-soft);}
  .checkout-summary-item-body{flex:1;min-width:0;}
  .checkout-summary-item-name{font-size:13.5px;font-weight:700;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .checkout-summary-item-meta{font-size:12px;color:var(--ink-300);margin-top:2px;}
  .checkout-summary-item-price{font-size:13.5px;font-weight:800;color:var(--ink-900);flex-shrink:0;}

  .checkout-promo-row{display:flex;gap:10px;margin-bottom:14px;}
  .checkout-promo-input-wrap{flex:1;position:relative;}
  .checkout-promo-input-wrap svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--ink-300);fill:none;stroke-width:1.7;}
  .checkout-promo-input-wrap input{width:100%;border:1px solid var(--line);background:var(--bg-soft);border-radius:12px;padding:11px 14px 11px 36px;font-size:13.5px;color:var(--ink-900);outline:none;}
  .checkout-promo-input-wrap input:focus{border-color:var(--blue-500);background:#fff;}
  .checkout-promo-apply-btn{border:none;border-radius:12px;padding:0 20px;background:var(--blue-500);color:#fff;font-size:13.5px;font-weight:700;flex-shrink:0;}
  .checkout-promo-apply-btn:hover{background:var(--blue-600);}
  .checkout-promo-apply-btn:disabled{opacity:.6;cursor:not-allowed;}

  .checkout-paysystem-label{font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-500);margin-bottom:10px;}
  .checkout-paysystem-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:4px;}
  .checkout-paysystem-row.has-error .checkout-paysystem-pill{border-color:var(--red,#e14b4b);}
  .checkout-paysystem-pill{width:84px;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1.5px solid var(--line);background:var(--bg-soft);border-radius:14px;padding:8px 6px;font-family:inherit;cursor:pointer;transition:border-color .15s,color .15s,background .15s;}
  .checkout-paysystem-pill:hover{border-color:var(--blue-500);}
  .checkout-paysystem-pill.selected{border-color:var(--blue-500);background:var(--blue-soft);}
  .checkout-paysystem-pill-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--card-bg);border:1px solid var(--line);font-size:14px;font-weight:800;color:var(--ink-500);overflow:hidden;}
  .checkout-paysystem-pill-icon img{width:100%;height:100%;object-fit:cover;}
  .checkout-paysystem-pill-label{font-size:11px;font-weight:700;color:var(--ink-700);text-align:center;line-height:1.25;}
  .checkout-paysystem-pill.selected .checkout-paysystem-pill-label{color:var(--blue-600);}

  .checkout-summary-divider{border-top:1px solid var(--line);margin:14px 0;}
  .checkout-summary-line{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--ink-500);margin-bottom:10px;}
  .checkout-summary-line span:last-child{font-weight:700;color:var(--ink-900);}
  .checkout-summary-total{font-size:16px;font-weight:800;color:var(--ink-900);margin-bottom:18px;}
  .checkout-summary-total span:last-child{color:var(--dgv-price);font-size:19px;}

  .checkout-confirm-btn{
    width:100%;border:none;border-radius:14px;padding:15px;font-size:14.5px;font-weight:700;color:var(--dgv-btn-text);
    background:var(--blue-500);display:flex;align-items:center;justify-content:center;gap:10px;
    box-shadow:0 14px 28px rgba(59,110,246,.28);transition:transform .15s,box-shadow .15s,background .15s;
  }
  .checkout-confirm-btn svg{width:17px;height:17px;stroke:var(--dgv-btn-text);stroke-width:1.8;fill:none;}
  .checkout-confirm-btn:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(59,110,246,.34);background:var(--blue-600);}
  .checkout-confirm-btn:disabled{opacity:.7;cursor:not-allowed;transform:none;}
  .checkout-confirm-btn-pulse{animation:checkoutConfirmPulse 1.8s ease-in-out 0s 2;}
  @keyframes checkoutConfirmPulse{
    0%,100%{box-shadow:0 14px 28px rgba(59,110,246,.28);}
    50%{box-shadow:0 0 0 8px rgba(59,110,246,.25),0 14px 28px rgba(59,110,246,.28);}
  }

  .checkout-trust-item{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;}
  .checkout-trust-item:last-child{margin-bottom:0;}
  .checkout-trust-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .checkout-trust-icon svg{width:19px;height:19px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .checkout-trust-icon-green{background:#E7F8F0;}
  .checkout-trust-icon-green svg{stroke:#1FAE6E;}
  .checkout-trust-icon-orange{background:#FEF3E2;}
  .checkout-trust-icon-orange svg{stroke:#F6921E;}
  .checkout-trust-icon-blue{background:#E9F1FF;}
  .checkout-trust-icon-blue svg{stroke:var(--blue-500);}
  .checkout-trust-icon-purple{background:#F2EEFC;}
  .checkout-trust-icon-purple svg{stroke:var(--purple-500);}
  .checkout-trust-title{font-size:13.5px;font-weight:700;color:var(--ink-900);}
  .checkout-trust-desc{font-size:12px;color:var(--ink-500);margin-top:2px;line-height:1.4;}

  .checkout-success{text-align:center;padding:70px 24px;background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);}
  .checkout-success-icon{width:64px;height:64px;border-radius:50%;background:#E7F8F0;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
  .checkout-success-icon svg{width:30px;height:30px;stroke:#1FAE6E;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .checkout-success h2{margin:0 0 10px;font-size:22px;font-weight:800;color:var(--ink-900);}
  .checkout-success p{margin:0 0 22px;font-size:14px;color:var(--ink-500);}

  /* ---------- Payment page (payment.php) -- single-column, gateway-modal-style card ---------- */
  .payment-page-wrap{width:100%;padding-top:32px;}
  .payment-single-col{grid-template-columns:minmax(0,1fr);width:100%;max-width:460px;min-width:0;margin:0 auto;}
  .payment-single-col .checkout-main{width:100%;min-width:0;}
  .payment-card{width:100%;max-width:100%;min-width:0;padding-top:28px;overflow:hidden;}
  .payment-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
  .payment-card-logo-wrap{display:flex;align-items:center;}
  .payment-card-logo{height:36px;max-width:160px;object-fit:contain;}
  .payment-card-logo-fallback{width:36px;height:36px;border-radius:10px;background:var(--blue-500);color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;}
  .payment-card-lang{display:flex;gap:6px;}
  .payment-card-lang-btn{border:1px solid var(--line);background:var(--bg-soft);border-radius:8px;padding:5px 10px;font-size:11.5px;font-weight:700;color:var(--ink-500);font-family:inherit;}
  .payment-card-lang-btn.active{border-color:var(--blue-500);background:var(--blue-soft);color:var(--blue-600);}
  .payment-card-payto{font-size:14px;color:var(--ink-500);font-weight:600;margin-bottom:22px;}
  .payment-card-payto strong{color:var(--ink-900);font-weight:800;}

  @media(max-width:560px){
    .payment-page-wrap{padding:18px 12px 48px;}
    .payment-card{padding:18px 14px;border-radius:16px;margin:0;}
    .payment-card-header{gap:8px;margin-bottom:12px;}
    .payment-card-logo{height:32px;max-width:128px;}
    .payment-card-lang{gap:4px;flex-shrink:0;}
    .payment-card-lang-btn{padding:5px 7px;font-size:10.5px;}
    .payment-card-payto{margin-bottom:16px;}
    .payment-card .checkout-payment-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;}
    .payment-card .checkout-payment-tab{width:100%;min-width:0;padding:12px 4px;gap:6px;}
    .payment-card .checkout-payment-tab-icon,.payment-card .checkout-payment-tab-icon-fallback{width:34px;height:34px;}
    .payment-card .checkout-payment-tab-name{max-width:100%;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .payment-card .checkout-branded-box{padding:20px 14px;border-radius:16px;}
    .payment-card .checkout-branded-title{font-size:18px;overflow-wrap:anywhere;}
    .payment-card .checkout-branded-trx-row{width:100%;gap:7px;}
    .payment-card .checkout-branded-trx-input{width:0;padding:13px 12px;}
    .payment-card .checkout-branded-paste-btn{padding:0 11px;}
    .payment-card .checkout-branded-number-row{min-width:0;padding:9px;}
    .payment-card .checkout-branded-number{min-width:0;font-size:14px;overflow-wrap:anywhere;}
    .payment-card .checkout-branded-copy-btn{padding:7px 9px;}
    .payment-card .checkout-send-box{padding:14px 12px;}
    .payment-card .checkout-send-number{min-width:0;font-size:15px;overflow-wrap:anywhere;}
    .payment-card .checkout-copy-btn{padding:8px 10px;}
  }

  @media(max-width:360px){
    .payment-page-wrap{padding-left:8px;padding-right:8px;}
    .payment-card{padding-left:10px;padding-right:10px;}
    .payment-card-logo{max-width:108px;}
    .payment-card-lang-btn{padding:5px 6px;}
    .payment-card .checkout-payment-tabs{gap:5px;}
    .payment-card .checkout-payment-tab{padding-left:2px;padding-right:2px;}
  }

  .payment-pay-btn{margin-top:18px;}
  .payment-pay-btn svg{stroke:var(--dgv-btn-text);}

  /* ---- Full-page verify overlay (loading/verified/failed) ---- */
  .payment-verify-overlay{
    position:fixed;inset:0;z-index:400;background:rgba(10,14,26,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;padding:20px;
  }
  .payment-verify-panel{
    background:var(--card-bg);border-radius:var(--radius-lg);padding:40px 30px;max-width:340px;width:100%;
    text-align:center;box-shadow:0 20px 60px rgba(14,23,48,.25);
  }
  .payment-verify-stage{display:flex;flex-direction:column;align-items:center;}
  .payment-spinner{width:88px;height:88px;margin-bottom:18px;position:relative;}
  .payment-spinner span{
    position:absolute;inset:0;border-radius:50%;border:6px solid var(--bg-soft);border-top-color:var(--blue-500);
    animation:paymentSpin .9s linear infinite;
  }
  @keyframes paymentSpin{to{transform:rotate(360deg);}}
  .payment-verify-countdown{font-size:13px;font-weight:700;color:var(--ink-500);}
  /* The source Lottie composition (1600x1200) has the checkmark circle centered around
     (799.5,589.5) at a ~234px native diameter, with a "Payment Done" text baked into the
     artwork well below it (bottom of the combined ink extends to y~820) -- so naively
     enlarging/centering the whole container scales and reveals that text too. Instead this
     stays a small fixed "window" (overflow:hidden) and the lottie target inside it is
     rendered oversized with an explicit left/top (measured via the real rendered SVG
     bounding box, not just the composition's geometric center) so the crop is centered
     precisely on the checkmark circle -- large enough to comfortably margin the circle,
     short enough that the text sits well past the window's bottom edge and stays clipped. */
  .payment-verify-lottie{width:170px;height:170px;margin:0 auto 8px;position:relative;overflow:hidden;}
  .payment-verify-lottie-inner{position:absolute;left:-273.75px;top:-179.5px;width:718px;height:538px;}
  .payment-verify-title{font-size:18px;font-weight:800;margin-bottom:6px;}
  .payment-verify-title-success{color:#1FAE6E;}
  .payment-verify-title-failed{color:#E5484D;}
  .payment-verify-note{font-size:12.5px;font-weight:700;color:var(--ink-500);margin-bottom:14px;}
  .payment-verify-redirect{font-size:13px;font-weight:800;color:var(--ink-900);background:var(--bg-soft);border-radius:999px;padding:6px 16px;}
  .payment-verify-error-msg{font-size:13px;color:var(--ink-500);}
  .payment-failed-icon{width:88px;height:88px;margin-bottom:14px;}
  .payment-failed-icon svg{width:100%;height:100%;}
  .payment-failed-circle{fill:none;stroke:#E5484D;stroke-width:10;opacity:0;animation:paymentFailedCircleIn .35s ease-out forwards;}
  .payment-failed-x{fill:none;stroke:#E5484D;stroke-width:12;stroke-linecap:round;stroke-dasharray:96;stroke-dashoffset:96;animation:paymentFailedXDraw .3s ease-out .3s forwards;}
  .payment-failed-x-2{animation-delay:.42s;}
  @keyframes paymentFailedCircleIn{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:scale(1);}}
  @keyframes paymentFailedXDraw{to{stroke-dashoffset:0;}}

  body.theme-dark .checkout-head h1{color:#EDF1F9;}
  body.theme-dark .checkout-signin-gate,body.theme-dark .checkout-empty-state,
  body.theme-dark .checkout-success{background:#0F1728;border-color:#232F45;}
  body.theme-dark .checkout-signin-gate p,body.theme-dark .checkout-empty-state p{color:#C9D2E3;}
  body.theme-dark .checkout-step-title,body.theme-dark .checkout-field label,
  body.theme-dark .checkout-send-number,body.theme-dark .checkout-payment-tab-name,
  body.theme-dark .checkout-summary-title,body.theme-dark .checkout-summary-item-name,
  body.theme-dark .checkout-summary-total,body.theme-dark .checkout-trust-title,
  body.theme-dark .checkout-success h2{color:#EDF1F9;}
  body.theme-dark .checkout-field input,body.theme-dark .checkout-field select,
  body.theme-dark .checkout-field textarea,body.theme-dark .checkout-promo-input-wrap input{background:#131B2C;border-color:#232F45;color:#EDF1F9;}
  body.theme-dark .checkout-field input::placeholder,body.theme-dark .checkout-field textarea::placeholder{color:#6B7690;}
  body.theme-dark .checkout-payment-tab{background:#0F1728;border-color:#232F45;}
  body.theme-dark .checkout-payment-tab.selected{background:#131B2C;}
  body.theme-dark .checkout-send-box{background:#131B2C;}
  body.theme-dark .checkout-gateway-note{background:#132038;}
  body.theme-dark .checkout-summary-divider{border-color:#232F45;}
  body.theme-dark .checkout-paysystem-pill{background:#131B2C;border-color:#232F45;}
  body.theme-dark .checkout-paysystem-pill.selected{background:#132038;}
  body.theme-dark .checkout-paysystem-pill-icon{background:#0F1728;border-color:#232F45;}
  body.theme-dark .checkout-paysystem-pill-label{color:#C9D2E3;}

  body.theme-dark .payment-card-payto{color:#8590A6;}
  body.theme-dark .payment-card-payto strong{color:#EDF1F9;}
  body.theme-dark .payment-card-lang-btn{background:#131B2C;border-color:#232F45;color:#8590A6;}
  body.theme-dark .payment-verify-panel{background:#0F1728;}
  body.theme-dark .payment-spinner span{border-color:#232F45;border-top-color:var(--blue-500);}
  body.theme-dark .payment-verify-redirect{background:#131B2C;color:#EDF1F9;}

  /* ---------- MY ORDERS PAGE (orders.php) ---------- */
  .orders-page-wrap{padding-top:26px;padding-bottom:60px;}
  .orders-greeting h1{margin:0 0 6px;font-size:26px;font-weight:800;color:var(--ink-900);}
  .orders-greeting p{margin:0 0 26px;font-size:14px;color:var(--ink-500);}

  .orders-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px;}
  @media (max-width:900px){.orders-stats-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:520px){.orders-stats-grid{grid-template-columns:1fr;}}
  .orders-stat-card{display:flex;align-items:center;gap:14px;background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:18px;}
  .orders-stat-card .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .orders-stat-card .ic svg{width:20px;height:20px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .orders-stat-card .ic.blue{background:var(--blue-500);}.orders-stat-card .ic.blue svg{stroke:var(--dgv-btn-text);}
  .orders-stat-card .ic.green{background:#E7F8F0;}.orders-stat-card .ic.green svg{stroke:#1FAE6E;}
  .orders-stat-card .ic.yellow{background:#FEF3E2;}.orders-stat-card .ic.yellow svg{stroke:#F6921E;}
  .orders-stat-card .ic.purple{background:#F2EEFC;}.orders-stat-card .ic.purple svg{stroke:var(--purple-500);}
  .orders-stat-card .ic.red{background:#FCEAEA;}.orders-stat-card .ic.red svg{stroke:#C0392B;}
  .orders-stat-card .v{font-size:19px;font-weight:800;color:var(--ink-900);line-height:1.2;}
  .orders-stat-card .l{font-size:12px;color:var(--ink-500);margin-top:2px;}

  .orders-expiring-banner{display:flex;align-items:center;gap:10px;background:#FEF3E2;border:1px solid #F3D98A;border-radius:var(--radius-md);padding:13px 18px;margin-bottom:22px;font-size:13.5px;font-weight:600;color:#8A5A00;}
  .orders-expiring-banner svg{width:20px;height:20px;stroke:#F6921E;stroke-width:1.8;fill:none;flex-shrink:0;}

  .orders-tab-row{display:flex;gap:10px;margin-bottom:20px;border-bottom:1.5px solid var(--line);}
  .orders-tab-btn{background:none;border:none;padding:10px 4px;margin-right:18px;font-size:14.5px;font-weight:700;color:var(--ink-500);cursor:pointer;position:relative;top:1.5px;border-bottom:2.5px solid transparent;}
  .orders-tab-btn.active{color:var(--blue-600);border-bottom-color:var(--blue-500);}

  .orders-items-grid{display:flex;flex-direction:column;gap:14px;}
  .order-item-card{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:18px;}
  .order-item-top{display:flex;align-items:center;gap:14px;}
  .order-item-thumb{width:52px;height:52px;border-radius:12px;object-fit:cover;flex-shrink:0;background:var(--bg-soft);}
  .order-item-thumb-empty{background:var(--bg-soft);}
  .order-item-info{flex:1;min-width:0;}
  .order-item-name{font-size:14.5px;font-weight:700;color:var(--ink-900);}
  .order-item-plan{font-weight:500;color:var(--ink-500);font-size:13px;}
  .order-item-meta{font-size:12px;color:var(--ink-500);margin-top:3px;}

  .orders-status-badge{flex-shrink:0;padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;}
  .orders-status-badge.status-active{background:#E7F8F0;color:#1FAE6E;}
  .orders-status-badge.status-expiring_soon{background:#FEF3E2;color:#B67300;}
  .orders-status-badge.status-expired{background:#FCEAEA;color:#C0392B;}
  .orders-status-badge.status-processing{background:#E9F1FF;color:var(--blue-600);}
  .orders-status-badge.status-delivered{background:#E7F8F0;color:#1FAE6E;}
  .orders-status-badge.status-pending{background:#F2EEFC;color:var(--purple-500);}
  .orders-status-badge.status-cancelled{background:var(--bg-soft);color:var(--ink-500);}
  .orders-status-badge.status-invited{background:#E9F1FF;color:var(--blue-600);}
  .orders-status-badge.status-accepted{background:#FEF3E2;color:#B67300;}
  .orders-status-badge.status-suspended{background:#FEF3E2;color:#B67300;}
  .orders-status-badge.status-revoked{background:#FCEAEA;color:#C0392B;}

  .order-item-expiry{font-size:12.5px;font-weight:600;color:var(--ink-500);margin:12px 0 4px;}
  .order-item-processing-note{font-size:13px;color:var(--ink-500);margin-top:12px;}
  .order-item-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
  .order-item-action-btn{border:1.5px solid var(--line);background:var(--card-bg);border-radius:10px;padding:9px 16px;font-size:13px;font-weight:700;color:var(--ink-900);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;}
  .order-item-action-btn.primary{background:var(--blue-500);border-color:transparent;color:var(--dgv-btn-text);}
  .order-item-details-btn{margin-top:14px;background:none;border:none;padding:0;font-size:12.5px;font-weight:700;color:var(--blue-600);cursor:pointer;text-decoration:underline;}

  /* ---------- UNIVERSAL ACCESS PAGE (access.php) ---------- */
  .access-page-wrap{padding-top:26px;padding-bottom:60px;max-width:720px;}
  /* Access Page Positioner (Add Product -> "Save and Design") -- position:relative
     is the anchor for AccessRender.applyPositions()'s absolutely-positioned
     elements; has zero visual effect on any product that was never positioned. */
  .access-canvas{position:relative;}
  .access-back-link{display:inline-block;margin-bottom:18px;font-size:13.5px;font-weight:700;color:var(--blue-600);}
  .access-loading{padding:60px 0;text-align:center;color:var(--ink-500);}
  .access-head{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;margin-bottom:20px;}
  .access-head-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
  .access-head-top h1{margin:0;font-size:22px;font-weight:800;color:var(--ink-900);}
  .access-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;padding-top:16px;border-top:1px solid var(--line);}
  .access-info-item{min-width:0;}
  .access-info-item .l{font-size:11.5px;color:var(--ink-500);margin-bottom:3px;text-transform:uppercase;letter-spacing:.03em;font-weight:700;}
  .access-info-item .v{font-size:14px;font-weight:700;color:var(--ink-900);overflow-wrap:anywhere;word-break:break-word;}
  @media (max-width: 480px){
    .access-info-grid{grid-template-columns:1fr;}
  }

  .access-state-card{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px 24px;text-align:center;color:var(--ink-500);font-size:14px;}

  .access-body{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;margin-bottom:20px;}
  .access-section{margin-bottom:22px;}
  .access-section:last-child{margin-bottom:0;}
  .access-section-title{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-500);margin-bottom:10px;}
  .access-btn-primary{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:12px;background:var(--blue-500);color:var(--dgv-btn-text);font-weight:700;font-size:14.5px;text-decoration:none;}
  .access-btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:12px;border:1.5px solid var(--line);color:var(--ink-900);font-weight:700;font-size:14px;text-decoration:none;margin:4px 8px 4px 0;}
  .access-files-list{display:flex;flex-direction:column;gap:10px;}
  .access-file-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;}
  .access-file-row .name{font-size:13.5px;font-weight:700;color:var(--ink-900);}
  .access-license-box{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg-soft);border:1px dashed var(--line);border-radius:12px;padding:14px 16px;font-family:monospace;font-size:14px;color:var(--ink-900);}
  .access-copy-btn{background:none;border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;color:var(--blue-600);cursor:pointer;flex-shrink:0;}
  .access-instructions{font-size:13.5px;color:var(--ink-700);line-height:1.7;white-space:pre-wrap;}
  .access-video-embed{position:relative;padding-bottom:56.25%;height:0;border-radius:14px;overflow:hidden;}
  .access-video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
  .access-support-row{text-align:center;font-size:13px;color:var(--ink-500);}
  .access-support-row a{color:var(--blue-600);font-weight:700;}
  .access-section-divider{border-top:1px solid var(--line);margin-bottom:22px;}

  body.theme-dark .access-head,body.theme-dark .access-state-card,body.theme-dark .access-body{background:#0F1728;border-color:#232F45;}
  body.theme-dark .access-head-top h1,body.theme-dark .access-file-row .name,body.theme-dark .access-license-box,body.theme-dark .access-info-item .v{color:#EDF1F9;}
  body.theme-dark .access-info-grid,body.theme-dark .access-file-row{border-color:#232F45;}
  body.theme-dark .access-license-box{background:#131B2C;border-color:#232F45;}
  body.theme-dark .access-btn-secondary{border-color:#232F45;color:#EDF1F9;}
  body.theme-dark .access-instructions{color:#C9D2E3;}

  /* ---------- SECURE CONTENT DELIVERY PAGE (content.php) ---------- */
  .sc-page-wrap{padding-top:26px;padding-bottom:60px;max-width:760px;}
  .sc-cover{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:20px;max-height:280px;}
  .sc-cover img{width:100%;height:100%;object-fit:cover;display:block;}
  .sc-content-head{margin-bottom:20px;}
  .sc-content-head h1{margin:0 0 8px;font-size:24px;font-weight:800;color:var(--ink-900);}
  .sc-content-head p{margin:0;font-size:14px;color:var(--ink-500);line-height:1.6;}
  .sc-content-blocks{display:flex;flex-direction:column;gap:16px;}
  .sc-block{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;}

  .sc-gate-card{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:48px 24px;text-align:center;max-width:420px;margin:40px auto;}
  .sc-gate-icon{width:52px;height:52px;border-radius:50%;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
  .sc-gate-icon svg{width:24px;height:24px;stroke:var(--blue-600);stroke-width:1.8;fill:none;}
  .sc-gate-card h2{margin:0 0 6px;font-size:18px;font-weight:800;color:var(--ink-900);}
  .sc-gate-card p{margin:0 0 18px;font-size:13.5px;color:var(--ink-500);}
  .sc-gate-msg{font-size:13px;color:#DC2626;margin-bottom:12px;}
  #scPasswordForm{display:flex;gap:10px;}
  #scPasswordInput{flex:1;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--input-bg,var(--card-bg));color:var(--ink-900);font-size:14px;font-family:inherit;}

  /* Key block reuses .access-license-box/.access-copy-btn from the Universal Access page above. */
  .sc-key-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
  .sc-key-row:last-child{margin-bottom:0;}
  .sc-key-row .access-license-box{flex:1;}
  .sc-key-mask{letter-spacing:2px;}

  .sc-text-block :is(h2,h3){color:var(--ink-900);margin:0 0 10px;}
  .sc-text-block p{color:var(--ink-700);line-height:1.7;margin:0 0 12px;}
  .sc-text-block p:last-child{margin-bottom:0;}
  .sc-text-block ul{padding-left:22px;color:var(--ink-700);line-height:1.7;}
  .sc-text-block pre{background:var(--bg-soft);padding:12px 14px;border-radius:10px;font-family:monospace;font-size:13px;overflow-x:auto;}
  .sc-callout{padding:12px 14px;border-radius:10px;margin:10px 0;font-size:13.5px;}
  .sc-callout.warning{background:#FFFBEB;color:#92400E;border:1px solid #FDE68A;}
  .sc-callout.info{background:#EFF6FF;color:#1E40AF;border:1px solid #BFDBFE;}
  .sc-callout.success{background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0;}

  .sc-support-row{display:flex;flex-wrap:wrap;gap:10px;}

  body.theme-dark .sc-block{background:#0F1728;border-color:#232F45;}
  body.theme-dark .sc-content-head h1{color:#EDF1F9;}
  body.theme-dark .sc-gate-card{background:#0F1728;border-color:#232F45;}
  body.theme-dark .sc-gate-card h2{color:#EDF1F9;}
  body.theme-dark #scPasswordInput{background:#131B2C;border-color:#232F45;color:#EDF1F9;}
  body.theme-dark .sc-text-block :is(h2,h3){color:#EDF1F9;}
  body.theme-dark .sc-text-block p,body.theme-dark .sc-text-block ul{color:#C9D2E3;}
  body.theme-dark .sc-text-block pre{background:#131B2C;}
  body.theme-dark .sc-callout.warning{background:#3B2F0E;color:#FDE68A;border-color:#5C4A15;}
  body.theme-dark .sc-callout.info{background:#132139;color:#BFDBFE;border-color:#1E3A5F;}
  body.theme-dark .sc-callout.success{background:#0F2A20;color:#A7F3D0;border-color:#164A37;}

  /* ---------- CUSTOM FORM PAGE (form.php) ---------- */
  .dgv-form-page-wrap{padding-top:26px;padding-bottom:60px;max-width:640px;}
  .dgv-form-card{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;}
  .dgv-form-card h1{margin:0 0 8px;font-size:22px;font-weight:800;color:var(--ink-900);}
  .dgv-form-description{font-size:13.5px;color:var(--ink-500);line-height:1.6;margin:0 0 20px;}
  body.theme-dark .dgv-form-card{background:#0F1728;border-color:#232F45;}
  body.theme-dark .dgv-form-card h1{color:#EDF1F9;}

  /* Generic modal (View Details / Invoice) -- same look as the auth modal */
  .modal-overlay{position:fixed;inset:0;background:rgba(14,23,48,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:300;padding:20px;}
  .modal-overlay.show{display:flex;}
  .modal-box{position:relative;background:var(--card-bg);border-radius:24px;padding:32px;max-width:480px;width:100%;box-shadow:0 30px 70px rgba(20,30,60,.28);max-height:88vh;overflow-y:auto;}
  .modal-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card-bg);display:flex;align-items:center;justify-content:center;cursor:pointer;}
  .modal-close svg{width:16px;height:16px;stroke:var(--ink-500);stroke-width:1.8;fill:none;}
  .modal-head h2{margin:0 0 4px;font-size:19px;font-weight:800;color:var(--ink-900);}
  .modal-head .sub{font-size:13px;color:var(--ink-500);margin-bottom:18px;}
  .cust-view-item{margin-bottom:12px;}
  .cust-view-item .l{font-size:12.5px;color:var(--ink-500);margin-bottom:3px;}
  .cust-view-item .v{font-size:14px;font-weight:700;color:var(--ink-900);}

  body.theme-dark .orders-greeting p{color:#9AA6C0;}
  body.theme-dark .orders-stat-card,body.theme-dark .order-item-card{background:#0F1728;border-color:#232F45;}
  body.theme-dark .orders-stat-card .v,body.theme-dark .order-item-name,body.theme-dark .modal-head h2{color:#EDF1F9;}
  body.theme-dark .order-item-action-btn{background:#131B2C;border-color:#232F45;color:#EDF1F9;}
  body.theme-dark .order-item-details-btn{color:#8FB3FF;}
  body.theme-dark .orders-tab-row{border-color:#232F45;}
  body.theme-dark .modal-box{background:#0F1728;}
  body.theme-dark .modal-close{background:#131B2C;border-color:#232F45;}
  body.theme-dark .cust-view-item .v{color:#EDF1F9;}
  body.theme-dark .checkout-summary-line span:last-child{color:#EDF1F9;}

  /* ===== LEGAL PAGES (Privacy Policy / Terms & Conditions / Refund Policy) =====
     Fully admin-managed via includes/legal-page-helpers.php + adminpanel's
     Legal Pages builder -- these rules only style the fixed wrapper/card/grid
     shapes; every color-theme tint is inlined per-card from the admin's
     preset choice (none/blue/green/yellow/red), not hardcoded here. */
  .legal-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg-soft),var(--dgv-page-bg));padding:48px 0 40px;text-align:center;}
  .legal-hero::before{
    content:'';position:absolute;top:-160px;left:50%;transform:translateX(-50%);
    width:720px;height:460px;border-radius:50%;pointer-events:none;z-index:0;
    background:radial-gradient(circle, var(--legal-accent, var(--blue-500)) 0%, transparent 68%);
    opacity:.18;filter:blur(50px);
  }
  .legal-hero > .wrap{position:relative;z-index:1;}
  .legal-hero-badge{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.05em;color:var(--legal-accent, var(--blue-600));background:var(--card-bg);border:1px solid var(--line);border-radius:999px;padding:6px 16px;margin-bottom:16px;}
  .legal-hero h1{font-size:34px;font-weight:800;color:var(--ink-900);margin:0 0 10px;}
  .legal-hero-title-accent{color:var(--legal-accent, var(--blue-600));}
  .legal-hero-subtitle{font-size:15px;color:var(--ink-500);max-width:640px;margin:0 auto 16px;line-height:1.6;}
  .legal-hero-meta{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;font-size:12.5px;font-weight:700;color:var(--ink-500);}
  .legal-hero-meta span{display:inline-flex;align-items:center;gap:6px;}
  .legal-hero-meta-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
  .legal-hero-meta-dot-accent{background:var(--legal-accent, var(--blue-600));}
  .legal-hero-meta-dot-green{background:#059669;}
  .legal-body{max-width:820px;padding-top:32px;padding-bottom:50px;}
  .legal-intro-card{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 26px;margin-bottom:24px;box-shadow:var(--dgv-shadow);}
  .legal-intro-card p{margin:0;font-size:14.5px;line-height:1.75;color:var(--ink-700);}
  .legal-section{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 28px;margin-bottom:22px;box-shadow:var(--dgv-shadow);}
  .legal-section-eyebrow{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--legal-accent, var(--blue-600));margin-bottom:8px;}
  .legal-section-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
  .legal-section-head h2{font-size:19px;font-weight:800;color:var(--ink-900);margin:0;}
  .legal-section-icon{width:34px;height:34px;border-radius:10px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .legal-section-icon img{width:18px;height:18px;object-fit:contain;}
  .legal-card{margin-bottom:14px;}
  .legal-card:last-child{margin-bottom:0;}
  .legal-card p{margin:0 0 8px;font-size:14px;line-height:1.75;color:var(--ink-700);}
  .legal-card p:last-child{margin-bottom:0;}
  .legal-card-tinted{border-radius:var(--radius-md);padding:16px 18px;background:var(--legal-card-bg, var(--bg-soft));}
  .legal-card-lead{display:block;font-size:14.5px;font-weight:800;color:var(--ink-900);margin-bottom:6px;}
  .legal-card-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
  .legal-card-head strong{font-size:14.5px;font-weight:800;color:var(--ink-900);}
  .legal-card-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .legal-card-icon img{width:14px;height:14px;object-fit:contain;filter:brightness(0) invert(1);}
  .legal-bullets{margin:0;padding-left:20px;}
  .legal-bullets li{font-size:14px;line-height:1.8;color:var(--ink-700);}
  .legal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .legal-grid-item{display:flex;align-items:center;gap:10px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px;font-size:13.5px;color:var(--ink-700);font-weight:600;}
  .legal-grid-icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
  .legal-grid-icon img{width:16px;height:16px;object-fit:contain;}
  .legal-grid-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
  .legal-closing-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:24px;}
  .legal-closing-grid .legal-card{margin-bottom:0;}
  .legal-contact{text-align:left;background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 34px;margin-bottom:24px;box-shadow:var(--dgv-shadow);}
  .legal-contact-eyebrow{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--legal-accent, var(--blue-600));margin-bottom:8px;}
  .legal-contact h2{font-size:22px;font-weight:800;color:var(--ink-900);margin:0 0 8px;}
  .legal-contact p{font-size:13.5px;color:var(--ink-500);margin:0 0 22px;}
  .legal-contact-grid{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
  .legal-contact-item{display:flex;align-items:center;gap:12px;flex:1 1 180px;background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px;text-decoration:none;}
  .legal-contact-icon{width:36px;height:36px;border-radius:50%;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .legal-contact-icon svg{width:17px;height:17px;color:var(--legal-accent, var(--blue-600));}
  .legal-contact-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .legal-contact-label{font-size:10px;font-weight:800;letter-spacing:.05em;color:var(--ink-300);}
  .legal-contact-value{font-size:14px;font-weight:700;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .legal-extra-links{display:flex;gap:12px;flex-wrap:wrap;}
  .legal-extra-link-btn{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink-900);text-decoration:none;background:var(--card-bg);border:1px solid var(--line);border-radius:999px;padding:10px 18px;}
  .legal-extra-link-btn svg{width:14px;height:14px;flex-shrink:0;}
  .legal-extra-link-btn:hover{border-color:var(--legal-accent, var(--blue-600));}
  /* Do not use --ink-900 here: in dark mode it is the light heading-text
     color. The Theme tab's Footer Background is always the correct dark
     surface for this closing CTA. */
  .legal-footer-cta{display:flex;align-items:center;gap:16px;background:var(--dgv-footer-bg);border-radius:var(--radius-lg);padding:26px 30px;color:var(--dgv-footer-heading);}
  .legal-footer-cta svg{width:28px;height:28px;flex-shrink:0;opacity:.85;}
  .legal-footer-cta p{margin:0;font-size:15px;font-weight:600;line-height:1.6;font-style:italic;}

  @media(max-width:640px){
    .legal-hero h1{font-size:26px;}
    .legal-grid{grid-template-columns:1fr;}
    .legal-contact-item{min-width:0;flex:1 1 140px;}
  }

  body.theme-dark .legal-intro-card,body.theme-dark .legal-section,body.theme-dark .legal-contact{background:#0F1728;border-color:#232F45;}
  body.theme-dark .legal-hero-badge{background:#0F1728;border-color:#232F45;}
  body.theme-dark .legal-hero::before{opacity:.28;}
  body.theme-dark .legal-section-head h2,body.theme-dark .legal-contact h2,body.theme-dark .legal-card-lead,body.theme-dark .legal-card-head strong,body.theme-dark .legal-contact-value{color:#EDF1F9;}
  body.theme-dark .legal-contact-item,body.theme-dark .legal-extra-link-btn{background:#131B2C;border-color:#232F45;color:#EDF1F9;}
  body.theme-dark .legal-contact-icon{background:#0F1728;}
  body.theme-dark .legal-section-icon,body.theme-dark .legal-grid-item,body.theme-dark .legal-contact-item{background:#131B2C;border-color:#232F45;}
  /* Legal Builder callouts use CSS variables instead of a light inline
     background, so their color theme stays readable in dark mode. */
  body.theme-dark .legal-card-tinted{background:color-mix(in srgb, var(--legal-card-accent, var(--blue-500)) 14%, var(--card-bg));}
  body.theme-dark .legal-grid-item[style*="--legal-card-accent"]{background:color-mix(in srgb, var(--legal-card-accent) 12%, var(--card-bg));border-color:color-mix(in srgb, var(--legal-card-accent) 38%, var(--line));}