:root {
  /* Declared explicitly rather than left to the browser default. This is what
     tells the UA to paint native widgets - scrollbars, <select> popups, date
     pickers, the autofill dropdown - in the current theme. Without it the
     search page's three <select> elements and every scrollbar keep their
     light chrome on a dark page. The dark block sets its own value; this is
     the light half of the pair. */
  color-scheme: light;

  --brand: #5d8aa8;
  /* Ink colour for brand text and icons ON A LIGHT SURFACE. */
  --brand-text: #4a6f8a;

  --on-brand: #ffffff;
  --brand-dark: #4a6f8a;
  --brand-light: #e8f0f5;
  --brand-soft: var(--brand-light);
  --ring: rgba(93, 138, 168, .18);
  --accent: #000000;
  
  --accent-surface: #000000;
  --accent-hot: #111827;
  --on-accent-hot: #ffffff;
  --ink: #111827;
  --muted: #64748b;
  --line: #e8edf2;

  
  --bg-primary:     #f6f9f7;  /* page */
  --bg-secondary:   #ffffff;  /* cards, panels, raised surfaces */
  --bg-tertiary:    #f1f5f9;  /* sunken: inputs, table heads, chips */
  --text-primary:   #111827;  /* headings + body */
  --text-secondary: #44546b;  /* 7.27 / 7.70 / 7.03 - clears AAA on all three */
  --border-subtle:  #d7dfe8;  /* was #e8edf2 (1.18:1, effectively invisible as
                                 a component boundary). WCAG 1.4.11 wants 3:1
                                 for UI boundaries, so border contrast is a
                                 separate concern from text contrast. */

  
  --ink:    var(--text-primary);
  --muted:  var(--text-secondary);
  --bg:     var(--bg-primary);
  --card:   var(--bg-secondary);
  --card-2: var(--bg-tertiary);
  --line:   var(--border-subtle);

  /* Radius scale. Components used a mix of 10/12/14/16px which read as
     slightly "off" next to each other; picking values off one scale is what
     makes a UI feel deliberate. */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Soft, low-contrast shadows. The old values were pure rgba(11,19,43) with
     fairly high alpha, which gave a grey haze around cards on white. Layering
     a tight contact shadow under a wide ambient one reads cleaner and softer. */
  --shadow-sm: 0 1px 2px rgba(11, 19, 43, .05);
  --shadow: 0 4px 6px -1px rgba(11, 19, 43, .04),
            0 10px 24px -6px rgba(11, 19, 43, .10);
  --shadow-lg: 0 8px 12px -4px rgba(11, 19, 43, .06),
               0 22px 48px -12px rgba(11, 19, 43, .16);
  --success: #16a34a;
  /* Semantic status colours. --danger was missing entirely: .acct-dot asked for
     var(--bs-danger), which Bootstrap never defines, so that notification dot
     rendered with NO background at all - a silent failure, the same shape of bug
     as the earlier transparent-background rules. */
  --danger: #5d8aa8;
  --danger-text: #4a6f8a;  /* for danger text on a light surface: 5.9:1 on white */
  --warning: #b45309;
  --info: #1d4ed8;

  
  --bg: var(--bg-primary);
  --card: var(--bg-secondary);
  --card-2: var(--bg-tertiary);
  --surface-sunken: var(--bg-tertiary);
  --on-accent: #ffffff;

  /* One duration/easing pair so hover states across the site feel like they
     belong to the same product. */
  --t-fast: .15s;
  --t: .22s;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* Height of the mobile bottom nav (.gdh-bottomnav). app.js measures the
     real height and writes it back here, because it grows with the
     safe-area inset on notched phones. The value is only a pre-paint
     fallback so the sticky PDP bar never starts out overlapping. */
  --gdh-bottomnav-h: 62px;

  /* ---------------------------------------------------------------
     Admin panel tokens.
     The admin had its own hardcoded palette scattered across ~40 rules
     with dark-mode patches bolted on afterwards, which is why several
     surfaces and labels never matched up between themes. These give the
     panel one place to be themed from.
     --------------------------------------------------------------- */
  --adm-bg: #f4f7fb;
  --adm-surface: #ffffff;
  --adm-surface-2: #f8fafc;
  --adm-border: #d8e0ea;
  --adm-border-strong: #c6d1df;

  /* The sidebar is brand furniture, not a themed surface: it stays a dark
     indigo panel in BOTH themes so the admin never flips to a bright rail. */
  --adm-side-1: #000000;
  --adm-side-2: #1f2937;
  --adm-side-brand-1: #000000;
  --adm-side-brand-2: #111827;
  --adm-side-text: #ffffff;
  /* Was #94a3b8 (4.3:1) and #475569 (1.5:1 - unreadable) on the indigo rail.
     These clear WCAG AA for normal text: 6.1:1 and 4.6:1. */
  --adm-side-muted: #b6c0d6;
  --adm-side-head: #9aa7c4;
  --adm-side-hover: rgba(255, 255, 255, .08);
  --adm-side-border: rgba(255, 255, 255, .10);
}

* { -webkit-tap-highlight-color: transparent; }

  

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: #f7fafb;
  overflow-x: hidden;
}

a { text-decoration: none; }

/* Visible focus for keyboard users only. :focus-visible avoids the ugly ring
   on mouse clicks while still guaranteeing a keyboard user can always see
   where they are. Previously nothing in the stylesheet set an outline, so
   focus relied entirely on each control's own :focus rule - controls that
   had none (nav links, custom pills, tabs) were effectively invisible. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Only suppress the UA default where we paint our own ring. */
:focus:not(:focus-visible) { outline: none; }

/* Respect the OS "reduce motion" setting. Several rules here animate
   transforms and scale images on hover, which for some users is a real
   trigger for nausea. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .p-card:hover, .stat-card-modern:hover, .agent-card:hover { transform: none; }
  .p-thumb img, .p-card:hover .p-thumb img { transform: none; }
}

.text-brand { color: var(--brand-text) !important; }.bg-brand{ background: var(--brand) !important; }
.bg-brand-soft { background: var(--brand-light) !important; }
.bg-ink { background: var(--ink) !important; }
.text-accent { color: var(--accent) !important; }

.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  /* Press feedback. Without it a tap on a 44px button gives zero feedback on
     touch devices, where there is no hover state to signal the tap landed. */
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }.btn-brand{
  background: var(--brand);
  border-color: var(--brand-text);
  color: var(--on-brand);
  box-shadow: 0 2px 8px #rgba(93, 138, 168, .28);
}

.btn-brand:hover, .btn-brand:focus { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--on-brand); box-shadow: 0 4px 14px #rgba(93, 138, 168, .36); }
.btn-brand:active { box-shadow: 0 1px 4px #rgba(93, 138, 168, .3); }
.btn-accent { background: var(--accent-surface); border-color: var(--accent-surface); color: #fff; }
/* white is only 3.55:1 on the light orange - dark ink clears AA here */
  .btn-accent:hover { background: var(--accent-hot); border-color: var(--accent-hot); color: var(--on-accent-hot); }
.btn-outline-brand { color: var(--brand-text); border-color: var(--brand-text); }.btn-outline-brand:hover{ background: var(--brand); color: var(--on-brand); }

/* Navbar */
.main-nav {
  background: var(--bg-secondary);
  box-shadow: 0 1px 0 rgba(15,23,42,.06);
  transition: box-shadow .2s ease;
}
.main-nav.sticky-top { position: sticky; }
.brand-logo { font-weight: 800; letter-spacing: -.5px; font-size: 1.35rem; color: var(--ink); }
.brand-logo .dot { color: var(--accent); }
.brand-badge {
  font-size: .6rem; font-weight: 700; letter-spacing: .5px;
  background: var(--brand-light); color: var(--brand-dark);
  padding: 2px 7px; border-radius: 20px; vertical-align: middle;
}
.nav-search {
  background: var(--bg-tertiary); border: 1px solid transparent; border-radius: 12px;
  padding: .55rem .9rem; min-width: 240px;
}

.nav-search:focus { background: var(--bg-secondary); border-color: var(--brand-text); box-shadow: 0 0 0 .2rem var(--ring); }
.icon-btn {
  position: relative; width: 44px; height: 44px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 12px;
  color: var(--ink); border: 1px solid var(--line); background: #fff;
}
.icon-btn:hover { background: var(--brand-light); color: var(--brand-dark); border-color: var(--brand-light); }
.cart-badge {
  position: absolute; top: -6px; right: -6px; background: var(--accent-surface); color: #fff;
  font-size: .65rem; font-weight: 700; border-radius: 20px; padding: 2px 6px; min-width: 20px;
}

/* =========================================================
   GlobalDrop Header v2 - modern e-commerce header
   ========================================================= */
.gdh-header {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1029;
  transition: box-shadow .25s ease, background .25s ease;
}
.gdh-header.gdh-scrolled {
  box-shadow: 0 4px 20px rgba(11, 19, 43, .08);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.gdh-topbar { padding: 6px 0; }
.gdh-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
@media (max-width: 991.98px){
  .gdh-row { flex-wrap: wrap; }
}
.gdh-row-left{ display:flex; align-items:center; gap:12px; min-width:0; flex:0 1 auto; }
.gdh-search-mobile{ margin-top: 6px; }
@media (min-width: 992px){
  .gdh-search-mobile{ display:none !important; }
}

/* Brand */
.gdh-brand { display: flex; align-items: center; gap: 8px; }
.gdh-logo {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; letter-spacing: -.5px; font-size: 1.2rem; color: var(--ink); white-space: nowrap;
  /* A long site name must truncate rather than push the icon buttons off
     the edge of small screens. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.gdh-logo-ic { font-size: 1.45rem; color: var(--brand-text); }
/* Brand name shown beside the logo.
   A long name must truncate rather than push the header icon buttons off the
   edge of a small screen, so the text span carries its own overflow rules
   instead of relying on the flex parent. */
.gdh-logo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-brand-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* The uploaded logo is a 160x160 square mark. The old white chip
   (background:#fff; padding:3px) drew a white box around a logo that already
   has its own background, and on the dark admin rail it read as a floating
   white card. The mark is shown as-is and the size is capped so a wide
   wordmark does not blow out the 264px sidebar. */
.side-logo-img {
  height: 36px; width: auto; display: inline-block;
  max-width: 46px; object-fit: contain; vertical-align: middle;
  border-radius: 6px; background: transparent; padding: 0;
}
.admin-side .brand .side-logo-img { background: #fff; padding: 3px; }

/* Logo mark in the storefront header: it is a square, so cap the width too or
   a 160px-tall source logo would push the wordmark out of the bar. */
.gdh-logo-img {
  height: 34px; width: auto; display: block;
  max-width: 38px; object-fit: contain;
  border-radius: 6px;
}
.gdh-logo-dot { color: var(--brand-dark); }
.gdh-logo-badge {
  font-size: .6rem; font-weight: 700; letter-spacing: .5px;
  background: var(--brand-light); color: var(--brand-dark);
  padding: 2px 7px; border-radius: 20px; vertical-align: middle;
}

/* Burger (mobile) */
.gdh-burger {
  width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-secondary); color: var(--text-primary); display: inline-flex; align-items: center;
  justify-content: center; font-size: 1.3rem; line-height: 1;
}
.gdh-burger:hover { border-color: var(--brand-text); color: var(--brand-text); }/* Categories trigger */
.gdh-cat-btn{
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  background: var(--brand); border: none; border-radius: 12px; color: var(--on-brand);
  font-weight: 600; font-size: .9rem; white-space: nowrap;
  transition: background .15s ease;
}
.gdh-cat-btn:hover { background: var(--brand-dark); }
.gdh-cat-caret { font-size: .82rem; transition: transform .2s ease; }

/* Search */
.gdh-search { flex: 1 1 auto; min-width: 0; max-width: 640px; }
@media (min-width: 992px){
  .gdh-search{ margin: 0 8px; }
}
@media (max-width: 991.98px){
  .gdh-search{ max-width:none; min-width:0; }
}
.gdh-search-box {
  display: flex; align-items: center; background: var(--bg-tertiary); border: 1px solid transparent;
  border-radius: 12px; overflow: hidden; height: 40px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.gdh-search-box:focus-within {
  background: var(--bg-secondary); border-color: var(--brand-text);
  box-shadow: 0 0 0 3px rgba(154, 52, 18,.12);
}
.gdh-search-select {
  border: none; background: transparent; outline: none; height: 100%;
  padding: 0 6px 0 14px; font-size: .84rem; font-weight: 600; color: var(--ink);
  cursor: pointer; max-width: 128px; flex-shrink: 0;
}
.gdh-search-sep { width: 1px; height: 22px; background: var(--line); flex-shrink: 0; }
.gdh-search-input {
  flex: 1 1 auto; min-width: 0; border: none; background: transparent; outline: none;
  padding: 0 10px; font-size: .92rem; color: var(--ink);
}
.gdh-search-input::placeholder { color: var(--text-secondary); opacity: 1; }.gdh-search-btn{
  border: none; background: var(--brand); color: var(--on-brand); width: 40px; height: 40px;
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; transition: background .15s ease;
}
.gdh-search-btn:hover { background: var(--brand-dark); }
.gdh-search-img-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; background: var(--brand-light);
  color: var(--brand-dark); font-size: .95rem; cursor: pointer; flex-shrink: 0;
  transition: all .15s ease;
}.gdh-search-img-btn:hover{ background: var(--brand); color: var(--on-brand); }
.gdh-search-preview {
  display: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0; overflow: hidden; border-radius: 8px;
  background: var(--brand-light);
}
.gdh-search-preview img { width: 100%; height: 100%; object-fit: cover; }
.gdh-search-preview .spinner-border { width: 16px; height: 16px; border-width: 2px; color: var(--brand-text); }

/* Actions */
.gdh-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; flex-wrap: nowrap; }
@media (max-width: 1199.98px){
  .gdh-actions{ gap:5px; }
}
.gdh-nav-cta {
  display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  color: var(--ink); font-weight: 600; font-size: .88rem; white-space: nowrap;
  transition: all .15s ease;
}
.gdh-nav-cta:hover { border-color: var(--brand-text); color: var(--brand-text); }
.gdh-ico {
  position: relative; width: 40px; height: 40px; display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid var(--line);
  border-radius: 12px; background: #fff; color: var(--ink); font-size: 1.15rem;
  transition: all .15s ease; flex-shrink: 0;
}.gdh-ico:hover{ background: var(--brand); border-color: var(--brand-text); color: var(--on-brand); }
.gdh-badge {
  position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--accent-surface); color: #fff; font-size: .62rem; font-weight: 800;
  border-radius: 20px; display: inline-flex; align-items: center; justify-content: center;
  
  border: 2px solid var(--bg-secondary);
}.gdh-login{
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px;
  background: var(--brand); color: var(--on-brand); border: none; border-radius: 12px;
  font-weight: 700; font-size: .88rem; white-space: nowrap; transition: background .15s ease;
}
.gdh-login:hover { background: var(--brand-dark); color: var(--on-brand); }

/* ------------------------------------------------------------
   Header density / overflow control
   The single-row header needs ~1360px to breathe, but Bootstrap's
   .container is only 960px at `lg` (992-1199) and 1140px at `xl`.
   Without this the actions run past the container and the header
   overlaps the page content. So the search bar is fluid and the
   secondary icons drop away as the viewport narrows.
   ------------------------------------------------------------ */
.gdh-row { min-width: 0; }
.gdh-logo { min-width: 0; }
.gdh-logo-img { max-width: min(44px, 9vw); }

/* Language switcher collapses to a 44px icon-only pill below xl.
   (The sizing itself is declared further down, next to the pill's
   base style, so the two blocks cannot fight over `padding`.) */

/* lg: the container is only 960px - tighten the left cluster so the
   search keeps a usable width instead of being crushed to nothing. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .gdh-cat-btn { padding: 0 12px; font-size: .84rem; }
  .gdh-cat-btn .bi-chevron-down { display: none; }
  .gdh-logo-img { max-width: 40px; }
  .gdh-actions { gap: 5px; }
  /* Track + favourites are back in the row at this width, so buy the
     space back from the logo and the square hit targets. */
  .gdh-logo-img { max-width: 36px; }
  .gdh-ico { width: 42px; height: 42px; }
}

/* xl: 1140px container holds the full row, but the search bar still needs
   a sane floor so the placeholder never collapses to nothing. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .gdh-search-modern { flex-basis: 300px; }
}

/* Short-and-wide viewports (e.g. 1280x600 laptops) still overflow on
   height-constrained chrome; shrink the square hit targets a touch. */
@media (min-width: 992px) and (max-height: 700px) {
  .gdh-ico, .gdh-burger, .gdh-cat-btn, .gdh-lang-btn, .gdh-login {
    width: 40px; height: 40px;
  }
  .gdh-cat-btn, .gdh-login { width: auto; height: 40px; }
  .gdh-topbar { padding: 6px 0; }
}

/* Never let the actions row spill outside the container.
   NOTE: do NOT use `overflow: hidden` here. Bootstrap renders dropdowns
   (notifications, cart) as absolutely-positioned Popper menus inside the
   toggle's own wrapper, so an ancestor with overflow:hidden clips the
   whole panel - the buttons looked dead because the menu was cut away.
   `.gdh-search-modern` already carries `min-width: 0` and is the only
   flex item allowed to shrink, so the row reflows on its own. */
@media (min-width: 992px) {
  .gdh-actions { min-width: 0; }
}

/* Dropdowns */
.gdh-drop {
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  padding: .45rem; min-width: 240px; border-top: 3px solid var(--brand);
}
.gdh-drop .dropdown-item { border-radius: 10px; padding: .55rem .85rem; font-size: .88rem; font-weight: 600; }
.gdh-drop .dropdown-item:hover { background: var(--brand-light); color: var(--brand-dark); }
.gdh-drop-head {
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); padding: .55rem .85rem .3rem;
}
.gdh-drop a.dropdown-item i { margin-right: 10px; color: var(--brand-text); }

/* Categories mega modal */
.gdh-cat-modal .modal-content {
  border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.gdh-cat-modal .modal-header { border-bottom: 1px solid var(--line); padding: 1.05rem 1.35rem; }
.gdh-cat-modal .modal-title { font-size: 1.1rem; }
.gdh-cat-modal .modal-body { padding: 1.25rem; background: #fbfdfe; }
.gdh-cat-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 10px 6px 8px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; height: 100%; transition: all .15s ease;
}
.gdh-cat-card:hover {
  border-color: var(--brand-text); background: var(--brand-light);
  transform: translateY(-2px); box-shadow: var(--shadow);
}
.gdh-cat-ic {
  width: 36px; height: 36px; border-radius: 10px; background: var(--brand-light);
  color: var(--brand-dark); display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; transition: all .15s ease;
}.gdh-cat-card:hover .gdh-cat-ic{ background: var(--brand); color: var(--on-brand); }
.gdh-cat-name { font-size: .82rem; font-weight: 600; color: var(--ink); line-height: 1.25; }

/* Mobile drawer */
.gdh-drawer { width: 320px !important; }
.gdh-drawer-cat {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  font-weight: 700; font-size: .92rem; color: var(--ink);
}
.gdh-drawer-cat:hover { border-color: var(--brand-text); color: var(--brand-text); }
.gdh-drawer-list { display: grid; gap: 2px; }
.gdh-drawer-list a {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px;
  font-weight: 600; font-size: .9rem; color: var(--text-secondary);
}
.gdh-drawer-list a:hover { background: var(--brand-light); color: var(--brand-dark); }
.gdh-drawer-link {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 14px; border-radius: 12px; border: 0; background: transparent;
  font-weight: 600; font-size: .9rem; color: var(--text-secondary);
}
.gdh-drawer-link:hover { background: var(--brand-light); color: var(--brand-dark); }
.gdh-theme-btn i { transition: transform .25s ease; }
.gdh-theme-btn:hover i { transform: rotate(-20deg) scale(1.1); }

/* Notification + mini-cart dropdown panels */
.gdh-drop-wide {
  /* min-width would win over `width` and push the panel off a 320px
     phone, so both have to be viewport-clamped. */
  min-width: min(330px, calc(100vw - 24px));
  width: min(340px, calc(100vw - 24px));
  max-height: 70vh; overflow-y: auto; overscroll-behavior: contain;
}
/* Rows inside the desktop Messages / Notifications dropdowns. */
.gdh-drop-item {
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 9px 14px; font-size: .85rem;
}
.gdh-drop-item > i { color: var(--brand-text); margin-right: 0 !important; flex-shrink: 0; }
.gdh-drop-item > .text-truncate { flex: 1 1 auto; min-width: 0; }
.gdh-item-unread { background: var(--brand-light); font-weight: 700; }
.gdh-item-unread > i { color: var(--brand-dark); }
.gdh-item-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #5d8aa8; flex-shrink: 0;
}
.gdh-drop-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: .82rem; font-weight: 700; color: var(--brand-dark);
}
.gdh-notif-item, .gdh-mini-item {
  display: flex; align-items: flex-start; gap: 10px; white-space: normal;
}
.gdh-notif-item > i { font-size: 1.1rem; margin-top: 2px; margin-right: 0 !important; flex-shrink: 0; }
.gdh-notif-item b { font-size: .84rem; }
.gdh-notif-item small, .gdh-mini-item .m { color: var(--muted); font-size: .75rem; line-height: 1.3; }
.gdh-mini-item { align-items: center; }
.gdh-mini-item img {
  width: 46px; height: 46px; border-radius: 10px; object-fit: cover;
  background: #f1f5f9; flex-shrink: 0;
}
.gdh-mini-item .t { font-size: .85rem; font-weight: 600; line-height: 1.25; }
.gdh-mini-item .p { font-weight: 800; font-size: .88rem; color: var(--brand-dark); white-space: nowrap; }

/* Homepage banner carousel */
.gdh-banner-slide {
  display: flex; align-items: center; border-radius: 18px; overflow: hidden;
  position: relative; text-decoration: none;
  width: 100%; aspect-ratio: 16 / 5; min-height: 260px;
  max-height: 560px;
}
.gdh-banner-img { background-size: cover; background-position: center; background-repeat: no-repeat; }
.gdh-banner-grad { background: linear-gradient(120deg, var(--brand-dark), var(--brand)); }
.gdh-banner-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(120deg, rgba(0,0,0,.5), rgba(0,0,0,.15));
}
.gdh-banner-content { position: relative; z-index: 2; color: #fff; padding: 24px 28px; max-width: 560px; }
.gdh-banner-content h3 { font-size: 1.35rem; }
.gdh-banner-content p { font-size: .92rem; }
#homeBanner .carousel-indicators { margin-bottom: 8px; }
#homeBanner .carousel-control-prev, #homeBanner .carousel-control-next { z-index: 3; }
@media (max-width: 575.98px) {
  .gdh-banner-slide { border-radius: 14px; min-height: 180px; }
  .gdh-banner-content { padding: 18px 20px; }
  .gdh-banner-content h3 { font-size: 1.08rem; }
  .gdh-banner-content p { font-size: .78rem; }
}
@media (min-width: 768px) {
  .gdh-banner-slide { min-height: 200px; border-radius: 22px; }
  .gdh-banner-content { padding: 32px 36px; max-width: 620px; }
  .gdh-banner-content h3 { font-size: 1.55rem; }
}

/* Mobile bottom navigation */
.gdh-bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(15,23,42,.06);
  display: flex; align-items: stretch; gap: 2px; padding: 5px 8px;
  padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));
}
/* The Categories entry opens the categories modal instead of navigating, so it
   has to be a real <button> - an <a> with no href is not keyboard focusable.
   It therefore shares every rule below with the links, or it would render as a
   default UA button sitting in the middle of the bar. */
.gdh-bottomnav a,
.gdh-bottomnav button {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; padding: 5px 4px 4px;
  border-radius: 12px; color: var(--muted); font-size: .62rem; font-weight: 700;
  position: relative; transition: all .15s ease;
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
  text-decoration: none;
}
.gdh-bottomnav a i, .gdh-bottomnav button i { font-size: 1.28rem; line-height: 1; }
.gdh-bottomnav a span:last-child, .gdh-bottomnav button span:last-child { line-height: 1.1; }
.gdh-bottomnav a:hover, .gdh-bottomnav button:hover { color: #006994; }
.gdh-bottomnav a.gdh-active, .gdh-bottomnav a.gdh-active:hover,
.gdh-bottomnav button.gdh-active, .gdh-bottomnav button.gdh-active:hover { color: #006994; background: #e6f2f7; }
.gdh-bottomnav a .gdh-badge, .gdh-bottomnav button .gdh-badge { top: 1px; right: calc(50% - 22px); }

@media (max-width: 991.98px) {
  body { padding-bottom: 64px; }
}

@media (max-width: 991px) {
  .gdh-search { max-width: none; }
  .gdh-cat-btn{ display:none !important; }
  .gdh-logo{ font-size:1.18rem; }
  .gdh-logo-img{ height:34px; max-width:40px; }
}
/* xs: burger + logo + 4 icon buttons do not fit a 320px phone unless the
   gaps and hit targets shrink too. */
@media (max-width: 400px) {
  .gdh-topbar { padding: 6px 0; }
  .gdh-row { gap: 8px; }
  .gdh-row-left { gap: 8px; }
.gdh-mobile-more .gdh-burger { width: 38px; height: 38px; }
  .gdh-burger, .gdh-ico, .gdh-lang-btn { width: 40px; height: 40px; }
  .gdh-actions { gap: 4px; }
  .gdh-badge { min-width: 17px; height: 17px; font-size: .58rem; }
}

/* Hero. The gradient was still built from the previous teal brand
   (#0f9d8f / #0b6b62) while the whole site had moved to indigo, which made
   the homepage look like a different product to everything below it. */
.hero {
  background: radial-gradient(1200px 500px at 100% 0%, #4a6f8a55, transparent),
              radial-gradient(900px 500px at 0% 100%, #4a6f8a22, transparent),
              linear-gradient(180deg, #3a5a73 0%, #4a6f8a 100%);
  color: #fff;
  border-radius: 0 0 34px 34px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .5;
}
.hero .container { position: relative; z-index: 2; }
.hero h1 { font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
.hero-search {
  background: var(--bg-secondary); border-radius: 18px; padding: 8px; box-shadow: var(--shadow-lg);
  display: flex; gap: 8px; align-items: center; max-width: 680px;
}
.hero-search input {
  border: none; outline: none; flex: 1; padding: .75rem 1rem; font-size: 1rem; border-radius: 12px;
  color: var(--text-primary);
}

.hero-search select.hero-source {
  border: none; background: var(--bg-tertiary); border-radius: 12px; padding: .7rem .6rem; font-weight: 600; color: var(--text-primary);
}
.hero-chipline a {
  color: #dffbf7; border: 1px solid rgba(255,255,255,.3); border-radius: 30px;
  padding: .3rem .8rem; font-size: .8rem; display: inline-block; margin: 4px 4px 0 0;
}
.hero-chipline a:hover { background: rgba(255,255,255,.15); color: #fff; }

.hero-img-card {
  border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); border: 4px solid rgba(255,255,255,.4);
}

/* Cards */
.p-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
  height: 100%;
  display: flex; flex-direction: column;
}
.p-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #dbe3ec; }
.p-thumb {
  aspect-ratio: 1 / 1; background: #f1f5f9; overflow: hidden; position: relative;
}
.p-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.p-card:hover .p-thumb img { transform: scale(1.06); }
.p-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2; font-size: .68rem; font-weight: 700;
  background: var(--accent-surface); color: #fff; padding: 3px 9px; border-radius: 20px;
}
.p-src-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2; font-size: .68rem; font-weight: 700;
  background: rgba(15,23,42,.72); color: #fff; padding: 3px 9px; border-radius: 20px; backdrop-filter: blur(4px);
}
.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 20px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  border-radius: 100px;
  padding: 0 8px;
  margin-left: 6px;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(16, 185, 129, .3);
}
.p-title { font-size: .93rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.p-title:hover { color: var(--brand-text); }
.price-now { font-weight: 800; color: var(--brand-dark); font-size: 1.05rem; }
.price-old { color: var(--muted); text-decoration: line-through; font-size: .82rem; }
.price-orig { color: var(--muted); font-size: .78rem; }

/* Section */
.section-title { font-weight: 800; letter-spacing: -.5px; }
.eyebrow {
  color: var(--brand-text); font-weight: 700; font-size: .78rem; letter-spacing: 1.5px; text-transform: uppercase;
}

/* Feature steps */
.step-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; height: 100%;
}
.step-num {
  width: 46px; height: 46px; border-radius: 14px; background: var(--brand-light); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem;
}
.feature-icon {
  width: 52px; height: 52px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
  font-size: 1.4rem; background: var(--brand-light); color: var(--brand-dark);
}

/* Pricing breakdown */
.breakdown { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.breakdown .row-line {
  display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px dashed var(--line); font-size: .92rem;
}
.breakdown .row-line:last-child { border-bottom: none; }
.breakdown .total-line { font-weight: 800; font-size: 1.15rem; color: var(--brand-dark); }

/* Chips */
.chip {
  display: inline-block; padding: .35rem .8rem; border-radius: var(--radius-pill);
  background: var(--card-2);
  color: var(--ink); font-size: .82rem; font-weight: 600; border: 1px solid transparent;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.chip.active, .chip:hover { background: var(--brand-light); color: var(--brand-dark); border-color: var(--brand-text); }

/* Forms */
.form-control, .form-select { border-radius: 10px; padding: .6rem .85rem; border-color: var(--line); }
.form-control:focus, .form-select:focus { border-color: var(--brand-text); box-shadow: 0 0 0 .2rem var(--ring); }
.form-label { font-weight: 600; font-size: .88rem; }

/* Sidebar / dashboard */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.panel-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); font-weight: 700; }
.stat-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-card .num { font-size: 1.6rem; font-weight: 800; letter-spacing: -1px; }
.stat-icon { width: 46px; height: 46px; border-radius: 12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }

.side-menu { list-style: none; margin: 0; padding: .5rem; }
.side-menu a {
  display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: 10px;
  
  color: var(--text-secondary); font-weight: 600; font-size: .92rem;
}
.side-menu a:hover { background: var(--bg-tertiary); color: var(--text-primary); }.side-menu a.active{ background: var(--brand); color: var(--on-brand); }

/* Tables */
.table-modern thead th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
  border-bottom: 1px solid var(--line); font-weight: 700; background: #fbfdfe;
}
.table-modern td { vertical-align: middle; }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 1.4rem 44px; }
.timeline li::before {
  content: ""; position: absolute; left: 8px; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-secondary); border: 3px solid var(--brand);
}.timeline li.done::before{ background: var(--brand); }
.timeline li:last-child { padding-bottom: 0; }

/* Legacy footer helpers - the new footer uses the .gdh-foot-* classes
   further down the file. Kept so any page still referencing them works. */
.pay-pill {
  display:inline-flex; align-items:center; gap:.4rem; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12); padding: .35rem .7rem; border-radius: 10px; font-size: .8rem; color:#e2e8f0;
}

/* Auth */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-side {
  background: linear-gradient(160deg, var(--brand-dark), var(--brand)); color: #fff; padding: 3rem;
  display:flex; flex-direction:column; justify-content:space-between; position: relative; overflow:hidden;
}
.auth-card { max-width: 460px; width: 100%; }
@media (max-width: 900px) { .auth-wrap { grid-template-columns: 1fr; } .auth-side { display: none; } }

/* Misc */
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--brand-light); }
.divider-or { display:flex; align-items:center; gap:1rem; color: var(--muted); font-size:.85rem; }
.divider-or::before, .divider-or::after { content:""; height:1px; background: var(--line); flex:1; }
.empty-state { text-align:center; padding: 3rem 1rem; color: var(--muted); }
.empty-state i { font-size: 3rem; color: #cbd5e1; }

.required-star { color: var(--accent); }

@media (max-width: 767px) {
  .hero { border-radius: 0 0 24px 24px; }
  .hero h1 { font-size: 1.8rem; }
  .hero-search { flex-direction: column; align-items: stretch; }
  .hero-search button { width: 100%; }
  .nav-search { min-width: 0; }
  .stat-card .num { font-size: 1.35rem; }
}

/* =========================================================
   Admin Panel — Modern UI
   ========================================================= */
.admin-body { background: var(--adm-bg); font-family: 'Inter', system-ui, sans-serif; }

/* --- Sidebar --- */
.admin-side {
  width: 264px;
  background: linear-gradient(180deg, var(--adm-side-1) 0%, var(--adm-side-2) 100%);
  color: var(--adm-side-muted);
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  transition: transform .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.admin-side::-webkit-scrollbar { width: 5px; }
.admin-side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 10px; }
.admin-side::-webkit-scrollbar-track { background: transparent; }

.admin-side .brand {
  color: var(--adm-side-text);
  font-weight: 800;
  padding: 1.3rem 1.4rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: 1.05rem;
  letter-spacing: -.3px;
  border-bottom: 1px solid var(--adm-side-border);
  text-decoration: none;
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, var(--adm-side-brand-1) 0%, var(--adm-side-brand-2) 100%);
  z-index: 10;
}
.admin-side .brand i { font-size: 1.4rem; color: #a8c5d9; }.admin-side .brand-badge{
  font-size: .6rem;
  background: var(--brand);
  color: var(--on-brand);
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* Section headings ("Manage", "Configuration"). These sit on the indigo rail
   in every theme, so they use a fixed light tone rather than --muted, which
   is dark in light mode and vanished against the rail. */
.admin-side .menu-head {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--adm-side-head);
  padding: 1.2rem 1.2rem .5rem;
  font-weight: 700;
}

.admin-side .side-menu { list-style: none; margin: 0; padding: .3rem .65rem; }
.admin-side .side-menu a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .85rem;
  border-radius: 10px;
  color: var(--adm-side-muted);
  font-weight: 500;
  font-size: .88rem;
  text-decoration: none;
  transition: background .18s var(--ease), color .18s var(--ease);
  position: relative;
}
.admin-side .side-menu a i { font-size: 1.05rem; width: 22px; text-align: center; transition: color .18s ease; }
.admin-side .side-menu a:hover {
  background: var(--adm-side-hover);
  color: var(--adm-side-text);
}
.admin-side .side-menu a:focus-visible {
  outline: 2px solid #a8c5d9;
  outline-offset: 2px;
  color: var(--adm-side-text);
}
.admin-side .side-menu a.active {
  background: linear-gradient(135deg, var(--brand) 0%, #3a5a73 100%);
  color: #fff;
  box-shadow: 0 4px 14px #rgba(93, 138, 168, .35);
}.admin-side .side-menu a.active::before{
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: var(--brand);
  border-radius: 0 4px 4px 0;
}
.admin-side .side-menu a .badge {
  margin-left: auto;
  font-size: .68rem;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 700;
}

/* --- Main content area --- */
.admin-main {
  margin-left: 264px;
  min-height: 100vh;
  transition: margin-left .3s cubic-bezier(.4,0,.2,1);
}

/* --- Topbar --- */
.admin-topbar {
  background: color-mix(in srgb, var(--adm-surface) 85%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--adm-border);
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: 0 1.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* --- Admin cards --- */
.admin-card {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
  overflow: hidden;
}
.admin-card:hover { box-shadow: 0 8px 25px rgba(15,23,42,.08); }

.admin-card .card-head {
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
}

.admin-card .card-body { padding: 1.4rem; }
.admin-card .card-body.flush { padding: 0; }

/* --- Stat cards --- */
.stat-card-modern {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: 18px;
  padding: 1.3rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              border-color .2s var(--ease);
  position: relative;
  overflow: hidden;
}
.stat-card-modern::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.stat-card-modern:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(15,23,42,.08); }
.stat-card-modern:hover::before { opacity: 1; }
.stat-card-modern .stat-icon-modern {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.stat-card-modern .stat-info { min-width: 0; }
.stat-card-modern .stat-num {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.8px;
  line-height: 1.1;
  color: var(--ink);
}
.stat-card-modern .stat-label {
  font-size: .78rem;
  color: var(--muted);
  font-weight: 500;
  margin-top: 2px;
}
.stat-card-modern .stat-delta {
  font-size: .72rem;
  font-weight: 700;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.stat-card-modern .stat-delta.up { color: var(--success); }

.stat-card-modern .stat-delta.down { color: #5d8aa8; }
/* --- Tables --- */
.table-modern thead th {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  border-bottom: 2px solid var(--adm-border);
  font-weight: 700;
  padding: .85rem 1rem;
  background: var(--adm-surface-2);
}
.table-modern td {
  vertical-align: middle;
  padding: .8rem 1rem;
  font-size: .88rem;
  border-bottom: 1px solid var(--adm-border);
}
.table-modern tbody tr { transition: background .15s ease; }
.table-modern tbody tr:hover { background: var(--adm-surface-2); }

/* --- Badges --- */
.badge-modern {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2px;
}
.badge-modern i { font-size: .55rem; }

/* --- Forms --- */
.form-control, .form-select {
  border-radius: 12px;
  padding: .65rem .9rem;
  border: 1.5px solid var(--line);
  font-size: .9rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-text);
  box-shadow: 0 0 0 3px #rgba(93, 138, 168, .1);
}
.form-label {
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: .4rem;
  color: var(--ink);
}

/* --- Buttons --- */
.btn-admin {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: .88rem;
  border: none;
  transition: all .18s ease;
  text-decoration: none;
  cursor: pointer;
}
.btn-admin-primary {
  background: linear-gradient(135deg, var(--brand) 0%, #3a5a73 100%);
  color: #fff;
  box-shadow: 0 4px 14px #rgba(93, 138, 168, .3);
}
.btn-admin-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px #rgba(93, 138, 168, .4); color: #fff; }

/* =========================================================
   Admin Settings — pricing cards & ON/OFF switches
   ========================================================= */
.price-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.price-card:hover { border-color: #dbe3ec; box-shadow: var(--shadow); }
.price-card-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 1rem; padding-bottom: .85rem;
  border-bottom: 1px solid var(--line);
}
.price-card-ic {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: var(--brand-light); color: var(--brand-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.price-card-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.price-card-t b { font-size: .95rem; color: var(--ink); }
.price-card-t small { font-size: .75rem; color: var(--muted); }
.price-card-note {
  margin-top: 1rem; padding-top: .85rem;
  border-top: 1px dashed var(--line);
  font-size: .76rem; color: var(--muted); line-height: 1.55;
}
.price-card-note a { color: var(--brand-dark); font-weight: 600; }

/* Labels are terse now that each field sits inside a titled method card. */
.admin-field-label {
  font-weight: 600; font-size: .74rem; color: var(--muted);
  margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .03em;
}
.price-card .form-control,
.price-card .input-group .form-control { border-radius: var(--radius-sm); }
.price-card .input-group .btn { border-radius: var(--radius-sm); }


.admin-switch {
  display: flex; align-items: center; gap: 14px;
  padding: .6rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card-2);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.admin-switch:has(input:checked) { border-color: var(--brand-text); background: var(--brand-light); }
.admin-switch .form-check-input { width: 2.5em; height: 1.35em; cursor: pointer; }.admin-switch .form-check-input:checked{ background-color: var(--brand-text); border-color: var(--brand-text); }

/* Settings tab strip */
.admin-settings-tabs .chip { white-space: nowrap; }

/* Landed-cost preview: removed with the preview feature. */

.btn-admin-outline {
  
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1.5px solid var(--line);
}
.btn-admin-outline:hover { background: var(--bg-tertiary); border-color: var(--border-subtle); color: var(--text-primary); }
.btn-admin-danger {
  background: #fef2f2;
  color: #5d8aa8;
}
.btn-admin-danger:hover { background: #e8f0f5; color: #5d8aa8; }
.btn-admin-sm { padding: .4rem .85rem; font-size: .8rem; border-radius: 10px; }

/* --- Icon buttons --- */
.icon-btn-modern {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--adm-border);
  background: var(--adm-surface);
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
}
.icon-btn-modern:hover { background: var(--adm-surface-2); color: var(--ink); border-color: var(--adm-border-strong); transform: translateY(-1px); }
.icon-btn-modern:active { transform: none; }

/* --- Search box --- */
.admin-search {
  position: relative;
  min-width: 240px;
}
.admin-search input {
  border-radius: 12px;
  padding: .55rem 1rem .55rem 2.4rem;
  border: 1.5px solid var(--adm-border);
  font-size: .88rem;
  width: 100%;
  color: var(--ink);
  background: var(--adm-surface-2);
  transition: background .18s var(--ease), border-color .18s var(--ease),
              box-shadow .18s var(--ease);
}
.admin-search input::placeholder { color: var(--muted); }
.admin-search input:focus {
  background: var(--adm-surface);
  border-color: var(--brand-text);
  box-shadow: 0 0 0 3px #rgba(93, 138, 168, .1);
  outline: none;
}
.admin-search > i {
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: .9rem;
}

/* --- Admin status chips ---
   These replaced inline `background:#dcfce7;color:#16a34a` pairs. A pale mint
   chip looks fine on white and looks like a hole in a dark card, so the light
   and dark values are both declared here instead. */
.adm-chip { border: 1px solid transparent; }
.adm-chip-ok {
  background: rgba(22, 163, 74, .10);
  color: #15803d;
  border-color: rgba(22, 163, 74, .28);
}
.adm-chip-bad {
  background: rgba(93, 138, 168, .10);
  color: #4a6f8a;
  border-color: rgba(93, 138, 168, .28);
}
.adm-chip-muted {
  background: var(--adm-surface-2);
  color: var(--muted);
  border-color: var(--adm-border);
}
/* Dashboard stat icon tint: replaces inline rgba()/hex on each card. The
   colour still arrives per-card via --tint, so each stat keeps its own hue. */
.stat-icon-modern.adm-tint {
  background: color-mix(in srgb, var(--tint, #4a6f8a) 12%, transparent);
  color: var(--tint, #4a6f8a);
}
.adm-empty-ic { font-size: 2rem; color: var(--adm-border-strong); }
.adm-logo-box { background: #fff; }

/* Admin login button. Was an inline indigo->green gradient (#00c864), which is
   a different brand from the one the panel and storefront use. */
.adm-login-btn {
  border-radius: 12px;
  border: none;
  color: #fff;
  font-size: .95rem;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  box-shadow: 0 4px 14px #rgba(93, 138, 168, .32);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              filter var(--t) var(--ease);
}
.adm-login-btn:hover, .adm-login-btn:focus {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px #rgba(93, 138, 168, .42);
}
.adm-login-btn:active { transform: none; filter: brightness(.97); }

/* --- Notifications dropdown --- */
.admin-notif-btn { position: relative; }
.admin-notif-btn .notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: #5d8aa8;
  border-radius: 50%;
  
  border: 2px solid var(--adm-surface);
}

/* --- Admin avatar in topbar --- */
.admin-ava {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand) 0%, #3a5a73 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .9rem;
  box-shadow: 0 3px 10px #rgba(93, 138, 168, .3);
}

/* --- Admin footer --- */
.admin-footer {
  background: var(--adm-surface);
  border-top: 1px solid var(--adm-border);
  padding: 1.2rem 1.5rem;
  text-align: center;
  color: var(--adm-muted, #44546b);
  font-size: .8rem;
}

/* --- Quick action cards --- */
.quick-action {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  border: 1.5px solid var(--adm-border);
  background: var(--adm-surface);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: .88rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease),
              transform .18s var(--ease), background .18s var(--ease);
}
.quick-action:hover { border-color: var(--brand-text); box-shadow: 0 4px 14px #rgba(93, 138, 168, .12); transform: translateY(-1px); color: var(--ink); }
.quick-action:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.quick-action i {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* --- Activity feed --- */
.activity-item {
  display: flex;
  gap: .85rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
}
.activity-item:last-child { border-bottom: none; }
.activity-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

/* --- Dashboard card view (replaces tables for recent orders/customers) --- */
.dash-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .9rem;
  padding: 1.2rem;
}
.dash-card {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: 14px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  min-width: 0;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.dash-card:hover { border-color: var(--brand-text); box-shadow: 0 4px 14px #rgba(93, 138, 168, .12); transform: translateY(-1px); }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.dash-card-title { font-weight: 700; font-size: .88rem; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-card-sub { font-size: .75rem; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-card-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .85rem; }
.dash-card-foot {
  margin-top: auto;
  padding-top: .6rem;
  border-top: 1px dashed var(--adm-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .78rem;
  color: var(--muted);
}
.dash-card-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 2rem 0; font-size: .88rem; }

/* --- Responsive --- */
@media (max-width: 991px) {
  .admin-side { transform: translateX(-100%); }
  .admin-side.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .admin-main { margin-left: 0; }
  .admin-search { min-width: 0; flex: 1; }
  .admin-search input { padding: .5rem .9rem .5rem 2.2rem; }
}
@media (max-width: 575px) {
  .stat-card-modern { padding: 1rem; }
  .stat-card-modern .stat-icon-modern { width: 44px; height: 44px; font-size: 1.2rem; }
  .stat-card-modern .stat-num { font-size: 1.3rem; }
  .admin-topbar { padding: 0 1rem; }
}
/* =========================================================
   Modern user panel + dashboard
   ========================================================= */
.d-panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.dash-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--brand-dark), var(--brand));
  border-radius: 18px; padding: 1.4rem 1.5rem; color: #fff;
}
.dash-hero::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 65%);
}
.dash-hero .eyebrow { color: rgba(255,255,255,.75); }
.dash-hero .btn-brand { background: #fff; color: var(--brand-dark); border: none; font-weight: 700; }
.dash-hero .btn-brand:hover { background: var(--brand-light); }
/* User dashboard: recolor the red brand UI to purple on the dashboard page. */
.user-dashboard-page {
  --brand: #734f96;
  --brand-text: #5a3d7a;
  --brand-dark: #5a3d7a;
  --brand-light: #e8def2;
  --brand-soft: var(--brand-light);
  --ring: rgba(115, 79, 150, .18);
}

/* Remove remaining red (Bootstrap danger) UI and use #5d8aa8 instead. */
.text-danger { color: #5d8aa8 !important; }
.bg-danger { background-color: #5d8aa8 !important; }
.border-danger { border-color: #5d8aa8 !important; }
.btn-danger { background-color: #5d8aa8; border-color: #5d8aa8; color: #fff; }
.btn-danger:hover { background-color: #4a6f8a; border-color: #4a6f8a; color: #fff; }
.alert-danger { color: #4a6f8a; background-color: #e8f0f5; border-color: #a8c5d9; }
.badge.bg-danger { background-color: #5d8aa8 !important; }
.dash-hero .btn-outline-brand { border-color: rgba(255,255,255,.5); color: #fff; }
.dash-hero .btn-outline-brand:hover { background: rgba(255,255,255,.12); color: #fff; }
.dash-hero-ava {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.5rem;
}
.stat-mini { padding: 1rem 1.1rem; transition: transform .15s ease, box-shadow .15s ease; }
.stat-mini:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.08); }
.quick-act {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 6px;
  font-size: .78rem; font-weight: 600; color: var(--ink); text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.quick-act i { font-size: 1.35rem; }
.quick-act:hover { background: var(--brand-soft); border-color: var(--brand-light); color: var(--brand-dark); transform: translateY(-2px); }
.dash-support { border-style: dashed; }

/* Add-to-cart toast */
.gdh-toast-wrap { position: fixed; bottom: 84px; right: 16px; z-index: 1085; display: flex; flex-direction: column; gap: 8px; }
.gdh-toast { background: #0f172a; color: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 12px 32px rgba(15,23,42,.25); }.gdh-toast-ic{ width: 40px; height: 40px; border-radius: 12px; background: var(--brand); color: var(--on-brand); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.gdh-toast-title { font-weight: 700; font-size: .9rem; }
.gdh-toast-sub { color: #a3b4cc; font-size: .8rem; margin-top: 2px; }
.gdh-toast .btn-close { filter: invert(1); opacity: .6; }
@media (max-width: 575px) { .gdh-toast-wrap { left: 12px; right: 12px; bottom: 76px; } }

/* Step progress bar (cart / checkout) */
.stepbar { display: flex; align-items: center; gap: 8px; max-width: 520px; }
.step { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .85rem; font-weight: 600; flex: 0 0 auto; }
.step-n {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-tertiary); color: var(--text-secondary); font-size: .78rem; font-weight: 700;
}
.step.active { color: var(--brand-dark); }.step.active .step-n{ background: var(--brand); color: var(--on-brand); }
.step.done .step-n { background: var(--brand-soft); color: var(--brand-dark); }
.stepbar .step:not(:last-child)::after { content: ""; width: 34px; height: 2px; background: var(--line); border-radius: 2px; }
.stepbar .step:not(:last-child) { margin-right: 8px; }
@media (max-width: 575px) {
  .step { font-size: .72rem; gap: 6px; }
  .step-n { width: 22px; height: 22px; font-size: .7rem; }
  .stepbar .step:not(:last-child)::after { width: 18px; }
  .stepbar .step:not(:last-child) { margin-right: 4px; }
}

/* Payment method cards (checkout) */
.pm-select input { display: none; }
.pm-card {
  display: block; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px;
  cursor: pointer; height: 100%; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pm-card .pm-sub { color: var(--muted); font-size: .8rem; margin-top: 4px; }
.pm-card .pm-ins { font-size: .74rem; }
.pm-radio {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #cbd5e1; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s ease;
}
.pm-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .15s ease; }
.pm-select input:checked + .pm-card { border-color: var(--brand-text); background: var(--brand-soft); box-shadow: 0 4px 14px rgba(154, 52, 18,.12); }
.pm-select input:checked + .pm-card .pm-radio { border-color: var(--brand-text); }.pm-select input:checked + .pm-card .pm-radio::after{ background: var(--brand); transform: scale(1); }
.pm-select:hover .pm-card { border-color: var(--brand-light); }
.co-balance { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--brand-soft); }
.co-balance-l { font-size: .82rem; color: var(--muted); font-weight: 600; }
.co-balance-s { font-size: .78rem; color: var(--muted); }
.co-balance-v { font-size: 1.35rem; font-weight: 800; color: var(--brand-dark); }


/* Contact page */
.contact-card {
  padding: 1rem; text-align: center; transition: transform .15s ease, box-shadow .15s ease;
}
.contact-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,.08); }
.contact-ic { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 8px; }

/* Message bubbles (chat style) - modernized */
.msg-list { max-height: 560px; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; background: linear-gradient(180deg, #f8fafc, #fff); }
.msg-thread { display: flex; flex-direction: column; gap: 8px; padding: 1rem; border-radius: 16px; background: #fff; box-shadow: 0 4px 16px rgba(15,23,42,.05); border: 1px solid var(--line); }
.msg-bubble {
  max-width: 86%; padding: 12px 16px; border-radius: 18px; font-size: .9rem;
  line-height: 1.55; word-break: break-word; box-shadow: 0 2px 8px rgba(15,23,42,.06);
}
.msg-mine {
  align-self: flex-end; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: var(--on-brand);
  border-bottom-right-radius: 6px;
}
.msg-admin {
  align-self: flex-start; background: #f8fafc; border: 1px solid #e2e8f0;
  border-bottom-left-radius: 6px;
}
.msg-admin-name { font-weight: 700; font-size: .78rem; color: var(--brand-dark); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.msg-waiting { align-self: flex-start; background: var(--bg-tertiary); border: 1px dashed var(--border-subtle); color: var(--text-secondary); font-size: .8rem; border-radius: 16px; padding: 8px 14px; }
.msg-time { font-size: .7rem; margin-top: 6px; opacity: .85; }
.msg-mine .msg-time { color: rgba(255,255,255,.78); text-align: right; }
.msg-admin .msg-time { color: var(--text-secondary); }

/* User panel chrome */
.user-side { background: linear-gradient(180deg, #0f172a, #0c111f); }
.user-profile-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(120deg, var(--brand-dark), var(--brand));
  border-radius: 14px; padding: 12px;
  color: #fff;
}
.user-profile-card .avatar {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; flex-shrink: 0;
  background: rgba(255,255,255,.25);
  width: 52px; height: 52px; font-size: 1.3rem;
  overflow: hidden;
}
.user-profile-card .avatar img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; display: block;
}
.user-profile-card .acct-badge {
  background: rgba(255,255,255,.22); color: #fff;
  margin-top: 0;
}
.user-profile-card .up-contact {
  display: flex; flex-wrap: wrap; gap: 2px 12px;
  font-size: .75rem; color: rgba(255,255,255,.88);
  margin-top: 2px; word-break: break-all;
}
.user-profile-card .min-w-0 { min-width: 0; }
.user-profile-card .text-truncate { max-width: 180px; }
.user-profile-edit {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.2); color: #fff; display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: background .15s ease;
}
.user-profile-edit:hover { background: rgba(255,255,255,.35); color: #fff; }
.user-side-foot { padding: .9rem 1.1rem; }
.user-side-foot a { color: #a3b4cc; font-size: .85rem; }
.user-side-foot a:hover { color: #fff; }
.user-main { background: #f4f6f9; }
.user-top-btn {
  width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); font-size: 1.05rem; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.user-top-btn:hover { background: var(--brand-soft); border-color: var(--brand-light); color: var(--brand-dark); }
@media (max-width: 991px) { .admin-main.user-main { margin-left: 0; } }

/* Product gallery (multiple photos) */
.gal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  
  border: 1px solid var(--border-subtle); background: var(--bg-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; color: var(--text-primary); cursor: pointer; z-index: 3;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}.gal-nav:hover{ background: var(--brand); color: var(--on-brand); border-color: var(--brand-text); }
.gal-prev { left: 12px; }
.gal-next { right: 12px; }
.gal-counter {
  position: absolute; bottom: 12px; right: 12px; z-index: 3;
  background: rgba(15,23,42,.72); color: #fff; font-size: .74rem; font-weight: 600;
  padding: 3px 10px; border-radius: 20px; backdrop-filter: blur(4px);
}
.gal-slide { display: block; }
.gal-media { display: block; width: 100%; }
.gal-thumb {
  position: relative; width: 70px; height: 70px; padding: 0; overflow: hidden;
  border-radius: 12px; border: 2px solid var(--line); background: #f1f5f9;
  cursor: pointer; opacity: .75;
  transition: border-color .15s ease, opacity .15s ease;
}
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-thumb:hover, .gal-thumb.active { border-color: var(--brand-text); opacity: 1; }
.gal-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.35); color: #fff; font-size: 1.3rem;
}

/* Admin media tiles (photo + video) */
.media-tile {
  position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden;
  border: 2px solid var(--line); cursor: pointer; display: block; background: #f1f5f9;
}
.media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-tile input { position: absolute; top: 4px; left: 4px; z-index: 3; }
.media-tile-x {
  position: absolute; top: 2px; right: 2px; color: #fff; z-index: 2;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.media-tile-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.35); color: #fff; font-size: 1.4rem;
}
.media-tile input:checked ~ .media-tile-x,
.media-tile input:checked ~ .media-tile-play { opacity: .35; }
.media-tile input:checked ~ img { opacity: .35; }

/* Favourite heart on product cards */
.p-fav {
  position: absolute; left: 10px; bottom: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  
  border: 1px solid var(--border-subtle); background: var(--bg-secondary);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary); cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.p-fav:hover { color: #5d8aa8; border-color: #5d8aa8; }

  .p-fav.active { color: #8fb3cc; border-color: #8fb3cc; background: rgba(93, 138, 168, .18); }

/* Product page favourite button */
.btn.gdh-fav.active { background: rgba(93, 138, 168, .18); border-color: #8fb3cc; color: #8fb3cc; }
.btn.gdh-fav.active i { color: #5d8aa8; }

/* =========================================================
    Shipping Method Dropdown (product page)
    ========================================================= */
#shipMethodSelect {
    min-width: 190px;
    font-weight: 600;
    cursor: pointer;
}
#shipMethodSelect:focus {
    border-color: var(--brand-text);
    box-shadow: 0 0 0 .2rem var(--ring);
}

/* =========================================================
    Price summary rows (shared: cart, checkout, order, pricing)
    ========================================================= */
.row-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 18px;
    border-bottom: 1px solid #f1f5f9;
    font-size: .88rem;
}
.row-line span:first-child {
    color: var(--muted);
}
.row-line span:last-child {
    font-weight: 600;
}
.row-line.total-line {
    background: var(--brand-light) !important;
    border-bottom: none !important;
    padding: 12px 18px !important;
    font-size: 1.05rem !important;
    color: var(--brand-dark) !important;
}
.row-line.total-line span:last-child {
    color: var(--brand-dark);
    font-size: 1.15rem;
}

/* =========================================================
    Sticky Mobile Order Bar
    ========================================================= */
.sticky-mobile-bar {
    position: fixed;
    /* Sits directly ABOVE .gdh-bottomnav. Both are fixed at bottom:0 with
       the same z-index, so without this offset the PDP order bar was
       painted underneath the nav and its buttons were unclickable. */
    bottom: var(--gdh-bottomnav-h, 62px);
    left: 0;
    right: 0;
    z-index: 1041;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    padding: 8px 12px;
    padding-bottom: 8px;
    display: none;
}
@media (max-width: 991.98px) {
    .sticky-mobile-bar {
        display: flex;
        align-items: center;
    }
    /* Clear the PDP bar AND the bottom nav so the last row of content
       (reviews form, related products) is never trapped underneath. */
    /* app.js sets .gdh-has-sticky-bar on <body>; the :has() fallback covers
       the window between first paint and script execution. */
    body:has(.sticky-mobile-bar),
    body.gdh-has-sticky-bar {
        padding-bottom: calc(var(--gdh-bottomnav-h, 62px) + 76px + env(safe-area-inset-bottom, 0px));
    }
}
.sticky-mobile-bar .btn {
    padding: 8px 16px;
    font-size: .82rem;
    font-weight: 700;
    border-radius: 12px;
}
.sticky-mobile-bar .price-now {
    font-size: 1.1rem;
}
/* The bar carries 4 children (price, advance, Add, Buy Now). On a 360px
   phone justify-content:space-between squeezed the two buttons until the
   labels wrapped onto two lines and the bar grew tall enough to cover the
   gallery. Fixed basis + tighter buttons keeps it to one row. */
@media (max-width: 575.98px) {
    .sticky-mobile-bar > div > div { flex: 1 1 0; min-width: 0; }
    .sticky-mobile-bar .btn { padding: 8px 10px; font-size: .78rem; white-space: nowrap; }
    .sticky-mobile-bar .btn i { margin-right: 0 !important; }
}
@media (max-width: 360px) {
    .sticky-mobile-bar .btn { padding: 8px 8px; font-size: .74rem; }
}

/* =========================================================
    Air/Sea CBM indicator
    ========================================================= */
.cbm-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    padding: 3px 8px;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    font-weight: 600;
}
.cbm-indicator .bi-cube {
    font-size: .85rem;
}

/* =========================================================
    Language Switcher - Flags real-time without reload
   ========================================================= */
.gdh-lang {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 3px;
}
/* Header buttons: blue accent */
.gdh-header .gdh-cat-btn { background: #006994; }
.gdh-header .gdh-cat-btn:hover { background: #005577; }
.gdh-header .gdh-login { background: #006994; color: #fff; }
.gdh-header .gdh-login:hover { background: #005577; color: #fff; }
.gdh-header .gdh-search-modern-btn { background: #006994; }
.gdh-header .gdh-search-modern-btn:hover { background: #005577; }
.gdh-header .gdh-ico:hover { background: #006994; border-color: #006994; color: #fff; }
.gdh-header .gdh-burger:hover { border-color: #006994; color: #006994; }
.gdh-header .gdh-lang-flag.active { border-color: #006994; background: #e6f2f7; }
.gdh-header .gdh-lang-flag:hover { border-color: #006994; }
.gdh-header .gdh-search-modern-img { color: #006994; }
.gdh-header .gdh-search-modern-img:hover { background: #006994; color: #fff; }
.gdh-header a.gdh-ico[href*="track.php"],
.gdh-header a.gdh-ico[href*="cart.php"] { color: #fff; }
.gdh-header .gdh-ico {
  background: #006994;
  color: #fff;
  border-color: #006994;
}
.gdh-header .gdh-ico:hover {
  background: #005577;
  border-color: #005577;
  color: #fff;
}
.gdh-header .gdh-burger {
  background: #006994;
  color: #fff;
  border-color: #006994;
}
.gdh-header .gdh-burger:hover {
  background: #005577;
  border-color: #005577;
  color: #fff;
}
.gdh-header .gdh-lang-flag {
  background: #006994;
  color: #fff;
  border-color: #006994;
}
.gdh-header .gdh-lang-flag:hover {
  background: #005577;
  border-color: #005577;
  color: #fff;
}

/* Static language flags in the desktop header */
.gdh-lang-flags { align-items: center; gap: 6px; }
.gdh-lang-flag {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 1.25rem;
  cursor: pointer; transition: all .15s ease; flex-shrink: 0;
}
.gdh-lang-flag:hover { border-color: var(--brand-text); background: var(--brand-light); }
.gdh-lang-flag.active { border-color: var(--brand); background: var(--brand-light); }
.gdh-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all .15s ease;
    color: var(--muted);
}
.gdh-lang-btn:hover {
    background: #fff;
    color: var(--ink);
    border-color: var(--line);
}.gdh-lang-btn.active{
    background: var(--brand);
    color: var(--on-brand);
    border-color: var(--brand-text);
    box-shadow: 0 2px 8px rgba(154, 52, 18,.25);
}
.auth-lang {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
}
/* B2C Timeline */
.b2c-timeline{ display:flex; flex-direction:column; gap:10px; position:relative; padding-left:4px }
.b2c-step{ display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-radius:14px; padding:10px 14px; background:#fff; position:relative }
.b2c-step.done{ border-color:#C7D2FE; background:#e8f0f5 }
.b2c-step.current{ border-color:var(--brand-text); box-shadow:0 4px 14px rgba(154, 52, 18,.12) }
.b2c-step-icon{ width:36px; height:36px; border-radius:10px; background:var(--brand-light); color:var(--brand-dark); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0 }.b2c-step.done .b2c-step-icon{ background:var(--brand); color: var(--on-brand) }
.b2c-step-check{ position:absolute; top:8px; right:10px; width:22px; height:22px; border-radius:50%; background:#16a34a; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.75rem }
/* =========================================================
     Modern Search Box
     ========================================================= */
.gdh-search-modern {
    flex: 1 1 340px;
    min-width: 0;
    max-width: 560px;
    margin: 0 clamp(8px, 1.4vw, 24px);
}
.gdh-search-modern-box {
    display: flex;
    align-items: center;
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 16px;
    padding: 5px 6px 5px 16px;
    transition: all .25s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.gdh-search-modern-box:focus-within {
    border-color: var(--brand-text);
    box-shadow: 0 0 0 4px rgba(255, 107, 0, .1), 0 4px 12px rgba(0, 0, 0, .06);
    transform: translateY(-1px);
}
.gdh-search-modern-icon {
    font-size: 1.1rem;
    color: var(--muted);
    flex-shrink: 0;
    margin-right: 4px;
    transition: color .2s ease;
}
.gdh-search-modern-box:focus-within .gdh-search-modern-icon {
    color: var(--brand-text);
}
.gdh-search-modern-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 8px;
    font-size: .92rem;
    color: var(--ink);
    outline: none;
    min-width: 0;
    letter-spacing: .1px;
}
.gdh-search-modern-input::placeholder {
    color: var(--muted);
    opacity: .7;
}
.gdh-search-modern-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    font-size: 1.15rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .2s ease;
}
.gdh-search-modern-img:hover {
    background: rgba(255, 107, 0, .08);
    color: var(--brand-text);
    transform: scale(1.05);
}
.gdh-search-modern-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand) 0%, #ff8533 100%);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .2s ease;
    box-shadow: 0 2px 8px rgba(255, 107, 0, .25);
}
.gdh-search-modern-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(255, 107, 0, .35);
}
.gdh-search-modern-btn:active {
    transform: scale(.98);
}
.gdh-search-modern-mobile {
    /* Lives INSIDE .container, which already has 12-16px gutters. The old
       `padding: 0 16px` double-padded it, so the mobile search bar sat
       narrower than the logo + burger row directly above it. */
    padding: 0 0 12px;
}
.gdh-search-modern-mobile .gdh-search-modern-box {
    border-width: 1.5px;
    border-radius: 14px;
    padding: 4px 5px 4px 14px;
}
.gdh-search-modern-mobile .gdh-search-modern-input {
    padding: 10px 6px;
    font-size: .88rem;
}
.gdh-search-modern-mobile .gdh-search-modern-img {
    width: 38px;
    height: 38px;
}
.gdh-search-modern-mobile .gdh-search-modern-btn {
    width: 40px;
    height: 40px;
}

/* =========================================================
     AI Search Results Modal
     ========================================================= */
.gdh-ai-modal .modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.gdh-ai-modal .modal-header {
    border-bottom: 1px solid var(--line);
    padding: 16px 20px;
}
.gdh-ai-modal .modal-body {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}
.ai-upload-zone {
    border: 2px dashed var(--line);
    border-radius: 14px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all .2s ease;
    margin-bottom: 20px;
}
.ai-upload-zone:hover {
    border-color: var(--brand-text);
    background: rgba(255, 107, 0, .03);
}
.ai-upload-zone i {
    font-size: 2.5rem;
    color: var(--brand-text);
    margin-bottom: 10px;
}
.ai-upload-zone p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
}
.ai-upload-zone .ai-upload-hint {
    font-size: .78rem;
    margin-top: 6px;
    color: var(--muted);
    opacity: .7;
}
.ai-analysis-preview {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    align-items: flex-start;
}
.ai-analysis-preview img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--line);
}
.ai-analysis-info {
    flex: 1;
}
.ai-analysis-info .ai-confidence {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
    background: rgba(34, 197, 94, .1);
    color: #16a34a;
}
.ai-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.ai-tag {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 500;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--muted);
}
.ai-results-section {
    margin-top: 16px;
}
.ai-results-title {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ai-product-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all .15s ease;
    text-decoration: none;
    color: inherit;
}
.ai-product-card:hover {
    border-color: var(--brand-text);
    background: var(--brand-light);
}
.ai-product-card .ai-product-thumb {
    flex-shrink: 0;
    display: block;
}
.ai-product-card .ai-product-thumb img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.ai-product-card .ai-product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ai-product-card .ai-product-name {
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-product-card .ai-product-meta {
    font-size: .75rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-product-card .ai-product-price {
    font-weight: 800;
    color: var(--brand-dark);
    font-size: .85rem;
    white-space: nowrap;
}
.ai-product-card .ai-product-price del { margin-left: 5px; }
.ai-intl-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ai-intl-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--line);
    transition: all .15s ease;
}
.ai-intl-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.ai-intl-link-1688 { background: #ff6600; color: #fff; border-color: #ff6600; }
.ai-intl-link-alibaba { background: #ff6a00; color: #fff; border-color: #ff6a00; }
.ai-intl-link-taobao { background: #ff4400; color: #fff; border-color: #ff4400; }.ai-import-btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 600;
    background: var(--brand);
    color: var(--on-brand);
    border: none;
    cursor: pointer;
    transition: background .15s ease;
}
.ai-import-btn:hover {
    background: #e55f00;
}
/* =========================================================
   International agent theme — clean white + green, mobile-first
   ========================================================= */
body { background: #f6f9f7; }
.gdh-header { background: #fff; }.btn-brand{ background: var(--brand); border-color: var(--brand-text); }
.btn-brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-outline-brand { color: var(--brand-dark); border-color: var(--brand-text); }.btn-outline-brand:hover{ background: var(--brand); border-color: var(--brand-text); }
.text-brand { color: var(--brand-dark) !important; }
.gdh-search-modern-btn { background: linear-gradient(135deg, var(--brand) 0%, #4a6f8a 100%); box-shadow: 0 2px 8px #rgba(93, 138, 168, .25); }
.linkparse-hint { color: var(--brand-dark); }

/* Agent product card -------------------------------------------------
   2-column mobile grid unit. Square image well, badge cluster, BDT price
   with struck original, star row + score, sold volume, repurchase badge,
   clamped title, then a full-width Add / Buy pair.
   ------------------------------------------------------------------ */
.agent-card {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  overflow: hidden; height: 100%; display: flex; flex-direction: column;
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1), border-color .22s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color: transparent;
}
.agent-card:hover, .agent-card:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(11,19,43,.12);
  border-color: #rgba(93, 138, 168, .25);
}

/* Touch devices have no hover: lift on tap instead */
@media (hover: none) {
  .agent-card:active { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(11,19,43,.08); border-color: #rgba(93, 138, 168, .3); }
}

.agent-thumb {
  aspect-ratio: 1/1; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); position: relative; overflow: hidden;
}
.agent-thumb-link { display: block; width: 100%; height: 100%; }
.agent-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.agent-card:hover .agent-thumb img { transform: scale(1.08); }

/* Badge cluster: NEW + HOT stack on the left, discount on the right */
.agent-badges {
  position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2;
  display: flex; align-items: flex-start; gap: 5px; pointer-events: none;
}
.agent-badge {
  font-size: .62rem; font-weight: 800; letter-spacing: .5px;
  padding: 4px 10px; border-radius: 20px; color: #fff; line-height: 1.5;
  white-space: nowrap; box-shadow: 0 3px 8px rgba(0,0,0,.2);
  text-transform: uppercase;
}
.agent-badge-hot  { background: #5d8aa8; }.agent-badge-new{ background: var(--brand); }
.agent-badge-off  { margin-left: auto; background: var(--accent-surface); }

.agent-stock {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  font-size: .62rem; font-weight: 700; padding: 4px 12px; border-radius: 20px;
  background: rgba(15,23,42,.88); color: #fbbf24;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  letter-spacing: .3px;
}

.agent-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex-grow: 1; }

.agent-title {
  font-size: .88rem; font-weight: 700; line-height: 1.4; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em;
  letter-spacing: -.2px;
  transition: color .15s ease;
}
.agent-title:hover, .agent-title:focus { color: var(--brand-dark); text-decoration: underline; }

.agent-local { font-size: .75rem; color: var(--muted); margin-top: 4px; display: flex; justify-content: space-between; gap: 6px; }
.agent-moq { background: #f1f5f9; border-radius: 6px; padding: 0 6px; font-weight: 700; white-space: nowrap; }

/* Price: ৳1428 ৳1503 */
.agent-price {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin-top: 8px; line-height: 1.2;
}
.agent-price-now { font-weight: 800; color: var(--brand-dark); font-size: 1.15rem; letter-spacing: -.4px; }
.agent-price-old { color: var(--text-secondary); font-weight: 500; font-size: .8rem; }

.agent-meta {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  font-size: .76rem; color: var(--muted); flex-wrap: wrap;
}
.agent-stars { color: #f59e0b; display: inline-flex; align-items: center; gap: 1px; }
.agent-stars-row { display: inline-flex; gap: 1px; font-size: .72rem; }
.agent-stars-score { color: var(--ink); margin-left: 4px; font-weight: 700; }
.agent-sold { font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; text-transform: uppercase; letter-spacing: .3px; font-size: .7rem; }
.agent-sold i { color: var(--brand-text); }

.agent-tags { display: flex; gap: 5px; flex-wrap: nowrap; margin-top: 7px; overflow: hidden; max-height: 22px; transition: max-height .25s ease, flex-wrap 0s linear .25s; }
.agent-tags.expanded { flex-wrap: wrap; max-height: 200px; }
.agent-tags .agent-tag-more {
  font-size: .62rem; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--ink); cursor: pointer;
  flex-shrink: 0;
}
.agent-tag {
  font-size: .66rem; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  border: 1px solid var(--line); background: #f8fafc; color: var(--muted);
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
}
.agent-tag-rep      { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }
.agent-tag-years     { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.agent-tag-verified  { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.agent-tag-moq       { background: #f8fafc; }

.agent-tier-table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.agent-tier-table tr.table-success { --bs-table-bg: #ecfdf5; }
.agent-calc { background: #f8fafc; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.agent-seller { border-left: 3px solid var(--brand); }.agent-seller-ava{ width: 42px; height: 42px; border-radius: 12px; background: var(--brand); color: var(--on-brand); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; flex-shrink: 0; }
.agent-rating-grid { display: grid; gap: 4px; }
.agent-rating-row { display: grid; grid-template-columns: 30px 1fr 44px; align-items: center; gap: 8px; font-size: .76rem; color: var(--muted); }
.agent-rating-bar { height: 8px; background: #eef2f7; border-radius: 10px; overflow: hidden; }
.agent-rating-bar div { height: 100%; background: linear-gradient(90deg, var(--brand), #4a6f8a); border-radius: 10px; }

/* Seller card (PDP) */
.seller-card {
  border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 16px;
}
.seller-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.seller-stat { background: #f8fafc; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.seller-stat-l { font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
.seller-stat-v { font-weight: 800; color: var(--ink); font-size: .95rem; margin-top: 2px; }
.seller-verify {
  display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700;
  background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; border-radius: 20px; padding: 4px 10px;
}
.seller-verify i { font-size: .95rem; }

/* Homepage hero slider */
.home-hero { margin-top: 1rem; }
.gdh-hero-carousel { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.gdh-hero-arrow {
  width: 44px; height: 44px; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.85); border-radius: 50%; opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}
.gdh-hero-carousel:hover .gdh-hero-arrow { opacity: 1; }
.gdh-hero-arrow:hover { background: #fff; }
.carousel-control-prev.gdh-hero-arrow { left: 16px; }
.carousel-control-next.gdh-hero-arrow { right: 16px; }
.gdh-hero-arrow .carousel-control-prev-icon,
.gdh-hero-arrow .carousel-control-next-icon { width: 20px; height: 20px; }
.gdh-banner-content { max-width: 640px; }
.gdh-banner-content h3 { font-size: clamp(1.25rem, 3.2vw, 2.1rem); line-height: 1.2; }

/* Homepage reels carousel ---------------------------------------------
   Edge-to-edge horizontal rail with scroll-snap; arrows on pointer devices.
   ------------------------------------------------------------------ */
.home-reels { margin-top: 2rem; }
.reels-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.reels-nav { display: flex; gap: 8px; }
.reels-arrow {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg-secondary); color: var(--text-primary); display: inline-flex; align-items: center;
  justify-content: center; transition: all .18s ease;
}.reels-arrow:hover{ background: var(--brand); border-color: var(--brand-text); color: var(--on-brand); }
.reels-arrow:disabled { opacity: .35; pointer-events: none; }

.reels-rail-wrap { width: 100%; overflow: hidden; }
/* The rail bleeds to the viewport edge, but its padding has to reproduce each
   Bootstrap .container breakpoint - otherwise the first card sits at a
   different width from the product grids below and the section reads as a
   different card size. Same numbers as .container: 12px padding, then the
   per-breakpoint max-width. */
.reels-rail {
  --gdh-rail-pad: 16px;
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 4px var(--gdh-rail-pad) 14px;
  scrollbar-width: none; -ms-overflow-style: none;
}
@media (min-width: 576px)  { .reels-rail { --gdh-rail-pad: calc((100vw - 540px) / 2 + 12px); } }
@media (min-width: 768px)  { .reels-rail { --gdh-rail-pad: calc((100vw - 720px) / 2 + 12px); } }
@media (min-width: 992px)  { .reels-rail { --gdh-rail-pad: calc((100vw - 960px) / 2 + 12px); } }
@media (min-width: 1200px) { .reels-rail { --gdh-rail-pad: calc((100vw - 1140px) / 2 + 12px); } }
@media (min-width: 1400px) { .reels-rail { --gdh-rail-pad: calc((100vw - 1320px) / 2 + 12px); } }
.reels-rail::-webkit-scrollbar { display: none; }

/* Card width is one product-grid cell, at the same column count as
   `col-6 col-md-4 col-lg-3` in includes/product-card.php: two across on a
   phone, three at md, four from lg. Chrome mirrors .agent-card - same radius,
   border, lift and square image well - so the two card types read as one
   system instead of two sizes on the same screen. */
.reel-card {
  flex: 0 0 auto; scroll-snap-align: start;
  width: calc((100% - 10px) / 2); min-width: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1), border-color .22s cubic-bezier(.4,0,.2,1);
}
@media (min-width: 768px)  { .reel-card { width: calc((100% - 28px) / 3); } }
@media (min-width: 992px)  { .reel-card { width: calc((100% - 42px) / 4); max-width: 320px; } }
.reel-card:hover, .reel-card:focus-within {
  transform: translateY(-5px); box-shadow: 0 12px 32px rgba(11,19,43,.12); border-color: #rgba(93, 138, 168, .25);
}
.reel-card.is-featured { border-color: #ffd9a8; }

.reel-media {
  position: relative; display: block; aspect-ratio: 1/1; background: var(--accent);
  overflow: hidden;
}
.reel-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.reel-card:hover .reel-media img { transform: scale(1.06); }
.reel-thumb-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.35); font-size: 3rem;
  background: linear-gradient(135deg, #10203f, #1c355c);
}
.reel-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,19,43,0) 45%, rgba(11,19,43,.55) 100%); }
.reel-play {
  position: absolute; inset: 0; margin: auto; width: 58px; height: 58px;
  border-radius: 50%; background: rgba(255,255,255,.94); color: #111827;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  box-shadow: 0 6px 20px rgba(11,19,43,.3);
  transition: transform .2s ease, background .2s ease;
}
.reel-play i { margin-left: 3px; }
.reel-card:hover .reel-play { transform: scale(1.08); background: #fff; }
.reel-flag {
  position: absolute; top: 10px; left: 10px; font-size: .62rem; font-weight: 800;
  background: #ffb020; color: #3b2700; padding: 2px 8px; border-radius: 20px; letter-spacing: .3px;
}
.reel-dur {
  position: absolute; bottom: 10px; right: 10px; font-size: .66rem; font-weight: 700;
  background: rgba(11,19,43,.78); color: #fff; padding: 2px 7px; border-radius: 6px;
}
.reel-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.reel-title {
  font-size: .88rem; font-weight: 700; color: var(--ink); line-height: 1.4; letter-spacing: -.2px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.8em; transition: color .15s ease;
}
.reel-title:hover { color: var(--brand-dark); }
.reel-sub {
  font-size: .74rem; color: var(--muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.reel-meta { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.reel-chip { font-size: .64rem; font-weight: 700; background: var(--brand-light); color: var(--brand-dark); padding: 2px 7px; border-radius: 20px; }
.reel-views { font-size: .66rem; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; }
.reel-view-product {
  margin-left: auto; font-size: .68rem; font-weight: 700; color: var(--brand-dark);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.reel-view-product:hover { color: var(--brand-text); text-decoration: underline; }

/* In-rail video overlay injected by app.js */
.reel-player { position: absolute; inset: 0; background: #000; z-index: 3; }
.reel-player iframe, .reel-player video { width: 100%; height: 100%; border: 0; display: block; }
.reel-player-view {
  position: absolute; left: 8px; bottom: 8px; z-index: 4;
  
  background: var(--bg-secondary); color: var(--brand-text);
  font-size: .68rem; font-weight: 700; padding: 4px 9px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 4px;
}
.reel-player-view:hover { background: var(--bg-tertiary); color: var(--brand-dark); }
.reel-close {
  position: absolute; top: 8px; right: 8px; z-index: 4; width: 30px; height: 30px;
  border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}

/* Category-wise product rails */
.home-cats { margin-top: 2rem; }
.cat-rail { padding: 1.75rem 0 .5rem; }
.cat-rail:nth-child(odd) { background: linear-gradient(180deg, #ffffff 0%, #f6faf8 100%); }
.cat-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cat-rail-icon {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  background: var(--brand-light); color: var(--brand-dark);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem;
  overflow: hidden;
}
.cat-rail-icon img { width: 100%; height: 100%; object-fit: cover; }
.cat-rail-title { font-size: 1.1rem; font-weight: 800; letter-spacing: -.4px; color: var(--ink); margin: 0; }
.cat-rail-count { font-size: .76rem; color: var(--muted); }
.cat-tile { transition: transform .18s ease, box-shadow .18s ease; }
.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.min-w-0 { min-width: 0; }

/* AI camera scanner */
.ai-scan-intro { text-align: center; padding: 8px 0 14px; }
.ai-scan-intro i { font-size: 2.4rem; color: var(--brand-text); }
.ai-scan-actions { display: flex; gap: 8px; margin-bottom: 14px; }

.ai-cam { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 1/1; }
.ai-cam-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-cam-frame {
  position: absolute; inset: 12%; border: 2px dashed rgba(255,255,255,.8);
  border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.28); pointer-events: none;
}

.ai-upload-zone.over { border-color: var(--brand-text); background: var(--brand-light); }
.ai-confidence.ok { color: var(--brand-dark); font-weight: 800; }
.ai-product-thumb { position: relative; flex-shrink: 0; }.ai-match-ring{
  position: absolute; right: -6px; bottom: -6px; min-width: 26px; height: 26px;
  border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: .66rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-secondary);
}
.ai-product-score { font-weight: 800; color: var(--brand-dark); font-size: .84rem; flex-shrink: 0; }
.ai-product-price del { color: var(--text-secondary); font-weight: 500; font-size: .78rem; }

@media (max-width: 575.98px) {
  .agent-body { padding: 10px 12px 12px; }
  .agent-title { font-size: .82rem; }
  .agent-price-now { font-size: 1rem; }
  .agent-tag-moq, .agent-tag-years { display: none; }
  .gdh-hero-arrow { display: none; }
.reel-card { width: calc((100% - 10px) / 2); }
  .reels-rail { gap: 10px; --gdh-rail-pad: 12px; }
  .cat-rail { padding: 1.25rem 0 .25rem; }
  .cat-rail-icon { width: 38px; height: 38px; font-size: 1.05rem; }
  .cat-rail-title { font-size: .95rem; }
  .ai-scan-actions { flex-direction: column; }
  #shipMethodSelect { width: 100%; max-width: none; }
}

/* Loading skeletons — used while a link import reads the marketplace page */
.gd-sk {
  background: linear-gradient(90deg, var(--line) 25%, #eef2f1 37%, var(--line) 63%);
  background-size: 400% 100%;
  animation: gdSkPulse 1.3s ease-in-out infinite;
  border-radius: 10px;
}
.gd-sk-img { aspect-ratio: 1/1; border-radius: 14px; }
.gd-sk-line { height: 14px; margin-bottom: 12px; }
.gd-sk-price { height: 30px; width: 55%; margin: 16px 0; }
.gd-sk-pill { display: inline-block; height: 30px; width: 100px; border-radius: 20px; margin: 0 8px 8px 0; }
@keyframes gdSkPulse {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}@media (prefers-reduced-motion: reduce) {
  .gd-sk { animation: none; }
}

/* Reels: two cards across on tablet / small laptops */
@media (min-width: 576px) and (max-width: 991.98px) {
  .reel-card { width: calc((100% - 14px) / 2); max-width: none; }
}

/* Header language switcher */
.gdh-lang-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 38px; padding: 0 12px; border-radius: 19px;
  border: 1px solid var(--line); background: var(--bg-secondary); color: var(--text-primary);
  font-size: .82rem; font-weight: 700; transition: all .18s ease;
}
.gdh-lang-btn:hover { border-color: var(--brand-text); color: var(--brand-dark); background: var(--brand-light); }
/* Language pill. The "EN"/"বাংলা" label is worth ~26px, and below xxl that
   width is needed by the track + favourites buttons, which now appear from
   xl up. Collapse to a square icon-only button that still matches the 44px
   hit targets of the buttons around it. */
@media (max-width: 1399.98px) {
  .gdh-lang-btn { width: 44px; padding: 0; justify-content: center; }
  .gdh-lang-btn span[data-lang-label] { display: none; }
}
.dropdown-menu .dropdown-item[data-lang-btn].active { background: var(--brand-light); color: var(--brand-dark); font-weight: 700; }

/* Live search suggestions */
.gdh-search-modern-box { position: relative; }
.gdh-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1050;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); overflow: hidden; max-height: 380px; overflow-y: auto;
}
.gdh-sug {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  color: inherit; border-bottom: 1px solid #f1f5f9;
}
.gdh-sug:hover, .gdh-sug.on { background: var(--brand-light); }
.gdh-sug img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #f1f5f9; flex-shrink: 0; }
.gdh-sug-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gdh-sug-n { font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gdh-sug-m { font-size: .72rem; color: var(--muted); }
.gdh-sug-p { font-weight: 800; color: var(--brand-dark); font-size: .86rem; white-space: nowrap; }
.gdh-sug-all { display: block; text-align: center; padding: 9px; font-size: .82rem; font-weight: 700; color: var(--brand-dark); background: #f8fafc; }
.bd-paygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-top: 10px; }
.bd-pay {
  display: flex; align-items: center; gap: 10px;
  
  background: var(--bg-tertiary); border: 1px solid var(--line); border-radius: 14px; padding: 9px 12px;
}
.bd-pay-ic {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  background: var(--brand-light); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.bd-pay-t { display: flex; flex-direction: column; line-height: 1.3; }
.bd-pay-t small { font-size: .7rem; color: var(--muted); }
.bd-pay-t b { font-size: .92rem; }

/* PDP price + CTA quality */
#priceNow { letter-spacing: -.5px; }
#priceNow::after { content: " /pc"; font-size: .9rem; color: var(--muted); font-weight: 600; }
#tierNote { background: #dcfce7; color: #065f46; font-weight: 800; font-size: .68rem; padding: 2px 10px; border-radius: 20px; margin-left: 6px; vertical-align: middle; }
#tierNote:empty { display: none; }
#rateLine .rate-on { background: var(--brand-light); color: var(--brand-dark); font-weight: 800; padding: 1px 9px; border-radius: 12px; }
.pdp-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pdp-cta .btn {
  border-radius: 14px; padding: 13px 10px; font-weight: 700; font-size: .92rem;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.pdp-cta .btn:active { transform: scale(.97); }
.cta-add { background: #6699cc; border: none; color: #fff; box-shadow: 0 6px 18px rgba(102, 153, 204, .35); }
.cta-add:hover { filter: brightness(1.07); color: #fff; transform: translateY(-1px); }
.cta-buy { background: #111827; border: none; color: #fff; box-shadow: 0 6px 18px rgba(11,19,43,.28); }
.cta-buy:hover { background: #1c2947; color: #fff; transform: translateY(-1px); }
.cta-ghost { background: #fff; }
@media (max-width: 575.98px) {
  .pdp-cta .btn { font-size: .84rem; padding: 12px 6px; }
}
/* On mobile the sticky bottom bar already carries Add + Buy Now, so the
   in-page CTA row hides those two to avoid duplicate buttons. Favourite stays. */
@media (max-width: 991.98px) {
  .pdp-cta .cta-add,
  .pdp-cta .cta-buy { display: none; }
  .pdp-cta .cta-ghost { grid-column: 1 / -1; }
}

/* PDP live total + gallery lightbox */
.agent-totalbox {
  background: linear-gradient(120deg, #e8f0f5, #dcfce7);
  border: 1px solid #6ee7b7; border-radius: 12px; padding: 10px 14px;
}
.agent-totalbox .total-price { font-size: 1.35rem; font-weight: 800; color: var(--brand-dark); }
/* Order summary: product and shipping on their own lines above the grand
   total, so the customer can see exactly what the shipping costs before
   committing. Both rows are rewritten live whenever qty, variant or
   shipping method changes. */
.pdp-sum-rows {
  display: grid;
  gap: 4px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dashed rgba(6, 95, 70, .25);
}
.pdp-sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: .85rem;
}
.pdp-sum-row > span { color: var(--muted); }
.pdp-sum-row b { font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pdp-sum-total { font-size: .92rem; }
#galLight .modal-content { background: #111827; border: none; border-radius: 16px; overflow: hidden; }
#galLightBody { min-height: 200px; display: flex; align-items: center; justify-content: center; background: #111827; }
#galLightBody img, #galLightBody video { max-width: 100%; max-height: 78vh; object-fit: contain; display: block; margin: 0 auto; }
#galLightBody iframe { width: 100%; height: 60vh; border: 0; }
.gal-light-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.9); color: #111827; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.gal-light-prev { left: 12px; }
.gal-light-next { right: 12px; }
.gal-light-close { position: absolute; top: 10px; right: 10px; z-index: 5; }
.gal-slide { cursor: zoom-in; }

/* ===== Reference PDP layout: gallery left / info right + tabs ===== */
.pdp-wrap .breadcrumb-small { font-size: .82rem; }
.pdp-gallery-sticky { position: sticky; top: 92px; }
@media (max-width: 991.98px){ .pdp-gallery-sticky { position: static; } }
.pdp-gallery-sticky .panel .gal-media { aspect-ratio: 1/1; max-width: 100%; }
/* Keep product video players (native + embedded) inside the mobile viewport. */
.gal-media video, .gal-media iframe, video.gal-media, iframe.gal-media { max-width: 100%; height: auto; }
@media (max-width: 767.98px) {
  .gal-slide, .gal-media { max-width: 100%; overflow: hidden; }
  .gal-media iframe, .gal-media video, video.gal-media { width: 100% !important; max-height: 70vh; }
  .pdp-gallery-sticky .panel { overflow: hidden; }
}
.pdp-off-badge { position: absolute; top: 12px; left: 12px; z-index: 3; background: #5d8aa8; color: #fff; font-weight: 800; font-size: .8rem; padding: 4px 12px; border-radius: 20px; box-shadow: 0 4px 14px rgba(93, 138, 168,.4); }
.agent-badge-off { position: absolute; top: 8px; right: 8px; z-index: 2; font-size: .65rem; font-weight: 800; background: #111827; color: #fff; padding: 2px 8px; border-radius: 20px; }
.pdp-trust-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: .78rem; color: var(--muted); }
.pdp-trust-row i { color: var(--brand-text); margin-right: 4px; }
/* Estimated arrival strip that sits directly under the price panel. */
.pdp-arrive {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 1rem;
}
.pdp-arrive > i { color: var(--brand-text); font-size: 1.05rem; line-height: 1.35; flex-shrink: 0; }
.pdp-arrive-b { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pdp-arrive-t { font-size: .9rem; font-weight: 600; color: var(--ink); }
.pdp-arrive-t b { color: var(--brand-dark); font-weight: 800; }
.pdp-arrive-s { font-size: .78rem; color: var(--muted); }
/* Product price + shipping charge always stack on separate lines. */
.pdp-price-stack { display: flex; flex-direction: column; gap: 6px; }
.pdp-price-stack .price-now { line-height: 1.1; }
/* Shipping cost call-out under the headline price. */
.pdp-ship-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pdp-ship-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-light); color: var(--brand-dark);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 3px 11px; font-size: .78rem; font-weight: 600;
}
.pdp-ship-chip b { font-weight: 800; font-variant-numeric: tabular-nums; }
.pdp-ship-note-txt { font-size: .74rem; color: var(--muted); }
.pdp-title { letter-spacing: -.3px; }
.pdp-meta .pdp-stars { color: #f59e0b; font-size: .9rem; display: inline-flex; align-items: center; gap: 3px; }
.pdp-meta .pdp-stars b, .pdp-meta .pdp-sold b { color: var(--ink); }
.pdp-meta .pdp-dot { color: #cbd5e1; }
.pdp-price-panel { border: 1px solid #C7D2FE; background: linear-gradient(180deg,#e8f0f5 0%,#fff 38%); }
.pdp-offer { background: linear-gradient(120deg,#111827,#1c2947); color: #fff; border-radius: 12px; padding: 10px 14px; }
.pdp-offer-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; }
.pdp-offer-ends { background: rgba(255,255,255,.14); padding: 3px 10px; border-radius: 20px; font-size: .8rem; }
.pdp-offer-ends b { font-variant-numeric: tabular-nums; }
.pdp-offer-plain { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.pdp-ship-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
@media (max-width: 575.98px){ .pdp-ship-grid { grid-template-columns: repeat(2,1fr); } }
.pdp-ship-card { position: relative; display: flex; flex-direction: column; gap: 2px; border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 10px; cursor: pointer; background: #fff; transition: border-color .15s ease, background .15s ease; margin: 0; }
.pdp-ship-card input { position: absolute; opacity: 0; pointer-events: none; }
.pdp-ship-card.active { border-color: var(--brand-text); background: var(--brand-light); box-shadow: 0 0 0 .15rem var(--ring); }
.pdp-ship-t { font-weight: 700; font-size: .82rem; display: flex; align-items: center; gap: 5px; }
.pdp-ship-t i { color: var(--brand-text); }
.pdp-ship-s { font-size: .72rem; color: var(--muted); }
/* Variant selector: swatches, stock state, smooth active transition */
.pdp-var-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-var-pill { margin: 0; cursor: pointer; position: relative; }
.pdp-var-pill input { position: absolute; opacity: 0; pointer-events: none; }
.pdp-var-pill > span {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--line); border-radius: 20px; padding: 7px 14px;
  font-size: .84rem; font-weight: 600; background: #fff; color: var(--ink);
  transition: border-color .18s ease, background-color .18s ease, color .18s ease,
              box-shadow .18s ease, transform .18s ease;
}
.pdp-var-pill:hover > span { border-color: var(--brand-text); transform: translateY(-1px); box-shadow: 0 3px 10px #rgba(93, 138, 168, .14); }
.pdp-var-pill.active > span,
.pdp-var-pill input:focus-visible + span {
  border-color: var(--brand-text); background: var(--brand-light); color: var(--brand-dark);
  box-shadow: 0 0 0 3px #rgba(93, 138, 168, .14);
}
.pdp-var-pill.is-out { cursor: not-allowed; }
.pdp-var-pill.is-out > span {
  /* opacity .5 on top of an already-muted colour put this at 2.45:1 even in
     light mode. .62 keeps the "sold out" de-emphasis while clearing AAA, and the
     strikethrough already carries most of the meaning. */
  opacity: .62; text-decoration: line-through; background: var(--bg-tertiary);
}
.pdp-var-pill.is-out:hover > span { transform: none; box-shadow: none; border-color: var(--line); }
.pdp-var-swatch { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(11,19,43,.12); flex-shrink: 0; }
.pdp-var-extra { font-size: .74rem; color: var(--brand-dark); font-weight: 700; }
.pdp-var-left { font-size: .68rem; font-weight: 700; color: #b45309; background: #fff7ed; border-radius: 20px; padding: 1px 6px; }
.pdp-tabs .pdp-tabbar { border-bottom: 1px solid var(--line); background: #f8fafc; padding: 6px 10px 0; gap: 4px; }
.pdp-tabs .pdp-tabbar .nav-link { white-space: nowrap; border: none; color: var(--muted); font-weight: 700; font-size: .86rem; border-radius: 10px 10px 0 0; }
.pdp-tabs .pdp-tabbar .nav-link.active { color: var(--brand-dark); background: #fff; box-shadow: inset 0 -3px 0 var(--brand); }
.pdp-desc { line-height: 1.7; }
.pdp-desc-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: .84rem; color: var(--muted); }
.pdp-review-list { display: flex; flex-direction: column; gap: 12px; }
.pdp-review { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; }
.pdp-review-ava { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-light); color: var(--brand-dark); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.pdp-review .pdp-stars { color: #f59e0b; }
.pdp-cta { grid-template-columns: 1fr 1fr; }
.pdp-cta .cta-ghost { grid-column: 1 / -1; }
@media (min-width: 576px){ .pdp-cta { grid-template-columns: 1fr 1fr auto; } .pdp-cta .cta-ghost { grid-column: auto; } }

/* PDP info tabs: icon labels, count pill, and card-style panels */
.pdp-tabs .pdp-tabbar .nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; transition: color .15s ease, background .15s ease; }
.pdp-tabs .pdp-tabbar .nav-link i { font-size: .95rem; }
.pdp-tabs .pdp-tabbar .nav-link:hover { color: var(--brand-dark); }
.pdp-tab-count { font-size: .7rem; font-weight: 800; background: var(--brand-light); color: var(--brand-dark); border-radius: 20px; padding: 1px 7px; }
.pdp-tabs .tab-content { min-height: 160px; }
.pdp-tabs #tab-spec table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: .9rem; margin-bottom: 12px; }
.pdp-tabs #tab-spec th { color: var(--muted); font-weight: 600; background: #f8fafc; }
.pdp-tabs #tab-spec th, .pdp-tabs #tab-spec td { padding: 10px 12px; vertical-align: top; }
.pdp-info {
  display: flex; gap: 14px; align-items: flex-start; background: #ecfdf5;
  border: 1px solid #a7f3d0; border-radius: 14px; padding: 14px 16px;
}
.pdp-info-ic {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; background: #fff; color: #047857;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.pdp-info .pdp-desc { color: #064e3b; margin: 0; }
.pdp-rating-summary { background: var(--card-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.pdp-rating-score { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--ink); }
.pdp-empty {
  text-align: center; padding: 28px 16px; margin-bottom: 14px; background: #fff;
  border: 1px dashed var(--line); border-radius: 14px;
}
.pdp-empty-ic {
  width: 56px; height: 56px; border-radius: 50%; margin-bottom: 10px;
  background: var(--brand-light); color: var(--brand-dark);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.pdp-review { box-shadow: 0 1px 2px rgba(11,19,43,.04); }
.pdp-desc-meta span { background: #f8fafc; border: 1px solid var(--line); border-radius: 20px; padding: 4px 10px; }

/* =========================================================
   Account types, stage counters, recently viewed, coupons
   ========================================================= */

/* Registration / profile Personal vs Business picker */
.acct-type-opt {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px;
  background: #fff; transition: all .15s ease; height: 100%;
}
.acct-type-opt:hover { border-color: var(--brand-light); }
.acct-type-opt input { position: absolute; opacity: 0; pointer-events: none; }
.acct-type-face {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--brand-light); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.acct-type-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.acct-type-txt b { font-size: .88rem; }
.acct-type-txt small { color: var(--muted); font-size: .72rem; }
.acct-type-opt.on { border-color: var(--brand-text); background: var(--brand-light); box-shadow: 0 0 0 .15rem var(--ring); }

/* Account type badge (profile header, dashboard hero) */
.acct-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  font-size: .64rem; font-weight: 700; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 20px; text-transform: uppercase;
}
.acct-badge-business { background: rgba(13,110,253,.14); color: #0d6efd; }
.acct-badge-personal { background: rgba(0,204,153,.16); color: #00cc99; }
.admin-side .acct-badge { background: rgba(255,255,255,.16); color: #fff; }
/* Order stage counters (Buy & Ship / Ship for me) */
.stage-row {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
}
@media (max-width: 575.98px) {
  .stage-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .stage-cell { padding: 10px 2px; }
}
.stage-cell {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px; border-radius: 12px; text-decoration: none;
  color: var(--muted); border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.stage-cell:hover { background: var(--brand-light); transform: translateY(-2px); }
.stage-ic { position: relative; font-size: 1.5rem; line-height: 1; color: var(--muted); }
.stage-cell.has-items .stage-ic { color: var(--brand-text); }.stage-count{
  position: absolute; top: -6px; right: -4px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--brand); color: var(--on-brand); font-size: .62rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.stage-label { font-size: .68rem; font-weight: 700; text-align: center; line-height: 1.2; }
.stage-cell.has-items { border-color: var(--line); }
@media (max-width: 575.98px) {
  .stage-label { font-size: .62rem; }
  .stage-ic { font-size: 1.3rem; }
}

/* Recently viewed horizontal rail */
.rv-rail {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.rv-rail::-webkit-scrollbar { height: 5px; }
.rv-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.rv-item {
  flex: 0 0 104px; scroll-snap-align: start; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 4px;
}
.rv-thumb {
  width: 104px; height: 104px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: #f8fafc;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.rv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rv-name { font-size: .7rem; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rv-price { font-size: .74rem; font-weight: 700; color: var(--brand-dark); }

/* Account tile grid */
.acct-tile { position: relative; padding: 12px 4px; min-height: 80px; }
.acct-tile i { font-size: 1.3rem; }
.acct-tile span { font-size: .68rem; }
@media (max-width: 575.98px) {
  .acct-tile { min-height: 72px; padding: 10px 2px; }
  .acct-tile i { font-size: 1.15rem; }
  .acct-tile span { font-size: .6rem; }
}
.acct-dot {
  position: absolute; top: 6px; right: 8px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff;
  font-size: .62rem; font-weight: 800; line-height: 18px; text-align: center;
}

/* Coupon card */
.coupon-card {
  display: flex; border: 1px dashed var(--brand); border-radius: 14px;
  overflow: hidden; background: #fff; height: 100%;
}
.coupon-val {
  flex: 0 0 40%; background: var(--brand-light); color: var(--brand-dark);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 14px 8px; text-align: center; border-right: 1px dashed var(--brand);
}
.coupon-val b { font-size: .92rem; word-break: break-all; }
.coupon-val small { font-size: .74rem; font-weight: 700; }
.coupon-body { flex: 1; padding: 12px; min-width: 0; }

/* Favourite seller initials */
.seller-badge {
  width: 46px; height: 46px; margin: 0 auto; border-radius: 12px;
  background: var(--brand-light); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.15rem;
}.seller-badge.top{ background: var(--brand); color: var(--on-brand); }

/* Password strength meter (user/security.php) */
.pw-meter { height: 5px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pw-meter > span { display: block; height: 100%; width: 0; background: var(--muted); transition: width .2s ease, background .2s ease; }
.pw-rules { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pw-rules li::before { content: "\2022 "; }

/* Legal pages */
.legal-body { font-size: .92rem; line-height: 1.75; color: var(--ink); }
.legal-body h6 { margin-top: 1.25rem; margin-bottom: .35rem; }
.legal-body h6:first-child { margin-top: 0; }
.legal-body p { margin-bottom: .6rem; color: var(--muted); }
.legal-body a { color: var(--brand-dark); }
/* =========================================================
   FOOTER v2 - modern marketplace footer
   Three stacked bands: trust strip / link columns / bottom bar.
   Uses --card / --ink tokens so it inverts cleanly with the theme,
   and collapses to a single column on phones.
   ========================================================= */
.gdh-footer {
  margin-top: auto;
  background: var(--card);
  color: var(--ink);
  border-top: 1px solid var(--line);
}
/* Responsive: 4 trust items -> 2 -> 2 compact, columns stack */
/* Admin login splash stays brand navy in both themes so the card
   never flips to a dark-on-light mismatch. */
.auth-splash { background: #111827 !important; }
.auth-splash .auth-card { border: 1px solid rgba(255,255,255,.08) !important; }

/* --- Inline status tags previously hardcoded red (product + admin settings) --- */
.agent-tag-fail {
  background: rgba(93, 138, 168,.08);
  border-color: rgba(93, 138, 168,.35);
  color: #5d8aa8;
}
/* --- PDP toast: themed instead of hardcoded navy (product.php) --- */
.gd-toast {
  background: var(--accent);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 30px;
  font-size: .86rem;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(11,19,43,.25);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.gd-toast-warning { background: #b45309; color: #fff; }
/* <button> variants of the top-bar icon links need a background reset */
button.user-top-btn { background: transparent; padding: 0; }
/* Theme pill sits directly on the navy splash (admin login) in both themes */
.auth-splash .gdh-lang-btn { color: #94a3b8; border-color: rgba(255,255,255,.18); }.auth-splash .gdh-lang-btn:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-color: rgba(255,255,255,.3);
}

/* ============ Modern auth (login / register) - responsive all devices ============ */
.auth-wrap {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  background: var(--bg, #f6f8fb);
}
.auth-side {
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(100% 100% at 10% 100%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(160deg, var(--brand-dark, #046c43), var(--brand, #4a6f8a));
  color: #fff;
  padding: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.auth-side::after {
  content: "";
  position: absolute;
  inset: auto -30% -25% auto;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  z-index: -1;
}
.auth-side::before {
  content: "";
  position: absolute;
  inset: -10% auto auto -15%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  z-index: -1;
}
.auth-points { display: grid; gap: .85rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.auth-points li {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .92rem; color: rgba(255,255,255,.92);
}
.auth-points i {
  flex-shrink: 0; width: 1.7rem; height: 1.7rem; border-radius: .6rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); font-size: .95rem;
}
.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  position: relative;
  min-width: 0;
}
/* Full-screen single-column auth: form only, centered on the whole screen */
.auth-full {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-template-columns: none;
  min-height: 100svh;
  padding: clamp(1rem, 4vw, 2.5rem);
  padding-top: 3.5rem;
  background:
    radial-gradient(60% 45% at 50% 0%, #rgba(93, 138, 168, .08) 0%, rgba(194, 65, 12,0) 70%),
    var(--bg, #f6f8fb);
}
.auth-full .auth-main { padding: 0; width: 100%; max-width: 560px; }
.auth-full .auth-card { max-width: 560px; }
.auth-full .auth-brand-mobile { display: flex; }
@media (max-width: 380px) {
  .auth-full { padding: .75rem .75rem 2rem; padding-top: 3.25rem; }
}
.auth-card {
  max-width: 480px;
  width: 100%;
  background: var(--card, #fff);
  border: 1px solid var(--line, #e5eaf1);
  border-radius: 1.25rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  box-shadow: 0 18px 50px -18px rgba(2, 32, 22, .25);
}
.auth-card .form-control { border-radius: .75rem; padding: .7rem .9rem; }
.auth-card .form-control:focus {
  border-color: var(--brand, #4a6f8a);
  box-shadow: 0 0 0 .2rem var(--ring);
}
.auth-card .btn-brand, .auth-card .btn-outline-brand { border-radius: .8rem; padding: .7rem 1rem; font-weight: 700; }
.auth-brand-mobile { display: none; }
.auth-pass-wrap { position: relative; }
.auth-pass-wrap .form-control { padding-right: 2.75rem; }
.auth-pass-toggle {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--muted, #64748b);
  width: 2.1rem; height: 2.1rem; border-radius: .6rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.auth-pass-toggle:hover { background: rgba(0,0,0,.06); color: var(--ink, #0f172a); }
@media (max-width: 992px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .auth-brand-mobile {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 800; font-size: 1.15rem; margin-bottom: 1rem;
    color: var(--ink, #0f172a); text-decoration: none;
  }
  .auth-brand-mobile:hover { color: var(--ink, #0f172a); }
  .auth-main { align-items: flex-start; padding-top: 3.5rem; }
  .auth-card { box-shadow: 0 12px 34px -16px rgba(2,32,22,.22); }
}
@media (max-width: 380px) {
  .auth-main { padding: .75rem .75rem 2rem; padding-top: 3.25rem; }
  .auth-card { border-radius: 1rem; padding: 1.1rem; }
  .auth-lang { top: 10px; right: 10px; }
}
@media (min-width: 1400px) {
  .auth-card { max-width: 520px; }
}

/* =========================================================
   Per-piece product card
   ========================================================= */

.agent-price { align-items: baseline; gap: .35rem; }

/* =========================================================
   Checkout
   ========================================================= */
/* --- Stepped panels (1 Delivery, 2 Payment) --- */
.co-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.co-panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: .95rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--card-2);
}.co-step{
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--on-brand);
  font-size: .8rem; font-weight: 800; flex-shrink: 0;
}
.co-panel-t { font-weight: 700; font-size: .95rem; color: var(--ink); flex: 1 1 auto; }
.co-panel-sub { display: none; font-size: .78rem; color: var(--muted); }
@media (min-width: 576px) { .co-panel-sub { display: inline; } }
.co-panel-ic { color: var(--muted); font-size: 1.05rem; }
.co-panel-body { padding: 1.25rem; }

/* --- Delivery information form --- */
.co-group {
  display: flex; align-items: center; gap: 7px;
  font-size: .74rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
  margin: 0 0 .85rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.co-group i { color: var(--brand-text); font-size: .85rem; }

.co-lbl {
  display: block;
  font-size: .8rem; font-weight: 600; color: var(--ink);
  margin-bottom: .35rem;
}
.co-req { color: #5d8aa8; font-weight: 800; margin-left: 2px; }
.co-opt {
  font-weight: 500; font-size: .72rem; color: var(--muted);
  background: var(--card-2); border-radius: var(--radius-pill);
  padding: 1px 7px; margin-left: 6px; vertical-align: 1px;
}
.co-help { font-size: .74rem; color: var(--muted); margin-top: .35rem; line-height: 1.45; }
.co-help i { color: var(--brand-text); }

/* The order note is genuinely optional, so it sits in a quieter inset box rather
   than competing visually with the three required fields above it. */
.co-note {
  background: var(--card-2);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem 1rem;
}
.co-note .form-control { background: var(--card); }
.co-note .co-lbl { margin-bottom: .4rem; }

.co-panel-body .form-control {
  border-radius: var(--radius-sm);
  padding: .6rem .8rem;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.co-panel-body .form-control:focus {
  border-color: var(--brand-text);
  box-shadow: 0 0 0 .15rem var(--ring);
}
.co-panel-body textarea.form-control { line-height: 1.5; }

/* --- Advance split slider --- */
.co-advance {
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .95rem 1.1rem;
  margin-bottom: 1.25rem;
}
.co-advance-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: .5rem;
}
.co-advance-l { font-size: .82rem; color: var(--muted); font-weight: 600; }
.co-advance-pct {
  font-size: 1rem; font-weight: 800; color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}
/* Filled portion uses --pct, written by the slider JS. */
.co-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 6px; background: transparent;
  margin: 0 0 .75rem; cursor: pointer;
}
.co-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, var(--brand) var(--pct, 50%), var(--line) var(--pct, 50%));
}
.co-range::-moz-range-track { height: 6px; border-radius: 6px; background: var(--line); }.co-range::-moz-range-progress{ height: 6px; border-radius: 6px; background: var(--brand); }
.co-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand);
  box-shadow: 0 2px 8px #rgba(93, 138, 168, .35);
  margin-top: -7px;
  transition: transform var(--t-fast) var(--ease);
}
.co-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.co-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand);
  box-shadow: 0 2px 8px #rgba(93, 138, 168, .35);
}
.co-advance-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co-split {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .55rem .75rem;
  display: flex; flex-direction: column; gap: 1px;
}
.co-split-cod { border-style: dashed; }
.co-split-l { font-size: .7rem; color: var(--muted); font-weight: 600; }
.co-split-v { font-size: 1rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.co-hint { font-size: .74rem; color: var(--muted); margin: .7rem 0 0; line-height: 1.5; }

/* --- Screenshot dropzone --- */
.co-shot { margin-top: 1.25rem; }
.co-shot-l {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--ink); margin-bottom: .4rem;
}
.co-drop {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1.5px dashed var(--adm-border-strong, var(--line));
  border-radius: var(--radius-sm);
  background: var(--card-2);
  padding: 1.4rem 1rem;
  text-align: center; cursor: pointer; margin: 0;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.co-drop:hover, .co-drop.drag { border-color: var(--brand-text); background: var(--brand-light); }
.co-drop input { display: none; }
.co-drop.has-file { display: none; }
.co-drop-ic { font-size: 1.6rem; color: var(--brand-text); line-height: 1; }
.co-drop-t { font-size: .86rem; font-weight: 700; color: var(--ink); }
.co-drop-s { font-size: .74rem; color: var(--muted); }
.co-shot-prev {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card-2); padding: .7rem;
}
.co-shot-prev img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line); flex-shrink: 0;
}
.co-shot-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.co-shot-name {
  font-size: .8rem; color: var(--ink); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.co-ship {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.co-ship-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: .9rem;
}
.co-ship-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .95rem; color: var(--ink);
}
.co-ship-title i { color: var(--brand-text); }
.co-ship-total { font-size: .82rem; color: var(--muted); }
.co-ship-total b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }


.co-dd { position: relative; }

/* Closed trigger */
.co-dd-btn {
  width: 100%;
  display: flex; align-items: center; gap: 11px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  text-align: left; cursor: pointer; color: var(--ink);
  font-family: inherit;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              background var(--t) var(--ease);
}
.co-dd-btn:hover { border-color: var(--brand-text); }
.co-dd-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.co-dd.open .co-dd-btn {
  border-color: var(--brand-text);
  box-shadow: 0 0 0 .15rem var(--ring);
}
.co-dd-ic {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-light); color: var(--brand-dark); font-size: 1.05rem;
}
.co-dd-b { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.co-dd-t { font-size: .92rem; font-weight: 700; color: var(--ink); }
.co-dd-s {
  font-size: .76rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.co-dd-d {
  font-size: .68rem; font-weight: 800; color: var(--muted);
  background: var(--card-2); border-radius: var(--radius-pill);
  padding: 2px 8px; flex-shrink: 0; white-space: nowrap;
}.co-dd.open .co-dd-d{ background: var(--brand); color: var(--on-brand); }
.co-dd-caret {
  color: var(--muted); font-size: .8rem; flex-shrink: 0;
  transition: transform var(--t) var(--ease);
}
.co-dd.open .co-dd-caret { transform: rotate(180deg); }

/* Open list */
.co-dd-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  z-index: 40;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  max-height: 320px; overflow-y: auto;
  animation: coDdIn .14s var(--ease);
}
.co-dd-list[hidden] { display: none; }
@keyframes coDdIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.co-dd-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.co-dd-opt:hover, .co-dd-opt.cursor { background: var(--card-2); }
.co-dd-opt.sel { background: var(--brand-light); }
.co-dd-oi {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-2); color: var(--muted); font-size: .95rem;
}.co-dd-opt.sel .co-dd-oi{ background: var(--brand); color: var(--on-brand); }
.co-dd-ob { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.co-dd-on { font-size: .87rem; font-weight: 700; color: var(--ink); }
.co-dd-os {
  font-size: .74rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.co-dd-od {
  font-size: .68rem; font-weight: 800; color: var(--muted);
  background: var(--card-2); border-radius: var(--radius-pill);
  padding: 2px 7px; flex-shrink: 0; white-space: nowrap;
}.co-dd-opt.sel .co-dd-od{ background: var(--brand); color: var(--on-brand); }
.co-dd-ok { color: var(--brand-text); font-size: .9rem; flex-shrink: 0; opacity: 0; }
.co-dd-opt.sel .co-dd-ok { opacity: 1; }

@media (max-width: 420px) {
  .co-dd-os { white-space: normal; }
  .co-dd-od { display: none; }
}

/* =========================================================
   Checkout payment method selector
   ========================================================= */
.pm-list { display: flex; flex-direction: column; gap: .6rem; }
.pm-card {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 1rem; border: 1.5px solid var(--line);
  border-radius: 14px; cursor: pointer; background: var(--card);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pm-card:hover { border-color: var(--brand-text); background: var(--brand-light); }
.pm-card.pm-card-active { border-color: var(--brand); background: var(--brand-light); box-shadow: 0 0 0 3px var(--ring); }
.pm-card input { display: none; }
.pm-card-ic {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-2); color: var(--brand-text); font-size: 1.1rem;
}
.pm-card.pm-card-active .pm-card-ic { background: var(--brand); color: var(--on-brand); }
.pm-card-b { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pm-card-name { font-weight: 700; font-size: .9rem; color: var(--ink); }
.pm-card-type { font-size: .74rem; color: var(--muted); }
.pm-card-badge {
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  background: var(--brand); color: var(--on-brand); border-radius: 999px;
  padding: 2px 8px;
}
.co-payinfo { background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1rem; }
.co-payinfo-row { display: flex; align-items: center; gap: .75rem; padding: .35rem 0; flex-wrap: wrap; }
.co-payinfo-row span { font-size: .78rem; color: var(--muted); font-weight: 600; min-width: 110px; }
.co-payinfo-row b { font-size: .9rem; color: var(--ink); font-variant-numeric: tabular-nums; flex: 1 1 auto; }
.co-payinfo-val { word-break: break-all; }

/* =========================================================
   Checkout page refresh
   ========================================================= */
.co-ship {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.co-panel {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid var(--line);
}
.co-panel-head {
  padding: .95rem 1.15rem;
  background: linear-gradient(180deg, var(--card-2), var(--card));
}
.co-panel-t { font-size: 1rem; }
.co-panel-body { padding: 1.35rem; }
.co-summary {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.co-item-img { border-radius: 10px; }
.co-grand b { font-size: 1.65rem; }
.co-place {
  border-radius: 14px;
  padding: .85rem 1rem;
  font-size: 1.05rem;
  box-shadow: 0 10px 24px rgba(93, 138, 168, .28);
}
.co-place:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(93, 138, 168, .34); }
.co-safe { margin-top: .75rem; }
.co-weight { background: var(--card-2); border-radius: 10px; padding: .6rem .75rem; }
.co-coupon .btn { border-radius: 10px; }
.co-dd-btn { border-radius: 12px; }
.co-dd-list { border-radius: 12px; }
.co-lines { border-top: 1px dashed var(--line); }
@media (max-width: 991.98px) {
  .co-summary { margin-top: 1rem; }
}

/* --- Order summary --- */
.co-summary {
  position: sticky; top: 92px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
@media (max-width: 991.98px) { .co-summary { position: static; } }
.co-sum-head {
  display: flex; align-items: center; gap: 9px;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--card-2);
  font-weight: 700; font-size: .92rem; color: var(--ink);
}
.co-sum-head i { color: var(--brand-text); }
.co-sum-count {
  margin-left: auto; font-size: .72rem; font-weight: 700;
  color: var(--muted); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 1px 8px;
}
.co-sum-body { padding: 1.1rem; }

.co-items { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1rem; }
.co-item {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: .7rem; border-bottom: 1px solid var(--line);
}
.co-item:last-child { border-bottom: none; padding-bottom: 0; }
.co-item-img {
  width: 46px; height: 46px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); flex-shrink: 0;
}
.co-item-b { min-width: 0; flex: 1 1 auto; }
.co-item-n {
  font-size: .82rem; font-weight: 600; color: var(--ink); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.co-item-m { font-size: .74rem; color: var(--muted); margin-top: 2px; }
.co-item-v {
  font-size: .84rem; font-weight: 800; color: var(--ink);
  white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.co-item-x {
  border: none; background: transparent; color: var(--muted);
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.co-item-x:hover { background: rgba(93, 138, 168, .10); color: #5d8aa8; }
.co-item-x:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.co-lines { border-top: 1px solid var(--line); padding-top: .6rem; }
.co-line {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: .82rem; color: var(--muted);
  padding: 4px 0;
}
.co-line b { color: var(--ink); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.co-line-sub { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 8px; }

.co-grand {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-top: .8rem; padding-top: .8rem;
  border-top: 2px solid var(--line);
}
.co-grand span { font-weight: 700; font-size: .95rem; color: var(--ink); }
.co-grand b {
  font-size: 1.5rem; font-weight: 800; color: var(--brand-dark);
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}

.co-split2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: .9rem;
  background: var(--brand-light);
  border-radius: var(--radius-sm);
  padding: .7rem .85rem;
}
.co-s2 { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.co-s2 span { font-size: .7rem; color: var(--muted); font-weight: 600; }
.co-s2 b { font-size: .95rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.co-s2-now { color: var(--brand-dark) !important; }

.co-weight { font-size: .74rem; color: var(--muted); margin: .8rem 0 0; line-height: 1.5; }
.co-weight b { color: var(--ink); }
.co-place {
  margin-top: 1rem; font-weight: 700;
  box-shadow: 0 6px 16px rgba(234, 88, 12, .25);
}
.co-place:not(:disabled):hover { transform: translateY(-1px); }
.co-place.is-busy { opacity: .85; }
.co-safe { font-size: .74rem; color: var(--muted); text-align: center; margin: .6rem 0 0; }

/* =========================================================
   Cart page refresh
   ========================================================= */
.cart-lines { display: flex; flex-direction: column; gap: 1rem; }
.cart-line {
  border-radius: var(--radius-lg);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.cart-line:hover { box-shadow: var(--shadow-lg); }
.cart-line.cart-busy { opacity: .7; pointer-events: none; }
.cart-line-grid {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto auto auto;
  gap: 1rem 1.25rem;
  align-items: center;
}
.cart-line-media { display: flex; align-items: center; justify-content: center; }
.cart-line-img {
  width: 88px; height: 88px; object-fit: cover;
  border-radius: 14px; border: 1px solid var(--line); background: var(--card-2);
}
.cart-line-name { font-weight: 700; font-size: .95rem; color: var(--ink); display: block; line-height: 1.3; }
.cart-line-name:hover { color: var(--brand-dark); }
.cart-line-meta { font-size: .78rem; margin-top: .25rem; }
.cart-line-variants { display: flex; flex-wrap: wrap; gap: .5rem; }
.cart-variant-label { display: flex; flex-direction: column; gap: .2rem; min-width: 140px; flex: 1 1 160px; }
.cart-variant-label span { font-size: .72rem; font-weight: 600; }
.cart-line-qty { display: flex; justify-content: center; }
.cart-line-price { text-align: right; min-width: 92px; }
.cart-line-unit { font-variant-numeric: tabular-nums; }
.cart-line-total { font-size: 1.05rem; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.cart-remove-btn { border-radius: 10px; }
@media (max-width: 991.98px) {
  .cart-line-grid { grid-template-columns: 72px minmax(0, 1fr); }
  .cart-line-qty, .cart-line-price, .cart-line-actions { grid-column: 2; }
  .cart-line-qty { justify-content: flex-start; }
  .cart-line-price { text-align: left; }
  .cart-line-actions { display: flex; justify-content: flex-end; }
}
@media (max-width: 575.98px) {
  .cart-line-img { width: 72px; height: 72px; }
  .cart-line-grid { gap: .75rem; }
  .cart-variant-label { min-width: 100%; flex-basis: 100%; }
}

/* =========================================================
   Cart quantity stepper
   ========================================================= */

.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}
.qty-btn {
  width: 30px;
  border: 0;
  background: var(--card-2);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.qty-btn:hover { background: var(--brand-light); color: var(--brand-dark); }
.qty-btn:active { background: var(--brand-light); }
.qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.qty-input {
  width: 46px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 0;
  text-align: center;
  font-size: .875rem;
  font-weight: 600;
  padding: .3rem 0;
  background: transparent;
  color: var(--ink);
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.cart-variant { min-width: 120px; font-size: .8rem; }

/* A line being re-priced over AJAX dims very slightly so the update is felt. */
.cart-line { transition: opacity .15s ease; }
.cart-line.cart-busy { opacity: .55; pointer-events: none; }

/* =========================================================
   Approximate-weight notice

   Both languages ship in the markup and CSS picks one from <html lang>, which
   includes/header.php sets before first paint. No flash, no reload.
   ========================================================= */

.gd-weight-notice {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  padding: .6rem .8rem;
  font-size: .78rem;
  line-height: 1.45;
  color: #7a5b12;
  background: #fff8e6;
  border: 1px solid #f5dfa8;
  border-radius: 12px;
}
.gd-weight-notice i { flex: 0 0 auto; margin-top: .1rem; }
.wn-bn { display: none; }
html[lang="bn"] .wn-en { display: none; }
html[lang="bn"] .wn-bn { display: inline; }
/* =========================================================
   Mobile header
   ------------------------------------------------------------
   Below lg the stylesheet already does the heavy lifting: .gdh-cat-btn is
   display:none at max-width:991px, .gdh-logo drops to 1.18rem, and .gdh-row
   wraps so the burger + logo sit on one line with the icon cluster pushed
   right. Only one search bar is ever visible - the inline one carries
   d-none d-lg-flex and .gdh-search-mobile is hidden from 992px up.

   At max-width:400px the square hit targets and gaps tighten (.gdh-burger,
   .gdh-ico, .gdh-lang-btn -> 40px). The account dropdown and the Sign In
   button have since been removed from the row, so the language switcher is
   visible at every width instead.
   ========================================================= */

/* =========================================================
   Product page
   ------------------------------------------------------------
   Four classes the product template uses that had no rule at all, so they were
   rendering unstyled.

   .fav-label and .pdp-var-label are deliberately absent below: both are plain
   inline elements that correctly inherit from .btn and .pdp-var-pill > span.
   ========================================================= */

/* Bootstrap 5 dropped .text-warning, so the seller rating star fell back to
   the inherited text colour instead of gold. Matches .pdp-stars. */
.text-warning { color: #f59e0b !important; }

/* The "Write a review" form sits alongside .pdp-review cards; without this it
   was a bare stack of inputs. */
.pdp-review-form {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--card-2);
}
.pdp-review-form h6 { margin-bottom: .75rem; }

/* Wholesale tier ladder wrapper. .agent-tier-table th was already styled, but
   the table had no container, so it floated unframed under the price block. */
.agent-tiers {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--card-2);
}
.agent-tiers .agent-tier-table { margin-bottom: 0; }
.agent-tiers .agent-tier-table tbody tr:last-child td { border-bottom: 0; }

/* Gallery thumbnail strip. The thumbs themselves are styled (.gal-thumb 70px,
   .gal-thumb.active) but as flex children they could shrink on narrow screens,
   squashing the images. */
.gal-thumbs { align-items: center; }
.gal-thumbs .gal-thumb { flex: 0 0 auto; }

/* =========================================================
   Cart page
   ------------------------------------------------------------
   Two classes the cart templates use that had no rule at all, so they were
   silently rendering unstyled.
   ========================================================= */

/* Product name links in the cart table. Without this they fell back to
   Bootstrap's default link blue instead of the palette's ink colour. */
.text-ink { color: var(--ink) !important; }
.text-ink:hover { color: var(--brand-text) !important; }

/* The mini line-item list inside the order summary panel. Each row is a flex
   box with a 40px thumbnail; on a cart with many items the panel grew
   unbounded and pushed the checkout button far below the fold, so the list is
   capped and scrolls instead. */
.cart-mini-items {
  max-height: 172px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cart-mini-items > .d-flex:first-child { padding-top: 0; }
.cart-mini-items > .d-flex:last-child  { padding-bottom: 0; }


/* ================================================================
     SITE FOOTER - golden orange with black text.

     Replaces the old .gdh-footer block. One self-contained section at
     the end of the file so it wins on source order and cannot be
     half-overridden by the earlier footer rules.

     Contrast, measured against the WCAG formula rather than eyeballed:
       ink #14100A on gold  #FFB020 : 10.36:1  AAA
       ink #14100A on deep  #E88B00 :  7.33:1  AAA
       ink #14100A on white input : 18.95:1  AAA

     Gold is a light, warm surface, so every text colour here is a dark
     brown-black rather than grey - mid greys wash out on it.
     ================================================================ */

  .gf {
    --gf-bg: #006994;
    --gf-bg-deep: #005577;
    --gf-ink: #ffffff;
    --gf-ink-soft: #e8e6f5;
    background: var(--gf-bg);
    color: var(--gf-ink);
    margin-top: 0;
  }
  .gf a { color: var(--gf-ink); }
  .gf a:hover { color: #000; text-decoration: underline; }

  /* --- trust strip --- */
  .gf-trust { border-bottom: 1px solid rgba(20, 16, 10, .18); }
  .gf-trust-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(4, 1fr);
    padding: 18px 0;
  }
  .gf-trust-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .gf-trust-ic {
    width: 42px; height: 42px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; font-size: 1.15rem;
    background: rgba(20, 16, 10, .10);
    border: 1px solid rgba(20, 16, 10, .18);
    color: var(--gf-ink);
  }
  .gf-trust-item b { display: block; font-size: .9rem; font-weight: 800; line-height: 1.25; }
  .gf-trust-item small { display: block; font-size: .74rem; color: var(--gf-ink-soft); line-height: 1.3; }
  /* Set the ink on the strip itself, not only inherited from .gf. The text
     must stay dark on the gold surface whatever a parent or a utility class
     sets, so the strip's own colour is declared explicitly. */
  .gf .gf-trust,
  .gf .gf-trust-item,
  .gf .gf-trust-item b { color: var(--gf-ink); }
  .gf .gf-trust-item small { color: var(--gf-ink-soft); }

  /* --- main --- */
  .gf-main { padding: 34px 0 30px; }

  .gf-logo {
    display: inline-flex; align-items: center; gap: 9px;
    font-weight: 800; font-size: 1.3rem; letter-spacing: -.4px;
    color: var(--gf-ink); text-decoration: none; min-width: 0;
  }
  .gf-logo:hover { color: #000; text-decoration: none; }
  .gf-logo-img { height: 38px; width: auto; max-width: 38px; object-fit: contain; border-radius: 6px; }
  .gf-logo-text {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .gf-about { font-size: .88rem; color: var(--gf-ink-soft); margin: 10px 0 14px; max-width: 40ch; }

  /* newsletter: white input so the placeholder stays visible on gold */
  .gf-news-label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 6px; }
  .gf-news-row { display: flex; gap: 6px; }
  .gf-news-input {
    flex: 1; min-width: 0; height: 42px; padding: 0 12px;
    border-radius: 10px; border: 1.5px solid rgba(20, 16, 10, .30);
    background: #fff; color: #14100A; font-size: .88rem;
  }
  .gf-news-input::placeholder { color: #6B5A3A; opacity: 1; }
  .gf-news-input:focus {
    outline: none; border-color: #14100A;
    box-shadow: 0 0 0 3px rgba(20, 16, 10, .22);
  }
  .gf-news-btn {
    width: 42px; height: 42px; flex-shrink: 0;
    border: 1.5px solid #14100A; border-radius: 10px;
    background: #14100A; color: #FFB020;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .15s ease;
  }
  .gf-news-btn:hover { background: #000; color: #FFD27A; }
  .gf-news-note { display: block; font-size: .72rem; color: var(--gf-ink-soft); margin-top: 6px; }

  /* social */
  .gf-social { display: flex; gap: 8px; margin-top: 14px; }
  .gf-social a {
    width: 38px; height: 38px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(20, 16, 10, .10);
    border: 1px solid rgba(20, 16, 10, .20);
    color: var(--gf-ink); font-size: 1rem;
    transition: all .15s ease;
  }
  .gf-social a:hover { background: #14100A; color: #FFB020; border-color: #14100A; text-decoration: none; }

  /* headings + link columns */
  .gf-h {
    font-size: .82rem; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; color: var(--gf-ink);
    margin: 0 0 12px;
  }
  .gf-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
  .gf-links a { font-size: .87rem; color: var(--gf-ink); text-decoration: none; }
  .gf-links a:hover { color: #000; text-decoration: underline; }
  .gf-contact li { display: flex; gap: 9px; align-items: flex-start; font-size: .85rem; }
  .gf-contact i { margin-top: 2px; flex-shrink: 0; }
  .gf-contact span { min-width: 0; overflow-wrap: anywhere; }

  /* payment chips */
  .gf-pays { margin-top: 16px; }
  .gf-pays small { display: block; font-size: .72rem; font-weight: 700; color: var(--gf-ink-soft); margin-bottom: 6px; }
  .gf-pays-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .gf-pay {
    font-size: .72rem; font-weight: 700; padding: 4px 9px; border-radius: 8px;
    background: rgba(20, 16, 10, .10);
    border: 1px solid rgba(20, 16, 10, .22);
    color: var(--gf-ink);
  }

  /* --- bottom bar --- */
  .gf-bottom { background: var(--gf-bg-deep); border-top: 1px solid rgba(20, 16, 10, .22); }
  .gf-bottom-row {
    display: flex; flex-wrap: wrap; gap: 10px;
    align-items: center; justify-content: space-between;
    padding: 14px 0;
  }
  .gf-copy { margin: 0; font-size: .82rem; color: var(--gf-ink); }
  .gf-legal { display: flex; gap: 16px; }
  .gf-legal a { font-size: .82rem; color: var(--gf-ink); text-decoration: none; }
  .gf-legal a:hover { color: #000; text-decoration: underline; }

  /* --- responsive --- */
  @media (max-width: 991.98px) {
    .gf-trust-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 575.98px) {
    .gf-trust-grid { grid-template-columns: 1fr; gap: 12px; }
    .gf-main { padding: 26px 0 22px; }
    .gf-bottom-row { justify-content: center; text-align: center; }
  }

/* ================================================================
     PAYMENT METHOD SWITCHER  (payment/switch-method.php)

     The page previously put .pm-radio - an 18px radio DOT - on the
     <label> that wraps the whole option. That collapsed every card to an
     18x18 circle with the method name, chips, instructions and account
     number crammed inside it.

     It now follows the same shape checkout.php uses: .sm-opt is the label,
     the radio is a direct child, and .sm-opt-card is the visible card with
     the .pm-radio dot nested inside it.

     Also fixes the "Current" chip: it used --brand-dark (#4a6f8a) on
     --brand-light (#e8f0f5) = 3.11:1, which fails for text. --brand-text
     gives 4.52:1.
     ================================================================ */

  .sm-opt { display: block; cursor: pointer; }
  /* the native radio is visually replaced by .pm-radio, as on checkout */
  .sm-opt > input[type="radio"] {
    position: absolute; opacity: 0; width: 1px; height: 1px;
    margin: 0; pointer-events: none;
  }

  .sm-opt-card {
    display: block;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .sm-opt:hover .sm-opt-card { border-color: var(--brand-light); }

  /* selected */
  .sm-opt > input:checked + .sm-opt-card {
    border-color: var(--brand-text);
    background: var(--brand-soft);
    box-shadow: 0 4px 14px #rgba(185, 28, 28, .12);
  }
  .sm-opt > input:checked + .sm-opt-card .pm-radio { border-color: var(--brand-text); }
  .sm-opt > input:checked + .sm-opt-card .pm-radio::after {
    background: var(--brand); transform: scale(1);
  }

  /* keyboard focus still has to be visible on the card */
  .sm-opt > input:focus-visible + .sm-opt-card {
    outline: 2px solid var(--brand-text); outline-offset: 2px;
  }

  /* the method currently on the order - shown even though it is not selected */
  .sm-opt-card.is-current { border-style: dashed; }
  .sm-opt > input:checked + .sm-opt-card.is-current { border-style: solid; }

  .sm-opt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .sm-chip { padding: 1px 8px; font-size: .68rem; }

  /* "Current" chip legibility - was --brand-dark on --brand-light, 3.11:1 */
  .chip.active { color: var(--brand-text); }

/* Ensure site footer is visible on dashboard/panels */
.gf-app-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 10px;
  background: #000; color: #fff; font-size: .82rem; font-weight: 600;
  text-decoration: none; border: 1px solid rgba(255,255,255,.2);
}
.gf-app-btn:hover { background: #222; color: #fff; }
/* Modern centered auth layout */
.auth-lang-wrap {
  position: fixed; top: 16px; right: 16px; z-index: 10;
  display: flex; gap: 6px;
}
.auth-lang-wrap .gdh-lang-btn {
  padding: 4px 10px; border-radius: 999px; border: 1px solid #d1d5db;
  background: #fff; color: #000; font-size: .82rem; font-weight: 600;
}
.auth-lang-wrap .gdh-lang-btn.active { background: #746cc0; color: #000; border-color: #746cc0; }
.auth-center {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: radial-gradient(1200px 600px at 50% -10%, #e8e6f5, transparent),
             linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}
.auth-card-modern {
  width: 100%; max-width: 420px; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 16px; padding: 32px 28px; box-shadow: 0 20px 50px rgba(0,0,0,.08);
}
.auth-input {
  border-radius: 12px; border-color: #d1d5db; padding: 10px 12px;
}
.auth-input:focus { border-color: #746cc0; box-shadow: 0 0 0 3px rgba(116,108,192,.15); }
.gf { display: block !important; visibility: visible !important; opacity: 1 !important; }

/* Desktop: ensure footer/content are not overlapped by mobile-only bars */
@media (min-width: 992px) {
  body { padding-bottom: 0 !important; }
  .gdh-bottomnav, .sticky-mobile-bar { display: none !important; }
  .gf { margin-bottom: 0; }
}

/* =========================================================
   Modern UI refresh (global) - admin + user panels
   ========================================================= */
.panel, .d-panel, .card { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow) !important; border: 1px solid var(--line) !important; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.panel:hover, .d-panel:hover { box-shadow: var(--shadow-lg) !important; }
.admin-topbar, .topbar { backdrop-filter: blur(10px); background: rgba(255,255,255,.85) !important; border-bottom: 1px solid var(--line); }
.admin-side, .user-side { box-shadow: 4px 0 24px rgba(0,0,0,.18); }
.admin-side .side-menu a, .user-side .side-menu a { border-radius: var(--radius-sm); margin: 2px 0; }
.admin-side .side-menu a.active { background: linear-gradient(90deg, rgba(93, 138, 168,.18), transparent); border-left: 3px solid var(--brand); }
.table-modern, .table { border-collapse: separate; border-spacing: 0; }
.table-modern thead th, .table thead th { background: var(--bg-tertiary); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: .78rem; }
.table-modern tbody tr:hover, .table tbody tr:hover { background: var(--bg-tertiary); }
.form-control, .form-select { border-radius: var(--radius-sm); border: 1px solid var(--line); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.btn { border-radius: var(--radius-sm); font-weight: 600; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn-brand, .btn-primary { box-shadow: 0 4px 12px rgba(93, 138, 168,.25); }
.empty-state { padding: 3rem 1rem; text-align: center; }
.empty-state i { font-size: 3rem; color: var(--muted); opacity: .6; }
.badge { border-radius: var(--radius-pill); font-weight: 600; }
.alert { border-radius: var(--radius-sm); border: none; box-shadow: var(--shadow-sm); }
.modal-content { border-radius: var(--radius-lg); border: none; box-shadow: var(--shadow-lg); }
@media (max-width: 991.98px) { .admin-main, .user-main { padding-bottom: 1rem; } }

/* =========================================================
   Admin payments & orders - list and detail views
   ========================================================= */
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 1rem; }
.adm-stat { background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: var(--radius); padding: .9rem 1rem; display: flex; align-items: center; gap: .8rem; }
.adm-stat-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; flex-shrink: 0; background: color-mix(in srgb, var(--tint, #4a6f8a) 12%, transparent); color: var(--tint, #4a6f8a); }
.adm-stat-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 700; }
.adm-stat-value { font-size: 1.1rem; font-weight: 800; color: var(--ink); line-height: 1.25; font-variant-numeric: tabular-nums; }
.adm-stat-sub { font-size: .72rem; color: var(--muted); }

.adm-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.adm-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.adm-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .85rem; border-radius: 999px; border: 1px solid var(--adm-border); background: var(--adm-surface); color: var(--text-secondary, var(--muted)); font-size: .82rem; font-weight: 600; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.adm-tab:hover { border-color: var(--brand-text); color: var(--brand-text); }
.adm-tab.active { background: var(--brand-light); color: var(--brand-dark); border-color: var(--brand-text); }
.adm-tab-count { background: var(--adm-surface-2); border-radius: 999px; padding: 0 .45rem; font-size: .7rem; font-weight: 700; line-height: 1.5; }
.adm-tab.active .adm-tab-count { background: #fff; }

.adm-cust { display: flex; align-items: center; gap: .6rem; min-width: 150px; }
.adm-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; background: var(--brand-light); color: var(--brand-dark); text-transform: uppercase; }
.adm-cust-name { font-weight: 600; color: var(--ink); line-height: 1.2; }
.adm-cust-sub { font-size: .74rem; color: var(--muted); }

.adm-order-no { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; font-weight: 700; color: var(--brand-text); text-decoration: none; white-space: nowrap; }
.adm-order-no:hover { text-decoration: underline; }
.adm-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; color: var(--ink); word-break: break-all; }
.adm-muted-dash { color: var(--adm-border-strong); }
.adm-method { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--adm-surface-2); border: 1px solid var(--adm-border); font-size: .74rem; font-weight: 600; color: var(--ink); white-space: nowrap; }

.adm-paybar { height: 6px; border-radius: 999px; background: var(--adm-border); overflow: hidden; margin-top: 6px; min-width: 110px; }
.adm-paybar > span { display: block; height: 100%; border-radius: inherit; background: #16a34a; }
.adm-paybar.is-partial > span { background: #f59e0b; }
.adm-paybar.is-unpaid > span { background: transparent; }

.adm-proof { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; border: 1px solid var(--adm-border); display: block; transition: transform .15s ease; }
.adm-proof:hover { transform: scale(1.06); }
.adm-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.adm-act { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; border-radius: 10px; }
.adm-note { font-size: .72rem; color: var(--muted); margin-top: 4px; max-width: 220px; margin-left: auto; text-align: right; }

.adm-section-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.adm-record { background: var(--adm-surface-2); border-top: 1px solid var(--adm-border); padding: 1rem; border-radius: 0 0 var(--radius) var(--radius); }
.adm-due-chip { font-size: .72rem; font-weight: 700; }

.adm-prod { display: flex; align-items: center; gap: .7rem; min-width: 230px; }
.adm-prod-img { width: 48px; height: 48px; object-fit: cover; border-radius: 12px; border: 1px solid var(--adm-border); background: var(--adm-surface-2); flex-shrink: 0; }
.adm-prod-name { font-weight: 600; color: var(--ink); line-height: 1.25; font-size: .88rem; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-prod-sub { font-size: .74rem; color: var(--muted); }
.adm-price-final { font-weight: 700; color: var(--ink); font-size: .88rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-price-cost { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.adm-stock-low { color: #5d8aa8; font-weight: 700; }
.adm-pills { display: flex; flex-wrap: wrap; gap: .3rem; }
.adm-pill { display: inline-flex; align-items: center; gap: .3rem; padding: 2px .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.adm-pill-public { background: #dcfce7; color: #166534; }
.adm-pill-private { background: #e2e8f0; color: #334155; }
.adm-pill-featured { background: #fef3c7; color: #92400e; }
.adm-pill-hidden { background: #f1f5f9; color: #64748b; }
.adm-acts .adm-act { display: inline-grid; place-items: center; }

.adm-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: 14px; padding: .45rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.adm-search { display: flex; align-items: center; gap: .5rem; height: 38px; min-width: 240px; flex: 1 1 240px; padding: 0 .8rem; margin: 0; border-radius: 10px; background: var(--adm-surface-2); border: 1px solid transparent; color: var(--muted); cursor: text; transition: border-color .15s ease, background .15s ease; }
.adm-search:focus-within { background: var(--adm-surface); border-color: var(--brand); box-shadow: 0 0 0 3px #rgba(93, 138, 168, .15); }
.adm-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: .86rem; color: var(--ink); }
.adm-search input::placeholder { color: var(--muted); }
.adm-filter { height: 38px; min-width: 150px; padding: 0 2rem 0 .8rem; border-radius: 10px; border: 1px solid transparent; background-color: var(--adm-surface-2); color: var(--ink); font-size: .86rem; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.adm-filter:hover { border-color: var(--adm-border-strong); }
.adm-filter:focus { outline: 0; background-color: var(--adm-surface); border-color: var(--brand); box-shadow: 0 0 0 3px #rgba(93, 138, 168, .15); }
.adm-filters .btn-admin { height: 38px; }
@media (max-width: 767.98px) {
  .adm-filters { padding: .6rem; }
  .adm-search, .adm-filter { flex: 1 1 100%; min-width: 0; }
}

/* =========================================================
   Admin responsive pass (desktop + mobile)
   ========================================================= */
.admin-main { min-height: 100vh; min-height: 100dvh; min-width: 0; }
.admin-topbar h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-topbar .icon-btn { flex-shrink: 0; }

.adm-toolbar > * { min-width: 0; }
.adm-toolbar > form { flex: 1 1 auto; }

@media (max-width: 991.98px) {
  .admin-topbar { height: 58px; padding: 0 .9rem; gap: .6rem; }
  .admin-topbar .ms-auto { flex-shrink: 0; }
  .admin-side { width: min(284px, 86vw); }
  .admin-side .brand { padding: 1rem 1.1rem; }
}

@media (max-width: 767.98px) {
  .admin-main > .p-3 { padding: .85rem !important; }
  .adm-toolbar { flex-direction: column; align-items: stretch; }
  .adm-toolbar > .d-flex { width: 100%; justify-content: space-between; }
  .adm-toolbar > form { width: 100%; }
  .adm-toolbar .btn { flex: 1 1 auto; }
  .adm-stat { padding: .75rem .8rem; gap: .6rem; }
  .adm-stat-ic { width: 36px; height: 36px; font-size: 1rem; }
  .adm-stat-value { font-size: 1rem; }
  .adm-prod { min-width: 200px; }
  .adm-prod-name { max-width: 170px; }

  /* Keep the row actions reachable while the table scrolls sideways. */
  .table-responsive .table-modern th:last-child,
  .table-responsive .table-modern td:last-child {
    position: sticky;
    right: 0;
    background: var(--adm-surface);
    box-shadow: -8px 0 12px -10px rgba(15, 23, 42, .25);
    z-index: 1;
  }
  .table-responsive .table-modern thead th:last-child { background: var(--adm-surface-2); }
}

/* =========================================================
   Admin management pages (categories, customers, messages,
   payment methods, marketplaces, banners, reels, gateways)
   ========================================================= */
.adm-form { padding: 1.4rem; }
.adm-form-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1.1rem; }
.adm-form-title { display: flex; align-items: center; gap: .6rem; margin: 0; font-weight: 800; font-size: .98rem; color: var(--ink); }
.adm-form-title i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-light); color: var(--brand-dark); font-size: 1rem; flex-shrink: 0; }
.adm-form .form-label { font-size: .8rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.adm-form .form-control, .adm-form .form-select { border-radius: 10px; border-color: var(--adm-border); font-size: .88rem; padding: .55rem .8rem; }
.adm-form .form-control:focus, .adm-form .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px #rgba(93, 138, 168, .15); }
.adm-form .form-text { font-size: .73rem; }
.adm-form .btn-admin { width: 100%; justify-content: center; }
.adm-switch { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .8rem; border-radius: 12px; background: var(--adm-surface-2); border: 1px solid var(--adm-border); }
.adm-switch .form-check { margin: 0; padding-left: 2.5rem; }
.adm-switch .form-check-label { font-size: .84rem; font-weight: 600; color: var(--ink); }

.adm-list-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: 1rem 1.25rem; border-bottom: 1px solid var(--adm-border); }
.adm-list-title { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 800; font-size: .95rem; color: var(--ink); }
.adm-count { display: inline-block; background: var(--adm-surface-2); border: 1px solid var(--adm-border); border-radius: 999px; padding: 0 .55rem; font-size: .72rem; font-weight: 700; color: var(--muted); line-height: 1.6; }
.adm-hint { font-size: .75rem; color: var(--muted); }

.adm-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; border: 1px solid var(--adm-border); background: var(--adm-surface-2); display: block; }
.adm-thumb-wide { width: 128px; height: 56px; }
.adm-thumb-tall { width: 64px; height: 86px; }
.adm-thumb-ph { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-light); color: var(--brand-dark); font-size: 1.3rem; }
.adm-thumb-ph.adm-thumb-wide { width: 128px; height: 56px; background: linear-gradient(120deg, var(--brand-dark), var(--brand)); color: #fff; }
.adm-thumb-ph.adm-thumb-tall { width: 64px; height: 86px; background: linear-gradient(140deg, #10203f, #1c355c); color: #fff; }
.adm-title { font-weight: 600; color: var(--ink); font-size: .88rem; line-height: 1.3; }
.adm-sub { font-size: .74rem; color: var(--muted); }
.adm-ellipsis { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-num { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.adm-order-pos { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 .4rem; border-radius: 8px; background: var(--adm-surface-2); border: 1px solid var(--adm-border); font-size: .76rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

.adm-pill-ok { background: #dcfce7; color: #166534; }
.adm-pill-off { background: #f1f5f9; color: #64748b; }
.adm-pill-blocked { background: #e8f0f5; color: #4a6f8a; }
.adm-pill-info { background: #e0f2fe; color: #075985; }
.adm-pill-warn { background: #fef3c7; color: #92400e; }

.adm-list-empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.adm-list-empty i { font-size: 2.2rem; color: var(--adm-border-strong); display: block; margin-bottom: .5rem; }
.adm-list-empty p { margin: 0; font-size: .88rem; }

.adm-msg .accordion-item { border: 1px solid var(--adm-border) !important; border-radius: 16px !important; background: var(--adm-surface); margin-bottom: .6rem; overflow: hidden; }
.adm-msg .accordion-button { background: var(--adm-surface); box-shadow: none; padding: 1rem 1.2rem; }
.adm-msg .accordion-button:not(.collapsed) { background: var(--adm-surface-2); color: var(--ink); box-shadow: none; }
.adm-msg .accordion-button:focus { box-shadow: 0 0 0 3px #rgba(93, 138, 168, .15); }
.adm-msg .accordion-body { border-top: 1px solid var(--adm-border); padding: 1.1rem 1.2rem; }
.adm-msg-bubble { padding: .9rem 1rem; border-radius: 14px; font-size: .88rem; background: var(--adm-surface-2); border: 1px solid var(--adm-border); }
.adm-msg-reply { padding: .9rem 1rem; border-radius: 14px; font-size: .88rem; background: var(--brand-light); border: 1px solid #fed7aa; margin-bottom: .6rem; }
.adm-msg-meta { font-size: .74rem; color: var(--muted); }

@media (max-width: 767.98px) {
  .adm-form { padding: 1.1rem; }
  .adm-thumb-wide { width: 96px; height: 48px; }
  .adm-thumb-ph.adm-thumb-wide { width: 96px; height: 48px; }
}

/* =========================================================
   Settings & Pricing page
   ========================================================= */
.set-intro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: 18px; padding: 1rem 1.3rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm); }
.set-intro-t { font-weight: 800; font-size: 1rem; color: var(--ink); }
.set-intro-s { font-size: .8rem; color: var(--muted); margin-top: .15rem; }

.set-status { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .85rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--adm-surface-2); border: 1px solid var(--adm-border); color: var(--muted); white-space: nowrap; }
.set-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.set-status[data-state="saving"] { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.set-status[data-state="saving"]::before { background: #f59e0b; animation: setPulse 1s ease-in-out infinite; }
.set-status[data-state="saved"] { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.set-status[data-state="saved"]::before { background: #16a34a; }
.set-status[data-state="error"] { background: #fef2f2; border-color: #fecaca; color: #4a6f8a; }
.set-status[data-state="error"]::before { background: #5d8aa8; }
@keyframes setPulse { 50% { opacity: .3; } }

.set-nav { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 2px; background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: 18px; padding: .5rem; max-height: calc(100vh - 110px); overflow-y: auto; box-shadow: var(--shadow-sm); }
.set-nav-item { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .86rem; transition: background .15s ease, color .15s ease; }
.set-nav-item:hover { background: var(--adm-surface-2); }
.set-nav-item.active { background: var(--brand-light); color: var(--brand-dark); }
.set-nav-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--adm-surface-2); color: var(--muted); flex-shrink: 0; transition: background .15s ease, color .15s ease; }
.set-nav-item.active .set-nav-ic { background: var(--brand); color: #fff; }
.set-nav-t { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-nav-n { font-size: .7rem; font-weight: 700; color: var(--muted); background: var(--adm-surface-2); border-radius: 999px; padding: 0 .45rem; line-height: 1.6; }
.set-nav-item.active .set-nav-n { background: #fff; }

.set-main { min-width: 0; }
.set-card { background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: 18px; box-shadow: var(--shadow-sm); margin-bottom: 1rem; overflow: hidden; }
.set-card-head { display: flex; align-items: center; gap: .9rem; padding: 1.05rem 1.3rem; border-bottom: 1px solid var(--adm-border); flex-wrap: wrap; }
.set-card-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-light); color: var(--brand-dark); font-size: 1.15rem; flex-shrink: 0; }
.set-card-t { min-width: 0; flex: 1 1 200px; }
.set-card-t h2 { font-size: 1rem; font-weight: 800; margin: 0; color: var(--ink); }
.set-card-t p { margin: .1rem 0 0; font-size: .8rem; color: var(--muted); }
.set-card-body { padding: 1.2rem 1.3rem; }
.set-card-body.flush { padding: 0; }
.set-card-foot { border-top: 1px solid var(--adm-border); font-size: .8rem; color: var(--muted); }
.set-h3 { font-size: .9rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem; }
.set-p { font-size: .85rem; color: var(--muted); line-height: 1.65; margin: 0 0 1rem; }
.set-code { background: var(--adm-surface-2); border: 1px solid var(--adm-border); border-radius: 12px; padding: 1rem; font-size: .78rem; line-height: 1.7; overflow-x: auto; margin: 0; color: var(--ink); }
.set-code-inline { font-size: .78rem; background: var(--adm-surface-2); border: 1px solid var(--adm-border); padding: 2px 8px; border-radius: 6px; word-break: break-all; }
.set-note { font-size: .8rem; color: var(--muted); }
.set-note a { color: var(--brand-dark); font-weight: 600; }

.set-card .form-label.set-label { font-size: .8rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.set-card .form-control, .set-card .form-select { border-radius: 10px; border-color: var(--adm-border); font-size: .88rem; padding: .55rem .8rem; }
.set-card .form-control:focus, .set-card .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px #rgba(93, 138, 168, .15); }
.set-card .input-group .btn { border-radius: 10px; }
.set-card .input-group .form-control { border-radius: 0; }
.set-card .input-group > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.set-card .input-group > .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.set-card .form-text { font-size: .73rem; }
.set-field-foot { display: flex; justify-content: flex-end; min-height: 1.1rem; margin-top: .2rem; }

.set-state { font-size: .72rem; font-weight: 700; opacity: 0; transition: opacity .2s ease; white-space: nowrap; }
.set-state:empty { display: none; }
.set-state.is-saving { color: #b45309; opacity: 1; }
.set-state.is-saved { color: #16a34a; opacity: 1; }
.set-state.is-saved::before { content: '✓ '; }
.set-state.is-error { color: #5d8aa8; opacity: 1; }
.set-state.is-error::before { content: '! '; }

.set-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border: 1px solid var(--adm-border); border-radius: 14px; background: var(--adm-surface-2); transition: border-color .15s ease, background .15s ease; }
.set-toggle:has(.set-switch:checked) { border-color: #a8c5d9; background: var(--brand-light); }
.set-toggle-t { font-weight: 600; font-size: .88rem; color: var(--ink); }
.set-toggle-s { font-size: .75rem; color: var(--muted); }
.set-toggle-ctl { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.set-onoff { font-size: .7rem; font-weight: 800; letter-spacing: .4px; color: var(--muted); min-width: 28px; text-align: right; }
.set-toggle:has(.set-switch:checked) .set-onoff { color: var(--brand-dark); }
.set-switch { width: 2.6em; height: 1.4em; margin: 0; cursor: pointer; }
.set-switch:checked { background-color: var(--brand-text); border-color: var(--brand-text); }

.set-logo-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.set-logo-img { height: 44px; width: auto; border-radius: 10px; border: 1px solid var(--adm-border); padding: 4px; background: #fff; }

.set-savebar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: 16px; padding: .8rem 1rem; box-shadow: 0 8px 24px rgba(15, 23, 42, .08); margin-bottom: 1rem; }

@media (max-width: 991.98px) {
  .set-nav { position: static; flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; flex-wrap: nowrap; padding: .4rem; }
  .set-nav-item { flex-shrink: 0; }
  .set-nav-t { flex: none; }
}
@media (max-width: 767.98px) {
  .set-intro { padding: .85rem 1rem; }
  .set-card-head, .set-card-body { padding: 1rem; }
  .set-savebar { bottom: 8px; }
  .set-savebar .adm-hint { width: 100%; margin-left: 0 !important; }
  .set-toggle { padding: .7rem .8rem; }
}

@media (max-width: 767.98px) {
  .adm-stats { grid-template-columns: 1fr 1fr; }
  .adm-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .adm-tab { flex-shrink: 0; }
}

@media (max-width: 991.98px) {
  .gdh-drawer-account,
  .gdh-drawer-support { border-top: 0; }
  .gdh-drawer-account { background: #f8fafc; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .85rem; }
  .gdh-drawer-avatar { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-light); color: var(--brand-dark); flex-shrink: 0; }
  .gdh-drawer-support { border-top: 1px solid var(--line); }
  .gdh-drawer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .gdh-drawer-grid a { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .6rem .3rem; border: 1px solid var(--line); border-radius: var(--radius-sm); color: inherit; text-decoration: none; font-size: .78rem; }
  .gdh-drawer-grid a i { font-size: 1.15rem; color: var(--brand-dark); }
  .min-w-0 { min-width: 0; }
}

/* ================================================================
   RESPONSIVE + TOUCH PASS 2026-10-29
   ----------------------------------------------------------------
   Findings this section closes, all verified against the markup:

   1. body { padding-bottom: 64px } (line 615) reserves a fixed 64px for
      the mobile bottom nav, but .gdh-bottomnav grows by the device
      safe-area inset (padding-bottom: calc(5px + env(...))). On a
      notched phone the bar is ~96px tall while the page only reserves
      64px, so the last row of every user-panel page (pagination, the
      wallet submit, an action table's final row) sits UNDER the bar.
   2. The open sidebar is z-index 1040 and .gdh-bottomnav is also 1040,
      but the nav is emitted AFTER the aside in user/includes/footer.php.
      Same stack level + later in DOM = the nav paints over the drawer's
      tail, hiding the last menu entries and the "24/7 Support" row.
   3. app.js only wires outside-click-to-close when #adminOverlay exists.
      The admin header renders it; the user header did not, so the user
      drawer could only be dismissed by tapping a link.
   4. .adm-act is a 32x32 icon tile and .ord-act 36x36 - both are the
      PRIMARY row actions (edit / delete / sync / track / invoice) and
      both are under the ~38px touch floor. They also live inside the
      sticky right column, where a mis-tap is unrecoverable.
   ================================================================ */

/* 1 + 2. Chrome clearance while the user panel drawer is open. The scrim
   (1042) sits above the bottom nav (1040) so the bar is modalised, and the
   drawer (1045) above the scrim. 1045 is still under Bootstrap's modal
   backdrop (1050), so a modal opened from a page underneath keeps winning.
   Both live in the base layer, not the media block, because the overlay
   element itself must never show on desktop. */
.admin-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  z-index: 1042;
  display: none;
}

/* 3. The nav reserves its own height, so the drawer has to clear it or the
   bottom of the menu stays unreachable. --gdh-bottomnav-h is measured by
   app.js and already INCLUDES the safe-area inset (it is the nav's own
   bounding box), so the fallback adds env() but the measured value must
   not - hence the var() form with no second env() term at the outer level. */
@media (max-width: 991.98px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  .admin-side.open { z-index: 1045; }

  /* Only .user-side has a bottom nav under it; the admin panel does not. */
  .admin-side.user-side {
    padding-bottom: var(--gdh-bottomnav-h, calc(62px + env(safe-area-inset-bottom, 0px)));
  }

  /* While the drawer is open the nav is behind a scrim and unreachable;
     dim it so it reads as disabled rather than as a glitch. */
  body:has(.admin-side.open) .gdh-bottomnav { opacity: .35; }
}

/* 4. Touch target floor for row actions in both panels.
   .ord-act is deliberately NOT here - it is declared in user/orders.php's own
   <style> block, which loads after this stylesheet, so an equal-specificity
   media rule could never override it. It was fixed at the source instead. */
@media (max-width: 767.98px) {
  .adm-act { width: 38px; height: 38px; border-radius: 11px; }
  /* The sticky actions column is position:sticky inside a scroller; giving
     it a max width keeps seven 38px tiles from eating half a 360px screen. */
  .table-responsive .table-modern td:last-child { max-width: 44vw; }
}

/* Quantity +/- and the checkout "remove item" x. These are the two primary
   row actions in cart and checkout and both are below the touch floor:
   .qty-btn is 30px wide (line 3414) and .co-item-x is 26x26 (line 3350).
   Grown on coarse pointers and narrow screens; a desktop mouse keeps the
   compact original size. */
@media (pointer: coarse), (max-width: 767.98px) {
  .qty-btn { width: 38px; font-size: 1.1rem; }
  .co-item-x { width: 38px; height: 38px; font-size: .82rem; }
  /* The cart panel's "Clear" link is a btn-link with p-0, which lands at
     about 20px of actual target for a destructive action. */
  .cart-summary-clear { padding: .5rem .25rem !important; }
}

/* ================================================================
   Bulk-price bar (admin/products.php)
   ----------------------------------------------------------------
   Was a .row of col-md-* fields, which meant the whole bar was one
   stacked 100%-width column below 768px (six taps to scroll past) and a
   ~55px col-md-1 "Weight kg" input between 768-991px, where the sidebar
   is off-canvas and the row is genuinely squeezed. An auto-fit grid takes
   whatever the container gives it: two-up on a phone, more columns as the
   panel widens, and no breakpoint can be wrong.
   ================================================================ */
.bulk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .5rem;
  align-items: end;
}
.bulk-grid .bg-span2 { grid-column: span 2; }
/* A cell that always takes the whole row. Used with grid-column 1/-1 rather
   than span N, because asking an item to span more tracks than auto-fit
   resolved forces the grid to create extra tracks and blows the container
   width out. datetime-local needs this: its date AND time segments put its
   intrinsic min width above what a half-cell can ever give it. */
.bulk-grid .bg-full { grid-column: 1 / -1; }
@media (max-width: 400px) {
  .bulk-grid { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
  .bulk-grid .bg-span2 { grid-column: 1 / -1; }
}

/* ================================================================
   Settings steppers (admin/settings.php)
   ----------------------------------------------------------------
   .btn-admin carries padding: .6rem 1.2rem (line 1104) and an
   input-group button does not shrink, so a +/- stepper inside col-6
   (~138px of content at 360px) left the number field ~25px - the four
   per-kg pricing rates were effectively un-editable on a phone. Compact
   the buttons and let the stepper fields go full width below sm.
   ================================================================ */
@media (max-width: 575.98px) {
  .set-card [data-stepper] > .btn-admin { padding: .5rem .7rem; }
  .set-card [data-stepper] .form-control { min-width: 0; }
}

/* datetime-local has a large intrinsic min width (the field shows a date
   AND a time segment). Two of them in col-6 side by side at 360px clipped
   the clock off the coupon validity fields. */
@media (max-width: 575.98px) {
  .form-control[type="datetime-local"] { min-width: 0; font-size: .95rem; }
}

/* Unbreakable strings. Every admin/user table cell that can hold a scraped
   product name, an email, a marketplace URL or a courier transaction ID
   needs this, because .adm-ellipsis only saves the ones that were written
   with it. Applied as a targeted utility rather than a global so column
   layout elsewhere is untouched. */
.gdh-break { overflow-wrap: anywhere; word-break: break-word; }

/* Bootstrap 5.3 ships max-width utilities but no min-width:0 one, and a flex
   item will not shrink below its min-content without it - which is why long
   unbreakable strings push their row sideways. app.css only had this inside
   the drawer's media block (line 4071), so it vanished above 992px. */
.min-w-0 { min-width: 0; }

/* The add-to-cart toast is pinned at a fixed 84px, which assumed a 64px
   nav. On a notched phone the nav measures ~96px, so the toast landed on
   top of it. Offset from the height app.js actually measured instead. */
@media (max-width: 991.98px) {
  .gdh-toast-wrap {
    bottom: calc(var(--gdh-bottomnav-h, calc(62px + env(safe-area-inset-bottom, 0px))) + 14px);
  }
}

/* PDP guard toast (product.php showPdToast). It used to be created with an
   inline bottom:24px at z-index 2000, which on a phone painted it over the
   bottom nav AND over the PDP order bar that sits on that nav. The wrapper
   now takes its geometry from these two rules: clear of the nav, and clear
   of the order bar as well when app.js has marked one present
   (.gdh-has-sticky-bar). Above lg neither bar exists, so it drops back to
   the original 24px. */
.gdh-pdp-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--gdh-bottomnav-h, calc(62px + env(safe-area-inset-bottom, 0px))) + 14px);
  transform: translateX(-50%);
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  max-width: calc(100vw - 24px);
}
body.gdh-has-sticky-bar .gdh-pdp-toast {
  bottom: calc(var(--gdh-bottomnav-h, calc(62px + env(safe-area-inset-bottom, 0px))) + 92px);
}
@media (min-width: 992px) {
  .gdh-pdp-toast, body.gdh-has-sticky-bar .gdh-pdp-toast { bottom: 24px; }
}

/* A badge is display:inline-block and will not break mid-token, so a long
   courier tracking code sat on its row and pushed it sideways. */
.badge.gdh-break { max-width: 100%; white-space: normal; }