/** Shopify CDN: Minification failed

Line 24:21 Expected identifier but found whitespace
Line 24:23 Unexpected "{"
Line 24:33 Expected ":"
Line 25:15 Expected identifier but found whitespace
Line 25:17 Unexpected "{"
Line 25:27 Expected ":"
Line 26:17 Expected identifier but found whitespace
Line 26:19 Unexpected "{"
Line 26:29 Expected ":"
Line 27:27 Expected identifier but found whitespace
... and 12 more hidden warnings

**/
/* 707DTF - Premium DTF Transfers Theme
   Modern, high-contrast, print-industry aesthetic
   Optimized for performance and conversion */

/* Import Bebas Neue - bold, condensed, highly readable for display text like the logo style */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root {
  --color-background: {{ settings.color_background | default: '#0D0D0D' }};
  --color-text: {{ settings.color_text | default: '#FFFFFF' }};
  --color-accent: {{ settings.color_accent | default: '#FF2E63' }};
  --color-accent-secondary: {{ settings.color_accent_secondary | default: '#00D4FF' }};
  --color-surface: {{ settings.color_surface | default: '#1A1A1A' }};
  --color-border: {{ settings.color_border | default: '#2A2A2A' }};

  --font-heading: 'Bebas Neue', Impact, 'system-ui', sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Readable sans-serif for body text */
  --base-font-size: {{ settings.base_font_size | default: 16 }}px;

  --radius: 8px;
  --transition: 0.2s cubic-bezier(0.23, 1.0, 0.32, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--base-font-size);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Improve general readability on dark surfaces */
p, li {
  color: #f0f0f0;
  line-height: 1.6;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

h1 { font-size: 3.2rem; letter-spacing: 4px; } /* match hero headline tracking */
h2 { font-size: 2.4rem; letter-spacing: 3px; }
h3 { font-size: 1.85rem; letter-spacing: 2px; } /* closer to hero condensed bold style */

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-accent);
}

img, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Layout helpers */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 4rem 0;
}

.section + .section {
  border-top: 1px solid var(--color-border);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-transform: uppercase;
  text-decoration: none;
}

.btn--primary,
.btn--secondary {
  background: #000;
  color: #fff;
  border-color: #fff;
}

.btn--primary:hover,
.btn--secondary:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.btn--outline-accent {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn--outline-accent:hover {
  background: var(--color-accent);
  color: #fff;
}

.view-full-guide-btn {
  color: #FF2E63;
  border-color: #FF2E63;
}

.view-full-guide-btn:hover {
  background: #FF2E63;
  color: #000;
  border-color: #FF2E63;
}

/* Homepage Hero Buttons - Custom Colors */
.btn-cyan {
  color: #00FFFF;
  border-color: #00FFFF;
}

.btn-cyan:hover {
  background: #00FFFF;
  color: #000;
  border-color: #00FFFF;
}

.btn-yellow {
  color: #FFFF00;
  border-color: #FFFF00;
}

.btn-yellow:hover {
  background: #FFFF00;
  color: #000;
  border-color: #FFFF00;
}

/* ============================================
   GANG SHEET BUILDER PRODUCT PAGE
   Style the app's builder button to match our cyan theme
   ============================================ */

/* Target common app button classes — adjust the selectors below if your builder uses different classes */
a[class*="builder"],
a[class*="launch"],
button[class*="builder"],
button[class*="launch"],
.drip-button,
.builder-button,
a[href*="builder"],
a[href*="gang-sheet"] {
  color: #00FFFF !important;
  border-color: #00FFFF !important;
  background: transparent !important;
  border-width: 2px !important;
  border-style: solid !important;
  padding: 14px 40px !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: var(--radius) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

a[class*="builder"]:hover,
a[class*="launch"]:hover,
button[class*="builder"]:hover,
button[class*="launch"]:hover,
.drip-button:hover,
.builder-button:hover,
a[href*="builder"]:hover,
a[href*="gang-sheet"]:hover {
  background: #00FFFF !important;
  color: #000 !important;
  border-color: #00FFFF !important;
}

/* Pink / Magenta buttons (for How to Apply page accent) */
.btn-pink {
  color: #FF2E63;
  border-color: #FF2E63;
}

.btn-pink:hover {
  background: #FF2E63;
  color: #fff;
  border-color: #FF2E63;
}

/* Header */
.header {
  position: relative;
  z-index: 100;
  background: #000000;
  border-bottom: 1px solid #222222;
  transition: box-shadow 0.2s ease;
  width: 100%;
}

.header[data-sticky="true"] {
  position: sticky;
  top: 0;
}

.header.is-sticky {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 2rem;
  flex-wrap: nowrap;
}

/* Left side - Brand */
.header__left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: #fff;
}

.header__logo-img {
  height: 48px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.header__brand-text {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1;
}

/* Navigation */
.header__nav {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
  flex-wrap: nowrap;
}

.header__nav a {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 2px;
  color: #f5f5f5;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* Top level nav items (HOME, DTF TRANSFERS, GUIDES, CONTACT) get white highlight + black text on hover */
.header__nav > a,
.header__nav .nav-dropdown-toggle {
  padding: 6px 14px;
  border-radius: 4px;
}

.header__nav > a:hover,
.header__nav .nav-dropdown-toggle:hover {
  background-color: #ffffff;
  color: #000000;
}

/* DTF TRANSFERS and GUIDES use their own color as hover highlight (inverted) */
.header__nav .nav-dropdown-toggle.nav-cyan:hover {
  background-color: #00FFFF;
  color: #000000;
}

.header__nav .nav-dropdown-toggle.nav-highlight:hover {
  background-color: #FF2E63;
  color: #000000;
}

.header__nav a.nav-highlight {
  color: #FF2E63;
  font-weight: 700;
}

.header__nav a.nav-cyan {
  color: #00FFFF;
  font-weight: 700;
}

.header__nav a.nav-yellow {
  color: #FFFF00; /* 100% Yellow */
}

.header__nav a.nav-yellow:hover {
  color: #ffffff;
}

/* Right side - Account & Cart */
.header__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

.header__link {
  color: #f5f5f5;
  text-decoration: none;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
}

.header__link:hover {
  color: #FF2E63; /* Brand pink accent */
}

.header__link svg {
  stroke: currentColor;
  width: 24px;
  height: 24px;
}

.header__cart {
  position: relative;
}

#cart-count {
  font-size: 0.7rem;
  background: #FF2E63;
  color: #111;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 4px;
  font-family: var(--font-heading);
  letter-spacing: 0.5px;
}

.header__link:hover {
  color: #fff;
}

.header__cart {
  position: relative;
}

/* ============================================
   NEW DROPDOWN NAVIGATION
   ============================================ */

.header__nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}

/* Dropdown container */
.nav-dropdown {
  position: relative;
}

/* Invisible hover bridge so the dropdown doesn't disappear 
   when moving the mouse down to the menu items */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 14px;           /* Bridge height - gives forgiveness when moving mouse down */
  background: transparent;
  z-index: 99;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-dropdown-toggle::after {
  content: '▾';
  font-size: 0.7rem;
  margin-left: 2px;
  transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-toggle::after {
  transform: rotate(180deg);
}

/* Dropdown menu */
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 12px 0;        /* Top padding creates visual gap instead of margin */
  margin-top: 0;          /* Removed to prevent hover gap */
  z-index: 100;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.nav-dropdown:hover .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: #f5f5f5;
  text-decoration: none;
  transition: all 0.2s ease;
  /* Force plain text link - no button styling whatsoever */
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px 20px !important; /* re-assert to beat any other rules */
}

/* Explicitly plain base color for DTF sub items on desktop (no accent until hover, to avoid button look) */
.nav-dropdown-menu a.hover-cyan,
.nav-dropdown-menu a.hover-yellow {
  color: #f5f5f5 !important;
}

.nav-dropdown-menu a:hover {
  background: transparent;
  color: #FF2E63;
}

/* Custom hover colors for DTF Transfers submenu - text color only, no background fill so they don't look like buttons */
.nav-dropdown-menu a.hover-cyan:hover {
  color: #00FFFF !important;
  background: transparent !important;
}

.nav-dropdown-menu a.hover-yellow:hover {
  color: #FFFF00 !important;
  background: transparent !important;
}

/* Default text colors for DTF TRANSFERS submenu items on desktop (plain colored text, no button bg) */
.nav-dropdown-menu a.hover-cyan {
  color: #00FFFF !important;
}

.nav-dropdown-menu a.hover-yellow {
  color: #FFFF00 !important;
}

/* Default text color for GUIDES submenu items on desktop (magenta) */
.nav-dropdown-menu a[href="/pages/artwork"],
.nav-dropdown-menu a[href="/pages/how-to-apply"] {
  color: #FF2E63 !important;
}

/* Mobile Hamburger */
.header__nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  z-index: 200;
}

.hamburger {
  display: block;
  width: 24px;
  height: 2px;
  background: #f5f5f5;
  position: relative;
  transition: all 0.3s ease;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: #f5f5f5;
  left: 0;
  transition: all 0.3s ease;
}

.hamburger::before { top: -7px; }
.hamburger::after  { top: 7px; }

/* Mobile Menu Styles */
@media (max-width: 1024px) {
  .header__inner {
    justify-content: space-between;
    position: relative;
  }

  .header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #111;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 8px;
    border-top: 1px solid #333;
    z-index: 150;
  }

  .header__nav.is-open {
    display: flex;
  }

  .header__nav-toggle {
    display: block;
    order: -1; /* Move hamburger to the left */
  }

  /* Center the logo + 707DTF text on mobile */
  .header__left {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Keep account + cart on the right */
  .header__actions {
    margin-left: auto;
  }

  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown-menu {
    position: static;
    transform: none;
    display: none;
    background: transparent; /* Remove dark box so sub-items don't look like separate buttons */
    border: none;
    box-shadow: none;
    margin-top: 0;
    padding: 0;
  }

  .nav-dropdown.is-open .nav-dropdown-menu {
    display: block;
  }

  /* Plain text link styling for sub-menu items on mobile - no button look */
  .nav-dropdown-menu a {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 6px 30px !important;
    margin: 0 !important;
    box-shadow: none !important;
    font-size: 0.9rem;
    color: #f5f5f5 !important;
  }

  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a:focus {
    background: transparent !important;
  }

  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
  }

  /* Completely reset sub-menu items on mobile so they never look like buttons */
  .nav-dropdown-menu a {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px 30px !important;
    margin: 0 !important;
    width: auto !important;
    display: block !important;
  }

  /* Hover should only change text color, no background or button effects */
  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a:focus {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Colored hover text for the themed sub-items - only color, no bg to avoid button look */
  .nav-dropdown-menu a.hover-cyan:hover,
  .nav-dropdown-menu a.hover-cyan:focus {
    color: #00FFFF !important;
    background: transparent !important;
  }

  .nav-dropdown-menu a.hover-yellow:hover,
  .nav-dropdown-menu a.hover-yellow:focus {
    color: #FFFF00 !important;
    background: transparent !important;
  }

  /* Default text colors for DTF TRANSFERS submenu items in mobile menu (plain colored text, no button bg) */
  .nav-dropdown-menu a.hover-cyan {
    color: #00FFFF !important;
  }

  .nav-dropdown-menu a.hover-yellow {
    color: #FFFF00 !important;
  }

  /* GUIDES submenu items - magenta text (plain text by default, accent on hover) */
  .nav-dropdown-menu a[href="/pages/artwork"],
  .nav-dropdown-menu a[href="/pages/how-to-apply"] {
    color: #FF2E63 !important;
  }
}

/* Site-wide 5px accent line under the header/menu */
.header-separator {
  height: 5px;
  width: 100%;
  background: #FF2E63; /* Brand pink accent */
}

/* Hide the separator only on the homepage */
.template-index .header-separator {
  display: none;
}

/* Change separator color on Transfers by Size page */
.transfers-by-size-page .header-separator {
  background: #FFFF00; /* 100% Yellow (matching the menu link) */
}

/* Change separator color on Build a Gang Sheet page */
.build-gang-sheet-page .header-separator {
  background: #00FFFF; /* 100% Cyan (matching the menu link) */
}

/* Change separator color on Contact page (white theme) */
.contact-page .header-separator {
  background: #ffffff;
}

/* Hero */
.hero {
  position: relative;
  min-height: 36vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: 5px;
  background: #0D0D0D;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(2.02) contrast(1.1);
}

/* Mobile: Replace video with static poster image for performance */
@media (max-width: 768px) {
  .hero__video {
    display: none;
  }

  .hero {
    background-image: url('hero-poster.jpg');
  }

  .build-gang-hero {
    background-image: url('build-gang-hero-poster.jpg');
  }

  .transfers-size-hero {
    background-image: url('transfers-size-hero-poster.jpg');
  }

  .how-to-apply-page .application-guide-video-wrapper,
  .artwork-guidelines-page .application-guide-video-wrapper {
    background-image: url('application-guide-poster.jpg');
  }

  /* Unified mobile hero treatment across the entire site.
     All custom heroes now use consistent:
     - Content box width (nearly full 90% area)
     - Standardized tighter padding
     - Centered layout
     - Similar headline/subheadline scaling for visual harmony on mobile */
  .template-index .hero__content-box,
  .build-gang-sheet-page .build-gang-hero__content-box,
  .transfers-by-size-page .transfers-size-hero__content-box,
  .how-to-apply-page .application-guide-video-box,
  .artwork-guidelines-page .application-guide-video-box {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 24px 18px !important;
    text-align: center !important;
  }

  /* Make Transfers by Size mobile hero content box background match Build a Gang Sheet */
  .transfers-by-size-page .transfers-size-hero__content-box {
    background: rgba(0, 0, 0, 0.65) !important;
    border: 1px solid #1f1f1f !important;
    border-radius: 14px !important;
  }

  /* Harmonized mobile headline sizes */
  .template-index .hero__headline,
  .build-gang-sheet-page .build-gang-hero__headline,
  .transfers-by-size-page .transfers-size-hero__headline,
  .how-to-apply-page .application-guide-video-box h1,
  .artwork-guidelines-page .application-guide-video-box h1 {
    font-size: 2.1rem !important;
    letter-spacing: 2px !important;
  }

  /* Harmonized mobile subheadline / meta sizes */
  .template-index .hero__subheadline,
  .build-gang-sheet-page .build-gang-hero__subheadline,
  .build-gang-sheet-page .build-gang-hero__meta-line,
  .transfers-by-size-page .transfers-size-hero__subheadline,
  .how-to-apply-page .application-guide-video-box .hero__subheadline,
  .artwork-guidelines-page .application-guide-video-box .hero__subheadline {
    font-size: 0.95rem !important;
    letter-spacing: 1px !important;
  }
}

/* Homepage mobile: Make all main content take 90% width (except full-bleed backgrounds) */
@media (max-width: 768px) {
  .template-index .container,
  .template-index .hero__content,
  .template-index .how-it-works__grid,
  .template-index .testimonials__grid {
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Shrink subheadline to fit "Vibrant. Durable. Professional grade." on one line */
  .template-index .hero__subheadline {
    font-size: 0.92rem !important;
    letter-spacing: 0.75px !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  /* Give the home hero content box tighter padding on mobile so text has room.
     Make the box span nearly the full 90% content area and center its contents. */
  .template-index .hero__content-box {
    max-width: 100% !important;   /* fill the parent .hero__content (which is already at 90%) */
    margin: 0 auto !important;
    padding: 24px 18px !important;
    text-align: center !important;
  }

  /* PREMIUM DTF TRANSFERS as two lines on mobile home, centered under the logo */
  .template-index .hero__headline {
    font-size: 0 !important; /* hide original single-line text */
    line-height: 1.05 !important;
    margin-bottom: 0.4rem !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  .template-index .hero__headline::before {
    content: "PREMIUM";
    display: block;
    font-size: 2.1rem !important;
    letter-spacing: 2px !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  .template-index .hero__headline::after {
    content: "DTF TRANSFERS";
    display: block;
    font-size: 2.05rem !important;
    letter-spacing: 2.5px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    margin-top: -0.1rem !important; /* fine-tune vertical spacing between the two lines */
  }

  /* Make "Printed & shipped in 1-2 business days" fit on one line - keep original text size */
  .template-index .hero__turnaround {
    white-space: nowrap !important;
    letter-spacing: 1px !important;
    font-size: 0.95rem !important;
    text-align: center !important;
  }
}

/* Make the Build a Gang Sheet product page (https://707dtf.com/products/build-a-gang-sheet) extremely minimal - only the big button + site theme */
.template-product-gang-sheet .shopify-app-block,
.template-product-build-gang-sheet .shopify-app-block {
  max-width: 320px;
  margin: 0 auto !important;
  display: block;
}

/* Add generous space above and below the button by padding the section container on this minimal product page.
   Targeting the shopify-section id for the "builder" section (the only section in the gang-sheet template)
   ensures space even if the apps block doesn't use .section class. */
.template-product-gang-sheet #shopify-section-builder,
.template-product-build-gang-sheet #shopify-section-builder {
  padding: 150px 0 !important;
}

/* Space above and below the button on the minimal gang-sheet product page.
   Targeting main for the content area, and the specific section if needed. */
.template-product-gang-sheet main,
.template-product-build-gang-sheet main {
  padding-top: 150px !important;
  padding-bottom: 150px !important;
}

/* Also ensure the builder section has space if main padding is overridden elsewhere */
.template-product-gang-sheet #shopify-section-builder,
.template-product-build-gang-sheet #shopify-section-builder {
  padding: 0 !important;
}

/* 5px accent line under header - cyan for gang sheet product page */
.template-product-gang-sheet .header-separator,
.template-product-build-gang-sheet .header-separator {
  background: #00FFFF !important;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  /* Lightened further for maximum video brightness while keeping text readable */
  background: linear-gradient(to bottom, rgba(0,0,0,0.32), rgba(0,0,0,0.65));
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  color: #ffffff;
  text-align: center;
  margin: 0 auto;
}

.hero__content-box {
  background: rgba(0, 0, 0, 0.5); /* 50% black transparent - same as Application Guide */
  padding: 40px 30px;
  border-radius: 12px;
  max-width: 720px;
}

.hero__content > div:last-child {
  text-align: center;
}

.hero__logo {
  height: 180px;
  width: auto;
  margin-bottom: 0.75rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .hero__logo {
    height: 120px;
  }
}

.hero__headline {
  font-size: 2.8rem;
  line-height: 1.05;
  margin-bottom: 0.5rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.hero__subheadline {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  margin-bottom: 1.25rem;
  opacity: 0.95;
  max-width: 560px;
  font-weight: 400;
  letter-spacing: 2px;
  color: #f5f5f5;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.hero__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.hero__turnaround {
  margin-top: 1.5rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.9;
  color: #eeeeee;
  text-align: center;
}

/* How it Works */
.how-it-works__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
  margin-top: 1.25rem;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
  .how-it-works__grid {
    grid-template-columns: 1fr;
    max-width: 90% !important;
    margin-left: auto;
    margin-right: auto;
  }

  .step {
    padding: 1rem 1rem 1rem 1.1rem; /* extra left padding so the step numbers don't get cut off */
  }
}

.step {
  position: relative;
  background-color: #111111;
  border: 1px solid #222222;
  border-radius: 8px;
  padding: 0.75rem;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.step__number {
  position: absolute;
  top: -18px;
  left: -18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #111 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-heading); /* match hero style */
  letter-spacing: 0.5px;
  margin: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  border: 2px solid #111;
  z-index: 1;
}

@media (max-width: 600px) {
  .step__number {
    left: -14px;
    top: -14px;
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
  }
}

.step h3 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  font-family: var(--font-heading); /* match hero Bebas Neue style */
  color: #ffffff !important;
}

.step p {
  /* Use readable body font for longer descriptions */
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.9rem;
  color: #e5e5e5 !important;
  line-height: 1.5;
}

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.75rem;
}

/* Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s var(--transition), box-shadow 0.3s var(--transition);
  color: var(--color-text);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.card__image {
  aspect-ratio: 4 / 3;
  background: #111;
  position: relative;
}

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

.card__content {
  padding: 1.25rem;
}

.card__title {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.card__price {
  font-weight: 600;
  color: var(--color-accent);
}

/* Footer - Dark theme to match the masculine, high-contrast style of the site */
.footer {
  background: #111111;
  padding: 3rem 0 1.5rem;
  font-size: 0.9rem;
  color: #e0e0e0;
  border-top: 1px solid #2a2a2a;
}

.footer__columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 2.5rem 2rem;
  margin-bottom: 2.5rem;
}

.footer__column {
  min-width: 0;
}

.footer__brand .footer__heading {
  font-size: 1.45rem;
  letter-spacing: 3px;
  color: #ffffff;
}

.footer__logo-link {
  display: inline-block;
  margin-bottom: 0.5rem;
}

.footer__logo {
  max-height: 55px;
  width: auto;
  max-width: 180px;
  display: block;
}

.footer__tagline {
  font-family: var(--font-heading);
  text-transform: uppercase;
  margin-top: 0.6rem;
  color: #aaaaaa;
  line-height: 1.5;
  max-width: 260px;
  letter-spacing: 1px;
}

.footer__heading {
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 0.9rem;
}

.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.9rem;
}

.footer__links a {
  font-family: var(--font-heading);
  text-transform: uppercase;
  color: #cccccc;
  transition: color 0.2s ease;
  letter-spacing: 1.5px;
}

.footer__links a:hover {
  color: #FFFF00; /* Default fallback */
}

/* Page-specific footer links hover colors */
.template-index .footer__links a:hover,
.contact-page .footer__links a:hover {
  color: #ffffff; /* White theme */
}

.how-to-apply-page .footer__links a:hover {
  color: #FF2E63; /* Magenta theme */
}

.transfers-by-size-page .footer__links a:hover {
  color: #FFFF00; /* Yellow theme */
}

.build-gang-sheet-page .footer__links a:hover {
  color: #00FFFF; /* Cyan theme */
}

/* Page-specific footer accents */
.transfers-by-size-page .footer__heading,
.transfers-by-size-page .footer__brand .footer__heading {
  color: #FFFF00;
}

.build-gang-sheet-page .footer__heading,
.build-gang-sheet-page .footer__brand .footer__heading {
  color: #00FFFF;
}

.how-to-apply-page .footer__heading,
.how-to-apply-page .footer__brand .footer__heading {
  color: #FF2E63;
}

.footer__contact-text {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #aaaaaa;
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
}

.footer__email-link {
  display: inline-block;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.95rem;
  color: #FF2E63; /* Default (magenta) */
  text-decoration: none;
  margin-bottom: 1rem;
  transition: color 0.2s ease;
}

/* Base hover - will be overridden per page */
.footer__email-link:hover {
  text-decoration: underline;
}

/* Page-specific email hover colors to match theme */
.how-to-apply-page .footer__email-link:hover,
.artwork-guidelines-page .footer__email-link:hover {
  color: #ff4d7a; /* Lighter magenta for visibility */
}

.transfers-by-size-page .footer__email-link:hover {
  color: #ffff99; /* Lighter yellow */
}

.build-gang-sheet-page .footer__email-link:hover {
  color: #99ffff; /* Lighter cyan */
}

.template-index .footer__email-link:hover,
.contact-page .footer__email-link:hover {
  color: #cccccc; /* Subtle light gray for white theme pages */
}

/* Page-specific email link colors */
.template-index .footer__email-link {
  color: #ffffff; /* Homepage - white */
}

.how-to-apply-page .footer__email-link,
.artwork-guidelines-page .footer__email-link {
  color: #FF2E63; /* Magenta theme */
}

.template-index .footer__email-link,
.contact-page .footer__email-link {
  color: #ffffff; /* White theme (homepage + contact) */
}

.transfers-by-size-page .footer__email-link {
  color: #FFFF00; /* Yellow theme */
}

.build-gang-sheet-page .footer__email-link {
  color: #00FFFF; /* Cyan theme */
}

.footer__social {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #444444;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  color: #cccccc;
  text-decoration: none;
  transition: all 0.2s ease;
  letter-spacing: 1.5px;
  background: #1a1a1a;
}

.footer__social a:hover {
  background: #FFFF00;
  border-color: #FFFF00;
  color: #111111;
}

.transfers-by-size-page .footer__social a:hover {
  background: #FFFF00;
  border-color: #FFFF00;
  color: #111111;
}

.build-gang-sheet-page .footer__social a:hover {
  background: #00FFFF;
  border-color: #00FFFF;
  color: #111111;
}

.how-to-apply-page .footer__social a:hover {
  background: #FF2E63;
  border-color: #FF2E63;
  color: #111111;
}

/* Homepage footer - white hover instead of yellow */
.template-index .footer__links a:hover {
  color: #ffffff;
}

.template-index .footer__social a:hover,
.contact-page .footer__social a:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #111111;
}

/* Footer bottom bar */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2a2a2a;
  font-size: 0.8rem;
  color: #888888;
}

.footer__copyright {
  white-space: nowrap;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #aaaaaa;
}

.footer__payments {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.footer__payments svg {
  height: 24px;
  width: auto;
  opacity: 0.85;
  fill: currentColor;
  color: #cccccc;
  display: inline-block;
  vertical-align: middle;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.footer__payments svg:hover {
  opacity: 1;
  color: #ffffff;
}

.transfers-by-size-page .footer__payments svg:hover {
  color: #FFFF00;
}

.build-gang-sheet-page .footer__payments svg:hover {
  color: #00FFFF;
}

.how-to-apply-page .footer__payments svg:hover {
  color: #FF2E63;
}

.footer__newsletter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #888888;
}

.footer__newsletter > span {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer__newsletter form {
  display: flex;
  gap: 0.5rem;
}

.footer__newsletter input[type="email"] {
  background: #1f1f1f;
  border: 1px solid #444444;
  color: #e0e0e0;
  padding: 6px 10px;
  font-size: 0.8rem;
  border-radius: 4px;
  min-width: 160px;
}

.footer__newsletter input[type="email"]:focus {
  outline: none;
  border-color: #FFFF00;
}

.how-to-apply-page .footer__newsletter input[type="email"]:focus {
  border-color: #FF2E63;
}

/* Responsive Footer */
@media (max-width: 900px) {
  .footer__columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.75rem;
  }
}

@media (max-width: 600px) {
  .footer__columns {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .footer__payments {
    order: 2;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .header__nav {
    display: none; /* Mobile menu can be added later */
  }

  .header__inner {
    gap: 1rem;
  }

  h1 { font-size: 2.25rem; }
  .hero__headline { font-size: 2.75rem; }

  .hero__ctas {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Utility */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }

/* Testimonials */
.section.testimonials {
  background-color: #0D0D0D; /* Dark background (inverted from current) */
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: stretch; /* Makes all 3 cards the same height */
}

@media (max-width: 900px) {
  .testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .testimonials__grid {
    grid-template-columns: 1fr;
  }
}

.testimonial {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 8px;
  padding: 0.75rem;
  color: #222222;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.testimonial p {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  color: #222222 !important;
  line-height: 1.3;
}

.testimonial__author {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.78rem;
  color: #444444 !important;
  font-weight: 400;
  letter-spacing: 1px;
}

/* DTF specific callouts */
.badge {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  background: var(--color-accent);
  color: #111111; /* Black text for white background readability */
  font-family: var(--font-heading);
  text-transform: uppercase;
  border-radius: 4px; /* Less pill, more button-like to match hero energy */
}

/* Gang Sheet CTA enhancements */
.gang-sheet-cta .btn {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 2px; /* match hero style */
}

/* Blanks upsell */
.blanks-upsell {
  background: #1a1a1a;
  padding: 3rem 0;
  border-top: 1px solid #333;
}

/* FAQ Accordion */
.faq__item {
  border-bottom: 1px solid #333;
  margin-bottom: 0.5rem;
}

.faq__item summary {
  cursor: pointer;
  padding: 1rem 0;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: 2px; /* match hero style */
  color: #fff;
}

.faq__item[open] summary {
  color: var(--color-accent);
}

.faq__item p {
  padding: 0 0 1rem;
  color: #ddd;
  line-height: 1.6;
}

/* How to Apply Guide Page - Matches Homepage Styling */
.how-to-apply-page {
  background: #000; /* Black background after the 5px separator */
  color: #fff;
}

/* Full-bleed white sections for How to Apply page */
.how-to-apply-page .full-bleed-white {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  box-sizing: border-box;
}

/* Application Guide Video */
.application-guide-video-wrapper {
  position: relative;
  width: 100%;
  min-height: 36vh;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.application-guide-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Match the cinematic look of the hero video */
  filter: brightness(1.55) contrast(1.08);
}

/* Mobile: Replace video with static poster for performance */
@media (max-width: 768px) {
  .application-guide-video {
    display: none;
  }

  .how-to-apply-page .application-guide-video-wrapper,
  .artwork-guidelines-page .application-guide-video-wrapper {
    background-image: url('application-guide-poster.jpg');
  }
}

.application-guide-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.55));
  z-index: 1;
}

.application-guide-video-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  padding: 2rem 1rem;
}

.application-guide-video-box {
  background: rgba(0, 0, 0, 0.5); /* 50% black transparent */
  padding: 40px 30px;
  border-radius: 12px;
  max-width: 720px;
}

/* Artwork Guidelines hero text box - 75% opaque as requested */
.artwork-guidelines-page .application-guide-video-box {
  background: rgba(0, 0, 0, 0.75);
}

/* Alternating sections will override as needed */

/* ============================================
   BUILD A GANG SHEET PAGE - Full Sales Landing
   Cyan accent theme, hero typography, clean tables
   ============================================ */

.build-gang-sheet-page-content {
  background: #000;
  color: #fff;
}

/* Hero */
.build-gang-hero {
  position: relative;
  width: 100%;
  min-height: 36vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.build-gang-hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Mobile: Replace video with static poster for performance */
@media (max-width: 768px) {
  .build-gang-hero__video {
    display: none;
  }
}

.build-gang-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.65)
  );
  z-index: 1;
}

/* Keep the original padding styles for the content area if needed */
.build-gang-hero {
  padding: 4.5rem 0 3.75rem;
  border-bottom: 1px solid #222;
}

.build-gang-hero__content-box {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.65);
  padding: 42px 36px;
  border-radius: 14px;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #1f1f1f;
}

.build-gang-hero__headline {
  font-family: var(--font-heading);
  font-size: 3.1rem;
  line-height: 1.0;
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: #fff;
}

.build-gang-hero__subheadline {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  letter-spacing: 2.5px;
  color: #00FFFF;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

/* Meta line under the main subheadline - same cyan hero font treatment, centered */
.build-gang-hero__meta-line {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  letter-spacing: 2px;
  color: #00FFFF;
  text-transform: uppercase;
  margin: 0 0 0.9rem 0;
  line-height: 1.15;
}

.build-gang-hero__ctas {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* Large cyan buttons */
.btn-large {
  padding: 16px 34px;
  font-size: 1.05rem;
  letter-spacing: 2.5px;
}

.btn-cyan-outline {
  background: transparent;
  color: #00FFFF;
  border: 2px solid #00FFFF;
}

.btn-cyan-outline:hover {
  background: #00FFFF;
  color: #000;
  border-color: #00FFFF;
}

/* Benefits grid (light section) */
.build-gang-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  max-width: 1080px;
  margin: 0 auto;
}

/* Bottom row: 2 cards perfectly centered under the top 3 */
.build-gang-benefits-grid .benefits-bottom-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 1.1rem;
}

.build-gang-benefits-grid .benefits-bottom-row .benefit-card {
  width: 31%;
}

/* Mobile: Make Fast Turnaround + Drag & Drop boxes match the ones above (uniform full-width stack) */
@media (max-width: 900px) {
  .build-gang-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .build-gang-benefits-grid .benefits-bottom-row {
    display: contents; /* Let the two cards flow naturally in the grid instead of being a special centered row */
  }

  .build-gang-benefits-grid .benefits-bottom-row .benefit-card {
    width: auto;
  }
}

@media (max-width: 560px) {
  .build-gang-benefits-grid {
    grid-template-columns: 1fr;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.benefit-card {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 1.1rem 1.15rem;
  text-align: center;
}

.benefit-card strong {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: 1px;
  color: #111;
  display: block;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.benefit-card p {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.55;
  margin: 0;
}

/* Steps section - 3 on top, 2 centered below (matching benefits layout) */
.how-it-works__grid.build-gang-steps {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

/* Bottom row wrapper for the last 2 steps - perfectly centered */
.how-it-works-bottom-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 1.8rem;
}

.how-it-works-bottom-row .step {
  width: 31%;
}

/* Mobile (build gang sheet page): Force all 5 "How Building a Gang Sheet Works" boxes
   into a clean vertical 1-column stack, one on top of another, matching the uniform
   card treatment of the "Why Choose" section above it. 90% width per mobile standard. */
@media (max-width: 900px) {
  .build-gang-sheet-page .how-it-works__grid.build-gang-steps,
  .build-gang-sheet-page .build-gang-steps {
    grid-template-columns: 1fr !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    gap: 1.5rem;
  }

  /* Flatten the bottom-row wrapper so the last 2 steps become regular grid children
     and participate in the single-column flow — no more 2-col or special widths. */
  .build-gang-sheet-page .how-it-works-bottom-row {
    display: contents !important;
  }

  .build-gang-sheet-page .how-it-works-bottom-row .step {
    width: 100% !important;
  }
}

.build-gang-steps .step {
  background-color: #1a1a1a;
  border-color: #2a2a2a;
}

.build-gang-steps .step h3 {
  color: #fff;
}

.build-gang-steps .step p {
  color: #ddd;
}

/* Transfers by Size - How It Works 2x2 grid */
.transfers-size-how-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem;
  max-width: 980px;
  margin: 0 auto 2rem;
}

@media (max-width: 768px) {
  .transfers-by-size-page .transfers-size-how-grid {
    grid-template-columns: 1fr !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Fix step numbers being cut off on the left edge — extra padding like other step sections */
  .transfers-by-size-page .transfers-size-how-grid .step {
    padding-left: 1.6rem !important;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  /* Slightly reduce the left overhang of the yellow numbers on very tight mobile */
  .transfers-by-size-page .transfers-size-how-grid .step__number {
    left: -14px !important;
  }
}

.transfers-size-how-grid .step {
  position: relative;
  background-color: #1a1a1a;
  border: 2px solid #FFFF00;
  border-radius: 8px;
  padding: 1rem;
  color: #fff;
  text-align: center;
}

.transfers-size-how-grid .step__number {
  position: absolute;
  top: -18px;
  left: -18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFF00;
  color: #111 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  border: 2px solid #111;
  z-index: 1;
}

.transfers-size-how-grid .step h3 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  font-family: var(--font-heading);
  color: #FFFF00 !important;
}

.transfers-size-how-grid .step p {
  /* Readable body font for step descriptions */
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.9rem;
  color: #fff !important;
  line-height: 1.5;
}

/* Transfers by Size page - Yellow outline on How It Works boxes (matching Build Gang Sheet cyan style but yellow) */
.transfers-by-size-page .transfers-size-how-grid .step {
  border: 2px solid #FFFF00;
}

/* Pricing table */
.pricing-table-wrapper {
  max-width: 820px;
  margin: 0 auto 1.25rem;
  overflow-x: auto;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  color: #111;
  font-size: 1rem;
  border: 2px solid #000;
  border-radius: 8px;
  overflow: hidden;
}

.pricing-table th {
  background: #000;
  color: #fff;
  font-family: var(--font-heading);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 18px;
  text-align: left;
  font-size: 0.95rem;
}

.pricing-table td {
  padding: 13px 18px;
  border-top: 1px solid #ddd;
  vertical-align: middle;
}

.pricing-table tr:nth-child(even) {
  background: #f7f7f7;
}

.pricing-table strong {
  font-size: 1.1rem;
}

.pricing-note {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  background: #f1f1f1;
  color: #222;
  padding: 0.85rem 1.25rem;
  border-radius: 6px;
  font-size: 0.97rem;
}

/* File requirements - light section (inverted) */
.file-requirements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 860px;
  margin: 0 auto 1.5rem;
}

@media (max-width: 620px) {
  .file-requirements-grid {
    grid-template-columns: 1fr;
  }
}

.req-card {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  padding: 1rem 1.1rem;
  border-radius: 8px;
}

.req-card strong {
  font-family: var(--font-heading);
  letter-spacing: 1px;
  color: #111;
  display: block;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  font-size: 1.02rem;
}

.req-card p {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.55;
  margin: 0;
}

.pro-tip-box {
  max-width: 780px;
  margin: 0 auto;
  background: #f1f1f1;
  border-left: 5px solid #00FFFF;
  padding: 1rem 1.35rem;
  border-radius: 6px;
  color: #222;
  font-size: 0.98rem;
}

.pro-tip-box strong {
  color: #111;
  letter-spacing: 1px;
}

/* FAQ - dark section matching Build a Gang Sheet cyan theme */
.build-gang-faq .faq__item {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.build-gang-faq .faq__item summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  letter-spacing: 0.75px;
  text-transform: none;
  color: #00FFFF;
  background: #1a1a1a;
  transition: background 0.2s ease;
}

.build-gang-faq .faq__item summary:hover {
  background: #222;
}

.build-gang-faq .faq__item[open] summary {
  color: #00FFFF;
  border-bottom: 1px solid #333;
}

.build-gang-faq .faq__item p {
  padding: 1rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #ddd;
  line-height: 1.6;
  margin: 0;
}

/* (Final CTA removed) */

/* ============================================
   BUILD A GANG SHEET PAGE - Typography Consistency
   Force hero font + uppercase + tracking like the rest of the site
   ============================================ */

.build-gang-sheet-page-content h2 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 1rem;
}

/* Light sections (white background) */
.build-gang-sheet-page-content .light-section h2 {
  color: #111;
}

/* Dark sections */
.build-gang-sheet-page-content .dark-section h2 {
  color: #fff;
}

/* Intro text under headings */
.build-gang-sheet-page-content .section-intro {
  max-width: 580px;
  margin: 0 auto;
  color: #333;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 0.95rem;
  line-height: 1.3;
}

/* FAQ styles are defined in the dark section block above to match How Building a Gang Sheet Works */

/* (Final CTA removed) */

/* ============================================
   TRANSFERS BY SIZE - HERO (Video Background)
   ============================================ */

.transfers-size-hero {
  position: relative;
  width: 100%;
  min-height: 36vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.transfers-size-hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Mobile: Replace video with static poster for performance */
@media (max-width: 768px) {
  .transfers-size-hero__video {
    display: none;
  }

  .transfers-size-hero {
    background-image: url('transfers-size-hero-poster.jpg');
  }
}

.transfers-size-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.65)
  );
  z-index: 1;
}

.transfers-size-hero__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  color: #ffffff;
  text-align: center;
}

.transfers-size-hero__content-box {
  background: rgba(0, 0, 0, 0.55);
  padding: 42px 36px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.transfers-size-hero__headline {
  font-family: var(--font-heading);
  font-size: 3.1rem;
  line-height: 1.05;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  color: #ffffff;
}

body.transfers-by-size-page .transfers-size-hero__subheadline {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: 1.5px;
  margin-bottom: 1.75rem;
  opacity: 0.95;
  color: #f0f0f0 !important;
}

.transfers-size-hero__ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 768px) {
  .transfers-size-hero,
  .build-gang-hero,
  .hero,
  .application-guide-video-wrapper {
    min-height: 40vh;
  }

  /* Hero text sizes and content-box padding are now handled by the unified mobile hero block above for consistency across the site */

  /* 90% max-width on content only for Transfers by Size page on mobile.
     Full-bleed section backgrounds (e.g. .size-chart-section dark band, hero, etc.)
     must remain 100% width and touch the edges. Only inner containers + cards/grids get 90%. */
  .transfers-by-size-page .container,
  .transfers-by-size-page .rich-text,
  .transfers-by-size-page .transfers-size-how-grid,
  .transfers-by-size-page .size-chart-grid,
  .transfers-by-size-page .placement-note,
  .transfers-by-size-page .transfers-size-comparison-grid {
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Extra safety for the Why Transfers by Size rich-text section (dynamic ID) — content only */
  body.transfers-by-size-page [id$="__why_by_size"] .rich-text,
  body.transfers-by-size-page [id$="__why_by_size"] .container,
  body.transfers-by-size-page [id$="__why_by_size"] .rte {
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Explicitly keep full-bleed section backgrounds at 100% width on mobile
     (they must touch the edges; only the content inside gets 90%). */
  .transfers-by-size-page .size-chart-section {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Transfers by Size - Size Chart dark version */
.size-chart-section .size-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  .transfers-by-size-page .size-chart-section .size-chart-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 0.9rem;
  }

  /* Common Sizes cards - uniform padding on mobile 2x3 stack */
  .transfers-by-size-page .size-chart-section .size-card {
    padding: 0.85rem 0.7rem !important;
  }

  /* Pro Tip placement note sits full underneath the 2x3 grid, matching width and card treatment */
  .transfers-by-size-page .size-chart-section .placement-note {
    max-width: 100% !important; /* full width of the 90% content area, while the dark .size-chart-section background stays 100% */
    margin: 1.25rem auto 0 !important;
    padding: 0.9rem 1rem !important;
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    text-align: center !important;
  }
}

.size-chart-section .size-card {
  background: #1a1a1a;
  border: 1px solid #333;
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
}

.size-chart-section .size-card strong {
  color: #FFFF00;
  font-family: var(--font-heading);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.size-chart-section .size-card p {
  color: #fff !important;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

/* Ensure all text in the dark size-chart section is white, overriding page-wide dark-text rules */
.size-chart-section p,
.size-chart-section .placement-note p {
  color: #fff !important;
}

/* Default rich-text color on Transfers by Size page - light for dark theme.
   The #shopify-section-why_by_size rules + size chart overrides take precedence for their areas. */
.transfers-by-size-page .rich-text,
.transfers-by-size-page .rich-text__text,
.transfers-by-size-page .rte,
.transfers-by-size-page .rich-text p,
.transfers-by-size-page .rich-text li,
.transfers-by-size-page .rich-text strong,
.transfers-by-size-page .rich-text h1,
.transfers-by-size-page .rich-text h2,
.transfers-by-size-page .rich-text h3,
.transfers-by-size-page .rich-text h4,
.transfers-by-size-page .rich-text h5,
.transfers-by-size-page .rich-text h6 {
  color: #e8e8e8 !important;
}

/* Also override the broad page-content color rule for this page's light content areas */
.transfers-by-size-page .build-gang-sheet-page-content {
  color: #111;
}

/* Default light text for paragraphs on the dark Transfers by Size page theme.
   Specific light bands or rich-text areas can override further if needed. */
body.transfers-by-size-page p,
body.transfers-by-size-page li {
  color: #e8e8e8 !important;
}

/* Override for the dark size-chart section: force white text on its paragraphs (higher specificity + later in file) */
body.transfers-by-size-page .size-chart-section p,
body.transfers-by-size-page .size-chart-section .placement-note p {
  color: #fff !important;
}

/* Why Transfers by Size intro text - yellow accent (as requested) */
body.transfers-by-size-page #shopify-section-why_by_size .rich-text p,
body.transfers-by-size-page #shopify-section-why_by_size .rich-text strong,
body.transfers-by-size-page #shopify-section-why_by_size .rich-text__text p,
body.transfers-by-size-page #shopify-section-why_by_size .rich-text__text strong,
body.transfers-by-size-page #shopify-section-why_by_size .rte p,
body.transfers-by-size-page #shopify-section-why_by_size .rte strong {
  font-family: var(--font-body) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #FFFF00 !important;
}

/* Why section title - now black to match the paragraph (previously forced yellow) */

/* Center the "Simple process..." line on the Transfers by Size page */
#shopify-section-why_process_line .rich-text__text,
#shopify-section-why_process_line .rte {
  text-align: center;
}

/* Build Gang Sheet Page - Cyan outlines on boxes */
.build-gang-sheet-page .benefit-card,
.build-gang-sheet-page .build-gang-steps .step,
.build-gang-sheet-page .how-it-works-bottom-row .step,
.build-gang-sheet-page .req-card {
  border-color: #00FFFF;
  border-width: 2px;
}

/* Small responsive tweaks for the whole page */
@media (max-width: 768px) {
  /* Hero text sizes are now handled by the unified mobile hero block above for consistency */

  /* Ensure the 5 "How Building a Gang Sheet Works" boxes are stacked vertically
     (one directly on top of the next) with uniform full-width cards — exactly
     matching the treatment and alignment of the "Why Choose Our Gang Sheet Builder"
     section reviewed above. */
  .build-gang-sheet-page .how-it-works__grid.build-gang-steps,
  .build-gang-sheet-page .build-gang-steps {
    grid-template-columns: 1fr !important;
    max-width: 90% !important;
    margin: 0 auto !important;
  }

  .build-gang-sheet-page .how-it-works-bottom-row {
    display: contents !important;
  }

  .build-gang-sheet-page .how-it-works-bottom-row .step {
    width: 100% !important;
  }
}

.how-to-apply-page .how-to-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 0.75rem;
}

.how-to-apply-page .requirements-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 90%;
  margin: 0 auto;
}

.how-to-apply-page .how-to-card {
  background: #fff;
  border: 1px solid #ddd;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  text-align: center;
}

.how-to-apply-page .how-to-card p {
  color: #222;
  font-size: 0.9rem;
  margin: 0;
}

.how-to-apply-page .how-to-card strong {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 0.2rem;
  font-size: 1.2rem;
  color: #FF2E63; /* Magenta highlight */
}

/* Old vertical layout styles removed - now using 3x2 grid above */

.how-to-apply-page .app-step {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid #ddd;
}

.how-to-apply-page .app-step__number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: #FF2E63;
  color: #111;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.how-to-apply-page .app-step h3 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
  color: #111;
}

.how-to-apply-page .app-step p {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  color: #333;
  line-height: 1.55;
  margin: 0;
}

.how-to-apply-page .tips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  max-width: 75%;
  margin: 0 auto;
}

.how-to-apply-page .washing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  max-width: 75%;
  margin: 0 auto;
}

.how-to-apply-page .washing-grid .tip-card:last-child {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 48%; /* centers it under the two above, matching single card width */
}

.how-to-apply-page .tip-card {
  background: #fff;
  border: 1px solid #ddd;
  padding: 1.25rem 1rem;
  border-radius: 8px;
  text-align: center;
  min-height: 120px; /* helps make boxes taller and more consistent */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.how-to-apply-page .fabric-card {
  background: #ffffff;
  border: 1px solid #ddd;
  color: #222;
}

.how-to-apply-page .tip-card h4 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 0.2rem;
  font-size: 1.2rem;
  color: #FF2E63; /* Magenta highlight */
}

.how-to-apply-page .tip-card p {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.9rem;
  color: #222;
  line-height: 1.55;
  margin: 0;
}

.how-to-apply-page .fabric-card strong {
  color: #FF2E63;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Additional hero font on long-form text */
.how-to-apply-page .section p {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.6;
}

/* Hero Font Matching for How to Apply Page */
.how-to-apply-page h1,
.how-to-apply-page h2 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 3px;
}

.how-to-apply-page .app-step h3,
.how-to-apply-page .trouble-item strong,
.how-to-apply-page .how-to-card strong,
.how-to-apply-page .fabric-card strong {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Step-by-Step Application - 3x2 grid matching other numbered step boxes */
.how-to-apply-page .application-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 85%;
  margin: 0 auto;
}

.how-to-apply-page .app-step {
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0.75rem 0.75rem 0.75rem;
  text-align: center;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 145px;
}

.how-to-apply-page .app-step__number {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 32px;
  height: 32px;
  background: #FF2E63;
  color: #111;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 2;
}

.how-to-apply-page .app-step__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: 6px; /* reduced to even out space above heading */
  text-align: center;
}

.how-to-apply-page .app-step h3 {
  font-size: 1.05rem;
  margin: 0.2rem 0 0.1rem;
  letter-spacing: 1px;
}

.how-to-apply-page .app-step p {
  font-size: 0.85rem;
  line-height: 1.35;
  margin: 0;
}

/* Troubleshooting - match other FAQ sections (accordion style with magenta accent) */
.how-to-apply-page .how-to-apply-faq .faq__item {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.how-to-apply-page .how-to-apply-faq .faq__item summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  letter-spacing: 0.75px;
  text-transform: none;
  color: #FF2E63;
  background: #1a1a1a;
  transition: background 0.2s ease;
}

.how-to-apply-page .how-to-apply-faq .faq__item summary:hover {
  background: #222;
}

.how-to-apply-page .how-to-apply-faq .faq__item[open] summary {
  color: #FF2E63;
  border-bottom: 1px solid #333;
}

.how-to-apply-page .how-to-apply-faq .faq__item p {
  padding: 1rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #ddd;
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   ARTWORK GUIDELINES - How to Prepare Your Files (Accordion)
   Styled like the Troubleshooting FAQ but with proper <ol> steps.
   Uses the existing .how-to-apply-faq dark card + magenta accent styles.
   ============================================================ */
.how-to-apply-page .prepare-tools-accordion .faq__item ol {
  padding: 0.75rem 1.25rem 1.25rem;
  margin: 0;
  color: #ddd;
  font-size: 0.9rem;
  line-height: 1.55;
  list-style-position: inside;
}

.how-to-apply-page .prepare-tools-accordion .faq__item[open] ol {
  padding-top: 1rem;
}

.how-to-apply-page .prepare-tools-accordion .faq__item ol li {
  margin-bottom: 0.4rem;
}

/* The "Free & Popular Alternatives" heading inside the accordion */
.how-to-apply-page .prepare-tools-accordion .prepare-alt-heading {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #aaa;
  font-size: 1.15rem;
  margin: 1.25rem 0 0.5rem;
  text-align: center;
}

/* Fabric Guide - match the Step-by-Step 3x2 card format */
.how-to-apply-page .fabric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 60%;
  margin: 0 auto;
}

.how-to-apply-page .fabric-card {
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem 0.9rem 0.9rem;
  text-align: center;
}

.how-to-apply-page .fabric-card strong {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1.15rem;
  color: #FF2E63;
}

.how-to-apply-page .fabric-card p {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   ARTWORK GUIDELINES PAGE - How to Prepare Your Files
   Detailed tool cards (Illustrator / Photoshop / Canva + alternatives)
   Matches dark card aesthetic used elsewhere, magenta accents,
   proper heading typography, good spacing, responsive.
   ============================================================ */

.how-to-apply-page .prepare-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.35rem;
  max-width: 90%;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .how-to-apply-page .prepare-tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .how-to-apply-page .prepare-tools-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.how-to-apply-page .prepare-tool-card {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 1.35rem 1.2rem 1.1rem;
  color: #fff;
  text-align: left;
}

.how-to-apply-page .prepare-tool-card--alt {
  padding: 1.1rem 1rem 0.9rem; /* Slightly tighter for the compact alt row */
}

.how-to-apply-page .prepare-tool-title {
  display: block;
  margin-bottom: 0.7rem;
  color: #FF2E63;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1.25px;
  font-size: 1.15rem;
  line-height: 1.15;
}

.how-to-apply-page .prepare-tool-card ol {
  margin: 0;
  padding-left: 0.95rem;
  line-height: 1.55;
  color: #ddd;
  font-size: 0.9rem;
  text-align: left;
}

.how-to-apply-page .prepare-tool-card ol li {
  margin-bottom: 0.35rem;
}

.how-to-apply-page .prepare-tool-card ol li:last-child {
  margin-bottom: 0;
}

/* Alternatives heading and compact grid */
.how-to-apply-page .prepare-alt-section {
  margin-top: 2rem;
  text-align: center;
}

.how-to-apply-page .prepare-alt-heading {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #aaa;
  font-size: 1.35rem;
  margin-bottom: 0.85rem;
}

.how-to-apply-page .prepare-tools-grid--compact {
  max-width: 90%;
  margin: 0 auto;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .how-to-apply-page .prepare-tools-grid--compact {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .how-to-apply-page .prepare-tools-grid--compact {
    grid-template-columns: 1fr;
  }
}

/* Closing core principles note */
.how-to-apply-page .prepare-core-note {
  color: #888;
  font-size: 0.9rem;
  max-width: 90%;
  margin: 1.5rem auto 0;
  line-height: 1.5;
  text-align: center;
}

/* ============================================================
   ARTWORK GUIDELINES - WHAT TO AVOID (Black + Yellow Warning Theme)
   Strong caution styling so people instantly recognize this as the danger zone.
   90% width to match Requirements + Prepare sections.
   ============================================================ */

.how-to-apply-page .what-to-avoid-section .requirements-grid,
.how-to-apply-page .what-to-avoid-section .what-to-avoid-grid {
  max-width: 90%;
  margin: 0 auto;
  gap: 1rem;
}

.how-to-apply-page .what-to-avoid-section .avoid-card {
  background: #1a1a1a;
  border: 2px solid #FFFF00;
  border-radius: 8px;
  padding: 1rem 1.1rem;
  text-align: center;
  color: #fff;
}

.how-to-apply-page .what-to-avoid-section .avoid-card strong {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1.15rem;
  color: #FFFF00;
}

.how-to-apply-page .what-to-avoid-section .avoid-card p {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.9rem;
  color: #ddd;
  line-height: 1.5;
  margin: 0;
}

/* Responsive tweaks for the warning cards */
@media (max-width: 768px) {
  .how-to-apply-page .what-to-avoid-section .avoid-card {
    padding: 0.85rem 0.9rem;
  }
  .how-to-apply-page .what-to-avoid-section .avoid-card strong {
    font-size: 1.05rem;
  }
}

/* Warning section CTA button - White outline / black bg → solid white on hover */
.how-to-apply-page .what-to-avoid-section .avoid-cta-btn {
  display: inline-block;
  background: #000000;
  color: #ffffff;
  border: 2px solid #ffffff;
  padding: 0.85rem 2rem;
  font-size: 0.95rem;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  transition: all 0.2s ease;
  border-radius: 4px; /* subtle rounding to match site buttons */
}

.how-to-apply-page .what-to-avoid-section .avoid-cta-btn:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

/* Desktop: 50% transparent black box around buttons, outlined black buttons */
.how-to-apply-page .final-cta-buttons .btn-cyan {
  background: #000 !important;
  color: #00FFFF !important;
  border: 2px solid #00FFFF !important;
}

.how-to-apply-page .final-cta-buttons .btn-cyan:hover {
  background: #00FFFF !important;
  color: #000 !important;
  border-color: #00FFFF !important;
}

.how-to-apply-page .final-cta-buttons .btn-yellow {
  background: #000 !important;
  color: #FFFF00 !important;
  border: 2px solid #FFFF00 !important;
}

.how-to-apply-page .final-cta-buttons .btn-yellow:hover {
  background: #FFFF00 !important;
  color: #000 !important;
  border-color: #FFFF00 !important;
}

.how-to-apply-page .final-cta-buttons {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.how-to-apply-page .final-cta-buttons .final-cta-box {
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-radius: 8px;
  display: flex;
  gap: 1rem;
}

.how-to-apply-page .final-cta-buttons .final-cta-box a {
  padding: 12px 30px;
  font-size: 0.95rem;
  text-align: center;
  min-width: 180px;
}

/* ============================================================
   HOW TO APPLY PAGE - MOBILE OPTIMIZATION
   90% content width (backgrounds stay 100% full-bleed).
   Stack all major box sections vertically for mobile.
   Matches pattern from Home, Build Gang Sheet, Transfers, Artwork.
   ============================================================ */
@media (max-width: 768px) {
  /* Core 90% width for content on How to Apply (never touch the full-bleed background wrappers) */
  .how-to-apply-page .container,
  .how-to-apply-page .how-to-grid,
  .how-to-apply-page .application-steps,
  .how-to-apply-page .tips-grid,
  .how-to-apply-page .fabric-grid,
  .how-to-apply-page .washing-grid,
  .how-to-apply-page .how-to-apply-faq {
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Hero styles now come from the unified mobile hero block above for site-wide consistency.
     (Keeping this comment as a note; the specific override below was consolidated.) */

  /* What You'll Need - 2x3 grid (2 columns) on mobile */
  .how-to-apply-page .how-to-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: none !important;
    gap: 0.75rem;
  }

  /* Step-by-Step Application - stack to single column vertical */
  .how-to-apply-page .application-steps {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  /* Prevent overlapping numbers from being cut off on stacked mobile cards */
  .how-to-apply-page .app-step {
    padding-left: 1.5rem !important;
    min-height: auto !important;
  }

  .how-to-apply-page .app-step__number {
    left: -12px !important;
    top: -12px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 0.95rem !important;
  }

  /* Pro Tips for Best Results - stack vertically */
  .how-to-apply-page .tips-grid {
    grid-template-columns: 1fr !important;
    max-width: 90% !important;
    gap: 0.85rem;
  }

  /* Fabric Guide - stack vertically */
  .how-to-apply-page .fabric-grid {
    grid-template-columns: 1fr !important;
    max-width: 90% !important;
    gap: 0.85rem;
  }

  /* Washing & Care - stack vertically (remove previous 2-col spanning) */
  .how-to-apply-page .washing-grid {
    grid-template-columns: 1fr !important;
    max-width: 90% !important;
    gap: 0.85rem;
  }

  .how-to-apply-page .washing-grid .tip-card:last-child {
    grid-column: auto !important;
    justify-self: stretch !important;
    max-width: 100% !important;
  }

  /* Make the boxes use up the full 90% width on mobile.
     Reduce horizontal padding so the cards themselves fill closer to the edges of the 90% container.
     Gaps are already tightened in the grid rules above. */
  .how-to-apply-page .how-to-card {
    padding: 0.5rem 0.45rem !important;
  }

  /* Step boxes: keep the required left padding for the overlapping number, but make the card content use the width */
  .how-to-apply-page .app-step {
    padding-right: 0.5rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .how-to-apply-page .tip-card {
    padding: 0.75rem 0.55rem !important;
  }

  .how-to-apply-page .fabric-card {
    padding: 0.65rem 0.5rem !important;
  }

  /* Ready to Get Started? CTA buttons - mobile stacked + solid fills */
  .how-to-apply-page .final-cta-buttons {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
  }

  .how-to-apply-page .final-cta-buttons .final-cta-box {
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    max-width: 320px;
  }

  .how-to-apply-page .final-cta-buttons .final-cta-box a {
    width: 100%;
    padding: 14px 24px;
    font-size: 0.95rem;
    text-align: center;
  }

  /* Build Your Gang Sheet - cyan outline, black button with cyan text */
  .how-to-apply-page .final-cta-buttons .final-cta-box .btn-cyan {
    background: #000 !important;
    color: #00FFFF !important;
    border: 2px solid #00FFFF !important;
  }

  .how-to-apply-page .final-cta-buttons .final-cta-box .btn-cyan:hover {
    background: #00FFFF !important;
    color: #000 !important;
    border-color: #00FFFF !important;
  }

  /* Transfers By Size - yellow outline, black button with yellow text */
  .how-to-apply-page .final-cta-buttons .final-cta-box .btn-yellow {
    background: #000 !important;
    color: #FFFF00 !important;
    border: 2px solid #FFFF00 !important;
  }

  .how-to-apply-page .final-cta-buttons .final-cta-box .btn-yellow:hover {
    background: #FFFF00 !important;
    color: #000 !important;
    border-color: #FFFF00 !important;
  }
}

/* Black & Yellow Caution / Hazard Tape (above + below What to Avoid section) */
.how-to-apply-page .what-to-avoid-section .caution-tape {
  height: 26px;
  width: 100%;
  background-repeat: repeat;
}

.how-to-apply-page .what-to-avoid-section .caution-tape--top {
  background-image: repeating-linear-gradient(
    135deg,
    #000000 0 11px,
    #FFFF00 11px 22px
  );
}

.how-to-apply-page .what-to-avoid-section .caution-tape--bottom {
  background-image: repeating-linear-gradient(
    -135deg,
    #000000 0 11px,
    #FFFF00 11px 22px
  );
}

/* ============================================================
   ARTWORK GUIDELINES - MOBILE STACKING + 90% WIDTH
   All boxes/cards in Requirements, How to Prepare, and What to Avoid
   now stack vertically (1 column) with 90% max-width content.
   Backgrounds (white section + two black full-bleed sections) stay 100% width.
   Follows the exact mobile pattern used on Home, Build Gang Sheet, and Transfers by Size.
   ============================================================ */
@media (max-width: 768px) {
  .artwork-guidelines-page .container {
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Artwork Requirements - 2-wide (2 columns) on mobile (8 cards = clean 4 rows) */
  .artwork-guidelines-page .requirements-grid:not(.what-to-avoid-grid) {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    gap: 0.75rem;
  }

  /* How to Prepare Your Files - main 3 cards + 3 alt cards (both grids) */
  .artwork-guidelines-page .prepare-tools-grid,
  .artwork-guidelines-page .prepare-tools-grid--compact {
    grid-template-columns: 1fr !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    gap: 1rem;
  }

  /* What to Avoid - 4 warning cards stack vertically */
  .artwork-guidelines-page .what-to-avoid-section .requirements-grid,
  .artwork-guidelines-page .what-to-avoid-section .what-to-avoid-grid {
    grid-template-columns: 1fr !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    gap: 0.85rem;
  }

  /* Tighter, consistent padding for stacked cards on mobile */
  .artwork-guidelines-page .how-to-card,
  .artwork-guidelines-page .prepare-tool-card,
  .artwork-guidelines-page .avoid-card {
    padding: 0.9rem 1rem !important;
  }
}

/* ============================================================
   TRANSFERS BY SIZE - COMPARISON & ARTWORK BOXED SECTIONS
   Yellow outlined dark cards (modeled after the step boxes)
   Full theme review: consistent yellow accents, proper fonts,
   readable body text on dark cards, good spacing rhythm.
   ============================================================ */

/* Strong override to force black text on the Why Transfers by Size paragraph (highest specificity + end of file) */
body.transfers-by-size-page #shopify-section-why_by_size p,
body.transfers-by-size-page #shopify-section-why_by_size .rich-text p,
body.transfers-by-size-page #shopify-section-why_by_size .rte p,
body.transfers-by-size-page #shopify-section-why_by_size .rich-text__text p {
  color: #111 !important;
}

/* Why section title - black (title protection removed per request) */

/* Section titles for the new comparison/artwork area (on dark page bg) */
.transfers-by-size-page .transfers-size-section-title {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1.25px;
  font-size: 1.35rem;
  color: #FFFF00;
  text-align: center;
  margin: 2.75rem auto 1.1rem;
  max-width: 980px;
  padding: 0 1rem;
}

/* Wrapper for the whole comparison + artwork block */
.transfers-size-comparison-wrapper {
  max-width: 980px;
  margin: 0 auto 1.5rem;
  padding: 0 1rem;
}

/* 2-column comparison grid (By Size vs Gang Sheet) */
.transfers-size-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem;
  margin-bottom: 0.75rem; /* Reduced since note below was removed */
}

@media (max-width: 768px) {
  .transfers-by-size-page .transfers-size-comparison-grid {
    grid-template-columns: 1fr !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Note: .comparison-card styles removed - "By Size or Gang Sheet?" items 
   now use simple .comparison-item (no boxes) inside the light panel. */

/* Note: comparison-note styles removed (text was deleted from "By Size or Gang Sheet?" section) */

/* Old generic .comparison-note link styles superseded by the specific
   .build-gang-link (cyan) and .contact-link (black) rules inside
   .transfers-size-decision-light below. Left for reference only. */

/* Artwork Made Easy - single prominent card (centered text) */
.artwork-card {
  background-color: #1a1a1a;
  border: 2px solid #FFFF00;
  border-radius: 8px;
  padding: 1.5rem 1.35rem;
  color: #fff;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}

.artwork-card h3 {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  text-transform: none; /* Sentence case for this longer lead line */
  font-family: var(--font-body);
  color: #FFFF00;
  font-weight: 600;
}

.artwork-card p {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.95rem;
  color: #ddd;
  line-height: 1.55;
  margin: 0 0 0.65rem;
}

.artwork-card p:last-of-type {
  margin-bottom: 0.35rem;
}

.artwork-card .artwork-link {
  margin-top: 0.4rem;
  margin-bottom: 0;
}

.artwork-card .artwork-link a {
  color: #FFFF00;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.75px;
  font-size: 0.95rem;
  text-decoration: none;
}

.artwork-card .artwork-link a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Responsive padding tweaks for the new boxes on smaller screens */
@media (max-width: 768px) {
  .transfers-by-size-page .transfers-size-section-title {
    font-size: 1.2rem;
    margin-top: 2.1rem;
    margin-bottom: 0.85rem;
  }

  body.transfers-by-size-page .artwork-made-easy-title {
    font-size: 1.8rem !important;
  }

  .artwork-card {
    padding: 1.2rem 1rem;
  }

  .transfers-size-comparison-wrapper {
    padding: 0 0.75rem;
  }
}

/* Safety overrides for dark cards (Artwork Made Easy etc.) */
body.transfers-by-size-page .artwork-card p {
  color: #ddd !important;
}

body.transfers-by-size-page .artwork-card h3 {
  color: #FFFF00 !important;
}

/* "BY SIZE OR GANG SHEET?" - Reverted to dark boxes, no outer encompassing box */
.transfers-by-size-page .transfers-size-decision-light {
  background: transparent;
  padding: 0;
  margin: 2.5rem 0 1.5rem;
  border-radius: 0;
  box-shadow: none;
}

/* Title above the two boxes */
.transfers-by-size-page .transfers-size-decision-light .transfers-size-section-title {
  color: #111 !important;
  font-size: 2.2rem !important;
  margin-top: 0;
  margin-bottom: 1rem;
}

/* The two boxes - dark cards with yellow border (reverted) */
.transfers-by-size-page .transfers-size-decision-light .transfers-size-comparison-grid .comparison-card {
  background-color: #1a1a1a;
  border: 2px solid #FFFF00;
  border-radius: 8px;
  padding: 1.25rem 1.1rem;
  color: #fff;
  text-align: center;
}

.transfers-by-size-page .transfers-size-decision-light .comparison-card h3 {
  margin: 0 0 0.55rem;
  font-size: 1.08rem;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  font-family: var(--font-heading);
  color: #FFFF00;
}

.transfers-by-size-page .transfers-size-decision-light .comparison-card p {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.95rem;
  color: #ddd;
  line-height: 1.55;
  margin: 0;
}

/* Ready to Order? title - matches By Size or Gang Sheet? title */
body.transfers-by-size-page .transfers-size-final-cta-title {
  color: #111 !important;
  font-size: 2.2rem !important;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

/* Ready to Order? card - dark with yellow border (title is now outside) */
.transfers-by-size-page .transfers-size-final-cta {
  background-color: #1a1a1a;
  border: 2px solid #FFFF00;
  border-radius: 8px;
  padding: 1.5rem 1.5rem 2rem;
  color: #fff;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 1.5rem;
}

.transfers-by-size-page .transfers-size-final-cta p {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.95rem;
  color: #ddd;
  line-height: 1.55;
  margin: 0 0 1.25rem;
}

/* Responsive adjustments for the decision area */
@media (max-width: 768px) {
  .transfers-by-size-page .transfers-size-decision-light {
    margin-top: 1.75rem;
  }

  .transfers-by-size-page .transfers-size-decision-light .transfers-size-section-title {
    font-size: 1.8rem !important;
  }

  body.transfers-by-size-page .transfers-size-final-cta-title {
    font-size: 1.8rem !important;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
  }
}

/* Specific override: Make only the "Artwork Made Easy" heading black and match FAQ title size */
body.transfers-by-size-page .artwork-made-easy-title {
  color: #111 !important;
  font-size: 2.2rem !important;
}

/* ============================================================
   TRANSFERS BY SIZE - FAQ (matching Common Sizes & Placement Guide theme)
   Dark band, yellow accents, dark card-style items
   ============================================================ */

.transfers-size-faq-list {
  max-width: 860px;
  margin: 0 auto;
}

.transfers-size-faq-item {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.transfers-size-faq-item summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  letter-spacing: 0.75px;
  text-transform: none;
  color: #FFFF00;
  background: #1a1a1a;
  transition: background 0.2s ease;
}

.transfers-size-faq-item summary:hover {
  background: #222;
}

.transfers-size-faq-item[open] summary {
  color: #FFFF00;
  border-bottom: 1px solid #333;
}

.transfers-size-faq-item p {
  padding: 1rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #ddd;
  line-height: 1.6;
  margin: 0;
}

.transfers-size-faq-item a {
  color: #FFFF00;
  text-decoration: underline;
}

.transfers-size-faq-item a:hover {
  color: #fff;
}

.transfers-size-faq-item .app-guide-link {
  color: #FF2E63 !important; /* Magenta for Application Guide link */
}

.transfers-size-faq-item .app-guide-link:hover {
  color: #ff4d7a !important;
}

.transfers-size-faq-item .build-gang-link {
  color: #00FFFF !important; /* Cyan for Build a Gang Sheet link */
}

.transfers-size-faq-item .build-gang-link:hover {
  color: #00cccc !important;
}

/* Responsive */
@media (max-width: 768px) {
  .transfers-size-faq-item summary {
    font-size: 0.98rem;
    padding: 0.9rem 1rem;
  }
  
  .transfers-size-faq-item p {
    padding: 0.9rem 1rem;
    font-size: 0.92rem;
  }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact-page .contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 720px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .contact-page .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-page .contact-card {
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.25rem 1.1rem;
  text-align: center;
}

.contact-page .contact-card strong {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 0.5rem;
  color: #111;
  font-size: 1rem;
}

.contact-page .contact-card a {
  color: #111;
  font-weight: 600;
  text-decoration: none;
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1.05rem;
}

.contact-page .contact-card p {
  font-size: 0.9rem;
  color: #444;
  margin: 0;
  line-height: 1.4;
}

.contact-page .contact-form {
  max-width: 680px;
  margin: 0 auto;
}

.contact-page .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 600px) {
  .contact-page .form-row {
    grid-template-columns: 1fr;
  }
}

.contact-page .form-group {
  margin-bottom: 0;
}

.contact-page .form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ccc;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contact-page .form-group input,
.contact-page .form-group select,
.contact-page .form-group textarea {
  width: 100%;
  padding: 12px 14px;
  background: #1f1f1f;
  border: 1px solid #444;
  color: #fff;
  border-radius: 4px;
  font-size: 1rem;
}

.contact-page .form-group textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-page .form-note {
  background: #1a1a1a;
  border: 1px solid #333;
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  color: #aaa;
}

.contact-page .form-success {
  background: #1a3a1a;
  border: 1px solid #2e7d32;
  color: #a5d6a7;
  padding: 16px;
  border-radius: 6px;
  text-align: center;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.contact-page .contact-quick-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 620px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .contact-page .contact-quick-links {
    grid-template-columns: 1fr;
  }
}

.contact-page .quick-link-card {
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: #111;
  transition: all 0.2s ease;
}

.contact-page .quick-link-card:hover {
  border-color: #FF2E63;
  transform: translateY(-2px);
}

.contact-page .quick-link-card strong {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 4px;
  color: #FF2E63;
}

.contact-page .quick-link-card span {
  font-size: 0.9rem;
  color: #444;
}

/* ============================================================
   CART PAGE STYLES
   ============================================================ */

/* Hide Shopify's "Your Privacy Choices" link (injected by Shopify for CCPA) */
.shopify-privacy-policy,
a[href*="privacychoices"],
.privacy-choices-link {
  display: none !important;
}

.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr 100px 100px 40px;
  gap: 1.5rem;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid #333;
  color: #fff;
}

.cart-item__image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #333;
}

.cart-item__title {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
}

.cart-item__title:hover {
  color: #FF2E63;
}

.cart-item__variant {
  color: #888;
  font-size: 0.85rem;
  margin-top: 4px;
}

.cart-item__price,
.cart-item__total {
  font-weight: 600;
  color: #ddd;
}

.cart-item__quantity input {
  width: 70px;
  padding: 8px;
  background: #1a1a1a;
  border: 1px solid #444;
  color: #fff;
  text-align: center;
  border-radius: 4px;
}

.cart-item__remove a {
  color: #888;
  font-size: 1.5rem;
  text-decoration: none;
  line-height: 1;
}

.cart-item__remove a:hover {
  color: #FF2E63;
}

@media (max-width: 700px) {
  .cart-item {
    grid-template-columns: 70px 1fr 80px;
    grid-template-rows: auto auto;
  }
}

/* Cart page: 90% content width on mobile (backgrounds stay 100% via .section) */
@media (max-width: 768px) {
  .template-cart .container {
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .template-cart .cart-totals {
    padding: 1.25rem !important;
  }

  .template-cart .cart-totals .btn,
  .template-cart .cart-totals button {
    padding: 14px 20px !important;
    font-size: 1rem !important;
  }
}

/* ============================================================
   FINAL AUTHORITATIVE RULE (must be the very last rule in the entire CSS file)

   Forces BOTH the "Why Transfers by Size?" title (h2) AND the paragraph 
   to black (#222) inside the Why section, using a stable attribute selector
   that works with Shopify's dynamic section IDs.
   ============================================================ */
body.transfers-by-size-page [id$="__why_by_size"] h2,
body.transfers-by-size-page [id$="__why_by_size"] .rich-text h2,
body.transfers-by-size-page [id$="__why_by_size"] p,
body.transfers-by-size-page [id$="__why_by_size"] .rich-text p,
body.transfers-by-size-page [id$="__why_by_size"] .rich-text__text p,
body.transfers-by-size-page [id$="__why_by_size"] .rte p,
body.transfers-by-size-page [id$="__why_by_size"] * {
  color: #222 !important;
}

/* The h2 title will now inherit black from the nuclear * rule above (as requested) */