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

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

/* ─── DESIGN TOKENS — Amazon Pharmacy-inspired palette ─── */
:root {
  /* Primary: Amazon Pharmacy teal (header/banner teal) */
  --navy:        #008296;  /* Amazon Pharmacy teal — replaces navy as primary */
  --navy-deep:   #005F6B;  /* Deeper teal for dark surfaces */
  --navy-mid:    #00A0B4;  /* Mid teal for hover states */

  /* Accent: Amazon yellow CTA */
  --teal:        #FFB800;  /* Amazon yellow-amber — used for key CTAs & highlights */
  --teal-light:  #FFF8E0;  /* Light yellow tint for hover backgrounds */

  /* Supporting colours */
  --green:       #067D62;  /* Amazon-style deep green for savings/success */
  --amber:       #E77600;  /* Amazon orange for badges/urgency */
  --red:         #CC0C39;  /* Amazon-style red for errors/remove */

  /* Neutrals — kept clinical and clean */
  --ink:         #0F1111;  /* Amazon near-black text */
  --slate:       #565959;  /* Amazon secondary text */
  --muted:       #8F9191;  /* Amazon muted text */
  --bg:          #F7F8F8;  /* Amazon page background (slightly warm grey) */
  --bg2:         #EAEDED;  /* Amazon secondary bg (search bar grey) */
  --white:       #FFFFFF;
  --border:      #D5D9D9;  /* Amazon border */
  --border-mid:  #ADBAC5;
  --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);
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --font-head:   'Outfit', sans-serif;
  --font-body:   'Inter', sans-serif;
  --max-w:       1280px;
  --sidebar-w:   220px;

  /* Mobile-specific 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;
  /* 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(--teal); }
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: var(--navy-deep);
  color: rgba(255,255,255,.85);
  font-size: 11px;
  padding: 0;
  overflow: hidden;
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
  width: 100%;
}

/* 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;
}

/* 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: var(--teal-light); }
.dg-ribbon-item span { font-size: 11px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }

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

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

/* ============================================================
   HEADER — mobile first
   ============================================================ */
.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 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: 199;
  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: 200;
  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: #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: 199;
  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%;
  /* On mobile the fixed bottom-nav sits over the drawer — reserve its height */
  padding-bottom: var(--mobile-bottom-nav-h);
  background: var(--white);
  z-index: 200;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
@media (min-width: 768px) {
  /* Desktop has no bottom nav — remove the extra padding */
  .dg-cart-drawer { padding-bottom: 0; }
}
.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 ── */
.dg-cart-drawer-body { flex: 1; overflow-y: auto; overflow-x: hidden; 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-savings-bar { background: #E0F5F1; border-bottom: 1px solid #6DC8B8; padding: 10px 20px; font-size: 12px; font-weight: 700; color: var(--green); display: flex; align-items: center; gap: 8px; letter-spacing: .01em; }
.dg-cart-savings-bar strong { color: var(--green); }

/* ── 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); }
.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: #1E293B; line-height: 1.35; }
.dg-cart-item-brand { font-size: 10.5px; color: #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: #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: #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: 9px 14px; border-top: 1px solid #F1F5F9; background: var(--bg); }
.dg-cart-item-meta { font-size: 10.5px; color: #64748B; display: flex; align-items: center; gap: 5px; }
.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: #E2E8F0; border-radius: 99px; overflow: hidden; }
.dg-cart-ship-fill { height: 100%; background: var(--green); border-radius: 99px; transition: width .5s ease; }

/* ── COUPON ROW ── */
.dg-cart-coupon-row { margin: 10px 14px 0; display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #fff; border: 1.5px dashed var(--border-mid); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.dg-cart-coupon-row:hover { border-color: #00A0B4; background: #FAFBFF; }
.dg-cart-coupon-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--teal-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dg-coupon-toggle { flex: 1; display: flex; flex-direction: column; background: none; border: none; cursor: pointer; padding: 0; text-align: left; }
.dg-coupon-toggle-label { font-size: 12.5px; font-weight: 700; color: var(--navy); letter-spacing: .005em; }
.dg-coupon-toggle-sub { font-size: 10px; color: #94A3B8; margin-top: 2px; }
.dg-coupon-input-wrap { display: flex; margin: 8px 14px 0; border: 1.5px solid var(--border-mid); border-radius: 10px; overflow: hidden; transition: border-color .15s; background: #fff; }
.dg-coupon-input-wrap:focus-within { border-color: var(--navy); }
#dg-coupon-code { flex: 1; border: none; padding: 10px 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; outline: none; background: transparent; color: #1E293B; }
#dg-coupon-apply { background: var(--navy); color: #fff; border: none; padding: 10px 16px; font-size: 12px; font-weight: 700; cursor: pointer; letter-spacing: .02em; transition: background .15s; }
#dg-coupon-apply:hover { background: var(--navy-deep); }
.dg-coupon-msg { margin: 6px 14px 0; font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 8px; }
.dg-coupon-msg.success { background: #C8EFE9; color: var(--green); }
.dg-coupon-msg.error   { background: #FFDEE6; color: #8B0000; }
.dg-cart-coupon-applied { display: flex; align-items: center; gap: 8px; margin: 10px 14px 0; padding: 9px 13px; background: #C8EFE9; border: 1px solid #6DC8B8; border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--green); }
.dg-cart-coupon-applied span { flex: 1; }
.dg-remove-coupon { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--green); padding: 0; line-height: 1; }
.dg-remove-coupon:hover { color: var(--red); }

/* ── 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 #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: #64748B; font-weight: 500; }
.dg-cart-price-lbl-bold { font-size: 13.5px; font-weight: 700; color: #1E293B; }
.dg-cart-price-val { font-weight: 600; color: #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; }

/* ── 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: #1E293B; margin-bottom: 6px; letter-spacing: -.02em; }
.dg-cart-empty p { font-size: 13px; color: #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: #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: #475569; margin-left: 10px; }

/* ── FIXED FOOT ── */
.dg-cart-drawer-foot { background: #fff; border-top: 1px solid var(--border); padding: 14px 16px 16px; flex-shrink: 0; }
.dg-cart-ships-line { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: #64748B; margin-bottom: 11px; }
.dg-cart-ships-line strong { color: #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: #FFD814; color: #0F1111; border: 1.5px solid #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: #F7CA00; color: #0F1111; }
.dg-cart-view-btn { display: none !important; }
.dg-cart-bottom-trust { display: none; }
.dg-cart-bt-item { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 500; color: #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 #E2E8F0; 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 #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; }

/* ============================================================
   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: linear-gradient(135deg, #0A5F5F 0%, #0D7F7F 40%, #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: #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: #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 {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
  padding: 24px 16px 28px;
  position: relative;
  overflow: hidden;
}
.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-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,.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  text-align: center;
  align-self: stretch;
}
.dg-hero-price-label { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 4px; }
.dg-hero-price { font-family: var(--font-head); font-size: 36px; font-weight: 800; color: var(--white); line-height: 1; margin-bottom: 4px; }
.dg-hero-price-sub { font-size: 11px; color: rgba(255,255,255,.6); margin-bottom: 12px; }
.dg-hero-free-ship {
  display: inline-block;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 10.5px; font-weight: 600;
  color: rgba(255,255,255,.8);
}

/* ============================================================
   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 { 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;
  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: #F0FFF4; border-top: 1px solid #BBF7D0; border-bottom: 1px solid #BBF7D0;
  padding: 8px 16px; font-size: 12px; font-weight: 600; color: #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 { 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; }
.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: #DCFCE7; color: #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; }

/* Viewing badge */
.dg-product-viewing-inline {
  display: inline-flex; align-items: center; gap: 5px;
  background: #F0FFF4; border: 1px solid #BBF7D0;
  border-radius: 20px; padding: 3px 10px;
  font-size: 11.5px; font-weight: 600; color: #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: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px;
}
.dg-trust-badge {
  display: flex; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.dg-trust-badge:hover { border-color: var(--navy-mid); box-shadow: 0 2px 8px rgba(26,43,107,.07); }
.dg-trust-badge-icon {
  width: 28px; height: 28px; border-radius: 8px;
  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: #dbeafe; color: #1d4ed8; }
.dg-trust-blue svg { stroke: #1d4ed8; }
.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: block; line-height: 1.2; }
.dg-trust-badge span { font-size: 10px; color: var(--muted); display: block; }

/* 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-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: #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: #DCFCE7; color: #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; }
.dg-empty { text-align: center; padding: 50px 20px; }
.dg-empty-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--bg2); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.dg-empty h3 { font-size: 16px; margin-bottom: 7px; }
.dg-empty p { color: var(--slate); font-size: 13px; }

/* ============================================================
   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-empty { padding: 16px; font-size: 13px; color: var(--slate); }
.dg-sd-correction { padding: 8px 14px; background: #FFFBEB; font-size: 12px; color: var(--amber); }
.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 { min-width: 150px; 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; min-width: 160px; }

  /* 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(2, 1fr); gap: 10px; }
@media (min-width: 600px) {
  .dg-account-reorder-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .dg-account-reorder-grid { grid-template-columns: repeat(4, 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 */
}
/* Hero stays navy gradient — just add a subtle border-bottom to separate */
.dg-hero {
  border-bottom: 3px solid rgba(0, 181, 204, 0.3);
}
.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); }

/* coupon/pay overrides removed — canonical rules in base section */

.dg-coupon-input-wrap {
  display: flex;
  gap: 0;
  margin-top: 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .15s;
}
.dg-coupon-input-wrap:focus-within { border-color: var(--navy); }
#dg-coupon-code {
  flex: 1;
  border: none;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  outline: none;
  font-family: var(--font-body);
  background: var(--bg2);
}
#dg-coupon-apply {
  background: var(--navy);
  color: var(--white);
  border: none;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .15s;
}
#dg-coupon-apply:hover { background: var(--teal); }

.dg-coupon-msg {
  margin-top: 6px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.dg-coupon-msg.success { background: #DCFCE7; color: #166534; }
.dg-coupon-msg.error   { background: #FFDEE6; color: #8B0000; }

.dg-cart-coupon-applied {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #DCFCE7;
  border: 1px solid #86EFAC;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: #166534;
  margin-bottom: 8px;
}
.dg-cart-coupon-applied span { flex: 1; }
.dg-remove-coupon {
  background: none; border: none; cursor: pointer;
  font-size: 16px; color: #166534; padding: 0 2px; line-height: 1;
  font-family: var(--font-body);
}
.dg-remove-coupon:hover { color: var(--red); }

.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 {
  font-size: clamp(26px, 6vw, 38px) !important;
  font-weight: 900 !important;
  color: var(--teal) !important;
  text-shadow: 0 0 24px rgba(0,181,204,.3);
  letter-spacing: -.02em;
}
.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: better visual separation from counter bar ── */
.dg-hero {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-mid) 60%, #1e3280 100%) !important;
  border-bottom: none !important;
  padding: 28px 16px 32px !important;
}
/* 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 */
.dg-ribbon {
  background: var(--navy) !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dg-ribbon-item span { color: rgba(255,255,255,.9) !important; font-size: 11.5px !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: #DCFCE7; color: #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-otp-login-wrap {
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 32px 16px 48px;
  background: var(--bg);
}

.dg-otp-login-card {
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(26,43,107,.08);
  overflow: hidden;
}

/* ── Brand header ── */
.dg-otp-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--navy) 0%, #0D7F7F 100%);
  color: #fff;
}

.dg-otp-brand-icon {
  width: 42px; height: 42px;
  background: rgba(255,255,255,.15);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.dg-otp-brand-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.dg-otp-brand-sub {
  font-size: 11px;
  color: rgba(255,255,255,.7);
  margin-top: 2px;
}

/* ── Steps ── */
.dg-otp-step {
  padding: 28px 24px 24px;
}

.dg-otp-heading {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 0 0 6px !important;
  line-height: 1.25 !important;
}

.dg-otp-sub {
  font-size: 13px;
  color: var(--slate);
  margin: 0 0 22px;
  line-height: 1.6;
}

/* ── Field ── */
.dg-otp-field {
  margin-bottom: 20px;
}

.dg-otp-field label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--slate);
  margin-bottom: 7px;
}

.dg-otp-input-row {
  display: flex;
  gap: 8px;
}

.dg-otp-input-row input[type="email"] {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s;
  min-width: 0;
}

.dg-otp-input-row input[type="email"]:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26,43,107,.08);
}

/* ── OTP separate digit boxes — override WC MyAccount global input rules ── */
.dg-otp-login-wrap .dg-otp-boxes,
#dg-otp-boxes.dg-otp-boxes,
.dg-otp-boxes {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 4px !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
}

.dg-otp-login-wrap .dg-otp-box,
#dg-otp-boxes .dg-otp-box,
.dg-otp-box {
  display: inline-block !important;
  width: 46px !important;
  height: 56px !important;
  max-width: 46px !important;
  flex: 0 0 46px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  text-align: center !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  font-family: 'Courier New', monospace !important;
  background: var(--bg) !important;
  caret-color: transparent;
  -moz-appearance: textfield;
  padding: 0 !important;
  box-sizing: border-box !important;
  line-height: 56px !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(--teal) !important;
  box-shadow: 0 0 0 3px rgba(0,181,204,.15) !important;
  background: var(--white) !important;
  transform: scale(1.06);
}

.dg-otp-box--filled {
  border-color: var(--teal) !important;
  background: #E0F5F1 !important;
  color: var(--teal-dark, #008296) !important;
}


/* ── Buttons ── */
.dg-otp-btn-primary {
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background .15s, transform .1s;
  flex-shrink: 0;
}

.dg-otp-btn-primary:hover:not(:disabled) {
  background: var(--teal);
}

.dg-otp-btn-primary:active:not(:disabled) {
  transform: scale(.98);
}

.dg-otp-btn-primary:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.dg-otp-btn-full {
  width: 100%;
  justify-content: center;
  padding: 13px 18px;
  font-size: 14px;
  border-radius: var(--radius-sm);
  margin-top: 4px;
}

/* ── Spam hint row ── */
.dg-otp-hint-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  margin-bottom: 2px;
}

.dg-otp-hint-icon {
  flex-shrink: 0;
  color: var(--muted);
}

.dg-otp-hint-text {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Resend row: countdown left · Resend OTP pill right ── */
.dg-otp-resend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.dg-otp-countdown {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
}

/* Resend OTP — teal pill button, disabled during countdown */
.dg-otp-resend-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--teal, #00B5CC);
  background: transparent;
  color: var(--teal, #00B5CC);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, opacity .15s;
  white-space: nowrap;
}

.dg-otp-resend-pill:not(:disabled):hover {
  background: var(--teal, #00B5CC);
  color: #fff;
}

.dg-otp-resend-pill:disabled {
  opacity: .4;
  cursor: not-allowed;
  border-color: var(--muted);
  color: var(--muted);
}

/* Change email — full-width ghost button below Verify */
.dg-otp-change-email-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 11px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, color .15s;
}

.dg-otp-change-email-btn:hover {
  border-color: var(--navy);
  color: var(--teal);
}



/* ── Error ── */
.dg-otp-error {
  display: none;
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: #DC2626;
  padding: 7px 10px;
  background: #FEF2F2;
  border-radius: 6px;
  border-left: 3px solid #DC2626;
}

/* ── Trust badges ── */
.dg-otp-trust {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.dg-otp-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.dg-otp-trust svg { color: var(--teal); flex-shrink: 0; }

/* ── Success step ── */
.dg-otp-success-icon {
  width: 60px; height: 60px;
  background: #DCFCE7;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  color: #16A34A;
}

/* ── Spinner ── */
.dg-otp-spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--border);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: dg-spin .7s linear infinite;
  margin: 16px auto 0;
}

@keyframes dg-spin { to { transform: rotate(360deg); } }

/* ── Bottom link ── */
.dg-otp-checkout-link {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.dg-otp-checkout-link a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

.dg-otp-checkout-link a:hover { color: var(--teal); }

/* ── Mobile ── */
@media (max-width: 480px) {
  .dg-otp-login-card { border-radius: 12px; }
  .dg-otp-step { padding: 22px 18px 20px; }
  .dg-otp-brand { padding: 16px 18px; }
  .dg-otp-input-row { flex-direction: column; }
  .dg-otp-btn-primary { width: 100%; justify-content: center; }
  .dg-otp-box { width: 40px !important; max-width: 40px !important; flex: 0 0 40px !important; height: 50px !important; font-size: 20px !important; line-height: 50px !important; }
  .dg-otp-boxes { gap: 5px !important; }
  .dg-otp-trust { gap: 10px; }
}

/* ── Hide WC default login/register page layout (belt+suspenders) ── */
.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-navigation,
.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-notices-wrapper {
  display: none !important;
}

/* ── Make sure our login wrap fills the WC content area cleanly ── */
.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  border: none !important;
  background: transparent !important;
}

.woocommerce-account:not(.logged-in) .woocommerce {
  max-width: 100% !important;
}

/* ================================================================
   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: #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: #5EEAD4;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
}
.dg-live-badge span {
  width: 5px; height: 5px;
  background: #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 */
.dg-coupon-input-row {
  display: flex !important;
  gap: 0 !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  transition: border-color .15s !important;
}
.dg-coupon-input-row:focus-within { border-color: var(--navy) !important; }
#dg-coupon-code {
  flex: 1 !important;
  border: none !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  outline: none !important;
  background: transparent !important;
  min-width: 0 !important;
}
#dg-coupon-apply {
  background: var(--navy) !important;
  color: var(--white) !important;
  border: none !important;
  padding: 9px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: background .12s !important;
}
#dg-coupon-apply:hover { background: var(--teal) !important; }

/* Available coupons slider */
.dg-coupon-available { margin-top: 12px !important; }
.dg-coupon-available-label {
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  margin-bottom: 8px !important;
}
.dg-coupon-chips {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding-bottom: 4px !important;
  scrollbar-width: none !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, #F0FDF4, #DCFCE7) !important;
  border: 1.5px dashed #86EFAC !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: border-color .12s, transform .1s !important;
}
.dg-available-coupon-chip:hover {
  border-color: #16A34A !important;
  transform: translateY(-1px) !important;
}
.dg-ac-code {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  color: #166534 !important;
  font-family: monospace !important;
}
.dg-ac-label {
  font-size: 10.5px !important;
  color: #15803D !important;
  font-weight: 600 !important;
}

/* 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: #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,
    .dg-btn-solid span { display: none !important; }
    .dg-btn-solid { 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 layout fix ── */
@media (min-width: 768px) {
  .dg-otp-login-wrap {
    max-width: 440px !important;
    margin: 20px auto !important;
    padding: 24px 16px 40px !important;
  }
}

/* =============================================================
   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 ── */
#dg-coupon-input-wrap { display: none; }
.dg-coupon-msg.success { background: #C8EFE9 !important; color: var(--green) !important; }
.dg-coupon-msg.error   { background: #FFDEE6 !important; color: #8B0000 !important; }
.dg-coupon-available { margin-top: 8px !important; }
.dg-coupon-available-label { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .05em !important; color: #64748B !important; margin-bottom: 5px !important; }
.dg-coupon-chips { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; }
.dg-available-coupon-chip { background: var(--teal-light) !important; border: 1px solid var(--border-mid) !important; border-radius: 99px !important; padding: 3px 10px !important; font-size: 11px !important; cursor: pointer !important; color: var(--navy-deep) !important; font-weight: 700 !important; display: flex !important; align-items: center !important; gap: 4px !important; }
.dg-available-coupon-chip:hover { background: var(--navy-deep) !important; color: #fff !important; border-color: var(--navy-deep) !important; }
.dg-ac-code { font-family: monospace !important; letter-spacing: .06em !important; }
.dg-ac-label { font-size: 9.5px !important; color: inherit !important; opacity: .75 !important; }

/* ── 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 */
.dg-coupon-input-row {
  display: flex !important;
  gap: 6px !important;
  align-items: stretch !important;
}
#dg-coupon-code {
  flex: 1 !important;
  min-width: 0 !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  background: var(--white) !important;
  outline: none !important;
  font-family: var(--font-body) !important;
}
#dg-coupon-code:focus { border-color: var(--navy) !important; }
#dg-coupon-apply {
  flex-shrink: 0 !important;
  background: var(--navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
  white-space: nowrap !important;
  transition: background .15s !important;
}
#dg-coupon-apply:hover    { background: var(--teal) !important; }
#dg-coupon-apply:disabled { opacity: .6 !important; cursor: wait !important; }

/* 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%, #1e3a8a 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 */
.dg-cart-coupon-row {
  border-top: 1px solid var(--border) !important;
  padding: 12px 0 4px !important;
  margin-top: 4px !important;
}

.dg-coupon-toggle {
  /* Layout */
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 8px 0 !important;
  /* Typography */
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  font-family: var(--font-body) !important;
  /* Reset */
  background: none !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  text-align: left !important;
  /* Transition */
  transition: color .12s !important;
}
.dg-coupon-toggle:hover {
  color: var(--teal) !important;
  background: none !important;
}
.dg-coupon-toggle:focus-visible {
  outline: 2px solid var(--navy) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* SVG icon left */
.dg-coupon-toggle > svg:first-child {
  flex-shrink: 0 !important;
  color: var(--navy) !important;
  opacity: .7 !important;
}

/* Chevron right — smooth rotation */
.dg-coupon-chevron {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  color: var(--muted) !important;
  transition: transform 200ms ease !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: animated expand via max-height */
.dg-coupon-panel {
  /* max-height collapse/expand — driven by JS adding/removing [aria-hidden] */
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 220ms ease, opacity 180ms ease !important;
  opacity: 0 !important;
}
.dg-coupon-panel.is-open {
  max-height: 200px !important;
  opacity: 1 !important;
}

/* Input row */
.dg-coupon-input-row {
  display: flex !important;
  gap: 0 !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  transition: border-color .15s !important;
  margin-top: 10px !important;
}
.dg-coupon-input-row:focus-within {
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px rgba(26,43,107,.07) !important;
}

#dg-coupon-code {
  flex: 1 !important;
  border: none !important;
  padding: 10px 13px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  outline: none !important;
  background: transparent !important;
  min-width: 0 !important;
  color: var(--ink) !important;
}

#dg-coupon-apply {
  background: var(--navy) !important;
  background-image: none !important;
  color: var(--white) !important;
  border: none !important;
  padding: 10px 18px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: background .12s !important;
  font-family: var(--font-body) !important;
}
#dg-coupon-apply:hover { background: var(--teal) !important; }

.dg-coupon-msg {
  margin-top: 8px !important;
  font-size: 12.5px !important;
  padding: 7px 11px !important;
  border-radius: var(--radius-sm) !important;
  display: none;
}
.dg-coupon-msg.success { background: #DCFCE7 !important; color: #166534 !important; display: block !important; }
.dg-coupon-msg.error   { background: #FFDEE6 !important; color: #8B0000 !important; display: block !important; }

/* Available coupon chips */
.dg-coupon-available { margin-top: 12px !important; }
.dg-coupon-available-label {
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  margin-bottom: 7px !important;
}
.dg-coupon-chips {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding-bottom: 4px !important;
  scrollbar-width: none !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: #F0FDF4 !important;
  border: 1.5px dashed #86EFAC !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: border-color .12s, transform .1s !important;
}
.dg-available-coupon-chip:hover {
  border-color: #16A34A !important;
  transform: translateY(-1px) !important;
}
.dg-ac-code {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  color: #15803D !important;
}
.dg-ac-label {
  font-size: 10px !important;
  color: var(--slate) !important;
}


/* ── 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(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

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

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

.dg-reorder-info { flex: 1; min-width: 0; }

.dg-reorder-name {
  display: block; font-size: 11.5px; font-weight: 600;
  color: var(--ink); line-height: 1.3; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none;
}

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

.dg-reorder-btn {
  width: 30px; height: 30px;
  background: var(--navy); color: var(--white);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border: none; cursor: pointer;
  transition: background .15s;
}

.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 ── */
.dg-cart-coupon-row {
  margin: 10px 14px 0 !important;
  padding: 10px 14px !important;
  border: 1.5px dashed var(--border-mid) !important;
  border-top: 1.5px dashed var(--border-mid) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.dg-cart-coupon-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--teal-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* Fix 10 extra: remove space wasted below checkout button */
.dg-cart-drawer-foot { padding: 10px 14px 14px !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;
  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: 6px;
  font-size: 12px; font-weight: 600; color: #C2410C;
  margin-bottom: 12px;
  background: #FFF7ED; border: 1px solid #FED7AA;
  border-radius: var(--radius-sm, 8px); padding: 7px 11px;
}

/* ── 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: #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: #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: #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: #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: #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 #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: #1E293B;
  margin: 0 0 3px;
  line-height: 1.35;
}
.dg-sd-nr-sub {
  font-size: 12px;
  color: #64748B;
  line-height: 1.5;
  margin: 0;
}
.dg-sd-nr-did-you-mean {
  font-size: 11.5px;
  color: #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: #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: #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: #00A0B4;
}

/* ── Fix 2: Mobile cart drawer foot — compact, no wasted space ── */
@media (max-width: 767px) {
  .dg-cart-drawer-foot {
    padding: 8px 12px 10px !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 */
.dg-cart-coupon-row {
  margin: 8px 12px 0 !important;
  padding: 9px 12px !important;
  border: 1.5px dashed var(--border-mid) !important;
  border-radius: 10px !important;
  background: #FAFBFF !important;
}
.dg-cart-coupon-row:hover {
  border-color: #00A0B4 !important;
  background: #F5F3FF !important;
}
.dg-cart-coupon-icon {
  width: 30px !important; height: 30px !important;
  border-radius: 8px !important;
  background: var(--teal-light) !important;
}
.dg-coupon-toggle-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
}
.dg-coupon-toggle-sub {
  font-size: 10px !important;
  color: #94A3B8 !important;
}

/* Expanded input panel */
.dg-coupon-input-wrap {
  margin: 6px 12px 0 !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(26,43,107,.06) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.dg-coupon-input-wrap:focus-within {
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px rgba(26,43,107,.08) !important;
}
#dg-coupon-code {
  flex: 1 !important;
  border: none !important;
  padding: 11px 13px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #1E293B !important;
  background: transparent !important;
  outline: none !important;
}
#dg-coupon-code::placeholder {
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: #94A3B8 !important;
}
#dg-coupon-apply {
  background: var(--navy) !important;
  color: #fff !important;
  border: none !important;
  padding: 11px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  letter-spacing: .04em !important;
  transition: background .15s !important;
  white-space: nowrap !important;
}
#dg-coupon-apply:hover { background: var(--navy-deep) !important; }
#dg-coupon-apply:active { background: #0D1640 !important; }

/* Message states */
.dg-coupon-msg {
  margin: 5px 12px 0 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 7px 11px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.dg-coupon-msg.success {
  background: #DCFCE7 !important;
  color: #15803D !important;
  border: 1px solid #BBF7D0 !important;
}
.dg-coupon-msg.error {
  background: #FFDEE6 !important;
  color: #DC2626 !important;
  border: 1px solid #FECACA !important;
}

/* Applied coupon tag */
.dg-cart-coupon-applied {
  margin: 8px 12px 0 !important;
  padding: 8px 12px !important;
  background: #DCFCE7 !important;
  border: 1px solid #86EFAC !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #15803D !important;
}

/* ═══════════════════════════════════════════════════════════
   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: #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: #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: #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: #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: #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: #94A3B8;
  background: #F1F5F9;
  border: 1.5px solid #E2E8F0;
}

/* ══════════════════════════════════════════════════════════════
   COUPON APPLY BUTTON — final authoritative style: bordered button
   ══════════════════════════════════════════════════════════════ */
#dg-coupon-apply {
  background: var(--navy) !important;
  color: #fff !important;
  border: 1.5px solid var(--navy) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 18px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  letter-spacing: .02em !important;
  transition: background .15s, border-color .15s !important;
}
#dg-coupon-apply:hover    { background: var(--teal) !important; border-color: var(--teal) !important; }
#dg-coupon-apply:active   { background: var(--navy-deep) !important; border-color: var(--navy-deep) !important; }
#dg-coupon-apply:disabled { opacity: .6 !important; cursor: wait !important; }

/* ══════════════════════════════════════════════════════════════
   COUPON v48 — restructured toggle + panel (functions.php v48)
   Toggle is now a full-width button containing icon, text, chevron.
   Panel (#dg-coupon-input-wrap) contains input-row, msg, and chips.
   ══════════════════════════════════════════════════════════════ */

/* Full-width toggle row — no inner icon div any more */
.dg-cart-coupon-row {
  border-top: 1px solid var(--border) !important;
  padding: 4px 0 0 !important;
  margin: 8px 14px 0 !important;
  background: none !important;
  border-radius: 0 !important;
}

#dg-coupon-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 11px 14px !important;
  background: #F8FAFC !important;
  border: 1.5px dashed var(--border-mid, #CBD5E1) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s !important;
  text-align: left !important;
  font-family: var(--font-body) !important;
}
#dg-coupon-toggle:hover {
  border-color: var(--teal, #00A0B4) !important;
  background: #F0FDFF !important;
}

.dg-coupon-toggle-icon {
  width: 32px !important;
  height: 32px !important;
  background: var(--teal-light, #E0F7FA) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: var(--navy, #1a2b6b) !important;
}

.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) !important;
  letter-spacing: .005em !important;
  line-height: 1.3 !important;
}

#dg-coupon-toggle .dg-coupon-toggle-sub {
  font-size: 10.5px !important;
  color: var(--muted, #94A3B8) !important;
  margin-top: 1px !important;
  font-weight: 400 !important;
}

#dg-coupon-toggle .dg-coupon-chevron {
  flex-shrink: 0 !important;
  color: var(--muted) !important;
  transition: transform 200ms ease !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 — contains input row, msg, chips */
#dg-coupon-input-wrap {
  margin: 8px 14px 0 !important;
  display: none; /* controlled by JS */
  padding: 12px !important;
  background: #fff !important;
  border: 1.5px solid var(--border, #E2E8F0) !important;
  border-radius: 10px !important;
}

/* Input + Apply button side by side with border */
.dg-coupon-input-row {
  display: flex !important;
  gap: 8px !important;
  align-items: stretch !important;
  margin: 0 !important;
  border: none !important;
}

#dg-coupon-code {
  flex: 1 !important;
  border: 1.5px solid var(--border, #E2E8F0) !important;
  border-radius: 7px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  outline: none !important;
  background: #FAFBFF !important;
  color: var(--ink, #1E293B) !important;
  min-width: 0 !important;
  transition: border-color .15s !important;
}
#dg-coupon-code:focus {
  border-color: var(--navy) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(26,43,107,.07) !important;
}

#dg-coupon-apply {
  flex-shrink: 0 !important;
  background: var(--navy) !important;
  color: #fff !important;
  border: 2px solid var(--navy) !important;
  border-radius: 7px !important;
  padding: 9px 18px !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: .02em !important;
  transition: background .12s, border-color .12s !important;
}
#dg-coupon-apply:hover {
  background: var(--teal, #00A0B4) !important;
  border-color: var(--teal, #00A0B4) !important;
}
#dg-coupon-apply:disabled {
  opacity: .6 !important;
  cursor: wait !important;
}

/* Available coupon chips slider */
.dg-coupon-available {
  margin-top: 12px !important;
  border-top: 1px solid var(--border) !important;
  padding-top: 10px !important;
}
.dg-coupon-available-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--muted) !important;
  margin-bottom: 8px !important;
}
.dg-coupon-chips {
  display: flex !important;
  gap: 7px !important;
  overflow-x: auto !important;
  padding-bottom: 2px !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: 1px !important;
  background: #F0FDF9 !important;
  border: 1.5px dashed #6EE7B7 !important;
  border-radius: 8px !important;
  padding: 6px 11px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: border-color .12s, background .12s, transform .1s !important;
}
.dg-available-coupon-chip:hover {
  border-color: var(--navy) !important;
  background: var(--navy) !important;
  transform: translateY(-1px) !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: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  color: var(--navy) !important;
  font-family: monospace !important;
}
.dg-ac-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--green, #16A34A) !important;
}

/* ══ v48 coupon final override — neutralise any earlier conflicting rules ══ */
/* The toggle is now a single full-width button; old icon div is removed */
.dg-cart-coupon-icon { display: none !important; } /* removed from HTML in v48 */

/* Ensure msg shows when class is set (JS uses className, not style) */
#dg-coupon-msg { display: none; font-weight: 600; font-size: 12.5px; border-radius: 7px; padding: 7px 10px; margin-top: 8px; }
#dg-coupon-msg.success { display: block !important; background: #DCFCE7 !important; color: #166534 !important; }
#dg-coupon-msg.error   { display: block !important; background: #FFDEE6 !important; color: #8B0000 !important; }