/** Shopify CDN: Minification failed

Line 217:0 Unexpected "}"

**/
/* ==========================================================================
   Dough Guy brand styles
   Brand tokens + reusable component classes from the v2 design.
   Section-specific styles live in section files; this is shared scaffolding.
   ========================================================================== */

:root {
  --dg-red: #E03A2F;
  --dg-red-hover: #c22e25;
  --dg-black: #1A1A1A;
  --dg-cream: #F5EED8;
  --dg-gold: #F5C842;
  --dg-white: #FFFFFF;
  --dg-text-cream-muted: rgba(245, 238, 216, 0.55);
  --dg-text-cream-faint: rgba(245, 238, 216, 0.35);
  --dg-text-dark-muted: #5a4a3a;
  --dg-page-width: 1160px;
  --dg-page-padding: 52px;
  --dg-font-mono: 'Space Mono', 'Courier New', monospace;
  --dg-font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* ============================ Resets / base ============================ */
body {
  font-family: var(--dg-font-mono);
  background: var(--dg-cream);
  color: var(--dg-black);
}

/* Used by every Dough Guy section as a full-bleed band. */
.dg-band { width: 100%; }
.dg-band.dg-cream { background: var(--dg-cream); }
.dg-band.dg-black { background: var(--dg-black); color: var(--dg-cream); }
.dg-band.dg-red { background: var(--dg-red); color: #fff; }
.dg-band.dg-white { background: #fff; }
.dg-band.dg-gold { background: var(--dg-gold); }
.dg-band--border-top { border-top: 1px solid rgba(26, 26, 26, 0.07); }
.dg-band--border-top.dg-black,
.dg-band--border-top.dg-band.dg-black { border-top: 1px solid rgba(245, 238, 216, 0.06); }

.dg-inn {
  max-width: var(--dg-page-width);
  margin: 0 auto;
  padding: 0 var(--dg-page-padding);
}
/* Width modifiers — sections opt in via class (.dg-inn--wide / --full).
   Wide matches Horizon's narrow page-width (1440px) so content aligns with
   the header logo + cart-icon span. Full is edge-to-edge with minimal padding. */
.dg-inn--narrow { max-width: var(--dg-page-width); }
.dg-inn--wide { max-width: 1440px; }
.dg-inn--full { max-width: none; padding: 0 40px; }
@media (max-width: 980px) {
  .dg-inn--full { padding: 0 28px; }
}
.dg-sec { padding: 80px 0; }
.dg-sec-sm { padding: 52px 0; }
.dg-sec-md { padding: 92px 0; }

/* ============================ Grids ============================ */
.dg-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.dg-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dg-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }

/* ============================ Type ============================ */
.dg-ul {
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 3px;
  color: var(--dg-gold);
}
.dg-ul--red { color: var(--dg-red); }
.dg-ul--cream { color: var(--dg-cream); }

/* Shopify's `richtext` setting only allows a limited set of tags (no class
   attributes). Style <em> as the gold-underline accent and <strong> as the
   red-underline accent inside our headings/eyebrows so merchants can keep
   editing richtext while we keep the brand accent treatment. */
.dg-h1 em, .dg-h2 em, .dg-pp-heading em, .dg-ot em {
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 3px;
  color: var(--dg-gold);
}
.dg-h1 strong, .dg-h2 strong, .dg-pp-heading strong, .dg-ot strong {
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 3px;
  color: var(--dg-red);
}

.dg-ey {
  font-size: 10px;
  font-weight: 700;
  color: var(--dg-red);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}
.dg-ey--dark {
  font-size: 10px;
  font-weight: 700;
  color: var(--dg-text-cream-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dg-ey--gold { color: var(--dg-gold); }
.dg-ey--cream-muted { color: rgba(26, 26, 26, 0.35); }
.dg-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dg-gold); display: inline-block; flex-shrink: 0;
}

.dg-h1 {
  font-size: 68px;
  font-weight: 700;
  color: var(--color-foreground-heading);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  font-family: var(--dg-font-mono);
}
.dg-h2 {
  font-size: 44px;
  font-weight: 700;
  color: var(--color-foreground-heading);
  text-transform: uppercase;
  line-height: 0.97;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  font-family: var(--dg-font-mono);
}
/* Legacy alias kept for backwards-compat templates; .dg-h2 now follows scheme. */
.dg-h2--light { color: var(--color-foreground-heading); }

/* ============================ Buttons ============================ */
.dg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dg-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  letter-spacing: 0.02em;
  transition: background .15s, color .15s, opacity .15s;
}
.dg-btn--red { background: var(--dg-red); color: #fff; font-size: 14px; padding: 17px 34px; }
.dg-btn--red:hover { background: var(--dg-red-hover); color: #fff; }
.dg-btn--black { background: var(--dg-black); color: var(--dg-cream); font-size: 14px; padding: 17px 34px; }
.dg-btn--black:hover { background: #000; color: var(--dg-cream); }
.dg-btn--sm { font-size: 11px; padding: 13px 22px; }
.dg-btn--md { font-size: 12px; padding: 13px 30px; }
.dg-btn--ghost-light {
  background: none; color: var(--color-foreground); opacity: 0.7;
  text-decoration: underline; text-underline-offset: 5px;
  text-transform: uppercase; font-size: 12px;
  padding: 0; font-weight: 700;
}
.dg-btn--ghost-light:hover { color: var(--color-foreground); opacity: 1; }

/* ============================ Marquee / ticker ============================ */
.dg-tkw {
  background: var(--color-background, var(--dg-black));
  color: var(--color-foreground, var(--dg-cream));
  overflow: hidden;
  padding: var(--dg-mq-pad, 14px) 0;
  border-top: 1px solid rgba(245, 238, 216, 0.06);
}
.dg-tt {
  display: flex;
  white-space: nowrap;
  gap: var(--dg-mq-gap, 36px);
}
/* Only animate once JS has cloned enough copies to span 2x the viewport —
   avoids showing empty space at the end of the track on wide monitors. */
.dg-tt--ready {
  animation: dg-tick 24s linear infinite;
}
.dg-ti {
  font-size: 12px;
  font-weight: 700;
  color: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.dg-ts { color: var(--dg-gold); flex-shrink: 0; }
@keyframes dg-tick {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .dg-tt--ready { animation: none; }
}

/* ============================ Stats bar (dark) ============================ */
.dg-sc 
{ padding: 32px 28px; border-right: 1px solid rgba(245,238,216,0.07); text-align: center; }
}
.dg-sc:last-child { border-right: none; }
.dg-sn { font-size: 38px; font-weight: 700; color: var(--dg-gold); line-height: 1; margin-bottom: 10px; }
.dg-sl { font-size: 11px; color: rgba(245, 238, 216, 0.5); line-height: 1.7; text-transform: uppercase; letter-spacing: 0.04em; }

/* ============================ Media bar ============================ */
.dg-mbar {
  display: flex;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid rgba(245, 238, 216, 0.07);
  flex-wrap: wrap;
}
.dg-mlbl {
  font-size: 9px; font-weight: 700; color: rgba(245, 238, 216, 0.3);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-right: 28px; white-space: nowrap;
}
.dg-mdiv { width: 1px; background: rgba(245, 238, 216, 0.12); height: 24px; margin: 0 24px; }
.dg-mi { font-size: 12px; font-weight: 700; color: rgba(245, 238, 216, 0.5); text-transform: uppercase; }
.dg-mhi { color: var(--dg-cream); }
.dg-mi--link { text-decoration: none; color: inherit; cursor: pointer; transition: opacity .15s; }
.dg-mi--link:hover { opacity: 0.7; }

/* ============================ Oven callout ============================ */
.dg-ocall {
  display: flex; gap: 36px; align-items: center;
  padding: 52px 0;
  border-top: 1px solid rgba(245, 238, 216, 0.07);
}
.dg-oic {
  flex-shrink: 0; width: 72px; height: 72px; border-radius: 10px;
  background: rgba(245, 200, 66, 0.1);
  display: flex; align-items: center; justify-content: center;
}
.dg-ot { font-size: 22px; font-weight: 700; color: var(--color-foreground-heading); text-transform: uppercase; line-height: 1.2; margin-bottom: 10px; }
.dg-ob { font-size: 12px; color: var(--color-foreground); opacity: 0.55; text-transform: uppercase; line-height: 1.9; }

/* ============================ Step cards ============================ */
.dg-stc { background: var(--dg-black); border-radius: 10px; padding: 36px 28px; color: var(--dg-cream); }
.dg-stn { font-size: 52px; font-weight: 700; color: var(--dg-gold); line-height: 1; margin-bottom: 18px; }
.dg-stt { font-size: 14px; font-weight: 700; color: var(--dg-cream); text-transform: uppercase; margin-bottom: 10px; line-height: 1.35; }
.dg-stb { font-size: 12px; color: rgba(245, 238, 216, 0.5); line-height: 1.9; text-transform: uppercase; }

/* ============================ Bundle cards ============================ */
.dg-bc2 {
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  border: 1px solid rgba(26, 26, 26, 0.08);
  display: flex; flex-direction: column;
}
.dg-bc2.dg-bf { border: 2px solid var(--dg-red); }
.dg-btag { font-size: 9px; font-weight: 700; padding: 4px 11px; border-radius: 2px; text-transform: uppercase; display: inline-block; margin-bottom: 14px; }
.dg-bt-s { background: rgba(26, 26, 26, 0.08); color: rgba(26, 26, 26, 0.5); }
.dg-bt-b { background: var(--dg-red); color: #fff; }
.dg-bt-o { background: var(--dg-gold); color: var(--dg-black); }
.dg-bn { font-size: 15px; font-weight: 700; color: var(--dg-black); text-transform: uppercase; margin-bottom: 14px; }
.dg-bi { font-size: 11px; color: var(--dg-text-dark-muted); text-transform: uppercase; display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.dg-bdt { width: 4px; height: 4px; border-radius: 50%; background: var(--dg-black); flex-shrink: 0; display: inline-block; }
.dg-bpr { display: flex; align-items: baseline; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(26, 26, 26, 0.07); margin-top: auto; }
.dg-bpv { font-size: 22px; font-weight: 700; color: var(--dg-black); }
.dg-bws { font-size: 12px; color: rgba(26, 26, 26, 0.35); text-decoration: line-through; }
.dg-bsv { font-size: 11px; font-weight: 700; color: var(--dg-red); }
.dg-bct {
  background: var(--dg-black); color: var(--dg-cream);
  font-family: inherit; font-size: 11px; font-weight: 700;
  padding: 13px; border-radius: 3px; text-transform: uppercase;
  border: none; cursor: pointer; text-align: center;
  margin-top: 14px; display: block; text-decoration: none;
}
.dg-bct.dg-r { background: var(--dg-red); color: #fff; }
.dg-bct:hover { opacity: 0.92; color: var(--dg-cream); }
.dg-bct.dg-r:hover { color: #fff; }
/* Form wrapper used when "CTA adds to cart" is enabled on a bundle. */
.dg-bct-form { display: block; margin-top: 14px; }
.dg-bct-form form { margin: 0; }
.dg-bct-form .dg-bct { margin-top: 0; width: 100%; }

/* ============================ Guarantee strip ============================ */
.dg-gw { display: flex; gap: 40px; align-items: center; padding: 64px 0; }
.dg-gi {
  flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%;
  background: rgba(26, 26, 26, 0.06);
  border: 2px solid rgba(26, 26, 26, 0.12);
  display: flex; align-items: center; justify-content: center;
}
.dg-gt { font-size: 24px; font-weight: 700; color: var(--dg-black); text-transform: uppercase; line-height: 1.15; margin: 0 0 12px; }
.dg-gb { font-size: 12px; color: var(--dg-text-dark-muted); text-transform: uppercase; line-height: 1.9; max-width: 600px; margin: 0; }
.dg-gpls { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.dg-gpl { font-size: 9px; font-weight: 700; padding: 5px 12px; border-radius: 2px; background: var(--dg-black); color: var(--dg-cream); text-transform: uppercase; }

/* ============================ Portnoy testimonial ============================ */
.dg-pw { padding: 80px 0; }
.dg-pt { display: flex; align-items: flex-start; gap: 52px; margin-bottom: 36px; }
.dg-ps { flex-shrink: 0; text-align: center; border-right: 1px solid var(--color-border, rgba(245, 238, 216, 0.1)); padding-right: 52px; }
.dg-pbig { font-size: 96px; font-weight: 700; color: var(--dg-gold); line-height: 1; }
.dg-plbl { font-size: 9px; color: var(--color-foreground); opacity: 0.35; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 6px; }
.dg-pq { font-size: 24px; font-weight: 700; color: var(--color-foreground-heading); line-height: 1.35; text-transform: uppercase; }
.dg-pat { font-size: 10px; color: var(--color-foreground); opacity: 0.35; text-transform: uppercase; margin-top: 12px; letter-spacing: 0.06em; }
.dg-pst {
  font-size: 13px; color: rgba(245, 238, 216, 0.5);
  line-height: 1.9; text-transform: uppercase;
  border-top: 1px solid rgba(245, 238, 216, 0.08);
  padding-top: 28px;
}

/* ============================ Review cards (light) ============================ */
.dg-rc { background: #fff; border-radius: 10px; padding: 32px; border: 1px solid rgba(26, 26, 26, 0.07); }
.dg-rs { color: var(--dg-gold); font-size: 14px; margin-bottom: 12px; letter-spacing: 2px; }
.dg-rt { font-size: 12px; color: #3a2a1a; line-height: 1.85; text-transform: uppercase; margin-bottom: 14px; }
.dg-rn { font-size: 10px; color: rgba(26, 26, 26, 0.35); text-transform: uppercase; }

/* ============================ Video cards ============================ */
.dg-vc {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(26, 26, 26, 0.07);
  cursor: pointer;
  transition: border-color .15s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.dg-vc:hover { border-color: rgba(26, 26, 26, 0.2); color: inherit; }
.dg-vt { height: 170px; display: flex; align-items: center; justify-content: center; position: relative; background: #2a1212; background-size: cover; background-position: center; overflow: hidden; }
/* Aspect-ratio modifiers — switch from fixed height to an intrinsic ratio so
   portrait-oriented videos (Shorts, Reels) display properly without crop. */
.dg-vt--ar-portrait { height: auto; aspect-ratio: 9 / 16; }
.dg-vt--ar-square { height: auto; aspect-ratio: 1 / 1; }
.dg-vt--ar-landscape { height: auto; aspect-ratio: 16 / 9; }
.dg-vt1 { background-color: #2a1212; }
.dg-vt2 { background-color: #12202a; }
.dg-vt3 { background-color: #1a1a12; }
.dg-vt4 { background-color: #2a1a0a; }
.dg-vt5 { background-color: #12172a; }
.dg-vt6 { background-color: #1a2a12; }
.dg-vpl {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex; align-items: center; justify-content: center;
}
.dg-vtg { position: absolute; top: 12px; left: 12px; font-size: 9px; font-weight: 700; padding: 4px 10px; border-radius: 2px; text-transform: uppercase; }
.dg-vt-r { background: var(--dg-red); color: #fff; }
.dg-vt-g { background: var(--dg-gold); color: var(--dg-black); }
.dg-vdr { position: absolute; bottom: 10px; right: 10px; font-size: 9px; font-weight: 700; background: rgba(0, 0, 0, 0.75); color: #fff; padding: 3px 7px; border-radius: 2px; }
.dg-vm { padding: 18px 20px 22px; }
.dg-vsr { font-size: 9px; font-weight: 700; color: rgba(26, 26, 26, 0.35); text-transform: uppercase; margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.dg-vsd { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.dg-vsd-yt { background: #FF0000; }
.dg-vsd-tk { background: #000; }
.dg-vsd-ig { background: #C13584; }
.dg-vti { font-size: 13px; font-weight: 700; color: var(--dg-black); text-transform: uppercase; line-height: 1.35; margin-bottom: 5px; }
.dg-veq { font-size: 9px; color: var(--dg-red); text-transform: uppercase; font-weight: 700; }

/* Inline player for uploaded videos and YouTube/Vimeo iframes. */
.dg-vc__player,
.dg-fvid video,
.dg-vc video,
.dg-vc iframe.dg-vc__player,
.dg-fvid iframe.dg-vc__player {
  width: 100%;
  height: 100%;
  object-fit: cover; /* portrait <video> crops to fill; ignored by <iframe> — see iframe cover hack below */
  display: block;
  border: 0;
}

/* ----- Iframe cover hack -----
   `object-fit` doesn't apply to <iframe>, so a portrait Short embedded in a
   landscape card normally letterboxes inside the YouTube player. To get true
   "cover" cropping for iframes, we size the iframe to MATCH the source video's
   aspect, big enough to overhang the card, and let `overflow: hidden` on the
   wrapper crop the excess. The snippet sets data-source-aspect on the iframe
   ("portrait" for Shorts URLs, "landscape" otherwise). */
.dg-vt, .dg-ftmb { position: relative; }
/* Portrait source in landscape OR square card → full-width iframe, 9:16, vertically center-cropped */
.dg-vt--ar-landscape.dg-vt--fit-cover iframe[data-source-aspect="portrait"],
.dg-vt--ar-square.dg-vt--fit-cover iframe[data-source-aspect="portrait"],
.dg-ftmb--ar-landscape.dg-ftmb--fit-cover iframe[data-source-aspect="portrait"],
.dg-ftmb--ar-square.dg-ftmb--fit-cover iframe[data-source-aspect="portrait"] {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  transform: translateY(-50%);
}
/* Landscape source in portrait card → full-height iframe, 16:9, horizontally center-cropped */
.dg-vt--ar-portrait.dg-vt--fit-cover iframe[data-source-aspect="landscape"],
.dg-ftmb--ar-portrait.dg-ftmb--fit-cover iframe[data-source-aspect="landscape"] {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  aspect-ratio: 16 / 9;
  transform: translateX(-50%);
}

/* When the user wants the WHOLE video visible (no crop), they can opt into "contain". */
.dg-vt--fit-contain .dg-vc__player,
.dg-vt--fit-contain video,
.dg-vt--fit-contain iframe { object-fit: contain; background: #000; }
.dg-ftmb--video { padding: 0; position: relative; }
.dg-ftmb--video .dg-vc__player,
.dg-ftmb--video > iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ============================ Email signup (red) ============================ */
.dg-ew { padding: 80px 0; text-align: center; }
.dg-eh { font-size: 42px; font-weight: 700; color: var(--color-foreground-heading); text-transform: uppercase; line-height: 1.0; margin: 0 0 14px; font-family: var(--dg-font-mono); }
.dg-es { font-size: 12px; color: var(--color-foreground); opacity: 0.6; text-transform: uppercase; margin-bottom: 32px; line-height: 1.8; }
.dg-er { display: flex; max-width: 480px; margin: 0 auto; }
.dg-ei {
  flex: 1; background: rgba(255, 255, 255, 0.15); border: none;
  border-radius: 3px 0 0 3px; padding: 16px 22px;
  font-family: inherit; font-size: 13px; color: #fff;
  text-transform: uppercase; outline: none;
}
.dg-ei::placeholder { color: rgba(255, 255, 255, 0.4); }
.dg-eb {
  background: var(--dg-black); color: var(--dg-cream);
  font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 16px 24px; border-radius: 0 3px 3px 0;
  border: none; cursor: pointer; text-transform: uppercase;
}

/* ============================ Add-to-cart bar (static, flows with the page) ============================ */
.dg-sbw { background: var(--dg-black); width: 100%; border-top: 1px solid rgba(245, 238, 216, 0.08); }
.dg-sbi { max-width: var(--dg-page-width); margin: 0 auto; padding: 16px var(--dg-page-padding); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dg-sbl { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.dg-sbn { font-size: 13px; font-weight: 700; color: var(--dg-cream); text-transform: uppercase; }
.dg-sbp { font-size: 15px; color: var(--dg-gold); font-weight: 700; }
.dg-sbst { font-size: 12px; color: rgba(245, 238, 216, 0.4); }
.dg-sbnote { font-size: 10px; color: rgba(245, 238, 216, 0.3); text-transform: uppercase; }
.dg-sbbtn {
  background: var(--dg-red); color: #fff; font-family: inherit;
  font-size: 12px; font-weight: 700; padding: 13px 30px;
  border-radius: 3px; text-transform: uppercase;
  border: none; cursor: pointer; white-space: nowrap;
  text-decoration: none; display: inline-block;
}
.dg-sbbtn:hover { background: var(--dg-red-hover); color: #fff; }

/* ============================ CTA red block ============================ */
.dg-ctaw { padding: 80px 0; }
.dg-ctal { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.dg-ctae { font-size: 10px; font-weight: 700; color: var(--color-foreground); opacity: 0.55; text-transform: uppercase; margin-bottom: 12px; }
.dg-ctah { font-size: 36px; font-weight: 700; color: var(--color-foreground-heading); text-transform: uppercase; line-height: 1.0; margin: 0; font-family: var(--dg-font-mono); }
.dg-ctar { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.dg-ctab {
  background: var(--dg-black); color: var(--dg-cream);
  font-family: inherit; font-size: 14px; font-weight: 700;
  padding: 18px 36px; border-radius: 3px; text-transform: uppercase;
  border: none; cursor: pointer; white-space: nowrap;
  text-decoration: none; display: inline-block;
}
.dg-ctas { font-size: 10px; color: var(--color-foreground); opacity: 0.45; text-transform: uppercase; }

/* ============================ Generic placeholder image box ============================ */
.dg-imgbox {
  background: rgba(26, 26, 26, 0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(26, 26, 26, 0.12);
  overflow: hidden;
  position: relative;
}
.dg-imgbox img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-imgbox--dark { background: rgba(245, 238, 216, 0.06); border-color: rgba(245, 238, 216, 0.15); }
.dg-imgbox__ph {
  font-family: var(--dg-font-sans);
  font-size: 11px;
  color: rgba(26, 26, 26, 0.25);
}
.dg-imgbox--dark .dg-imgbox__ph { color: rgba(245, 238, 216, 0.2); }

/* ============================ Responsive ============================ */
@media (max-width: 980px) {
  :root { --dg-page-padding: 20px; }
  /* On phones, restore the horizontal gutter that section-band classes'
     `padding: …px 0` shorthand zeroes out. Selectors are qualified with
     `.dg-inn` to bump specificity above the unqualified `.dg-X` rules
     defined later in the file — otherwise source order would let the
     desktop shorthand win. Desktop intentionally goes edge-to-max-width,
     so this override is mobile-only. */
  .dg-inn.dg-sec,
  .dg-inn.dg-sec-sm,
  .dg-inn.dg-sec-md,
  .dg-inn.dg-calc__inputs,
  .dg-inn.dg-calc__output { padding-inline: var(--dg-page-padding); }
  .dg-h1 { font-size: 46px; }
  .dg-h2 { font-size: 32px; }
  .dg-g2,
  .dg-g3,
  .dg-g4 { grid-template-columns: 1fr; gap: 18px; }
  .dg-sc { border-right: none; border-bottom: 1px solid rgba(245,238,216,0.07); }
  .dg-sc:last-child { border-bottom: none; }
  .dg-pt { flex-direction: column; gap: 28px; }
  .dg-ps { border-right: none; border-bottom: 1px solid rgba(245,238,216,0.1); padding-right: 0; padding-bottom: 20px; }
  .dg-pbig { font-size: 64px; }
  .dg-ctal { flex-direction: column; align-items: flex-start; gap: 28px; }
  .dg-ctar { align-items: flex-start; }
  .dg-eh { font-size: 30px; }
  .dg-er { flex-direction: column; }
  .dg-ei, .dg-eb { border-radius: 3px; }
  .dg-sbi { flex-direction: column; align-items: flex-start; padding: 14px 24px; }
  .dg-sbl { gap: 12px; }
  .dg-mbar { gap: 12px; }
  .dg-mdiv { display: none; }
  .dg-gw { flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px 0; }
}

@media (max-width: 600px) {
  :root { --dg-page-padding: 20px; }
}

/* ============================ Horizon header overrides ============================ */
/* Header nav: dimmed cream baseline, brighten ONLY the hovered/active link.
   Horizon's default cascade brightens by default and dims siblings of the
   hovered item; we invert that so non-hovered links stay perfectly still. */
header-component .menu-list__link,
header-component .menu-list__link:visited,
header-component .menu-list:where(:has(.menu-list__list-item:hover)) .menu-list__link,
header-component .menu-list:where(:has(.menu-list__list-item:focus-within)) .menu-list__link,
header-component .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) .menu-list__link {
  color: rgba(245, 238, 216, 0.45);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: color .15s ease;
}
/* Only the hovered/focused/active link brightens. */
header-component .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
header-component .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
header-component .menu-list__link[aria-current] {
  color: var(--dg-cream);
}
header-component .header { min-height: 68px; }

/* Horizon dims sibling actions (account/cart/search/menu) inside the same
   header column when one is hovered. Disable that so the other icons stay
   at full opacity and only the hovered one shows feedback. */
@media (hover: hover) {
  header-component .header__column:has(.header-actions__action:hover) header-menu:not(:hover),
  header-component .header__column:has(.header-actions__action:hover) .header-actions__action:not(:hover),
  header-component .header__column:has(.header-actions__action:hover) .header__icon--menu:not(:hover),
  header-component .header__column:has(header-menu:hover) header-menu:not(:hover),
  header-component .header__column:has(header-menu:hover) .header-actions__action:not(:hover),
  header-component .header__column:has(header-menu:hover) .header__icon--menu:not(:hover),
  header-component .header__column:has(.header__icon--menu:hover) header-menu:not(:hover),
  header-component .header__column:has(.header__icon--menu:hover) .header-actions__action:not(:hover),
  header-component .header__column:has(.header__icon--menu:hover) .header__icon--menu:not(:hover) {
    opacity: 1;
  }
}

.announcement-bar a,
.announcement-bar button { color: inherit; }

/* ============================ Horizon footer overrides ============================ */
/* Horizon renders footer menus inside <summary class="menu__heading"> with items as
   <li class="menu__item ..."><a>...</a></li>. Target both shapes. */
footer .menu__heading {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(245, 238, 216, 0.35) !important;
  margin-bottom: 16px;
  font-family: var(--dg-font-mono);
}
footer .menu__item {
  font-size: 12px !important;
  letter-spacing: 0.04em;
  font-family: var(--dg-font-mono);
}
footer .menu__item a,
footer .menu__item button {
  color: rgba(245, 238, 216, 0.55);
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
}
footer .menu__item a:hover,
footer .menu__item button:hover { color: var(--dg-cream); }
footer .footer-content { align-items: start; }

/* ============================ PDP main ============================ */
.dg-pdpw { max-width: var(--dg-page-width); margin: 0 auto; padding: 28px var(--dg-page-padding) 40px; }
.dg-bcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.dg-bci { font-size: 11px; color: rgba(26,26,26,.35); text-transform: uppercase; cursor: pointer; text-decoration: none; }
.dg-bci:hover { color: var(--dg-black); }
.dg-bcs { font-size: 11px; color: rgba(26,26,26,.2); }
.dg-bcc { font-size: 11px; font-weight: 700; color: var(--dg-black); text-transform: uppercase; }
.dg-pdpl { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.dg-pdpg { background: var(--dg-black); border-radius: 12px; overflow: hidden; }
.dg-pdpm { height: 600px; display: flex; align-items: center; justify-content: center; background: #1a1a1a; position: relative; }
.dg-pdpm img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s ease; }
/* Loading feedback: dim the current image and overlay a brand-colored spinner
   while a new thumbnail's full-size image is decoding. */
.dg-pdpm--loading img { opacity: 0.45; }
.dg-pdpm--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(245, 238, 216, 0.25);
  border-top-color: var(--dg-gold);
  animation: dg-pdpm-spin .8s linear infinite;
  pointer-events: none;
}
@keyframes dg-pdpm-spin {
  to { transform: rotate(360deg); }
}
.dg-pdpb { position: absolute; top: 16px; left: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.dg-pdpbx { font-size: 9px; font-weight: 700; padding: 5px 12px; border-radius: 2px; text-transform: uppercase; display: inline-block; }
.dg-pdpbg { background: var(--dg-gold); color: var(--dg-black); }
.dg-pdpbr { background: var(--dg-red); color: #fff; }
/* Thumbnail strip: horizontal scroll when more than ~4 fit. */
.dg-pdpts {
  display: flex;
  gap: 6px;
  padding: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,238,216,0.25) transparent;
}
.dg-pdpts::-webkit-scrollbar { height: 6px; }
.dg-pdpts::-webkit-scrollbar-track { background: transparent; }
.dg-pdpts::-webkit-scrollbar-thumb { background: rgba(245,238,216,0.25); border-radius: 3px; }
.dg-pdpts::-webkit-scrollbar-thumb:hover { background: rgba(245,238,216,0.4); }
.dg-pdpt {
  flex: 0 0 90px;
  width: 90px;
  height: 72px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  background: transparent;
  font-family: var(--dg-font-sans);
  font-size: 10px;
  color: rgba(255,255,255,.2);
  transition: border-color .15s;
  overflow: hidden;
  padding: 0;
  scroll-snap-align: start;
}
.dg-pdpt:hover { border-color: rgba(255,255,255,0.25); }
.dg-pdpt.active { border-color: var(--dg-red); }
.dg-pdpt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-pt1 { background: #252020; }
.dg-pt2 { background: #1a1f25; }
.dg-pt3 { background: #252518; }
.dg-pt4 { background: #20151a; }
.dg-pdp-ph { font-size: 80px; margin-bottom: 10px; text-align: center; }
.dg-pdp-ph-lbl { font-family: var(--dg-font-sans); font-size: 11px; color: rgba(255,255,255,.2); text-align: center; }
.dg-bbox { padding: 8px 0 0; }
.dg-pe { font-size: 10px; font-weight: 700; color: var(--dg-red); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 10px; }
.dg-ptl { font-size: 34px; font-weight: 700; color: var(--dg-black); text-transform: uppercase; line-height: 1.0; margin: 0 0 14px; font-family: var(--dg-font-mono); }
.dg-prr { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.dg-pst-stars { color: var(--dg-gold); font-size: 30px; }
.dg-prc { font-size: 30px; color: rgba(26,26,26,.45); text-transform: uppercase; }
.dg-prc span { color: var(--dg-black); font-weight: 700; }
.dg-pprt { background: var(--dg-black); border-radius: 8px; padding: 16px 20px; margin-bottom: 22px; display: flex; align-items: center; gap: 18px; }
.dg-pps { font-size: 34px; font-weight: 700; color: var(--dg-gold); }
.dg-ppt { font-size: 11px; color: rgba(245,238,216,.55); text-transform: uppercase; line-height: 1.65; }
.dg-ppn { color: var(--dg-cream); font-weight: 700; display: block; margin-bottom: 3px; }
.dg-ppbig { font-size: 44px; font-weight: 700; color: var(--dg-black); margin-bottom: 7px; }
.dg-ppsh { font-size: 11px; color: rgba(26,26,26,.4); text-transform: uppercase; margin-bottom: 22px; }
.dg-ppsh span { color: var(--dg-black); font-weight: 700; }
.dg-slbl { font-size: 10px; font-weight: 700; color: rgba(26,26,26,.5); text-transform: uppercase; margin-bottom: 10px; }
.dg-sopts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 22px; }
.dg-sbtn { background: rgba(26,26,26,.05); border: 1.5px solid rgba(26,26,26,.12); border-radius: 3px; padding: 13px 8px; font-family: inherit; font-size: 11px; font-weight: 700; color: rgba(26,26,26,.5); text-transform: uppercase; cursor: pointer; text-align: center; transition: all .15s; }
.dg-sbtn.active { background: var(--dg-black); border-color: var(--dg-black); color: var(--dg-cream); }
.dg-ssub { font-size: 9px; font-weight: 400; color: rgba(26,26,26,.35); display: block; margin-top: 3px; }
.dg-sbtn.active .dg-ssub { color: rgba(245,238,216,.5); }
.dg-qrow { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.dg-qlbl { font-size: 11px; font-weight: 700; color: rgba(26,26,26,.5); text-transform: uppercase; }
.dg-qct { display: flex; align-items: center; border: 1.5px solid rgba(26,26,26,.15); border-radius: 3px; overflow: hidden; }
.dg-qb { background: none; border: none; width: 36px; height: 36px; font-family: inherit; font-size: 18px; font-weight: 700; color: var(--dg-black); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dg-qb:hover { background: rgba(26,26,26,.05); }
.dg-qn { font-size: 14px; font-weight: 700; color: var(--dg-black); width: 44px; text-align: center; border: none; border-left: 1.5px solid rgba(26,26,26,.1); border-right: 1.5px solid rgba(26,26,26,.1); height: 36px; padding: 0; font-family: inherit; background: transparent; -moz-appearance: textfield; }
.dg-qn::-webkit-outer-spin-button,
.dg-qn::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dg-pdp-form { display: block; }
.dg-pdp-form form { margin: 0; }
.dg-atc { display: block; width: 100%; box-sizing: border-box; background: var(--dg-red); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; padding: 18px; border-radius: 3px; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; transition: background .15s; text-align: center; text-decoration: none; }
.dg-atc:hover { background: var(--dg-red-hover); color: #fff; }
.dg-bin { display: block; width: 100%; box-sizing: border-box; background: var(--dg-black); color: var(--dg-cream); font-family: inherit; font-size: 15px; font-weight: 700; padding: 18px; border-radius: 3px; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 22px; text-align: center; text-decoration: none; }
.dg-bin:hover { background: #000; color: var(--dg-cream); }
.dg-trow { display: flex; border: 1px solid rgba(26,26,26,.1); border-radius: 6px; overflow: hidden; margin-bottom: 22px; }
.dg-ti2 { flex: 1; padding: 12px 8px; text-align: center; border-right: 1px solid rgba(26,26,26,.1); }
.dg-ti2:last-child { border-right: none; }
.dg-tic { font-size: 16px; margin-bottom: 4px; }
.dg-tit { font-size: 9px; font-weight: 700; color: rgba(26,26,26,.5); text-transform: uppercase; line-height: 1.5; }
.dg-pf-wrap { border-top: 1px solid rgba(26,26,26,.08); padding-top: 22px; }
.dg-pf { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.dg-pf:last-child { margin-bottom: 0; }
.dg-pfck { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--dg-black); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.dg-pft { font-size: 12px; font-weight: 700; color: var(--dg-black); text-transform: uppercase; }
.dg-pfs { font-size: 11px; color: rgba(26,26,26,.45); text-transform: uppercase; margin-top: 2px; line-height: 1.6; }

/* ============================ PDP Specs ============================ */
.dg-spw { padding: 60px 0; }
.dg-spe { font-size: 20px; font-weight: 1000; color: var(--dg-cream); text-transform: uppercase; margin-bottom: 20px; }
.dg-spwrap { display: flex; }
.dg-spg { flex: 1; }
.dg-spi { padding: 12px 0; border-bottom: 1px solid rgba(245,238,216,.07); display: flex; justify-content: space-between; gap: 16px; }
.dg-spi:last-child { border-bottom: none; }
.dg-spk { font-size: 11px; color: rgba(245,238,216,.4); text-transform: uppercase; }
.dg-spv { font-size: 12px; font-weight: 700; color: var(--dg-cream); text-transform: uppercase; text-align: right; }
.dg-spdiv { width: 1px; background: rgba(245,238,216,.08); margin: 0 52px; }

/* ============================ PDP Why Steel ============================ */
.dg-wy { background: rgba(245,238,216,.05); border-radius: 10px; padding: 36px 28px; border: 1px solid rgba(245,238,216,.06); }
.dg-wyn { font-size: 44px; font-weight: 700; color: var(--dg-gold); line-height: 1; margin-bottom: 10px; }
.dg-wyt { font-size: 13px; font-weight: 700; color: var(--dg-cream); text-transform: uppercase; margin-bottom: 10px; line-height: 1.4; }
.dg-wyb { font-size: 12px; color: rgba(245,238,216,.45); text-transform: uppercase; line-height: 1.9; }

/* ============================ PDP Reviews summary ============================ */
.dg-rvhdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.dg-rvhl { font-size: 10px; font-weight: 700; color: rgba(26,26,26,.35); text-transform: uppercase; }
.dg-rvhw { font-size: 11px; font-weight: 700; color: var(--dg-red); text-transform: uppercase; cursor: pointer; background: none; border: none; font-family: inherit; padding: 0; text-decoration: none; }
.dg-rvtop { display: flex; gap: 48px; align-items: center; margin-bottom: 32px; }
.dg-rvb { font-size: 64px; font-weight: 700; color: var(--dg-black); line-height: 1; }
.dg-rvs { color: var(--dg-gold); font-size: 22px; margin-top: 6px; }
.dg-rvc { font-size: 12px; color: rgba(26,26,26,.4); text-transform: uppercase; margin-top: 7px; }
.dg-rvbars { flex: 1; }
.dg-rbr { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.dg-rbl { font-size: 10px; font-weight: 700; color: rgba(26,26,26,.4); text-transform: uppercase; width: 30px; flex-shrink: 0; }
.dg-rbt { flex: 1; height: 6px; background: rgba(26,26,26,.08); border-radius: 3px; overflow: hidden; }
.dg-rbf { height: 100%; background: var(--dg-gold); border-radius: 3px; }
.dg-rbp { font-size: 10px; color: rgba(26,26,26,.35); width: 32px; text-align: right; }
.dg-rcx { background: #fff; border-radius: 10px; padding: 28px; border: 1px solid rgba(26,26,26,.07); }
.dg-rcxs { color: var(--dg-gold); font-size: 13px; margin-bottom: 8px; }
.dg-rcxt { font-size: 12px; font-weight: 700; color: var(--dg-black); text-transform: uppercase; margin-bottom: 7px; }
.dg-rcxb { font-size: 11px; color: rgba(26,26,26,.55); text-transform: uppercase; line-height: 1.8; margin-bottom: 12px; }
.dg-rcxn { font-size: 10px; color: rgba(26,26,26,.3); text-transform: uppercase; }
.dg-rcxv { font-size: 9px; font-weight: 700; color: #4CAF50; text-transform: uppercase; margin-top: 3px; }

/* ============================ PDP FAQ ============================ */
.dg-fqlbl { font-size: 10px; font-weight: 700; color: rgba(26,26,26,.35); text-transform: uppercase; margin-bottom: 22px; }
.dg-fq { border-bottom: 1px solid rgba(26,26,26,.1); }
.dg-fq > summary { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; cursor: pointer; list-style: none; }
.dg-fq > summary::-webkit-details-marker { display: none; }
.dg-fqt { font-size: 13px; font-weight: 700; color: var(--dg-black); text-transform: uppercase; }
.dg-fqa2 { font-size: 16px; color: var(--dg-red); transition: transform .2s; flex-shrink: 0; }
.dg-fq[open] .dg-fqa2 { transform: rotate(180deg); }
.dg-fqan { font-size: 12px; color: rgba(26,26,26,.55); text-transform: uppercase; line-height: 1.9; padding-bottom: 20px; }

/* ============================ Frequently bought ============================ */
.dg-fblbl { font-size: 10px; font-weight: 700; color: rgba(26,26,26,.35); text-transform: uppercase; margin-bottom: 22px; }
.dg-alc { background: #fff; border-radius: 12px; padding: 22px; border: 1px solid rgba(26,26,26,.07); display: flex; flex-direction: column; }
.dg-ali { height: 110px; background: var(--dg-black); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 34px; margin-bottom: 14px; overflow: hidden; color: var(--dg-cream); }
.dg-ali img { width: 100%; height: 100%; object-fit: cover; }
.dg-aln { font-size: 13px; font-weight: 700; color: var(--dg-black); text-transform: uppercase; margin-bottom: 5px; }
.dg-als { font-size: 10px; color: rgba(26,26,26,.4); text-transform: uppercase; line-height: 1.6; margin-bottom: 12px; }
.dg-alp { font-size: 18px; font-weight: 700; color: var(--dg-black); margin-top: auto; margin-bottom: 10px; }
.dg-alb { width: 100%; box-sizing: border-box; background: var(--dg-black); color: var(--dg-cream); font-family: inherit; font-size: 10px; font-weight: 700; padding: 10px; border-radius: 3px; border: none; cursor: pointer; text-transform: uppercase; text-align: center; display: block; text-decoration: none; }
.dg-alb:hover { background: #000; color: var(--dg-cream); }
.dg-alb-form { display: block; }
.dg-alb-form form { margin: 0; }

@media (max-width: 980px) {
  .dg-pdpl { grid-template-columns: 1fr; gap: 28px; }
  .dg-spwrap { flex-direction: column; }
  .dg-spdiv { display: none; }
  /* When the two columns stack, the first column's last row is no longer the
     visual end of the table — restore its divider so there's no gap before the
     second column begins. */
  .dg-spg:not(:last-child) .dg-spi:last-child { border-bottom: 1px solid rgba(245,238,216,.07); }
  .dg-rvtop { flex-direction: column; align-items: flex-start; gap: 24px; }
  .dg-tt--ready {
  animation-duration: 12s;
}
}

/* ============================ Calculator ============================ */
/* Band wrappers — vertical breathing room */
.dg-calc__inputs { padding: 56px 0; }
.dg-calc__output { padding: 56px 0; }
/* "Your pizza settings" label */
.dg-calc__settings-lbl {
  font-size: 22px;
  font-weight: 700;
  color: var(--dg-cream);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 28px;
}

/* Inputs (dark band) */
.dg-cins { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
.dg-ilbl { font-size: 12px; font-weight: 700; color: var(--dg-cream); text-transform: uppercase; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.dg-ival { color: var(--dg-gold); font-size: 17px; }
.dg-calc input[type=range] { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: rgba(245,238,216,.15); border-radius: 2px; outline: none; cursor: pointer; }
.dg-calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--dg-red); border: 3px solid var(--dg-cream); cursor: pointer; }
.dg-calc input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--dg-red); border: 3px solid var(--dg-cream); cursor: pointer; }
.dg-rls { display: flex; justify-content: space-between; margin-top: 8px; }
.dg-rl { font-size: 9px; color: rgba(245,238,216,.25); text-transform: uppercase; }
.dg-trow2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.dg-tbtn { background: rgba(245,238,216,.07); border: 1.5px solid rgba(245,238,216,.1); border-radius: 3px; padding: 12px 4px; font-family: inherit; font-size: 11px; font-weight: 700; color: rgba(245,238,216,.4); text-transform: uppercase; cursor: pointer; text-align: center; transition: all .15s; }
.dg-tbtn.active { background: var(--dg-red); border-color: var(--dg-red); color: #fff; }
.dg-gfrow { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: rgba(245,238,216,.06); border-radius: 8px; border: 1.5px solid rgba(245,238,216,.1); margin-top: 20px; }
.dg-gfl { font-size: 12px; font-weight: 700; color: var(--dg-cream); text-transform: uppercase; }
.dg-gfs { font-size: 10px; color: rgba(245,238,216,.35); text-transform: uppercase; margin-top: 3px; }
.dg-twrap { position: relative; width: 48px; height: 26px; flex-shrink: 0; }
.dg-twrap input { opacity: 0; width: 0; height: 0; position: absolute; }
.dg-ttrack { position: absolute; inset: 0; background: rgba(245,238,216,.15); border-radius: 24px; cursor: pointer; border: 1.5px solid rgba(245,238,216,.2); }
.dg-ttrack::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 50%; transform: translateY(-50%); background: rgba(245,238,216,.5); border-radius: 50%; transition: transform .2s; }
.dg-twrap input:checked + .dg-ttrack { background: #4CAF50; border-color: #4CAF50; }
.dg-twrap input:checked + .dg-ttrack::before { transform: translateY(-50%) translateX(22px); background: #fff; }
.dg-ctip { background: rgba(245,200,66,.1); border: 1.5px solid rgba(245,200,66,.25); border-radius: 8px; padding: 16px 22px; margin-top: 22px; display: none; }
.dg-ctip.show { display: block; }
.dg-clbl { font-size: 9px; font-weight: 700; color: var(--dg-gold); text-transform: uppercase; margin-bottom: 6px; }
.dg-ctxt { font-size: 11px; color: rgba(245,238,216,.6); text-transform: uppercase; line-height: 1.8; }

/* Output (white band) */
.dg-rgrid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; border-bottom: 1px solid rgba(26,26,26,.08); }
.dg-rcel { padding: 28px 32px; border-right: 1px solid rgba(26,26,26,.08); }
.dg-rcel:last-child { border-right: none; }
.dg-rlb { font-size: 10px; font-weight: 700; color: rgba(26,26,26,.35); text-transform: uppercase; margin-bottom: 12px; }
.dg-rnum { font-size: 36px; font-weight: 700; color: var(--dg-black); line-height: 1; }
.dg-rnum.acc { color: var(--dg-red); }
.dg-runt { font-size: 11px; color: rgba(26,26,26,.4); text-transform: uppercase; margin-top: 6px; }
.dg-itbl { width: 100%; border-collapse: collapse; }
.dg-itbl thead tr { border-bottom: 2px solid var(--dg-black); }
.dg-itbl th { font-size: 10px; font-weight: 700; color: rgba(26,26,26,.4); text-transform: uppercase; padding: 12px 0; text-align: left; }
.dg-itbl th:last-child { text-align: right; }
.dg-itbl td { font-size: 13px; font-weight: 700; color: var(--dg-black); text-transform: uppercase; padding: 14px 0; border-bottom: 1px solid rgba(26,26,26,.07); }
.dg-itbl td:last-child { text-align: right; color: var(--dg-red); }
.dg-itbl tr:last-child td { border-bottom: none; }
.dg-isub { font-size: 9px; color: rgba(26,26,26,.35); font-weight: 400; display: block; margin-top: 2px; text-transform: uppercase; }
.dg-iu { margin-left: 4px; opacity: 0.75; font-weight: 600; }
.dg-spls { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.dg-spl { font-size: 9px; font-weight: 700; padding: 5px 12px; border-radius: 2px; background: rgba(26,26,26,.07); color: rgba(26,26,26,.45); text-transform: uppercase; }
.dg-spl.hl { background: var(--dg-black); color: var(--dg-cream); }
.dg-svr { display: flex; gap: 10px; margin-top: 18px; }
.dg-svb { background: rgba(26,26,26,.07); border: none; border-radius: 3px; padding: 11px 18px; font-family: inherit; font-size: 11px; font-weight: 700; color: rgba(26,26,26,.5); text-transform: uppercase; cursor: pointer; }
.dg-svb:hover { background: rgba(26,26,26,.12); }

/* Cross-sell (red) */
.dg-scall { display: flex; align-items: center; gap: 22px; padding: 32px 0; }
.dg-scoi { flex-shrink: 0; width: 52px; height: 52px; background: rgba(0,0,0,.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.dg-sct { flex: 1; min-width: 0; }
.dg-scn { font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase; }
.dg-scs { font-size: 10px; color: rgba(255,255,255,.55); text-transform: uppercase; margin-top: 3px; }
.dg-scright { text-align: right; flex-shrink: 0; }
.dg-scp { font-size: 22px; font-weight: 700; color: var(--dg-gold); }
.dg-sca { background: var(--dg-black); color: var(--dg-cream); font-family: inherit; font-size: 11px; font-weight: 700; padding: 12px 20px; border-radius: 3px; border: none; cursor: pointer; text-transform: uppercase; white-space: nowrap; text-decoration: none; display: inline-block; margin-top: 7px; }
.dg-sca:hover { background: #000; color: var(--dg-cream); }

/* Also-need (cream) */
.dg-ynlbl { font-size: 10px; font-weight: 700; color: rgba(26,26,26,.35); text-transform: uppercase; margin-bottom: 22px; }
.dg-yngrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dg-ync { background: #fff; border-radius: 10px; padding: 22px; border: 1px solid rgba(26,26,26,.08); display: flex; flex-direction: column; }
.dg-ync.dg-ynf { border: 2px solid var(--dg-black); }
.dg-yni2 { width: 38px; height: 38px; border-radius: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.dg-ynb { font-size: 9px; font-weight: 700; padding: 3px 9px; border-radius: 2px; text-transform: uppercase; display: inline-block; margin-bottom: 7px; }
.dg-ynb-r { background: var(--dg-red); color: #fff; }
.dg-ynb-g { background: var(--dg-gold); color: var(--dg-black); }
.dg-ynn { font-size: 13px; font-weight: 700; color: var(--dg-black); text-transform: uppercase; margin-bottom: 5px; }
.dg-yns { font-size: 10px; color: rgba(26,26,26,.4); text-transform: uppercase; line-height: 1.65; margin-bottom: 12px; }
.dg-ynp { font-size: 17px; font-weight: 700; color: var(--dg-black); margin-top: auto; margin-bottom: 10px; }
.dg-ynbtn { background: var(--dg-black); color: var(--dg-cream); font-family: inherit; font-size: 10px; font-weight: 700; padding: 11px; border-radius: 3px; border: none; cursor: pointer; text-transform: uppercase; text-align: center; display: block; width: 100%; }
.dg-ynbtn.r { background: var(--dg-red); color: #fff; }
.dg-ynbtn:hover { opacity: 0.92; }

/* Instructions accordion (dark) */
.dg-iswrap { padding: 52px 0; }
.dg-istog { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.dg-istit { font-size: 14px; font-weight: 700; color: var(--dg-cream); text-transform: uppercase; }
.dg-isarr { font-size: 18px; color: var(--dg-gold); transition: transform .2s; }
.dg-isarr.open { transform: rotate(180deg); }
.dg-isbody { display: none; margin-top: 28px; }
.dg-isbody.open { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; }
.dg-si2 { display: flex; gap: 14px; align-items: flex-start; }
.dg-sib { flex-shrink: 0; width: 22px; height: 22px; border-radius: 2px; background: var(--dg-gold); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--dg-black); }
.dg-sit { font-size: 11px; color: rgba(245,238,216,.55); text-transform: uppercase; line-height: 1.8; padding-top: 2px; }

@media (max-width: 980px) {
  .dg-cins { grid-template-columns: 1fr; gap: 28px; }
  /* padding-block (not shorthand) so we don't re-clobber the padding-inline
     restoration set in the global mobile MQ above. */
  .dg-calc__inputs, .dg-calc__output { padding-block: 40px; }
  .dg-calc__settings-lbl { font-size: 18px; margin-bottom: 20px; }
  .dg-rgrid { grid-template-columns: 1fr 1fr; }
  .dg-rcel { padding: 22px 18px; }
  .dg-rcel:nth-child(2n) { border-right: none; }
  .dg-rcel:nth-child(-n+2) { border-bottom: 1px solid rgba(26,26,26,.08); }
  .dg-scall { flex-wrap: wrap; }
  .dg-scright { text-align: left; }
  .dg-yngrid { grid-template-columns: 1fr; gap: 14px; }
  .dg-isbody.open { grid-template-columns: 1fr; }
}

/* ============================ Learn — featured ============================ */
.dg-gfeat { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.dg-fvid { background: var(--dg-black); border-radius: 12px; overflow: hidden; }
.dg-ftmb {
  background: #2a1a1a; height: 320px;
  display: flex; align-items: center; justify-content: center;
  position: relative; cursor: pointer;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.dg-ftmb--ar-portrait { height: auto; aspect-ratio: 9 / 16; max-height: 720px; margin: 0 auto; max-width: 480px; }
.dg-ftmb--ar-square { height: auto; aspect-ratio: 1 / 1; }
.dg-ftmb--ar-landscape { height: auto; aspect-ratio: 16 / 9; }
.dg-ftmb--fit-contain .dg-vc__player,
.dg-ftmb--fit-contain video,
.dg-ftmb--fit-contain iframe { object-fit: contain; background: #000; }
.dg-fpl {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--dg-red);
  display: flex; align-items: center; justify-content: center;
}
.dg-ftg2 {
  position: absolute; top: 18px; left: 18px;
  font-size: 9px; font-weight: 700;
  background: var(--dg-gold); color: var(--dg-black);
  padding: 5px 12px; border-radius: 2px; text-transform: uppercase;
}
.dg-fdr {
  position: absolute; bottom: 16px; right: 16px;
  font-size: 10px; font-weight: 700;
  background: rgba(0, 0, 0, 0.7); color: #fff;
  padding: 3px 8px; border-radius: 2px;
}
.dg-fmet { padding: 24px 28px 32px; }
.dg-fey {
  font-size: 10px; font-weight: 700; color: var(--dg-gold);
  text-transform: uppercase; margin-bottom: 8px;
}
.dg-ftit {
  font-size: 22px; font-weight: 700; color: var(--dg-cream);
  text-transform: uppercase; line-height: 1.15; margin-bottom: 12px;
}
.dg-fdes {
  font-size: 12px; color: rgba(245, 238, 216, 0.5);
  text-transform: uppercase; line-height: 1.8; margin-bottom: 20px;
}
.dg-fwt {
  background: var(--dg-red); color: #fff;
  font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 13px 24px; border-radius: 3px; border: none;
  cursor: pointer; text-transform: uppercase;
  text-decoration: none; display: inline-block;
}
.dg-eqsb {
  background: #fff; border-radius: 12px;
  border: 1px solid rgba(26, 26, 26, 0.08); overflow: hidden;
}
.dg-eqhd { background: var(--dg-black); padding: 18px 22px; }
.dg-eqht {
  font-size: 11px; font-weight: 700; color: var(--dg-cream);
  text-transform: uppercase;
}
.dg-eqhs {
  font-size: 10px; color: rgba(245, 238, 216, 0.4);
  text-transform: uppercase; margin-top: 4px;
}
.dg-eqit {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
  cursor: pointer; transition: background .1s;
}
.dg-eqit:hover { background: rgba(26, 26, 26, 0.03); }
.dg-eqit.dg-eqf {
  background: rgba(224, 58, 47, 0.04);
  border-left: 3px solid var(--dg-red);
}
.dg-eqim {
  width: 44px; height: 44px; border-radius: 8px;
  background: var(--dg-cream);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 20px;
  overflow: hidden;
}
.dg-eqim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-eqin { flex: 1; min-width: 0; }
.dg-eqn {
  font-size: 12px; font-weight: 700; color: var(--dg-black);
  text-transform: uppercase;
}
.dg-eqbg {
  font-size: 9px; font-weight: 700; color: var(--dg-red);
  text-transform: uppercase; margin-top: 2px;
}
.dg-eqcol { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.dg-eqp {
  font-size: 13px; font-weight: 700; color: var(--dg-black);
  flex-shrink: 0;
}
.dg-eqad {
  background: var(--dg-black); color: var(--dg-cream);
  font-family: inherit; font-size: 9px; font-weight: 700;
  padding: 6px 11px; border-radius: 2px; border: none;
  cursor: pointer; text-transform: uppercase; flex-shrink: 0;
  text-decoration: none; display: inline-block;
}
.dg-eqad-form { display: block; }
.dg-eqad-form form { margin: 0; }
.dg-eqft {
  padding: 12px 20px;
  border-top: 1px solid rgba(26, 26, 26, 0.08);
  background: rgba(26, 26, 26, 0.02);
  font-size: 10px; color: rgba(26, 26, 26, 0.4);
  text-transform: uppercase;
}

/* ============================ Learn — filter + categories ============================ */
.dg-frow {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-top: 52px;
}
.dg-flbl {
  font-size: 10px; font-weight: 700;
  color: rgba(26, 26, 26, 0.35);
  text-transform: uppercase; margin-right: 6px;
}
.dg-fbtn {
  font-family: inherit; font-size: 11px; font-weight: 700;
  padding: 9px 18px; border-radius: 3px;
  border: 1.5px solid rgba(26, 26, 26, 0.15);
  background: transparent; color: rgba(26, 26, 26, 0.5);
  text-transform: uppercase; cursor: pointer;
  white-space: nowrap; transition: all .15s;
}
.dg-fbtn:hover { border-color: var(--dg-black); color: var(--dg-black); }
.dg-fbtn.active {
  background: var(--dg-black); color: var(--dg-cream);
  border-color: var(--dg-black);
}
.dg-cats { margin-top: 52px; }
.dg-cats.hidden { display: none; }
.dg-cath {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 22px; padding-bottom: 14px;
  border-bottom: 2px solid var(--dg-black);
}
.dg-catT {
  font-size: 15px; font-weight: 700; color: var(--dg-black);
  text-transform: uppercase;
}
.dg-catC {
  font-size: 11px; color: rgba(26, 26, 26, 0.35);
  text-transform: uppercase;
}

/* ============================ Learn — newsletter (red) ============================ */
.dg-nlb {
  display: flex; align-items: center; justify-content: space-between;
  gap: 48px; padding: 80px 0;
}
.dg-nlt {
  font-size: 28px; font-weight: 700; color: var(--color-foreground-heading);
  text-transform: uppercase; line-height: 1.0; margin-bottom: 10px;
}
.dg-nls {
  font-size: 12px; color: var(--color-foreground); opacity: 0.6;
  text-transform: uppercase; line-height: 1.7;
}
.dg-nlf { display: flex; gap: 0; flex-shrink: 0; }
.dg-nli {
  background: rgba(255, 255, 255, 0.15); border: none;
  border-radius: 3px 0 0 3px; padding: 15px 22px;
  font-family: inherit; font-size: 12px; color: #fff;
  text-transform: uppercase; width: 260px; outline: none;
}
.dg-nli::placeholder { color: rgba(255, 255, 255, 0.4); }
.dg-nlbtn {
  background: var(--dg-black); color: var(--dg-cream);
  font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 15px 22px; border-radius: 0 3px 3px 0;
  border: none; cursor: pointer; text-transform: uppercase;
}

@media (max-width: 980px) {
  .dg-gfeat { grid-template-columns: 1fr; }
  .dg-nlb { flex-direction: column; align-items: flex-start; padding: 56px 0; }
  .dg-nlf { width: 100%; }
  .dg-nli { width: 100%; flex: 1; }
}

/* ============================ About — hero ============================ */
.dg-ahw {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
  padding: 24px var(--dg-page-padding);
  max-width: var(--dg-page-width);
  margin: 0 auto;
}
.dg-ahh {
  font-size: 56px;
  font-weight: 700;
  color: var(--dg-cream);
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.025em;
  margin: 0 0 26px;
  font-family: var(--dg-font-mono);
}
.dg-ahh > p { margin: 0; }
.dg-ahb {
  font-size: 14px;
  color: rgba(245, 238, 216, 0.6);
  text-transform: uppercase;
  line-height: 1.9;
}
.dg-ahb > p { margin: 0 0 8px; }
.dg-ahb > p:last-child { margin-bottom: 0; }
.dg-ahimg {
  background: rgba(245, 238, 216, 0.06);
  border-radius: 12px;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dg-ahimg img { width: 100%; height: 100%; object-fit: cover; }

/* ============================ About — gold stats ============================ */
.dg-gsw {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 36px var(--dg-page-padding);
  max-width: var(--dg-page-width);
  margin: 0 auto;
}
.dg-gsi {
  text-align: center;
  padding: 0 24px;
  border-right: 1.5px solid rgba(26, 26, 26, 0.15);
}
.dg-gsi:last-child { border-right: none; }
.dg-gsn {
  font-size: 34px;
  font-weight: 700;
  color: var(--dg-black);
  line-height: 1;
}
.dg-gsl {
  font-size: 10px;
  font-weight: 700;
  color: rgba(26, 26, 26, 0.55);
  text-transform: uppercase;
  margin-top: 7px;
  line-height: 1.5;
}

/* ============================ About — split story ============================ */
.dg-syl {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.dg-simgb {
  background: rgba(26, 26, 26, 0.07);
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed rgba(26, 26, 26, 0.1);
  overflow: hidden;
}
.dg-simgb img { width: 100%; height: 100%; object-fit: cover; }
.dg-stxd {
  background: var(--dg-black);
  padding: 72px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dg-stxl {
  background: var(--dg-cream);
  padding: 72px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dg-sey-gold {
  font-size: 10px;
  font-weight: 700;
  color: var(--dg-gold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
}
.dg-sey-red {
  font-size: 10px;
  font-weight: 700;
  color: var(--dg-red);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
}
.dg-sh2-light {
  font-size: 30px;
  font-weight: 700;
  color: var(--dg-cream);
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 22px;
  font-family: var(--dg-font-mono);
}
.dg-sh2-dark {
  font-size: 30px;
  font-weight: 700;
  color: var(--dg-black);
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 22px;
  font-family: var(--dg-font-mono);
}
.dg-sh2-light > p,
.dg-sh2-dark > p { margin: 0; }
.dg-sp2-light {
  font-size: 12px;
  color: rgba(245, 238, 216, 0.55);
  text-transform: uppercase;
  line-height: 2.0;
  margin: 0 0 16px;
}
.dg-sp2-light:last-child { margin-bottom: 0; }
.dg-sp2-light > p { margin: 0; }
.dg-sp2-dark {
  font-size: 12px;
  color: rgba(26, 26, 26, 0.6);
  text-transform: uppercase;
  line-height: 2.0;
  margin: 0 0 16px;
}
.dg-sp2-dark:last-child { margin-bottom: 0; }
.dg-sp2-dark > p { margin: 0; }
.dg-sh2-light em,
.dg-sh2-dark em {
  color: var(--dg-gold);
  text-decoration: underline;
  text-underline-offset: 5px;
  font-style: normal;
}
.dg-sh2-light strong {
  color: var(--dg-red);
  text-decoration: underline;
  text-underline-offset: 5px;
  font-weight: 700;
}
.dg-sh2-dark strong {
  color: var(--dg-red);
  text-decoration: underline;
  text-underline-offset: 5px;
  font-weight: 700;
}
.dg-sp2-light strong { color: var(--dg-cream); font-weight: 700; }
.dg-sp2-dark strong { color: var(--dg-black); font-weight: 700; }

/* ============================ About — mission ============================ */
.dg-mw {
  padding: 80px var(--dg-page-padding);
  max-width: var(--dg-page-width);
  margin: 0 auto;
}
.dg-mh {
  font-size: 40px;
  font-weight: 700;
  color: var(--dg-black);
  text-transform: uppercase;
  line-height: 1.0;
  margin: 0 0 52px;
  font-family: var(--dg-font-mono);
}
.dg-mh > p { margin: 0; }
.dg-mg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.dg-mn {
  font-size: 44px;
  font-weight: 700;
  color: rgba(26, 26, 26, 0.08);
  line-height: 1;
  margin-bottom: 12px;
}
.dg-mt {
  font-size: 14px;
  font-weight: 700;
  color: var(--dg-black);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.dg-mb {
  font-size: 12px;
  color: rgba(26, 26, 26, 0.5);
  text-transform: uppercase;
  line-height: 1.9;
}
.dg-mh em {
  color: var(--dg-gold);
  text-decoration: underline;
  text-underline-offset: 5px;
  font-style: normal;
}
.dg-mh strong {
  color: var(--dg-red);
  text-decoration: underline;
  text-underline-offset: 5px;
  font-weight: 700;
}

@media (max-width: 980px) {
  .dg-ahw { grid-template-columns: 1fr; gap: 36px; padding: 48px var(--dg-page-padding); }
  .dg-ahh { font-size: 38px; }
  .dg-gsw { grid-template-columns: 1fr 1fr; gap: 24px 0; padding: 24px var(--dg-page-padding); }
  .dg-gsi:nth-child(2) { border-right: none; }
  .dg-syl { grid-template-columns: 1fr; }
  .dg-stxd, .dg-stxl { padding: 48px 32px; }
  .dg-mg { grid-template-columns: 1fr; gap: 32px; }
  .dg-mh { font-size: 28px; }
}

/* ============================ Horizon product cards override ============================
   Brand-restyle Horizon's product cards so any merchant-added product grid (collection,
   search, recommendations, etc.) renders on-brand. Selectors target Horizon classes only,
   so dg-* sections are unaffected. */

/* Card container: brand corner radius + soft border. */
product-card.product-card,
.product-card .product-card__content,
.card-gallery {
  font-family: var(--dg-font-mono);
}
.product-card .product-card__content {
  border-radius: 4px;
}
.card-gallery {
  border-radius: 4px;
  overflow: hidden;
}

/* Product card title (rendered through product-title block). */
.product-card .product-title,
.product-card product-title,
.product-grid__item .product-title {
  font-family: var(--dg-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* Card price: monospaced; sale price in brand red. */
.product-card .price,
.product-card .price-item,
.product-grid__item .price,
.product-grid__item .price-item {
  font-family: var(--dg-font-mono);
  font-weight: 700;
  font-size: 13px;
}
.product-card .price-item--sale,
.product-grid__item .price-item--sale {
  color: var(--dg-red);
}
.product-card .compare-at-price,
.product-grid__item .compare-at-price {
  color: rgba(26, 26, 26, 0.45);
}

/* Sale + sold-out badges: brand red rectangles, uppercase mono. */
.product-badges .product-badges__badge,
.product-badges .product-badges__badge--rectangle {
  background: var(--dg-red);
  color: #fff;
  font-family: var(--dg-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 3px;
  padding: 6px 10px;
  font-size: 11px;
}

/* Quick-add button on cards: brand red on hover, mono type. */
.quick-add .quick-add__button,
.quick-add__button.add-to-cart-button {
  font-family: var(--dg-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 3px;
  background: var(--dg-black);
  color: var(--dg-cream);
}
.quick-add .quick-add__button:hover,
.quick-add__button.add-to-cart-button:hover {
  background: var(--dg-red);
  color: #fff;
}

/* Disable Horizon's hover zoom — brand cards are flat. */
.product-card .card-gallery img,
.product-grid__item .card-gallery img {
  transition: none;
}
.product-card:hover .card-gallery img,
.product-grid__item:hover .card-gallery img {
  transform: none;
}

/* ============================ Horizon cart override ============================
   Brand-restyle the cart page (main-cart) and cart drawer. Targets Horizon-only
   classes (cart-page, cart-items, cart-totals, cart__ctas) so dg-* sections are
   never affected. */

.cart-page,
.cart-page__items,
.cart-page__summary,
.cart-items,
.cart-totals,
.cart__ctas {
  font-family: var(--dg-font-mono);
}

/* Cart title (main-cart) — uppercase mono heading. */
.cart-page .cart-page__title,
.cart-page .cart-page__title h1,
.cart-page .cart-page__title h2 {
  font-family: var(--dg-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* Line items: brand typography + soft divider colour. */
.cart-items__table,
.cart-items__table-row {
  font-family: var(--dg-font-mono);
}
.cart-items__title {
  font-family: var(--dg-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--dg-black);
}
.cart-items__variants,
.cart-items__properties,
.cart-items__variant,
.cart-items__property {
  font-family: var(--dg-font-mono);
  font-size: 12px;
  color: rgba(26, 26, 26, 0.6);
}
.cart-items--dividers .cart-items__table-row {
  border-color: rgba(26, 26, 26, 0.07);
}

/* Cart line item price + unit price. */
.cart-items__unit-price-wrapper .price,
.cart-items__unit-price-wrapper .price-item {
  font-family: var(--dg-font-mono);
  font-weight: 700;
}
.cart-items__unit-price-wrapper .price-item--sale {
  color: var(--dg-red);
}

/* Quantity controls. */
.cart-items__quantity-controls {
  font-family: var(--dg-font-mono);
}

/* Subtotal + total rows. */
.cart-totals__original-label,
.cart-totals__original-value,
.cart-totals__total-label,
.cart-totals__total-value,
.cart-primary-typography,
.cart-secondary-typography {
  font-family: var(--dg-font-mono);
}
.cart-totals__total-label,
.cart-totals__total-value {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cart-totals__total-value {
  color: var(--dg-red);
}

/* Note + discount summaries. */
.cart-note__label,
.cart-discount__label {
  font-family: var(--dg-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
}

/* Discount input + pill. */
.cart-discount__input {
  font-family: var(--dg-font-mono);
  border-radius: 3px;
}
.cart-discount__pill {
  font-family: var(--dg-font-mono);
  background: var(--dg-cream);
  color: var(--dg-black);
  border-radius: 3px;
}

/* Checkout button: brand red, white text, brand 3px radius. */
.cart__ctas .cart__checkout-button,
.cart__ctas .cart__checkout-button.button {
  background: var(--dg-red);
  color: #fff;
  font-family: var(--dg-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 3px;
  border: none;
}
.cart__ctas .cart__checkout-button:hover,
.cart__ctas .cart__checkout-button.button:hover {
  background: var(--dg-red-hover);
  color: #fff;
}

/* "Apply" discount button stays mono. */
.cart-discount__button {
  font-family: var(--dg-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 3px;
}

/* Empty cart CTA: brand red. */
.cart-items__empty-button {
  background: var(--dg-red);
  color: #fff;
  font-family: var(--dg-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 3px;
}
.cart-items__empty-button:hover {
  background: var(--dg-red-hover);
  color: #fff;
}

/* Empty cart message — eyebrow style. */
.cart-page--empty .cart-page__items,
.cart-page--empty {
  text-align: center;
}
.cart-page--empty h1,
.cart-page--empty h2,
.cart-page--empty p {
  font-family: var(--dg-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Remove (X) button on line items. */
.cart-items__remove {
  font-family: var(--dg-font-mono);
  color: rgba(26, 26, 26, 0.55);
}
.cart-items__remove:hover {
  color: var(--dg-red);
}

/* ============================ Horizon collection/blog/search/404 override ============================
   Brand-restyle the remaining Horizon page types. Targets Horizon-only wrapper classes
   (collection-wrapper, blog-posts-container, blog-post-card, facets, pagination, search-page,
   main-collection-grid) so dg-* sections are not affected. */

/* ---- Collection + collection list + search results ---- */
.collection-wrapper,
.product-grid-container,
.search-page__header,
.main-collection-grid {
  font-family: var(--dg-font-mono);
}

/* Collection / search page heading: brand eyebrow style. */
.search-page__header h1,
.search-page__header h2,
.collection-wrapper > h1,
.product-grid-container > h1,
.main-collection-grid__title {
  font-family: var(--dg-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--dg-black);
}

/* Empty-collection messaging. */
.main-collection-grid__empty-title,
.main-collection-grid__empty {
  font-family: var(--dg-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Facets / filters: mono, red active state. */
.facets,
.facets__form,
.facets__panel,
.facets__summary,
.facets__label,
.facets__status,
.facets-toggle,
.facets-toggle__button {
  font-family: var(--dg-font-mono);
}
.facets__summary,
.facets__label,
.facets--filters-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
}
.facets__status {
  color: var(--dg-red);
  font-weight: 700;
}
.facets__clear-all-link {
  font-family: var(--dg-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dg-red);
}
.facets-toggle__button {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 3px;
}

/* Products-count text. */
.products-count-wrapper {
  font-family: var(--dg-font-mono);
  font-size: 12px;
  color: rgba(26, 26, 26, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Pagination ---- */
.pagination,
.pagination__list,
.pagination__link {
  font-family: var(--dg-font-mono);
}
.pagination__link {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 3px;
  color: var(--dg-black);
}
.pagination__link--current,
.pagination__link--page[aria-current="page"] {
  background: var(--dg-red);
  color: #fff;
}
.pagination__link:not(.pagination__link--disabled):not(.pagination__link--current):hover {
  color: var(--dg-red);
}
.pagination__link--disabled {
  color: rgba(26, 26, 26, 0.3);
}

/* ---- Blog list (main-blog) ---- */
.blog-posts-container,
.blog-post-item {
  font-family: var(--dg-font-mono);
}
.blog-post-card {
  background: #fff;
  border: 1px solid rgba(26, 26, 26, 0.07);
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--dg-font-mono);
}
.blog-post-card__content {
  padding: 20px 22px;
}
.blog-post-card h2,
.blog-post-card h3,
.blog-post-card .h2,
.blog-post-card .h3 {
  font-family: var(--dg-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-size: 18px;
  line-height: 1.25;
}

/* Blog post item meta (date / author / tags). */
.blog-post-info,
.blog-post-card__meta,
.blog-post-info-text {
  font-family: var(--dg-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(26, 26, 26, 0.45);
}

/* ---- Single blog post (main-blog-post) ---- */
.blog-post-content,
.blog-post-content.rte {
  font-family: var(--dg-font-mono);
  max-width: 720px;
  margin: 0 auto;
}
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4 {
  font-family: var(--dg-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.blog-post-comments-container,
.blog-post-comment {
  font-family: var(--dg-font-mono);
}
.blog-post-comment__author-name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.blog-post-comment__date {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(26, 26, 26, 0.45);
}

/* ---- Search header ---- */
.search-page__header {
  border-bottom: 1px solid rgba(26, 26, 26, 0.07);
}

/* ---- 404 page ---- */
.template-404,
.template-404 .section-content-wrapper {
  font-family: var(--dg-font-mono);
}
.template-404 h1,
.template-404 h2 {
  font-family: var(--dg-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.template-404 .button {
  background: var(--dg-red);
  color: #fff;
  font-family: var(--dg-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 3px;
  border: none;
}
.template-404 .button:hover {
  background: var(--dg-red-hover);
  color: #fff;
}

/* ============================ Add-to-cart button feedback states ============================
   Applied by assets/dg-cta-feedback.js whenever a DG add-to-cart submits.
   Affects every button class we use for CTAs across DG sections. */
.dg-section button[data-dg-cta-state="loading"],
.dg-section button[aria-busy="true"] {
  opacity: 0.85;
  cursor: progress;
}
.dg-section button[data-dg-cta-state="loading"]::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.55em;
  vertical-align: -0.1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: dg-cta-spin .8s linear infinite;
}
.dg-section button.dg-cta--success {
  background: #2f8f4a !important;
  color: #fff !important;
  border-color: #2f8f4a !important;
}
.dg-section button.dg-cta--error {
  background: #8a1d1d !important;
  color: #fff !important;
  border-color: #8a1d1d !important;
}
@keyframes dg-cta-spin {
  to { transform: rotate(360deg); }
}
/* Sticky bar wrapper around product-form-component — keep flex layout intact. */
.dg-sbbtn-form { display: flex; }
.dg-sbbtn-form form { margin: 0; }

/* Shared rating line (snippet: dg-rating.liquid). */
.dg-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-foreground);
  opacity: 0.7;
}
.dg-rating__stars {
  color: var(--dg-gold);
  letter-spacing: 1px;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
}
.dg-rating__star--empty { color: var(--color-foreground); opacity: 0.2; }
.dg-rating__star--half {
  background: linear-gradient(90deg, var(--dg-gold) 50%, rgba(127, 127, 127, 0.25) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Per-section spacing for the shared rating snippet. */
.dg-brating { margin: 6px 0 10px; font-size: 10px; }
.dg-alrating { margin: 4px 0 8px; font-size: 10px; }
.dg-alrating .dg-rating__stars,
.dg-brating .dg-rating__stars { font-size: 12px; }
/* ============================ PDP Why Steel — USA highlight ============================ */
.dg-wy--usa {
  background: #fff;
  border: 5px solid #FF0000;
  outline: 5px solid #0000CD;
  outline-offset: -10px;
}
.dg-wy--usa .dg-wyn { color: #FF0000; }
.dg-wy--usa .dg-wyt { color: #0000CD; }
.dg-wy--usa .dg-wyb { color: rgba(0,0,205,0.7); }
.dg-rating { display: inline-flex; align-items: baseline; gap: 8px; font-size: 16px; color: var(--color-foreground); opacity: 1.5; }
.dg-rating__stars { color: var(--dg-gold); letter-spacing: 1px; font-size: 25px; line-height: 1; display: inline-flex; align-items: baseline; opacity: 1.5 }