/* ===== DrugsGeneral Theme — Main Stylesheet v59.0 MOBILE-FIRST ===== */

/* Fonts loaded via WordPress wp_enqueue_style in functions.php */

/* ─── DESIGN TOKENS — Dynamic palette (overridden by Customizer via dg-color-system.php) ─── */
:root {
  /* ── PRIMARY BRAND COLORS (overridden dynamically by Customizer) ── */
  --navy:        #008296;  /* Primary — set by Customizer dg_color_navy */
  --navy-deep:   #005F6B;  /* Primary Dark — set by Customizer dg_color_navy_deep */
  --navy-mid:    #00A0B4;  /* Primary Mid — set by Customizer dg_color_navy_mid */

  /* ── CTA / ACCENT ── */
  --teal:        #FFB800;  /* CTA Color — set by Customizer dg_color_teal */
  --teal-light:  #FFF8E0;  /* CTA tint — computed by dg-color-system.php */

  /* ── SEMANTIC COLORS ── */
  --green:       #067D62;  /* Success — set by Customizer dg_color_green */
  --amber:       #E77600;  /* Warning/badge — set by Customizer dg_color_amber */
  --red:         #CC0C39;  /* Error/remove — set by Customizer dg_color_red */

  /* ── NEUTRAL PALETTE (overridden by dg_color_ink etc.) ── */
  --ink:         #0F1111;  /* Primary text */
  --slate:       #565959;  /* Secondary text */
  --muted:       #8F9191;  /* Muted text */
  --bg:          #F7F8F8;  /* Page background */
  --bg2:         #EAEDED;  /* Secondary background */
  --white:       #FFFFFF;
  --border:      #D5D9D9;
  --border-mid:  #ADBAC5;

  /* ── SEMANTIC SURFACE ALIASES (computed by dg-color-system.php) ── */
  --surface-card:    #FFFFFF;
  --surface-page:    #F7F8F8;
  --surface-subtle:  #F0F1F1;
  --surface-muted:   #E8EAED;

  /* ── EXTENDED PALETTE SHADES (generated from base by dg-color-system.php) ── */
  --primary-50:  #EDF7F9;
  --primary-100: #C8EBF0;
  --primary-200: #93D5DF;
  --primary-300: #5BBDC9;
  --primary-400: #2DA5B3;
  --primary-500: #008296;  /* = --navy */
  --primary-600: #006D7E;
  --primary-700: #005F6B;  /* = --navy-deep */
  --primary-800: #004D57;
  --primary-900: #003038;

  --accent-50:   #FFF9E6;
  --accent-100:  #FFEDB3;
  --accent-200:  #FFD966;
  --accent-300:  #FFC51A;
  --accent-400:  #FFB800;
  --accent-500:  #FFB800;  /* = --teal */
  --accent-600:  #D49A00;
  --accent-700:  #A37600;

  --success-50:  #E8F5EE;
  --success-100: #BFDFCE;
  --success-200: #7FC09F;
  --success-500: #067D62;  /* = --green */
  --success-700: #045242;

  --warning-50:  #FEF0E6;
  --warning-100: #FAC99B;
  --warning-500: #E77600;  /* = --amber */
  --warning-700: #B85D00;

  --error-50:    #FDEAE9;
  --error-100:   #F5AFAC;
  --error-500:   #CC0C39;  /* = --red */
  --error-700:   #9A0929;

  /* ── SEMANTIC DERIVED ── */
  --text-on-primary: #FFFFFF;
  --text-on-cta:     #0F1111;
  --trust-bg:        var(--primary-50);
  --trust-border:    var(--primary-200);
  --trust-text:      var(--primary-700);
  --coupon-bg:       var(--success-50);
  --coupon-border:   var(--success-200);
  --coupon-text:     var(--success-700);
  --badge-bg:        var(--amber);
  --badge-text:      #fff;
  --wa-green:        #25D366;

  /* ── GRADIENTS (computed from primary by dg-color-system.php) ── */
  --header-grad:   linear-gradient(135deg, var(--primary-900) 0%, var(--primary-700) 60%, var(--primary-500) 100%);
  --hero-grad:     linear-gradient(155deg, var(--primary-800) 0%, var(--primary-600) 60%, var(--primary-400) 100%);
  --savings-grad:  linear-gradient(90deg, var(--primary-700), var(--primary-600));
  --checkout-grad: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-700) 40%, var(--primary-500) 100%);

  /* ── ELEVATION ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.09);
  --shadow-md:   0 4px 16px rgba(0,0,0,.12);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.14);

  /* ── SHAPE ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;

  /* ── TYPOGRAPHY ── */
  --font-head:   'Outfit', sans-serif;
  --font-body:   'Inter', sans-serif;

  /* ── LAYOUT ── */
  --max-w:       1280px;
  --sidebar-w:   220px;

  /* ── MOBILE TOKENS ── */
  --mobile-bottom-nav-h: 62px;
  --header-h-mobile:     56px;
  --header-h-desktop:    64px;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* prevent horizontal scroll on mobile */
  /* Reserve space so sticky bottom nav doesn't cover content */
  padding-bottom: var(--mobile-bottom-nav-h);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 700; line-height: 1.25; color: var(--ink); }
h1 { font-size: clamp(20px, 5vw, 32px); }
h2 { font-size: clamp(17px, 4vw, 26px); }
h3 { font-size: clamp(15px, 3.5vw, 20px); }
h4 { font-size: 15px; }
h5 { font-size: 13px; }
h6 { font-size: 12px; }
a { color: var(--navy); text-decoration: none; transition: color .15s; }
a:hover { color: var(--navy-mid); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--font-body); font-size: 16px; /* 16px prevents iOS zoom */ }
p { margin-bottom: .75em; }
p:last-child { margin-bottom: 0; }

/* ─── LAYOUT ─── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 16px; }
.container-md { max-width: 960px; margin: 0 auto; padding: 0 16px; }

/* ============================================================
   RIBBON — moving ticker bar, mobile first
   ============================================================ */

/* Keyframe: slide items right-to-left */
@keyframes dg-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.dg-ribbon {
  background: linear-gradient(90deg, #b45309 0%, #d97706 40%, #f59e0b 60%, #d97706 80%, #b45309 100%);
  color: #fff;
  font-size: 11px;
  padding: 0;
  overflow: hidden;
  position: relative;
  height: 34px;
  display: flex;
  align-items: center;
  width: 100%;
  box-shadow: 0 2px 6px rgba(180,83,9,.35);
}

/* Track: must be wider than viewport, no wrapping */
.dg-ribbon-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  flex-shrink: 0;
  animation: dg-ticker 30s linear infinite;
  will-change: transform;
  transform: translateZ(0); /* GPU compositing hint — replaces contain:layout which broke ticker on some WebKit */
  backface-visibility: hidden;
}

/* Pause on hover */
.dg-ribbon:hover .dg-ribbon-track {
  animation-play-state: paused;
}

.dg-ribbon-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  flex-shrink: 0;
  white-space: nowrap;
}
.dg-ribbon-item svg { flex-shrink: 0; color: #fff; }
.dg-ribbon-item span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); }

/* Separator between items */
.dg-ribbon-sep {
  color: rgba(255,255,255,.55);
  font-size: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Email pinned right — desktop only */
.dg-ribbon-email { display: none; }

/* ══════════════════════════════════════════════════════════════
   STATIC TRUST BAR — mobile-first, fully fixed alignment
   ══════════════════════════════════════════════════════════════

   Mobile  (<480px) : 2×2 grid, icon LEFT-aligned with text, row layout
   Phablet (480px+) : single scrolling row, all 5 items visible
   Tablet  (768px+) : justified row with more breathing room
   Desktop (1024px+): email address pinned to the right
   ═══════════════════════════════════════════════════════════ */

/* ── Base (mobile-first, <480px): 2-col grid, each cell = icon + text in a row ── */
.dg-ribbon--static {
  height: auto !important;
  min-height: auto;
  padding: 6px 0;
  overflow: visible !important;
  flex-wrap: wrap;
  gap: 0;
  background: linear-gradient(90deg, #b45309 0%, #d97706 40%, #f59e0b 60%, #d97706 80%, #b45309 100%) !important;
  box-shadow: 0 2px 6px rgba(180,83,9,.35);
}

.dg-ribbon-static-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  flex: 1;
  min-width: 0;
}

.dg-ribbon--static .dg-ribbon-item {
  display: flex;
  flex-direction: row;      /* icon + text side-by-side, NOT stacked */
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 8px;
  text-align: left;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1.3;
}

.dg-ribbon--static .dg-ribbon-item svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: #fff;
}

.dg-ribbon--static .dg-ribbon-item span {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* 5th item (odd one): span full width and center itself */
.dg-ribbon--static .dg-ribbon-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-content: center;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* No pseudo separators on mobile grid */
.dg-ribbon--static .dg-ribbon-item::after { display: none; }

/* ── 480px+ : single scrollable row, all items inline ── */
@media (min-width: 480px) {
  .dg-ribbon--static {
    padding: 0;
    height: 34px !important;
    overflow: hidden !important;
  }
  .dg-ribbon-static-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    height: 34px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dg-ribbon-static-inner::-webkit-scrollbar { display: none; }

  .dg-ribbon--static .dg-ribbon-item {
    flex-direction: row;
    flex-shrink: 0;
    padding: 0 12px;
    font-size: 10.5px;
    gap: 5px;
    white-space: nowrap;
    height: 34px;
  }
  .dg-ribbon--static .dg-ribbon-item svg {
    width: 11px;
    height: 11px;
  }

  /* Dot separator between items */
  .dg-ribbon--static .dg-ribbon-item:not(:last-child)::after {
    display: inline-block;
    content: '✦';
    color: rgba(255,255,255,.25);
    font-size: 7px;
    margin-left: 12px;
  }

  /* Reset 5th-item special rule */
  .dg-ribbon--static .dg-ribbon-item:last-child:nth-child(odd) {
    grid-column: auto;
    justify-content: center;
    border-top: none;
  }
}

/* ── 768px+ : tablet, more breathing room ── */
@media (min-width: 768px) {
  .dg-ribbon--static {
    height: 36px !important;
  }
  .dg-ribbon-static-inner {
    height: 36px;
    overflow-x: visible;
    justify-content: center;
  }
  .dg-ribbon--static .dg-ribbon-item {
    padding: 0 14px;
    font-size: 11px;
    height: 36px;
  }
}

/* ── 1024px+ : desktop, show email, larger text ── */
@media (min-width: 1024px) {
  .dg-ribbon--static {
    height: 36px !important;
  }
  .dg-ribbon--static .dg-ribbon-item {
    padding: 0 20px;
    font-size: 11.5px;
    font-weight: 500;
  }
  .dg-ribbon--static.dg-ribbon .dg-ribbon-email {
    display: block;
  }
}

/* ============================================================
   FLAG RIBBON — shipping countries
   ============================================================ */

@keyframes dg-flag-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}

.dg-flag-ribbon {
  background: var(--trust-bg, #f0faf8) !important;
  border-bottom: 1px solid var(--trust-border, #c8ece6);
  height: 34px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.dg-flag-ribbon__label {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--trust-text, #006070) !important;
  padding: 0 12px 0 14px;
  white-space: nowrap;
  position: relative;
  z-index: 2;
  border-right: 1px solid var(--trust-border, #c8ece6);
  line-height: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  background: var(--trust-bg, #f0faf8) !important;
  opacity: 1 !important;
}

.dg-flag-ribbon__track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  flex-shrink: 0;
  /* 3 copies → shift by 1/3 = seamless loop */
  animation: dg-flag-scroll var(--dg-flag-speed, 40s) linear infinite;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  padding-left: 8px;
}

.dg-flag-ribbon:hover .dg-flag-ribbon__track {
  animation-play-state: paused;
}

.dg-flag-ribbon__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  flex-shrink: 0;
}

.dg-flag-ribbon__emoji {
  display: inline-flex;
  align-items: center;
  transition: transform .15s ease;
}

.dg-flag-ribbon__emoji img {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  background: var(--primary-200, #c8ece6);
}

.dg-flag-ribbon__item:hover .dg-flag-ribbon__emoji {
  transform: scale(1.2);
}

.dg-flag-ribbon__name {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--primary-600, #2d7a87);
  white-space: nowrap;
}

/* Checkout — hide flag ribbon */
.woocommerce-checkout .dg-flag-ribbon { display: none !important; }


.dg-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow .2s;
  min-height: var(--header-h-mobile);
  will-change: box-shadow;
}
.dg-header.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.09); }
.dg-header-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  height: var(--header-h-mobile);
  overflow: visible;         /* dropdown must escape */
  min-width: 0;              /* Fix 5: allow flex children to shrink */
}

/* Mobile: hamburger visible, desktop search/actions hidden */
.dg-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  flex-shrink: 0;
  color: var(--ink);
  transition: border-color .15s;
}
.dg-hamburger:hover { border-color: var(--navy); color: var(--navy); }

.dg-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 1; min-width: 0; overflow: hidden; }
.dg-logo-mark {
  width: 34px; height: 34px;
  background: var(--navy);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 12px; font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
}
.dg-logo-text { min-width: 0; overflow: hidden; }
.dg-logo-text strong { font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.dg-logo-text strong span { color: var(--teal); }
.dg-logo-text small { display: block; font-size: 8.5px; font-weight: 600; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Desktop search — hidden on mobile */
.dg-search-wrap { display: none; }

/* Header actions — only cart on mobile */
.dg-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;          /* Fix 5: never compress the actions row */
}
.dg-btn-ghost { display: none; }
.dg-signin-btn { min-width: unset; justify-content: center; flex-shrink: 0; }
.dg-btn-solid { display: none; }  /* base: hidden; overridden per breakpoint below */

/* Mobile search icon button */
.dg-header-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  flex-shrink: 0;
}

.dg-cart-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  flex-shrink: 0;
  transition: border-color .15s;
}
.dg-cart-btn:hover { border-color: var(--navy); color: var(--navy); }
.dg-cart-count:empty { display: none !important; }
.dg-cart-count {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 16px; height: 16px;
  background: var(--red);
  color: var(--white);
  font-size: 9px; font-weight: 700;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

/* ============================================================
   PRIMARY NAV — hidden on mobile
   ============================================================ */
.dg-nav { display: none; }

/* ============================================================
   MOBILE SEARCH BAR (below header, collapsible)
   ============================================================ */
.dg-mobile-search-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: none;          /* hidden by default; mobile override below shows it */
  position: sticky;
  top: var(--header-h-mobile);
  z-index: 99;            /* below header (100), above content */
  overflow: visible;      /* allow dropdown to extend below */
}
/* .open class kept for JS compatibility — not needed for sticky behaviour */
.dg-mobile-search-bar.open { display: block; }
.dg-mobile-search-bar form {
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: visible; /* FIXED: was 'hidden' which clipped dropdown */
  position: relative;
}
/* Keep visual border-radius by rounding inner elements instead */
.dg-mobile-search-bar form input {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.dg-mobile-search-bar form button[type="submit"] {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
/* Mobile search dropdown — full width below search bar */
.dg-mobile-search-bar .dg-search-dropdown {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  top: calc(100% + 2px) !important;
}
.dg-mobile-search-bar input {
  flex: 1;
  border: none;
  padding: 10px 14px;
  font-size: 15px;
  outline: none;
  background: transparent;
}
.dg-mobile-search-bar button[type="submit"] {
  background: var(--navy);
  color: var(--white);
  padding: 10px 16px;
  display: flex; align-items: center;
}


/* Mobile search bar — search icon (non-clickable) */
.dg-msb-search-icon {
  background: none;
  border: none;
  padding: 0 0 0 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  cursor: default;
  flex-shrink: 0;
}

/* Mobile search bar — clear (✕) button */
.dg-msb-clear {
  background: none;
  border: none;
  padding: 0 6px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color .15s;
}
.dg-msb-clear:hover { color: var(--ink); background: none; }

/* Desktop search — clear (✕) button */
.dg-sw-clear,
.dg-search-wrap .dg-sw-clear {
  background: none !important;
  border: none;
  padding: 0 8px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 0;
  transition: color .15s;
}
.dg-sw-clear:hover,
.dg-search-wrap .dg-sw-clear:hover { color: var(--ink); background: none !important; }

/* Mobile search — larger touch targets on dropdown results */
.dg-mobile-search-bar .dg-sd-result {
  padding: 11px 14px;
  min-height: 48px;
}

/* Mobile search input — remove webkit cancel button */
.dg-mobile-search-bar input[type="search"]::-webkit-search-cancel-button { display: none; }
#dg-desktop-search-input::-webkit-search-cancel-button,
#dg-desktop-search-input::-webkit-search-decoration { display: none; -webkit-appearance: none; }

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
.dg-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--mobile-bottom-nav-h);
  background: var(--white);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  z-index: 90;
  padding: 0;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
.dg-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-body);
}
.dg-bottom-nav-item svg { width: 22px; height: 22px; }
.dg-bottom-nav-item.active,
.dg-bottom-nav-item:hover { color: var(--navy); }
.dg-bottom-nav-item.active svg { stroke: var(--navy); }
/* bottom nav cart badge removed - nav has no cart item */

/* ============================================================
   MOBILE DRAWER — off-canvas nav
   ============================================================ */
.dg-mobile-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9900; /* above welcome bar (9700) */
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.dg-mobile-overlay.open { opacity: 1; pointer-events: auto; }
.dg-mobile-drawer {
  position: fixed;
  top: 0; left: 0;
  width: 300px; height: 100%;
  background: var(--white);
  z-index: 9950; /* above welcome bar (9700) and overlay (9900) */
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.dg-mobile-drawer.open { transform: translateX(0); }
.dg-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--navy-deep);
  flex-shrink: 0;
}
.dg-drawer-head .dg-logo-text strong { color: var(--white); font-size: 16px; }
.dg-drawer-head .dg-logo-text strong span { color: var(--teal); }
.dg-drawer-head .dg-logo-text small { color: rgba(255,255,255,.45); }
.dg-drawer-close {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
}
.dg-drawer-nav { flex: 1; }
.dg-drawer-nav ul { list-style: none; }
.dg-drawer-nav ul li a {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  font-size: 15px; font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  transition: background .12s, color .12s;
}
.dg-drawer-nav ul li a:hover,
.dg-drawer-nav ul li.current-menu-item a { background: var(--bg); color: var(--navy); }
.dg-drawer-whatsapp {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.dg-drawer-whatsapp a {
  display: flex; align-items: center; gap: 10px;
  background: var(--wa-green,#25D366);
  color: var(--white);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14px; font-weight: 700;
}

/* ============================================================
   CART DRAWER
   ============================================================ */
.dg-cart-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9900; /* above welcome bar (9700) */
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.dg-cart-overlay.open { opacity: 1; pointer-events: auto; }
.dg-cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(380px, 100vw);
  height: 100%;
  background: var(--white);
  z-index: 9950; /* above welcome bar (9700) and overlay (9900) */
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.dg-cart-drawer.open { transform: translateX(0); }


/* ══════════════════════════════════════════════
   CART DRAWER — complete redesign v31
   ══════════════════════════════════════════════ */

/* ── HEAD ── */
.dg-cart-drawer-head { background: var(--navy-deep); padding: 0; flex-shrink: 0; }
.dg-cart-drawer-head-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 12px; }
.dg-cart-drawer-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-head); font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.dg-cart-icon-wrap { color: rgba(255,255,255,.65); display: flex; }
.dg-cart-count-inline { font-size: 12px; font-weight: 400; color: rgba(255,255,255,.4); margin-left: 2px; }
.dg-cart-drawer-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.7); flex-shrink: 0; transition: background .15s; }
.dg-cart-drawer-close:hover { background: rgba(255,255,255,.18); }
.dg-cart-trust-strip { display: flex; gap: 16px; padding: 10px 20px 16px; border-top: 1px solid rgba(255,255,255,.07); }
.dg-cart-trust-badge { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 500; color: rgba(255,255,255,.5); letter-spacing: .01em; }

/* ── SCROLLABLE BODY ── */
/* overflow-x changed from hidden→clip: hidden creates a BFC that blocks child horizontal scroll containers (cross-sell slider). clip paints the same but does not suppress child overflow-x:auto scrolling. */
.dg-cart-drawer-body { flex: 1; overflow-y: auto; overflow-x: clip; padding: 0; background: var(--bg); -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.dg-cart-drawer-body::-webkit-scrollbar { width: 3px; }
.dg-cart-drawer-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── SAVINGS BAR ── */
.dg-cart-confetti-strip { height: 4px; background: repeating-linear-gradient(90deg,var(--teal,#f5c518) 0,var(--teal,#f5c518) 14px,var(--amber,#e74c3c) 14px,var(--amber,#e74c3c) 28px,var(--green,#27ae60) 28px,var(--green,#27ae60) 42px,var(--navy-mid,#3498db) 42px,var(--navy-mid,#3498db) 56px,var(--primary-300,#9b59b6) 56px,var(--primary-300,#9b59b6) 70px); flex-shrink: 0; }

/* ── SAVINGS BAR ── */
.dg-cart-savings-bar { background: var(--savings-grad, linear-gradient(90deg,#005f6b,#007b8a)); padding: 10px 20px; font-size: 12.5px; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 9px; letter-spacing: .01em; flex-shrink: 0; }
.dg-cart-savings-bar strong { color: #fff; font-size: 13.5px; }
.dg-cart-savings-party { font-size: 18px; display: inline-block; animation: dg-party-bounce .9s ease-in-out infinite alternate; }
@keyframes dg-party-bounce { from { transform: scale(1) rotate(-6deg); } to { transform: scale(1.2) rotate(6deg); } }

/* ── AUTO-ELIGIBLE COUPON CARD ── */
.dg-cart-auto-coupon { margin: 8px 14px 0; background: linear-gradient(135deg,var(--success-50,#f0fdf9),var(--primary-50,#e6f7ff)); border: 1.5px dashed var(--primary-400,#00b4cc); border-radius: 10px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; transition: box-shadow .15s; }
.dg-cart-auto-coupon:hover { box-shadow: 0 2px 10px rgba(0,180,204,.18); }
.dg-cart-auto-coupon-icon { width: 28px; height: 28px; background: var(--primary-700,#005f6b); border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dg-cart-auto-coupon-text { flex: 1; min-width: 0; }
.dg-cart-auto-coupon-title { font-size: 11.5px; font-weight: 700; color: var(--primary-700,#005f6b); }
.dg-cart-auto-coupon-sub { font-size: 10px; color: var(--slate,#64748B); margin-top: 1px; }
.dg-cart-auto-coupon-apply { background: var(--primary-700,#005f6b); color: #fff; border: none; border-radius: 16px; padding: 4px 11px; font-size: 10.5px; font-weight: 700; cursor: pointer; white-space: nowrap; letter-spacing: .02em; transition: background .15s; }
.dg-cart-auto-coupon-apply:hover { background: var(--primary-500,#007b8a); }

/* ── TOTAL SAVINGS CELEBRATION ROW ── */
.dg-cart-total-savings { display: flex; align-items: center; gap: 8px; margin: 8px 14px; padding: 8px 12px; background: var(--success-50,#e6f7f0); border: 1px solid var(--success-200,#b2e5cf); border-radius: 10px; }
.dg-cart-total-savings-emoji { font-size: 16px; }
.dg-cart-total-savings-text { font-size: 12px; font-weight: 600; color: var(--success-700,#007a50); }

/* ── ITEM CARD ── */
.dg-cart-item { margin: 14px 14px 0; background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(17,29,82,.06); transition: box-shadow .15s, border-color .15s; }
.dg-cart-item:hover { border-color: var(--primary-200,#c0dde0); box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.dg-cart-item-top { display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 12px; }
.dg-cart-item-img { width: 68px; height: 68px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; background: var(--bg2); border: 1px solid #E2E8F0; }
.dg-cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.dg-cart-item-rx-badge { position: absolute; bottom: 0; right: 0; background: var(--navy-deep); color: #fff; font-size: 7.5px; font-weight: 800; padding: 2px 5px; border-radius: 5px 0 0 0; letter-spacing: .06em; }
/* Rx badge — product cards, single product gallery, cart drawer */
/* ── Badge left group: Rx + discount stacked, no overlap ── */
.dg-badge-left-group {
  position: absolute; top: 6px; left: 6px; z-index: 3;
  display: flex; flex-direction: column; gap: 3px;
  pointer-events: none; user-select: none;
}
.dg-rx-badge {
  display: inline-block;
  background: var(--navy-deep, #0a1628); color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: .08em;
  padding: 2px 6px; border-radius: 3px; line-height: 1.5;
}
/* On single product gallery — larger Rx */
.dg-product-gallery-main .dg-badge-left-group { top: 10px; left: 10px; }
.dg-product-gallery-main .dg-rx-badge { font-size: 11px; padding: 3px 8px; border-radius: 4px; }

.dg-cart-item-info { flex: 1; min-width: 0; }
.dg-cart-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 2px; }
.dg-cart-item-name { font-size: 13px; font-weight: 600; color: var(--ink,#1E293B); line-height: 1.35; }
.dg-cart-item-brand { font-size: 10.5px; color: var(--muted,#94A3B8); margin-bottom: 8px; letter-spacing: .01em; }
.dg-cart-item-price-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dg-cart-item-price { font-family: var(--font-head); font-size: 17px; font-weight: 800; color: var(--navy-deep); letter-spacing: -.02em; line-height: 1; }
.dg-cart-item-reg { font-size: 11px; color: var(--muted,#94A3B8); text-decoration: line-through; }
.dg-cart-item-save-pill { font-size: 10px; font-weight: 700; color: var(--green); background: #C8EFE9; border-radius: 5px; padding: 2px 7px; letter-spacing: .02em; }
.dg-cart-item-remove { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--muted,#94A3B8); background: none; border: none; cursor: pointer; border-radius: 6px; padding: 0; transition: color .15s, background .15s; flex-shrink: 0; }
.dg-cart-item-remove:hover { color: var(--red); background: #FFDEE6; }
.dg-cart-item-meta-strip { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px 8px; border-top: 1px solid var(--border); background: var(--surface-subtle, #ECF0F0); gap: 8px; }
.dg-cart-item-meta { font-size: 10.5px; color: var(--slate,#64748B); display: flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; }
.dg-cart-item-prices { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.dg-cart-item-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.dg-cart-item-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; }

/* ── SHIP PROGRESS ── */
.dg-cart-ship-wrap { margin: 12px 14px 0; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.dg-cart-ship-label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; margin-bottom: 8px; }
.dg-ship-unlocked { font-size: 11.5px; font-weight: 700; color: var(--green); display: flex; align-items: center; gap: 5px; }
.dg-ship-amount { color: var(--green); font-weight: 700; }
.dg-cart-ship-bar { height: 6px; background: var(--border,#E2E8F0); border-radius: 99px; overflow: hidden; }
.dg-cart-ship-fill { height: 100%; background: var(--green); border-radius: 99px; transition: width .5s ease; }

/* coupon: moved to v49 */



















/* ── PRICE BREAKDOWN ── */
.dg-cart-price-breakdown { margin: 12px 14px 18px; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.dg-cart-price-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border,#F1F5F9); font-size: 12.5px; }
.dg-cart-price-row:last-child { border-bottom: none; background: var(--bg); padding: 12px 14px; }
.dg-cart-price-lbl { color: var(--slate,#64748B); font-weight: 500; }
.dg-cart-price-lbl-bold { font-size: 13.5px; font-weight: 700; color: var(--ink,#1E293B); }
.dg-cart-price-val { font-weight: 600; color: var(--ink,#1E293B); }
.dg-cart-price-val-green { font-weight: 700; color: var(--green); }
.dg-cart-price-val-big { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--navy-deep); letter-spacing: -.02em; }

/* ── LAZY CART SKELETON (shown while AJAX loads on first open) ── */
.dg-cart-skeleton { padding: 16px 20px; }
.dg-cart-skeleton-item { display: flex; gap: 12px; margin-bottom: 18px; align-items: center; }
.dg-cart-skeleton-img { width: 64px; height: 64px; border-radius: 10px; flex-shrink: 0; }
.dg-cart-skeleton-lines { flex: 1; }
.dg-cart-skeleton-line { height: 12px; border-radius: 6px; margin-bottom: 0; }
@keyframes dg-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.shimmer { background: linear-gradient(90deg, var(--border,#e2e8f0) 25%, #f1f5f9 50%, var(--border,#e2e8f0) 75%); background-size: 200% 100%; animation: dg-shimmer 1.4s ease-in-out infinite; }
/* Hide skeleton once cart body is populated by AJAX */
.dg-cart-drawer-body.dg-cart-loaded .dg-cart-skeleton { display: none; }

/* ── EMPTY STATE ── */
.dg-cart-empty { display: flex; flex-direction: column; align-items: center; padding: 22px 20px 16px; text-align: center; background: var(--bg); }
.dg-cart-empty-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--teal-light); border: 1px solid var(--border-mid); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.dg-cart-empty h3 { font-size: 16px; font-weight: 700; color: var(--ink,#1E293B); margin-bottom: 6px; letter-spacing: -.02em; }
.dg-cart-empty p { font-size: 13px; color: var(--slate,#64748B); line-height: 1.55; margin-bottom: 16px; }
.dg-cart-browse-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; background: var(--navy-deep); color: #fff; border-radius: 12px; font-size: 14px; font-weight: 700; margin-bottom: 16px; letter-spacing: .01em; transition: background .15s; }
.dg-cart-browse-btn:hover { background: var(--navy); color: #fff; }
.dg-cart-empty-divider { width: 100%; border: none; border-top: 1px solid var(--border); margin-bottom: 14px; }
.dg-cart-empty-trust { display: flex; justify-content: space-between; width: 100%; gap: 10px; }
.dg-cart-empty-trust-item { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 1; }
.dg-cart-empty-trust-icon { width: 46px; height: 46px; border-radius: 12px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.dg-cart-empty-trust-lbl { font-size: 10.5px; font-weight: 500; color: var(--slate,#64748B); text-align: center; line-height: 1.5; }
.dg-cart-empty-social { padding: 14px 20px; display: flex; align-items: center; justify-content: center; gap: 10px; border-top: 1px solid var(--border); background: #fff; }
.dg-cart-empty-avatars { display: flex; }
.dg-cart-empty-av { width: 24px; height: 24px; border-radius: 50%; background: var(--border-mid); border: 2px solid #fff; margin-right: -7px; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; color: var(--navy-deep); }
.dg-cart-empty-social-txt { font-size: 12px; font-weight: 600; color: var(--slate,#475569); margin-left: 10px; }

/* ── FIXED FOOT ── */
.dg-cart-drawer-foot { background: #fff; border-top: 1px solid var(--border); padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); flex-shrink: 0; }
.dg-cart-ships-line { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--slate,#64748B); margin-bottom: 11px; }
.dg-cart-ships-line strong { color: var(--ink,#1E293B); font-weight: 700; }
.dg-cart-ships-price { font-family: var(--font-head); font-size: 14px; font-weight: 800; color: var(--navy-deep); }
.dg-cart-checkout-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 15px; background: var(--teal,#FFD814); color: var(--text-on-cta,#0F1111); border: 1.5px solid var(--accent-600,#C7A600); border-radius: 12px; font-family: var(--font-head); font-size: 14.5px; font-weight: 800; margin-bottom: 10px; letter-spacing: .01em; transition: background .15s; }
.dg-cart-checkout-btn:hover { background: var(--accent-600,#F7CA00); color: var(--text-on-cta,#0F1111); }
.dg-cart-view-btn { display: none !important; }
.dg-cart-bottom-trust { display: flex; justify-content: center; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.dg-cart-bt-item { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 500; color: var(--slate,#64748B); border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px; background: var(--bg); }

/* ── QTY PILL ── */
.dg-qty-control { display: inline-grid; grid-template-columns: 30px 1fr 30px; align-items: stretch; width: 90px; min-width: 90px; max-width: 90px; height: 30px; border: 1.5px solid var(--border, #BFC9CA); border-radius: 8px; overflow: hidden; background: #fff; flex-shrink: 0; box-sizing: border-box; }
/* ============================================================
   STICKY CART BAR (mobile, shown when product added)
   ============================================================ */
.dg-sticky-cart-bar {
  position: fixed;
  bottom: var(--mobile-bottom-nav-h);
  left: 0; right: 0;
  background: var(--navy);
  color: var(--white);
  padding: 10px 16px;
  display: none;
  align-items: center;
  justify-content: space-between;
  z-index: 89;
  box-shadow: 0 -2px 12px rgba(0,0,0,.15);
  animation: dg-slide-up .3s ease;
}
@keyframes dg-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.dg-sticky-cart-bar.show { display: flex; }
.dg-sticky-cart-bar-info { font-size: 13px; font-weight: 600; }
.dg-sticky-cart-bar-info span { font-size: 11px; color: rgba(255,255,255,.65); display: block; }
.dg-sticky-cart-bar-btn {
  background: var(--teal);
  color: var(--ink);
  border: 1.5px solid var(--warning-700,#C8860A);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 800;
}

/* ============================================================
   PAGE HERO
   ============================================================ */
.dg-page-hero {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
  padding: 32px 0 28px;
  text-align: center;
}
.dg-page-hero h1 { color: var(--white); margin-bottom: 8px; }
.dg-page-hero p { color: rgba(255,255,255,.7); font-size: 13px; max-width: 500px; margin: 0 auto; }


/* ─── SEARCH HERO ─── */
.dg-search-hero {
  padding-bottom: 8px;
}
.dg-search-hero-form {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: visible;
  position: relative;
}
.dg-search-hero-form:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,130,150,.10);
}
.dg-search-hero-form input[type="search"] {
  flex: 1;
  border: none;
  padding: 12px 10px;
  font-size: 15px;
  background: none;
  outline: none;
  color: var(--ink);
  min-width: 0;
  -webkit-appearance: none;
}
.dg-search-hero-form input[type="search"]::-webkit-search-cancel-button { display: none; }
.dg-sh-clear {
  background: none;
  border: none;
  padding: 0 8px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  transition: color .15s, background .15s;
}
.dg-sh-clear:hover { color: var(--ink); background: var(--bg2); }

/* Category scroll chips row (search page) */
.dg-cat-scroll-row {
  background: var(--white);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0;
}
.dg-cat-scroll-row::-webkit-scrollbar { display: none; }
.dg-cat-scroll-inner {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 16px;
  min-width: max-content;
}
.dg-cat-scroll-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-radius: 99px;
  white-space: nowrap;
  transition: background .15s, color .15s;
  text-decoration: none;
  margin-right: 6px;
  border: 1.5px solid var(--border);
}
.dg-cat-scroll-chip:hover,
.dg-cat-scroll-chip.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* Search highlight mark */
.dg-sd-hl {
  background: rgba(255,200,0,.35);
  border-radius: 2px;
  padding: 0 1px;
  font-style: normal;
}

/* Search history chip */
.dg-sd-history { color: var(--muted); }
.dg-sd-history-arrow { margin-left: auto; opacity: .5; }
.dg-sd-history span { flex: 1; }
.dg-sd-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 10px; }
.dg-sd-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; font-size: 12px; font-weight: 600;
  background: var(--bg2); color: var(--navy);
  border-radius: 99px; text-decoration: none;
  border: 1px solid var(--border);
  transition: background .15s, color .15s;
}
.dg-sd-chip:hover { background: var(--navy); color: var(--white); }
.dg-sd-section {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.dg-sd-clear-history {
  background: none; border: none; padding: 3px; cursor: pointer;
  color: var(--muted); display: flex; align-items: center; border-radius: 4px;
  transition: color .15s, background .15s;
}
.dg-sd-clear-history:hover { color: var(--ink); background: var(--bg2); }
.dg-sd-cat-count { font-size: 10.5px; opacity: .55; margin-left: auto; }
.dg-sd-result.dg-sd-cat { display: flex; align-items: center; gap: 8px; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.dg-breadcrumb {
  border-bottom: 1px solid var(--border);
  background: var(--white);
  padding: 8px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dg-breadcrumb-inner {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px;
  white-space: nowrap;
  min-width: max-content;
  padding: 0 16px;
}
.dg-breadcrumb a { color: var(--navy); }
.dg-breadcrumb span { color: var(--muted); }

/* ============================================================
   HOMEPAGE LAYOUT — mobile-first: single column
   ============================================================ */
.dg-home-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ============================================================
   SIDEBAR — hidden on mobile, shown on desktop
   ============================================================ */
.dg-sidebar {
  display: none;
}
.dg-sidebar-section { padding: 0 0 12px; margin-bottom: 4px; }
.dg-sidebar-section-title {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  padding: 8px 16px 6px;
  display: flex; align-items: center; gap: 5px;
}
.dg-sidebar-cats ul { list-style: none; }
.dg-sidebar-cats ul li a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 16px;
  font-size: 12.5px; color: var(--ink);
  transition: background .15s, color .15s;
}
.dg-sidebar-cats ul li a:hover { background: var(--bg); color: var(--navy); }
.dg-sidebar-cats ul li.chosen > a,
.dg-sidebar-cats ul li.current-cat > a {
  background: var(--bg2); color: var(--navy); font-weight: 600;
  border-left: 3px solid var(--navy);
}
.dg-sidebar-cats ul li a .count {
  background: var(--bg2); border-radius: 10px; padding: 1px 7px;
  font-size: 10.5px; color: var(--muted); font-weight: 600;
}
.dg-sidebar-cats ul li.chosen a .count { background: var(--navy); color: var(--white); }
.dg-sidebar-bestsellers { padding: 0 16px 8px; }
.dg-sidebar-best-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.dg-sidebar-best-item:last-child { border-bottom: none; }
.dg-sidebar-best-dot {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.dg-sidebar-best-info { flex: 1; min-width: 0; }
.dg-sidebar-best-name { font-size: 11.5px; font-weight: 600; color: var(--ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-sidebar-best-price { font-size: 11px; color: var(--muted); }
.dg-sidebar-best-price s { color: var(--muted); margin-right: 4px; }
.dg-sidebar-best-price strong { color: var(--navy); }
.dg-sidebar-view-all {
  display: block; margin: 8px 16px 0;
  padding: 8px 14px; background: var(--navy); color: var(--white);
  border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; text-align: center;
}
.dg-sidebar-view-all:hover { background: var(--navy-mid); color: var(--white); }
.dg-sidebar-view-all-cats-btn {
  display: flex; align-items: center; gap: 5px;
  background: var(--navy); color: var(--white);
  padding: 7px 16px;
  font-size: 12px; font-weight: 700;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.dg-main-content { flex: 1; min-width: 0; padding: 0; }

/* ============================================================
   COUNTER BAR — compact on mobile
   ============================================================ */
.dg-counter-bar {
  background: var(--checkout-grad,linear-gradient(135deg, var(--primary-900,#0A5F5F) 0%, var(--primary-700,#0D7F7F) 40%, var(--primary-500,#1A3A7A) 100%));
  color: var(--white);
  padding: 18px 0;
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dg-counter-inner {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 16px;
}
.dg-counter-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
  width: 100%;
}
.dg-counter-num {
  font-family: var(--font-head);
  font-size: 34px; font-weight: 900;
  color: var(--white);
  line-height: 1;
  letter-spacing: -.01em;
}
.dg-counter-sub { font-size: 13px; color: rgba(255,255,255,.85); letter-spacing:.01em; margin-top: 2px; }
.dg-counter-live {
  font-size: 12px; color: var(--success-200,#5EEAD4); font-weight: 700;
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px;
  background: rgba(94,234,212,.1);
  border: 1px solid rgba(94,234,212,.25);
  border-radius: 99px;
  padding: 4px 10px;
}
/* FIX 3: Remove the ::before pseudo dot — HTML span already provides one */
.dg-counter-live::before { display: none !important; }
.dg-counter-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success-200,#5EEAD4); flex-shrink: 0;
  animation: dg-pulse 1.5s infinite;
  display: block;
}
.dg-stats-group {
  display: flex; gap: 28px; justify-content: center;
  flex-wrap: wrap;
  padding: 14px 0 4px;
  border-top: 1px solid rgba(255,255,255,.12);
  width: 100%;
}
.dg-stat-item { text-align: center; }
.dg-stat-num { font-family: var(--font-head); font-size: 22px; font-weight: 900; color: var(--white); line-height: 1; }
.dg-stat-label { font-size: 11px; color: rgba(255,255,255,.6); margin-top: 3px; letter-spacing:.01em; }
.dg-orders-counter { display: none; }
.dg-live-stats-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 6px; }
.dg-odometer { display: flex; align-items: center; gap: 3px; }
.dg-digit {
  width: 24px; height: 30px; background: rgba(255,255,255,.15); color: var(--white);
  font-family: var(--font-head); font-size: 15px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; margin: 0 1px;
}
.dg-digit-sep { display: none; } /* Fix 4: commas removed */

/* ============================================================
   HERO BANNER — mobile-first
   ============================================================ */
.dg-hero {
  /* Consolidated gradient — replaces v9.2 150deg override */
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-mid) 60%, #1e3280 100%);
  padding: 28px 16px 32px;
  position: relative;
  overflow: hidden;
  border-bottom: none;
}
.dg-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
  pointer-events: none;
}
.dg-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative; z-index: 1;
}
.dg-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 11.5px; font-weight: 600;
  color: rgba(255,255,255,.9);
  margin-bottom: 10px;
  align-self: flex-start;
}
.dg-hero h1 {
  color: var(--white);
  font-size: clamp(20px, 5.5vw, 30px);
  line-height: 1.2;
  margin-bottom: 10px;
}
.dg-hero p {
  color: rgba(255,255,255,.75);
  font-size: 13px;
  line-height: 1.65;
  margin-bottom: 16px;
}
.dg-hero-trust { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.dg-hero-trust-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.8); }
.dg-hero-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.dg-btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 22px;
  background: var(--white); color: var(--navy);
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700;
  transition: opacity .15s;
}
.dg-btn-primary:hover { opacity: .9; color: var(--navy); }
.dg-btn-outline {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 22px;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700;
  background: transparent;
  transition: background .15s, color .15s;
}
.dg-btn-outline:hover { background: var(--navy); color: var(--white); }
.dg-btn-wa {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 22px;
  background: var(--wa-green,#25D366); color: #fff;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700;
  transition: opacity .15s;
}
.dg-btn-wa:hover { opacity: .88; color: #fff; }
.dg-btn-outline-white {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 22px;
  border: 1.5px solid rgba(255,255,255,.4);
  color: rgba(255,255,255,.9);
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  transition: background .15s;
}
.dg-btn-outline-white:hover { background: rgba(255,255,255,.1); color: var(--white); }
.dg-hero-card {
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-lg);
  padding: 0;
  text-align: center;
  align-self: center;
}
/* Legacy price elements — hidden when globe card is active */
.dg-hero-price-label,.dg-hero-price,.dg-hero-price-sub,.dg-hero-free-ship { display:none; }

/* ============================================================
   CATEGORY QUICK CHIPS — mobile scroll bar
   ============================================================ */
.dg-cat-scroll-row {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dg-cat-scroll-row::-webkit-scrollbar { display: none; }
.dg-cat-scroll-inner {
  display: flex; gap: 8px;
  padding: 0 16px;
  width: max-content;
}
.dg-cat-scroll-chip {
  padding: 6px 14px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: 12px; font-weight: 600;
  color: var(--slate);
  white-space: nowrap;
  transition: all .15s;
  text-decoration: none;
  display: block;
}
.dg-cat-scroll-chip:hover,
.dg-cat-scroll-chip.active { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ============================================================
   TRUST BAR
   ============================================================ */
.dg-trust-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dg-trust-bar::-webkit-scrollbar { display: none; }
.dg-trust-bar-inner {
  display: flex;
  min-width: max-content;
}
.dg-trust-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.dg-trust-item:last-child { border-right: none; }
.dg-trust-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dg-trust-item h4, .dg-trust-item-heading { font-size: 12px; font-weight: 700; margin-bottom: 1px; white-space: nowrap; }
.dg-trust-item p { font-size: 10.5px; color: var(--slate); margin: 0; white-space: nowrap; }

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.dg-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dg-section-title {
  font-family: var(--font-head);
  font-size: 15px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 6px;
}
.dg-section-title::before {
  content: '';
  width: 3px; height: 18px;
  background: var(--navy); border-radius: 2px; display: block;
}
.dg-section-link {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--navy);
}
.dg-section-link:hover { color: var(--teal); }
.dg-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  animation: dg-pulse 1.5s infinite;
}
@keyframes dg-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ============================================================
   PRODUCT GRID — 2 cols mobile
   ============================================================ */
.dg-products-section { padding: 16px; }
.dg-products-section + .dg-products-section { padding-top: 0; }
.dg-products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dg-products-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.dg-product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow .2s, transform .15s;
  display: flex; flex-direction: column;
  contain: layout;
}
.dg-product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.dg-product-img {
  position: relative; width: 100%;
  aspect-ratio: 1 / 1; overflow: hidden; flex-shrink: 0;
  display: block; contain: layout style;
  background: var(--bg2);
}
.dg-product-img a {
  position: absolute !important; inset: 0 !important;
  display: block !important; width: 100% !important; height: 100% !important;
  overflow: hidden !important;
}
.dg-product-img img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important;
  object-fit: cover !important; object-position: center !important;
  display: block !important;
}
@keyframes dg-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.dg-product-img svg {
  position: absolute !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 60px !important; height: 60px !important;
  max-width: none !important; max-height: none !important;
}
.dg-badge {
  display: inline-block;
  background: var(--red); color: var(--white);
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px; line-height: 1.4;
}
.dg-badge-top {
  position: absolute; top: 6px; right: 6px;
  background: var(--amber); color: var(--white);
  font-size: 9px; font-weight: 800;
  padding: 2px 6px; border-radius: 4px; line-height: 1.4;
  letter-spacing: .04em;
}
.dg-viewing {
  position: absolute; bottom: 5px; left: 0; right: 0; text-align: center;
}
.dg-viewing span {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.07); border-radius: 20px;
  padding: 2px 8px; font-size: 9.5px; font-weight: 600; color: var(--green);
}
.dg-viewing span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--green); display: block; }
.dg-product-body { padding: 10px 10px 12px; display: flex; flex-direction: column; flex: 1; }
.dg-product-name { font-size: 12px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; flex: 1; }
.dg-product-name a { color: var(--ink); }
.dg-product-name a:hover { color: var(--navy); }
.dg-stars { display: flex; gap: 1px; }
.dg-star-count { font-size: 10px; color: var(--muted); }
.dg-product-price { display: flex; align-items: baseline; gap: 5px; margin: 4px 0 8px; }
.dg-price-old { font-size: 11px; color: var(--muted); text-decoration: line-through; }
.dg-price-new { font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--navy); }
.dg-product-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dg-btn-cart {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 7px 6px;
  background: #FFD814; color: #0F1111;
  border: 1.5px solid #C7A600; border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 700;
  transition: all .15s;
}
.dg-btn-cart:hover { background: #F7CA00; color: #0F1111; border-color: #B07500; }
.dg-btn-view {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 7px 6px;
  background: var(--navy); border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 600; color: var(--white);
  transition: opacity .15s;
}
.dg-btn-view:hover { opacity: .88; color: var(--white); }

/* ============================================================
   RECENTLY ORDERED STRIP (homepage)
   ============================================================ */
.dg-recent-section { padding: 16px; background: var(--bg); border-top: 1px solid var(--border); }
.dg-recent-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dg-recent-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  gap: 0;
}
.dg-recent-card-img {
  position: relative;
  width: 80px; height: 80px;
  overflow: hidden; flex-shrink: 0;
}
.dg-recent-card-img a {
  position: absolute !important; inset: 0 !important; display: block !important; overflow: hidden !important;
}
.dg-recent-card-img img {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important;
  object-fit: cover !important; object-position: center !important; display: block !important;
}
.dg-recent-card-img svg {
  position: absolute !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 48px !important; height: 48px !important; max-width: none !important;
}
.dg-recent-flags { display: none; }
.dg-flag-badge { display: none; }
.dg-prev-order-badge {
  position: absolute; bottom: 5px; left: 5px;
  background: rgba(26,43,107,.75);
  color: rgba(255,255,255,.9);
  font-size: 8px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px;
  letter-spacing: .04em;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.dg-recent-card-body { padding: 10px 12px; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.dg-recent-card-name { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.dg-recent-card-sub { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.dg-recent-card-price { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.dg-recent-card-link {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--navy);
}
.dg-recent-card-link:hover { color: var(--teal); }

/* ============================================================
   FREE SHIPPING STRIP
   ============================================================ */
.dg-free-ship-strip {
  background: var(--success-50,#F0FFF4); border-top: 1px solid var(--success-200,#BBF7D0); border-bottom: 1px solid var(--success-200,#BBF7D0);
  padding: 8px 16px; font-size: 12px; font-weight: 600; color: var(--success-700,#166534);
  display: flex; align-items: center; gap: 6px;
}

/* ============================================================
   FEATURES SECTION
   ============================================================ */
.dg-features { padding: 20px 16px; background: var(--white); border-top: 1px solid var(--border); }
.dg-features-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dg-feature-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px;
  display: flex; align-items: flex-start; gap: 12px;
}
.dg-feature-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dg-feature-card h4, .dg-feature-card-heading { font-size: 13px; margin-bottom: 3px; }
.dg-feature-card p { font-size: 11.5px; color: var(--slate); margin: 0; line-height: 1.55; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.dg-testimonials-section { padding: 20px 16px; background: var(--bg); border-top: 1px solid var(--border); }
.dg-testimonials-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dg-testimonial-card-home {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px;
}
.dg-testimonial-head-home { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dg-testimonial-author { display: flex; align-items: center; gap: 8px; }
.dg-testimonial-avatar-sm {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg2); color: var(--navy);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dg-testimonial-name-sm { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.dg-testimonial-country-sm { font-size: 10.5px; color: var(--muted); }
.dg-testimonial-text-sm { font-size: 12px; color: var(--slate); line-height: 1.55; font-style: italic; margin-bottom: 8px; }
.dg-testimonial-product-sm {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  padding: 2px 8px; background: var(--bg2); color: var(--navy); border-radius: 4px;
}
.dg-testimonials-cta { text-align: center; margin-top: 16px; }
.dg-btn-outline-navy {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; border: 1.5px solid var(--navy);
  color: var(--navy); border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700; transition: all .15s;
}
.dg-btn-outline-navy:hover { background: var(--navy); color: var(--white); }

/* ============================================================
   BLOG SECTION
   ============================================================ */
.dg-blog-section { padding: 20px 16px; border-top: 1px solid var(--border); background: var(--white); }
.dg-blog-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dg-blog-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden; transition: box-shadow .2s;
}
.dg-blog-card:hover { box-shadow: var(--shadow-md); }
.dg-blog-img {
  height: 120px; background: var(--bg2); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.dg-blog-img img { width: 100%; height: 100%; object-fit: cover; }
.dg-blog-body { padding: 12px; }
.dg-blog-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); background: var(--bg2); padding: 2px 7px; border-radius: 3px; }
.dg-blog-title { font-size: 13px; font-weight: 700; margin: 6px 0 4px; line-height: 1.35; }
.dg-blog-title a { color: var(--ink); }
.dg-blog-title a:hover { color: var(--navy); }
.dg-blog-excerpt { font-size: 12px; color: var(--slate); line-height: 1.55; margin-bottom: 8px; }
.dg-blog-meta { display: flex; align-items: center; justify-content: space-between; }
.dg-blog-date { font-size: 11px; color: var(--muted); }
.dg-blog-read { font-size: 12px; font-weight: 600; color: var(--navy); }

/* ============================================================
   RIGHT SIDEBAR (hidden on mobile)
   ============================================================ */
.dg-right-sidebar { display: none; }
.dg-right-sidebar-price-card {
  background: var(--navy); border-radius: var(--radius-md);
  padding: 16px; text-align: center; margin-bottom: 16px;
}
.dg-right-sidebar-price-label { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 2px; }
.dg-right-sidebar-price-sub { font-size: 10px; color: rgba(255,255,255,.55); }
.dg-right-sidebar-price-big { font-family: var(--font-head); font-size: 30px; font-weight: 800; color: var(--white); line-height: 1; margin: 4px 0; }
.dg-right-sidebar-free { font-size: 10px; color: rgba(255,255,255,.65); margin-top: 6px; }

/* ── Dynamic Right Sidebar Price Card (v92 — teal-matched redesign) ── */
/* ─ Outer card: matches theme teal/white palette instead of dark navy ─ */
.dg-rsb-dynamic {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0,130,150,.13), 0 1px 3px rgba(0,0,0,.07);
  border: 1.5px solid var(--primary-200,#cceaee);
}

/* ─ Top block: teal gradient header ─ */
.dg-rsb-top {
  padding: 18px 16px 16px;
  text-align: center;
  position: relative;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
  overflow: hidden;
}
/* Subtle shine */
.dg-rsb-top::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 80% at 50% -20%, rgba(255,255,255,.10) 0%, transparent 65%);
  pointer-events: none;
}

.dg-rsb-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 10px;
}
.dg-rsb-label::before,
.dg-rsb-label::after {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: rgba(255,255,255,.25);
}

.dg-rsb-price {
  font-family: var(--font-head);
  font-size: 44px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0 0 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.dg-rsb-sub {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  margin-bottom: 4px;
}

/* Savings pill — green on teal ─ */
.dg-rsb-savings {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  background: rgba(6,125,98,.25);
  border: 1px solid rgba(6,125,98,.5);
  color: var(--success-200,#6ee7b7);
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 99px;
  padding: 4px 14px;
}
.dg-rsb-savings::before { content: '↓'; font-size: 10px; }

/* ─ Divider ─ */
.dg-rsb-divider {
  height: 1px;
  background: var(--primary-50,#e8f4f6);
  margin: 0;
}

/* ─ Shipping progress block — white bg ─ */
.dg-rsb-ship {
  padding: 13px 16px;
  background: var(--primary-50,#f0fafb);
}
.dg-rsb-ship--unlocked {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
}
.dg-rsb-ship-icon { font-size: 15px; flex-shrink: 0; }
.dg-rsb-ship-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 9px;
}
.dg-rsb-ship-text {
  font-size: 11.5px;
  color: var(--slate);
  line-height: 1.5;
}
.dg-rsb-ship-text strong { color: var(--navy); }
.dg-rsb-progress-track {
  height: 6px;
  background: var(--primary-100,#cdeaee);
  border-radius: 99px;
  overflow: hidden;
}
.dg-rsb-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green), #0da87e);
  border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 6px rgba(6,125,98,.3);
}

/* ─ Trust badges — clean white rows ─ */
.dg-rsb-badges {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dg-rsb-badges li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  padding: 9px 16px;
  border-top: 1px solid var(--primary-100,#edf6f8);
  transition: background .15s;
}
.dg-rsb-badges li:hover { background: var(--primary-50,#f5fbfc); }
.dg-rsb-badges li span.dg-rsb-badge-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--primary-50,#e6f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* ─ Guarantee strip below trust badges ─ */
.dg-rsb-guarantee {
  background: #fffbea;
  border-top: 1px solid var(--warning-200,#fde68a);
  padding: 9px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--warning-700,#92400e);
  font-weight: 600;
}
.dg-rsb-guarantee-icon {
  font-size: 15px;
  flex-shrink: 0;
}

/* ─ "Why choose us" quick stats strip ─ */
.dg-rsb-stats {
  display: flex;
  border-top: 1px solid var(--primary-100,#e8f4f6);
  background: #fff;
}
.dg-rsb-stat {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-right: 1px solid var(--primary-100,#e8f4f6);
  line-height: 1.2;
}
.dg-rsb-stat:last-child { border-right: none; }
.dg-rsb-stat-val {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  font-family: var(--font-head);
  display: block;
}
.dg-rsb-stat-lbl {
  font-size: 9.5px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  display: block;
}
.dg-new-products-title {
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 5px; margin-bottom: 10px;
}
.dg-new-products-title::before { content: '⚡'; font-size: 11px; }
.dg-new-product-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.dg-new-product-item:last-child { border-bottom: none; }
.dg-new-product-dot { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.dg-new-product-info { flex: 1; min-width: 0; }
.dg-new-product-name { font-size: 11px; font-weight: 600; color: var(--ink); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-new-product-price { font-size: 11px; color: var(--muted); }
.dg-new-product-price s { margin-right: 3px; }
.dg-new-product-price strong { color: var(--navy); font-weight: 700; }
.dg-right-sidebar-viewall {
  display: block; margin-top: 10px; padding: 7px 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 700; color: var(--navy); text-align: center;
}

/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */
.dg-single-wrap { display: flex; flex-direction: column; gap: 0; }
.dg-single-main { flex: 1; min-width: 0; padding: 0; }
.dg-shop-sidebar { display: none; }

.dg-product-single {}
.dg-product-single-top {
  display: flex; flex-direction: column; gap: 0;
}

/* Gallery — full width on mobile */
.dg-product-gallery { padding: 16px 16px 0; }
.dg-product-gallery-main {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: 8px; position: relative;
}
.dg-product-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.dg-sale-badge-big {
  position: absolute; top: 10px; right: 10px;
  background: var(--red); color: var(--white);
  font-size: 11px; font-weight: 800; padding: 3px 9px;
  border-radius: 5px; letter-spacing: .04em;
}
.dg-product-gallery-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.dg-product-gallery-thumbs img {
  width: 48px; height: 48px; object-fit: cover;
  border-radius: 6px; border: 1.5px solid var(--border); cursor: pointer;
}
.dg-product-gallery-thumbs img.active { border-color: var(--navy); }

/* Product info — full width on mobile */
.dg-product-info { padding: 16px; }
.dg-product-cats { margin-bottom: 6px; }
.dg-product-cat-tag {
  display: inline-block; background: var(--bg2); color: var(--navy);
  font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 4px;
}
.dg-product-title { font-size: clamp(17px, 4.5vw, 22px); margin-bottom: 6px; }
.dg-product-reviews-line { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.dg-product-reviews-line a { color: var(--navy); font-weight: 600; }
.dg-product-rating-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dg-product-price-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.dg-product-savings {
  display: flex; align-items: center; gap: 4px;
  background: var(--success-100,#DCFCE7); color: var(--success-700,#166534);
  font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
}
.dg-price-new-big {
  font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--navy);
}
.dg-price-old-big {
  font-size: 15px; color: var(--muted); text-decoration: line-through;
}
.dg-product-meta-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.dg-product-meta-chip {
  display: flex; align-items: center; gap: 5px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 10px; font-size: 11px; color: var(--slate);
}
.dg-product-meta-chip strong { color: var(--ink); font-weight: 700; margin-left: 2px; }
/* Brand taxonomy links inside the Manufacturer/Trademark chip */
.dg-brand-link {
    color: var(--navy);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color .15s, text-decoration-color .15s;
}
.dg-brand-link:hover {
    color: var(--navy-mid);
    text-decoration-color: currentColor;
}

/* Viewing badge */
.dg-product-viewing-inline {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--success-50,#F0FFF4); border: 1px solid var(--success-200,#BBF7D0);
  border-radius: 20px; padding: 3px 10px;
  font-size: 11.5px; font-weight: 600; color: var(--success-700,#166534);
  margin-bottom: 14px;
}
.dg-product-viewing-inline::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); display: block;
  animation: dg-pulse 1.5s infinite;
}

/* Trust badges */
.dg-product-trust-badges {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}

/* Save for Later / Share row — keep clear of trust badges above & below */
.dg-sfl-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  margin-bottom: 14px;
  padding-top: 2px;
}
.dg-sfl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 14px;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: border-color .15s, background .15s;
  white-space: nowrap;
}
.dg-sfl-btn:hover { border-color: var(--navy-mid); background: var(--bg); }
.dg-sfl-btn.dg-sfl--saved { color: #E11D48; border-color: #FECDD3; background: #FFF1F2; }
.dg-share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 14px;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: border-color .15s, background .15s;
  white-space: nowrap;
}
.dg-share-btn:hover { border-color: var(--navy-mid); background: var(--bg); }
.dg-trust-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 100px; padding: 4px 10px 4px 6px;
  transition: border-color .15s;
}
.dg-trust-badge:hover { border-color: var(--navy-mid); }
.dg-trust-badge-icon {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dg-trust-green { background: #dcfce7; color: #15803d; }
.dg-trust-green svg { stroke: #15803d; }
.dg-trust-blue { background: var(--primary-100,#d0f0f4); color: var(--primary-700,#005F6B); }
.dg-trust-blue svg { stroke: var(--primary-700,#005F6B); }
.dg-trust-purple { background: #ede9fe; color: #7c3aed; }
.dg-trust-purple svg { stroke: #7c3aed; }
.dg-trust-badge strong { font-weight: 700; color: var(--ink); font-size: 11px; display: inline; line-height: 1; }
.dg-trust-badge span { display: none; }

/* Delivery estimate — countdown + ships/delivery dates */
.dg-delivery-estimate {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 16px;
}
.dg-delivery-urgency {
  display: flex; align-items: center; gap: 6px;
  background: var(--teal-light); border-radius: 8px;
  padding: 6px 10px; width: fit-content; color: var(--amber);
}
.dg-delivery-urgency span { font-size: 11.5px; color: #8A5200; }
.dg-delivery-urgency strong { font-weight: 700; color: var(--amber); }
.dg-delivery-dates {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dg-delivery-dates span { font-size: 12.5px; color: var(--ink); }
.dg-delivery-dates strong { font-weight: 700; }
.dg-delivery-sep { color: var(--border); }
.dg-delivery-ico-ship { color: var(--green); flex-shrink: 0; }
.dg-delivery-ico-plane { color: var(--navy); flex-shrink: 0; }
.dg-delivery-muted { color: var(--slate); }
.dg-delivery-muted strong { color: var(--ink); }
@media (max-width: 480px) {
  .dg-delivery-dates { gap: 6px; }
  .dg-delivery-sep { display: none; }
  .dg-delivery-dates { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* Strength selector */
.dg-strength-selector { margin-bottom: 16px; }
.dg-strength-label { font-size: 12px; font-weight: 700; color: var(--slate); margin-bottom: 8px; }
.dg-strength-options { display: flex; gap: 7px; flex-wrap: wrap; }
.dg-strength-btn {
  padding: 7px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600;
  color: var(--ink);
  transition: all .15s;
}
.dg-strength-btn:hover,
.dg-strength-btn.active {
  border-color: var(--navy); background: var(--navy); color: var(--white);
}

/* Qty row */
.dg-qty-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dg-qty-label { font-size: 12.5px; font-weight: 700; color: var(--slate); }
.dg-qty-input {
  display: flex; align-items: center;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.dg-qty-input button {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; line-height: 1;
  color: var(--slate); background: var(--bg2);
  border: none; cursor: pointer; transition: background .12s, color .12s; user-select: none;
}
.dg-qty-input button:hover { background: var(--border); color: var(--ink); }
.dg-qty-input input {
  width: 48px; height: 36px;
  border: none; border-left: 1.5px solid var(--border); border-right: 1.5px solid var(--border);
  text-align: center; font-size: 14px; font-weight: 700;
  outline: none; background: var(--white);
  -moz-appearance: textfield; appearance: textfield;
}
.dg-qty-input input::-webkit-outer-spin-button,
.dg-qty-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* CTAs — full width on mobile */
.dg-product-ctas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.dg-btn-atc {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 16px;
  background: #FFD814; color: #0F1111;
  border: 1.5px solid #C7A600;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 800;
  transition: all .15s;
}
.dg-btn-atc:hover { background: #F7CA00; color: #0F1111; border-color: #B07500; }
.dg-btn-buy {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 16px;
  background: #FFA41C; color: #0F1111;
  border: 1.5px solid #C45500;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 800;
  transition: background .15s;
}
.dg-btn-buy:hover { background: #FA8900; color: #0F1111; border-color: #B07500; }

/* Product notice */
.dg-product-notice {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-sm);
  padding: 10px 13px; font-size: 12px; color: #78350f;
  display: flex; gap: 10px; align-items: flex-start; line-height: 1.55;
  margin-top: 14px; margin-bottom: 14px;
}
.dg-product-notice-icon { flex-shrink: 0; margin-top: 1px; }
.dg-product-notice strong { display: block; font-weight: 800; font-size: 12.5px; color: var(--warning-700,#92400e); margin-bottom: 2px; }

/* Bottom trust strip */
.dg-product-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 14px; }
.dg-product-trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--slate);
}

/* ============================================================
   TABS (single product)
   ============================================================ */
.dg-tabs {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 0; overflow: hidden; margin-top: 0; border-left: none; border-right: none;
}
.dg-tabs-nav {
  display: flex; border-bottom: 1px solid var(--border);
  background: var(--bg); overflow-x: auto; scrollbar-width: none;
}
.dg-tabs-nav::-webkit-scrollbar { display: none; }
.dg-tab-btn {
  padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
  white-space: nowrap; flex-shrink: 0;
}
.dg-tab-btn.active { color: var(--navy); border-bottom-color: var(--navy); background: var(--white); }
.dg-tab-btn:hover { color: var(--navy); }
.dg-tab-panel { display: none; padding: 16px; }
.dg-tab-panel.active { display: block; }

/* ============================================================
   MOBILE FILTER DRAWER (shop page)
   ============================================================ */
.dg-filter-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 199; opacity: 0; pointer-events: none; transition: opacity .25s;
}
.dg-filter-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.dg-filter-drawer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--white);
  z-index: 200;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.dg-filter-drawer.open { transform: translateY(0); }
.dg-filter-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dg-filter-drawer-head h3 { font-size: 15px; }
.dg-filter-drawer-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg);
}
.dg-filter-drawer-body { flex: 1; overflow-y: auto; padding: 16px; }
.dg-filter-drawer-foot {
  padding: 12px 16px; border-top: 1px solid var(--border); flex-shrink: 0;
  display: flex; gap: 10px;
}
.dg-filter-apply {
  flex: 1; padding: 12px; background: var(--navy); color: var(--white);
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; text-align: center;
}
.dg-filter-clear {
  padding: 12px 16px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--slate);
}

/* ============================================================
   SHOP PAGE — mobile layout
   ============================================================ */
.dg-shop-layout { display: flex; flex-direction: column; gap: 0; }
.dg-shop-main { flex: 1; min-width: 0; padding: 14px 16px; }
.dg-cat-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.dg-cat-chips::-webkit-scrollbar { display: none; }
.dg-cat-chip {
  padding: 5px 13px; border: 1.5px solid var(--border); border-radius: 20px;
  font-size: 12px; font-weight: 600; color: var(--slate);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.dg-cat-chip:hover, .dg-cat-chip.active { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* Shop toolbar — mobile */
.dg-shop-toolbar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.dg-shop-filter-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; color: var(--ink);
  flex-shrink: 0;
}
.dg-shop-search {
  flex: 1; display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; background: var(--white);
}
.dg-shop-search input { flex: 1; border: none; outline: none; font-size: 14px; background: transparent; }
.woocommerce-ordering select {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 13px; font-weight: 600;
  color: var(--ink); outline: none; background: var(--white);
}
.dg-shop-count { font-size: 11.5px; color: var(--muted); margin-bottom: 12px; }

/* ============================================================
   NEWSLETTER BAR
   ============================================================ */
.dg-newsletter { background: var(--navy); padding: 24px 0; }
.dg-newsletter-inner { display: flex; flex-direction: column; gap: 16px; }
.dg-newsletter-text { }
.dg-newsletter-text h3 { color: var(--white); font-size: 15px; margin-bottom: 4px; display: flex; align-items: center; gap: 7px; }
.dg-newsletter-text p { color: rgba(255,255,255,.6); font-size: 12px; margin: 0; }
.dg-newsletter-form { display: flex; gap: 0; width: 100%; }
.dg-newsletter-form input {
  flex: 1; border: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 12px 14px; font-size: 14px; outline: none;
}
.dg-newsletter-form button {
  background: var(--teal); color: var(--white);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 18px; font-size: 13px; font-weight: 700;
  transition: opacity .15s; white-space: nowrap;
}
.dg-newsletter-form button:hover { opacity: .9; }

/* ============================================================
   FOOTER — mobile-first
   ============================================================ */
.dg-footer { background: var(--navy-deep); padding: 24px 0 12px; }
.dg-footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.dg-footer-brand { grid-column: 1 / -1; }
.dg-footer-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dg-footer-logo-mark {
  width: 28px; height: 28px; background: var(--teal); border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 10px; font-weight: 800; color: var(--white);
}
.dg-footer-logo strong { font-family: var(--font-head); font-size: 14px; font-weight: 800; color: var(--white); }
.dg-footer-logo strong span { color: var(--teal); }
.dg-footer-desc { font-size: 11px; color: rgba(255,255,255,.45); line-height: 1.6; margin-bottom: 8px; }
.dg-footer-contact-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,.5); margin-bottom: 4px; }
.dg-footer-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.dg-footer-badge {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px; padding: 2px 7px;
  font-size: 9.5px; color: rgba(255,255,255,.55);
}
.dg-footer-col-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: rgba(255,255,255,.4); margin-bottom: 8px;
  /* Accordion on mobile */
  cursor: pointer; padding: 8px 0; margin-bottom: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
}
.dg-footer-col-title::after {
  content: '+'; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%); font-size: 14px; color: rgba(255,255,255,.4);
}
.dg-footer-col.open .dg-footer-col-title::after { content: '−'; }
.dg-footer-col ul { display: none; padding: 8px 0 4px; }
.dg-footer-col.open ul { display: block; }
.dg-footer-col ul li { margin-bottom: 5px; }
.dg-footer-col ul li a { font-size: 11.5px; color: rgba(255,255,255,.55); transition: color .15s; }
.dg-footer-col ul li a:hover { color: var(--white); }
.dg-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.dg-footer-bottom p { font-size: 10px; color: rgba(255,255,255,.35); margin: 0; }
.dg-footer-pay { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.dg-pay-badge {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px; padding: 2px 7px;
  font-size: 10px; font-weight: 600; color: rgba(255,255,255,.6);
}
.dg-footer-ships { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.dg-ship-badge {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px; padding: 2px 5px;
  font-size: 9.5px; font-weight: 600; color: rgba(255,255,255,.55);
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.dg-about-wrap { padding: 20px 16px 80px; display: flex; flex-direction: column; gap: 16px; }
.dg-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
}
.dg-steps-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dg-step {
  display: flex; gap: 12px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px;
}
.dg-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-family: var(--font-head); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dg-step h4 { font-size: 13px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.dg-step p { font-size: 12px; color: var(--slate); margin: 0; }
.dg-compliance-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.dg-compliance-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--navy); }

/* ============================================================
   REVIEWS PAGE
   ============================================================ */
.dg-reviews-page-hero { background: linear-gradient(135deg, var(--navy-deep), var(--navy)); padding: 36px 0 28px; text-align: center; }
.dg-reviews-page-hero h1 { color: var(--white); margin-bottom: 6px; }
.dg-reviews-page-hero > .container > p { color: rgba(255,255,255,.65); font-size: 13px; margin: 0 auto 20px; }
.dg-reviews-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 680px; margin: 0 auto; }
.dg-review-stat {
  background: rgba(255,255,255,.1); border-radius: var(--radius-md);
  padding: 12px; text-align: center;
}
.dg-review-stat-val { font-family: var(--font-head); font-size: 20px; font-weight: 800; color: var(--white); }
.dg-review-stat-label { font-size: 10px; color: rgba(255,255,255,.55); margin-top: 2px; }
.dg-reviews-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
.dg-review-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px; transition: box-shadow .2s;
}
.dg-review-card:hover { box-shadow: var(--shadow-md); }
.dg-review-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dg-review-author { display: flex; align-items: center; gap: 9px; }
.dg-review-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg2); color: var(--navy);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.dg-review-name { font-size: 12.5px; font-weight: 700; }
.dg-review-country { font-size: 10.5px; color: var(--muted); }
.dg-review-verified { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: var(--success-100,#DCFCE7); color: var(--success-700,#166534); display: flex; align-items: center; gap: 3px; }
.dg-review-text { font-size: 12px; line-height: 1.6; color: var(--slate); font-style: italic; margin-bottom: 10px; }
.dg-review-footer { display: flex; align-items: center; justify-content: space-between; }
.dg-review-product { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: var(--bg2); color: var(--navy); }
.dg-review-date { font-size: 10.5px; color: var(--muted); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.dg-contact-wrap { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 20px 16px 80px; }
.dg-contact-form { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.dg-contact-form h2 { margin-bottom: 16px; }
.dg-form-row { margin-bottom: 12px; }
.dg-form-row label { display: block; font-size: 12px; font-weight: 600; color: var(--slate); margin-bottom: 5px; }
.dg-form-row input, .dg-form-row select, .dg-form-row textarea {
  width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 14px; outline: none; transition: border-color .15s;
  font-family: var(--font-body);
}
.dg-form-row input:focus, .dg-form-row select:focus, .dg-form-row textarea:focus { border-color: var(--navy); }
.dg-form-row textarea { resize: vertical; min-height: 100px; }
.dg-form-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dg-contact-sidebar { display: flex; flex-direction: column; gap: 12px; }
.dg-contact-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px; text-decoration: none; display: block; transition: box-shadow .2s;
}
.dg-contact-card:hover { box-shadow: var(--shadow-md); }
.dg-contact-card-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.dg-contact-card-title { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.dg-contact-card-val { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 2px; }
.dg-contact-card-sub { font-size: 11px; color: var(--muted); }
.dg-contact-dark { background: linear-gradient(135deg, var(--navy), var(--navy-mid)); border-radius: var(--radius-md); padding: 16px; }

/* ============================================================
   BLOG ARCHIVE PAGE
   ============================================================ */
.dg-blog-archive-wrap { padding: 16px 16px 80px; }
.dg-blog-archive-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
.dg-blog-archive-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow .2s; }
.dg-blog-archive-card:hover { box-shadow: var(--shadow-md); }
.dg-blog-archive-img { height: 160px; background: var(--bg2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dg-blog-archive-img img { width: 100%; height: 100%; object-fit: cover; }
.dg-blog-archive-body { padding: 14px; }
.dg-blog-topics { margin-top: 20px; }
.dg-blog-topics h3 { font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.dg-blog-topics h3::before { content: ''; width: 3px; height: 18px; background: var(--navy); border-radius: 2px; display: block; }
.dg-topics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dg-topic-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; display: flex; align-items: center; gap: 8px; transition: box-shadow .15s; }
.dg-topic-card:hover { box-shadow: var(--shadow-md); }
.dg-topic-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dg-topic-name { font-size: 12.5px; font-weight: 600; }

/* ============================================================
   CART & CHECKOUT
   ============================================================ */
.dg-cart-page { padding: 16px 0 80px; }
.woocommerce-cart-form table { width: 100%; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); border-collapse: separate; border-spacing: 0; }
.woocommerce-cart-form table th { background: #F8FAFF; padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate); border-bottom: 1px solid var(--border); }
.woocommerce-cart-form table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.woocommerce-cart-form table tr:last-child td { border-bottom: none; }
.woocommerce table.shop_table .product-name a { font-weight: 600; color: var(--ink); font-size: 13px; }
.woocommerce .quantity input { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; width: 60px; text-align: center; font-size: 14px; }
.woocommerce .cart_totals { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.woocommerce .cart_totals h2 { font-size: 15px; margin-bottom: 14px; }
.woocommerce-page .wc-proceed-to-checkout .checkout-button { background: var(--navy); border-radius: var(--radius-sm); padding: 13px 20px; font-size: 14px; font-weight: 700; width: 100%; }
.woocommerce-page .wc-proceed-to-checkout .checkout-button:hover { background: var(--navy-mid); }
.woocommerce form .form-row label { font-size: 12px; font-weight: 600; color: var(--slate); margin-bottom: 5px; display: block; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; width: 100%; outline: none; transition: border-color .15s; }
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row select:focus { border-color: var(--navy); }
#place_order { background: var(--navy); border-radius: var(--radius-sm); padding: 14px 24px; font-size: 15px; font-weight: 700; width: 100%; }
#place_order:hover { background: var(--navy-mid); }
.woocommerce-checkout #payment { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--border); margin-bottom: 14px; padding-bottom: 14px; }

/* ============================================================
   WooCommerce overrides
   ============================================================ */
.woocommerce a.button, .woocommerce button.button { background: var(--navy); color: var(--white); border-radius: var(--radius-sm); font-weight: 600; padding: 10px 18px; transition: opacity .15s; }
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--navy-mid); color: var(--white); }
.woocommerce a.button.alt { background: var(--teal); }
.woocommerce span.onsale { background: var(--red); border-radius: 4px; font-size: 10px; font-weight: 700; }
.woocommerce-message { background: #DCFCE7; border-color: #86EFAC; color: #166534; border-radius: var(--radius-sm); }
.woocommerce-error { background: #FFDEE6; border-color: #FCA5A5; color: #8B0000; border-radius: var(--radius-sm); }
.woocommerce-info { background: var(--bg2); border-color: var(--border-mid); color: var(--navy); border-radius: var(--radius-sm); }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span { border-radius: 6px; }
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--navy); color: var(--white); }

/* ============================================================
   MY ACCOUNT PAGE
   ============================================================ */
.dg-account-page { padding: 0; }
.woocommerce-account .woocommerce { display: block; }
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 8px 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--ink);
  transition: background .15s, color .15s; border-left: 3px solid transparent;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--bg); color: var(--navy); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--bg2); color: var(--navy); font-weight: 600; border-left-color: var(--navy); }
.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; min-height: 200px;
}
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 { font-size: 16px; margin-bottom: 14px; }
.woocommerce-account .woocommerce-MyAccount-content p { color: var(--slate); font-size: 13px; line-height: 1.6; }
.woocommerce-account .woocommerce-orders-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.woocommerce-account .woocommerce-orders-table th { background: var(--bg); padding: 9px 12px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--border); }
.woocommerce-account .woocommerce-orders-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.woocommerce-account .woocommerce-orders-table tr:last-child td { border-bottom: none; }

/* ============================================================
   404 / SEARCH / EMPTY
   ============================================================ */
.dg-404 { padding: 60px 20px; text-align: center; }
.dg-404-code { font-family: var(--font-head); font-size: 64px; font-weight: 800; color: var(--border); line-height: 1; margin-bottom: 12px; }
.dg-404 h2 { margin-bottom: 10px; }
.dg-404 p { color: var(--slate); margin-bottom: 24px; }
/* UI-04 fix: was style="display:flex;gap:12px;…" inline — now a class */
.dg-404-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.dg-404-actions .dg-btn-primary { display: inline-flex; }
/* UX-03 fix: search box on 404 page */
.dg-404-search { max-width: 480px; margin: 0 auto 24px; }
/* UX-04: Back-to-top button */
.dg-back-to-top { position: fixed; bottom: 24px; right: 20px; z-index: 900; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.18); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; transform: translateY(8px); }
.dg-back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.dg-back-to-top:hover { background: var(--teal); }
@media (max-width: 767px) { .dg-back-to-top { bottom: 72px; } }
.dg-empty { text-align: center; padding: 56px 24px 64px; }
.dg-empty-icon { width: 68px; height: 68px; border-radius: 50%; background: var(--bg2); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.dg-empty h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.dg-empty p { color: var(--slate); font-size: 13.5px; line-height: 1.6; max-width: 420px; margin: 0 auto 6px; }
.dg-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ============================================================
   CART DRAWER ITEMS
   ============================================================ */
.dg-remove-item { color: var(--muted); padding: 4px; transition: color .15s; flex-shrink: 0; }
.dg-remove-item:hover { color: var(--red); }

/* ============================================================
   LIVE SEARCH DROPDOWN
   ============================================================ */
.dg-search-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  z-index: 999; display: none; overflow: hidden;
  max-height: 400px; overflow-y: auto;
}
.dg-search-dropdown.open { display: block; }
.dg-sd-loading { padding: 14px 16px; font-size: 13px; color: var(--muted); }
.dg-sd-section { padding: 7px 14px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.dg-sd-result {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; font-size: 13px; color: var(--ink);
  transition: background .12s; text-decoration: none;
}
.dg-sd-result:hover,
.dg-sd-result.focused { background: var(--bg); outline: none; }
.dg-sd-result.focused { box-shadow: inset 3px 0 0 var(--navy, var(--navy)); }
.dg-sd-cat { font-weight: 600; color: var(--navy); }
.dg-sd-cat-count { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: auto; }
.dg-sd-pinfo { flex: 1; min-width: 0; }
.dg-sd-pname { display: block; font-weight: 600; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-sd-pmeta { display: block; font-size: 11.5px; color: var(--muted); }
.dg-sd-oos { color: var(--red); font-weight: 600; }
.dg-sd-ins { display:inline-block; font-size:10px; font-weight:700; color:#166534; background:#DCFCE7; border-radius:3px; padding:1px 5px; margin-left:4px; vertical-align:middle; }
/* Composition / active ingredient badge in search results */
.dg-sd-composition { display: block; font-size: 10.5px; color: var(--navy); opacity: .75; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
/* Composition taxonomy entry in search dropdown */
.dg-sd-comp { background: var(--bg); border-left: 3px solid var(--navy); }
.dg-sd-comp:hover { background: var(--bg2); }
.dg-sd-empty { padding: 16px; font-size: 13px; color: var(--slate); }
.dg-sd-correction { padding: 8px 14px; background: #FFFBEB; font-size: 12px; color: var(--amber); display:flex; align-items:center; gap:6px; }
.dg-sd-viewall { display: block; padding: 10px 14px; font-size: 12.5px; font-weight: 700; color: var(--navy); border-top: 1px solid var(--border); background: var(--bg); }
.dg-sd-no-img { width: 40px; height: 40px; background: var(--bg2); border-radius: 6px; flex-shrink: 0; }

/* ============================================================
   UTILITY
   ============================================================ */
.mt-0 { margin-top: 0; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.hidden { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ============================================================
   PRODUCT CONTENT (description CSS)
   ============================================================ */
/* product-content.css loaded separately if present */

/* ============================================================
   ═══════════════════════════════════════════════════════════
   BREAKPOINTS — MOBILE FIRST — min-width
   ═══════════════════════════════════════════════════════════
   ============================================================ */

/* ── 480px — small phones landscape ── */
@media (min-width: 480px) {
  .dg-products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dg-products-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .dg-recent-grid { grid-template-columns: repeat(2, 1fr); }
  .dg-recent-card { flex-direction: column; }
  .dg-recent-card-img { width: 100%; aspect-ratio: 1/1; height: auto; }
  .dg-hero-inner { flex-direction: row; align-items: center; }
  .dg-hero-card { align-self: center; }
}

/* ── 600px — large phones / small tablets ── */
@media (min-width: 600px) {
  .container { padding: 0 20px; }
  .container-md { padding: 0 20px; }
  .dg-ribbon-email { display: block; }
  .dg-products-grid.cols-4 { grid-template-columns: repeat(3, 1fr); }
  .dg-testimonials-row { grid-template-columns: repeat(2, 1fr); }
  .dg-blog-grid { grid-template-columns: repeat(2, 1fr); }
  .dg-features-grid { grid-template-columns: repeat(2, 1fr); }
  .dg-feature-card { flex-direction: column; }
  .dg-compliance-grid { grid-template-columns: 1fr 1fr; }
  .dg-steps-grid { grid-template-columns: 1fr 1fr; }
  .dg-reviews-stats { grid-template-columns: repeat(4, 1fr); }
  .dg-reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .dg-blog-archive-grid { grid-template-columns: repeat(2, 1fr); }
  .dg-topics-grid { grid-template-columns: repeat(3, 1fr); }
  .dg-form-grid { grid-template-columns: 1fr 1fr; }
}

/* ── 768px — tablets ── */
@media (min-width: 768px) {
  /* Hide bottom nav on tablets+ */
  .dg-bottom-nav { display: none; }
  body { padding-bottom: 0; }

  /* Hide mobile sticky search on tablet/desktop — desktop uses inline search */
  .dg-mobile-search-bar { display: none !important; position: relative; top: auto; }

  /* Show desktop nav */
  .dg-nav {
    display: block;
    background: var(--navy);
  }
  .dg-nav .container { display: flex; }
  .dg-nav ul { display: flex; list-style: none; }
  .dg-nav ul li a {
    display: block; padding: 12px 16px;
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,.8);
    transition: color .15s; white-space: nowrap;
  }
  .dg-nav ul li a:hover,
  .dg-nav ul li.current-menu-item a,
  .dg-nav ul li.current_page_item a { color: var(--white); border-bottom: 2px solid var(--teal); }

  /* Show desktop search in header */
  .dg-hamburger { display: none; }
  .dg-header-search-icon { display: none; }
  .dg-search-wrap {
    display: flex;
    flex: 1;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: visible; position: relative;
    max-width: 480px; transition: border-color .15s;
  }
  .dg-search-wrap:focus-within { border-color: var(--navy); }
  .dg-search-wrap input {
    flex: 1; border: none; padding: 9px 14px;
    font-size: 13px; outline: none; color: var(--ink); background: transparent;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  }
  .dg-search-wrap button {
    background: var(--navy); color: var(--white);
    padding: 9px 18px; font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }
  .dg-search-wrap button:hover { background: var(--navy-mid); }

  /* Show account btn */
  .dg-btn-ghost {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--ink);
    transition: border-color .15s;
  }
  .dg-btn-ghost:hover { border-color: var(--navy); color: var(--navy); }
  .dg-btn-solid {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 16px; background: var(--navy);
    border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; color: var(--white);
  }
  .dg-btn-solid:hover { background: var(--navy-mid); color: var(--white); }

  /* Header height */
  .dg-header { min-height: var(--header-h-desktop); }
  .dg-header-inner { height: var(--header-h-desktop); }

  /* Announcement bar */
  .dg-ribbon-item span { font-size: 11.5px; }

  /* Homepage layout */
  .dg-home-layout { flex-direction: row; }
  .dg-sidebar {
    display: block;
    width: var(--sidebar-w); flex-shrink: 0;
    background: var(--white); border-right: 1px solid var(--border);
    min-height: calc(100vh - 120px); padding: 16px 0;
    position: sticky; top: 56px; align-self: flex-start;
  }

  /* Shop layout */
  .dg-shop-layout { flex-direction: row; }
  .dg-shop-sidebar {
    display: block;
    width: var(--sidebar-w); flex-shrink: 0;
    background: var(--white); border-right: 1px solid var(--border);
    min-height: calc(100vh - 120px); padding: 16px 0;
    position: sticky; top: 56px; align-self: flex-start;
  }
  .dg-shop-filter-btn { display: none; }

  /* Single product */
  .dg-single-wrap { flex-direction: row; }
  .dg-product-single-top { display: grid; grid-template-columns: 260px 1fr; gap: 24px; margin-bottom: 24px; }
  .dg-product-gallery { padding: 20px 0 0 0; }
  .dg-product-info { padding: 20px 20px 20px 0; }
  .dg-product-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Counter bar */
  .dg-counter-inner { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
  .dg-counter-main { align-items: flex-start; text-align: left; }
  .dg-orders-counter { display: block; margin-left: auto; }

  /* Product grid */
  .dg-products-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .dg-products-grid.cols-4 { grid-template-columns: repeat(3, 1fr); }

  /* Recent cards */
  .dg-recent-grid { grid-template-columns: repeat(3, 1fr); }

  /* Footer */
  .dg-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 20px; }
  .dg-footer-brand { grid-column: auto; }
  .dg-footer-desc { display: block; }
  .dg-footer-contact-item { display: flex; }
  .dg-footer-col-title { cursor: default; padding: 0; border-bottom: none; margin-bottom: 8px; }
  .dg-footer-col-title::after { display: none; }
  .dg-footer-col ul { display: block; padding: 0; }
  .dg-footer-bottom { flex-direction: row; }

  /* Newsletter */
  .dg-newsletter-inner { flex-direction: row; align-items: center; }
  .dg-newsletter-form { max-width: 380px; flex: 1; }

  /* Hero */
  .dg-hero { padding: 36px 24px; }
  .dg-hero-inner { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; flex-direction: unset; }
  .dg-hero-card { align-self: center; }

  /* Trust bar: grid */
  .dg-trust-bar { overflow-x: unset; }
  .dg-trust-bar-inner { display: grid; grid-template-columns: repeat(3, 1fr); min-width: unset; }

  /* Account */
  /* .woocommerce-account .woocommerce layout is controlled in the account section below */

  /* About */
  .dg-about-wrap { max-width: 860px; margin: 0 auto; padding: 36px 20px 64px; }
  .dg-steps-grid { grid-template-columns: 1fr 1fr; }
  .dg-compliance-grid { grid-template-columns: 1fr 1fr; }
  .dg-contact-wrap { grid-template-columns: 1fr 280px; max-width: 860px; margin: 0 auto; padding: 36px 20px 64px; }
  .dg-contact-sidebar { order: unset; }
  .dg-features-grid { grid-template-columns: repeat(3, 1fr); }
  .dg-feature-card { flex-direction: column; align-items: flex-start; }

  /* Reviews */
  .dg-reviews-grid { grid-template-columns: repeat(3, 1fr); }
  .dg-blog-archive-wrap { max-width: 900px; margin: 0 auto; padding: 36px 20px 64px; }
  .dg-testimonials-row { grid-template-columns: repeat(2, 1fr); }

  /* Tabs */
  .dg-tabs { border-radius: var(--radius-md); border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
  .dg-tab-panel { padding: 20px; }
}

/* ── 1024px — small desktops ── */
@media (min-width: 1024px) {
  .dg-products-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .dg-search-wrap { max-width: 540px; }
  .dg-right-sidebar {
    display: block;
    width: 200px; flex-shrink: 0; padding: 16px;
    background: var(--white); border-left: 1px solid var(--border);
    position: sticky; top: 56px; align-self: flex-start;
  }
  .dg-blog-grid { grid-template-columns: repeat(2, 1fr); }
  .dg-product-single-top { grid-template-columns: 300px 1fr; gap: 28px; }
  .dg-product-gallery { padding: 20px 0 0 0; }
  .dg-product-info { padding: 20px 20px 20px 0; }
}

/* ── 1280px — full desktop ── */
@media (min-width: 1280px) {
  .dg-products-grid { grid-template-columns: repeat(3, 1fr); }
  .dg-recent-grid { grid-template-columns: repeat(3, 1fr); }
  .dg-blog-archive-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   SEARCH WRAP — relative positioning for dropdown
   ============================================================ */
.dg-search-wrap { position: relative; }

/* ============================================================
   MISC WC ACCOUNT STYLES
   ============================================================ */
.dg-account-reorder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
@media (max-width: 359px) {
  .dg-account-reorder-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Touch tap improvements ── */
@media (hover: none) {
  .dg-product-card:hover { transform: none; box-shadow: none; }
  .dg-btn-cart:hover { background: #FFD814; color: #0F1111; border-color: #C7A600; }
}


/* ─── ACCOUNT BTN DROPDOWN ─── */
.dg-account-btn {
  position: relative;
}
.dg-account-btn:hover { border-color: var(--navy); color: var(--navy); }

/* dg-qty-minus/plus: see unified .dg-qty-control block above */

/* ============================================================
   BUG FIXES v7.0
   ============================================================ */

/* ── FIX 1: PRODUCT DESCRIPTION — Read More toggle ── */
.dg-prose-clamped {
  max-height: 280px;
  overflow: hidden;
  position: relative;
  transition: max-height .4s ease;
}
.dg-prose-clamped::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  pointer-events: none;
}
.dg-prose-clamped.expanded {
  max-height: 9999px;
}
.dg-prose-clamped.expanded::after { display: none; }

.dg-read-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid var(--navy);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  background: transparent;
  cursor: pointer;
  transition: all .15s;
}
.dg-read-more-btn:hover {
  background: var(--navy);
  color: var(--white);
}
.dg-read-more-btn svg {
  transition: transform .25s;
}
.dg-read-more-btn.open svg {
  transform: rotate(180deg);
}

/* ── FIX 2: CART DRAWER — Payment icons row ── */
.dg-cart-pay-icons {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.dg-cart-pay-icon {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--slate);
}

/* ── FIX 3: CONTACT PAGE — Honeypot field hidden, Why Choose Us text readable ── */
.dg-cf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.dg-contact-dark h3 {
  color: var(--white) !important;
  font-size: 14px;
  margin-bottom: 10px;
}
.dg-contact-dark {
  color: rgba(255,255,255,.82);
}

/* ── FIX 5: HERO/COUNTER COLOR DIFFERENTIATION ── */
/* Counter bar = navy-deep background with teal accent on the number */
.dg-counter-num {
  color: var(--teal) !important; /* bright teal so it stands out vs white hero */
}
/* Note: .dg-hero border-bottom consolidated below in the v9.2.2 override block */
.dg-counter-bar {
  background: #0D1640; /* slightly darker than hero navy-deep for clear separation */
}

/* ── FIX 6: SIDEBAR "View All Categories" button — consistent with sitewide navy ── */
.dg-sidebar-view-all-cats-btn,
.dg-sidebar-view-all {
  background: var(--navy) !important;
  color: var(--white) !important;
  border-color: var(--navy) !important;
  border-radius: var(--radius-sm) !important;
}
.dg-sidebar-view-all-cats-btn:hover,
.dg-sidebar-view-all:hover {
  background: var(--navy-mid) !important;
  color: var(--white) !important;
}

/* ── FIX 7: MOBILE SEARCH — always visible below header (not icon-toggle) ── */
/* On mobile: search bar always visible and sticky below header */
@media (max-width: 767px) {
  .dg-header-search-icon { display: none !important; } /* toggle icon not needed */
  .dg-mobile-search-bar {
    display: block !important; /* always show on mobile */
  }
  .dg-mobile-search-bar:not(.open) {
    display: block !important; /* open class not required for visibility */
  }
}

/* ── FIX: CONTACT PAGE — stray box at top (honeypot input) ── */
.dg-cf-hp,
.dg-cf-hp input {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  display: block !important; /* not none — bots need to see it */
}

/* Fix .dg-contact-form position context for honeypot absolute positioning */
.dg-contact-form {
  position: relative;
}

/* ── DESKTOP FIX: account layout side-by-side ── */
@media (min-width: 768px) {
  .dg-account-wrap {
    flex-direction: row;
    align-items: flex-start;
    padding: 24px 20px 64px;
    gap: 24px;
  }
  .dg-account-sidebar {
    width: 240px;
    flex-shrink: 0;
    position: sticky;
    top: 80px;
    align-self: flex-start;
  }
  .dg-account-main {
    flex: 1;
    min-width: 0;
  }
  .dg-recent-order-row {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .dg-recent-order-meta { flex-shrink: 0; }
  .dg-recent-order-items { flex: 1; min-width: 0; }
}

/* ================================================================
   COMPREHENSIVE UI/UX FIX PASS v7.1
   ================================================================ */

/* ── CART DRAWER: Payment chips (functions.php uses .dg-pay-chip) ── */
/* Payment chips - robust styling */
.dg-pay-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--slate);
  letter-spacing: .02em;
  transition: border-color .12s;
}
.dg-pay-chip:hover { border-color: var(--navy-mid); }



































































.dg-cart-discount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  color: var(--slate);
}

/* ── COUNTER BAR: Complete redesign — not just dark navy on dark navy ── */
.dg-counter-bar {
  background: linear-gradient(135deg, #0B1535 0%, #0f1f52 50%, #0B1535 100%) !important;
  border-bottom: 2px solid rgba(0, 181, 204, 0.25);
  position: relative;
  overflow: hidden;
}
.dg-counter-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(0,181,204,.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 50%, rgba(26,43,107,.15) 0%, transparent 60%);
  pointer-events: none;
}
/* Big savings number — teal so it reads clearly */
/* .dg-counter-num / .dg-savings-live colour consolidated below (v85 override block) */
.dg-counter-num,
.dg-savings-live {
  font-size: clamp(26px, 6vw, 38px) !important;
  font-weight: 900 !important;
  letter-spacing: -.02em;
  /* color intentionally omitted here — set once in v85 override block */
}
.dg-counter-sub {
  font-size: 12px !important;
  color: rgba(255,255,255,.65) !important;
  margin-top: 2px;
}
.dg-counter-live {
  font-size: 11px !important;
  color: var(--green) !important;
  font-weight: 600 !important;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: 20px;
  padding: 2px 10px;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
}
/* Stats numbers — white, clearly readable */
.dg-stat-num {
  color: var(--white) !important;
  font-size: clamp(18px, 4vw, 24px) !important;
}
.dg-stat-label { color: rgba(255,255,255,.5) !important; }
.dg-stats-group {
  border-top: 1px solid rgba(255,255,255,.08) !important;
  gap: 20px !important;
}
/* Odometer digits — more legible */
.dg-digit {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: var(--white) !important;
}

/* ── HERO: consolidated into primary .dg-hero definition above ── */
/* Subtle divider between counter and hero */
.dg-counter-bar + .dg-home-layout .dg-main-content > .dg-hero,
.dg-home-layout .dg-main-content .dg-hero {
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ── HEADER: cleaner, more premium ── */
.dg-header {
  box-shadow: 0 1px 0 var(--border);
  background: var(--white) !important;
}
/* Ribbon: slightly lighter navy + bottom border in this section of the stylesheet */
/* Ribbon retains amber announcement gradient — no override here */
.dg-ribbon {
  border-bottom: 1px solid rgba(0,0,0,.1);
}
.dg-ribbon-item span { color: #fff !important; font-size: 11.5px !important; font-weight: 600 !important; }

/* Nav bar — teal underline on active, not just hover */
.dg-nav ul li.current_page_item > a,
.dg-nav ul li.current-menu-item > a {
  color: var(--white) !important;
  border-bottom: 2px solid var(--teal) !important;
}

/* ── BOTTOM NAV: active item teal, not just navy ── */
.dg-bottom-nav-item.active {
  color: var(--teal) !important;
}
.dg-bottom-nav-item.active svg {
  stroke: var(--teal) !important;
}

/* ── PRODUCT CARDS: slightly elevated on hover ── */
.dg-product-card:hover {
  box-shadow: 0 6px 20px rgba(26,43,107,.12) !important;
  transform: translateY(-2px) !important;
  border-color: var(--border-mid) !important;
}

/* ── SECTION TITLES: bolder left bar ── */
.dg-section-title::before {
  width: 4px !important;
  background: var(--teal) !important;
}

/* ── TRUST BAR: cleaner icons ── */
.dg-trust-icon { background: var(--bg2) !important; }

/* cart overrides cleaned up — canonical rules in base section above */

/* ── MOBILE SEARCH bar polish ── */
.dg-mobile-search-bar form {
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.dg-mobile-search-bar input {
  font-size: 16px !important; /* must be ≥16px — iOS Safari zooms on focus if smaller */
  background: var(--bg) !important;
}
.dg-mobile-search-bar input:focus { background: var(--white) !important; }
.dg-mobile-search-bar button[type="submit"] {
  background: var(--navy) !important;
}

/* ── BREADCRUMB: more visible ── */
.dg-breadcrumb { background: var(--bg) !important; }
.dg-breadcrumb a { color: var(--navy) !important; font-weight: 600 !important; }

/* ── NEWSLETTER SECTION: ensure subscribe button is teal not muted ── */
.dg-newsletter-form button { background: var(--teal) !important; }
.dg-newsletter-form button:hover { background: #009eb8 !important; opacity: 1 !important; }

/* ── FOOTER: slightly warmer dark ── */
.dg-footer { background: #0D1535 !important; }
.dg-footer-col-title { color: rgba(255,255,255,.5) !important; }

/* ── SCROLLBAR: thin and branded ── */
* { scrollbar-width: thin; scrollbar-color: var(--border-mid) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ================================================================
   DRUGSGENERAL v8 — UI/UX IMPROVEMENT PATCHES
   ================================================================ */

/* ── 1. SAVINGS COUNTER BAR — redesigned from dark navy ── */
.dg-counter-bar {
  background: linear-gradient(135deg, #0A5F5F 0%, #0D7F7F 40%, #1A3A7A 100%) !important;
  position: relative;
  overflow: hidden;
}
.dg-counter-bar::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,.06) 0%, transparent 60%);
  pointer-events: none;
}
.dg-counter-num {
  font-size: 32px !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #1E3A5F !important;
  background-clip: unset !important;
  color: #1E3A5F !important;
}
.dg-counter-sub {
  color: rgba(255,255,255,.85) !important;
  font-size: 12.5px !important;
}
.dg-counter-live {
  color: #5EEAD4 !important;
  font-size: 11.5px !important;
  background: rgba(255,255,255,.1);
  padding: 3px 8px;
  border-radius: 20px;
  margin-top: 3px;
  display: inline-flex !important;
}
.dg-counter-live::before { display: none !important; /* suppressed — HTML span dot used instead */
  background: #5EEAD4 !important;
  box-shadow: 0 0 6px #5EEAD4;
}
.dg-stat-num {
  font-size: 22px !important;
}
.dg-stats-group {
  border-top-color: rgba(255,255,255,.15) !important;
  gap: 32px !important;
}

/* ── 2. RIBBON — faster on larger screens ── */
@media (min-width: 1024px) {
  .dg-ribbon-item { padding: 0 24px; }
  .dg-ribbon-item span { font-size: 11.5px !important; font-weight: 500 !important; }
  .dg-ribbon-track { animation-duration: 22s; }
}

/* ── 3. HEADER — Sign In single button (no Register clutter) ── */
.dg-signin-btn {
  min-width: 90px;
  justify-content: center;
  gap: 6px !important;
}

/* ── 4. CART COUNT BADGE — never ghost-show when empty ── */
.dg-cart-count:empty,
.dg-cart-count[style*="display:none"],
.dg-cart-count[style*="display: none"] {
  display: none !important;
}

/* ── 5. PAYMENT CHIPS — rock-solid rendering after AJAX ── */
/* dg-cart-pay-icons: see canonical definition above */
.dg-pay-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 11px !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 5px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--slate) !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
}

/* coupon block 2 removed — canonical above */

/* cart savings/empty overrides removed — canonical above */

/* ── 9. SEARCH — ensure dropdown always on top ── */
.dg-search-wrap {
  z-index: 200 !important;
}
.dg-search-dropdown {
  z-index: 9999 !important;
}

/* ── 10. HEADER — proper desktop layout with single auth btn ── */
@media (min-width: 768px) {
  .dg-header-actions {
    gap: 10px !important;
  }
}

/* ================================================================
   MY ACCOUNT — ADDRESS CARDS  (v8 patch)
   ================================================================ */

.dg-addresses-intro {
  font-size: 13px;
  color: var(--slate);
  margin-bottom: 20px;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--teal);
}

.dg-address-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .dg-address-cards { grid-template-columns: repeat(2, 1fr); }
}

.dg-address-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}

.dg-address-card:hover {
  border-color: var(--navy);
  box-shadow: 0 4px 16px rgba(26,43,107,.08);
}

/* Card head */
.dg-address-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.dg-address-card-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.dg-address-card--billing .dg-address-card-icon {
  background: #DBEAFE; color: #1E40AF;
}
.dg-address-card--shipping .dg-address-card-icon {
  background: var(--success-100,#DCFCE7); color: var(--success-700,#166534);
}

.dg-address-card-title {
  flex: 1;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

.dg-address-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  text-decoration: none;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}

.dg-address-edit-btn:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* Card body */
.dg-address-card-body {
  padding: 16px;
  flex: 1;
}

.dg-address-formatted {
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink);
}

.dg-address-empty {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 14px;
}

.dg-address-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .12s;
}
.dg-address-add-btn:hover { border-color: var(--teal); }

/* Card foot */
.dg-address-card-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--bg);
}

/* ── Also fix the WC default fallback (if template override doesn't load) ── */
.woocommerce-Addresses {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 16px !important;
}

.woocommerce-Address {
  background: var(--white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.woocommerce-Address-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  margin: 0 !important;
}

.woocommerce-Address-title h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--ink) !important;
}

.woocommerce-Address-title .edit {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  background: var(--white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  text-decoration: none !important;
}
.woocommerce-Address-title .edit:hover {
  background: var(--navy) !important;
  color: var(--white) !important;
}

.woocommerce-Address address {
  display: block !important;
  font-style: normal !important;
  font-size: 13.5px !important;
  line-height: 1.75 !important;
  color: var(--ink) !important;
  padding: 16px !important;
}

/* ── Account detail form styling ── */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm legend {
  font-weight: 700;
  font-size: 13px;
  padding: 0 8px;
  color: var(--navy);
}
.woocommerce-MyAccount-content .form-row {
  margin-bottom: 14px;
}
.woocommerce-MyAccount-content .form-row label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 5px;
}
.woocommerce-MyAccount-content .form-row input,
.woocommerce-MyAccount-content .form-row select {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s;
}
.woocommerce-MyAccount-content .form-row input:focus,
.woocommerce-MyAccount-content .form-row select:focus {
  border-color: var(--navy);
}
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button[type="submit"] {
  background: var(--navy) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 24px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .15s !important;
}
.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover {
  background: var(--navy-mid) !important;
}

/* ================================================================
   MY ACCOUNT — OTP LOGIN PAGE  (v8)
   ================================================================ */



/* ═══════════════════════════════════════════════════════════════
   DG LOGIN — Mobile-First Two-Column Layout v51
   Mobile: single column (form on top, trust below)
   Desktop ≥768px: left trust panel | right OTP form
   ═══════════════════════════════════════════════════════════════ */

/* ── Page-level: break out of WC account content box on login page ── */
body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Outer wrap ── */
.dg-otp-login-wrap {
  width: 100%;
  padding: 16px 0 40px;
  box-sizing: border-box;
}

/* ── Card shell ── */
.dg-login-split {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #C7E6EC;
  box-shadow: 0 4px 24px rgba(0,130,150,.08);
}

/* ═══ LEFT — Trust Panel ═══ */
/* Primary brand colour: --navy = var(--primary-500) */
.dg-login-left {
  background: var(--hero-grad, linear-gradient(155deg, var(--primary-800,#005F6B) 0%, var(--primary-600,#008296) 60%, var(--primary-400,#00A0B4) 100%));
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  order: 2;
  position: relative;
  overflow: hidden;
}

/* Subtle background texture */
.dg-login-left::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  pointer-events: none;
}
.dg-login-left::after {
  content: '';
  position: absolute;
  bottom: 40px; left: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,.03);
  pointer-events: none;
}

/* Brand */
.dg-ll-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}
.dg-ll-brand-icon {
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,0.18);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.15);
}
.dg-ll-brand-name {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.dg-ll-brand-tag {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 2px;
}

.dg-ll-headline {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 8px;
  letter-spacing: -.3px;
  position: relative;
  z-index: 1;
}
.dg-ll-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.68);
  line-height: 1.6;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}

/* Pillars */
.dg-ll-pillars {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}
.dg-ll-pillar {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.dg-ll-picon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: rgba(255,255,255,0.13);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal,#FFB800);
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1);
}
.dg-ll-ptitle {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1px;
  line-height: 1.3;
}
.dg-ll-pdesc {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}

/* Trustpilot badge */
.dg-ll-tp {
  background: rgba(0,0,0,0.18);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  position: relative;
  z-index: 1;
}
.dg-ll-tp-left { flex-shrink: 0; }
.dg-ll-tp-wordmark {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: -.01em;
}
.dg-ll-tp-stars { display: flex; gap: 2px; }
.dg-ll-tp-star {
  width: 15px;
  height: 15px;
  background: #00B67A;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dg-ll-tp-div {
  width: 1px;
  height: 34px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.dg-ll-tp-score { font-size: 19px; font-weight: 800; color: #fff; line-height: 1; }
.dg-ll-tp-label { font-size: 11px; color: rgba(255,255,255,0.65); margin-top: 3px; }

/* ═══ RIGHT — OTP Form ═══ */
.dg-login-right {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  order: 1;
  background: #fff;
}

/* Steps */
.dg-otp-step { display: flex; flex-direction: column; }

/* Eyebrow */
.dg-lr-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy,#008296);
  margin-bottom: 6px;
}

/* Title */
.dg-lr-title {
  font-size: 22px;
  font-weight: 800;
  color: #0F1111;
  margin-bottom: 6px;
  line-height: 1.2;
}

/* Sub */
.dg-lr-sub {
  font-size: 13px;
  color: #565959;
  line-height: 1.55;
  margin-bottom: 20px;
}

/* Label */
.dg-lr-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #565959;
  margin-bottom: 7px;
}

/* Email + send */
.dg-otp-input-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.dg-lr-input {
  width: 100%;
  height: 48px;
  border: 1.5px solid #D5D9D9;
  border-radius: 9px;
  padding: 0 14px;
  font-size: 15px;
  font-family: inherit;
  color: #0F1111;
  background: #F7F8F8;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.dg-lr-input:focus {
  border-color: var(--navy,#008296);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0,130,150,.12);
}
.dg-lr-input::placeholder { color: #ADBAC5; }

.dg-lr-send-btn {
  width: 100%;
  height: 48px;
  background: var(--teal,#FFB800);
  color: #0F1111;
  border: none;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, box-shadow .15s;
  flex-shrink: 0;
  letter-spacing: -.01em;
}
.dg-lr-send-btn:hover { background: #F0A800; box-shadow: 0 2px 8px rgba(255,184,0,.3); }
.dg-lr-send-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Code note */
.dg-lr-codenote {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #8F9191;
  margin-bottom: 18px;
}
.dg-lr-codenote svg { flex-shrink: 0; color: var(--navy,#008296); }

/* Trust chips */
.dg-lr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-top: 16px;
  border-top: 1px solid #EAEDED;
  margin-bottom: 12px;
}
.dg-lr-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #565959;
}
.dg-lr-chip svg { flex-shrink: 0; color: var(--navy,#008296); }

/* New user note */
.dg-lr-newnote {
  text-align: center;
  font-size: 12px;
  color: #8F9191;
  margin-top: 4px;
}
.dg-lr-newnote strong { color: #0F1111; font-weight: 600; }

/* ── OTP digit boxes — override WC global input rules ── */
.dg-otp-login-wrap .dg-otp-boxes,
#dg-otp-boxes.dg-otp-boxes,
.dg-otp-boxes {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: horizontal !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: auto !important;
  padding: 0 !important;
  margin-bottom: 6px;
  justify-content: flex-start !important;
}
.dg-otp-login-wrap .dg-otp-box,
#dg-otp-boxes .dg-otp-box,
.dg-otp-box {
  -webkit-box-flex: 0 !important;
  -ms-flex: 0 0 44px !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 54px !important;
  border: 1.5px solid #D5D9D9 !important;
  border-radius: 9px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--navy,#008296) !important;
  text-align: center !important;
  font-family: 'Courier New', monospace !important;
  background: #F7F8F8 !important;
  outline: none !important;
  caret-color: transparent !important;
  padding: 0 !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  line-height: 54px !important;
  transition: border-color .15s, background .15s !important;
  float: none !important;
}
.dg-otp-box::-webkit-inner-spin-button,
.dg-otp-box::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.dg-otp-box:focus {
  border-color: var(--navy,#008296) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(0,130,150,.12) !important;
}
.dg-otp-box--filled {
  border-color: var(--navy,#008296) !important;
  background: #E6F4F7 !important;
}

@media (max-width: 380px) {
  .dg-otp-box {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 48px !important;
    font-size: 18px !important;
    line-height: 48px !important;
  }
  .dg-otp-boxes { gap: 6px !important; }
}

/* Back btn */
.dg-lr-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--navy,#008296);
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  margin-bottom: 18px;
}

/* Spam note */
.dg-lr-spamnote {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #8F9191;
  margin-top: 6px;
  margin-bottom: 12px;
}
.dg-lr-spamnote svg { flex-shrink: 0; }
.dg-lr-spamnote strong { color: #0F1111; }

/* Resend row */
.dg-lr-resendrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid #EAEDED;
  margin-bottom: 14px;
}
.dg-lr-countdown { font-size: 12px; font-weight: 600; color: #0F1111; }
.dg-lr-resend-pill {
  padding: 6px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--navy,#008296);
  background: transparent;
  color: var(--navy,#008296);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.dg-lr-resend-pill:disabled { opacity: .35; cursor: not-allowed; border-color: #ADBAC5; color: #8F9191; }
.dg-lr-resend-pill:not(:disabled):hover { background: var(--navy,#008296); color: #fff; }

/* Verify btn */
.dg-lr-verify-btn {
  width: 100%;
  height: 50px;
  background: var(--teal,#FFB800);
  color: #0F1111;
  border: none;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s, box-shadow .15s;
  letter-spacing: -.01em;
}
.dg-lr-verify-btn:hover { background: #F0A800; box-shadow: 0 2px 10px rgba(255,184,0,.3); }

/* Error */
.dg-otp-error { font-size: 12px; color: #CC0C39; min-height: 18px; margin-top: 4px; }

/* Success */
.dg-lr-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 0;
}
.dg-lr-success-icon {
  width: 58px;
  height: 58px;
  background: #E6F4F7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--navy,#008296);
}
.dg-lr-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #EAEDED;
  border-top-color: var(--navy,#008296);
  border-radius: 50%;
  animation: dg-spin .7s linear infinite;
  margin: 18px auto 0;
}
@keyframes dg-spin { to { transform: rotate(360deg); } }

/* ── Hide WC default login/register forms ── */
.dg-otp-login-wrap ~ .woocommerce-form-login,
.dg-otp-login-wrap ~ .woocommerce-form-register,
body.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-form-login,
body.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-form-register {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════
   TABLET ≥600px: side-by-side, email+button inline
   ═══════════════════════════════════════════════════════ */
@media (min-width: 600px) {
  /* Email + send button go side by side */
  .dg-otp-input-row {
    flex-direction: row;
    align-items: stretch;
  }
  .dg-lr-input {
    flex: 1;
    width: auto;
    min-width: 0;
    height: 46px;
    font-size: 14px;
  }
  .dg-lr-send-btn {
    width: auto;
    height: 46px;
    padding: 0 22px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════
   DESKTOP ≥768px: two-column card
   ═══════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* Reset bad override from old fix-pass blocks */
  .dg-otp-login-wrap {
    max-width: none !important;
    padding: 24px 0 48px !important;
  }

  .dg-login-split {
    flex-direction: row; /* side by side */
    min-height: 520px;
    max-width: 900px;
    margin: 0 auto;
  }

  /* Left panel: 42% width, trust panel */
  .dg-login-left {
    order: 1; /* left first on desktop */
    width: 42%;
    flex-shrink: 0;
    padding: 40px 34px;
    justify-content: space-between;
  }

  /* Right panel: takes remaining space */
  .dg-login-right {
    order: 2;
    flex: 1;
    min-width: 0;
    padding: 40px 42px;
  }

  .dg-ll-headline { font-size: 26px; }
  .dg-lr-title { font-size: 23px; }
  .dg-ll-pillars { gap: 16px; }
  .dg-ll-picon { width: 34px; height: 34px; }
}

/* ═══════════════════════════════════════════════════════
   WIDE ≥1100px: slightly more breathing room
   ═══════════════════════════════════════════════════════ */
@media (min-width: 1100px) {
  .dg-login-split { max-width: 960px; }
  .dg-login-left { padding: 44px 38px; }
  .dg-login-right { padding: 44px 50px; }
}

/* ================================================================
   v8 COMPREHENSIVE FIX PASS
   ================================================================ */

/* ── 1. COUNTER BAR — full redesign ── */
.dg-counter-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  padding: 24px 0 !important;
  align-items: stretch !important;
}
.dg-counter-col {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.dg-counter-hero {
  align-items: center;
}
.dg-counter-hero-img {
  flex-shrink: 0;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1);
  border-radius: 12px;
}
.dg-counter-num {
  font-size: 30px !important;
  font-weight: 900 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #1E3A5F !important;
  background-clip: unset !important;
  color: #1E3A5F !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
}
.dg-counter-sub {
  font-size: 12px !important;
  color: rgba(255,255,255,.8) !important;
  margin-top: 4px !important;
  line-height: 1.4 !important;
}
.dg-counter-live {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #5EEAD4 !important;
  margin-top: 7px !important;
  background: rgba(255,255,255,.08) !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
}
.dg-counter-live-dot {
  width: 7px; height: 7px;
  background: var(--success-200,#5EEAD4);
  border-radius: 50%;
  box-shadow: 0 0 6px #5EEAD4;
  animation: dg-pulse 1.4s ease-in-out infinite;
}
@keyframes dg-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.8); }
}
.dg-counter-stats {
  flex-direction: column;
  gap: 8px;
}
.dg-live-stats-label {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: rgba(255,255,255,.5) !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-bottom: 10px !important;
}
.dg-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(94,234,212,.15);
  border: 1px solid rgba(94,234,212,.3);
  color: var(--success-200,#5EEAD4);
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
}
.dg-live-badge span {
  width: 5px; height: 5px;
  background: var(--success-200,#5EEAD4);
  border-radius: 50%;
  display: block;
  animation: dg-pulse 1.4s ease-in-out infinite;
}
.dg-stats-group {
  display: flex !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  padding-top: 12px !important;
}
.dg-stat-num {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.1 !important;
}
.dg-stat-label {
  font-size: 10.5px !important;
  color: rgba(255,255,255,.55) !important;
  margin-top: 2px !important;
}
.dg-orders-counter {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 14px 16px !important;
  background: rgba(255,255,255,.07) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}
.dg-orders-label {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
  color: rgba(255,255,255,.55) !important;
  font-weight: 700 !important;
}
.dg-odometer {
  display: flex !important;
  gap: 3px !important;
  align-items: center !important;
}
.dg-digit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 36px !important;
  background: rgba(255,255,255,.12) !important;
  border-radius: 6px !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #fff !important;
  font-family: 'Courier New', monospace !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}
.dg-digit-sep {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,.4) !important;
  margin: 0 1px !important;
}
.dg-orders-sub {
  font-size: 10.5px !important;
  color: rgba(255,255,255,.4) !important;
  letter-spacing: .05em !important;
}

/* Desktop counter bar — 3 cols side by side */
@media (min-width: 900px) {
  .dg-counter-inner {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 28px 0 !important;
  }
  .dg-counter-col {
    flex: 1;
    padding: 0 28px;
    border-right: 1px solid rgba(255,255,255,.1);
  }
  .dg-counter-col:last-child { border-right: none; }
  .dg-orders-counter {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }
}

/* QTY PILL: see unified .dg-qty-control block */

/* coupon block 3 removed — canonical above */



































/* Available coupons slider */















































/* cart head/foot compact override removed — canonical above */
/* dg-cart-pay-icons: see canonical definition above */

/* ── 5. MY ACCOUNT — orders full width, details full width ── */
.woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm,
.woocommerce-MyAccount-content .woocommerce-address-fields {
  width: 100% !important;
}
.woocommerce-MyAccount-content {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
/* Fix last item going out of box */
.dg-address-cards {
  overflow: hidden !important;
}
.dg-address-card {
  min-width: 0 !important;
  word-break: break-word !important;
}

/* ── 6. NEWSLETTER — update JS response handling in CSS ── */
.dg-newsletter-success {
  color: var(--success-200,#5EEAD4);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── 7. FOOTER MENUS — style the wp_nav_menu output ── */
.dg-footer-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.dg-footer-menu li a {
  color: rgba(255,255,255,.6) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: block !important;
  padding: 4px 0 !important;
  transition: color .12s !important;
}
.dg-footer-menu li a:hover { color: var(--teal-light) !important; }

/* ── 8. COUNTER BAR — mobile stacking ── */
@media (max-width: 640px) {
  .dg-counter-hero-img { display: none; }
  .dg-stat-num { font-size: 17px !important; }
  .dg-counter-num { font-size: 24px !important; }
  .dg-digit { width: 22px !important; height: 30px !important; font-size: 15px !important; }
  .dg-stats-group { gap: 14px !important; }
}

/* =============================================================
   DRUGSGENERAL v8 — COMPREHENSIVE FIXES PATCH
   ============================================================= */

/* ── FIX 1: SIGN IN BUTTON — desktop only, compact icon-only on mobile ── */

/* Mobile: compact icon-only sign-in tile */
@media (max-width: 767px) {
  .dg-btn-solid {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 12px !important;
    height: 38px !important;
    background: var(--navy) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--white) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  /* On very small screens, hide the text "Sign In", keep only icon */
  @media (max-width: 380px) {
    .dg-signin-btn span { display: none !important; }
    .dg-signin-btn { padding: 0 10px !important; min-width: 38px !important; width: 38px !important; }
  }
}

/* Desktop: full button */
@media (min-width: 768px) {
  .dg-btn-solid {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: var(--navy) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--white) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: none !important;
    transition: background .15s !important;
  }
  .dg-btn-solid:hover { background: var(--teal) !important; color: var(--white) !important; }
}

/* ── FIX 2: QTY PILL — fix + button breaking pill shape ── */
/* QTY PILL: see unified .dg-qty-control block */

/* ── COUPON PANEL — JS controls visibility via inline style (display:none/block) ── */
/* Panel starts hidden (set in PHP via style="display:none"), JS toggles it */
/* Do NOT use CSS to force hide/show — JS manages it on dg-coupon-input-wrap id */

/* ── FIX 4: CART DRAWER — canonical rules in base section, nothing needed here ── */

/* ── FIX 5: CART PAYMENT ICONS — PayPal, Bank Transfer, Crypto only ── */
/* dg-cart-pay-icons: see canonical definition above */
.dg-pay-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px 9px !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--slate) !important;
  white-space: nowrap !important;
}

/* ── FIX 7: COUNTER BAR — proper layout, image first, then savings ── */
.dg-counter-bar {
  background: linear-gradient(135deg, var(--navy) 0%, #223580 100%) !important;
  padding: 16px 0 !important;
}
.dg-counter-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}
.dg-counter-col {
  flex: 1 !important;
  padding: 10px 20px !important;
  border-right: 1px solid rgba(255,255,255,.12) !important;
  text-align: center !important;
}
.dg-counter-col:last-child { border-right: none !important; }
.dg-counter-hero {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-align: left !important;
  flex: 1.3 !important;
}
.dg-counter-hero-img {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.dg-counter-num {
  font-size: 26px !important;
  font-weight: 900 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #1E3A5F !important;
  background-clip: unset !important;
  color: #1E3A5F !important;
  line-height: 1.1 !important;
}
.dg-counter-sub {
  font-size: 11.5px !important;
  color: rgba(255,255,255,.75) !important;
  margin-top: 2px !important;
  line-height: 1.3 !important;
}
.dg-counter-live {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  color: #5EEAD4 !important;
  font-weight: 600 !important;
  margin-top: 5px !important;
}
.dg-counter-live::before { display: none !important; /* suppressed — HTML span dot used instead */
  content: '' !important;
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: #5EEAD4 !important;
  animation: dgPulse 1.4s infinite !important;
  flex-shrink: 0 !important;
}
/* Live stats section */
.dg-counter-stats { flex: 1.4 !important; }
.dg-live-stats-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: rgba(255,255,255,.5) !important;
  margin-bottom: 10px !important;
}
.dg-live-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(94,234,212,.2) !important;
  border: 1px solid rgba(94,234,212,.4) !important;
  border-radius: 99px !important;
  padding: 2px 7px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: #5EEAD4 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}
.dg-live-badge span {
  width: 5px !important; height: 5px !important;
  border-radius: 50% !important;
  background: #5EEAD4 !important;
  animation: dgPulse 1.4s infinite !important;
  display: block !important;
}
.dg-stats-group {
  display: flex !important;
  gap: 20px !important;
  justify-content: center !important;
}
.dg-stat-item { text-align: center !important; }
.dg-stat-num {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--white) !important;
  line-height: 1 !important;
}
.dg-stat-label {
  font-size: 10.5px !important;
  color: rgba(255,255,255,.6) !important;
  margin-top: 3px !important;
}
/* Orders this week */
.dg-orders-counter {
  display: block !important;
  flex: 1 !important;
  text-align: center !important;
}
.dg-orders-label {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.5) !important;
  margin-bottom: 8px !important;
}
.dg-odometer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}
.dg-digit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.1) !important;
  border-radius: 5px !important;
  width: 30px !important;
  height: 38px !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--white) !important;
  font-family: monospace !important;
}
.dg-digit-sep {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,.4) !important;
  line-height: 1 !important;
  margin: 0 1px !important;
}
.dg-orders-sub {
  font-size: 10.5px !important;
  color: rgba(255,255,255,.5) !important;
  margin-top: 6px !important;
}

/* Mobile counter bar */
@media (max-width: 767px) {
  .dg-counter-inner {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .dg-counter-col {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
    padding: 10px 0 !important;
    width: 100% !important;
  }
  .dg-counter-col:last-child { border-bottom: none !important; }
  .dg-counter-hero { justify-content: center !important; text-align: left !important; }
  .dg-stats-group { gap: 24px !important; }
  .dg-counter-hero-img { display: flex !important; }
}

/* ── FIX 8: FOOTER MENUS — register nav menus instruction styling ── */
/* (Menus are already registered via register_nav_menus in functions.php) */

/* ── FIX 9: OTP LOGIN — desktop override REMOVED (two-column layout needs full width) ── */

/* =============================================================
   QTY PILL + CART BODY — DEFINITIVE FIX
   ============================================================= */

/* QTY PILL: see unified .dg-qty-control block */

/* =============================================================
   COUNTER BAR — REAL SAVINGS IMAGE
   ============================================================= */

.dg-counter-hero-img {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dg-counter-hero-img img {
  width: 80px !important;
  height: 74px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.35) !important;
  display: block !important;
}

/* Mobile: smaller image, stacked layout */
@media (max-width: 767px) {
  .dg-counter-hero {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    text-align: left !important;
  }
  .dg-counter-hero-img img {
    width: 62px !important;
    height: 58px !important;
  }
}

/* Tablet / desktop: image slightly bigger */
@media (min-width: 768px) {
  .dg-counter-hero-img img {
    width: 88px !important;
    height: 82px !important;
  }
}


/* ══════════════════════════════════════════════════════════
   FINAL OVERRIDES v9.1 — authoritative, no duplicates
   All rules use high-specificity selectors to win.
══════════════════════════════════════════════════════════ */

/* ── Cart drawer structural rules — canonical definitions in base section ── */
.dg-cart-drawer { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.dg-cart-drawer-body { flex: 1 1 0 !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 0 !important; min-height: 0 !important; }
.dg-cart-view-btn { display: none !important; }

/* ── Coupon chips ── */











/* ── FIX 3: Live stats — remove image, dollar SVG, proper alignment ── */
.dg-counter-hero-img { display: none !important; }

.dg-counter-col.dg-counter-hero {
  align-items: flex-start !important;
  gap: 10px !important;
}
.dg-counter-hero-dollar {
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  background: rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #7FFFD4 !important;
}
.dg-counter-hero > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.dg-counter-num,
.dg-savings-live {
  font-size: 28px !important;
  font-weight: 900 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #1E3A5F !important;
  background-clip: unset !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
  color: #1E3A5F !important;
}
.dg-counter-sub {
  font-size: 12px !important;
  color: rgba(255,255,255,.75) !important;
  line-height: 1.4 !important;
  margin-top: 0 !important;
}
.dg-counter-live {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  color: rgba(255,255,255,.65) !important;
  margin-top: 2px !important;
}
.dg-counter-live-dot {
  width: 6px !important; height: 6px !important;
  background: #4ADE80 !important;
  border-radius: 50% !important;
  animation: dg-pulse 1.5s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}

/* ── FIX 4: Counter bar — WHITE background, NAVY text (desktop & mobile) ── */
.dg-counter-bar {
  background: #fff !important;
  background-image: none !important;
  color: var(--navy) !important;
}
/* Keep ::before hidden — it was covering all content with a solid white overlay */
.dg-counter-bar::before {
  display: none !important;
}
.dg-counter-bar {
  border-bottom: 1px solid var(--border) !important;
}
/* Text colours inside counter bar */
.dg-counter-bar .dg-counter-num,
.dg-counter-bar .dg-savings-live {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #1E3A5F !important;
  background-clip: unset !important;
  color: #1E3A5F !important;
  font-size: 28px !important;
  font-weight: 900 !important;
}
.dg-counter-bar .dg-counter-sub     { color: var(--slate) !important; }
.dg-counter-bar .dg-counter-live    { color: var(--muted) !important; }
.dg-counter-bar .dg-live-stats-label,
.dg-counter-bar .dg-live-badge      { color: var(--navy) !important; }
.dg-counter-bar .dg-stat-num        { color: var(--navy) !important; }
.dg-counter-bar .dg-stat-label      { color: var(--slate) !important; }
.dg-counter-bar .dg-orders-label    { color: var(--navy) !important; }
.dg-counter-bar .dg-orders-sub      { color: var(--muted) !important; }
.dg-counter-bar .dg-odometer .dg-digit { color: var(--navy) !important; background: var(--teal-light) !important; }
.dg-counter-bar .dg-digit-sep       { color: var(--navy) !important; }
.dg-counter-bar .dg-counter-hero-dollar { background: var(--teal-light) !important; color: var(--navy) !important; }
.dg-counter-bar .dg-counter-live-dot { background: var(--green) !important; }
/* ══════════════════════════════════════════════════════════════
   COUPON — available coupons slider shown via JS (#dg-coupon-available)
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   VIEW ALL CATEGORIES button — match navy site buttons
   ══════════════════════════════════════════════════════════════ */
.dg-sidebar-view-all-cats-btn,
.dg-sidebar-view-all-cats-btn:visited {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: calc(100% - 32px) !important;
  margin: 8px 16px !important;
  padding: 9px 14px !important;
  background: var(--navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background .15s !important;
}
.dg-sidebar-view-all-cats-btn:hover {
  background: var(--navy-mid, #2a4a9a) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   CART DRAWER — COUPON TOGGLE BUTTON + ORDER FIX (v9.2)
   ══════════════════════════════════════════════════════════════ */

/* "Have a coupon?" — clean pill button, NOT underline-link style */
/* Input + Apply side by side */





































/* Subtotal row — slightly bolder to read as the "total" */
.dg-cart-subtotal {
  font-size: 14px !important;
  font-weight: 700 !important;
  border-top: 2px solid var(--border) !important;
  padding-top: 8px !important;
  margin-top: 4px !important;
}

/* Discount row — above subtotal, green accent */
.dg-cart-discount-row {
  font-size: 13px !important;
  color: var(--slate) !important;
  padding: 4px 0 !important;
  border-bottom: none !important;
}

/* ══════════════════════════════════════════════════════════════
   SINGLE PRODUCT — gap between sidebar and product content (v9.2)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .dg-single-wrap {
    gap: 24px !important;
  }
  /* Sidebar keeps its border-right; the gap provides the breathing room */
  .dg-single-main {
    padding-left: 0 !important; /* gap handles the space, no double indent */
  }
}

/* ══════════════════════════════════════════════════════════════
   DG PATCH v9.2.1 — Three UI Fixes
   ══════════════════════════════════════════════════════════════ */

/* ── FIX A: Hide "Sign In" button in mobile header
         Mobile bottom nav already has an "Account" tab. ── */
@media (max-width: 767px) {
  .dg-signin-btn,
  .dg-account-btn {
    display: none !important;
  }
}

/* ── FIX B: Mobile Drawer — "Hi, Name" user greeting block ── */
.dg-drawer-user-greeting {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--navy) 0%, #005F6B 100%);
  border-bottom: 2px solid var(--teal);
  flex-shrink: 0;
}
.dg-drawer-user-greeting.dg-drawer-user-guest {
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
}
.dg-drawer-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.dg-drawer-user-avatar--guest {
  background: rgba(255,255,255,0.15);
}
.dg-drawer-user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dg-drawer-hi {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dg-drawer-hi strong {
  color: var(--white);
  font-weight: 700;
}
.dg-drawer-my-account {
  font-size: 12px;
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.dg-drawer-my-account:hover {
  color: #5eead4;
}
.dg-drawer-trust-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(20, 184, 166, 0.18);
  border: 1px solid rgba(20, 184, 166, 0.4);
  border-radius: 20px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.03em;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── FIX C: Remove checkout link from sign-in page —
         handled in form-login.php (element removed from template) ── */
.dg-otp-checkout-link { display: none !important; }

/* ══════════════════════════════════════════════════════════════
/* ── PRIORITY 2: LOGIN PAGE — remove gradients, solid brand blue ─ */

/* Brand header bar: was linear-gradient(135deg, var(--navy) 0%, #0D7F7F 100%) */
.dg-otp-brand {
  background: var(--navy) !important;
  /* Remove the teal gradient — use solid navy throughout */
}

/* Profile sidebar header: was linear-gradient(135deg, var(--navy-deep), var(--navy)) */
.dg-account-profile {
  background: var(--navy) !important;
}

/* Primary CTA button: already navy, ensure no gradient variant */
.dg-otp-btn-primary {
  background: var(--navy) !important;
  background-image: none !important;
}
.dg-otp-btn-primary:hover:not(:disabled) {
  background: var(--navy-mid) !important;
  background-image: none !important;
}

/* Login wrap bg: neutral, not a gradient */
.dg-otp-login-wrap {
  background: var(--bg) !important;
  background-image: none !important;
}


/* ── PRIORITY 3: COUPON ACCORDION — single authoritative definition ─
   All 5 prior .dg-coupon-toggle blocks are superseded here.
   Animation uses max-height for smooth expand/collapse without JS height calc.
   The JS uses data-open attribute set via initCouponV2() in main.js. */

/* Supersede all previous coupon toggle definitions */






































/* SVG icon left */






/* Chevron right — smooth rotation */











/* Panel: animated expand via max-height */












/* Input row */






















































/* Available coupon chips */














































/* ── PRIORITY 4: QUANTITY CONTROL — single source of truth ───── */
/* Unified .dg-qty-control used in: product page, cart page,
   mini cart, cart drawer. All variations use these same rules.
   Product page uses .dg-qty-input wrapper — aliased below. */

/* Canonical pill */
.dg-qty-control,
.dg-qty-input {
  display: inline-grid !important;
  grid-template-columns: 36px 1fr 36px !important;
  align-items: stretch !important;
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
  height: 36px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 99px !important;
  overflow: hidden !important;
  background: var(--white) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* Buttons */
.dg-qty-control .dg-qty-btn,
.dg-qty-control .dg-qty-minus,
.dg-qty-control .dg-qty-plus,
.dg-qty-input button,
.dg-qty-input .dg-qty-minus,
.dg-qty-input .dg-qty-plus {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--navy) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  user-select: none !important;
  transition: background .1s !important;
  position: relative !important;
}
.dg-qty-control .dg-qty-btn:hover,
.dg-qty-control .dg-qty-minus:hover,
.dg-qty-control .dg-qty-plus:hover,
.dg-qty-input button:hover,
.dg-qty-input .dg-qty-minus:hover,
.dg-qty-input .dg-qty-plus:hover {
  background: var(--bg) !important;
  color: var(--navy) !important;
}
.dg-qty-control .dg-qty-btn:active,
.dg-qty-control .dg-qty-minus:active,
.dg-qty-control .dg-qty-plus:active,
.dg-qty-input button:active {
  background: var(--bg2) !important;
}

/* Value display / input */
.dg-qty-control .dg-qty-val,
.dg-qty-input input,
.dg-qty-input .dg-qty-val {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  border-left: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  border-top: none !important;
  border-bottom: none !important;
  text-align: center !important;
  user-select: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  outline: none !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  border-radius: 0 !important;
}
.dg-qty-input input::-webkit-outer-spin-button,
.dg-qty-input input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }

/* Touch target expansion — no layout impact */
@media (pointer: coarse) {
  .dg-qty-control .dg-qty-btn::before,
  .dg-qty-control .dg-qty-minus::before,
  .dg-qty-control .dg-qty-plus::before,
  .dg-qty-input button::before {
    content: '' !important;
    position: absolute !important;
    inset: -10px !important;
  }
  .dg-qty-control,
  .dg-qty-input { overflow: visible !important; }
}

/* ── End DG Patch v9.2.2 ─────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════
   v11 ADDITIONS
   Geo section · Proof images · Review photos · Exit popup
   Thank you page · Testimonial avatar-img
══════════════════════════════════════════════════════════ */

/* ── Geo "Popular in [Country]" ── */
.dg-geo-section .dg-section-title { display:flex; align-items:center; gap:8px; }
.dg-geo-flag { font-size:20px; line-height:1; }
.dg-geo-badge {
  font-size:10px; font-weight:700; color:var(--navy); background:var(--teal-light);
  border:1px solid var(--border-mid); border-radius:99px; padding:2px 8px;
  letter-spacing:.03em; text-transform:uppercase;
}

/* ── Proof images — homepage strip ── */
.dg-proof-images-row { margin-top:20px; }
.dg-proof-images-label {
  display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  color:var(--navy); margin-bottom:12px;
}
.dg-proof-badge {
  background:#DCFCE7; color:#166534; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:99px; border:1px solid #A7D4B8;
}
.dg-proof-images-grid {
  display:flex; flex-wrap:wrap; gap:8px;
}
.dg-proof-img-thumb {
  position:relative; width:80px; height:80px; border-radius:10px;
  overflow:hidden; border:2px solid var(--border); display:block;
  flex-shrink:0; transition:transform .18s, border-color .18s;
}
.dg-proof-img-thumb:hover { transform:scale(1.05); border-color:var(--navy); }
.dg-proof-img-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.dg-proof-img-overlay {
  position:absolute; inset:0; background:rgba(26,43,107,.55);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .18s;
}
.dg-proof-img-thumb:hover .dg-proof-img-overlay { opacity:1; }

/* ── Proof gallery — reviews page ── */
.dg-proof-section { margin-bottom:32px; }
.dg-proof-count-badge {
  font-size:11px; font-weight:700; color:#166534; background:#DCFCE7;
  border:1px solid #A7D4B8; border-radius:99px; padding:3px 10px;
}
.dg-proof-gallery {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px,1fr));
  gap:10px; margin-bottom:12px;
}
.dg-proof-gallery-item {
  position:relative; border-radius:12px; overflow:hidden;
  border:2px solid var(--border); display:block; aspect-ratio:1;
  transition:transform .18s, border-color .18s;
}
.dg-proof-gallery-item:hover { transform:scale(1.03); border-color:var(--navy); }
.dg-proof-gallery-item img { width:100%; height:100%; object-fit:cover; display:block; }
.dg-proof-gallery-overlay {
  position:absolute; inset:0; background:rgba(26,43,107,.55);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; color:#fff; font-size:12px; font-weight:700;
  opacity:0; transition:opacity .18s;
}
.dg-proof-gallery-item:hover .dg-proof-gallery-overlay { opacity:1; }
.dg-proof-caption {
  font-size:12px; color:var(--slate); display:flex; align-items:center; gap:6px; margin-top:4px;
}

/* ── Review card photo thumbnail ── */
.dg-review-photo-thumb {
  position:relative; display:inline-block; margin:10px 0 4px;
  width:72px; height:72px; border-radius:10px; overflow:hidden;
  border:2px solid var(--border);
}
.dg-review-photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.dg-review-photo-overlay {
  position:absolute; inset:0; background:rgba(26,43,107,.5);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s;
}
.dg-review-photo-thumb:hover .dg-review-photo-overlay { opacity:1; }

/* ── Review avatar with image ── */
.dg-review-avatar-img,
.dg-testimonial-avatar-img {
  padding:0; overflow:hidden;
}
.dg-review-avatar-img img,
.dg-testimonial-avatar-img img {
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ── Testimonial review photo ── */
.dg-testimonial-review-img {
  margin-top:10px; border-radius:10px; overflow:hidden;
  border:1px solid var(--border); max-width:100%;
}
.dg-testimonial-review-img img { width:100%; height:auto; display:block; max-height:160px; object-fit:cover; }

/* ── Exit-intent popup reset ── */
#dg-exit-popup { animation:dg-fade-in .25s ease; }
@keyframes dg-fade-in { from{opacity:0} to{opacity:1} }
#dg-exit-popup > div { animation:dg-slide-up .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes dg-slide-up { from{transform:translateY(24px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ── Thank you page ── */
.dg-ty-wrap { animation:dg-fade-in .4s ease; }

/* ── Responsive ── */
@media(max-width:768px) {
  .dg-proof-gallery { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
  .dg-proof-img-thumb { width:64px; height:64px; }
}
@media(max-width:480px) {
  .dg-geo-badge { display:none; }
  .dg-proof-gallery { grid-template-columns:repeat(3,1fr); }
}

/* ══════════════════════════════════════════════════════
   SUBMENU / DROPDOWN NAVIGATION
══════════════════════════════════════════════════════ */
.dg-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:0; }
.dg-nav ul li { position:relative; }
.dg-nav ul li a {
  display:flex; align-items:center; gap:5px;
  padding:0 14px; height:44px; font-size:13.5px; font-weight:600;
  color:var(--white,#fff); text-decoration:none; white-space:nowrap;
  transition:color .15s;
}
.dg-nav ul li a:hover { color:var(--teal,#00B5CC); }
.dg-nav ul li.current-menu-item > a,
.dg-nav ul li.current-menu-ancestor > a { color:var(--teal,#00B5CC); }

/* Dropdown arrow indicator */
.dg-nav ul li.menu-item-has-children > a::after {
  content:'';
  display:inline-block; width:7px; height:7px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  margin-left:3px; opacity:.7;
}

/* First level dropdown */
.dg-nav ul li ul.sub-menu {
  position:absolute; top:calc(100% + 4px); left:0;
  min-width:200px; background:var(--white,#fff);
  border-radius:10px; box-shadow:0 8px 32px rgba(0,0,0,.14);
  padding:6px 0; z-index:9999;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.dg-nav ul li:hover > ul.sub-menu,
.dg-nav ul li:focus-within > ul.sub-menu {
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.dg-nav ul li ul.sub-menu li a {
  color:var(--ink,#111827); height:auto; padding:9px 18px;
  font-size:13px; font-weight:500; display:block;
}
.dg-nav ul li ul.sub-menu li a:hover { background:var(--bg,#F4F6FB); color:var(--navy,var(--navy)); }

/* Second level (nested) dropdown */
.dg-nav ul li ul.sub-menu li ul.sub-menu {
  top:0; left:100%; border-radius:10px;
}

/* ── Mobile drawer submenu ── */
.dg-drawer-nav ul { list-style:none; margin:0; padding:0; }
.dg-drawer-nav ul li ul.sub-menu {
  padding-left:16px; display:none;
  border-left:2px solid rgba(255,255,255,.15); margin:4px 0 4px 12px;
}
.dg-drawer-nav ul li.dg-sub-open > ul.sub-menu { display:block; }
.dg-drawer-nav ul li.menu-item-has-children > a {
  display:flex; justify-content:space-between; align-items:center;
}
.dg-drawer-nav ul li.menu-item-has-children > a::after {
  content:'›'; font-size:16px; line-height:1; opacity:.6; transition:transform .2s;
}
.dg-drawer-nav ul li.dg-sub-open > a::after { transform:rotate(90deg); }

/* ══════════════════════════════════════════════════════
   TRUST SIGNALS IN HAMBURGER DRAWER
══════════════════════════════════════════════════════ */
.dg-drawer-trust {
  padding:12px 14px 14px; margin:8px 12px 14px;
  background:rgba(255,255,255,.06); border-radius:10px;
  display:grid; grid-template-columns:1fr 1fr; gap:7px;
}
.dg-drawer-trust-item {
  display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.08); border-radius:7px;
  padding:7px 9px;
  font-size:11.5px; color:rgba(255,255,255,.88);
  font-weight:500; letter-spacing:.01em; line-height:1.25;
}
/* last item odd — span full width */
.dg-drawer-trust-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.dg-drawer-trust-icon {
  display:flex; align-items:center; flex-shrink:0;
  color:var(--dg-accent, #4f9cf9);
  opacity:.95;
}
.dg-drawer-trust-label {
  line-height:1.25;
}

/* ══════════════════════════════════════════════════════
   CUSTOM LOGO IN HEADER & FOOTER
══════════════════════════════════════════════════════ */
.dg-logo-mark--img {
  background:transparent !important; padding:2px !important;
  display:flex; align-items:center; justify-content:center;
}
.dg-logo-mark--img .dg-custom-logo-img {
  max-width:44px; max-height:44px;
  width:auto; height:auto;
  object-fit:contain; display:block;
}
.dg-footer-logo-mark--img {
  background:transparent !important; padding:0 !important;
  display:flex; align-items:center;
}
.dg-footer-logo-mark--img img {
  max-height:36px; width:auto; object-fit:contain; display:block;
}


/* ══════════════════════════════════════════════════════════════

.dg-footer-logo-mark--img img {
  max-height:36px; width:auto; object-fit:contain; display:block;
}

/* ══════════════════════════════════════════════════════════════
   MY ACCOUNT — SINGLE AUTHORITATIVE LAYOUT
   Replaces all previous account patch blocks and dg-account-patch.css.
   No !important needed: .woocommerce-account body class + element
   selectors give sufficient specificity over WooCommerce defaults.
   ══════════════════════════════════════════════════════════════ */

/* 1. Neutralise the WooCommerce wrapper — must not be a grid/flex container
      (WC default at 768px+ was display:grid 220px 1fr which adds a phantom
      layout layer between dg-account-page and dg-account-wrap). */

body.woocommerce-account .woocommerce {
  display: block;
  grid-template-columns: none;
  gap: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 2. Page wrapper — no padding; dg-account-wrap owns all spacing */

body.woocommerce-account .dg-account-page {
  padding: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

/* 3. Mobile-first: single column */

body.woocommerce-account .dg-account-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 14px 80px;
  gap: 16px;
  box-sizing: border-box;
}

body.woocommerce-account .dg-account-sidebar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex-shrink: 0;
  position: static;
  box-sizing: border-box;
}

body.woocommerce-account .dg-account-main {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: none;
  overflow: visible; /* must NOT be hidden — clips scrollable tables */
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

/* 4. Tablet / desktop (768px+): sidebar fixed, content expands */

@media (min-width: 768px) {
  body.woocommerce-account .dg-account-wrap {
    flex-direction: row;
    align-items: flex-start;
    padding: 28px 24px 72px;
    gap: 28px;
  }

  body.woocommerce-account .dg-account-sidebar {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    flex: none;
    flex-shrink: 0;
    position: sticky;
    top: 76px;
    align-self: flex-start;
  }

  body.woocommerce-account .dg-account-main {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }
}

/* 5. Wide desktop (1280px+) */

@media (min-width: 1280px) {
  body.woocommerce-account .dg-account-wrap {
    padding: 32px 32px 80px;
    gap: 32px;
  }
  body.woocommerce-account .dg-account-sidebar {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
  }
}

/* 6. Content sections: always full width */

body.woocommerce-account .dg-account-reorder-section,
body.woocommerce-account .dg-account-orders-section,
body.woocommerce-account .dg-account-wc-content {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* 7. WC content area: full width, scrollable tables */

body.woocommerce-account .woocommerce-MyAccount-content {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
  word-break: break-word;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__wrapper,
body.woocommerce-account .woocommerce-MyAccount-content .shop_table_wrapper,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-downloads {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.woocommerce-account .woocommerce-MyAccount-content table,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  table-layout: auto;
  min-width: 380px;
}

/* 8. View Order — individual order detail page */

body.woocommerce-account .woocommerce-order-details,
body.woocommerce-account .woocommerce-customer-details {
  margin-bottom: 24px;
}

body.woocommerce-account .woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0 0 24px;
  padding: 16px 20px;
  background: var(--bg, #f5f7fa);
  border: 1px solid var(--border, #e8eef3);
  border-radius: 10px;
  font-size: 13px;
}

body.woocommerce-account .woocommerce-order-overview li {
  margin: 0;
  color: var(--muted, #6b7280);
}

body.woocommerce-account .woocommerce-order-overview li strong {
  display: block;
  font-size: 15px;
  color: var(--navy, #1a2540);
  margin-top: 2px;
}

body.woocommerce-account .woocommerce-order-overview .woocommerce-order-overview__payment-method strong {
  font-size: 13px;
}

body.woocommerce-account .woocommerce-notice--success,
body.woocommerce-account .woocommerce-message {
  background: #f0fdf4;
  border-left: 4px solid #22c55e;
  color: #166534;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 20px;
}

body.woocommerce-account table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 0;
}

body.woocommerce-account table.woocommerce-table--order-details thead th {
  background: var(--bg, #f5f7fa);
  padding: 9px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted, #6b7280);
  border-bottom: 1px solid var(--border, #e8eef3);
}

body.woocommerce-account table.woocommerce-table--order-details tbody td,
body.woocommerce-account table.woocommerce-table--order-details tfoot td,
body.woocommerce-account table.woocommerce-table--order-details tfoot th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e8eef3);
  vertical-align: middle;
  color: var(--navy, #1a2540);
}

body.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child td,
body.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child th {
  border-bottom: none;
  font-weight: 700;
}

body.woocommerce-account table.woocommerce-table--order-details .product-total {
  text-align: right;
}

body.woocommerce-account table.woocommerce-table--order-details tfoot th,
body.woocommerce-account table.woocommerce-table--order-details tfoot td {
  text-align: right;
}

body.woocommerce-account table.woocommerce-table--order-details tfoot th {
  text-align: left;
}

body.woocommerce-account .woocommerce-order-details__title,
body.woocommerce-account .woocommerce-column__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy, #1a2540);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--teal, #1a9b6c);
  display: inline-block;
}

body.woocommerce-account .woocommerce-customer-details address,
body.woocommerce-account .col-1 address,
body.woocommerce-account .col-2 address {
  background: var(--bg, #f5f7fa);
  border: 1px solid var(--border, #e8eef3);
  border-radius: 10px;
  padding: 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--navy, #1a2540);
  font-style: normal;
}

body.woocommerce-account .woocommerce-order-again .button,
body.woocommerce-account a.button.order-again,
body.woocommerce-account .order-again .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal, #1a9b6c);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 20px;
}

body.woocommerce-account .woocommerce-order-again .button:hover,
body.woocommerce-account a.button.order-again:hover {
  background: #158a5e;
}

@media (max-width: 600px) {
  body.woocommerce-account .woocommerce-order-overview {
    flex-direction: column;
    gap: 10px;
  }
  body.woocommerce-account table.woocommerce-table--order-details {
    min-width: 340px;
  }
  body.woocommerce-account .woocommerce-customer-details {
    display: block;
  }
}

/* ══════════════════════════════════════════════════════════════
   MY ACCOUNT — COMPONENT STYLES
   Avatar, stats, nav, trust, reorder cards, recent orders.
   Missing from v25 — ported from v14 reference. (v26)
   ══════════════════════════════════════════════════════════════ */

/* Sidebar card shell */

.dg-account-sidebar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Profile header */

.dg-account-profile {
  background: var(--navy);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.dg-account-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: 2px solid rgba(255,255,255,.3);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 18px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.dg-account-profile-info strong {
  display: block;
  font-size: 14px; font-weight: 700;
  color: var(--white);
}

.dg-account-profile-info span {
  display: block;
  font-size: 11.5px;
  color: rgba(255,255,255,.65);
}

.dg-account-profile-info small {
  display: block;
  font-size: 10.5px;
  color: rgba(255,255,255,.45);
}

/* Stats row */

.dg-account-stats {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.dg-account-stat {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
  border-right: 1px solid var(--border);
}

.dg-account-stat:last-child { border-right: none; }

.dg-account-stat-num {
  display: block;
  font-family: var(--font-head);
  font-size: 20px; font-weight: 800;
  color: var(--navy);
  line-height: 1;
}

.dg-account-stat-label {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

/* Nav */

.dg-account-nav { padding: 8px 0; }

.dg-account-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 13px; font-weight: 500;
  color: var(--ink);
  border-left: 3px solid transparent;
  transition: background .12s, color .12s;
  text-decoration: none;
}

.dg-account-nav-item:hover { background: var(--bg); color: var(--navy); }

.dg-account-nav-item.active { background: var(--bg2); color: var(--navy); font-weight: 600; border-left-color: var(--navy); }

.dg-account-nav-item.logout { color: var(--red, #dc2626); }

.dg-account-nav-item.logout:hover { background: #FEF2F2; }

.dg-account-nav-badge {
  margin-left: auto;
  background: var(--teal);
  color: var(--white);
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 10px;
}

/* Trust footer */

.dg-account-trust {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}

.dg-account-trust div {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--slate, #6b7280);
}

/* Section headings */

.dg-account-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}

.dg-account-section-head h3 {
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
  margin: 0;
}

.dg-account-section-head h3::before {
  content: '';
  width: 3px; height: 16px;
  background: var(--navy); border-radius: 2px; display: block;
}

.dg-account-section-link {
  font-size: 12px; font-weight: 600; color: var(--navy);
  text-decoration: none;
}

.dg-account-section-link:hover { color: var(--teal); }

/* Buy Again / Reorder section */

.dg-account-reorder-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.dg-reorder-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  transition: box-shadow .15s, border-color .15s;
}
.dg-reorder-card:hover {
  border-color: var(--teal);
  box-shadow: 0 2px 10px rgba(0,160,180,.1);
}

.dg-reorder-img {
  width: 64px; height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  background: var(--bg);
}

.dg-reorder-img img { width: 100%; height: 100%; object-fit: cover; }

.dg-reorder-info { width: 100%; min-width: 0; overflow: hidden; }

.dg-reorder-name {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--ink); line-height: 1.3; margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis;
  text-decoration: none;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.dg-reorder-price { font-size: 12px; color: var(--navy); font-weight: 700; display: block; }

.dg-reorder-btn {
  width: 100%; height: 32px;
  background: var(--navy); color: var(--white);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  gap: 5px;
  flex-shrink: 0; border: none; cursor: pointer;
  font-size: 11px; font-weight: 700;
  transition: background .15s;
  margin-top: auto;
}

.dg-reorder-btn:hover { background: var(--teal); }

.dg-reorder-oos { font-size: 10px; color: var(--muted); flex-shrink: 0; }

/* Recent Orders section */

.dg-account-orders-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-top: 12px;
}

.dg-recent-order-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.dg-recent-order-row:last-child { border-bottom: none; padding-bottom: 0; }

.dg-recent-order-meta { display: flex; align-items: center; gap: 8px; }

.dg-recent-order-num { font-size: 12.5px; font-weight: 700; color: var(--navy); }

.dg-recent-order-date { font-size: 11px; color: var(--muted); }

.dg-recent-order-items { font-size: 12px; color: var(--slate, #6b7280); line-height: 1.4; }

.dg-recent-order-status-wrap { display: flex; align-items: center; gap: 8px; }

.dg-recent-order-status {
  font-size: 10.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 20px;
  display: inline-block;
}

.dg-recent-order-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.dg-order-btn-sm {
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 600; color: var(--navy);
  transition: all .15s; text-decoration: none; background: transparent;
  cursor: pointer; white-space: nowrap;
}

.dg-order-btn-sm:hover { border-color: var(--navy); background: var(--bg); }

/* WC content box */

.dg-account-wc-content {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-top: 12px;
}

/* Tablet+: recent order row goes horizontal */

@media (min-width: 640px) {
  .dg-recent-order-row {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .dg-recent-order-meta { flex-shrink: 0; }
  .dg-recent-order-items { flex: 1; min-width: 0; }
  .dg-recent-order-actions { margin-left: auto; }
}

/* ══════════════════════════════════════════════════════════════
   MY ACCOUNT — EDIT FORMS (Account Details / Addresses)
   form-row-first/last two-col, password strength, labels, inputs.
   Missing from v25 — ported from v14 reference. (v26)
   ══════════════════════════════════════════════════════════════ */

/* All form rows: full-width, stacked */

.woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset,
.woocommerce-MyAccount-content .woocommerce-password-strength {
  width: 100% !important;
  float: none !important;
  clear: both !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  display: block !important;
}

/* Labels */

.woocommerce-MyAccount-content label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin-bottom: 5px !important;
}

/* Inputs */

.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
  width: 100% !important;
  max-width: 100% !important;
  padding: 9px 12px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  background: #fff !important;
  box-sizing: border-box !important;
  display: block !important;
}

.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
  border-color: var(--navy) !important;
  outline: none !important;
}

/* Two-column layout at 600px+ */

@media (min-width: 600px) {
  .woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row-first,
  .woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row-last,
  .woocommerce-MyAccount-content .woocommerce-address-fields .form-row-first,
  .woocommerce-MyAccount-content .woocommerce-address-fields .form-row-last {
    display: inline-block !important;
    width: calc(50% - 8px) !important;
    float: left !important;
    clear: none !important;
  }
  .woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row-last,
  .woocommerce-MyAccount-content .woocommerce-address-fields .form-row-last {
    margin-left: 16px !important;
  }
}

/* Fieldset (password change section) */

.woocommerce-MyAccount-content fieldset {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px !important;
  margin-top: 8px !important;
}

.woocommerce-MyAccount-content fieldset legend {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  padding: 0 8px !important;
}

/* Save / submit button */

.woocommerce-MyAccount-content [type="submit"],
.woocommerce-MyAccount-content .button {
  background: var(--navy) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 24px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-block !important;
}

.woocommerce-MyAccount-content [type="submit"]:hover,
.woocommerce-MyAccount-content .button:hover {
  background: var(--navy-mid, #2a4a9a) !important;
}

/* Address title / paragraph text */

.woocommerce-MyAccount-content .woocommerce-Address-title,
.woocommerce-MyAccount-content p {
  font-size: 13px !important;
  color: var(--ink) !important;
  line-height: 1.6 !important;
}


/* ══════════════════════════════════════════════════════════════════
   v29 FIXES — All issues patched in this block
   ══════════════════════════════════════════════════════════════════ */

/* 1. OTP Login — reduce excessive top padding on mobile */
@media (max-width: 680px) {
  .dg-otp-login-wrap {
    padding-top: 12px !important;
    padding-bottom: 24px !important;
  }
}

/* 2. Checkout page — remove any extra top padding (no page title means less space needed) */
body.woocommerce-checkout .site-main,
body.woocommerce-checkout #main,
body.woocommerce-checkout .content-area {
  padding-top: 0 !important;
}

/* 3. Checkout wrapper — remove double padding on mobile */
@media (max-width: 680px) {
  .qcw {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .qc-hdr {
    border-radius: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Remove any outer container padding on checkout */
  body.woocommerce-checkout .container,
  body.woocommerce-checkout #page,
  body.woocommerce-checkout .site-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* 4. "N people viewing" — shrink box to text width */
.dg-live-viewers {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100%;
}

/* 5. Single product — viewing box fix (via inline style override) */
.dg-viewing-bar {
  display: inline-flex !important;
  width: auto !important;
}

/* 6. Checkout footer */
.dgco-checkout-footer {
  text-align: center;
  padding: 20px 16px;
  border-top: 1px solid #E8EBF5;
  margin-top: 32px;
  font-size: 13px;
  color: #6B7280;
}
.dgco-checkout-footer a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}
.dgco-checkout-footer a:hover { text-decoration: underline; }

/* ── Fix 3: Hide site header & announcement on checkout — checkout has its own trust bar ── */
.woocommerce-checkout .dg-ribbon { display: none !important; }
.woocommerce-checkout .dg-header { display: none !important; }
/* Remove any top padding/margin from the checkout root so trust bar touches top of viewport */
body.woocommerce-checkout { padding-top: 0 !important; margin-top: 0 !important; }
body.woocommerce-checkout #page,
body.woocommerce-checkout .site,
body.woocommerce-checkout .site-content,
body.woocommerce-checkout .woocommerce-page,
body.woocommerce-checkout #main,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout .content-area,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .woocommerce { padding-top: 0 !important; margin-top: 0 !important; }
/* Belt+suspenders: hide breadcrumb on checkout (also suppressed in PHP) */
body.woocommerce-checkout .dg-breadcrumb { display: none !important; }
/* Ensure body itself has no top gap */
body.woocommerce-checkout { margin-top: 0 !important; padding-top: 0 !important; }
/* The QC JS builds its own trust bar inside the checkout UI — it is the first element */

/* ── Fix 13: Coupon row — icon alignment fix ── */

















/* Fix 10 extra: remove space wasted below checkout button */
.dg-cart-drawer-foot { padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
.dg-cart-checkout-btn { margin-bottom: 0 !important; }


/* ── Fix 3: Gallery zoom button + lightbox ── */
.dg-product-gallery-main { position: relative; }
.dg-gallery-zoom-btn {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px;
  background: rgba(255,255,255,.88);
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  transition: background .15s;
  color: var(--navy);
}
.dg-gallery-zoom-btn:hover { background: #fff; }
#dg-main-img { cursor: zoom-in; }

/* Thumbnail active state */
.dg-thumb { cursor: pointer; border: 2px solid transparent; border-radius: 6px; opacity: .7; transition: opacity .15s, border-color .15s; object-fit: cover; }
.dg-thumb:hover { opacity: 1; }
.dg-thumb.dg-thumb-active { border-color: var(--navy, var(--navy)); opacity: 1; }

/* Lightbox */
.dg-lightbox {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(10,15,35,.92);
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: dg-lb-in .18s ease;
}
@keyframes dg-lb-in { from { opacity: 0; } to { opacity: 1; } }
.dg-lightbox-inner {
  max-width: 90vw; max-height: 88vh;
  display: flex; align-items: center; justify-content: center;
}
.dg-lightbox-inner img {
  max-width: 90vw; max-height: 85vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.dg-lightbox-close {
  position: fixed; top: 18px; right: 20px;
  width: 40px; height: 40px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 100001;
  transition: background .15s;
}
.dg-lightbox-close:hover { background: rgba(255,255,255,.22); }
.dg-lightbox-prev, .dg-lightbox-next {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: #fff; cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  z-index: 100001; transition: background .15s;
}
.dg-lightbox-prev:hover, .dg-lightbox-next:hover { background: rgba(255,255,255,.22); }
.dg-lightbox-prev { left: 14px; }
.dg-lightbox-next { right: 14px; }

/* ── Sold-last-7-days badge ── */
.dg-sold-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: #C2410C;
  margin-bottom: 10px;
  background: #FFF7ED; border: 1px solid #FED7AA;
  border-radius: 100px; padding: 3px 10px 3px 7px;
}
/* ── Notify-me inline compact ── */
.dg-notify-inline {
  width: 100%;
}

/* Notify button — distinct from ATC yellow; uses navy/blue */
.dg-btn-notify {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 16px;
  background: var(--navy, #1A2B6B); color: #fff;
  border: none; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background .15s;
  line-height: 1;
}
.dg-btn-notify:hover { background: #243580; }
.dg-btn-notify:active { background: #131f52; }


/* ── Fix 11: Out-of-stock badge on product card ── */
.dg-btn-oos {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 10px;
  font-size: 11px; font-weight: 600; color: var(--muted,#94A3B8);
  background: #F1F5F9; border: 1px solid #E2E8F0;
  border-radius: var(--radius-sm, 8px);
  cursor: not-allowed; white-space: nowrap;
  flex: 1;
}

/* ── Fix 13: Guest orders toast ── */
.dg-guest-orders-toast {
  position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: var(--navy); color: #fff;
  padding: 10px 18px; border-radius: 100px;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 7px;
  opacity: 0; transition: opacity .25s, transform .25s;
  z-index: 9999; white-space: nowrap;
  pointer-events: none;
}
.dg-guest-orders-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Fix 15: WhatsApp float button ── */
.dg-wa-float {
  position: fixed;
  bottom: 24px; right: 20px;
  width: 48px; height: 48px;
  background: var(--wa-green,#25D366);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 4px 16px rgba(37,211,102,.38);
  z-index: 8888;
  transition: transform .18s, box-shadow .18s;
  text-decoration: none;
}
.dg-wa-float:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(37,211,102,.5);
}
/* On mobile push above bottom nav */
@media (max-width: 767px) {
  .dg-wa-float { bottom: 72px; right: 14px; width: 44px; height: 44px; }
}
/* Don't overlap on checkout */
.woocommerce-checkout .dg-wa-float { display: none; }

/* ── Fix 16: Recently viewed in empty cart ── */
.dg-cart-recent {
  padding: 12px 14px 0;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.dg-cart-recent-title {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: var(--muted,#94A3B8); text-transform: uppercase;
  margin-bottom: 10px;
}
.dg-cart-recent-grid { display: flex; flex-direction: column; gap: 8px; }
.dg-cart-recent-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 10px;
}
.dg-cart-recent-item img {
  width: 40px; height: 40px; object-fit: contain;
  border-radius: 6px; flex-shrink: 0;
  background: #fff;
}
.dg-cart-recent-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.dg-cart-recent-name {
  font-size: 12px; font-weight: 600; color: var(--ink,#1E293B);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dg-cart-recent-price {
  font-size: 11px; color: var(--navy); font-weight: 700;
}
.dg-cart-recent-atc {
  width: 30px; height: 30px; flex-shrink: 0;
  background: var(--navy); color: #fff;
  border: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s;
}
.dg-cart-recent-atc:hover { background: var(--navy-deep); }
.dg-cart-recent-oos {
  font-size: 10px; color: var(--muted,#94A3B8); font-weight: 500;
  white-space: nowrap;
}

/* ── Fix: WooCommerce reviews in product tab ── */
#tab-reviews .woocommerce-Reviews-title { display: none; } /* hidden — tab heading already there */
#tab-reviews .woocommerce-review-link   { font-size: 13px; color: var(--muted); }
#tab-reviews #reviews                   { outline: none; }
#tab-reviews .comment-respond          { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 24px; }
#tab-reviews .comment-reply-title      { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
#tab-reviews .comment-form label       { font-size: 12px; font-weight: 600; color: var(--slate); display: block; margin-bottom: 5px; }
#tab-reviews .comment-form input,
#tab-reviews .comment-form textarea    { width: 100%; border: 1.5px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 13px; outline: none; font-family: inherit; }
#tab-reviews .comment-form input:focus,
#tab-reviews .comment-form textarea:focus { border-color: var(--navy); }
#tab-reviews .comment-form textarea    { min-height: 100px; resize: vertical; }
#tab-reviews .form-submit .submit      { background: var(--navy); color: #fff; border: none; border-radius: 8px; padding: 10px 22px; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s; }
#tab-reviews .form-submit .submit:hover { opacity: .88; }
#tab-reviews .woocommerce-Reviews { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 14px; }
#tab-reviews .woocommerce-Reviews .comment_container { display: flex; gap: 12px; }
#tab-reviews .woocommerce-Reviews .comment-text { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
#tab-reviews .woocommerce-Reviews .star-rating   { margin-bottom: 6px; }
#tab-reviews .woocommerce-Reviews .woocommerce-review__author { font-weight: 700; font-size: 13px; color: var(--ink); }
#tab-reviews .woocommerce-Reviews .woocommerce-review__dash,
#tab-reviews .woocommerce-Reviews .woocommerce-review__published-date { font-size: 12px; color: var(--muted); }
#tab-reviews .woocommerce-Reviews .description p { font-size: 13px; color: var(--slate); line-height: 1.65; margin: 8px 0 0; }
#tab-reviews .stars a { font-size: 13px; }
/* Rating stars in review form */
#tab-reviews .stars span a { display: inline-block; }

/* ═══════════════════════════════════════════════════════════
   SEARCH DROPDOWN — No Results Panel + View All Link
═══════════════════════════════════════════════════════════ */

/* ── View All link — improved ── */
.dg-sd-viewall {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy, var(--navy));
  background: var(--teal-light);
  border-top: 1px solid #E2E8F0;
  text-decoration: none;
  border-radius: 0 0 12px 12px;
  transition: background .15s, color .15s;
  letter-spacing: .01em;
}
.dg-sd-viewall:hover {
  background: #E0E9FF;
  color: var(--navy-deep);
}
.dg-sd-viewall svg {
  flex-shrink: 0;
  opacity: .7;
}

/* ── No-results panel ── */
/* ── Search: No Results panel ── */
.dg-sd-noresult {
  padding: 0;
  overflow: hidden;
}

/* Top info row — icon + text side by side */
.dg-sd-nr-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border,#F1F5F9);
}
.dg-sd-nr-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--teal-light);
  border: 1px solid var(--border-mid);
  display: flex; align-items: center; justify-content: center;
  color: #6366F1;
  flex-shrink: 0;
  margin-top: 1px;
}
.dg-sd-nr-copy { flex: 1; min-width: 0; }
.dg-sd-nr-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink,#1E293B);
  margin: 0 0 3px;
  line-height: 1.35;
}
.dg-sd-nr-sub {
  font-size: 12px;
  color: var(--slate,#64748B);
  line-height: 1.5;
  margin: 0;
}
.dg-sd-nr-did-you-mean {
  font-size: 11.5px;
  color: var(--slate,#64748B);
  margin: 5px 0 0;
}
.dg-sd-nr-did-you-mean a { color: var(--navy); font-weight: 700; }

/* Bottom actions row */
.dg-sd-nr-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #FAFBFF;
}

/* WhatsApp button */
.dg-sd-nr-wa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: var(--wa-green,#25D366);
  color: #fff !important;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(37,211,102,.28);
  transition: filter .15s, transform .12s;
  white-space: nowrap;
  flex: 1;
  justify-content: center;
}
.dg-sd-nr-wa:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.dg-sd-nr-wa svg { flex-shrink: 0; }

/* divider */
.dg-sd-nr-divider {
  font-size: 11px;
  color: var(--muted,#94A3B8);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Browse all link */
.dg-sd-nr-browse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy) !important;
  text-decoration: none !important;
  padding: 9px 14px;
  border: 1.5px solid var(--border-mid);
  border-radius: 8px;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
  flex: 1;
  background: #fff;
}
.dg-sd-nr-browse:hover {
  background: var(--teal-light);
  border-color: var(--navy-mid,#00A0B4);
}

/* ── Fix 2: Mobile cart drawer foot — compact, no wasted space ── */
@media (max-width: 767px) {
  .dg-cart-drawer-foot {
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .dg-cart-checkout-btn {
    padding: 13px 16px !important;
    font-size: 14px !important;
  }
  .dg-cart-price-row {
    font-size: 12px !important;
  }
  .dg-cart-price-rows {
    margin-bottom: 8px !important;
  }
}

/* ── Fix 3: Coupon expanded panel — full restyle ── */

/* Toggle row */


























/* Expanded input panel */














































/* Message states */





















/* Applied coupon tag */











/* ═══════════════════════════════════════════════════════════
   FAQ PAGE — page-faq.php
═══════════════════════════════════════════════════════════ */

/* ── Hero ── */
.dg-faq-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  padding: 40px 0 32px;
  margin-bottom: 40px;
}
.dg-faq-hero-inner {
  display: flex;
  align-items: center;
  gap: 18px;
}
.dg-faq-hero-icon {
  width: 60px; height: 60px;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.dg-faq-hero-title {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.dg-faq-hero-sub {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  margin: 0;
  line-height: 1.5;
}
.dg-faq-hero-wa {
  color: #86EFAC;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.dg-faq-hero-wa:hover { text-decoration: underline; }

/* ── Wrap ── */
.dg-faq-wrap {
  max-width: 780px;
  padding-bottom: 72px;
}

/* ── Section ── */
.dg-faq-section {
  margin-bottom: 36px;
}
.dg-faq-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: .01em;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}
.dg-faq-section-title svg { flex-shrink: 0; color: var(--navy); opacity: .8; }

/* ── FAQ list ── */
.dg-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Single item ── */
.dg-faq-item {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.dg-faq-item:has(.dg-faq-q[aria-expanded="true"]) {
  border-color: var(--border-mid);
  box-shadow: 0 4px 18px rgba(26,43,107,.07);
}

/* ── Question button ── */
.dg-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .12s;
}
.dg-faq-q:hover { background: var(--bg); }
.dg-faq-q[aria-expanded="true"] { background: #F5F7FF; }

.dg-faq-q-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink,#1E293B);
  line-height: 1.45;
  flex: 1;
}
.dg-faq-q[aria-expanded="true"] .dg-faq-q-text { color: var(--navy); }

/* Chevron */
.dg-faq-chevron {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: var(--teal-light);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  transition: transform .22s cubic-bezier(.4,0,.2,1), background .15s;
}
.dg-faq-q[aria-expanded="true"] .dg-faq-chevron {
  transform: rotate(180deg);
  background: var(--border-mid);
}

/* ── Answer panel ── */
.dg-faq-a {
  padding: 0 18px 16px 18px;
  border-top: 1px solid var(--teal-light);
}
.dg-faq-a p {
  font-size: 13.5px;
  color: var(--slate,#475569);
  line-height: 1.7;
  margin: 14px 0 0;
}

/* ── Bottom CTA card ── */
.dg-faq-cta {
  margin-top: 48px;
  background: linear-gradient(135deg, var(--navy) 0%, #2D3D8F 100%);
  border-radius: 20px;
  padding: 36px 28px;
  text-align: center;
  color: #fff;
}
.dg-faq-cta-icon {
  width: 60px; height: 60px;
  background: var(--wa-green,#25D366);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 6px 20px rgba(37,211,102,.35);
}
.dg-faq-cta-title {
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 8px;
  letter-spacing: -.02em;
}
.dg-faq-cta-sub {
  font-size: 13.5px;
  opacity: .75;
  margin: 0 0 22px;
  line-height: 1.5;
}
.dg-faq-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--wa-green,#25D366);
  color: #fff;
  padding: 13px 26px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(37,211,102,.35);
  transition: transform .15s, box-shadow .15s;
}
.dg-faq-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,211,102,.45);
  color: #fff;
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .dg-faq-hero { padding: 28px 0 22px; margin-bottom: 24px; }
  .dg-faq-hero-title { font-size: 22px; }
  .dg-faq-hero-icon { width: 48px; height: 48px; border-radius: 12px; }
  .dg-faq-hero-sub { font-size: 13px; }
  .dg-faq-wrap { padding-bottom: 80px; }
  .dg-faq-section-title { font-size: 13px; }
  .dg-faq-q { padding: 14px 14px; }
  .dg-faq-q-text { font-size: 13.5px; }
  .dg-faq-a { padding: 0 14px 14px; }
  .dg-faq-cta { padding: 28px 18px; border-radius: 14px; }
  .dg-faq-cta-title { font-size: 18px; }
  .dg-faq-cta-btn { font-size: 13px; padding: 12px 20px; }
}

/* ════════════════════════════════════════════════════════════
   DOSAGE / STRENGTH SWITCHER  — single product + card
════════════════════════════════════════════════════════════ */

/* ── Single product page ── */
.dg-dosage-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 12px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

.dg-dosage-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--slate,#64748B);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  flex-shrink: 0;
}

.dg-dosage-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Inactive pill (link) */
.dg-dosage-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 14px !important;
  border-radius: 100px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border: 2px solid var(--navy) !important;
  color: var(--navy) !important;
  background: #fff !important;
  text-decoration: none !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition: background .15s, color .15s, border-color .15s !important;
  box-shadow: none !important;
}
a.dg-dosage-pill:hover {
  background: var(--navy) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Active pill (current page) */
.dg-dosage-pill--active {
  background: var(--navy) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
  cursor: default !important;
  pointer-events: none !important;
  box-shadow: 0 2px 8px rgba(26,43,107,.22) !important;
}

/* Mobile: stack label above pills */
@media (max-width: 480px) {
  .dg-dosage-switcher { flex-direction: column; align-items: flex-start; gap: 7px; }
}

/* ── Product card pills (archive / shop) ── */
.dg-dosage-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 10px 2px;
}
.dg-dosage-card-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border: 1.5px solid var(--border-mid) !important;
  color: var(--navy) !important;
  background: var(--teal-light) !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: background .12s, border-color .12s !important;
}
a.dg-dosage-card-pill:hover {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
}
.dg-dosage-card-pill--active {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
  cursor: default !important;
  pointer-events: none !important;
}
.dg-dosage-card-more {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted,#94A3B8);
  background: #F1F5F9;
  border: 1.5px solid #E2E8F0;
}

/* ══════════════════════════════════════════════════════════════
   COUPON APPLY BUTTON — final authoritative style: bordered button
   ══════════════════════════════════════════════════════════════ */


















/* ══════════════════════════════════════════════════════════════
   COUPON v49 — Premium redesign
   ══════════════════════════════════════════════════════════════ */

/* Wrapper row — full bleed green-tinted card, no border-top separator */
.dg-cart-coupon-row {
  margin: 10px 14px 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  border-top: none !important;
}

/* Toggle button — rich gradient card */
#dg-coupon-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 13px 14px !important;
  background: linear-gradient(135deg, #EEF9FF 0%, #F0FDF9 100%) !important;
  border: 1.5px solid #B2E8F0 !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: border-color .18s, box-shadow .18s, background .18s !important;
  text-align: left !important;
  font-family: var(--font-body) !important;
  box-shadow: 0 1px 4px rgba(0,160,180,.08) !important;
  position: relative !important;
  overflow: hidden !important;
}
#dg-coupon-toggle::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, var(--teal, #00A0B4), var(--navy, #1a2b6b)) !important;
  border-radius: 12px 0 0 12px !important;
}
#dg-coupon-toggle:hover {
  border-color: var(--teal, #00A0B4) !important;
  box-shadow: 0 2px 10px rgba(0,160,180,.15) !important;
  background: linear-gradient(135deg, #E0F7FA 0%, #E8FFF7 100%) !important;
}
#dg-coupon-toggle:focus-visible {
  outline: 2px solid var(--navy) !important;
  outline-offset: 2px !important;
}

/* Ticket icon bubble */
.dg-coupon-toggle-icon {
  width: 36px !important;
  height: 36px !important;
  background: linear-gradient(135deg, var(--teal, #00A0B4), #0077AA) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0,160,180,.3) !important;
}
.dg-coupon-toggle-icon svg { stroke: #fff !important; }

/* Text stack */
.dg-coupon-toggle-text {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-width: 0 !important;
}
#dg-coupon-toggle .dg-coupon-toggle-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--navy, #1a2b6b) !important;
  letter-spacing: .01em !important;
  line-height: 1.3 !important;
}
#dg-coupon-toggle .dg-coupon-toggle-sub {
  font-size: 10.5px !important;
  color: #64748B !important;
  margin-top: 2px !important;
  font-weight: 500 !important;
}

/* Chevron */
#dg-coupon-toggle .dg-coupon-chevron {
  flex-shrink: 0 !important;
  color: var(--teal, #00A0B4) !important;
  transition: transform 220ms cubic-bezier(.4,0,.2,1) !important;
  transform: rotate(0deg) !important;
}
#dg-coupon-toggle[aria-expanded="true"] .dg-coupon-chevron,
#dg-coupon-toggle.open .dg-coupon-chevron {
  transform: rotate(180deg) !important;
}

/* Panel that expands below the toggle */
#dg-coupon-input-wrap {
  display: none; /* JS controls visibility */
  margin: 6px 14px 0 !important;
  padding: 14px !important;
  background: #fff !important;
  border: 1.5px solid #B2E8F0 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,160,180,.07) !important;
}

/* Input + Apply row */
.dg-coupon-input-row {
  display: flex !important;
  gap: 0 !important;
  align-items: stretch !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.dg-coupon-input-row:focus-within {
  border-color: var(--navy, #1a2b6b) !important;
  box-shadow: 0 0 0 3px rgba(26,43,107,.09) !important;
}

#dg-coupon-code {
  flex: 1 !important;
  border: none !important;
  padding: 11px 14px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  outline: none !important;
  background: #FAFBFF !important;
  color: var(--ink, #1E293B) !important;
  min-width: 0 !important;
  font-family: monospace, var(--font-body) !important;
}
#dg-coupon-code::placeholder {
  color: #B0BACB !important;
  font-weight: 500 !important;
  letter-spacing: .05em !important;
  font-family: var(--font-body) !important;
}

#dg-coupon-apply {
  flex-shrink: 0 !important;
  background: var(--navy, #1a2b6b) !important;
  color: #fff !important;
  border: none !important;
  padding: 11px 20px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-family: var(--font-body) !important;
  letter-spacing: .04em !important;
  transition: background .15s !important;
}
#dg-coupon-apply:hover    { background: var(--teal, #00A0B4) !important; }
#dg-coupon-apply:disabled { opacity: .6 !important; cursor: wait !important; }

/* Success / error messages */
#dg-coupon-msg {
  display: none;
  margin-top: 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#dg-coupon-msg.success {
  display: flex !important;
  background: #DCFCE7 !important;
  color: #166534 !important;
  border: 1px solid #86EFAC !important;
}
#dg-coupon-msg.error {
  display: flex !important;
  background: #FFF1F2 !important;
  color: #9F1239 !important;
  border: 1px solid #FECDD3 !important;
}

/* Available coupon chips */
.dg-coupon-available {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid #E2E8F0 !important;
}
.dg-coupon-available-label {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #94A3B8 !important;
  margin-bottom: 8px !important;
  display: block !important;
}
.dg-coupon-chips {
  display: flex !important;
  gap: 7px !important;
  overflow-x: auto !important;
  padding-bottom: 3px !important;
  scrollbar-width: none !important;
  flex-wrap: nowrap !important;
}
.dg-coupon-chips::-webkit-scrollbar { display: none !important; }

.dg-available-coupon-chip {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  background: linear-gradient(135deg, #F0FDF9, #E8F8FF) !important;
  border: 1.5px dashed #6EE7B7 !important;
  border-radius: 9px !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: border-color .14s, background .14s, transform .12s, box-shadow .14s !important;
}
.dg-available-coupon-chip:hover {
  background: var(--navy, #1a2b6b) !important;
  border-color: var(--navy, #1a2b6b) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(26,43,107,.18) !important;
}
.dg-available-coupon-chip:hover .dg-ac-code,
.dg-available-coupon-chip:hover .dg-ac-label { color: #fff !important; }

.dg-ac-code {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  color: var(--navy, #1a2b6b) !important;
  font-family: monospace !important;
  line-height: 1.2 !important;
}
.dg-ac-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--green, #16A34A) !important;
  line-height: 1.2 !important;
}

/* Applied coupon badge */
.dg-cart-coupon-applied {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 10px 14px 0 !important;
  padding: 10px 13px !important;
  background: linear-gradient(135deg, #DCFCE7, #D1FAE5) !important;
  border: 1.5px solid #86EFAC !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #166534 !important;
}
.dg-cart-coupon-applied span { flex: 1 !important; }
.dg-remove-coupon {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 18px !important;
  color: #166534 !important;
  padding: 0 2px !important;
  line-height: 1 !important;
  opacity: 0.55 !important;
  transition: color .12s, opacity .12s !important;
}
.dg-remove-coupon:hover { color: #DC2626 !important; opacity: 1 !important; }

/* Hide legacy icon div (removed from HTML in v48) */
.dg-cart-coupon-icon { display: none !important; }

/* ══════════════════════════════════════════════════════════
   TRUSTPILOT WIDGET v3 — mobile-first — dg-tp-*
══════════════════════════════════════════════════════════ */

/* Section wrapper — flush full-width, no box */
.dg-tp-section {
  width: 100%;
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px 16px 32px;
  box-sizing: border-box;
}

/* Inner max-width container */
.dg-tp-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Top row: score + bars stacked on mobile ── */
.dg-tp-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Score block ── */
.dg-tp-score {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: #f5fffb;
  border: 1px solid #c8f0e0;
  border-radius: 12px;
}

.dg-tp-score-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.dg-tp-logo {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dg-tp-logo-mark {
  width: 20px;
  height: 20px;
  background: #00B77F;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dg-tp-logo-name {
  font-size: 14px;
  font-weight: 800;
  color: #121212;
  letter-spacing: -.02em;
}

.dg-tp-big-score {
  font-size: 48px;
  font-weight: 900;
  color: #121212;
  line-height: 1;
  letter-spacing: -.03em;
}

.dg-tp-stars-row {
  display: flex;
  gap: 3px;
}

.dg-tp-star {
  width: 24px;
  height: 24px;
  background: #00B77F;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dg-tp-star.dg-tp-star-half {
  position: relative;
  overflow: hidden;
  background: #DCDCE6;
}
.dg-tp-star.dg-tp-star-half::before {
  content: '';
  position: absolute;
  inset: 0 50% 0 0;
  background: #00B77F;
}
.dg-tp-star.dg-tp-star-empty { background: #DCDCE6; }

.dg-tp-score-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dg-tp-score-label {
  font-size: 15px;
  font-weight: 700;
  color: #121212;
}

.dg-tp-total {
  font-size: 12px;
  color: var(--slate);
  line-height: 1.4;
  margin: 0;
}

.dg-tp-total strong {
  color: var(--ink);
  font-weight: 700;
}

/* ── Bars block ── */
.dg-tp-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.dg-tp-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dg-tp-bar-lbl {
  font-size: 11px;
  color: var(--slate);
  min-width: 24px;
  text-align: right;
  flex-shrink: 0;
}

.dg-tp-bar-track {
  flex: 1;
  height: 10px;
  background: #DCDCE6;
  border-radius: 99px;
  overflow: hidden;
}

.dg-tp-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .3s ease;
}

.dg-tp-bar-num {
  font-size: 11px;
  color: var(--slate);
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Review cards grid ── */
.dg-tp-reviews {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Each review card — proper rectangle card */
.dg-tp-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.dg-tp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dg-tp-card-reviewer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dg-tp-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #00B77F;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .02em;
}

.dg-tp-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dg-tp-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.dg-tp-card-meta {
  font-size: 11.5px;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: 4px;
}

.dg-tp-card-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #00B77F;
  flex-shrink: 0;
}

.dg-tp-card-stars {
  display: flex;
  gap: 3px;
}

.dg-tp-card-stars .dg-tp-star {
  width: 17px;
  height: 17px;
  border-radius: 2px;
}

.dg-tp-card-text {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
  font-style: italic;
}

/* See all button */
.dg-tp-footer {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

.dg-tp-see-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #00B77F;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 7px;
  text-decoration: none;
  transition: background .15s ease;
  letter-spacing: .01em;
}

.dg-tp-see-all:hover {
  background: #009E6E;
  color: #fff;
  text-decoration: none;
}

/* ── Tablet (600px+): top row side-by-side, cards 2-col ── */
@media (min-width: 600px) {
  .dg-tp-top {
    flex-direction: row;
    align-items: stretch;
  }
  .dg-tp-score {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 180px;
    flex-shrink: 0;
  }
  .dg-tp-score-left {
    align-items: flex-start;
  }
  .dg-tp-bars {
    flex: 1;
  }
  .dg-tp-reviews {
    grid-template-columns: repeat(2, 1fr);
  }
  .dg-tp-footer {
    justify-content: flex-start;
  }
}

/* ── Desktop (960px+): single row layout ── */
@media (min-width: 960px) {
  .dg-tp-wrap {
    gap: 20px;
  }
  .dg-tp-reviews {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════
   ENHANCED SEARCH v2 — Recent, Trending, Categories, ATC
══════════════════════════════════════════════════════════ */

/* Recent searches */
.dg-sd-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 14px;
}
/* Minimal comma-separated recent searches row */
.dg-sd-recent-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 4px;
  padding: 7px 14px 7px;
  font-size: 12px;
  line-height: 1.5;
}
.dg-sd-recent-label {
  font-weight: 600;
  color: var(--muted, #6B7280);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 10px;
  flex-shrink: 0;
  margin-right: 4px;
}
.dg-sd-recent-terms {
  flex: 1;
  min-width: 0;
  color: var(--ink, #18181A);
}
.dg-sd-recent-sep {
  color: var(--muted, #9CA3AF);
}
.dg-sd-recent-inline {
  color: var(--ink, #18181A);
  text-decoration: none;
  transition: color .12s;
}
.dg-sd-recent-inline:hover { color: var(--navy, #008296); text-decoration: underline; }
.dg-sd-clear-inline {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--muted, #9CA3AF);
  padding: 0 0 0 8px;
  flex-shrink: 0;
  transition: color .12s;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dg-sd-clear-inline:hover { color: var(--red, #DC2626); }

/* ── v85: Past searches — pill-style with × remove ── */
.dg-sd-past-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px 4px;
}
.dg-sd-past-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted, #6B7280);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.dg-sd-clear-all {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--muted, #9CA3AF);
  padding: 0;
  transition: color .12s;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dg-sd-clear-all:hover { color: var(--red, #DC2626); }
.dg-sd-past-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 14px 10px;
}
.dg-sd-past-pill {
  display: inline-flex;
  align-items: center;
  background: var(--bg2, #F3F4F6);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 99px;
  overflow: hidden;
  transition: border-color .12s, background .12s;
}
.dg-sd-past-pill:hover { border-color: var(--navy, #008296); background: var(--bg, #F0FBFF); }
.dg-sd-past-pill-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px 4px 10px;
  font-size: 12px;
  color: var(--ink, #18181A);
  text-decoration: none;
  white-space: nowrap;
}
.dg-sd-past-pill-link:hover { color: var(--navy, #008296); }
.dg-sd-past-icon { opacity: .5; flex-shrink: 0; }
.dg-sd-past-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-left: 1px solid var(--border, #E5E7EB);
  cursor: pointer;
  padding: 4px 7px;
  color: var(--muted, #9CA3AF);
  transition: color .12s, background .12s;
}
.dg-sd-past-remove:hover { color: var(--red, #DC2626); background: #FEF2F2; }

/* ── v85: For-You personalised product row ── */
.dg-sd-for-you-row {
  display: flex;
  gap: 6px;
  padding: 4px 12px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.dg-sd-for-you-row::-webkit-scrollbar { display: none; }
.dg-sd-fy-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 72px;
  max-width: 80px;
  padding: 8px 6px 7px;
  background: var(--bg, #F8FAFF);
  border: 1.5px solid var(--border, #E5E7EB);
  border-radius: 10px;
  text-decoration: none;
  flex-shrink: 0;
  transition: border-color .15s, box-shadow .15s;
}
.dg-sd-fy-item:hover { border-color: var(--navy, #008296); box-shadow: 0 2px 8px rgba(0,130,150,.1); }
.dg-sd-fy-img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; }
.dg-sd-fy-placeholder {
  width: 40px; height: 40px;
  background: var(--navy, #008296);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #fff;
}
.dg-sd-fy-name {
  font-size: 10px;
  color: var(--ink, #18181A);
  font-weight: 600;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.dg-sd-fy-price {
  font-size: 10px;
  font-weight: 800;
  color: var(--navy, #008296);
}

/* Trending category grid */
.dg-sd-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px 12px 12px;
}
.dg-sd-cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px 8px;
  border-radius: 10px;
  background: var(--bg, #F8FAFF);
  border: 1.5px solid var(--border, #E5E7EB);
  text-decoration: none;
  transition: border-color .15s, background .15s, transform .12s;
  min-width: 0;
}
.dg-sd-cat-tile:hover {
  border-color: var(--navy, #008296);
  background: #E0F5F1;
  transform: translateY(-1px);
}
.dg-sd-ct-img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 8px;
  background: #E5E7EB;
}
.dg-sd-ct-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--navy, #008296) 0%, #00A0B4 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dg-sd-ct-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink, #18181A);
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.dg-sd-ct-count {
  font-size: 10px;
  color: #9CA3AF;
  font-weight: 500;
}

/* Product result row — now a flex wrapper with ATC button */
.dg-sd-result.dg-sd-product {
  display: flex;
  align-items: center;
  padding: 0;
  gap: 0;
}
.dg-sd-plink {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 8px 8px 8px 14px;
  text-decoration: none;
  color: inherit;
  border-radius: 6px 0 0 6px;
  transition: background .12s;
}
.dg-sd-result.dg-sd-product:hover .dg-sd-plink,
.dg-sd-result.dg-sd-product.focused .dg-sd-plink {
  background: var(--bg, #F8FAFF);
}
.dg-sd-pthumb {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 6px;
  background: #F8FAFF;
  flex-shrink: 0;
  border: 1px solid #E5E7EB;
}
.dg-sd-pprice { color: var(--navy, #008296); font-weight: 700; }

/* Add-to-cart button in search */
.dg-sd-atc {
  flex-shrink: 0;
  width: 36px;
  height: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border, #E5E7EB);
  cursor: pointer;
  color: #9CA3AF;
  border-radius: 0 6px 6px 0;
  transition: background .15s, color .15s;
  padding: 0 10px;
  text-decoration: none;
}
.dg-sd-atc:hover {
  background: var(--navy, #008296);
  color: #fff;
  border-left-color: var(--navy, #008296);
}
.dg-sd-atc.loading {
  pointer-events: none;
  opacity: .6;
}
.dg-sd-atc.added {
  background: #059669;
  color: #fff;
  border-left-color: #059669;
}
.dg-sd-atc-view { color: #CBD5E1; }
.dg-sd-atc-view:hover { background: #F1F5F9; color: var(--navy, #008296); border-left-color: #E2E8F0; }

/* Spinner in loading state */
.dg-sd-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid #E5E7EB;
  border-top-color: var(--navy, #008296);
  border-radius: 50%;
  animation: dg-spin .7s linear infinite;
  margin-right: 7px;
  vertical-align: middle;
}

/* Cart toast notification */
#dg-cart-toast {
  position: fixed;
  /* Mobile-first: sit above bottom nav + notch safe-area */
  bottom: calc(var(--mobile-bottom-nav-h, 62px) + 10px + env(safe-area-inset-bottom, 0px));
  right: 12px;
  left: 12px;
  z-index: 99999;
  max-width: none;
  width: auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
#dg-cart-toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dg-ct-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid #E0F5F1;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 8px 32px rgba(0,130,150,.14), 0 2px 8px rgba(0,0,0,.06);
}
.dg-ct-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;
  background: #F8FAFF;
  border: 1px solid #E5E7EB;
  flex-shrink: 0;
}
.dg-ct-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dg-ct-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #059669;
}
.dg-ct-name {
  font-size: 13px;
  font-weight: 600;
  color: #18181A;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dg-ct-price { font-size: 12px; color: var(--navy, #008296); font-weight: 700; }
.dg-ct-btn {
  display: inline-block;
  background: var(--navy, #008296);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .15s;
}
.dg-ct-btn:hover { opacity: .88; }
.dg-ct-close {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #9CA3AF;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color .15s;
}
.dg-ct-close:hover { color: #374151; }

/* Mobile adjustments */
@media (max-width: 480px) {
  .dg-sd-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  /* Cart toast must clear the bottom nav (62px) + safe-area on notched phones */
  #dg-cart-toast {
    bottom: calc(var(--mobile-bottom-nav-h, 62px) + 10px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
  }
  .dg-ct-btn { padding: 6px 10px; font-size: 11.5px; }
}
/* On desktop (768+) bottom nav is hidden, so default position is fine */
@media (min-width: 768px) {
  #dg-cart-toast { bottom: 24px; right: 24px; left: auto; width: 360px; max-width: 360px; }
}

/* ============================================================
   WHY OUR PRICES ARE HIGHER — PAGE TEMPLATE
   ============================================================ */

/* ── Hero ── */
.dg-wph-hero {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
  padding: 36px 0 32px;
  text-align: center;
}
.dg-wph-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #FFD814; margin-bottom: 14px;
}
.dg-wph-hero-h1 {
  color: var(--white); font-size: 24px; font-weight: 800;
  line-height: 1.2; margin-bottom: 12px; max-width: 540px;
  margin-left: auto; margin-right: auto;
}
.dg-wph-hero-sub {
  color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.65;
  max-width: 520px; margin: 0 auto 20px;
}
.dg-wph-hero-badges {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.dg-wph-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px; padding: 5px 12px;
  font-size: 11px; font-weight: 600; color: var(--white);
}

/* ── Wrap & Sections ── */
.dg-wph-wrap { display: flex; flex-direction: column; }

.dg-wph-section {
  padding: 36px 16px;
}
.dg-wph-section--alt { background: var(--bg); }
.dg-wph-section--dark {
  background: linear-gradient(135deg, var(--navy-deep), var(--navy));
  padding: 40px 16px;
}

.dg-wph-section-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--navy);
  background: rgba(0,130,150,.08); border-radius: 20px;
  padding: 4px 10px; margin-bottom: 12px;
}
.dg-wph-section-label--light {
  color: #FFD814; background: rgba(255,216,20,.15);
}
.dg-wph-section-h2 {
  font-size: 20px; font-weight: 800; line-height: 1.25;
  color: var(--ink); margin-bottom: 8px;
}
.dg-wph-h2--light { color: var(--white); }
.dg-wph-section-sub {
  font-size: 13px; color: var(--slate); line-height: 1.65; margin-bottom: 24px;
}
.dg-wph-sub--light { color: rgba(255,255,255,.75); }

/* ── Stats Bar ── */
.dg-wph-stats-bar { background: var(--white); border-bottom: 1px solid var(--border); padding: 20px 16px; }
.dg-wph-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; text-align: center; }
.dg-wph-stat-val { font-family: var(--font-head); font-size: 22px; font-weight: 900; color: var(--navy); line-height: 1; }
.dg-wph-stat-label { font-size: 10.5px; color: var(--slate); margin-top: 3px; line-height: 1.3; }

/* ── Brands ── */
.dg-wph-brands-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
.dg-wph-brand-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px;
  transition: box-shadow .2s;
}
.dg-wph-brand-card:hover { box-shadow: var(--shadow-md); }
.dg-wph-brand-logo-wrap {
  width: 120px; min-width: 120px; height: 60px; border-radius: 10px;
  border: 1.5px solid; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); padding: 6px 8px; overflow: hidden;
}
.dg-wph-brand-logo {
  max-width: 100%; max-height: 44px; width: auto; height: auto;
  object-fit: contain; display: block;
}
.dg-wph-brand-name { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.dg-wph-brand-desc { font-size: 11.5px; color: var(--slate); line-height: 1.5; }
.dg-wph-brand-note {
  display: flex; align-items: center; gap: 7px;
  background: rgba(0,130,150,.07); border: 1px solid rgba(0,130,150,.2);
  border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: 11.5px; color: var(--navy); font-weight: 500;
}

/* ── Compare ── */
.dg-wph-compare { display: grid; grid-template-columns: 1fr; gap: 14px; }
.dg-wph-compare-col {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.dg-wph-compare-col--them { border-color: #FECACA; }
.dg-wph-compare-col--us   { border-color: #BBF7D0; }
.dg-wph-compare-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }
.dg-wph-compare-head h3 { font-size: 13.5px; font-weight: 700; margin-top: 6px; }
.dg-wph-compare-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; padding: 2px 8px;
}
.dg-wph-compare-badge--red   { background: #FEE2E2; color: #B91C1C; }
.dg-wph-compare-badge--green { background: #DCFCE7; color: #15803D; }
.dg-wph-compare-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 16px; font-size: 12px; line-height: 1.5;
  border-bottom: 1px solid var(--border);
}
.dg-wph-compare-item:last-child { border-bottom: none; }
.dg-wph-compare-item svg { flex-shrink: 0; margin-top: 1px; }
.dg-wph-compare-item--bad  { color: var(--slate); background: #FFF5F5; }
.dg-wph-compare-item--good { color: var(--ink);   background: #F0FDF4; font-weight: 500; }

/* ── Approvals ── */
.dg-wph-approvals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dg-wph-approval-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px;
  transition: box-shadow .2s;
}
.dg-wph-approval-card:hover { box-shadow: var(--shadow-md); }
.dg-wph-approval-badge {
  display: inline-block; font-family: var(--font-head);
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  border-radius: 6px; padding: 4px 10px; margin-bottom: 8px;
}
.dg-wph-approval-name { font-size: 11.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; line-height: 1.3; }
.dg-wph-approval-desc { font-size: 11px; color: var(--slate); line-height: 1.5; }

/* ── VIP Grid ── */
.dg-wph-vip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dg-wph-vip-card {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-md); padding: 18px 14px; text-align: center;
}
.dg-wph-vip-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.15); margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
}
.dg-wph-vip-icon svg { stroke: rgba(255,255,255,.9) !important; }
.dg-wph-vip-title { font-size: 12.5px; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.dg-wph-vip-desc  { font-size: 11px; color: rgba(255,255,255,.65); line-height: 1.55; margin: 0; }

/* ── Reviews ── */
.dg-wph-reviews-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.dg-wph-review-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px; transition: box-shadow .2s;
}
.dg-wph-review-card:hover { box-shadow: var(--shadow-md); }
.dg-wph-review-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.dg-wph-review-author { display: flex; align-items: center; gap: 9px; }
.dg-wph-review-stars { margin-bottom: 8px; }

/* ── Verify Steps ── */
.dg-wph-verify-steps { display: flex; flex-direction: column; gap: 12px; }
.dg-wph-verify-step {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px;
}
.dg-wph-verify-num {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-family: var(--font-head); font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dg-wph-verify-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px;
}
.dg-wph-verify-desc { font-size: 12px; color: var(--slate); line-height: 1.55; margin: 0; }

/* ── CTA Section ── */
.dg-wph-cta-section {
  background: var(--white); border-top: 1px solid var(--border);
  padding: 40px 20px; text-align: center;
}
.dg-wph-cta-icon { margin-bottom: 14px; }
.dg-wph-cta-h2 { font-size: 20px; font-weight: 800; line-height: 1.25; margin-bottom: 10px; }
.dg-wph-cta-sub { font-size: 13px; color: var(--slate); line-height: 1.65; max-width: 500px; margin: 0 auto 22px; }
.dg-wph-cta-btns { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-bottom: 24px; }
.dg-wph-cta-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #FFD814; color: #0F1111; font-family: var(--font-head);
  font-size: 14px; font-weight: 800; padding: 13px 28px; border-radius: 10px;
  border: 1.5px solid #C7A600; transition: background .15s; width: 100%; max-width: 300px;
  justify-content: center;
}
.dg-wph-cta-primary:hover { background: #F0CA00; color: #0F1111; }
.dg-wph-cta-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); color: var(--navy); font-family: var(--font-head);
  font-size: 13.5px; font-weight: 700; padding: 12px 24px; border-radius: 10px;
  border: 1.5px solid var(--navy); transition: background .15s; width: 100%; max-width: 300px;
  justify-content: center;
}
.dg-wph-cta-secondary:hover { background: var(--bg); color: var(--navy); }
.dg-wph-cta-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
.dg-wph-cta-trust-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--slate); font-weight: 500;
}

/* ── Responsive: 600px+ ── */
@media (min-width: 600px) {
  .dg-wph-hero-h1 { font-size: 28px; }
  .dg-wph-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .dg-wph-brands-grid { grid-template-columns: 1fr 1fr; }
  .dg-wph-compare { grid-template-columns: 1fr 1fr; }
  .dg-wph-reviews-grid { grid-template-columns: 1fr 1fr; }
  .dg-wph-cta-btns { flex-direction: row; justify-content: center; }
  .dg-wph-cta-primary, .dg-wph-cta-secondary { width: auto; max-width: none; }
}

/* ── Responsive: 768px+ ── */
@media (min-width: 768px) {
  .dg-wph-hero { padding: 56px 0 48px; }
  .dg-wph-hero-h1 { font-size: 36px; }
  .dg-wph-section { padding: 52px 24px; max-width: 900px; margin: 0 auto; width: 100%; }
  .dg-wph-section--dark { max-width: none; padding: 52px 24px; }
  .dg-wph-section--dark > * { max-width: 860px; margin-left: auto; margin-right: auto; }
  .dg-wph-stats-bar .container { max-width: 860px; }
  .dg-wph-brands-grid { grid-template-columns: repeat(3, 1fr); }
  .dg-wph-approvals-grid { grid-template-columns: repeat(3, 1fr); }
  .dg-wph-vip-grid { grid-template-columns: repeat(4, 1fr); }
  .dg-wph-reviews-grid { grid-template-columns: repeat(3, 1fr); }
  .dg-wph-section-h2 { font-size: 24px; }
  .dg-wph-stat-val { font-size: 28px; }
  .dg-wph-cta-section { padding: 60px 24px; }
  .dg-wph-cta-h2 { font-size: 26px; }
}

/* ═══════════════════════════════════════════════════════════════
   REVIEWS & SOCIAL PROOF PAGE  (dgr-*)
   Template: page-reviews.php
   Redesigned v2 — mobile-first, desktop-polished
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared section defaults ── */
.dgr-hero,
.dgr-trust-belt,
.dgr-rating-section,
.dgr-gallery-section,
.dgr-reviews-section,
.dgr-proof-section,
.dgr-country-section,
.dgr-trust-signals,
.dgr-submit-section,
.dgr-faq-section,
.dgr-cta-section { width: 100%; }

/* ══════════════════════════════════
   HERO
══════════════════════════════════ */
.dgr-hero {
  background: linear-gradient(150deg, #004F5C 0%, var(--navy-deep) 45%, #003A45 100%);
  color: #fff;
  padding: 48px 0 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.dgr-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 80%, rgba(0,162,180,.18) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(255,184,0,.08) 0%, transparent 50%);
  pointer-events: none;
}
.dgr-hero > .container { position: relative; z-index: 1; }

.dgr-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,184,0,.15);
  border: 1px solid rgba(255,184,0,.35);
  border-radius: 99px;
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #FFD55A;
  margin-bottom: 18px;
}
.dgr-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(24px, 6vw, 44px);
  font-weight: 900;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.dgr-hero-sub {
  font-size: 15px;
  color: rgba(255,255,255,.75);
  max-width: 500px;
  margin: 0 auto 36px;
  line-height: 1.65;
}

/* Hero stats — 2x2 on mobile, 4-col desktop */
.dgr-stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 680px;
  margin: 0 auto;
}
.dgr-stat-card {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 20px 14px 16px;
  backdrop-filter: blur(8px);
  text-align: center;
}
.dgr-stat-val {
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}
.dgr-stat-val span { font-size: 17px; opacity: .65; font-weight: 700; }
.dgr-stat-stars { color: var(--teal,#FFB800); font-size: 15px; margin: 5px 0 3px; }
.dgr-stat-lbl { font-size: 11px; color: rgba(255,255,255,.65); font-weight: 600; letter-spacing: .02em; }
.dgr-stat-delta { font-size: 10px; color: #4ade80; font-weight: 700; margin-top: 4px; }

/* ══════════════════════════════════
   TRUST BADGE BELT
══════════════════════════════════ */
.dgr-trust-belt {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0;
  overflow: hidden;
}
.dgr-trust-belt-inner {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
  padding: 0;
}
.dgr-trust-belt-inner::-webkit-scrollbar { display: none; }
.dgr-trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  padding: 13px 20px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.dgr-trust-badge:last-child { border-right: none; }
.dgr-tb-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dgr-tb-green  { background: #dcfce7; color: #16a34a; }
.dgr-tb-navy   { background: var(--primary-100,#cffafe); color: var(--primary-700,#005F6B); }
.dgr-tb-amber  { background: #fef9c3; color: #b45309; }
.dgr-tb-purple { background: #ede9fe; color: #6d28d9; }

/* ══════════════════════════════════
   SECTION SHARED HELPERS
══════════════════════════════════ */
.dgr-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.dgr-section-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
}
.dgr-proof-count-badge {
  background: #dcfce7;
  color: #15803d;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
}
.dgr-review-meta-note { font-size: 12px; color: var(--muted); }

/* ══════════════════════════════════
   RATING OVERVIEW
══════════════════════════════════ */
.dgr-rating-section {
  padding: 48px 0;
  background: var(--bg);
}
.dgr-rating-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
.dgr-rating-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
}
.dgr-rating-big {
  font-family: var(--font-head);
  font-size: 72px;
  font-weight: 900;
  color: var(--navy-deep);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -.04em;
}
.dgr-rating-stars-lg {
  color: #F59E0B;
  font-size: 26px;
  letter-spacing: 3px;
}
.dgr-rating-count { font-size: 12px; color: var(--muted); margin: 6px 0 22px; }

/* Rating bars */
.dgr-rating-bars { display: flex; flex-direction: column; gap: 7px; margin-bottom: 22px; }
.dgr-rbar-row { display: flex; align-items: center; gap: 8px; }
.dgr-rbar-label { font-size: 12px; font-weight: 700; color: var(--ink); width: 30px; flex-shrink: 0; }
.dgr-rbar-track {
  flex: 1;
  height: 7px;
  background: var(--bg2);
  border-radius: 99px;
  overflow: hidden;
}
.dgr-rbar-fill {
  height: 100%;
  background: linear-gradient(90deg, #F59E0B, #FFD700);
  border-radius: 99px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.dgr-rbar-pct { font-size: 11px; color: var(--muted); width: 32px; text-align: right; flex-shrink: 0; }

/* Platform badges */
.dgr-platform-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.dgr-plat-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
  min-width: 76px;
  background: var(--white);
}
.dgr-plat-badge:hover { border-color: var(--navy); box-shadow: 0 2px 10px rgba(0,130,150,.14); }
.dgr-plat-score { font-family: var(--font-head); font-size: 20px; font-weight: 900; color: var(--navy-deep); line-height: 1; }
.dgr-plat-score--sm { font-size: 12px; font-weight: 800; color: #16a34a; }
.dgr-plat-stars { color: #F59E0B; font-size: 11px; margin: 2px 0; }
.dgr-plat-name { font-size: 9px; font-weight: 800; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }

/* Tag cloud */
.dgr-tag-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.dgr-tag {
  display: inline-flex;
  align-items: center;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 99px;
  letter-spacing: .01em;
}

/* Metrics panel (dark card) */
.dgr-metrics-panel {
  background: linear-gradient(140deg, #004F5C 0%, var(--navy-deep) 100%);
  color: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 8px 32px rgba(0,80,100,.22);
}
.dgr-metrics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 8px;
}
.dgr-metrics-title { font-family: var(--font-head); font-size: 16px; font-weight: 800; }
.dgr-metrics-badge {
  background: #22c55e;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 99px;
  letter-spacing: .04em;
}
.dgr-metrics-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.dgr-hl {
  border-radius: 12px;
  padding: 14px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dgr-hl--g { background: rgba(34,197,94,.18); }
.dgr-hl--b { background: rgba(0,160,180,.2); }
.dgr-hl--y { background: rgba(255,184,0,.15); }
.dgr-hl--p { background: rgba(168,85,247,.15); }
.dgr-hl-icon { color: rgba(255,255,255,.75); flex-shrink: 0; }
.dgr-hl-val { font-family: var(--font-head); font-size: 22px; font-weight: 900; color: #fff; line-height: 1.1; }
.dgr-hl-lbl { font-size: 11px; color: rgba(255,255,255,.6); margin-top: 2px; }

.dgr-metric-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 22px; }
.dgr-metric-pill {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
}
.dgr-metric-pill-pct { font-family: var(--font-head); font-size: 20px; font-weight: 900; color: #FFD55A; }
.dgr-metric-pill-lbl { font-size: 10px; color: rgba(255,255,255,.55); margin-top: 3px; line-height: 1.3; }

.dgr-why-trusted { border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; }
.dgr-why-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.45); margin-bottom: 12px; }
.dgr-why-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 9px; font-size: 12.5px; color: rgba(255,255,255,.78); line-height: 1.5; }

/* ══════════════════════════════════
   DELIVERY PHOTO GALLERY
══════════════════════════════════ */
.dgr-gallery-section { padding: 48px 0; background: var(--white); }
.dgr-gallery-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.dgr-gallery-thumb {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--border);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  cursor: pointer;
  background: var(--bg);
}
.dgr-gallery-thumb:hover {
  border-color: var(--navy);
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0,130,150,.2);
}
.dgr-gallery-verified {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(22,163,74,.9);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  padding: 4px 0;
  letter-spacing: .04em;
}
.dgr-gallery-thumb--placeholder { background: var(--bg); }
.dgr-gallery-placeholder-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); font-weight: 600; }
.dgr-gallery-submit {
  background: var(--bg);
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  border-style: dashed;
  text-decoration: none;
}
.dgr-gallery-note { font-size: 11.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; }

/* ══════════════════════════════════
   REVIEWS GRID
══════════════════════════════════ */
.dgr-reviews-section { padding: 48px 0; background: var(--bg); }
.dgr-reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.dgr-review-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.dgr-review-card:hover {
  box-shadow: 0 6px 28px rgba(0,130,150,.1);
  transform: translateY(-2px);
  border-color: var(--navy-mid);
}
.dgr-review-card--featured {
  border-color: var(--navy);
  background: linear-gradient(135deg, #f0fdff 0%, #fff 100%);
  border-width: 2px;
}
.dgr-featured-banner {
  background: var(--navy-deep);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 6px;
  display: inline-block;
  width: fit-content;
}

/* Review card internals */
.dgr-review-head { display: flex; align-items: flex-start; justify-content: space-between; }
.dgr-review-author { display: flex; align-items: center; gap: 11px; }
.dgr-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy));
  color: #fff;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid rgba(0,130,150,.15);
}
.dgr-review-name { font-weight: 800; font-size: 14px; color: var(--ink); }
.dgr-review-meta { display: flex; align-items: center; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.dgr-review-flag { font-size: 14px; }
.dgr-review-country { font-size: 11px; color: var(--muted); }
.dgr-review-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #dcfce7;
  color: #16a34a;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
}
.dgr-stars { display: inline-flex; gap: 2px; align-items: center; }
.dgr-review-stars { display: flex; align-items: center; gap: 6px; }
.dgr-review-text {
  font-size: 14px;
  line-height: 1.65;
  color: #2C2C2C;
  margin: 0;
  flex: 1;
}
.dgr-review-photo-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dgr-review-photo { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; border: 1.5px solid var(--border); }
.dgr-order-proof {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 700;
  color: #15803d;
  flex-wrap: wrap;
  row-gap: 2px;
}
.dgr-review-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 5px;
}
.dgr-review-product { font-size: 11px; font-weight: 700; color: var(--navy-deep); background: #e0f2fe; padding: 3px 9px; border-radius: 99px; }
.dgr-review-date { font-size: 11px; color: var(--muted); }
.dgr-load-more-row { text-align: center; margin-top: 32px; }
.dgr-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--navy);
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
  padding: 11px 26px;
  border-radius: 9px;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.dgr-load-more-btn:hover { background: var(--navy); color: #fff; }

/* ══════════════════════════════════
   WHY TRUST — PROOF PILLARS
══════════════════════════════════ */
.dgr-proof-section { padding: 48px 0; background: var(--white); }
.dgr-proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.dgr-proof-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
  transition: box-shadow .2s, transform .2s;
}
.dgr-proof-item:hover { box-shadow: 0 6px 22px rgba(0,0,0,.07); transform: translateY(-2px); }
.dgr-proof-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.dgr-proof-icon--g { background: #dcfce7; color: #16a34a; }
.dgr-proof-icon--b { background: var(--primary-100,#cffafe); color: var(--primary-700,#005F6B); }
.dgr-proof-icon--y { background: #fef9c3; color: #b45309; }
.dgr-proof-item h4 { font-family: var(--font-head); font-size: 14px; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.dgr-proof-item p { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ══════════════════════════════════
   COUNTRY DELIVERY STATS
══════════════════════════════════ */
.dgr-country-section { padding: 48px 0; background: var(--bg); }
.dgr-country-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.dgr-country-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 16px;
  transition: border-color .15s, box-shadow .15s;
}
.dgr-country-card:hover { border-color: var(--navy); box-shadow: 0 4px 16px rgba(0,130,150,.1); }
.dgr-country-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dgr-country-flag { font-size: 26px; flex-shrink: 0; }
.dgr-country-name { font-weight: 800; font-size: 13px; color: var(--ink); }
.dgr-country-orders { font-size: 11px; color: var(--muted); margin-top: 1px; }
.dgr-country-success { font-size: 14px; font-weight: 900; font-family: var(--font-head); color: #16a34a; margin-left: auto; flex-shrink: 0; }
.dgr-country-bar-wrap { height: 5px; background: var(--bg2); border-radius: 99px; overflow: hidden; }
.dgr-country-bar-fill { height: 100%; background: linear-gradient(90deg, var(--navy-deep), var(--navy)); border-radius: 99px; }

/* ══════════════════════════════════
   TRUST SIGNALS BANNER
══════════════════════════════════ */
.dgr-trust-signals {
  padding: 40px 0;
  background: linear-gradient(140deg, var(--primary-800,#004F5C) 0%, var(--primary-700,#005F6B) 100%);
}
.dgr-ts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
}
.dgr-ts-item { padding: 8px 4px; }
.dgr-ts-icon { font-size: 26px; margin-bottom: 8px; }
.dgr-ts-val { font-family: var(--font-head); font-size: 24px; font-weight: 900; color: #FFD55A; line-height: 1; }
.dgr-ts-lbl { font-size: 11px; color: rgba(255,255,255,.6); margin-top: 4px; font-weight: 600; }

/* ══════════════════════════════════
   SUBMIT A REVIEW
══════════════════════════════════ */
.dgr-submit-section { padding: 48px 0; background: var(--bg); }
.dgr-submit-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 28px;
  text-align: center;
  max-width: 580px;
  margin: 0 auto;
  box-shadow: 0 4px 32px rgba(0,0,0,.06);
}
.dgr-submit-icon {
  width: 68px;
  height: 68px;
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: #16a34a;
}
.dgr-submit-card h3 { font-family: var(--font-head); font-size: 22px; font-weight: 900; color: var(--ink); margin: 0 0 10px; }
.dgr-submit-card p { font-size: 14px; color: var(--muted); max-width: 400px; margin: 0 auto 24px; line-height: 1.65; }
.dgr-submit-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.dgr-wa-btn {
  background: #25d366 !important;
  border-color: #25d366 !important;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 9px;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.dgr-wa-btn:hover { background: #1db954 !important; transform: translateY(-1px); }

/* ══════════════════════════════════
   FAQ
══════════════════════════════════ */
.dgr-faq-section { padding: 48px 0; background: var(--white); }
.dgr-faq-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dgr-faq-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  transition: border-color .15s;
}
.dgr-faq-item:hover { border-color: var(--navy-mid); }
.dgr-faq-q {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 9px;
  line-height: 1.4;
}
.dgr-faq-a { font-size: 13px; color: var(--slate); line-height: 1.65; margin: 0 0 0 22px; }

/* ══════════════════════════════════
   BOTTOM CTA
══════════════════════════════════ */
.dgr-cta-section {
  padding: 60px 0;
  background: linear-gradient(150deg, #004F5C 0%, var(--navy-deep) 60%, #003A45 100%);
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.dgr-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 50%, rgba(255,184,0,.08) 0%, transparent 60%);
  pointer-events: none;
}
.dgr-cta-section > .container { position: relative; z-index: 1; }
.dgr-cta-section h2 { font-family: var(--font-head); font-size: clamp(22px, 5vw, 36px); font-weight: 900; color: #fff; margin: 0 0 12px; letter-spacing: -.01em; }
.dgr-cta-section p { font-size: 15px; color: rgba(255,255,255,.72); max-width: 520px; margin: 0 auto 30px; line-height: 1.65; }
.dgr-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ══════════════════════════════════
   SHARED BUTTONS
══════════════════════════════════ */
.dg-btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal);
  color: var(--navy-deep) !important;
  font-weight: 900;
  font-size: 14px;
  padding: 13px 28px;
  border-radius: 9px;
  text-decoration: none;
  transition: background .15s, transform .1s;
  border: 2px solid var(--teal);
}
.dg-btn-solid:hover { background: #e0a500; border-color: #e0a500; transform: translateY(-1px); }
.dg-btn-outline-navy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #fff !important;
  font-weight: 800;
  font-size: 14px;
  padding: 13px 28px;
  border-radius: 9px;
  border: 2px solid rgba(255,255,255,.38);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.dg-btn-outline-navy:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* ══════════════════════════════════
   RESPONSIVE — TABLET (min 640px)
══════════════════════════════════ */
@media (min-width: 640px) {
  .dgr-stats-row { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .dgr-gallery-strip { grid-template-columns: repeat(4, 1fr); }
  .dgr-reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .dgr-proof-grid { grid-template-columns: repeat(2, 1fr); }
  .dgr-country-grid { grid-template-columns: repeat(3, 1fr); }
  .dgr-ts-grid { grid-template-columns: repeat(5, 1fr); }
  .dgr-faq-grid { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════
   RESPONSIVE — DESKTOP (min 900px)
══════════════════════════════════ */
@media (min-width: 900px) {
  .dgr-hero { padding: 72px 0 60px; }
  .dgr-hero h1 { font-size: 48px; }
  .dgr-stat-card { padding: 24px 16px 20px; }
  .dgr-stat-val { font-size: 36px; }

  .dgr-trust-badge { padding: 15px 28px; }

  .dgr-rating-section { padding: 64px 0; }
  .dgr-rating-grid { grid-template-columns: 1fr 1.1fr; gap: 32px; }

  .dgr-gallery-section { padding: 64px 0; }
  .dgr-gallery-strip { grid-template-columns: repeat(7, 1fr); gap: 12px; }

  .dgr-reviews-section { padding: 64px 0; }
  .dgr-reviews-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }

  .dgr-proof-section { padding: 64px 0; }
  .dgr-proof-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }

  .dgr-country-section { padding: 64px 0; }
  .dgr-country-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .dgr-country-card { text-align: center; }
  .dgr-country-top { flex-direction: column; gap: 6px; }
  .dgr-country-success { margin-left: 0; }

  .dgr-trust-signals { padding: 52px 0; }
  .dgr-ts-grid { gap: 24px; }

  .dgr-submit-section { padding: 64px 0; }
  .dgr-submit-card { padding: 48px 40px; }

  .dgr-faq-section { padding: 64px 0; }

  .dgr-cta-section { padding: 80px 0; }

  .dgr-section-title { font-size: 22px; }

  .dgr-metrics-highlights { grid-template-columns: 1fr 1fr; }
  .dgr-metric-pills { grid-template-columns: repeat(3, 1fr); }

  .dgr-rating-big { font-size: 80px; }
}



/* ══════════════════════════════════════════════════════════
   CART DRAWER — TIP SECTION
══════════════════════════════════════════════════════════ */
/* ── DG Donation Section (Blinkit-style) ─────────────────────────── */
.dg-donation-wrap {
    margin: 12px 14px 0;
    background: #fff;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
}
.dg-donation-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
}
.dg-donation-icon-wrap {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #FFF3E0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #FFD0A8;
}
.dg-donation-text {
    flex: 1;
    min-width: 0;
}
.dg-donation-title {
    display: block;
    font-size: 12.5px;
    font-weight: 800;
    color: #1C1C1E;
    line-height: 1.25;
    font-family: var(--dg-font-head, 'Outfit', sans-serif);
}
.dg-donation-sub {
    display: block;
    font-size: 10px;
    color: #6B7280;
    font-weight: 500;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dg-donation-check-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex-shrink: 0;
}
.dg-donation-amount {
    font-size: 13px;
    font-weight: 800;
    color: #374151;
}
.dg-donation-checkbox-outer {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid #D1D5DB;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .18s, background .18s;
    flex-shrink: 0;
}
.dg-donation-checkbox-outer.dg-donation-checked {
    border-color: #16A34A;
    background: #16A34A;
}
.dg-donation-checkbox {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
    inset: 0;
}
.dg-donation-checkmark {
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity .18s, transform .18s;
}
.dg-donation-checked .dg-donation-checkmark {
    opacity: 1;
    transform: scale(1);
}

/* ── DG Tip Section (Blinkit-style) ─────────────────────────────── */
.dg-tip-wrap {
    margin: 10px 14px 0;
    background: #fff;
    border: 1.5px solid #E5E7EB;
    border-radius: 14px;
    padding: 14px 14px 12px;
}
.dg-tip-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}
.dg-tip-heart {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.dg-tip-title-group {
    flex: 1;
    min-width: 0;
}
.dg-tip-title {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    color: #1C1C1E;
    line-height: 1.2;
    font-family: var(--dg-font-head, 'Outfit', sans-serif);
}
.dg-tip-sub {
    display: block;
    font-size: 10.5px;
    color: #6B7280;
    font-weight: 500;
    margin-top: 2px;
    line-height: 1.4;
}
.dg-tip-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-bottom: 10px;
}
.dg-tip-chip {
    position: relative;
    background: #F9FAFB;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    padding: 10px 4px 8px;
    cursor: pointer;
    text-align: center;
    transition: border-color .18s, background .18s, box-shadow .18s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.dg-tip-chip-emoji {
    font-size: 18px;
    line-height: 1;
    display: block;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.dg-tip-chip-amt {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    line-height: 1;
    display: block;
}
/* Green chip */
.dg-tip-chip--green { border-color: #BBF7D0; background: #F0FDF4; }
.dg-tip-chip--green .dg-tip-chip-amt { color: #15803D; }
.dg-tip-chip--green:hover, .dg-tip-chip--green.dg-tip-chip-active {
    border-color: #16A34A !important;
    background: #DCFCE7 !important;
    box-shadow: 0 0 0 2.5px rgba(22,163,74,.15) !important;
}
/* Red chip */
.dg-tip-chip--red { border-color: #FECDCd; background: #FFF5F5; }
.dg-tip-chip--red .dg-tip-chip-amt { color: #DC2626; }
.dg-tip-chip--red:hover, .dg-tip-chip--red.dg-tip-chip-active {
    border-color: #EF4444 !important;
    background: #FEE2E2 !important;
    box-shadow: 0 0 0 2.5px rgba(239,68,68,.15) !important;
}
/* Pink chip */
.dg-tip-chip--pink { border-color: #FBCFE8; background: #FDF2F8; }
.dg-tip-chip--pink .dg-tip-chip-amt { color: #BE185D; }
.dg-tip-chip--pink:hover, .dg-tip-chip--pink.dg-tip-chip-active {
    border-color: #EC4899 !important;
    background: #FCE7F3 !important;
    box-shadow: 0 0 0 2.5px rgba(236,72,153,.15) !important;
}
/* Gold chip */
.dg-tip-chip--gold { border-color: #FDE68A; background: #FFFBEB; }
.dg-tip-chip--gold .dg-tip-chip-amt { color: #B45309; }
.dg-tip-chip--gold:hover, .dg-tip-chip--gold.dg-tip-chip-active {
    border-color: #F59E0B !important;
    background: #FEF3C7 !important;
    box-shadow: 0 0 0 2.5px rgba(245,158,11,.15) !important;
}
.dg-tip-chip-active .dg-tip-chip-amt { font-weight: 800; }
.dg-tip-popular {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: #F59E0B;
    color: #fff;
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: .04em;
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}
.dg-tip-custom-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 8px;
    border: 1.5px solid #F97316;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.dg-tip-custom-prefix {
    padding: 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #F97316;
    border-right: 1px solid #F97316;
    line-height: 36px;
    background: #FFF7ED;
}
.dg-tip-custom-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #1C1C1E;
    background: #fff;
    height: 36px;
    -moz-appearance: textfield;
}
.dg-tip-custom-input::-webkit-outer-spin-button,
.dg-tip-custom-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dg-tip-custom-apply {
    background: #F97316;
    color: #fff;
    border: none;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    height: 36px;
    transition: background .15s;
}
.dg-tip-custom-apply:hover { background: #EA6C0A; }
.dg-tip-applied-row {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #DCFCE7;
    border: 1px solid #86EFAC;
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: #166534;
    margin-top: 4px;
}
.dg-tip-applied-row span { flex: 1; }
.dg-tip-remove {
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 700;
    color: #dc2626;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    flex-shrink: 0;
}
.dg-tip-remove:hover { color: #b91c1c; }


/* ═══════════════════════════════════════════════════════════════════
   DG-CDP v1.0 — Personalisation CSS
   Segment-specific hero, CTA, urgency, and offer variants.
   No-flicker: these classes are applied by dg-cdp-noflicker script
   before first paint so there is zero layout shift.
═══════════════════════════════════════════════════════════════════ */

/* ── Hero Variants ──────────────────────────────────────────────── */
/* Default: show generic hero, hide all segment-specific ones */
.dg-hero-ed,
.dg-hero-hairloss,
.dg-hero-weightloss,
.dg-hero-skincare,
.dg-hero-loyalty,
.dg-hero-reorder,
.dg-hero-cart-abandoner { display: none !important; }
.dg-hero-default         { display: block; }

/* Segment overrides — each class is added to <html> by the no-flicker script */
.dg-seg-high-intent-ed        .dg-hero-ed,
.dg-seg-high-intent-hairloss  .dg-hero-hairloss,
.dg-seg-high-intent-weightloss .dg-hero-weightloss,
.dg-seg-high-intent-skincare  .dg-hero-skincare,
.dg-seg-vip-customer          .dg-hero-loyalty,
.dg-seg-at-risk-vip           .dg-hero-loyalty,
.dg-seg-reorder-due           .dg-hero-reorder,
.dg-seg-cart-abandoner        .dg-hero-cart-abandoner { display: block !important; }

.dg-seg-high-intent-ed        .dg-hero-default,
.dg-seg-high-intent-hairloss  .dg-hero-default,
.dg-seg-high-intent-weightloss .dg-hero-default,
.dg-seg-high-intent-skincare  .dg-hero-default,
.dg-seg-vip-customer          .dg-hero-default,
.dg-seg-at-risk-vip           .dg-hero-default,
.dg-seg-reorder-due           .dg-hero-default,
.dg-seg-cart-abandoner        .dg-hero-default { display: none !important; }

/* ── Trust / urgency badges ─────────────────────────────────────── */
.dg-cdp-urgency             { display: none; }
.dg-seg-high-intent-buyer   .dg-cdp-urgency,
.dg-seg-cart-abandoner      .dg-cdp-urgency,
.dg-seg-reorder-due         .dg-cdp-urgency { display: flex !important; }

/* ── Coupon-hunter cart upsell strip ────────────────────────────── */
.dg-cdp-coupon-strip        { display: none; }
.dg-seg-coupon-hunter       .dg-cdp-coupon-strip { display: block !important; }

/* ── VIP / loyalty welcome banner ───────────────────────────────── */
.dg-cdp-vip-banner          { display: none; }
.dg-seg-vip-customer        .dg-cdp-vip-banner,
.dg-seg-brand-champion      .dg-cdp-vip-banner { display: block !important; }

/* ── New-visitor welcome banner ─────────────────────────────────── */
.dg-cdp-new-visitor-banner  { display: none; }
.dg-seg-new-visitor         .dg-cdp-new-visitor-banner { display: block !important; }

/* ── Reorder strip on product page ─────────────────────────────── */
.dg-cdp-reorder-strip       { display: none; }
.dg-seg-reorder-due         .dg-cdp-reorder-strip { display: flex !important; }

/* ── Price-sensitive offer on cart ──────────────────────────────── */
.dg-cdp-price-sensitive-offer { display: none; }
.dg-seg-coupon-hunter         .dg-cdp-price-sensitive-offer,
.dg-seg-high-aov              .dg-cdp-price-sensitive-offer { display: block !important; }

/* ── Mobile PWA prompt ─────────────────────────────────────────── */
.dg-cdp-pwa-prompt          { display: none; }
.dg-seg-mobile-only         .dg-cdp-pwa-prompt { display: flex !important; }

/* ── Floating intent bar (T05) ───────────────────────────────────── */
.dg-cdp-intent-bar {
    display: none;
    position: fixed;
    bottom: 72px; /* above mobile nav */
    left: 0;
    right: 0;
    z-index: 9800;
    background: var(--navy, #008296);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 20px;
    text-align: center;
    box-shadow: 0 -2px 12px rgba(0,0,0,.18);
}
.dg-cdp-intent-bar a { color: #FFD814; text-decoration: underline; }
.dg-cdp-intent-bar .dg-cdp-intent-close {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* T05: show intent bar if flag is set (added by trigger JS) */
body.dg-cdp-show-intent-bar .dg-cdp-intent-bar {
    display: block;
}

/* ── CDP Admin Dashboard Styles (admin-side, scoped) ──────────── */
.dg-cdp-admin-wrap {
    max-width: 1200px;
}

/* ══════════════════════════════════════════════════════════
   DG v80 — CART RECOMMENDATIONS (You May Also Like)
══════════════════════════════════════════════════════════ */
.dg-cart-recs-wrap {
  margin: 14px 0 4px;
  padding: 14px 16px 10px;
  background: #f8f9ff;
  border-radius: 12px;
  border: 1px solid #e8ecf8;
}
.dg-cart-recs-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.dg-cart-recs-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--navy, #008296);
}
.dg-cart-recs-subtitle {
  font-size: 11px;
  color: var(--muted, #888);
}
.dg-cart-recs-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dg-cart-recs-scroll::-webkit-scrollbar { display: none; }

.dg-cart-rec-card {
  flex: 0 0 140px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .18s, transform .18s;
}
.dg-cart-rec-card:hover {
  box-shadow: 0 4px 14px rgba(0,130,150,.13);
  transform: translateY(-2px);
}
.dg-rec-img-link { display: block; }
.dg-rec-img-wrap {
  position: relative;
  width: 100%;
  height: 80px;
  background: #f0f9ff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dg-rec-img-wrap img {
  width: 100%;
  height: 80px;
  object-fit: contain;
}
.dg-rec-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: var(--amber, #E77600);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  border-radius: 4px;
  padding: 2px 5px;
  letter-spacing: .04em;
}
.dg-rec-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
}
.dg-rec-info {
  padding: 8px 9px 4px;
  flex: 1;
}
.dg-rec-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  line-height: 1.35;
  margin-bottom: 5px;
}
.dg-rec-name:hover { color: var(--navy, #008296); }
.dg-rec-price-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.dg-rec-price {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--navy, #008296);
}
.dg-rec-reg {
  font-size: 10.5px;
  color: var(--muted, #888);
  text-decoration: line-through;
}
.dg-rec-atc {
  display: block;
  width: calc(100% - 18px);
  margin: 0 9px 9px;
  background: var(--navy, #008296);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 7px 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.dg-rec-atc:hover { background: var(--navy-mid, #00A0B4); transform: translateY(-1px); }
.dg-rec-atc:active { transform: translateY(0); }
.dg-rec-oos {
  display: block;
  text-align: center;
  font-size: 10.5px;
  color: var(--muted, #888);
  margin: 0 9px 9px;
}

/* Skeleton loader */
.dg-cart-recs-loading {
  margin: 14px 0 4px;
  padding: 14px 16px 10px;
  background: #f8f9ff;
  border-radius: 12px;
  border: 1px solid #e8ecf8;
}
.dg-cart-recs-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--navy, #008296);
  margin-bottom: 12px;
}
.dg-cart-recs-row {
  display: flex;
  gap: 10px;
  overflow: hidden;
}
.dg-cart-rec-skeleton {
  flex: 0 0 140px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: 9px;
}
.dg-cart-rec-sk-img {
  width: 100%;
  height: 80px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: dg-shimmer 1.4s infinite;
}
.dg-cart-rec-sk-line {
  height: 10px;
  margin: 8px 9px 4px;
  border-radius: 5px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: dg-shimmer 1.4s infinite;
}
@keyframes dg-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════
   DG v82 — AUTO COUPON BAR: Compact applied state
══════════════════════════════════════════════════════════ */
.dg-cart-auto-coupon {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--primary-700,#005F6B) 0%, var(--primary-500,#008296) 100%);
  border-radius: 8px;
  padding: 7px 10px;
  margin: 6px 0 4px;
  position: relative;
  overflow: hidden;
}
.dg-cart-auto-coupon-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: rgba(255,255,255,.18);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dg-cart-auto-coupon-text { flex: 1; min-width: 0; }
.dg-cart-auto-coupon-title {
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .2px;
  line-height: 1.3;
}
.dg-cart-auto-coupon-sub {
  font-size: 10px;
  color: rgba(255,255,255,.82);
  margin-top: 2px;
  line-height: 1.3;
}
.dg-cart-auto-coupon-badge {
  flex-shrink: 0;
  background: rgba(255,255,255,.2);
  color: #fff;
  border-radius: 20px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: .3px;
}
/* Legacy apply button — hidden now that coupon is auto-applied */
.dg-cart-auto-coupon-apply { display: none; }

/* ══════════════════════════════════════════════════════════
   DG v80 — GEO POPULAR SECTION: emoji flag
══════════════════════════════════════════════════════════ */
.dg-geo-section .dg-section-title { display: flex; align-items: center; gap: 5px; }

/* ═══════════════════════════════════════════════════════════
   DG PERSONALISATION ENGINE — v84.0
   Name-based UI, journey stage CSS classes, collab section
   ═══════════════════════════════════════════════════════════ */

/* Journey stage body classes */
body.dg-journey-loyalty .dg-hero-badge { background: #FEF3C7; color: #92400E; }
body.dg-journey-loyalty .dg-section-title { color: var(--brand); }
body.dg-journey-churn_risk .dg-ribbon { background: linear-gradient(90deg, #7F1D1D, #991B1B); }
/* checkout button glow removed */

/* Personalised greeting in header — already exists, just enhance */
.dg-account-btn span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Collab section */
.dg-collab-section .dg-section-title { font-size: 15px; }

/* Product affinity match badge */
.dg-affinity-match {
  background: #E0F5F1;
  border: 1px solid #B2E8E0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #065F46;
  font-weight: 600;
  margin: 6px 0;
}

/* Reorder badge on product card */
.dg-reorder-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--navy,#008296);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 12px;
  letter-spacing: .03em;
  z-index: 2;
}

/* My account personalised welcome */
.dg-account-welcome {
  background: linear-gradient(135deg, #E0F5F1 0%, #F0FAFB 100%);
  border: 1px solid #B2E8E0;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Feature flag admin */
.dg-flag-table { max-width: 600px; }

/* Personalised search — shimmer placeholder effect */
input[id*="search"]::placeholder { color: #6B7280; font-style: italic; font-size: 13px; }

/* Journey progress indicator (optional visual) */
.dg-journey-indicator {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 10px;
  color: var(--muted);
}
.dg-journey-indicator .dg-ji-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
}
.dg-journey-indicator .dg-ji-dot.active { background: var(--brand); }


/* ══════════════════════════════════════════════════════════════
   v85-FIX — PERFORMANCE + DUPLICATE SECTION GUARD
   Added: GPU hints, contain, duplicate-recs safeguard
══════════════════════════════════════════════════════════════ */

/* GPU-accelerate the cart drawer slide animation */
.dg-cart-drawer {
  will-change: transform;
  contain: layout style;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Optimise cart body scroll rendering */
.dg-cart-drawer-body {
  contain: strict;
  overscroll-behavior: contain;
}

/* Safeguard: if the old JS "You May Also Like" recs section ever
   appears alongside the PHP cross-sell slider, hide the JS one.
   The PHP slider has id="dg-cs-drawer"; the JS one uses id="dg-cart-recs-wrap". */
.dg-cs-drawer-wrap ~ #dg-cart-recs-wrap,
#dg-cs-drawer ~ #dg-cart-recs-wrap,
#dg-cart-recs-wrap + #dg-cart-recs-wrap {
  display: none !important;
}

/* .dg-ribbon-track GPU hints merged into primary definition above */

/* Skeleton loader for cross-sell cards — prevent layout shift */
.dg-cs-card { contain: layout style; }

/* ══════════════════════════════════════════════════════════════
   v86 CONSOLIDATED — Cart Drawer Cross-Sell Slider
   (Moved from inline <style> in dgsf_render_cart_drawer_crosssells()
    to avoid per-AJAX-call style injection. Bug fix #4.)
══════════════════════════════════════════════════════════════ */
.dg-cs-drawer-wrap{margin:10px 14px 4px;padding:0}
.dg-cs-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:0 0 8px}
.dg-cs-drawer-title{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--navy,#008296)}
.dg-cs-drawer-sub{font-size:10px;color:var(--muted,#9CA3AF);font-weight:500}
.dg-cs-drawer-slider{
  display:flex;gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  margin:0;
  padding:2px 0 14px;
  box-sizing:border-box;
}
.dg-cs-drawer-slider::-webkit-scrollbar{display:none}
.dg-cs-card{
  flex:0 0 120px;
  min-width:120px;
  scroll-snap-align:start;
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow .15s,transform .15s;
  contain:layout style;
}
.dg-cs-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.1);transform:translateY(-1px)}
.dg-cs-card-img{display:flex;align-items:center;justify-content:center;height:72px;position:relative;overflow:hidden;text-decoration:none;flex-shrink:0}
.dg-cs-card-img img{width:100%;height:100%;object-fit:cover}
.dg-cs-badge{position:absolute;top:4px;left:4px;background:#E53935;color:#fff;font-size:9px;font-weight:800;border-radius:99px;padding:1px 5px;line-height:1.4}
.dg-cs-card-body{padding:8px 8px 9px;display:flex;flex-direction:column;gap:4px;flex:1}
.dg-cs-card-name{font-size:11px;font-weight:600;color:var(--ink,#0F1111);text-decoration:none;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dg-cs-card-price-row{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.dg-cs-price{font-size:12.5px;font-weight:800;color:var(--navy,#008296)}
.dg-cs-price-orig{font-size:10px;color:#9CA3AF;text-decoration:line-through}
.dg-cs-atc-btn{
  margin-top:auto;width:100%;
  background:var(--navy,#008296);color:#fff;
  border:none;border-radius:6px;
  padding:6px 0;font-size:10.5px;font-weight:700;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:3px;
  transition:background .15s;
  white-space:nowrap;
}
.dg-cs-atc-btn:hover{background:var(--navy-deep,#005F6B)}
.dg-cs-atc-btn.loading{opacity:.55;pointer-events:none}
.dg-cs-atc-btn.added{background:#16a34a}

/* ══════════════════════════════════════════════════════════════
   DG SUPPORT WIDGET — Right Sidebar Support Card + Mobile Popup
   (Replaces dg-rsb-dynamic price card on product pages)
   Version: 1.0
   ══════════════════════════════════════════════════════════════ */

/* ── Right Sidebar Support Card ── */
.dg-rsb-support-card {
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.dg-rsb-support-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8392a5;
  margin-bottom: 8px;
}
.dg-rsb-support-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-radius: 0;
  text-decoration: none;
  transition: opacity .15s;
  margin-bottom: 0;
  border: none;
  background: none;
}
.dg-rsb-support-btn:last-child { margin-bottom: 0; }
.dg-rsb-support-btn:hover { transform: none; opacity: .8; }
/* divider between buttons */
.dg-rsb-support-btn + .dg-rsb-support-btn {
  border-top: 1px solid #f0f3f7;
  padding-top: 8px;
  margin-top: 0;
}
.dg-rsb-wa { color: #1a6e3c; }
.dg-rsb-lc { color: var(--navy-deep, #005F6B); }
.dg-rsb-support-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dg-rsb-wa-icon { background: var(--wa-green,#25D366); color: #fff; }
.dg-rsb-lc-icon { background: var(--navy, #008296); color: #fff; }
.dg-rsb-support-text {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.dg-rsb-support-text strong {
  font-size: 12px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dg-rsb-support-text span {
  font-size: 10px; opacity: .75; line-height: 1.2;
}

/* Live chat status indicator */
.dg-rsb-lc-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 500;
}
.dg-rsb-lc-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.dg-rsb-lc-status.online  { color: #15803d; }
.dg-rsb-lc-status.online  .dg-rsb-lc-dot { background: #22c55e; box-shadow: 0 0 0 2px #bbf7d0; }
.dg-rsb-lc-status.offline { color: #9ca3af; }
.dg-rsb-lc-status.offline .dg-rsb-lc-dot { background: #9ca3af; }

/* ── Right Sidebar Trustpilot Strip ── */
/* ── Unified support card: Trustpilot block inside the card ── */
.dg-rsb-support-unified {
  margin-bottom: 14px;
}
.dg-rsb-tp-inner {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eef1f5;
}
.dg-rsb-tp-inner-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}
.dg-rsb-tp-wordmark {
  font-size: 11px;
  font-weight: 700;
  color: #1a1a1a;
  flex: 1;
}
.dg-rsb-tp-score {
  font-size: 11px;
  color: #374151;
}
.dg-rsb-tp-score strong {
  color: #1a1a1a;
}
.dg-rsb-tp-stars-row {
  display: flex;
  gap: 3px;
  align-items: center;
}

/* Keep old strip rules so nothing else breaks if referenced */
.dg-rsb-tp-strip {
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.dg-rsb-tp-logo {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; color: #1a1a1a;
  margin-bottom: 6px;
}
.dg-rsb-tp-stars {
  display: flex; gap: 2px;
  margin-bottom: 4px;
}
.dg-rsb-tp-label {
  font-size: 11px; color: #374151;
}
.dg-rsb-tp-label strong { color: #1a1a1a; }

/* ── Mobile Support Popup (Bottom Sheet) ── */
.dg-mobile-support-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.dg-mobile-support-popup[hidden] { display: none; }
.dg-msp-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  animation: dgMspFadeIn .2s ease;
}
.dg-msp-sheet {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 16px);
  animation: dgMspSlideUp .25s cubic-bezier(.32,1,.36,1);
  max-width: 480px;
  margin: 0 auto;
}
.dg-msp-handle {
  width: 36px; height: 4px;
  background: #dde1e7;
  border-radius: 2px;
  margin: 12px auto 0;
}
.dg-msp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 10px;
}
.dg-msp-title {
  font-size: 15px; font-weight: 700; color: #111827;
}
.dg-msp-close {
  background: #f3f4f6;
  border: none;
  border-radius: 50%;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #374151;
}
.dg-msp-option {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  text-decoration: none;
  border-bottom: 1px solid #f3f4f6;
  transition: background .12s;
}
.dg-msp-option:last-child { border-bottom: none; }
.dg-msp-option:active { background: #f9fafb; }
.dg-msp-option-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dg-msp-icon-wa { background: var(--wa-green,#25D366); color: #fff; }
.dg-msp-icon-lc { background: var(--navy, #008296); color: #fff; }
.dg-msp-option-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.dg-msp-option-text strong {
  font-size: 15px; font-weight: 700; color: #111827; display: block;
}
.dg-msp-option-text span {
  font-size: 13px; color: #6b7280; display: block;
}
.dg-msp-lc-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 500;
}
.dg-msp-lc-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.dg-msp-lc-status.online  { color: #15803d; }
.dg-msp-lc-status.online  .dg-msp-lc-dot { background: #22c55e; box-shadow: 0 0 0 2px #bbf7d0; }
.dg-msp-lc-status.offline { color: #9ca3af; }
.dg-msp-lc-status.offline .dg-msp-lc-dot { background: #d1d5db; }
.dg-msp-arrow {
  color: #d1d5db; flex-shrink: 0;
  margin-left: auto;
}
.dg-msp-wa { color: inherit; }
.dg-msp-lc { color: inherit; }

@keyframes dgMspFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes dgMspSlideUp {
  from { transform: translateY(100%); } to { transform: translateY(0); }
}

/* Right sidebar fix — max-width and proper layout */
@media (min-width: 1024px) {
  .dg-right-sidebar {
    width: 220px !important;
    max-width: 220px !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    padding: 16px !important;
    overflow: hidden !important;
  }
}



/* ══════════════════════════════════════════════════════════════
   DG PERMANENT AUTH FIX — Body Class Controlled Auth Buttons
   Added: replaces fragile inline-style JS approach.
   body.dg-logged-in  → Account visible,  Sign In hidden
   body.dg-guest      → Sign In visible,  Account hidden
   Works on all screen sizes, beats !important, cache-safe.
   ══════════════════════════════════════════════════════════════ */

/* ── SIGN IN BUTTON — standalone style (no longer uses dg-btn-solid) ── */
.dg-signin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--navy);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    color: var(--white) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 90px;
}
.dg-signin-btn:hover { background: var(--navy-mid) !important; color: var(--white) !important; }
.dg-signin-btn svg { flex-shrink: 0; }

/* ── DEFAULT: hide both until body class is set (prevents flash) ── */
.dg-account-btn,
.dg-signin-btn {
    display: none !important;
}

/* ── LOGGED IN: show Account button, hide Sign In ── */
body.dg-logged-in .dg-account-btn,
html.dg-logged-in .dg-account-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
body.dg-logged-in .dg-signin-btn,
html.dg-logged-in .dg-signin-btn {
    display: none !important;
}

/* ── GUEST: show Sign In button, hide Account ── */
body.dg-guest .dg-signin-btn,
html.dg-guest .dg-signin-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
body.dg-guest .dg-account-btn,
html.dg-guest .dg-account-btn {
    display: none !important;
}

/* ── MOBILE (<768px): Sign In is icon-only (text hidden) ── */
@media (max-width: 767px) {
    body.dg-guest .dg-signin-btn,
    html.dg-guest .dg-signin-btn {
        padding: 0 10px !important;
        min-width: 38px !important;
        height: 38px !important;
        gap: 0 !important;
    }
    body.dg-guest .dg-signin-btn span,
    html.dg-guest .dg-signin-btn span {
        display: none !important;
    }
}

/* ── MOBILE DRAWER: show correct greeting ── */
body.dg-logged-in  #dg-drawer-user,
html.dg-logged-in  #dg-drawer-user  { display: flex !important; }
body.dg-logged-in  #dg-drawer-guest,
html.dg-logged-in  #dg-drawer-guest { display: none  !important; }
body.dg-guest      #dg-drawer-user,
html.dg-guest      #dg-drawer-user  { display: none  !important; }
body.dg-guest      #dg-drawer-guest,
html.dg-guest      #dg-drawer-guest { display: flex  !important; }

/* ── FALLBACK: if body class not yet set (JS blocked?) use original rules ── */
html:not(.dg-logged-in):not(.dg-guest) .dg-account-btn { display: none; }
html:not(.dg-logged-in):not(.dg-guest) .dg-signin-btn  { display: flex; }

/* ── MOBILE BOTTOM NAV: Orders link vs guest button — cache-safe ── */
.dg-orders-li,
.dg-orders-guest { display: none; }

body.dg-logged-in .dg-orders-li,
html.dg-logged-in .dg-orders-li  { display: flex; flex-direction: column; align-items: center; justify-content: center; }
body.dg-logged-in .dg-orders-guest,
html.dg-logged-in .dg-orders-guest { display: none; }

body.dg-guest .dg-orders-guest,
html.dg-guest .dg-orders-guest { display: flex; flex-direction: column; align-items: center; justify-content: center; }
body.dg-guest .dg-orders-li,
html.dg-guest .dg-orders-li  { display: none; }

/* Fallback if JS not yet run */
html:not(.dg-logged-in):not(.dg-guest) .dg-orders-guest { display: flex; flex-direction: column; align-items: center; justify-content: center; }
html:not(.dg-logged-in):not(.dg-guest) .dg-orders-li    { display: none; }

/* ══════════════════════════════════════════════════════════════
   PERF-10: LAZY SECTION REVEAL ANIMATION
   Paired with the IntersectionObserver in main.js.
   Sections with [data-lazy-section] start hidden and slide up
   when they enter the viewport. The transition is subtle (160ms)
   so it enhances perceived performance without being distracting.
   Important: opacity:0 + will-change:opacity prevents the browser
   from including these sections in the initial paint layer.
══════════════════════════════════════════════════════════════ */
[data-lazy-section] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.32s ease, transform 0.32s ease;
  will-change: opacity, transform;
}
[data-lazy-section].dg-section-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-lazy-section],
  [data-lazy-section].dg-section-visible {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════
   DG BLOG — v96.3 redesign
   Single post + archive + blog→product rail
   ════════════════════════════════════════════════════════════ */

/* ── Single post layout ── */
.dg-single-post-main {
    background: var(--bg2);
    min-height: 60vh;
}
.dg-single-post-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 28px 16px 72px;
}

/* ── Post hero ── */
.dg-post-hero {
    text-align: center;
    padding: 32px 0 24px;
}
.dg-post-cat-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--navy);
    background: var(--bg2);
    border: 1px solid var(--border);
    padding: 3px 10px;
    border-radius: 20px;
    text-decoration: none;
    margin-bottom: 14px;
}
.dg-post-cat-pill:hover { background: #DBEAFE; }
.dg-post-title {
    font-size: clamp(22px, 4vw, 34px);
    font-weight: 800;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 auto 16px;
    max-width: 680px;
}
.dg-post-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}
.dg-post-meta-dot { opacity: .4; }
.dg-post-date, .dg-post-author, .dg-post-read-time { color: var(--slate); }

/* ── Featured image ── */
.dg-post-featured-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
    aspect-ratio: 16 / 7;
    background: var(--bg2);
}
.dg-post-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Article body ── */
.dg-post-content {
    font-size: 15px;
    line-height: 1.85;
    color: var(--ink);
    padding: 28px 24px;
    margin-bottom: 20px;
}
.dg-post-content h2 { font-size: 20px; margin: 28px 0 12px; }
.dg-post-content h3 { font-size: 17px; margin: 22px 0 10px; }
.dg-post-content p  { margin: 0 0 16px; }
.dg-post-content a  { color: var(--navy); text-decoration: underline; }
.dg-post-content ul,
.dg-post-content ol { padding-left: 22px; margin: 0 0 16px; }
.dg-post-content li { margin-bottom: 6px; }
.dg-post-content blockquote {
    border-left: 3px solid var(--navy);
    margin: 20px 0;
    padding: 12px 18px;
    background: #F0F6FF;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--slate);
    font-style: italic;
}
.dg-post-content img {
    max-width: 100%;
    border-radius: var(--radius-md);
    margin: 16px 0;
}

/* ── Tags ── */
.dg-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 16px 0 28px;
}
.dg-post-tag {
    font-size: 12px;
    color: var(--slate);
    background: var(--bg2);
    border: 1px solid var(--border);
    padding: 3px 9px;
    border-radius: 3px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.dg-post-tag:hover { background: #DBEAFE; color: var(--navy); }

/* ── Related posts spacing ── */
.dg-related-posts { margin-top: 40px; }

/* ════════════════════════════════════════════════════════════
   BLOG → PRODUCT RAIL  (dg-blog-products.php)
   Uses native .dg-product-card / .dg-btn-cart / .dg-btn-view
   Only adds the grid wrapper — no bespoke card styles.
   ════════════════════════════════════════════════════════════ */
.dg-blog-products-rail {
    margin: 36px 0 40px;
}
/* mobile: 2-col, matches rest of site product grids */
.dg-bp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
/* tablet+: auto-fill with 160px min — cards never stretch beyond their natural size */
@media (min-width: 600px) {
    .dg-bp-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 200px));
    }
}
/* END v96.3 blog styles
   ════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   MOBILE / PWA TOUCH OPTIMISATIONS — v99.6
   Fixes: no touch-feel, mis-taps, sub-pixel rendering, safe areas
══════════════════════════════════════════════════════════════════ */

/* 1. Remove default grey tap flash on all interactive elements */
a, button, [role="button"], label,
input[type="submit"], input[type="button"],
input[type="checkbox"], input[type="radio"],
.dg-btn, .dg-add-to-cart, .dg-qty-btn,
.dg-nav-item, .dg-mobile-nav-item,
.dg-sd-result, .dg-filter-chip,
.dg-product-card, .dg-cat-card,
.dg-cart-drawer-item, .dg-wishlist-btn,
#dg-push-allow, #dg-push-dismiss, #dg-pwa-install-btn {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

/* 2. Allow natural scroll / panning on scrollable containers;
      block it on buttons so they don't feel "slidey" */
html, body {
    touch-action: pan-y;
}
button, [role="button"], a, label,
.dg-btn, .dg-add-to-cart, .dg-qty-btn,
#dg-push-allow, #dg-push-dismiss, #dg-pwa-install-btn {
    touch-action: manipulation; /* disables double-tap zoom on buttons — removes 300ms delay */
}

/* 3. Prevent accidental text selection on UI controls */
button, [role="button"],
.dg-btn, .dg-add-to-cart, .dg-qty-btn,
.dg-mobile-nav-item, .dg-filter-chip,
.dg-product-card .dg-card-badge,
#dg-push-allow, #dg-push-dismiss, #dg-pwa-install-btn {
    -webkit-user-select: none;
    user-select: none;
}

/* 4. Momentum scrolling on iOS for every scroll container */
.dg-cart-drawer-body,
.dg-mobile-drawer,
.dg-product-gallery,
.dg-cross-sell-slider,
.dg-ribbon-static-inner,
.dg-product-tabs-content,
.woocommerce-MyAccount-content,
.dg-search-dropdown,
.dg-mobile-search-bar .dg-search-dropdown {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* prevents page scroll while scrolling these containers */
}

/* 5. Minimum 44×44 px touch targets (WCAG 2.5.5) */
.dg-mobile-nav-item a,
.dg-mobile-nav-item button,
.dg-qty-btn,
.dg-wishlist-btn,
#dg-push-allow,
#dg-push-dismiss,
.dg-header-action {
    min-height: 44px;
    min-width:  44px;
    display:    inline-flex;
    align-items: center;
    justify-content: center;
}

/* 6. PWA safe-area insets (notch / home-indicator on iPhone X+) */
.dg-header {
    padding-top: env(safe-area-inset-top, 0px);
}
.dg-mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(var(--mobile-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}
body {
    padding-bottom: calc(var(--mobile-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}
#dg-push-banner {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
#dg-pwa-install-btn {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* 7. Fix iOS input zoom (triggered when font-size < 16px) */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important; /* prevents iOS auto-zoom */
    }
}

/* 8. Smooth active / pressed state feedback (replaces tap highlight) */
@media (hover: none) and (pointer: coarse) {
    .dg-btn:active,
    .dg-add-to-cart:active,
    button:active,
    #dg-push-allow:active {
        opacity: 0.75;
        transform: scale(0.97);
        transition: opacity 0.08s, transform 0.08s;
    }
    /* Card press ripple */
    .dg-product-card:active {
        transform: scale(0.985);
        transition: transform 0.1s ease;
    }
}

/* 9. Pull-to-refresh visual indicator containment */
html {
    overscroll-behavior-y: contain;
}

/* 10. Fast-tap on WooCommerce inputs */
.woocommerce input[type="submit"],
.woocommerce button[type="submit"],
.woocommerce .button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ══════════════════════════════════════════════════════════════
   v99.12 — Remove My Account from mobile header
   Bottom nav already has Account tab — header dupe wastes space.
   Must come LAST to win over dg-logged-in display:flex rules.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  body.dg-logged-in .dg-account-btn,
  html.dg-logged-in .dg-account-btn,
  body.dg-guest .dg-signin-btn,
  html.dg-guest .dg-signin-btn {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   BUG FIXES — v99.13
   ══════════════════════════════════════════════════════════════ */

/* FIX 1: NEWSLETTER — subscribe button goes off-screen on mobile.
   input needs min-width:0 to shrink; button gets a max-width so
   it never overflows the viewport on very narrow phones. */
@media (max-width: 600px) {
  .dg-newsletter-form {
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
  }
  .dg-newsletter-form input {
    min-width: 0;
    flex: 1 1 0%;
    width: 0; /* forces flex shrink */
  }
  .dg-newsletter-form button {
    flex-shrink: 0;
    max-width: 130px;
    padding: 12px 12px;
    font-size: 12px;
    white-space: nowrap;
  }
}

/* FIX 2: MOBILE SEARCH BAR — input text not visible.
   background:transparent inherits dark backgrounds in some themes;
   force a white background + dark text on the input itself. */
.dg-mobile-search-bar input[type="search"],
.dg-mobile-search-bar input[type="text"] {
  background: #ffffff !important;
  color: #0F1111 !important;
  -webkit-text-fill-color: #0F1111 !important;
}
.dg-mobile-search-bar input::placeholder {
  color: #8F9191 !important;
  opacity: 1 !important;
}

/* FIX 3: CATALOG PAGE — product cards on mobile.
   Ensure 2-col grid on small phones, and card body text/buttons
   don't overflow or get clipped. */
@media (max-width: 400px) {
  .dg-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .dg-product-body {
    padding: 8px 8px 10px !important;
  }
  .dg-product-name {
    font-size: 11px !important;
  }
  .dg-price-new {
    font-size: 13px !important;
  }
  .dg-product-actions {
    gap: 4px !important;
  }
  .dg-btn-cart,
  .dg-btn-view {
    font-size: 10.5px !important;
    padding: 6px 4px !important;
  }
}

/* FIX 4: CATALOG — compact_list variant text overflow on mobile */
@media (max-width: 480px) {
  [data-layout="compact_list"] .dg-product-card {
    grid-template-columns: 80px 1fr !important;
  }
  [data-layout="compact_list"] .dg-product-img {
    min-height: 80px !important;
  }
}

/* ── Thank-you page: always light — never inherit OS dark mode ── */
body.woocommerce-order-received {
  background-color: #F4F6FB !important;
  color-scheme: light !important;
}
body.woocommerce-order-received .dg-ty2-wrap,
body.woocommerce-order-received .dg-ty2-hero,
body.woocommerce-order-received .dg-ty2-box,
body.woocommerce-order-received .dg-ty2-card {
  color-scheme: light;
}

/* ══════════════════════════════════════════════════════
   SECURITY & UX FIXES — consolidated patch block
   ══════════════════════════════════════════════════════ */

/* FIX 5: Catalog product cards — mobile 480-768px range.
   The existing FIX 3 only targets ≤400px. Cards between
   400-600px were using cols-4 grid and getting too narrow. */
@media (max-width: 600px) {
  .dg-products-grid,
  .dg-products-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .dg-product-img {
    aspect-ratio: 1 / 1 !important;
  }
  .dg-product-body {
    padding: 8px 10px 10px !important;
  }
  .dg-product-name a {
    font-size: 12px !important;
    -webkit-line-clamp: 2;
  }
  .dg-price-new {
    font-size: 13px !important;
  }
  .dg-btn-cart,
  .dg-btn-view {
    font-size: 11px !important;
    padding: 7px 6px !important;
  }
  /* compact_list on mobile — keep horizontal layout but constrain image */
  [data-layout="compact_list"] .dg-product-card {
    grid-template-columns: 90px 1fr !important;
  }
  [data-layout="compact_list"] .dg-product-img {
    min-height: 90px !important;
    height: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   SHOP ARCHIVE — PRODUCT CARD OVERFLOW FIX  (v99.9)
   Root cause: selectors in dg-mobile-fix.css targeted
   .dg-product-grid but archive template emits .dg-products-grid.
   Also: missing min-width:0 on grid children caused text/button
   overflow (product names and "Reorder" buttons clipped on right).
   ══════════════════════════════════════════════════════════════ */

/* 1. Grid container — no horizontal bleed */
.dg-products-grid {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* 2. Every card stays within its grid cell */
.dg-products-grid .dg-product-card {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* 3. Image: square, contained, never wider than card */
.dg-products-grid .dg-product-img {
  width: 100%;
  flex-shrink: 0;
}
.dg-products-grid .dg-product-img img {
  object-fit: contain !important;
  object-position: center center !important;
}

/* 4. Body: fill remaining height, never wider than card */
.dg-products-grid .dg-product-body {
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* 5. Product name: 2-line clamp, no overflow */
.dg-products-grid .dg-product-name {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.dg-products-grid .dg-product-name a {
  overflow: hidden;
  word-break: break-word;
  white-space: normal;
}

/* 6. Price row — wrap on narrow cards */
.dg-products-grid .dg-product-price {
  min-width: 0;
  flex-wrap: wrap;
}

/* 7. Buttons — each fits its half-width cell */
.dg-products-grid .dg-product-actions {
  min-width: 0;
}
.dg-products-grid .dg-btn-cart,
.dg-products-grid .dg-btn-view {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 8. Extra-small phones */
@media (max-width: 360px) {
  .dg-shop-main { padding: 10px 10px; }
  .dg-products-grid { gap: 8px !important; }
  .dg-products-grid .dg-product-body { padding: 6px 8px 8px !important; }
  .dg-products-grid .dg-product-name a { font-size: 10.5px; }
  .dg-products-grid .dg-price-new { font-size: 12px !important; }
  .dg-products-grid .dg-btn-cart,
  .dg-products-grid .dg-btn-view {
    font-size: 10px !important;
    padding: 5px 3px !important;
  }
  .dg-products-grid .dg-btn-cart svg { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   CHANGELOG — v99.14
   ══════════════════════════════════════════════════════════════
   FIX 1: Double toast on mobile (main.min.js regression + CSS guard)
   FIX 2: Cart drawer calculate_totals() skipped when cart unchanged
   FIX 3: Session expired — visibilitychange nonce refresh on checkout
   CLEAN: Sticky bar redesigned to white card with spring animation
   CLEAN: Product card hover lift, ATC button polish
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   COLOR PALETTE FIX v99.17
   - Replaces all hardcoded slate/grey hex values with CSS vars
   - Fixes invisible + button in cart drawer (dark bg + dark text)
   - Improves contrast: crisper text, bolder borders, vivid CTAs
   - Gallery thumb active state made clearly visible
   ══════════════════════════════════════════════════════════════ */

/* ── Root overrides: crisper, higher-contrast token values ── */
:root {
  --ink:        #0A0E0F !important;  /* Richer black for body text */
  --slate:      #3D4545 !important;  /* Darker secondary text */
  --muted:      #6B7070 !important;  /* Muted but readable */
  --border:     #BFC9CA !important;  /* Crisper border */
  --border-mid: #9AABAC !important;
  --bg:         #F4F6F6 !important;  /* Slightly warmer page bg */
  --bg2:        #E6EAEB !important;
  --surface-card:   #FFFFFF !important;
  --surface-page:   #F4F6F6 !important;
  --surface-subtle: #ECF0F0 !important;
  --surface-muted:  #E2E8E8 !important;
}

/* ── Fix qty control: hardcoded border + make +/− clearly visible ── */
.dg-qty-control,
.dg-qty-input {
  border: 2px solid var(--navy, #008296) !important;
  background: #fff !important;
}
.dg-qty-control .dg-qty-btn,
.dg-qty-control .dg-qty-minus,
.dg-qty-control .dg-qty-plus,
.dg-qty-input button,
.dg-qty-input .dg-qty-minus,
.dg-qty-input .dg-qty-plus {
  color: var(--navy, #008296) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  background: #fff !important;
}
.dg-qty-control .dg-qty-btn:hover,
.dg-qty-control .dg-qty-minus:hover,
.dg-qty-control .dg-qty-plus:hover,
.dg-qty-input button:hover,
.dg-qty-input .dg-qty-minus:hover,
.dg-qty-input .dg-qty-plus:hover {
  background: var(--primary-50, #EDF7F9) !important;
  color: var(--navy-deep, #005F6B) !important;
}
.dg-qty-control .dg-qty-val,
.dg-qty-input input,
.dg-qty-input .dg-qty-val {
  color: var(--ink, #0A0E0F) !important;
  font-weight: 800 !important;
  border-left: 1.5px solid var(--navy, #008296) !important;
  border-right: 1.5px solid var(--navy, #008296) !important;
}

/* ── Cart drawer qty in dark header context: always white on dark ── */
.dg-cart-drawer-head .dg-qty-control,
.dg-cart-drawer-head .dg-qty-input {
  border-color: rgba(255,255,255,.5) !important;
  background: rgba(255,255,255,.12) !important;
}
.dg-cart-drawer-head .dg-qty-btn,
.dg-cart-drawer-head .dg-qty-minus,
.dg-cart-drawer-head .dg-qty-plus {
  color: #fff !important;
}
.dg-cart-drawer-head .dg-qty-val {
  color: #fff !important;
  border-color: rgba(255,255,255,.4) !important;
}

/* ── Fix hardcoded slate colors (#E2E8F0, #F1F5F9, #64748B, #1E293B, etc.) ── */
.dg-cart-item-img { border-color: var(--border) !important; }
.dg-cart-item-name { color: var(--ink) !important; }
.dg-cart-item-brand { color: var(--muted) !important; }
.dg-cart-item-reg { color: var(--muted) !important; }
.dg-cart-item-remove { color: var(--muted) !important; }
.dg-cart-item-meta-strip { border-color: var(--border) !important; background: var(--surface-subtle) !important; }
.dg-cart-item-meta { color: var(--slate) !important; }
.dg-cart-ship-bar { background: var(--border) !important; }
.dg-cart-price-row { border-color: var(--border) !important; }
.dg-cart-price-lbl { color: var(--slate) !important; }
.dg-cart-price-lbl-bold { color: var(--ink) !important; }
.dg-cart-price-val { color: var(--ink) !important; }
.dg-cart-empty h3 { color: var(--ink) !important; }
.dg-cart-empty p { color: var(--slate) !important; }
.dg-cart-empty-trust-lbl { color: var(--slate) !important; }
.dg-cart-empty-social-txt { color: var(--slate) !important; }
.dg-cart-ships-line { color: var(--slate) !important; }
.dg-cart-ships-line strong { color: var(--ink) !important; }
.dg-cart-bt-item { color: var(--slate) !important; border-color: var(--border) !important; }

/* ── Fix: cart header (navy-deep) — ensure it's brand navy not grey-navy ── */
.dg-cart-item-header,
.dg-cart-item-wrap[style*="navy"] {
  background: var(--navy-deep) !important;
  color: #fff !important;
}

/* ── Product card improvements: crisper shadows, vivid text ── */
.dg-product-card {
  box-shadow: 0 2px 8px rgba(0,0,0,.10) !important;
  border: 1px solid var(--border) !important;
}
.dg-product-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.14) !important;
  border-color: var(--navy-mid, #00A0B4) !important;
}
.dg-product-name a { color: var(--ink) !important; font-weight: 600 !important; }
.dg-price-new { color: var(--navy-deep, #005F6B) !important; font-weight: 800 !important; }
.dg-price-old { color: var(--muted) !important; }

/* ── Gallery thumb active: vivid border, no blur ── */
.dg-thumb {
  border: 2px solid var(--border) !important;
  border-radius: 8px !important;
  opacity: 0.75 !important;
  transition: border-color .15s, opacity .15s !important;
  cursor: pointer !important;
}
.dg-thumb:hover {
  border-color: var(--navy-mid, #00A0B4) !important;
  opacity: 0.95 !important;
}
.dg-thumb.dg-thumb-active,
.dg-thumb.active {
  border-color: var(--navy, #008296) !important;
  border-width: 2.5px !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 2px rgba(0,130,150,.18) !important;
}

/* ── Buttons: ensure CTA buttons are vivid and readable ── */
.dg-btn,
.dg-btn-atc,
.dg-btn-cart,
.dg-add-to-cart {
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}
.dg-btn-primary,
.dg-btn-atc,
.dg-btn-cart {
  background: var(--teal, #FFB800) !important;
  color: var(--text-on-cta, #0F1111) !important;
  border: 1.5px solid var(--accent-600, #D49A00) !important;
}

/* ── Header: ensure it pops with brand color (not dull dark) ── */
.dg-header {
  background: var(--header-grad) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
}

/* ── Trust bar: crisper text ── */
.dg-trust-bar { font-weight: 500 !important; }
.dg-trust-item { color: var(--primary-700) !important; }

/* ── Fix: hardcoded bg in recently-viewed / empty cart section ── */
.dg-rv-tag,
.dg-recently-viewed-label {
  background: var(--surface-subtle) !important;
  color: var(--slate) !important;
  border-color: var(--border) !important;
}

/* ── Forms: inputs look crisp ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  border-color: var(--border) !important;
  color: var(--ink) !important;
  background: #fff !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--navy) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,130,150,.15) !important;
}

/* ── Headings: ensure dark and readable, not washed out ── */
h1, h2, h3, h4, h5, h6 { color: var(--ink) !important; }

/* ── Fix: hardcoded slate-style colors in misc elements ── */
.dg-filter-chip { border-color: var(--border) !important; color: var(--slate) !important; }
.dg-filter-chip.active { border-color: var(--navy) !important; color: var(--navy) !important; background: var(--primary-50) !important; }

/* ── Cart drawer close button: visible ── */
.dg-cart-drawer-close { color: rgba(255,255,255,.9) !important; }
.dg-cart-drawer-close:hover { color: #fff !important; background: rgba(255,255,255,.2) !important; }

/* ── Cart footer: bright checkout button ── */
.dg-cart-checkout-btn {
  background: var(--teal, #FFB800) !important;
  color: #0A0E0F !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: .02em !important;
  border: 2px solid var(--accent-600, #D49A00) !important;
}
.dg-cart-checkout-btn:hover {
  background: var(--accent-600, #D49A00) !important;
}

/* ── Ribbon / announcement bar: bold text ── */
.dg-ribbon-item span,
.dg-announcement span {
  font-weight: 600 !important;
}

/* ── Product page: clear section separation ── */
.dg-product-gallery-main {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: #fff !important;
  overflow: hidden !important;
}

/* ── Gallery zoom button: more visible ── */
.dg-gallery-zoom-btn {
  background: rgba(0,0,0,.45) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 6px !important;
}
.dg-gallery-zoom-btn:hover {
  background: rgba(0,0,0,.65) !important;
}

/* ── Fix: nav items clear and readable ── */
.dg-nav-link,
.dg-mobile-nav-link {
  color: var(--ink) !important;
  font-weight: 500 !important;
}
.dg-nav-link:hover,
.dg-mobile-nav-link:hover {
  color: var(--navy) !important;
}

/* ── Fix: page backgrounds not blending into each other ── */
.dg-section,
.dg-card,
.card {
  background: #fff !important;
}

/* ── Fix: muted SVG icons in cart/product get brand color ── */
.dg-cart-item-meta svg,
.dg-trust-item svg {
  stroke: var(--navy) !important;
}

/* ═══════════════════════════════════════════════════════════
   END COLOR PALETTE FIX v99.17
   ═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   FULL UI/UX OVERHAUL — v99.17 CART DRAWER REDESIGN
   Fixes: Browse Catalog invisible, coupon applied strip clarity,
   trust icons washed out, recently viewed +btn, overall polish.
   ══════════════════════════════════════════════════════════════ */

/* ─── CART DRAWER HEAD: vivid gradient header ─────────────── */
.dg-cart-drawer-head {
  background: linear-gradient(145deg, var(--primary-900, #003038) 0%, var(--primary-700, #005F6B) 100%) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.22) !important;
}
.dg-cart-drawer-head-top {
  padding: 16px 18px 10px !important;
}
.dg-cart-drawer-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -.02em !important;
}
.dg-cart-count-inline {
  color: rgba(255,255,255,.65) !important;
  font-weight: 600 !important;
}
.dg-cart-trust-strip {
  padding: 8px 18px 14px !important;
  gap: 12px !important;
}
.dg-cart-trust-badge {
  color: rgba(255,255,255,.72) !important;
  font-weight: 600 !important;
  font-size: 10.5px !important;
}
.dg-cart-trust-badge svg { stroke: rgba(255,255,255,.72) !important; }
.dg-cart-drawer-close {
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
}
.dg-cart-drawer-close:hover {
  background: rgba(255,255,255,.28) !important;
}

/* ─── SAVINGS BAR: bright green banner ────────────────────── */
.dg-cart-savings-bar {
  background: linear-gradient(90deg, #0a6b40, #0d8a52) !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}
.dg-cart-savings-bar strong {
  font-size: 14px !important;
  color: #fff !important;
}

/* ─── COUPON APPLIED STRIP ────────────────────────────────── */
.dg-cart-coupon-applied {
  background: linear-gradient(135deg, #DCFCE7, #bbf7d0) !important;
  border: 1.5px solid #4ade80 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin: 10px 14px 0 !important;
  color: #14532d !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.dg-cart-coupon-applied svg {
  stroke: #16a34a !important;
  flex-shrink: 0 !important;
}
.dg-cart-coupon-applied span { flex: 1 !important; color: #14532d !important; }
.dg-cart-coupon-applied strong { color: #052e16 !important; }
.dg-remove-coupon {
  color: #16a34a !important;
  opacity: 0.6 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  transition: color .15s, opacity .15s !important;
}
.dg-remove-coupon:hover { color: #DC2626 !important; opacity: 1 !important; }

/* ─── AUTO-COUPON BANNER ──────────────────────────────────── */
.dg-cart-auto-coupon {
  background: linear-gradient(135deg, #005F6B, #008296) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  margin: 10px 14px 0 !important;
  box-shadow: 0 2px 8px rgba(0,90,107,.25) !important;
}
.dg-cart-auto-coupon-icon {
  background: rgba(255,255,255,.2) !important;
  border-radius: 8px !important;
}
.dg-cart-auto-coupon-title {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 12px !important;
}
.dg-cart-auto-coupon-sub {
  color: rgba(255,255,255,.85) !important;
  font-size: 10.5px !important;
}
.dg-cart-auto-coupon-badge {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 10.5px !important;
}

/* ─── CART BODY BACKGROUND ────────────────────────────────── */
.dg-cart-drawer-body {
  background: #f0f4f4 !important;
}

/* ─── CART ITEMS ──────────────────────────────────────────── */
.dg-cart-items-wrap {
  padding: 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.dg-cart-item {
  background: #fff !important;
  border: 1px solid #d0d8da !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.06) !important;
}
.dg-cart-item-top {
  padding: 12px 12px 0 !important;
  display: flex !important;
  gap: 10px !important;
}
.dg-cart-item-img {
  border-radius: 10px !important;
  border: 1px solid #dde4e5 !important;
  background: #f9fbfb !important;
}
.dg-cart-item-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0A0E0F !important;
  line-height: 1.35 !important;
}
.dg-cart-item-brand {
  font-size: 11px !important;
  color: #6B7070 !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
}
.dg-cart-item-price {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--navy-deep, #005F6B) !important;
}
.dg-cart-item-reg {
  font-size: 11px !important;
  color: #9AABAC !important;
  text-decoration: line-through !important;
}
.dg-cart-item-save-pill {
  font-size: 10px !important;
  font-weight: 800 !important;
  background: #dcfce7 !important;
  color: #14532d !important;
  border-radius: 20px !important;
  padding: 1px 7px !important;
}
.dg-cart-item-remove {
  color: #9AABAC !important;
}
.dg-cart-item-remove:hover {
  color: #DC2626 !important;
  background: #fef2f2 !important;
}
.dg-cart-item-meta-strip {
  background: #f5f9f9 !important;
  border-top: 1px solid #e4eced !important;
  padding: 8px 12px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.dg-cart-item-meta {
  font-size: 11px !important;
  color: #6B7070 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.dg-cart-item-meta svg { stroke: var(--navy, #008296) !important; }

/* ─── QTY PILL (cart drawer context) ─────────────────────── */
.dg-cart-item-meta-strip .dg-qty-control {
  border: 2px solid var(--navy, #008296) !important;
  background: #fff !important;
  border-radius: 99px !important;
  width: 96px !important;
  height: 32px !important;
}
.dg-cart-item-meta-strip .dg-qty-btn {
  color: var(--navy, #008296) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}
.dg-cart-item-meta-strip .dg-qty-val {
  color: #0A0E0F !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  border-left: 1px solid #c6d8da !important;
  border-right: 1px solid #c6d8da !important;
}

/* ─── SHIP PROGRESS BAR ───────────────────────────────────── */
.dg-cart-ship-wrap {
  padding: 10px 14px 6px !important;
}
.dg-cart-ship-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #3D4545 !important;
  margin-bottom: 7px !important;
}
.dg-cart-ship-label strong { color: #0A0E0F !important; }
.dg-ship-unlocked {
  color: #15803d !important;
  font-weight: 700 !important;
}
.dg-ship-unlocked svg { stroke: #16a34a !important; }
.dg-cart-ship-bar {
  height: 7px !important;
  background: #d0dfe0 !important;
  border-radius: 99px !important;
}
.dg-cart-ship-fill {
  background: linear-gradient(90deg, #008296, #00A0B4) !important;
  border-radius: 99px !important;
}

/* ─── PRICE ROWS ──────────────────────────────────────────── */
.dg-cart-price-section {
  background: #fff !important;
  border-top: 1px solid #dde4e5 !important;
  border-radius: 14px 14px 0 0 !important;
  margin-top: 6px !important;
}
.dg-cart-price-row {
  padding: 11px 16px !important;
  border-bottom: 1px solid #eef1f1 !important;
  font-size: 13px !important;
}
.dg-cart-price-lbl { color: #3D4545 !important; font-weight: 500 !important; }
.dg-cart-price-val { color: #0A0E0F !important; font-weight: 700 !important; }
.dg-cart-price-lbl-bold { color: #0A0E0F !important; font-size: 14px !important; font-weight: 800 !important; }

/* ─── CART FOOTER ─────────────────────────────────────────── */
.dg-cart-drawer-foot {
  background: #fff !important;
  border-top: 1px solid #dde4e5 !important;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow: 0 -4px 16px rgba(0,0,0,.08) !important;
}
.dg-cart-checkout-btn {
  width: 100% !important;
  padding: 15px 20px !important;
  background: linear-gradient(135deg, #FFB800, #F0A800) !important;
  color: #0A0E0F !important;
  border: none !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  box-shadow: 0 4px 14px rgba(255,184,0,.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: box-shadow .2s, transform .1s !important;
}
.dg-cart-checkout-btn:hover {
  box-shadow: 0 6px 20px rgba(255,184,0,.45) !important;
  transform: translateY(-1px) !important;
  color: #0A0E0F !important;
  background: linear-gradient(135deg, #FFC31A, #FFB800) !important;
}
.dg-cart-checkout-btn:active { transform: translateY(0) !important; }
.dg-cart-bottom-trust { margin-top: 10px !important; gap: 8px !important; }
.dg-cart-bt-item {
  color: #3D4545 !important;
  border-color: #c8d4d5 !important;
  background: #f5f9f9 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* ─── EMPTY CART STATE ────────────────────────────────────── */
.dg-cart-empty {
  padding: 30px 20px 20px !important;
  background: #f0f4f4 !important;
  align-items: center !important;
  text-align: center !important;
}
.dg-cart-empty-icon {
  width: 72px !important;
  height: 72px !important;
  background: linear-gradient(145deg, #e0f5f7, #c8edf0) !important;
  border: 2px solid #a8d8dc !important;
  border-radius: 50% !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 14px rgba(0,130,150,.15) !important;
}
.dg-cart-empty-icon svg { stroke: var(--navy, #008296) !important; }
.dg-cart-empty h3 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0A0E0F !important;
  margin-bottom: 8px !important;
  letter-spacing: -.03em !important;
}
.dg-cart-empty p {
  font-size: 13.5px !important;
  color: #3D4545 !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}
/* ── Browse Catalog button: HIGH CONTRAST amber CTA ── */
.dg-cart-browse-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 14px 20px !important;
  background: linear-gradient(135deg, #FFB800, #F0A800) !important;
  color: #0A0E0F !important;
  border: none !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  margin-bottom: 18px !important;
  box-shadow: 0 4px 16px rgba(255,184,0,.32) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: box-shadow .2s, transform .1s !important;
}
.dg-cart-browse-btn:hover {
  box-shadow: 0 6px 22px rgba(255,184,0,.45) !important;
  transform: translateY(-1px) !important;
  background: linear-gradient(135deg, #FFC31A, #FFB800) !important;
  color: #0A0E0F !important;
}
.dg-cart-browse-btn svg { stroke: #0A0E0F !important; }

/* ── Trust icons in empty cart ── */
.dg-cart-empty-trust { gap: 8px !important; width: 100% !important; }
.dg-cart-empty-trust-item { flex: 1 !important; }
.dg-cart-empty-trust-icon {
  width: 50px !important;
  height: 50px !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #fff, #f0f8f9) !important;
  border: 1.5px solid #a8d8dc !important;
  box-shadow: 0 2px 8px rgba(0,130,150,.10) !important;
}
.dg-cart-empty-trust-icon svg { stroke: var(--navy, #008296) !important; }
.dg-cart-empty-trust-lbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #3D4545 !important;
  line-height: 1.4 !important;
}
.dg-cart-empty-divider {
  border-color: #c8d4d5 !important;
  margin: 16px 0 !important;
  width: 100% !important;
}

/* ── Social proof strip in empty cart ── */
.dg-cart-empty-social {
  background: #fff !important;
  border-top: 1px solid #dde4e5 !important;
  padding: 14px 20px !important;
}
.dg-cart-empty-av {
  background: linear-gradient(135deg, var(--primary-400), var(--primary-600)) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  font-weight: 800 !important;
  font-size: 7px !important;
}
.dg-cart-empty-social-txt {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #3D4545 !important;
}

/* ─── RECENTLY VIEWED (empty cart) ───────────────────────── */
.dg-cart-recent {
  background: #fff !important;
  border-top: 1px solid #dde4e5 !important;
  padding: 14px 16px 16px !important;
  margin-top: 4px !important;
}
.dg-cart-recent-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  color: var(--navy-deep, #005F6B) !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}
.dg-cart-recent-item {
  background: #f5f9f9 !important;
  border: 1px solid #d8e4e5 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.dg-cart-recent-item:hover {
  border-color: var(--navy-mid, #00A0B4) !important;
  box-shadow: 0 2px 10px rgba(0,130,150,.10) !important;
}
.dg-cart-recent-item img {
  border-radius: 8px !important;
  background: #fff !important;
  border: 1px solid #dde4e5 !important;
}
.dg-cart-recent-name {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #0A0E0F !important;
}
.dg-cart-recent-price {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--navy-deep, #005F6B) !important;
}
/* + button in recently viewed */
.dg-cart-recent-atc {
  width: 34px !important;
  height: 34px !important;
  background: linear-gradient(135deg, #FFB800, #F0A800) !important;
  color: #0A0E0F !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(255,184,0,.30) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.dg-cart-recent-atc:hover {
  background: linear-gradient(135deg, #FFC31A, #FFB800) !important;
  box-shadow: 0 3px 12px rgba(255,184,0,.40) !important;
}
.dg-cart-recent-atc svg { stroke: #0A0E0F !important; }

/* ─── TOTAL SAVINGS ROW ───────────────────────────────────── */
.dg-cart-total-savings {
  margin: 6px 14px 0 !important;
  background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
  border: 1.5px solid #4ade80 !important;
  border-radius: 10px !important;
  padding: 9px 13px !important;
}
.dg-cart-total-savings-text {
  color: #14532d !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
}

/* ─── CONFETTI STRIP: bolder/crisper ─────────────────────── */
.dg-cart-confetti-strip {
  height: 5px !important;
}

/* ─── SCROLLBAR: subtle but visible ──────────────────────── */
.dg-cart-drawer-body::-webkit-scrollbar { width: 4px !important; }
.dg-cart-drawer-body::-webkit-scrollbar-thumb {
  background: #a8c8cb !important;
  border-radius: 99px !important;
}

/* ══════════════════════════════════════════════════════════════
   END UI/UX OVERHAUL v99.17
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   FULL UI/UX OVERHAUL — v99.17 CART DRAWER REDESIGN
   Fixes: Browse Catalog invisible, coupon applied strip clarity,
   trust icons washed out, recently viewed +btn, overall polish.
   ══════════════════════════════════════════════════════════════ */

/* ─── CART DRAWER HEAD: vivid gradient header ─────────────── */
.dg-cart-drawer-head {
  background: linear-gradient(145deg, var(--primary-900, #003038) 0%, var(--primary-700, #005F6B) 100%) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.22) !important;
}
.dg-cart-drawer-title { font-weight: 800 !important; color: #fff !important; }
.dg-cart-count-inline { color: rgba(255,255,255,.7) !important; font-weight: 600 !important; }
.dg-cart-trust-badge { color: rgba(255,255,255,.78) !important; font-weight: 600 !important; font-size: 10.5px !important; }
.dg-cart-trust-badge svg { stroke: rgba(255,255,255,.78) !important; }
.dg-cart-drawer-close {
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #fff !important;
}
.dg-cart-drawer-close:hover { background: rgba(255,255,255,.30) !important; }

/* ─── SAVINGS BAR ──────────────────────────────────────────── */
.dg-cart-savings-bar { background: linear-gradient(90deg, #0a6b40, #0d8a52) !important; }

/* ─── COUPON APPLIED STRIP ────────────────────────────────── */
.dg-cart-coupon-applied {
  background: linear-gradient(135deg, #DCFCE7, #bbf7d0) !important;
  border: 1.5px solid #4ade80 !important;
  color: #14532d !important;
  font-weight: 700 !important;
}
.dg-cart-coupon-applied svg { stroke: #16a34a !important; }
.dg-cart-coupon-applied span { color: #14532d !important; }
.dg-remove-coupon { color: #16a34a !important; }
.dg-remove-coupon:hover { color: #DC2626 !important; opacity: 1 !important; }

/* ─── AUTO-COUPON BANNER ──────────────────────────────────── */
.dg-cart-auto-coupon {
  background: linear-gradient(135deg, #005F6B, #008296) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,90,107,.25) !important;
}
.dg-cart-auto-coupon-title { color: #fff !important; font-weight: 800 !important; }
.dg-cart-auto-coupon-sub { color: rgba(255,255,255,.88) !important; }
.dg-cart-auto-coupon-badge { background: rgba(255,255,255,.22) !important; color: #fff !important; font-weight: 800 !important; }

/* ─── CART BODY & ITEMS ───────────────────────────────────── */
.dg-cart-drawer-body { background: #eef2f2 !important; }
.dg-cart-item {
  background: #fff !important;
  border: 1px solid #cdd8da !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.06) !important;
  overflow: hidden !important;
}
.dg-cart-item-name { font-weight: 700 !important; color: #0A0E0F !important; }
.dg-cart-item-brand { color: #6B7070 !important; font-size: 11px !important; }
.dg-cart-item-price { font-weight: 800 !important; color: var(--navy-deep, #005F6B) !important; }
.dg-cart-item-reg { color: #9AABAC !important; }
.dg-cart-item-save-pill {
  background: #dcfce7 !important; color: #14532d !important;
  font-weight: 800 !important; border-radius: 20px !important; padding: 1px 7px !important;
}
.dg-cart-item-remove { color: #9AABAC !important; }
.dg-cart-item-remove:hover { color: #DC2626 !important; background: #fef2f2 !important; }
.dg-cart-item-meta-strip {
  background: #f4f8f8 !important;
  border-top: 1px solid #e2ecee !important;
}
.dg-cart-item-meta { color: #6B7070 !important; font-size: 11px !important; }
.dg-cart-item-meta svg { stroke: var(--navy, #008296) !important; }
.dg-cart-item-img { border-color: #dde4e5 !important; }

/* ─── QTY PILL (cart) ─────────────────────────────────────── */
.dg-cart-item-meta-strip .dg-qty-control,
.dg-cart-item-meta-strip .dg-qty-input {
  border: 2px solid var(--navy, #008296) !important;
  background: #fff !important;
  border-radius: 99px !important;
}
.dg-cart-item-meta-strip .dg-qty-btn,
.dg-cart-item-meta-strip .dg-qty-minus,
.dg-cart-item-meta-strip .dg-qty-plus {
  color: var(--navy, #008296) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}
.dg-cart-item-meta-strip .dg-qty-val {
  color: #0A0E0F !important;
  font-weight: 800 !important;
  border-color: #c0d5d8 !important;
}

/* ─── SHIPPING BAR ────────────────────────────────────────── */
.dg-cart-ship-label { color: #3D4545 !important; }
.dg-ship-unlocked { color: #15803d !important; font-weight: 700 !important; }
.dg-cart-ship-bar { background: #cddcde !important; height: 7px !important; border-radius: 99px !important; }
.dg-cart-ship-fill { background: linear-gradient(90deg, #008296, #00A0B4) !important; }

/* ─── PRICE ROWS ──────────────────────────────────────────── */
.dg-cart-price-row { border-bottom-color: #eaeff0 !important; }
.dg-cart-price-lbl { color: #3D4545 !important; }
.dg-cart-price-val { color: #0A0E0F !important; font-weight: 700 !important; }
.dg-cart-price-lbl-bold { color: #0A0E0F !important; font-weight: 800 !important; font-size: 14px !important; }

/* ─── TOTAL SAVINGS ───────────────────────────────────────── */
.dg-cart-total-savings {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
  border: 1.5px solid #4ade80 !important;
  border-radius: 10px !important;
}
.dg-cart-total-savings-text { color: #14532d !important; font-weight: 700 !important; }

/* ─── CHECKOUT BUTTON ─────────────────────────────────────── */
.dg-cart-checkout-btn {
  background: linear-gradient(135deg, #FFB800, #F0A800) !important;
  color: #0A0E0F !important;
  border: none !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(255,184,0,.35) !important;
  padding: 15px !important;
  transition: box-shadow .2s, transform .12s !important;
}
.dg-cart-checkout-btn:hover {
  box-shadow: 0 6px 22px rgba(255,184,0,.45) !important;
  transform: translateY(-1px) !important;
  color: #0A0E0F !important;
  background: linear-gradient(135deg, #FFC31A, #FFB800) !important;
}
.dg-cart-drawer-foot {
  box-shadow: 0 -4px 16px rgba(0,0,0,.08) !important;
}
.dg-cart-bt-item {
  color: #3D4545 !important;
  border-color: #c0ced0 !important;
  background: #f4f8f8 !important;
}

/* ─── BROWSE CATALOG BUTTON: HIGH-CONTRAST AMBER ─────────── */
.dg-cart-browse-btn {
  background: linear-gradient(135deg, #FFB800, #F0A800) !important;
  color: #0A0E0F !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(255,184,0,.32) !important;
  padding: 14px 20px !important;
  letter-spacing: .02em !important;
  transition: box-shadow .2s, transform .12s !important;
}
.dg-cart-browse-btn:hover {
  background: linear-gradient(135deg, #FFC31A, #FFB800) !important;
  color: #0A0E0F !important;
  box-shadow: 0 6px 22px rgba(255,184,0,.45) !important;
  transform: translateY(-1px) !important;
}
.dg-cart-browse-btn svg { stroke: #0A0E0F !important; }

/* ─── EMPTY CART STATE ────────────────────────────────────── */
.dg-cart-empty { background: #eef2f2 !important; padding: 30px 20px 20px !important; }
.dg-cart-empty h3 { font-size: 17px !important; font-weight: 800 !important; color: #0A0E0F !important; }
.dg-cart-empty p { color: #3D4545 !important; font-size: 13.5px !important; }
.dg-cart-empty-icon {
  width: 72px !important; height: 72px !important;
  background: linear-gradient(145deg, #ddf2f4, #c0eaed) !important;
  border: 2px solid #9dd4d9 !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(0,130,150,.15) !important;
}
.dg-cart-empty-icon svg { stroke: var(--navy, #008296) !important; width: 32px !important; height: 32px !important; }
.dg-cart-empty-trust-icon {
  background: linear-gradient(145deg, #fff, #eef8f9) !important;
  border: 1.5px solid #9dd4d9 !important;
  box-shadow: 0 2px 8px rgba(0,130,150,.10) !important;
  border-radius: 14px !important;
}
.dg-cart-empty-trust-icon svg { stroke: var(--navy, #008296) !important; }
.dg-cart-empty-trust-lbl { color: #3D4545 !important; font-weight: 600 !important; font-size: 11px !important; }
.dg-cart-empty-divider { border-color: #c8d8da !important; }
.dg-cart-empty-social { background: #fff !important; border-top-color: #dde4e5 !important; }
.dg-cart-empty-social-txt { color: #3D4545 !important; font-weight: 600 !important; }
.dg-cart-empty-av {
  background: linear-gradient(135deg, var(--primary-400, #2DA5B3), var(--primary-600, #006D7E)) !important;
  color: #fff !important; font-weight: 800 !important;
}

/* ─── RECENTLY VIEWED ─────────────────────────────────────── */
.dg-cart-recent {
  background: #fff !important;
  border-top: 1px solid #dde4e5 !important;
  padding: 14px 16px 18px !important;
  margin-top: 0 !important;
}
.dg-cart-recent-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--navy-deep, #005F6B) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}
.dg-cart-recent-item {
  background: #f4f8f8 !important;
  border: 1px solid #d2e0e2 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.dg-cart-recent-item:hover {
  border-color: var(--navy-mid, #00A0B4) !important;
  box-shadow: 0 2px 10px rgba(0,130,150,.10) !important;
}
.dg-cart-recent-item img {
  border-radius: 8px !important;
  background: #fff !important;
  border: 1px solid #dde4e5 !important;
}
.dg-cart-recent-name { font-size: 12.5px !important; font-weight: 700 !important; color: #0A0E0F !important; }
.dg-cart-recent-price { font-size: 12px !important; font-weight: 800 !important; color: var(--navy-deep, #005F6B) !important; }
/* + button: amber CTA, always visible */
.dg-cart-recent-atc {
  width: 34px !important; height: 34px !important;
  background: linear-gradient(135deg, #FFB800, #F0A800) !important;
  color: #0A0E0F !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(255,184,0,.30) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  border: none !important;
}
.dg-cart-recent-atc:hover {
  background: linear-gradient(135deg, #FFC31A, #FFB800) !important;
  box-shadow: 0 4px 14px rgba(255,184,0,.44) !important;
}
.dg-cart-recent-oos { color: #9AABAC !important; font-size: 10.5px !important; }

/* ─── CONFETTI STRIP ──────────────────────────────────────── */
.dg-cart-confetti-strip { height: 5px !important; }

/* ══════════════════════════════════════════════════════════════
   END UI/UX OVERHAUL v99.17
   ══════════════════════════════════════════════════════════════ */

/* ── Announcement bar: force amber, never navy — fixes !important PHP override ──
   These rules are at the end of the file so they win specificity race.
   The PHP-injected <style> tag in <head> is matched by equal specificity;
   these rules come later in the cascade so they take effect correctly.
   NOTE: To permanently lock the colour, the PHP files (functions.php and
   inc/dg-color-system.php) have also been patched to emit amber instead.  ── */
.dg-announcement,
.dg-ribbon {
  background: linear-gradient(90deg,#b45309 0%,#d97706 40%,#f59e0b 60%,#d97706 80%,#b45309 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(180,83,9,.35) !important;
}
.dg-ribbon-item span,
.dg-ribbon-item svg,
.dg-ribbon-sep {
  color: #fff !important;
}
.dg-ribbon--static.dg-ribbon,
.dg-ribbon--static {
  background: linear-gradient(90deg,#b45309 0%,#d97706 40%,#f59e0b 60%,#d97706 80%,#b45309 100%) !important;
}
/* Ensure item text is white and crisp in static mode too */
.dg-ribbon--static .dg-ribbon-item span {
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
}
/* ── end announcement fix ── */

/* ══════════════════════════════════════════════════════════════
   v99.18 FIX — Cart auto-coupon sub-text white-on-white bug
   ══════════════════════════════════════════════════════════════
   Root cause: dg-color-system.php overrides .dg-cart-auto-coupon
   background to a LIGHT gradient (success-50 / primary-50) but the
   v80 CSS block set .dg-cart-auto-coupon-sub colour to
   rgba(255,255,255,.82) — white text on a white/light bg = invisible.

   This block sits at the very end of the file so it always wins the
   cascade, regardless of which earlier version block applied.

   When the colour system is ACTIVE (light bg):
     sub-text  → dark teal  (readable on light bg)
     badge     → dark teal text, translucent teal bg

   The colour-system.php also now sets these via inline <style> with
   !important, which takes priority over this static rule — so there is
   no conflict; both agree on a dark readable colour.
   ══════════════════════════════════════════════════════════════ */

/* Light-background variant (colour system active) */
.dg-cart-auto-coupon-sub {
  /* Safe dark fallback — overrides the v80 rgba(255,255,255,.82) */
  color: var(--primary-700, #005F6B) !important;
  opacity: .85 !important;
}
.dg-cart-auto-coupon-badge {
  color: var(--primary-700, #005F6B) !important;
  background: rgba(0, 95, 107, .12) !important;
}

/* Dark-background variant: when the colour system is NOT active the
   card keeps the teal gradient bg — restore white text for those cases
   by targeting the non-overridden state. We use :not() on the parent
   to detect whether the colour-system inline style has been applied.
   Because we cannot reliably detect that in CSS alone, the JS in
   main.js (enhanceCouponBar) already force-sets inline styles for the
   dark-bg case, which take precedence over this rule. No change needed
   in JS — it already sets color:#fff inline. */

/* ── end v99.18 fix ── */