/* ==========================================================================
   DSIDE — "Retail" design
   --------------------------------------------------------------------------
   Bold commerce: condensed shop-sign headings, yellow price tags, deal-red
   calls to action, warm paper fields. Loaded after dside-gauge.css by
   includes/theme.php when admin_settings.site_design = 'retail'.

   Rules for this file
   1. The header is off-limits. Status bar, navbar, mega menu, Brands strip and
      the Featured Brands carousel keep the Gauge look: their tokens are pinned
      back to Gauge values in section 1 and nothing below targets them.
   2. Retail colours live in --r-* tokens so a season (season-*.css) can recolour
      the whole body by redefining a handful of them on :root.
   3. Page templates carry their own <style> blocks after this file, so rules
      here are prefixed with `body` (one extra type selector) to win ties, and
      use !important only where Gauge or an inline style already does.
   ========================================================================== */

:root {
  --r-ink:      #111317;
  --r-red:      #E11D2A;
  --r-red-d:    #B8141F;
  --r-yellow:   #FFC61A;
  --r-green:    #0E8F53;   /* cheapest price, and only that */
  --r-field:    #FFF8F1;   /* warm paper section ground */
  --r-rule:     #EFE6DD;
  --r-rule-2:   #F6EFE8;
  --r-mute:     #6E655F;

  /* the parts a season recolours */
  --r-cta:        var(--r-red);
  --r-cta-hover:  var(--r-red-d);
  --r-cta-ink:    #FFFFFF;
  --r-cta-shadow: rgba(225, 29, 42, .28);
  --r-accent:     var(--r-red);      /* links, eyebrows, "see all" */
  --r-alert:      var(--r-red);      /* clearance / discount */
  --r-badge-bg:   var(--r-yellow);   /* the price tag */
  --r-badge-ink:  var(--r-ink);
  --r-band:       var(--r-yellow);   /* hero underline, footer top edge */

  --r-disp: 'Barlow Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;
  --r-body: Inter, 'Segoe UI', system-ui, sans-serif;
  --r-r: 8px;
}

/* ------------------------------------------------ 0. retail tokens for body */
body {
  --g-gauge: var(--r-accent);
  --g-low:   var(--r-green);
  --g-alert: var(--r-alert);
  --g-mute:  var(--r-mute);
  --g-r:     var(--r-r);
  --g-disp:  var(--r-disp);
}
/* warm grounds only in light mode; dark mode keeps its own surfaces */
html:not([data-theme="dark"]) body {
  --g-field:  var(--r-field);
  --g-rule:   var(--r-rule);
  --g-rule-2: var(--r-rule-2);
}

/* ---------------------------------------- 1. header pinned to Gauge values */
.g-statusbar, .navbar, .mega-menu-bar, .mm-panel, .mm-sidebar, .mm-flyout, .mm-overlay,
.mm-brands-overlay, .mm-brands-strip, .mm-brand-detail, .dside-mobile-menu,
.dside-mobile-search, #searchResultsDropdown, .dside-compare-dropdown, .brand-carousel-outer {
  --g-field:  #F4F6F9;
  --g-rule:   #DDE3EA;
  --g-rule-2: #EDF0F4;
  --g-gauge:  #0B57D0;
  --g-low:    #0B6B45;
  --g-alert:  #A83A12;
  --g-mute:   #5C6673;
  --g-r:      4px;
  --g-disp:   Archivo, 'Segoe UI', system-ui, sans-serif;
}

/* ------------------------------------------------------------- 2. type */
body h1,
body .g-sec-h h2,
body .trending-section .trending-title,
body .hp-clr-section h2,
body .hp-sup-head h3,
body .v2-section-title,
body #heroTitle {
  font-family: var(--r-disp) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .005em !important;
}
/* product names are long; condensed, but never shouted */
body h1.v2-product-title {
  text-transform: none;
  font-size: 1.95rem;
  line-height: 1.08;
}
body .g-sec-h h2 { font-size: clamp(26px, 2.9vw, 36px); line-height: 1; }
body .trending-section .trending-title,
body .hp-clr-section h2 { font-size: 1.95rem !important; line-height: 1 !important; }
body .hp-sup-head h3 { font-size: 23px; }

body .g-eyebrow {
  font-family: var(--r-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--r-accent);
}
body .g-more,
body .trending-section .trending-browse {
  color: var(--r-accent) !important;
  font-family: var(--r-body);
  font-weight: 700 !important;
  font-size: 12.5px !important;
  text-transform: uppercase;
  letter-spacing: .07em;
}
body .g-more:hover { color: var(--r-cta-hover); }

/* --------------------------------------------------------- 3. buttons */
body .g-btn,
body .btn-primary,
body .btn-warning,
body .btn-danger {
  background: var(--r-cta);
  border: 1.5px solid var(--r-cta);
  color: var(--r-cta-ink);
  font-family: var(--r-disp);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--r-r);
  box-shadow: 0 6px 16px var(--r-cta-shadow);
  transition: background .15s, transform .15s, box-shadow .15s;
}
body .g-btn:hover,
body .btn-primary:hover,
body .btn-warning:hover,
body .btn-danger:hover {
  background: var(--r-cta-hover);
  border-color: var(--r-cta-hover);
  color: var(--r-cta-ink);
  transform: translateY(-1px);
}
body .g-btn.ghost,
body .btn-outline-primary,
body .btn-outline-dark {
  background: transparent;
  color: var(--r-ink);
  border: 1.5px solid var(--r-ink);
  box-shadow: none;
  font-family: var(--r-disp);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
body .g-btn.ghost:hover,
body .btn-outline-primary:hover,
body .btn-outline-dark:hover { background: var(--r-ink); color: #fff; border-color: var(--r-ink); }

/* ----------------------------------------------------- 4. product cards */
body .product-card {
  border: 1px solid var(--g-rule) !important;
  border-radius: 10px !important;
  transition: transform .16s, box-shadow .16s, border-color .16s !important;
}
body .product-card:hover {
  border-color: var(--r-cta) !important;
  box-shadow: 0 12px 28px rgba(17, 19, 23, .10) !important;
  transform: translateY(-3px) !important;
}
/* the yellow price tag */
body .savings-badge {
  background: var(--r-badge-bg) !important;
  color: var(--r-badge-ink) !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-family: var(--r-disp) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  padding: 3px 8px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .16) !important;
}
body .savings-badge::before { content: "\2212"; margin-right: 1px; }   /* minus sign */
body .product-card-title { font-weight: 600 !important; }
body .pc-title-link:hover .product-card-title { color: var(--r-cta) !important; }
body .pc-price-amount {
  font-family: var(--r-disp) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}
body .pc-price-amount-best {
  color: var(--r-green) !important;
  font-weight: 700 !important;
  font-size: 21px !important;
}
body .pc-price-row.pc-price-best {
  background: rgba(14, 143, 83, .07) !important;
  border-radius: 6px !important;
  padding-left: 7px !important;
  padding-right: 7px !important;
}
body .pc-was-price { font-family: var(--r-body) !important; }
body .pc-price { font-family: var(--r-disp) !important; font-size: 23px !important; }
body .pc-more-offers {
  font-family: var(--r-body) !important;
  font-weight: 700;
  font-size: 10.5px !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--r-accent) !important;
}
body .pc-compare-btn:hover,
body .pc-alert-btn:hover,
body .pc-wishlist-btn:hover { color: var(--r-cta) !important; border-color: var(--r-cta) !important; }
/* price gauge: a little heavier, in the cheapest-price green */
body .g-gauge-track { height: 5px; border-radius: 3px; background: var(--g-rule); }
body .g-gauge-fill  { background: var(--r-green); border-radius: 3px; }
body .g-gauge-tick  { top: -3px; height: 11px; background: var(--r-ink); }
body .g-gauge-lbl   { font-family: var(--r-body); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
body .g-gauge-lbl b { font-family: var(--r-disp); font-size: 14px; letter-spacing: 0; }

/* ---------------------------------------------------- 5. homepage hero */
body #heroSection { border-bottom: 5px solid var(--r-band); }
body #heroTitle { font-size: clamp(2.1rem, 3.9vw, 3.2rem) !important; line-height: .98 !important; }
body #heroSubtitle b { color: var(--r-yellow); }
body .hero-cat i { color: var(--r-yellow); }
body .hero-cat:hover { border-color: var(--r-yellow); background: rgba(255, 198, 26, .12); }
body .hero-cat-all,
body .hero-cat-all:hover { color: var(--r-yellow); }

/* -------------------------------------------- 6. homepage clearance strip */
body .hp-clr-section h2 i { color: var(--r-alert) !important; }
body .hp-clr-section .hp-clr-all {
  background: var(--r-cta);
  color: var(--r-cta-ink);
  border-color: var(--r-cta);
  font-family: var(--r-disp);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--r-r);
  box-shadow: 0 6px 16px var(--r-cta-shadow);
}
body .hp-clr-section .hp-clr-all:hover { background: var(--r-cta-hover); border-color: var(--r-cta-hover); }
body .hp-clr-nav:hover { background: var(--r-cta); }

/* ------------------------------------------------ 7. retailer offers rail */
body .g-rail .hp-sup-deal { border-radius: 10px; }
body .g-rail .hp-sup-deal:hover { border-color: var(--r-cta); box-shadow: 0 10px 24px rgba(17, 19, 23, .08); }
body .hp-sup-deal .hp-sup-foot code { color: var(--r-cta); border-color: var(--r-cta); }
body .g-arrow:hover { background: var(--r-cta); border-color: var(--r-cta); color: #fff; }

/* ---------------------------------------------------- 8. news (dark band) */
body section.hp-news { background: #16120F; border-top: 1px solid #2A231E; }
body section.hp-news .g-eyebrow,
body section.hp-news .g-more,
body .hp-news .hp-nw-cat { color: var(--r-yellow) !important; }
body .hp-news .hp-nw { border-radius: 10px; }
body .hp-news .hp-nw-img { border-radius: 10px 10px 0 0; }
body .hp-news .hp-nw:hover { border-color: var(--r-yellow); }

/* --------------------------------------------------- 9. clearance deals */
body .g-rail .hp-deal { border-radius: 10px; }
body .g-rail .hp-deal:hover { border-color: var(--r-cta); box-shadow: 0 12px 28px rgba(17, 19, 23, .10); }
body .hp-deal .hp-deal-badge {
  background: var(--r-badge-bg);
  color: var(--r-badge-ink);
  border: 0;
  border-radius: 4px;
  font-family: var(--r-disp);
  font-size: 14px;
  letter-spacing: .02em;
  padding: 3px 8px;
}
body .hp-deal .hp-deal-p b { font-family: var(--r-disp); font-size: 27px; color: var(--r-alert); letter-spacing: 0; }

/* ----------------------------------------------------- 10. product page */
body .v2-price-main { font-family: var(--r-disp); font-size: 2.75rem; color: var(--r-green); letter-spacing: 0; }
body .v2-img-discount,
body .v2-savings-tag {
  background: var(--r-badge-bg);
  color: var(--r-badge-ink);
  border: 0;
  border-radius: 4px;
  font-family: var(--r-disp);
  font-weight: 700;
  letter-spacing: .02em;
}
body .v2-img-discount { font-size: 1rem; padding: 4px 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .16); }
body .v2-savings-tag  { font-size: .9rem; }
body .v2-section-title { font-size: 1.35rem; }
body .v2-price-row.best { background: #F0FAF4; box-shadow: inset 4px 0 0 var(--r-green); }
body .v2-price-row.best:hover { background: #E6F6EC; }
body .v2-price-amount { font-family: var(--r-disp); font-size: 1.4rem; }
body .v2-price-row.best .v2-price-amount { color: var(--r-green); font-size: 1.6rem; }
body .v2-deal-btn,
body .v2-deal-btn.best {
  background: var(--r-cta) !important;
  color: var(--r-cta-ink) !important;
  border-color: var(--r-cta) !important;
  font-family: var(--r-disp);
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 6px;
}
body .v2-deal-btn:hover { background: var(--r-cta-hover) !important; border-color: var(--r-cta-hover) !important; }

/* ------------------------------------------------- 11. lists & pagination */
body .pagination .page-link { color: var(--r-ink); border-color: var(--g-rule); font-weight: 600; }
body .pagination .page-link:hover { color: var(--r-cta); background: var(--r-field); }
body .pagination .page-item.active .page-link { background: var(--r-cta); border-color: var(--r-cta); color: var(--r-cta-ink); }
body .breadcrumb a:hover { color: var(--r-cta); }

/* -------------------------------------------------------------- 12. footer */
body > footer,
body footer[style] {
  background: #16120F !important;
  border-top: 5px solid var(--r-band);
}
body footer a:hover { color: var(--r-yellow) !important; }
body footer h5,
body footer h6 {
  font-family: var(--r-disp) !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff !important;
}

/* ------------------------------------------------------------- 13. mobile */
@media (max-width: 575.98px) {
  body .trending-section .trending-title,
  body .hp-clr-section h2 { font-size: 1.45rem !important; }
  body #heroTitle { font-size: 1.95rem !important; }
  body .pc-price-amount-best { font-size: 18px !important; }
  body .v2-price-main { font-size: 2.2rem !important; }
}