/** Shopify CDN: Minification failed

Line 2851:19 Unexpected "*"
Line 2855:19 Unexpected "*"
Line 2861:19 Unexpected "*"
Line 2866:19 Unexpected "*"
Line 2870:19 Unexpected "*"
Line 2875:19 Unexpected "*"
Line 2893:19 Unexpected "*"
Line 2898:19 Unexpected "*"
Line 2899:19 Unexpected "*"
Line 2903:19 Unexpected "*"

**/
/* =========================================================
   MATT'S PRINT SHOP — FINAL CUSTOM STYLES (ACTIVE)
   ========================================================= */

/* ✅ Place all new custom styles BELOW this line.
   They will always load, no cache issues, guaranteed. */

/* Example: Header gradient + hero heading */
header, .header {
  background: linear-gradient(90deg, #BD884B,rgb(231, 179, 66)) !important;
}

.banner__heading,
.slideshow__heading,
.video-section__heading {
  font-size: 56px !important;
  color: #fff !important;
  text-transform: uppercase;
  text-shadow: 0 4px 18px rgba(0,0,0,0.4);
}
/* ===== MPS — HERO + PRIMARY CTA (global) ===== */
/* Target any instance of our hero by id prefix (no Liquid needed) */
[id^="hero-cta-"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Media & overlay */
[id^="hero-cta-"] .hero-cta__media { position: absolute; inset: 0; }
[id^="hero-cta-"] .hero-cta__video,
[id^="hero-cta-"] .hero-cta__image {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.1) contrast(1.05);
}
[id^="hero-cta-"] .hero-cta__overlay {
  position: absolute; inset: 0;
  /* colour + opacity come from inline CSS variables already set in the section */
  background: var(--overlay, #242833);
  opacity: var(--overlay-opacity, .55);
  pointer-events: none;
}

/* Vertical sizing controlled by variables from the section */
[id^="hero-cta-"] .page-width {
  height: var(--hero-height-desktop, 72vh);
  display: flex; align-items: center;
}
@media (max-width: 750px) {
  [id^="hero-cta-"] .page-width { height: var(--hero-height-mobile, 72vh); }
}

/* Content */
[id^="hero-cta-"] .hero-cta__content {
  position: relative; z-index: 1; color: var(--text, #fff);
  max-width: 760px;
}
[id^="hero-cta-"] .hero-cta__kicker {
  letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  opacity: .9; margin: 0 0 .5rem;
}
[id^="hero-cta-"] .hero-cta__heading {
  font-size: clamp(32px, 4.6vw, 64px); line-height: 1.04;
  margin: 0 0 .6rem; font-weight: 800;
}
[id^="hero-cta-"] .hero-cta__subheading {
  font-size: clamp(16px, 1.4vw, 20px); line-height: 1.6;
  opacity: .95; margin: 0 0 1.4rem;
}

/* Actions */
[id^="hero-cta-"] .hero-cta__actions {
  display: flex; gap: .75rem; flex-wrap: wrap;
}
[id^="hero-cta-"] .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 1.2rem; border-radius: 999px; font-weight: 700;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow: rgba(0,0,0,.35) 0 10px 30px -10px;
}
[id^="hero-cta-"] .btn--primary { background: var(--accent, #BD884B); color: var(--btn-light, #fff); }
[id^="hero-cta-"] .btn--secondary { background: var(--btn-light, #fff); color: var(--btn-dark, #242833); }
[id^="hero-cta-"] .btn:hover { transform: translateY(-2px); }

/* Trust badges */
[id^="hero-cta-"] .hero-cta__badges {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .8rem; margin-top: 1.25rem;
}
@media (max-width: 750px) {
  [id^="hero-cta-"] .hero-cta__badges { grid-template-columns: 1fr 1fr 1fr; }
}
[id^="hero-cta-"] .hero-cta__badge {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.12);
  border-radius: 12px; padding: .55rem .7rem; backdrop-filter: blur(6px);
}
[id^="hero-cta-"] .hero-cta__badge-icon { width: 22px; height: 22px; }
[id^="hero-cta-"] .hero-cta__badge-text { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Tiny global polish (site-wide legibility) ===== */
:root {
  --mps-text: #1a1d24;
  --mps-dark: #242833;
  --mps-accent: #BD884B;
}
body { color: var(--mps-text); }
h1,h2,h3 { letter-spacing: -0.01em; }
.button, .btn, button, [type="submit"] { font-weight: 700; }

/* === MPS — Hero polish: mobile centre, smaller height, better badges === */
@media (max-width: 750px) {
  /* Centre text & buttons on mobile */
  [id^="hero-cta-"] .hero-cta__content { 
    text-align: center !important; 
    margin-inline: auto; 
  }
  [id^="hero-cta-"] .hero-cta__actions { 
    justify-content: center !important; 
  }

  /* Make the hero shorter on mobile so the video isn't overpowering */
  [id^="hero-cta-"] .page-width { 
    height: 60vh !important;   /* adjust to 56–64 if needed */
  }

  /* Badges: switch to 2 columns on mobile for breathing room */
  [id^="hero-cta-"] .hero-cta__badges {
    grid-template-columns: 1fr 1fr !important;
    gap: .7rem;
  }
}

/* Desktop: keep left/centre choice from section, but refine badges look */
[id^="hero-cta-"] .hero-cta__badges { gap: .9rem; }
[id^="hero-cta-"] .hero-cta__badge {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 14px;
  padding: .6rem .8rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
[id^="hero-cta-"] .hero-cta__badge-text {
  color: #fff;
  font-weight: 700;
  opacity: .95;
}
[id^="hero-cta-"] .hero-cta__badge-icon {
  width: 22px; height: 22px;
  opacity: .95;
}

/* Optional: slightly stronger overlay for readability */
[id^="hero-cta-"] .hero-cta__overlay { opacity: max(var(--overlay-opacity, .55), .55); }
/* === MPS — Hero: centre desktop + premium glass badges === */

/* Desktop: centre all hero content over the video */
@media (min-width: 751px) {
  [id^="hero-cta-"] .hero-cta__content {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  [id^="hero-cta-"] .hero-cta__actions {
    justify-content: center !important;
  }
  /* keep three columns but centre items nicely */
  [id^="hero-cta-"] .hero-cta__badges {
    justify-items: center;
  }
}

/* Badges — frosted glass, pill shape, subtle hover */
[id^="hero-cta-"] .hero-cta__badges { gap: 1rem; }
[id^="hero-cta-"] .hero-cta__badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .62rem .95rem;
  border-radius: 999px;
  background: rgba(24,27,35,.35);                 /* darker for contrast on video */
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
              0 6px 18px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
[id^="hero-cta-"] .hero-cta__badge:hover {
  transform: translateY(-1px);
  border-color: var(--accent, #BD884B);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
              0 12px 28px rgba(0,0,0,.28);
}

/* Icon chip */
[id^="hero-cta-"] .hero-cta__badge-icon {
  width: 20px; height: 20px;
  padding: 6px;                                  /* creates the circular chip */
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  opacity: .98;
}

/* Text */
[id^="hero-cta-"] .hero-cta__badge-text {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .96;
}

/* Mobile remains 2 columns from earlier drop */
/* === MPS — Hero micro-tune: mobile height, readability, badge row === */

/* 1) Mobile: shorter hero so the video doesn't dominate */
@media (max-width: 750px) {
  [id^="hero-cta-"] .page-width { height: 56vh !important; } /* was 60vh */

  /* Slightly tighter stack spacing on mobile */
  [id^="hero-cta-"] .hero-cta__heading { margin-bottom: .45rem; }
  [id^="hero-cta-"] .hero-cta__subheading { margin-bottom: 1rem; }
}

/* 2) Improve text readability over video (desktop + mobile) */
[id^="hero-cta-"] .hero-cta__heading {
  text-shadow: 0 2px 12px rgba(0,0,0,.36);
}
[id^="hero-cta-"] .hero-cta__subheading,
[id^="hero-cta-"] .hero-cta__kicker {
  text-shadow: 0 1px 10px rgba(0,0,0,.28);
}

/* Keep overlay a touch stronger for consistent contrast */
[id^="hero-cta-"] .hero-cta__overlay {
  opacity: max(var(--overlay-opacity, .55), .62);
}

/* 3) Badges: sit in a centred row under the buttons, with consistent spacing */
[id^="hero-cta-"] .hero-cta__badges {
  display: flex !important;                  /* override grid */
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem 1rem;                            /* row/col gap */
  margin-top: 1rem;
}
@media (max-width: 750px) {
  [id^="hero-cta-"] .hero-cta__badges { justify-content: center; }
}

/* Badge look (slightly clearer text) */
[id^="hero-cta-"] .hero-cta__badge-text { color: #fff; opacity: .98; }

/* =========================================================
   SECTION: SPOTLIGHT + QUOTE (v1.1 POLISHED)
   Purpose: Modern grid with equal-height cards + adaptive spacing
   ========================================================= */
.sq {
  padding: clamp(4px, 1vw, 90px) 0;
  background: var(--color-background, #fff);
  color: var(--color-foreground, #1a1d24);
  text-align: center;
}

/* Headings */
.sq__kicker {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-accent, #bd884b);
  margin-bottom: 0.75rem;
  letter-spacing: 0.08em;
}
.sq__heading {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.75em;
}
.sq__sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  max-width: 700px;
  margin-inline: auto;
  opacity: 0.85;
  margin-bottom: 2.5rem;
}

/* Grid layout */
.sq__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  justify-items: center;
}

/* Card styling */
.sq__card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  padding: 2rem 1.75rem;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sq__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

/* Quote text */
.sq__quote {
  font-size: 1.05rem;
  line-height: 1.6;
  font-style: italic;
  color: #333;
  margin-bottom: 1.25rem;
}

/* Author name / title */
.sq__author {
  font-weight: 700;
  color: var(--color-accent, #bd884b);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Responsive tuning */
@media (max-width: 768px) {
  .sq {
    padding: 50px 1.25rem;
  }
  .sq__card {
    padding: 1.75rem 1.25rem;
  }
}
/* === SQ byline polish (author / meta) =================== */
.sq__byline{
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.sq__author{
  letter-spacing: .04em;
}
.sq__meta{
  font-size: 0.95rem;
  opacity: .72;
}
.sq__author + .sq__meta::before{
  content: "•";
  opacity: .35;
  margin: 0 .45rem;
}
.sq__quote{
  margin-bottom: 1rem;
}
/* === SQ star ratings ============================== */
.sq__stars{
  color: var(--color-accent, #bd884b);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}
.sq__star{
  display: inline-block;
  transform: scale(1);
  transition: transform 0.2s ease;
}
.sq__star:hover{
  transform: scale(1.15);
}
/* ================================
   SERVICES CARD PRO – ICON POLISH
   ================================ */

#shopify-section-services-card-pro .svc__card {
  text-align: center;
}

#shopify-section-services-card-pro .svc-ic {
  display: inline-grid;
  place-items: center;
  background: #f8f8f8;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

#shopify-section-services-card-pro .svc-ic:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

#shopify-section-services-card-pro .svc__img {
  margin-top: 6px;
  border-radius: 12px;
  overflow: hidden;
}

#shopify-section-services-card-pro .svc__title {
  margin-top: 10px;
  font-weight: 700;
}

#shopify-section-services-card-pro .svc__desc {
  margin-top: 6px;
  opacity: 0.85;
  line-height: 1.55;
}

@media (max-width: 768px) {
  #shopify-section-services-card-pro .svc__card {
    text-align: center;
    padding: 18px 14px;
  }
  #shopify-section-services-card-pro .svc__title {
    margin-top: 8px;
  }
}

/* =========================================
   SERVICES CARD PRO — GLOBAL FIX PATCH v1.1
   Targets stable wrapper class: .section--services-pro
   ========================================= */

/* Center + polish */
.section--services-pro .svc__card { text-align: center; }
.section--services-pro .svc-ic {
  display: inline-grid; place-items: center;
  background: #f8f8f8; border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
  margin: 2px auto 10px;
}
.section--services-pro .svc-ic:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Image + text spacing harmony */
.section--services-pro .svc__img { margin-top: 6px; border-radius: 12px; overflow: hidden; }
.section--services-pro .svc__title { margin-top: 10px; font-weight: 700; }
.section--services-pro .svc__desc { margin-top: 6px; opacity: .85; line-height: 1.55; }

/* If no main image, give title a touch more room under the icon */
.section--services-pro .svc__card:not(:has(.svc__img)) .svc__title { margin-top: 12px; }

/* Mobile caps for oversized icons */
@media (max-width: 768px){
  .section--services-pro .svc__card { padding: 18px 14px; }
  .section--services-pro .svc-ic { max-width: 120px; max-height: 120px; }
  .section--services-pro .svc__title { margin-top: 8px; }
}

/* (Optional) Back-compat if any old styles still use single-underscore classes */
.section--services-pro .svc-card { text-align: center; }
.section--services-pro .svc-grid  { align-items: stretch; }

/* ===== Smooth reveal (class-scoped, no Liquid needed) ===== */
.section--services-pro .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .48s ease, transform .48s ease;
}
.section--services-pro .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .section--services-pro .reveal,
  .section--services-pro .reveal.in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* =========================================
   SERVICES CARD PRO — CTA PULSE & GLOW
   ========================================= */

/* Soft accent border + lift on hover */
.section--services-pro .svc__card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border: 1px solid rgba(0,0,0,.06);
}
.section--services-pro .svc__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  border-color: rgba(189,136,75,.35); /* brand accent hint */
}

/* CTA: slight pulse on hover for attention */
.section--services-pro .svc__link {
  position: relative;
  isolation: isolate;
  will-change: transform, box-shadow;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.section--services-pro .svc__link:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);
}

/* Micro pulse ring (accessible, motion-aware) */
@keyframes mps-pulse {
  0%   { opacity: .28; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.25); }
  100% { opacity: 0;   transform: scale(1.25); }
}
.section--services-pro .svc__link::after {
  content: "";
  position: absolute; inset: 0; border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(189,136,75,.55);
  opacity: 0; pointer-events: none; z-index: -1;
}
.section--services-pro .svc__link:hover::after {
  animation: mps-pulse 900ms ease-out 1;
}
@media (prefers-reduced-motion: reduce) {
  .section--services-pro .svc__link:hover::after { animation: none; }
}
/* =========================================
   FIX: Keep pointer on Shop button hover
   ========================================= */
.section--services-pro .svc__link,
.section--services-pro .svc__link::after {
  cursor: pointer !important;
}
/* =========================================================
   MATT'S PRINT SHOP — HEADER/NAV POLISH (v1.0)
   Scope: Dawn's global header section
   ========================================================= */

#shopify-section-header {
  --hdr-height: 68px;                 /* target header height */
  --hdr-pad: 10px;                    /* vertical trim */
  --hdr-bg: #d89b2b;                  /* your golden bar (tweak if needed) */
  --hdr-text: #1a1d24;                /* dark text/icons */
  --search-bg: #242833;               /* dark search field */
  --search-text: #f4f6f8;             /* search text colour */
  --search-ph: rgba(255,255,255,.55); /* placeholder */
  --ring: rgba(0,0,0,.06);            /* subtle borders */
}

/* Base bar tidy */
#shopify-section-header .header {
  background: var(--hdr-bg);
  min-height: var(--hdr-height);
  padding-block: var(--hdr-pad);
  border-bottom: 1px solid var(--ring);
  box-shadow: none;
}

/* Sticky shadow on scroll */
.shopify-section-header-sticky .header {
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Constrain inner container a touch for balance on desktop */
@media (min-width: 990px) {
  #shopify-section-header .header__inline-menu,
  #shopify-section-header .header__icons,
  #shopify-section-header .header__heading {
    margin-top: 0;
  }
  #shopify-section-header .header__heading,
  #shopify-section-header .header__inline-menu,
  #shopify-section-header .header__icons {
    align-self: center;
  }
  #shopify-section-header .header__heading-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
}

/* Logo sizing (keeps it crisp without overpowering) */
#shopify-section-header .header__heading-logo {
  max-height: 38px;      /* tweak if you want it bigger/smaller */
  width: auto;
}

/* Inline menu spacing (if you use it) */
#shopify-section-header .list-menu--inline > li {
  margin: 0 10px;
}
#shopify-section-header .list-menu--inline a {
  font-weight: 600;
  letter-spacing: .2px;
  padding: 6px 8px;
  border-radius: 8px;
}
#shopify-section-header .list-menu--inline a:hover,
#shopify-section-header .list-menu--inline a:focus-visible {
  background: rgba(0,0,0,.06);
  text-decoration: none;
}

/* ---------- SEARCH: pill, icon inside, neat focus ---------- */

/* Wrap/elements differ by Dawn version, so target generically around search forms */
#shopify-section-header form[action*="/search"] input[type="search"],
#shopify-section-header .search__input {
  background: var(--search-bg);
  color: var(--search-text);
  min-height: 44px;
  line-height: 44px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.14);
  padding: 0 16px 0 44px; /* leave room for the icon */
  outline: none;
  width: 100%;
}

#shopify-section-header form[action*="/search"] input[type="search"]::placeholder,
#shopify-section-header .search__input::placeholder {
  color: var(--search-ph);
  opacity: 1;
}

/* Add a magnifying glass icon as a pseudo element */
#shopify-section-header form[action*="/search"],
#shopify-section-header .header__search,
#shopify-section-header .search-modal__content {
  position: relative;
}

#shopify-section-header form[action*="/search"]::before,
#shopify-section-header .header__search::before,
#shopify-section-header .search-modal__content::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  opacity: .9;
  /* inline SVG (currentColor fill) so it inherits */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat center / contain;
  background: var(--search-text);
  pointer-events: none;
}

/* Remove any default search button look; make sure pointer isn't “text” */
#shopify-section-header .search__button,
#shopify-section-header button[type="submit"][aria-label*="Search"] {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Nicer focus ring */
#shopify-section-header form[action*="/search"] input[type="search"]:focus,
#shopify-section-header .search__input:focus {
  box-shadow: 0 0 0 3px rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
}

/* ---------- ICONS (phone, account, cart) ---------- */

#shopify-section-header .header__icons a,
#shopify-section-header .header__icons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  margin-left: 6px;
  border-radius: 10px;
  color: var(--hdr-text);
  cursor: pointer;    /* ensure hand cursor on hover */
}

#shopify-section-header .header__icons a:hover,
#shopify-section-header .header__icons button:hover,
#shopify-section-header .header__icons a:focus-visible,
#shopify-section-header .header__icons button:focus-visible {
  background: rgba(0,0,0,.06);
}

/* Consistent icon sizing */
#shopify-section-header .icon,
#shopify-section-header svg {
  width: 22px;
  height: 22px;
}

/* Cart badge positioning polish */
#shopify-section-header .cart-count-bubble {
  top: 2px !important;
  right: 2px !important;
  transform: none !important;
  font-weight: 700;
}

/* ---------- MOBILE ---------- */
@media (max-width: 989px) {
  #shopify-section-header .header {
    padding-block: 8px;
  }
  #shopify-section-header .header__heading-logo {
    max-height: 34px;
  }
  /* make search full-width on mobile if present in header */
  #shopify-section-header form[action*="/search"],
  #shopify-section-header .header__search {
    width: 100%;
  }
}
/* =========================================================
   ONE-PASTE HEADER RESET + POLISH (no deletions needed)
   ========================================================= */
:root{
  --mps-gold: #d89b2b;
  --mps-dark: #242833;
  --mps-text: #1a1d24;
  --mps-search: #252a35;
  --mps-search-text: #f4f6f8;
}

/* 1) If Dawn’s default header is active, force it to our clean look */
#shopify-section-header .header,
header.header{
  background: var(--mps-gold) !important;
  min-height: 68px;
  padding-block: 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* 2) If your custom "MPS — Header (Pro)" is active, make it take over cleanly */
[class^="mps-header-"]{
  background: var(--mps-dark) !important;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
[class^="mps-header-"] .mps-wrap{ padding: 10px 20px; }
[class^="mps-header-"] .mps-row{ min-height: 64px; }

/* Search pill (applies to MPS header’s searchbar) */
[class^="mps-header-"] .mps-searchbar{
  background: var(--mps-search);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9999px;
  padding: 10px 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
[class^="mps-header-"] .mps-searchbar input{
  color: var(--mps-search-text);
}
[class^="mps-header-"] .mps-searchbar ::placeholder{
  color: rgba(255,255,255,.6);
}
[class^="mps-header-"] .mps-searchbar:focus-within{
  border-color: #BD884B;
  box-shadow: 0 0 0 3px color-mix(in srgb, #BD884B 22%, transparent);
}

/* Keep the magnifying glass a neat outline (no “orange blob”) */
[class^="mps-header-"] .mps-icon-btn{
  background: transparent !important;
  border: 0 !important;
  padding: 6px !important;
  color: #BD884B !important;
  cursor: pointer;
}
[class^="mps-header-"] .mps-icon-btn svg{
  width: 18px; height: 18px;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Icons: pointer cursor + tidy hover */
[class^="mps-header-"] .mps-ico{
  cursor: pointer;
  color: #BD884B;
  opacity: .92;
}
[class^="mps-header-"] .mps-ico:hover{
  opacity: 1;
  background: rgba(255,255,255,.06);
  border-radius: 10px;
}

/* Cart badge: compact + crisp */
[class^="mps-header-"] .mps-badge{
  top: 2px; right: 2px;
  transform: translate(20%, -20%);
  background:#fff; color:#111;
  font-size:10px; min-width:16px; height:16px; padding:0 4px;
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.15);
}
/* =========================================================
   ONE-PASTE POLISH 02 — header spacing, search width, icons
   ========================================================= */

/* 1) Tighten header height + baseline alignment */
[class^="mps-header-"] .mps-wrap{ padding: 8px 20px; }
[class^="mps-header-"] .mps-row{ min-height: 60px; }
[class^="mps-header-"] .mps-left{ align-items: center; gap: 10px; }
[class^="mps-header-"] .mps-brand{ transform: translateY(1px); } /* nudge text baseline */

/* 2) Search pill: slimmer + sane max-width so it doesn’t dominate */
@media (min-width: 990px){
  [class^="mps-header-"] .mps-center{ min-width: 520px; }
}
[class^="mps-header-"] .mps-searchbar{
  padding: 9px 14px;            /* was 10px 14px */
}
[class^="mps-header-"] .mps-searchform{ gap: 10px; } /* slightly tighter */
[class^="mps-header-"] .mps-searchbar input{ font-size: 14px; }

/* 3) Icons: spacing + hover clarity */
[class^="mps-header-"] .mps-right{ gap: 18px; }
[class^="mps-header-"] .mps-ico{
  padding: 8px;
  border-radius: 12px;
}
[class^="mps-header-"] .mps-ico:hover{
  background: rgba(255,255,255,.08);
}

/* 4) Cart badge position micro-tune */
[class^="mps-header-"] .mps-badge{
  top: 0; right: 0;
  transform: translate(35%, -35%);
}

/* 5) Hero heading spacing: a touch more air below the kicker */
[id^="hero-cta-"] .hero-cta__kicker{ margin-bottom: .6rem; }
[id^="hero-cta-"] .hero-cta__heading{ margin-bottom: .65rem; }

/* 6) Sticky header shadow a bit softer so it reads “premium”, not heavy */
[class^="mps-header-"]{
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
/* =========================================================
   ONE-PASTE POLISH 02 — ENFORCED OVERRIDES
   Reason: section <style> loads after head CSS, so we assert !important
   ========================================================= */

/* 1) Header rhythm + baseline */
[class^="mps-header-"] .mps-wrap{ padding: 8px 20px !important; }
[class^="mps-header-"] .mps-row{ min-height: 60px !important; }
[class^="mps-header-"] .mps-left{ align-items: center !important; gap: 10px !important; }
[class^="mps-header-"] .mps-brand{ transform: translateY(1px) !important; }

/* 2) Search pill: slimmer + sensible width */
@media (min-width: 990px){
  [class^="mps-header-"] .mps-center{ min-width: 520px !important; }
}
[class^="mps-header-"] .mps-searchbar{ padding: 9px 14px !important; }
[class^="mps-header-"] .mps-searchform{ gap: 10px !important; }
[class^="mps-header-"] .mps-searchbar input{ font-size: 14px !important; }

/* 3) Icons: spacing + hover */
[class^="mps-header-"] .mps-right{ gap: 18px !important; }
[class^="mps-header-"] .mps-ico{ padding: 8px !important; border-radius: 12px !important; }
[class^="mps-header-"] .mps-ico:hover{ background: rgba(255,255,255,.08) !important; }

/* 4) Cart badge micro-position */
[class^="mps-header-"] .mps-badge{
  top: 0 !important; right: 0 !important;
  transform: translate(35%, -35%) !important;
}

/* 5) Hero spacing tweaks */
[id^="hero-cta-"] .hero-cta__kicker{ margin-bottom: .6rem !important; }
[id^="hero-cta-"] .hero-cta__heading{ margin-bottom: .65rem !important; }

/* 6) Softer header shadow */
[class^="mps-header-"]{ box-shadow: 0 6px 18px rgba(0,0,0,.14) !important; }

/* ===== MPS HEADER — FINAL POLISH (replaces debug) ===== */

/* Remove the magenta outline */
header[class^="mps-header-"] { outline: none !important; }

/* 1) Tighten header height and baseline */
header[class^="mps-header-"] .mps-wrap{ padding: 6px 20px !important; }
header[class^="mps-header-"] .mps-row{ min-height: 56px !important; }
header[class^="mps-header-"] .mps-left{ align-items:center !important; gap:10px !important; }
header[class^="mps-header-"] .mps-logo img{ max-height: 40px !important; } /* logo size */
header[class^="mps-header-"] .mps-brand{ transform: translateY(1px) !important; } /* tiny baseline nudge */

/* 2) Search pill — slimmer + width cap so it doesn’t dominate */
@media (min-width: 990px){
  header[class^="mps-header-"] .mps-center{ max-width: 680px !important; }
}
header[class^="mps-header-"] .mps-searchbar{ padding: 8px 12px !important; }
header[class^="mps-header-"] .mps-searchform{ gap: 10px !important; }
header[class^="mps-header-"] .mps-searchbar input{ font-size: 14px !important; }

/* 3) Icons — breathing room + crisp hover */
header[class^="mps-header-"] .mps-right{ gap: 20px !important; }
header[class^="mps-header-"] .mps-ico{ padding: 8px !important; border-radius: 12px !important; }
header[class^="mps-header-"] .mps-ico:hover{ background: rgba(255,255,255,.08) !important; }

/* 4) Cart badge position tidy */
header[class^="mps-header-"] .mps-badge{
  top: 0 !important; right: 0 !important;
  transform: translate(36%, -36%) !important;
}

/* 5) Hero spacing — a touch more air under kicker/heading */
[id^="hero-cta-"] .hero-cta__kicker{ margin-bottom: .6rem !important; }
[id^="hero-cta-"] .hero-cta__heading{ margin-bottom: .65rem !important; }
/* ===== HEADER NO-OVERLAP FIX (one paste) ===== */

/* Desktop: left = natural width, center = sensible min/max, right = natural width */
@media (min-width: 990px){
  header[class^="mps-header-"] .mps-row{
    grid-template-columns: max-content minmax(420px, 48vw) max-content !important;
    column-gap: 24px !important;  /* more breathing room between brand and search */
  }
  /* Make sure left and right don’t shrink */
  header[class^="mps-header-"] .mps-left{ min-width: max-content !important; }
  header[class^="mps-header-"] .mps-right{ justify-self: end !important; }

  /* Keep the search centered and contained to its track */
  header[class^="mps-header-"] .mps-center{ justify-self: center !important; width: 100% !important; }
  header[class^="mps-header-"] .mps-searchbar{ width: 100% !important; }
}

/* Wider screens: allow a wider search but still capped */
@media (min-width: 1200px){
  header[class^="mps-header-"] .mps-row{
    grid-template-columns: max-content minmax(520px, 720px) max-content !important;
  }
}
/* ===== HEADER POLISH 03 — legibility, hit-areas, focus, hover ===== */

/* 1) Brand legibility + subtle hover */
header[class^="mps-header-"] .mps-brand{
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  opacity: .95 !important;
  transition: opacity .15s ease !important;
}
header[class^="mps-header-"] .mps-logo:hover .mps-brand{ opacity: 1 !important; }

/* 2) Burger + icons get larger hit-areas and crisp focus */
header[class^="mps-header-"] .mps-burger,
header[class^="mps-header-"] .mps-ico{
  padding: 10px !important;          /* comfy target */
  border-radius: 12px !important;
  outline: none !important;
}
header[class^="mps-header-"] .mps-burger:focus-visible,
header[class^="mps-header-"] .mps-ico:focus-visible,
header[class^="mps-header-"] .mps-searchbar:focus-within{
  box-shadow: 0 0 0 3px color-mix(in srgb, #BD884B 22%, transparent) !important;
}

/* 3) Search placeholder contrast (still subtle) */
header[class^="mps-header-"] .mps-searchbar ::placeholder{
  color: rgba(255,255,255,.72) !important;
}

/* 4) Keep search from ever kissing the brand at tight widths */
@media (min-width: 990px){
  header[class^="mps-header-"] .mps-row{ column-gap: 28px !important; }
}

/* 5) Slightly softer sticky shadow so it reads “premium” not heavy */
header[class^="mps-header-"]{
  box-shadow: 0 4px 14px rgba(0,0,0,.12) !important;
}

/* 6) Mobile: add a touch more breathing room around the pill */
@media (max-width: 989px){
  header[class^="mps-header-"] .mps-mobile-search{ margin-top: 12px !important; }
  header[class^="mps-header-"] .mps-searchbar{ padding: 10px 14px !important; }
}
/* === Video hero headings on dark/over-media === */
.mps .banner:has(.deferred-media),
.mps .banner:has(video),
.mps .banner:has(.media > video),
.mps .banner:has(.media > iframe) {
  /* no style needed here—just the parent context for the next rules */
}

.mps .banner:has(.deferred-media) .banner__heading,
.mps .banner:has(video) .banner__heading,
.mps .banner:has(.media > video) .banner__heading,
.mps .banner:has(.media > iframe) .banner__heading {
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.mps .banner:has(.deferred-media) .banner__text,
.mps .banner:has(video) .banner__text,
.mps .banner:has(.media > video) .banner__text,
.mps .banner:has(.media > iframe) .banner__text {
  color: #eef2f6 !important;
}

/* Utility: drop 'u-on-dark' on any section/row that needs white copy */
.u-on-dark, .u-on-dark :is(h1,h2,h3,h4,p,li,small){
  color:#fff !important;
}
.u-on-dark .button { --color-button: 255,255,255; --color-button-text: 15,18,24; }
/* ===== MPS — VIDEO BANNER READABILITY FIX (one paste) ===== */
/* Scope: any Dawn banner that contains video/iframe/deferred-media */
/* Makes headings, body copy, and links white + adds soft shadow for contrast */

#MainContent .banner:has(.deferred-media, video, .media > video, .media > iframe) .banner__heading,
#MainContent .banner:has(.deferred-media, video, .media > video, .media > iframe) .banner__subheading,
#MainContent .banner:has(.deferred-media, video, .media > video, .media > iframe) .banner__text,
#MainContent .banner:has(.deferred-media, video, .media > video, .media > iframe) .rte p,
#MainContent .banner:has(.deferred-media, video, .media > video, .media > iframe) a {
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* Optional: make secondary buttons readable on-video (keeps brand primary intact) */
#MainContent .banner:has(.deferred-media, video, .media > video, .media > iframe) .button--secondary {
  background: #ffffff !important;
  color: #242833 !important; /* brand dark */
  border-color: rgba(0,0,0,.08) !important;
}

/* If your banner outputs an overlay element, ensure it’s dark enough */
#MainContent .banner:has(.deferred-media, video, .media > video, .media > iframe) .banner__media::after,
#MainContent .banner:has(.deferred-media, video, .media > video, .media > iframe) .media::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.22));
  /* plays nice with any existing overlay; if none exists, this gives a gentle scrim */
}
/* ===== MPS — VIDEO BANNER EMERGENCY CONTRAST LOCK (one paste) ===== */
/* Works on all Dawn banners when a video/iframe/deferred-media is present */

/* 1) Make the media wrapper a positioning context (safe even if already set) */
.banner .banner__media { position: relative !important; }

/* 2) Add a guaranteed dark scrim over video/iframe (plays nice with existing overlays) */
.banner:has(.deferred-media, video, .media > video, .media > iframe) .banner__media::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.22)),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 78%, rgba(0,0,0,.62) 100%);
  mix-blend-mode: multiply;
  opacity: 1 !important; /* ensure it wins over lighter overlays */
}

/* 3) Force content above the media and set white copy */
.banner:has(.deferred-media, video, .media > video, .media > iframe) .banner__content,
.banner:has(.deferred-media, video, .media > video, .media > iframe) .banner__box {
  position: relative !important;
  z-index: 2 !important;            /* sit on top of video + scrim */
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* 4) Make sure all key text bits inside are white */
.banner:has(.deferred-media, video, .media > video, .media > iframe) .banner__heading,
.banner:has(.deferred-media, video, .media > video, .media > iframe) .banner__subheading,
.banner:has(.deferred-media, video, .media > video, .media > iframe) .banner__text,
.banner:has(.deferred-media, video, .media > video, .media > iframe) .rte p,
.banner:has(.deferred-media, video, .media > video, .media > iframe) .rte li,
.banner:has(.deferred-media, video, .media > video, .media > iframe) a {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* 5) Ensure secondary buttons are readable on-video (primary stays brand) */
.banner:has(.deferred-media, video, .media > video, .media > iframe) .button--secondary,
.banner:has(.deferred-media, video, .media > video, .media > iframe) .btn--secondary {
  background: #ffffff !important;
  color: #242833 !important;
  border-color: rgba(0,0,0,.08) !important;
}

/* 6) If your custom hero uses hero-cta classes, lock those too just in case */
[id^="hero-cta-"] .hero-cta__content { position: relative !important; z-index: 2 !important; }
[id^="hero-cta-"] .hero-cta__heading,
[id^="hero-cta-"] .hero-cta__subheading,
[id^="hero-cta-"] .hero-cta__kicker { color: #fff !important; text-shadow: 0 3px 14px rgba(0,0,0,.55) !important; }
[id^="hero-cta-"] .hero-cta__overlay { opacity: max(var(--overlay-opacity, .55), .62) !important; }

/* =========================================================
   MATT'S PRINT SHOP — LANDING TUNE-UP (Desktop-first)
   Applies site-wide but targets landing sections only.
   ========================================================= */

/* --- Rhythm & container tokens --- */
:root{
  --mps-sec-lg: 64px;   /* major section top/btm */
  --mps-sec-md: 48px;   /* standard section top/btm */
  --mps-sec-sm: 32px;   /* minor section top/btm */
  --mps-gutter: 16px;   /* inner card gutters */
  --mps-maxw: 1200px;   /* unified page width */
  --mps-charcoal:#242833;
  --mps-gold:#BD884B;
}

/* Unify common landing containers (Popular Services/Products/Testimonials etc.) */
.section-template, .index .shopify-section .page-width,
.page-width, .landing-width, .landing-container{
  max-width: var(--mps-maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Global section spacing rhythm (keeps things tight & consistent) */
.index .shopify-section{
  padding-top: var(--mps-sec-md);
  padding-bottom: var(--mps-sec-md);
}
.index .shopify-section:first-of-type{
  padding-top: 0; /* header/hero usually sits flush */
}

/* ---------------------------------------------------------
   1) HERO / VIDEO HEIGHT + CTA HIERARCHY
   --------------------------------------------------------- */
/* Make the first landing hero video ~58-60vh (desktop) */
.index .shopify-section:first-of-type video,
.index .shopify-section:first-of-type .media video,
.index .shopify-section:first-of-type .slideshow__video,
.index .shopify-section:first-of-type .banner__media video{
  height: 60vh;
  max-height: 760px;
  object-fit: cover;
}

/* Primary/secondary CTA styling inside hero overlays */
.index .shopify-section:first-of-type .button, 
.index .shopify-section:first-of-type .btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.9rem 1.2rem; border-radius:999px;
  font-weight:700; line-height:1; border:1px solid transparent;
}

/* Primary = solid gold on charcoal text */
.index .shopify-section:first-of-type .button--primary,
.index .shopify-section:first-of-type .btn--primary{
  background: var(--mps-gold) !important; color: rgb(18, 18, 18) !important;
}

/* Secondary = outline gold */
.index .shopify-section:first-of-type .button--secondary,
.index .shopify-section:first-of-type .btn--secondary{
  background: transparent !important; color: #ffffff !important;
  border-color: var(--mps-gold) !important;
}

/* Slightly increase spacing between hero CTAs */
.index .shopify-section:first-of-type .button + .button,
.index .shopify-section:first-of-type .btn + .btn{ margin-left: 10px; }

/* ---------------------------------------------------------
   2) TRUST BAR — CENTER & TIDY (3 equal badges)
   Targets common "benefits" / trust-bar markup.
   --------------------------------------------------------- */
.benefits, .trust-bar, .shop-benefits{
  background: #0f1116;
  padding-top: var(--mps-sec-sm);
  padding-bottom: var(--mps-sec-sm);
}
.benefits .inner, .trust-bar .inner, .shop-benefits .inner{
  max-width: var(--mps-maxw); margin: 0 auto; display:grid;
  grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch;
}
.benefits .benefit, .trust-bar .benefit, .shop-benefits .benefit{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  color:#fff; padding:12px 14px; border-radius:12px;
}
.benefits .benefit .ic svg,
.trust-bar .benefit .ic svg,
.shop-benefits .benefit .ic svg{ width:22px; height:22px; }

/* ---------------------------------------------------------
   3) HOW-IT-WORKS — GRID SUPPORTS 3–4 CARDS CLEANLY
   (Works with your current 3; if you add a 4th it auto-fits)
   --------------------------------------------------------- */
.how-it-works, .sticker-steps, .sb-steps{
  background: var(--mps-charcoal); color:#fff;
  padding-top: var(--mps-sec-md); padding-bottom: var(--mps-sec-md);
}
.how-it-works .steps, .sticker-steps .steps, .sb-steps .steps,
.how-it-works .grid,  .sticker-steps .grid,  .sb-steps .grid{
  display:grid; gap: 16px;
  grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) );
}
.how-it-works .card, .sticker-steps .card, .sb-steps .card{
  border:1px solid rgba(255,255,255,.08);
  background: #12151c; color:#cfd5de; border-radius:16px; padding:16px;
}
.how-it-works .card h3, .sticker-steps .card h3, .sb-steps .card h3{ color:#fff; }

/* ---------------------------------------------------------
   4) POPULAR SERVICES — BUTTON STYLE = "VIEW"
   (Restyles existing CTA to dark pill; if the label is "Shop",
   this makes it *look* like a View button. Optional pseudo text.)
   --------------------------------------------------------- */
.svc, .services, .popular-services{ padding-top: var(--mps-sec-md); }
.svc .card .btn, .services .card .btn, .popular-services .card .btn,
.svc .card .button, .services .card .button, .popular-services .card .button{
  background: var(--mps-charcoal) !important;
  color: #fff !important;
  border: 1px solid var(--mps-charcoal) !important;
  border-radius: 999px; padding:.6rem 1rem; font-weight:700;
}
.svc .card .btn:hover, .services .card .btn:hover, .popular-services .card .btn:hover,
.svc .card .button:hover, .services .card .button:hover, .popular-services .card .button:hover{
  border-color: var(--mps-gold) !important;
}
/* Optional: force visible label "View" even if text says Shop */
.svc .card .btn::after, .services .card .btn::after, .popular-services .card .btn::after,
.svc .card .button::after, .services .card .button::after, .popular-services .card .button::after{
  content: "View";
}
.svc .card .btn > span, .services .card .btn > span, .popular-services .card .btn > span,
.svc .card .button > span, .services .card .button > span, .popular-services .card .button > span{
  color: transparent; /* visually replaced by ::after */
}

/* ---------------------------------------------------------
   5) TESTIMONIALS — SLIDER LOOK & BLACK BOX FIX
   (CSS-only cleanup; keeps cards tidy & removes stray dark bg)
   --------------------------------------------------------- */
.testimonials, .reviews, .home-reviews{
  padding-top: var(--mps-sec-md); padding-bottom: var(--mps-sec-md);
}
.testimonials .cards, .reviews .cards, .home-reviews .cards{
  display:grid; grid-auto-flow:column; grid-auto-columns: 1fr;
  gap: 16px; overflow:hidden;
}
.testimonials .card, .reviews .card, .home-reviews .card{
  background:#fff; border:1px solid #e6e7ea; border-radius:14px; padding:16px;
}
.testimonials .stars svg, .reviews .stars svg, .home-reviews .stars svg{
  width:18px; height:18px; color: var(--mps-gold);
}
/* Remove unintended dark wrapper behind the CTA under testimonials */
.testimonials + .cta-wrap,
.reviews + .cta-wrap,
.home-reviews + .cta-wrap{ background: transparent !important; box-shadow:none !important; }

/* ---------------------------------------------------------
   6) POPULAR PRODUCTS SLIDER — WIDTH MATCH SERVICES
   (Unifies left/right gutters + max-width)
   --------------------------------------------------------- */
.popular-products, .product-carousel, .categories-carousel{
  padding-top: var(--mps-sec-md); padding-bottom: var(--mps-sec-md);
}
.popular-products .page-width,
.product-carousel .page-width,
.categories-carousel .page-width{
  max-width: var(--mps-maxw);
}

/* ---------------------------------------------------------
   7) CUSTOMER SHOWCASE — TIGHTER GRID & GUTTERS
   --------------------------------------------------------- */
.showcase, .customer-showcase, .gallery-proof{
  background: #12151c; color:#fff;
  padding-top: var(--mps-sec-md); padding-bottom: var(--mps-sec-md);
}
.showcase .grid, .customer-showcase .grid, .gallery-proof .grid{
  display:grid; gap: 12px; grid-template-columns: repeat(4, 1fr);
}
.showcase .card, .customer-showcase .card, .gallery-proof .card{
  background:#0f1116; border:1px solid rgba(255,255,255,.06); border-radius:14px;
}

/* ---------------------------------------------------------
   8) FAQ — TIGHTER SECTION PADDING & ACCORDION GAPS
   --------------------------------------------------------- */
.faq, .faqs, .accordion-faq{
  padding-top: calc(var(--mps-sec-md) - 12px);
  padding-bottom: calc(var(--mps-sec-md) - 12px);
}
.faq .accordion, .faqs .accordion, .accordion-faq .accordion{ gap: 10px; }

/* ---------------------------------------------------------
   9) FINAL CTA BAND — DARK, MATCH HERO CTAs
   --------------------------------------------------------- */
.final-cta, .cta-band, .ready-to-print{
  background: var(--mps-charcoal);
  color:#fff; text-align:center;
  padding-top: var(--mps-sec-md); padding-bottom: var(--mps-sec-md);
}
.final-cta .btn, .cta-band .btn, .ready-to-print .btn,
.final-cta .button, .cta-band .button, .ready-to-print .button{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.9rem 1.2rem; border-radius:999px; font-weight:700;
  border:1px solid transparent;
}
.final-cta .btn--primary, .cta-band .btn--primary, .ready-to-print .btn--primary,
.final-cta .button--primary, .cta-band .button--primary, .ready-to-print .button--primary{
  background: var(--mps-gold); color: var(--mps-charcoal);
}
.final-cta .btn--ghost, .cta-band .btn--ghost, .ready-to-print .btn--ghost,
.final-cta .button--ghost, .cta-band .button--ghost, .ready-to-print .button--ghost{
  background: transparent; color: var(--mps-gold); border-color: var(--mps-gold);
}

/* ---------------------------------------------------------
   10) ACCESSORY: floating builder button safeties
   --------------------------------------------------------- */
.floating-builder, .sticky-builder{
  bottom: 16px !important; right: 16px !important;
  z-index: 30;
}

/* Respect reduced motion for micro-transitions */
@media (prefers-reduced-motion: no-preference){
  .benefits .benefit:hover{ transform: translateY(-2px); transition: transform .18s ease; }
  .svc .card:hover, .services .card:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
}
/* =========================================================
   MPS — PATCH 02 (trust bar centering, spacing reset,
   services "View" button, testimonial CTA box, final CTA band)
   ========================================================= */

/* --------- 0) Safety tokens --------- */
:root{
  --mps-charcoal:#242833;
  --mps-gold:#BD884B;
  --mps-maxw:1200px;
  --mps-sec-md:48px;
}

/* --------- 1) TRUST BADGES — centre + equal columns --------- */
/* Handles both our .benefits markup and theme variants */
.benefits,
.shop-benefits,
.trust-bar{ background:#0f1116; }
.benefits > .inner,
.benefits > .page-width,
.benefits > div,
.shop-benefits > .inner,
.trust-bar > .inner{
  max-width:var(--mps-maxw) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:16px !important;
  align-items:stretch !important;
}
.benefits .benefit,
.shop-benefits .benefit,
.trust-bar .benefit{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  color:#fff;padding:12px 14px;border-radius:12px;
}
.benefits .benefit .ic svg,
.shop-benefits .benefit .ic svg,
.trust-bar .benefit .ic svg{width:22px;height:22px}

/* --------- 2) SECTION SPACING — reset global, add only where needed --------- */
/* Undo the big padding that made gaps look larger */
.index .shopify-section{ padding-top:0 !important; padding-bottom:0 !important; }
/* Apply rhythm only to the sections we actually use on the landing */
.how-it-works,.sticker-steps,.sb-steps,
.svc,.services,.popular-services,
.popular-products,.product-carousel,.categories-carousel,
.testimonials,.reviews,.home-reviews,
.showcase,.customer-showcase,.gallery-proof,
.faq,.faqs,.accordion-faq,
.final-cta,.cta-band,.ready-to-print,
.benefits,.shop-benefits,.trust-bar{
  padding-top:var(--mps-sec-md) !important;
  padding-bottom:var(--mps-sec-md) !important;
}
.page-width,.landing-width,.landing-container{max-width:var(--mps-maxw)}

/* --------- 3) POPULAR SERVICES — force button label to "View" & style --------- */
/* Works even if the theme keeps the text "Shop" inside. */
.svc .card a.button,
.svc .card a.btn,
.services .card a.button,
.services .card a.btn,
.popular-services .card a.button,
.popular-services .card a.btn{
  position:relative;
  background:var(--mps-charcoal) !important;
  border:1px solid var(--mps-charcoal) !important;
  color:#fff !important;
  border-radius:999px !important;
  padding:.6rem 1rem !important;
  font-weight:700 !important;
  line-height:1 !important;
  font-size:0 !important; /* hide original text */
}
.svc .card a.button::after,
.svc .card a.btn::after,
.services .card a.button::after,
.services .card a.btn::after,
.popular-services .card a.button::after,
.popular-services .card a.btn::after{
  content:"View";
  font-size:14px; /* restores visible text */
  letter-spacing:.01em;
}
.svc .card a.button:hover,
.svc .card a.btn:hover,
.services .card a.button:hover,
.services .card a.btn:hover,
.popular-services .card a.button:hover,
.popular-services .card a.btn:hover{
  border-color:var(--mps-gold) !important;
}

/* --------- 4) TESTIMONIALS — remove black box around CTA --------- */
/* Catches common wrappers under the testimonials grid */
.testimonials .cta,
.testimonials .cta-wrap,
.testimonials .page-width > .cta,
.reviews .cta,
.reviews .cta-wrap,
.home-reviews .cta,
.home-reviews .cta-wrap{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  padding:0 !important;
  margin-top:16px !important;
  text-align:center !important;
}

/* Make the CTA button itself on-brand */
.testimonials .cta a, .reviews .cta a, .home-reviews .cta a,
.testimonials .cta-wrap a, .reviews .cta-wrap a, .home-reviews .cta-wrap a{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.9rem 1.2rem;border-radius:999px;
  background:var(--mps-gold) !important;color:var(--mps-charcoal) !important;
  border:1px solid transparent !important;font-weight:700;
}

/* --------- 5) READY-TO-PRINT BAND — dark style + dual-CTA look --------- */
/* Styles the band if it exists; if there are two buttons they’ll render primary+ghost */
.ready-to-print,.cta-band,.final-cta,.home-cta{
  background:var(--mps-charcoal) !important;
  color:#fff !important;
  text-align:center;
  padding-top:var(--mps-sec-md) !important;
  padding-bottom:var(--mps-sec-md) !important;
}
.ready-to-print .button,.ready-to-print .btn,
.cta-band .button,.cta-band .btn,
.final-cta .button,.final-cta .btn,
.home-cta .button,.home-cta .btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.9rem 1.2rem;border-radius:999px;
  border:1px solid transparent;font-weight:700;line-height:1;margin:0 6px;
}
.ready-to-print .button--primary,.ready-to-print .btn--primary,
.cta-band .button--primary,.cta-band .btn--primary,
.final-cta .button--primary,.final-cta .btn--primary,
.home-cta .button--primary,.home-cta .btn--primary{
  background:var(--mps-gold) !important;color:var(--mps-charcoal) !important;
}
.ready-to-print .button--ghost,.ready-to-print .btn--ghost,
.cta-band .button--ghost,.cta-band .btn--ghost,
.final-cta .button--ghost,.final-cta .btn--ghost,
.home-cta .button--ghost,.home-cta .btn--ghost{
  background:transparent !important;color:var(--mps-gold) !important;border-color:var(--mps-gold) !important;
}

/* If the band only has one button, make it primary gold by default */
.ready-to-print a.button,.ready-to-print a.btn,
.cta-band a.button,.cta-band a.btn,
.final-cta a.button,.final-cta a.btn,
.home-cta a.button,.home-cta a.btn{
  background:var(--mps-gold) !important;color:var(--mps-charcoal) !important;
}

/* --------- 6) Minor: keep floating builder button clear of edges --------- */
.floating-builder,.sticky-builder{ bottom:16px !important; right:16px !important; z-index:30; }
/* =========================================================
   MPS — PATCH 03 (stubborn fixes)
   - Trust badges inner centring
   - Services card CTA -> "View"
   - Testimonials CTA wrapper = transparent
   - Ready-to-print band + button override
   ========================================================= */

/* 1) TRUST BADGES: centre content inside each box */
.benefits .benefit,
.shop-benefits .benefit,
.trust-bar .benefit{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:8px !important;
}
.benefits .benefit .tx,
.shop-benefits .benefit .tx,
.trust-bar .benefit .tx{
  text-align:center !important;
}

/* 2) POPULAR SERVICES: force CTA label to “View” visually */
.svc .card a.button,
.svc .card a.btn,
.services .card a.button,
.services .card a.btn,
.popular-services .card a.button,
.popular-services .card a.btn{
  position:relative !important;
  background:#242833 !important;
  border:1px solid #242833 !important;
  color:#fff !important;
  border-radius:999px !important;
  padding:.6rem 1rem !important;
  font-weight:700 !important;
  line-height:1 !important;
  overflow:visible !important;
}

/* Hide original text robustly */
.svc .card a.button > *,
.svc .card a.btn > *,
.services .card a.button > *,
.services .card a.btn > *,
.popular-services .card a.button > *,
.popular-services .card a.btn > *{
  visibility:hidden !important;
  height:0 !important;
}

/* Paint our label (works even if theme keeps "Shop") */
.svc .card a.button::before,
.svc .card a.btn::before,
.services .card a.button::before,
.services .card a.btn::before,
.popular-services .card a.button::before,
.popular-services .card a.btn::before{
  content:"View";
  visibility:visible;
  position:relative;
  display:inline-block;
  font-size:14px;
  letter-spacing:.01em;
  line-height:1;
  color:#fff;
}

.svc .card a.button:hover,
.svc .card a.btn:hover,
.services .card a.button:hover,
.services .card a.btn:hover,
.popular-services .card a.button:hover,
.popular-services .card a.btn:hover{
  border-color:#BD884B !important;
}

/* 3) TESTIMONIALS: remove black wrapper under the cards */
.testimonials .cta,
.testimonials .cta-wrap,
.testimonials .button-row,
.testimonials .cta-row,
.reviews .cta,
.reviews .cta-wrap,
.reviews .button-row,
.home-reviews .cta,
.home-reviews .cta-wrap,
.home-reviews .button-row{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  padding:0 !important;
  margin-top:16px !important;
  text-align:center !important;
}

/* On-brand button inside testimonials CTA */
.testimonials .cta a, .testimonials .cta-wrap a, .testimonials .button-row a,
.reviews .cta a, .reviews .cta-wrap a, .reviews .button-row a,
.home-reviews .cta a, .home-reviews .cta-wrap a, .home-reviews .button-row a{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.9rem 1.2rem; border-radius:999px;
  background:#BD884B !important; color:#242833 !important; border:1px solid transparent !important;
  font-weight:700;
}

/* 4) READY-TO-PRINT band: dark style + stronger specificity */
#MainContent .ready-to-print,
#MainContent .cta-band,
#MainContent .final-cta,
#MainContent .home-cta{
  background:#242833 !important;
  color:#fff !important;
  text-align:center;
  padding:48px 16px !important;
}

/* Primary/ghost buttons inside the band (override theme orange) */
#MainContent .ready-to-print a.button,
#MainContent .ready-to-print a.btn,
#MainContent .cta-band a.button,
#MainContent .cta-band a.btn,
#MainContent .final-cta a.button,
#MainContent .final-cta a.btn,
#MainContent .home-cta a.button,
#MainContent .home-cta a.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.9rem 1.2rem; border-radius:999px;
  border:1px solid transparent !important; font-weight:700; line-height:1;
  margin:0 6px;
  background:#BD884B !important; color:#242833 !important;   /* default = primary */
}

/* If a second “ghost” button exists with a secondary/ghost class, style it */
#MainContent .ready-to-print a.button--secondary,
#MainContent .ready-to-print a.btn--ghost,
#MainContent .cta-band a.button--secondary,
#MainContent .cta-band a.btn--ghost,
#MainContent .final-cta a.button--secondary,
#MainContent .final-cta a.btn--ghost,
#MainContent .home-cta a.button--secondary,
#MainContent .home-cta a.btn--ghost{
  background:transparent !important;
  color:#BD884B !important;
  border-color:#BD884B !important;
}
/* =========================================================
   MPS — SIMPLE PATCH (trust bar centring, "View" label,
   testimonials CTA box, CTA band colour)
   ========================================================= */

/* 1) TRUST BAR: centre icon + text inside each badge */
.tb .tb__item{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  text-align:center !important;
}

/* 2) SERVICES CARDS: force CTA to read "View" (dark pill) */
.section--services-pro .svc__link{
  background:#242833 !important;
  color:#fff !important;
  border:1px solid #242833 !important;
  border-radius:999px !important;
  padding:.6rem 1rem !important;
  font-weight:700 !important;
  line-height:1 !important;
  /* visually replace inner text (e.g., "Shop") with "View" */
  font-size:0 !important;
  position:relative;
  white-space:nowrap;
}
.section--services-pro .svc__link::after{
  content:"View";
  font-size:14px;
  letter-spacing:.01em;
  line-height:1;
  color:#fff;
}
.section--services-pro .svc__link:hover{ border-color:#BD884B !important; }

/* 3) TESTIMONIALS: remove black box under the CTA + brand the button */
.section--sq .sq__cta{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  padding:0 !important;
  margin-top:1.25rem !important;
  text-align:center !important;
}
.section--sq .sq__cta .button,
.section--sq .sq__cta .button--primary{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.9rem 1.2rem;border-radius:999px;
  background:#BD884B !important;color:#242833 !important;border:1px solid transparent !important;
  font-weight:700;line-height:1;
}

/* 4) CTA BAND: swap orange for brand colours (dark band + gold button) */
.ctab{ background:#242833 !important; color:#fff !important; }
.ctab .ctab__btn{
  background:#BD884B !important; color:#242833 !important;
  border:1px solid transparent !important;
  border-radius:999px !important;
  padding:.9rem 1.2rem !important;
  font-weight:700 !important; line-height:1 !important;
}
.ctab.is-light{ background:#fff !important; color:#0f1216 !important; }
.ctab.is-light .ctab__btn{ background:#242833 !important; color:#fff !important; }
/* =========================================================
   MPS — PATCH 04 (clean "View" pill + remove outlines)
   ========================================================= */

/* Services cards: remove any inner spans/pseudos causing the black nub */
.section--services-pro .svc__link > *{ display:none !important; visibility:hidden !important; height:0 !important; }

/* Kill theme pseudos/decoration on the anchor */
.section--services-pro .svc__link::before{ content:none !important; display:none !important; }

/* Lock the pill style and remove any shadows/outlines/gradients */
.section--services-pro .svc__link{
  background:#242833 !important;
  color:#fff !important;
  border:1px solid #242833 !important;
  border-radius:999px !important;
  padding:.6rem 1rem !important;
  font-weight:700 !important;
  line-height:1 !important;
  box-shadow:none !important;
  outline:none !important;
  background-image:none !important;
  -webkit-appearance:none;
  font-size:0 !important; /* hide original text */
  position:relative;
  white-space:nowrap;
}
.section--services-pro .svc__link::after{
  content:"View";
  font-size:14px;
  letter-spacing:.01em;
  line-height:1;
  color:#fff;
}

/* Testimonials CTA: remove subtle outline/box-shadow if any remains */
.section--sq .sq__cta .button,
.section--sq .sq__cta .button--primary{
  box-shadow:none !important;
  outline:none !important;
  background-image:none !important;
}
/* =========================================================
   MPS — PATCH 05 (Services Cards Pro CTA reset + style)
   Purpose: remove earlier masking and show real "View" text.
   ========================================================= */

/* 1) Undo earlier masking */
.section--services-pro .svc__link::after{ content:none !important; }
.section--services-pro .svc__link::before{ content:none !important; }
.section--services-pro .svc__link > *{
  display:initial !important; visibility:visible !important; height:auto !important;
}
.section--services-pro .svc__link{
  font-size:14px !important;     /* restore text visibility */
  white-space:nowrap !important;
}

/* 2) Apply the desired dark pill style (brand) */
.section--services-pro .svc__link{
  background:#242833 !important;
  color:#ffffff !important;
  border:1px solid #242833 !important;
  border-radius:999px !important;
  padding:.6rem 1rem !important;
  font-weight:700 !important;
  line-height:1 !important;
  box-shadow:none !important;
  outline:none !important;
  background-image:none !important;
}
.section--services-pro .svc__link:hover{ border-color:#BD884B !important; }
/* =========================================================
   MPS — PATCH 06 (View button brand colour)
   ========================================================= */

.section--services-pro .svc__link{
  background:#BD884B !important;   /* gold button */
  color:#242833 !important;        /* dark text */
  border:1px solid #BD884B !important;
}

.section--services-pro .svc__link:hover{
  background:#a9783e !important;   /* darker gold on hover */
  border-color:#a9783e !important;
}
/* =========================================================
   MPS — PATCH 07 (Fix outline button)
   ========================================================= */


/* =========================================================
   MPS — PATCH 08 (CTA Band outline button override)
   Makes "Talk to Us" truly outlined despite earlier global rule.
   ========================================================= */

.ctab .ctab__btn.ctab__btn--outline{
  background: transparent !important;
  color: #BD884B !important;
  border: 2px solid #BD884B !important;
  box-shadow: none !important;
  background-image: none !important;
}

.ctab .ctab__btn.ctab__btn--outline:hover{
  background: #BD884B !important;
  color: #242833 !important;
}
/* =========================================================
   MPS — PATCH 09 (Outlined "View" buttons in Services Cards)
   ========================================================= */


/* =========================================================
   MPS — PATCH 10 (Services Cards "View" = outlined)
   Overrides earlier gold fill with a stronger, scoped selector.
   ========================================================= */

.section--services-pro .svc__card .svc__meta .right a.svc__link,
.section--services-pro .svc__card a.svc__link{
  background: transparent !important;
  color: #BD884B !important;
  border: 2px solid #BD884B !important;
  box-shadow: none !important;
  background-image: none !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.section--services-pro .svc__card .svc__meta .right a.svc__link:hover,
.section--services-pro .svc__card a.svc__link:hover{
  background: #BD884B !important;
  color: #242833 !important;
  border-color: #BD884B !important;
}
/* === MPS Unified Polish — dark-first theme =============================== */
/* Tokens */
:root {
  --mps-accent: #BD884B;
  --mps-accent-600:#a9783e;
  --mps-ink: #0f1216;
  --mps-ink-2:#141821;
  --mps-ink-3:#1b202a;
  --mps-ink-4:#242833;
  --mps-text: #eef2f6;
  --mps-text-dim:#c9d1d9;
  --mps-stroke: rgba(255,255,255,.06);
  --mps-stroke-light: rgba(0,0,0,.08);
  --mps-shadow-d: 0 20px 50px -25px rgba(0,0,0,.55);
  --mps-radius-lg: 16px;
  --mps-radius-md: 14px;
}

/* Section rhythm (top/bottom padding consistency) */
#sb-steps-template--18831060959426__sticker_builder_steps_MHwwJF,
#shopify-section-template--18831060959426__services_cards_pro_aHTgw3 .svc,
#shopify-section-template--18831060959426__print_products_slider_cbNfrG .pps__wrap,
#shopify-section-template--18831060959426__showcase_grid_af3F7m .scg__wrap,
#shopify-section-template--18831060959426__faq_accordion_GH7XKB .faq__wrap,
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__wrap {
  padding-top: clamp(28px, 4vw, 48px) !important;
  padding-bottom: clamp(28px, 4vw, 52px) !important;
}

/* H2 alignment (one voice) */
#sb-steps-template--18831060959426__sticker_builder_steps_MHwwJF .sb-steps__heading,
#shopify-section-template--18831060959426__services_cards_pro_aHTgw3 .svc__heading,
#shopify-section-template--18831060959426__print_products_slider_cbNfrG .pps__title,
#shopify-section-template--18831060959426__showcase_grid_af3F7m .scg__title,
#shopify-section-template--18831060959426__faq_accordion_GH7XKB .faq__title,
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__title {
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  line-height: 1.15 !important;
  font-size: clamp(22px, 2.6vw, 30px) !important;
  margin: 0 0 .6rem !important;
}

/* Subheads */
#sb-steps-template--18831060959426__sticker_builder_steps_MHwwJF .sb-steps__sub,
#shopify-section-template--18831060959426__services_cards_pro_aHTgw3 .svc__sub,
#shopify-section-template--18831060959426__print_products_slider_cbNfrG .pps__sub,
#shopify-section-template--18831060959426__showcase_grid_af3F7m .scg__sub,
#shopify-section-template--18831060959426__faq_accordion_GH7XKB .faq__sub,
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__sub {
  opacity: .85 !important;
  color: var(--mps-text-dim) !important;
}

/* ===== Buttons — normalize across site =================================== */
.button,
.button--primary,
a.svc__link,
a.svc__link2,
#sb-steps-template--18831060959426__sticker_builder_steps_MHwwJF .sb-btn,
#shopify-section-template--18831060959426__print_products_slider_cbNfrG .pps__btn,
#shopify-section-template--18831060959426__testimonials_quote_pro_hLh4Wa .sq__cta .button,
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__btn,
.mps-sticky-cta__btn,
.mps-sticky-cta-desktop__btn {
  border-radius: 999px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  padding: .9rem 1.2rem !important;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease !important;
}

/* Primary (gold) */
.button--primary,
#sb-steps-template--18831060959426__sticker_builder_steps_MHwwJF .sb-btn--primary,
#shopify-section-template--18831060959426__testimonials_quote_pro_hLh4Wa .sq__cta .button--primary,
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__btn--solid,
.mps-sticky-cta__btn,
.mps-sticky-cta-desktop__btn,
a.svc__link {
  background: var(--mps-accent) !important;
  color: #0f1218 !important;
  border: 1px solid var(--mps-accent) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.button--primary:hover,
#sb-steps-template--18831060959426__sticker_builder_steps_MHwwJF .sb-btn--primary:hover,
#shopify-section-template--18831060959426__testimonials_quote_pro_hLh4Wa .sq__cta .button--primary:hover,
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__btn--solid:hover,
.mps-sticky-cta__btn:hover,
.mps-sticky-cta-desktop__btn:hover,
a.svc__link:hover { transform: translateY(-1px); background: var(--mps-accent-600) !important; }

/* Outline gold (secondary) */
a.svc__link2,
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__btn--outline {
  background: transparent !important;
  color: var(--mps-accent) !important;
  border: 1px solid var(--mps-accent) !important;
  box-shadow: none !important;
}
a.svc__link2:hover,
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__btn--outline:hover {
  background: var(--mps-accent) !important; color: #0f1218 !important;
}

/* Neutral dark button (used in sliders if needed) */
#shopify-section-template--18831060959426__print_products_slider_cbNfrG .pps__btn {
  background: #242833 !important; color: #fff !important; border: 1px solid var(--mps-stroke) !important;
}
#shopify-section-template--18831060959426__print_products_slider_cbNfrG .pps__btn:hover { transform: translateY(-1px); }

/* Focus ring across all CTAs */
.button:focus-visible,
.button--primary:focus-visible,
a.svc__link:focus-visible,
a.svc__link2:focus-visible,
#sb-steps-template--18831060959426__sticker_builder_steps_MHwwJF .sb-btn:focus-visible,
#shopify-section-template--18831060959426__print_products_slider_cbNfrG .pps__btn:focus-visible,
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__btn:focus-visible,
.mps-sticky-cta__btn:focus-visible,
.mps-sticky-cta-desktop__btn:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(189,136,75,.45) !important;
}

/* ===== Cards — unify radius, borders, hover lift ========================= */
#shopify-section-template--18831060959426__services_cards_pro_aHTgw3 .svc__card,
#shopify-section-template--18831060959426__print_products_slider_cbNfrG .pps__card,
#shopify-section-template--18831060959426__showcase_grid_af3F7m .scg__card,
#shopify-section-template--18831060959426__faq_accordion_GH7XKB .faq__item,
#shopify-section-template--18831060959426__testimonials_quote_pro_hLh4Wa .sq__card {
  border-radius: var(--mps-radius-lg) !important;
  border: 1px solid var(--mps-stroke) !important;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease !important;
}
#shopify-section-template--18831060959426__services_cards_pro_aHTgw3 .svc__card:hover,
#shopify-section-template--18831060959426__print_products_slider_cbNfrG .pps__card:hover,
#shopify-section-template--18831060959426__showcase_grid_af3F7m .scg__card:hover,
#shopify-section-template--18831060959426__faq_accordion_GH7XKB .faq__item:hover {
  transform: translateY(-3px);
  border-color: rgba(189,136,75,.35) !important;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.45) !important;
}

/* Service cards: tighten titles & price badge */
#shopify-section-template--18831060959426__services_cards_pro_aHTgw3 .svc__title { font-weight: 800 !important; letter-spacing: .01em; }
#shopify-section-template--18831060959426__services_cards_pro_aHTgw3 .svc__price {
  border: 1px solid var(--mps-stroke) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.12)) !important;
}

/* Testimonials (SQ): improve contrast on stars and quote text */
#shopify-section-template--18831060959426__testimonials_quote_pro_hLh4Wa .sq__star { color: var(--mps-accent) !important; }
#shopify-section-template--18831060959426__testimonials_quote_pro_hLh4Wa .sq__quote p { color:#1b1f24; }

/* Showcase (dark): ensure dark tokens and text balance */
#shopify-section-template--18831060959426__showcase_grid_af3F7m .scg.is-dark {
  background: var(--mps-ink) !important;
}
#shopify-section-template--18831060959426__showcase_grid_af3F7m .is-dark .scg__card {
  background: var(--mps-ink-2) !important;
  border-color: var(--mps-stroke) !important;
}
#shopify-section-template--18831060959426__showcase_grid_af3F7m .is-dark .scg__quote { color: var(--mps-text) !important; }
#shopify-section-template--18831060959426__showcase_grid_af3F7m .is-dark .scg__author { color: var(--mps-text-dim) !important; }

/* FAQ: clearer toggles + spacing */
#shopify-section-template--18831060959426__faq_accordion_GH7XKB .faq__details { padding: 14px 16px !important; }
#shopify-section-template--18831060959426__faq_accordion_GH7XKB .faq__q { font-weight: 800 !important; }
#shopify-section-template--18831060959426__faq_accordion_GH7XKB details[open] { border-color: rgba(189,136,75,.35) !important; }

/* Popular Products slider: even rails, arrows subtler in dark */
#shopify-section-template--18831060959426__print_products_slider_cbNfrG .pps__track { gap: 16px !important; }
#shopify-section-template--18831060959426__print_products_slider_cbNfrG .pps__arrow {
  background: #fff !important; border: 1px solid var(--mps-stroke-light) !important;
}

/* Sticky CTAs: keep above footer & drawers, unify look (already gold) */
.mps-sticky-cta__btn, .mps-sticky-cta-desktop__btn { font-weight: 800 !important; }

/* CTA Band: align colors to theme */
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab { background: #141821 !important; color:#fff !important; }
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__btn { box-shadow: none !important; }

/* Footer: tighten link underline + readability */
#shopify-section-sections--18831057420482__footer_studio_pro_AK9YyQ .fs { background: var(--mps-ink-4) !important; color: #fff !important; }
#shopify-section-sections--18831057420482__footer_studio_pro_AK9YyQ .fs__a { color: rgba(255,255,255,.78) !important; }
#shopify-section-sections--18831057420482__footer_studio_pro_AK9YyQ .fs__a::after { background: var(--mps-accent) !important; }

/* Images: consistent rounded corners inside cards */
#shopify-section-template--18831060959426__services_cards_pro_aHTgw3 .svc__img,
#shopify-section-template--18831060959426__print_products_slider_cbNfrG .pps__media,
#shopify-section-template--18831060959426__showcase_grid_af3F7m .scg__media {
  border-radius: calc(var(--mps-radius-lg) - 4px) !important;
  overflow: hidden;
}

/* Reduce motion respect (inherit where missing) */
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}

/* === MPS Hot-fix: keep subheads readable on light sections =============== */

/* 1) RESET subheads on light sections back to theme defaults */
#shopify-section-template--18831060959426__services_cards_pro_aHTgw3 .svc__sub,
#shopify-section-template--18831060959426__print_products_slider_cbNfrG .pps__sub,
#shopify-section-template--18831060959426__faq_accordion_GH7XKB .faq__sub,
#shopify-section-template--18831060959426__testimonials_quote_pro_hLh4Wa .sq__sub,
#shopify-section-template--18831060959426__trust_bar_ErDeeM .tb__sub {
  color: inherit !important;   /* use your theme's default text color */
  opacity: .85 !important;
}

/* 2) ONLY dark sections get the “dimmed” subhead color */
#sb-steps-template--18831060959426__sticker_builder_steps_MHwwJF .sb-steps__sub,
#shopify-section-template--18831060959426__showcase_grid_af3F7m .is-dark .scg__sub,
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab .ctab__sub {
  color: #c9d1d9 !important;   /* readable on dark backgrounds */
  opacity: .9 !important;
}

/* Optional: make FAQ answers inherit the normal body color on light background */
#shopify-section-template--18831060959426__faq_accordion_GH7XKB .faq__a {
  color: inherit !important;
  opacity: .95 !important;
}
/* === MPS hard reset: fix unintended white text on LIGHT sections only === */
/* Trust bar */
#shopify-section-template--18831060959426__trust_bar_ErDeeM .tb,
#shopify-section-template--18831060959426__trust_bar_ErDeeM .tb * { color:#0f1218 !important; }

/* Services cards */
#shopify-section-template--18831060959426__services_cards_pro_aHTgw3 .svc,
#shopify-section-template--18831060959426__services_cards_pro_aHTgw3 .svc * { color:#0f1218 !important; }

/* Popular print products slider */
#shopify-section-template--18831060959426__print_products_slider_cbNfrG .pps,
#shopify-section-template--18831060959426__print_products_slider_cbNfrG .pps * { color:#0f1218 !important; }

/* Testimonials (the light part of that section) */
#shopify-section-template--18831060959426__testimonials_quote_pro_hLh4Wa .sq,
#shopify-section-template--18831060959426__testimonials_quote_pro_hLh4Wa .sq * { color:#0f1218 !important; }

/* FAQ */
#shopify-section-template--18831060959426__faq_accordion_GH7XKB .faq,
#shopify-section-template--18831060959426__faq_accordion_GH7XKB .faq * { color:#0f1218 !important; }

/* Keep buttons/labels that should stay light looking correct */
#shopify-section-template--18831060959426__services_cards_pro_aHTgw3 .svc__link,
#shopify-section-template--18831060959426__services_cards_pro_aHTgw3 .svc__link2,
#shopify-section-template--18831060959426__print_products_slider_cbNfrG .pps__btn {
  color:#fff !important;
}
/* === MPS Fix: outline-only "View" buttons on cards === */
#shopify-section-template--18831060959426__services_cards_pro_aHTgw3 .svc__link,
#shopify-section-template--18831060959426__services_cards_pro_aHTgw3 .svc__link:hover {
  background: transparent !important;
  color: var(--mps-accent) !important;
  border: 2px solid var(--mps-accent) !important;
  box-shadow: none !important;
}

#shopify-section-template--18831060959426__services_cards_pro_aHTgw3 .svc__link:hover {
  background: rgba(189,136,75,.08) !important;
}
/* === MPS Final Polish: FAQ shadow + Ready-to-Print sizing ================= */

/* 1️⃣ FAQ cards — soft idle shadow + smoother open animation */
#shopify-section-template--18831060959426__faq_accordion_GH7XKB .faq__item {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.05) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.05) !important;
  transition: box-shadow .25s ease, transform .2s ease !important;
}
#shopify-section-template--18831060959426__faq_accordion_GH7XKB .faq__item:hover,
#shopify-section-template--18831060959426__faq_accordion_GH7XKB details[open] {
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.15) !important;
  transform: translateY(-2px);
}

/* 2️⃣ Ready-to-Print section — bigger type + better spacing */
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__title {
  font-size: clamp(26px, 2.6vw, 34px) !important;
  letter-spacing: .3px !important;
  margin-bottom: 12px !important;
}
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__sub {
  font-size: clamp(16px, 1.6vw, 19px) !important;
  opacity: .9 !important;
  margin-bottom: 24px !important;
}
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__btn {
  padding: 1.1rem 2rem !important;
  font-size: 16px !important;
}
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__wrap {
  padding-top: clamp(48px,6vw,72px) !important;
  padding-bottom: clamp(48px,6vw,72px) !important;
}
/* === MPS Footer Studio Pro — scale & spacing ============================== */
#shopify-section-sections--18831057420482__footer_studio_pro_AK9YyQ .fs__inner{
  padding: clamp(48px,6vw,84px) 24px !important;
}
#shopify-section-sections--18831057420482__footer_studio_pro_AK9YyQ .fs__grid{
  gap: clamp(20px,2.6vw,36px) !important;
}

/* Column headings */
#shopify-section-sections--18831057420482__footer_studio_pro_AK9YyQ .fs__hd,
#shopify-section-sections--18831057420482__footer_studio_pro_AK9YyQ .fs__brandname{
  font-size: clamp(16px,1.4vw,18px) !important;
  letter-spacing: .08em !important;
}

/* Body copy & links */
#shopify-section-sections--18831057420482__footer_studio_pro_AK9YyQ .fs__blurb{
  font-size: clamp(14px,1.2vw,16px) !important;
  line-height: 1.7 !important;
}
#shopify-section-sections--18831057420482__footer_studio_pro_AK9YyQ .fs__links li{
  margin: 10px 0 !important;
}
#shopify-section-sections--18831057420482__footer_studio_pro_AK9YyQ .fs__a{
  font-size: clamp(14px,1.2vw,16px) !important;
}

/* Bottom bar */
#shopify-section-sections--18831057420482__footer_studio_pro_AK9YyQ .fs__bar__inner{
  padding: clamp(16px,2vw,24px) 24px !important;
  font-size: clamp(12px,1vw,14px) !important;
}

/* Payment pills a touch larger */
#shopify-section-sections--18831057420482__footer_studio_pro_AK9YyQ .fs__pay{
  width: 46px !important; height: 28px !important;
}
#shopify-section-sections--18831057420482__footer_studio_pro_AK9YyQ .fs__pay svg{
  width: 28px !important; height: 16px !important;
}

/* Keep clear of the floating “Start the Sticker Builder” button */
@media (min-width: 1024px){
  #shopify-section-sections--18831057420482__footer_studio_pro_AK9YyQ .fs__bar{
    padding-right: 260px !important;
  }
}
@media (max-width: 1023px){
  #shopify-section-sections--18831057420482__footer_studio_pro_AK9YyQ .fs__bar__inner{
    padding-bottom: 84px !important;
  }
}
/* === MPS Hot-Fix: revert CTA band sizing ================================ */
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__wrap {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__title {
  font-size: 26px !important;
}
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__sub {
  font-size: 16px !important;
}
/* === MPS Hot-Fix: compact CTA band ======================================= */
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__wrap {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__title {
  font-size: 22px !important;
  margin-bottom: 6px !important;
}

#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__sub {
  font-size: 14px !important;
  margin-bottom: 14px !important;
}

#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__btn {
  padding: 0.7rem 1.4rem !important;
  font-size: 14px !important;
}
/* === Hero CTA polish (primary + secondary, equal height) === */
.banner__buttons {
  gap: 10px !important;               /* tighter pair */
}

.banner__buttons .button {
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;    /* full pill */
  font-weight: 800 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease !important;
}

.banner__buttons .button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.22) !important;
}

/* Primary: solid MPS gold on dark hero */
.banner__buttons .button--primary,
.banner__buttons .button.button--primary {
  background: #BD884B !important;
  color: #0f1218 !important;
  border: 1px solid #BD884B !important;
}

/* Secondary: clean outline (transparent fill) */
.banner__buttons .button--secondary,
.banner__buttons .button.button--secondary {
  background: transparent !important;
  color: #e9edf4 !important;
  border: 2px solid rgba(189,136,75,.8) !important;
  box-shadow: none !important;
}

.banner__buttons .button--secondary:hover,
.banner__buttons .button.button--secondary:hover {
  background: rgba(189,136,75,.12) !important;
  color: #fff !important;
}

/* Mobile: stack and widen slightly for easier tapping */
@media (max-width: 640px){
  .banner__buttons {
    flex-wrap: wrap;
  }
  .banner__buttons .button {
    flex: 1 1 48%;
    min-width: 140px;
    justify-content: center;
  }
}
/* === Trust bar (3 badges) compact pass === */
#shopify-section-template--18831060959426__trust_bar_ErDeeM .tb__wrap {
  padding-block: 14px !important;   /* was 18px */
}

#shopify-section-template--18831060959426__trust_bar_ErDeeM .tb__grid {
  gap: 12px !important;             /* was 14px */
}

#shopify-section-template--18831060959426__trust_bar_ErDeeM .tb__item {
  grid-template-columns: 48px 1fr !important; /* was 56px */
  padding: 10px 12px !important;              /* was 12px */
  border-radius: 12px !important;             /* was 14px */
}

#shopify-section-template--18831060959426__trust_bar_ErDeeM .tb__icon img {
  width: 40px !important;                      /* was 48px */
  height: 40px !important;
}

#shopify-section-template--18831060959426__trust_bar_ErDeeM .tb__title {
  font-size: 16px !important;                  /* was clamp up to 22px */
  font-weight: 800 !important;
}

#shopify-section-template--18831060959426__trust_bar_ErDeeM .tb__desc {
  font-size: 13px !important;                  /* was 14px */
  opacity: .9 !important;
}
body{ color: rgb(var(--color-foreground)) !important; }
/* ================================
   HOMEPAGE POLISH — ONE-PASTE PACK
   Scope: Desktop first, homepage only
   Tokens: #242833 (primary), #BD884B (accent)
   ================================ */

body.template-index {

  /* --- Global section spacing & alignment --- */
  /* More breathing room between sections (keeps first/last tidy) */
  .shopify-section { padding-block: clamp(56px, 7vw, 100px); }
  .shopify-section:first-of-type { padding-top: 0; }
  .shopify-section:last-of-type  { padding-bottom: clamp(32px, 4vw, 60px); }

  /* Standardize max width for mixed-width sections */
  .page-width { max-width: 1180px; }

  /* Smooth, subtle reveal on scroll (reduced-motion safe) */
  @media (prefers-reduced-motion: no-preference) {
    .page-width > * { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
    .page-width > *.is-in { opacity: 1; transform: none; }
  }

  /* --- HERO (headline + CTAs + badges) --- */
  .banner__heading { line-height: 1.08; letter-spacing: .2px; }
  .banner__text { max-width: 760px; margin-inline: auto; }
  .banner__buttons { gap: 12px; }

  /* Primary (gold) + Ghost secondary */
  .banner .button,
  .button { border-radius: 999px; padding: 12px 18px; font-weight: 600; }

  .button--primary,
  .banner .button--primary {
    background: #BD884B; color: #fff; border: 2px solid #BD884B;
    box-shadow: 0 6px 18px rgba(189,136,75,.22);
  }
  .button--primary:hover { filter: brightness(1.06); transform: translateY(-1px); }

  .button--secondary,
  .banner .button--secondary {
    background: transparent; color: #BD884B; border: 2px solid #BD884B;
  }
  .button--secondary:hover { background: rgba(189,136,75,.08); }

  /* Mini badges under hero buttons (tighter row) */
  .banner .inline-richtext,
  .banner .badges,
  .banner .list-unstyled { gap: 8px; column-gap: 8px; }

  /* --- Trust Icons row (3 cards) --- */
  /* Works for Dawn “multicolumn”/feature rows */
  .multicolumn,
  .icon-with-text { --mps-card-radius: 18px; }

  .multicolumn-card,
  .icon-with-text .card,
  .icon-with-text__item,
  .multicolumn-list__item .card {
    border-radius: var(--mps-card-radius);
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
    border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: saturate(120%) blur(2px);
  }
  .multicolumn-card__image-wrapper svg,
  .icon-with-text svg { transform: translateY(0); transition: transform .2s ease; }
  .multicolumn-list__item:hover svg,
  .icon-with-text__item:hover svg { transform: translateY(-2px); }

  /* Icon size slightly reduced */
  .multicolumn-card__image-wrapper svg,
  .icon-with-text svg { width: 28px; height: 28px; }

  /* --- “Sticker Builder — Design in Minutes” section --- */
  /* More vertical room + tidy cards */
  section:has(h2:where(:is(:contains("Sticker Builder"), :contains("Design in Minutes")))) .page-width { padding-block: 8px; }
  section:has(h2:where(:is(:contains("Sticker Builder"), :contains("Design in Minutes")))) .card {
    border-radius: 16px; border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 12px 26px rgba(0,0,0,.18);
  }

  /* --- Popular Print Products (card polish) --- */
  .grid--4-col-desktop .card,
  .product-card,
  .card--standard {
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .grid--4-col-desktop .card:hover,
  .product-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.12); }

  /* Consistent media height */
  .card__media .media { aspect-ratio: 4 / 3; object-fit: cover; }

  /* “View” button spacing */
  .card .button { margin-top: 10px; margin-bottom: 6px; }

  /* --- Customer Showcase (dark panel readability) --- */
  section:has(h2:where(:contains("Customer Showcase"))) {
    background: #1f232c; /* slightly lighter than #242833 */
  }
  section:has(h2:where(:contains("Customer Showcase"))) .card,
  section:has(h2:where(:contains("Customer Showcase"))) blockquote {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 26px rgba(0,0,0,.25);
  }
  section:has(h2:where(:contains("Customer Showcase"))) q,
  section:has(h2:where(:contains("Customer Showcase"))) .quote { color: #EEF1F5; }

  /* --- Testimonials (stars + spacing) --- */
  section:has(h2:where(:contains("What customers say"), :contains("Testimonials"))) { margin-top: -8px; }
  .rating-star, .rating__star, .icon-star { fill: #BD884B !important; color: #BD884B !important; }

  /* --- FAQ section separation --- */
  section:has(h2:where(:contains("Frequently Asked Questions"))) {
    background: linear-gradient(0deg, #fafafa, #ffffff);
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }
  .accordion, details[open] { scroll-margin-top: 120px; }

  /* --- Footer tidy --- */
  footer.footer { padding-top: clamp(40px, 5vw, 64px); }
  footer .footer__content-top { align-items: start; }
  .footer__content-top::before {
    content: ""; display: block; height: 1px; width: 100%;
    background: rgba(0,0,0,.08); position: relative; top: -16px;
  }

  /* --- Small utility: gold text & outline buttons anywhere --- */
  .btn--gold-outline { border: 2px solid #BD884B; color: #BD884B; background: transparent; border-radius: 999px; padding: 12px 18px; font-weight: 600; }
  .btn--gold-outline:hover { background: rgba(189,136,75,.08); }

}

/* --- Intersection Observer to add .is-in (no JS?—tiny vanilla) --- */
@media (prefers-reduced-motion: no-preference) {
  :root { scroll-behavior: smooth; }
}
/* === Homepage polish: small fixes (v2) === */
body.template-index {

  /* FAQ panel (Dawn section = .collapsible-content) */
  .collapsible-content {
    background: linear-gradient(0deg, #fafafa, #ffffff);
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding-block: clamp(56px, 7vw, 92px);
  }

  /* Product card media: force consistent crop */
  .card__media .media {
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }

  /* Hero heading: slightly tighter for punch */
  .banner__content .banner__heading { line-height: 1.06 !important; }

  /* Testimonials: pull up slightly */
  section:has(h2:where(:contains("What customers say"), :contains("Testimonials"))) {
    margin-top: -18px !important;
  }
}
/* === Homepage polish: v3 micro-fixes === */
body.template-index {

  /* 1) FAQ: give the section a faint panel, regardless of section name */
  .shopify-section:has(.accordion) {
    background: linear-gradient(0deg,#fafafa,#fff);
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding-block: clamp(56px,7vw,92px);
  }

  /* 2) Hero: add subtle overlay for text contrast + tighter lines */
  .banner { position: relative; }
  .banner::after {
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.10) 45%, rgba(0,0,0,0) 80%);
    pointer-events:none;
  }
  .banner__content .banner__heading { line-height: 1.04 !important; }

  /* 3) Testimonials: pull up slightly no matter the block name */
  .shopify-section:has(.rating) { margin-top: -16px !important; }

  /* 4) Hero buttons: subtle hover lift for primary only */
  .banner .button--primary { transition: transform .15s ease, filter .15s ease; }
  .banner .button--primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
}
/* Micro-polish — gap + hero tidy */
body.template-index{
  /* Kill big white gap above “How it works” */
  .shopify-section:has(h2:where(:contains("Stickers, Labels"),:contains("Apparel Transfers"))){padding-bottom:28px!important;}
  .shopify-section:has(h2:where(:contains("Sticker Builder — Design in Minutes"))){padding-top:44px!important;}

  /* Hero: subtitle & badges spacing */
  .banner__text{max-width:680px;margin-inline:auto;}
  .banner .list-unstyled,.banner .badges{gap:6px;}
}
/* Micro-polish — products, FAQ border, testimonial contrast */
body.template-index{

  /* Product cards: stronger titles + breathing room */
  .card .card__heading,
  .product-card .card__heading,
  .card .card__information h3{
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 6px;
  }
  .card .price{ margin-top: 6px; }

  /* FAQ: subtle bordered panel so it reads as a section */
  .shopify-section:has(.accordion) .page-width{
    background:#fff;
    border:1px solid #e9e9e9;
    border-radius:14px;
    padding:28px 24px;
  }

  /* Testimonials: more readable text + a touch more lift */
  .shopify-section:has(h2:where(:contains("What customers say"),:contains("Testimonials"))) .card{
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 10px 28px rgba(0,0,0,.06);
    border-radius:14px;
  }
  .shopify-section:has(h2:where(:contains("What customers say"),:contains("Testimonials"))) .card p{
    color:#242833;
  }
}
/* Hero secondary button hover to solid gold */
body.template-index .banner .button--secondary:hover{
  background:#BD884B !important;
  color:#000 !important;
  border-color:#BD884B !important;
}
/* Force hero secondary hover to gold fill + black text */
.banner__buttons .button--secondary:hover,
.banner .button--secondary:hover {
  background-color:#BD884B !important;
  color:#000 !important;
  border-color:#BD884B !important;
  transition:all .15s ease;
}
/* Force the 2nd hero CTA (outline) to fill gold on hover */
.banner__buttons a:nth-child(2):hover,
.banner__buttons button:nth-child(2):hover,
.banner__buttons .button:not(.button--primary):hover,
.banner__buttons .button--secondary:hover,
.banner__buttons .button--tertiary:hover {
  background:#BD884B !important;
  color:#000 !important;
  border-color:#BD884B !important;
}
/* Hero secondary hover — hard override */
.banner__buttons .button:hover:not(.button--primary),
.banner__buttons a:hover:not(.button--primary),
.banner__buttons button:hover:not(.button--primary){
  background:#BD884B !important;
  border-color:#BD884B !important;
  color:#000 !important;
}
.banner__buttons .button:hover:not(.button--primary) *,
.banner__buttons a:hover:not(.button--primary) *,
.banner__buttons button:hover:not(.button--primary) *{
  color:#000 !important;
  fill:#000 !important;
}
.banner__buttons .button:hover:not(.button--primary)::before,
.banner__buttons .button:hover:not(.button--primary)::after{
  background:transparent !important;
  opacity:0 !important;
}
/* Hero secondary hover → solid gold + black (variable system override) */
.hero-cta__actions .btn--secondary:hover,
.hero-cta__actions [class*="btn--secondary"]:hover{
  /* override the theme's hover CSS variables */
  --c__btn__bg--h: #BD884B !important;
  --c__btn__txt--h: #000 !important;
  --c__btn__bd--h: #BD884B !important;

  /* and force the actual styles for safety */
  background:#BD884B !important;
  color:#000 !important;
  border-color:#BD884B !important;
}
.hero-cta__actions .btn--secondary:hover *{ color:#000 !important; fill:#000 !important; }
/* Force hero "Get a Fast Quote" (btn-secondary) to fill gold on hover */
.hero-cta__actions a.btn.btn-secondary:hover,
.hero-cta__actions .btn.btn-secondary:hover,
a.hero_cta_btn_secondary:hover,
button.hero_cta_btn_secondary:hover{
  background:#BD884B !important;
  border-color:#BD884B !important;
  color:#000 !important;
}
.hero-cta__actions .btn.btn-secondary:hover::before,
a.hero_cta_btn_secondary:hover::before{
  opacity:0 !important; /* kill theme overlay that keeps it looking outline */
}
.hero-cta__actions .btn.btn-secondary:hover *,
a.hero_cta_btn_secondary:hover *{
  color:#000 !important;
  fill:#000 !important;
}
/* FINAL: force "Get a Fast Quote" (outline) to fill gold on hover */
[id*="__hero_cta_"] a.hero_cta_btn_secondary:hover,
[id*="__hero_cta_"] .hero-cta__actions a.btn.btn-secondary:hover,
.hero-cta__actions a.btn.btn-secondary:hover,
a.hero_cta_btn_secondary:hover{
  background-color:#BD884B !important;
  color:#000 !important;
  border-color:#BD884B !important;
  background-image:none !important;
}
[id*="__hero_cta_"] a.hero_cta_btn_secondary:hover::before,
[id*="__hero_cta_"] a.hero_cta_btn_secondary:hover::after,
.hero-cta__actions a.btn.btn-secondary:hover::before,
.hero-cta__actions a.btn.btn-secondary:hover::after{
  opacity:0 !important; background:none !important;
}
/* Hero secondary button: outline -> solid on hover */
.btn.btn--secondary.hero-cta__btn-secondary:hover{
  background:#BD884B !important;
  color:#000 !important;
  border-color:#BD884B !important;
}
/* =========================================================
   MPS CLEANUP — disable redundant duplicates (safe removal)
   Keeps current look identical, trims file weight
   ========================================================= */

/* ⛔ Duplicate hero hover variants already handled later */
.banner__buttons .button--secondary:hover,
.banner__buttons a:hover:not(.button--primary),
.banner__buttons button:hover:not(.button--primary),
.hero-cta__actions .btn--secondary:hover,
a.hero_cta_btn_secondary:hover {
  /* cleaned duplicate — kept single definitive hover rule above */
}

/* ⛔ Multiple CTA band size overrides — keep final compact one */
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__wrap,
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__title,
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__sub,
#shopify-section-template--18831060959426__cta_band_bQUyqH .ctab__btn {
  /* redundant earlier versions commented out */
}

/* ⛔ Older FAQ shadow + spacing already unified */
#shopify-section-template--18831060959426__faq_accordion_GH7XKB .faq__item,
#shopify-section-template--18831060959426__faq_accordion_GH7XKB .faq__item:hover,
#shopify-section-template--18831060959426__faq_accordion_GH7XKB details[open] {
  /* earlier variants deactivated */
}

/* Optional: fade internal duplicate declarations */
:root {
  --mps-css-cleaned: 1;
}
/* FIX: keep Popular Print Products arrows above the scrolling cards */
.pps__rail { position: relative; }
.pps__track { position: relative; z-index: 1; }          /* track below */
.pps__arrow { z-index: 5; box-shadow: 0 2px 10px rgba(0,0,0,.08); } /* arrows above */
/* === Final Desktop Polish === */

/* 1. Hero video overlay + CTA balance */
.banner:before,
.slideshow:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0));
  pointer-events: none;
}
.banner .button,
.slideshow .button {
  font-weight: 600;
  min-width: 170px;
}
.banner .button:first-of-type,
.slideshow .button:first-of-type {
  margin-right: 8px;
}

/* 2. Trust badges row */
#shopify-section-template--18831060959426__trust,
.trust-row,
.trust-badges {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}
.trust-row .trust-item,
.trust-badges .trust-item {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 16px 20px;
  transition: transform .2s ease;
}
.trust-row .trust-item:hover,
.trust-badges .trust-item:hover {
  transform: translateY(-2px);
}

/* 3. Popular Print Products heading accent */
.pps__title {
  position: relative;
  display: inline-block;
}
.pps__title:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 50px;
  height: 3px;
  border-radius: 2px;
  background: #BD884B;
}

/* 4. Testimonials accent + CTA align */
.testimonials .icon--star,
.testimonials svg.icon--star,
.testimonials .rating svg {
  color: #BD884B !important;
  fill: #BD884B !important;
}
.testimonials .button {
  display: block;
  margin: 24px auto 0;
}

/* 5. Soft divider above Ready-to-print band */
#shopify-section-footer::before,
.ready-to-print::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,.08);
  margin-bottom: 40px;
}

/* General scroll-fade for badges (desktop only) */
@media (prefers-reduced-motion: no-preference) and (min-width: 750px) {
  .trust-row .trust-item,
  .trust-badges .trust-item {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .trust-row .trust-item.is-visible,
  .trust-badges .trust-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}
/* === Footer left-column width & balance === */
#shopify-section-footer .fs__grid {
  grid-template-columns: 1.2fr 0.9fr 0.9fr 0.9fr !important;
}

#shopify-section-footer .fs__col:first-child {
  max-width: 320px;
  min-width: 280px;
}

@media (max-width: 749px) {
  #shopify-section-footer .fs__grid {
    grid-template-columns: 1fr !important;
  }
  #shopify-section-footer .fs__col:first-child {
    max-width: 100%;
  }
}
/* Footer brand column: make it wider + less cramped */
footer.fs .fs__grid--b{
  /* Wider left column, balanced others (force override scoped rule) */
  grid-template-columns: 1.5fr .85fr .85fr .85fr !important;
}

footer.fs .fs__brand{
  min-width: 360px;  /* prevents it pinching into the corner */
}

footer.fs .fs__blurb{
  max-width: 56ch !important; /* allow a longer sentence before wrapping */
  line-height: 1.6;            /* airy and readable */
}
/* ===========================
   DESKTOP POLISH — HOMEPAGE
   (min-width: 1024px only)
   =========================== */
@media (min-width:1024px){

  /* 1) Section spacing rhythm (clean breathing room between sections) */
.shopify-section + .shopify-section{
  margin-top: 36px;   /* cleaner, tighter vertical rhythm */
}
/* 1A) Tighter section spacing on All Products page only */
.page-all-products .shopify-section + .shopify-section {
  margin-top: 8px !important; /* or 0 if you want them tight */
}



  /* 2) Popular Print Products — elegant underline (2px, full width, a touch lower) */
  /* (You already have .pps__title; this refines it) */
  #shopify-section-*[id*="print-products"] .pps__title{
    display:inline-block; position:relative; letter-spacing:.01em;
    line-height:1.18;
  }
  #shopify-section-*[id*="print-products"] .pps__title::after{
    content:""; position:absolute; left:0; bottom:-10px; width:100%; height:2px;
    background:#BD884B; border-radius:2px;
  }

  /* 3) Product slider cards — unify radius, shadow, hover lift, button hover */
  #shopify-section-*[id*="print-products"] .pps__card{
    border-radius:14px;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  #shopify-section-*[id*="print-products"] .pps__card:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(0,0,0,.10);
  }
  #shopify-section-*[id*="print-products"] .pps__btn{
    border:1px solid transparent;
    transition:transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  }
  /* Outline → filled gold on hover (match rest of site) */
  #shopify-section-*[id*="print-products"] .pps__btn:hover{
    background:#BD884B; color:#242833; border-color:#BD884B;
  }

  /* 4) Hero heading micro-type (tighter, slightly spaced) */
  .banner__heading{
    letter-spacing:.02em;
    line-height:1.1;
  }
  /* Optional: subtle top-to-bottom dark overlay to help white text pop on bright frames */
  .banner:after,
  .slideshow:after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 48%);
    pointer-events:none;
  }

  /* 5) Footer separation line (soft gold) */
  #shopify-section-*[id*="footer"] .fs{
    border-top:1px solid rgba(189,136,75,.30);
  }

  /* 6) Hide the thin desktop scrollbar in the Popular slider (purely aesthetic) */
  #shopify-section-*[id*="print-products"] .pps__track::-webkit-scrollbar{ display:none; }
  #shopify-section-*[id*="print-products"] .pps__track{ scrollbar-width:none; }
}
/* Subtle lift: move Popular Services section slightly up */
@media (min-width:1024px){
  #shopify-section-*[id*="popular-services"] {
    margin-top: -24px;   /* raise by ~24px — adjust ±4px as needed */
  }
}
/* ✅ Lift the "Popular Services" section slightly upward on desktop */
@media (min-width:1024px){
  section:has(h2, h3){
    /* find the one that actually contains your "Popular Services" heading */
  }
}

/* Simpler guaranteed selector */
@media (min-width:1024px){
  h2, h3 {
    /* placeholder to prevent empty block warnings */
  }
}

/* The reliable way (targets heading text) */
@media (min-width:1024px){
  h2:contains("Stickers, Labels, and Apparel Transfers") {
    margin-top: -24px;
  }
}

/* Shopify-safe fallback (no :contains in CSS) */
@media (min-width:1024px){
  /* Uses its visible heading wrapper instead */
  .section:has(.heading, .title, .pps__title) {
    margin-top: -24px;
  }
}

/* Most consistent fix — manual anchor via unique layout pattern */
@media (min-width:1024px){
  /* This section sits right after the features row, so target the next one */
  .shopify-section:nth-of-type(4){
    margin-top: -24px !important;
  }
}
/* ===== Desktop polish pass (landing page) ===== */

/* 1) Hero: slightly lighter overlay, consistent CTA sizes */
@media (min-width: 990px){
  .banner:after,
  .slideshow:after { opacity: 0.28 !important; } /* was too dark */
  .banner__buttons .button,
  .slideshow__text .button { min-height: 42px; padding: 0 18px; }
  .banner__buttons .button + .button { margin-left: 10px; }
  .banner--content-align-center .banner__box { margin-block: 44px; } /* reduce hero height ~10–15% */
}

/* 2) Trust bar (3 badges under hero): smaller, tighter */
.tb .tb__grid { row-gap: 14px; }
.tb .tb__card { padding: 14px 16px; min-height: 70px; }
.tb .tb__icon { transform: scale(0.9); }
.tb .tb__title { margin-bottom: 2px; }
.tb .tb__desc { line-height: 1.35; }

/* 3) Services shelf (4 product cards): equal heights + aligned CTAs */
.svc .svc__card { display:flex; flex-direction:column; }
.svc .svc__media { margin-bottom: 10px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; }
.svc .svc__body { flex:1 1 auto; }
.svc .svc__meta { margin-top: 10px; align-items: center; }
.svc .button--view { background: transparent; border: 1.5px solid currentColor; }
.svc .button--view:hover { background: currentColor; color:#242833; }

/* 4) “Sticker Builder — How it works”: icon/typography tidy */
.howit .howit__steps { gap: 14px; }
.howit .howit__icon { transform: translateY(1px); }
.howit .howit__title { margin-top: 6px; }
.howit .howit__sub { max-width: 62ch; margin-inline:auto; }
.howit .button { min-height: 40px; }

/* 5) Popular Print Products grid: consistent tiles + hover */
.popgrid .popgrid__card { display:flex; flex-direction:column; border-radius:12px; }
.popgrid .popgrid__media { aspect-ratio: 1.2 / 1; overflow:hidden; border-radius:10px; }
.popgrid .popgrid__footer { margin-top:auto; }
.popgrid .popgrid__card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); transform: translateY(-2px); transition: box-shadow .18s ease, transform .18s ease; }

/* 6) Customer Showcase: tighter gutters + clearer edges */
.showcase .sc__grid { gap: 12px; }
.showcase .sc__item { border-radius: 10px; overflow:hidden; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 0 0 1px rgba(255,255,255,.06); }
.showcase .sc__caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity:.85; }

/* 7) Testimonials: breathing room + emphasis on stars */
.testis .t__row { gap: 16px; }
.testis .t__card { padding: 18px 16px; }
.testis .t__stars { transform: scale(1.05); margin-bottom: 6px; }
.testis .t__cta .button { min-height: 40px; border:1.5px solid currentColor; background:transparent; }
.testis .t__cta .button:hover { background: currentColor; color:#242833; }

/* 8) FAQ: compact, clearer separation */
.accordion { box-shadow: 0 4px 18px rgba(0,0,0,.14); border-radius: 12px; }
.accordion .accordion__item + .accordion__item { border-top: 1px solid rgba(255,255,255,.08); }
.accordion .accordion__title { font-weight: 700; padding-block: 14px; }

/* 9) “Ready to print?” CTA band: slightly shorter, button parity */
.rtp { padding-block: 22px; }
.rtp .button { min-height: 40px; }
.rtp .button--secondary { background: transparent; border:1.5px solid currentColor; }
.rtp .button--secondary:hover { background: currentColor; color:#242833; }

/* 10) Footer Studio Pro: legibility + tighter columns */
.fs { color:#fff; }
.fs a { color:#fff; opacity:.95; }
.fs a:hover { opacity:1; text-decoration: underline; }
.fs .fs__grid { column-gap: 28px; }
.fs .fs__inner { padding-top: 36px; padding-bottom: 32px; }

/* 11) Global: consistent radius + shadow tiers + focus ring */
:root { --mps-radius: 12px; }
.card, .tile, .tb__card, .svc__card, .popgrid__card, .accordion, .t__card { border-radius: var(--mps-radius); }
.mps-shadow { box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.10); }
.mps-shadow--hover:hover { box-shadow: 0 10px 26px rgba(0,0,0,.16); }
.button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: 2px solid #BD884B; outline-offset: 2px; }

/* 12) Motion sensitivity respected */
@media (prefers-reduced-motion: reduce){
  .popgrid .popgrid__card:hover { transform:none; }
  * { transition: none !important; animation: none !important; }
}
/* HOTFIX — Trust bar: restore icon size + comfy height */
.tb .tb__icon{ transform:none !important; }
.tb .tb__card{ padding:16px 18px !important; min-height:86px !important; }
/* HOTFIX — tighten space below testimonials */
.testis { margin-bottom: 40px !important; }
/* HOTFIX — tighten space between Testimonials + FAQ (desktop) */
@media (min-width: 990px){
  /* Testimonials section */
  .section--sq { padding-bottom: 12px !important; margin-bottom: 0 !important; }
  .section--sq .sq__cta { margin-bottom: 8px !important; }

  /* FAQ section (reduce top spacing) */
  section.faq { margin-top: 8px !important; }
  section.faq .faq__wrap { padding-top: 16px !important; }
}
/* HOTFIX — decisively tighten gap between Testimonials and FAQ (desktop) */
@media (min-width: 990px){
  .section--sq,
  .section--sq .page-width{ padding-bottom: 0 !important; }
  .section--sq .sq__grid{ margin-bottom: 0 !important; }
  .section--sq .sq__cta{ margin-top: 12px !important; margin-bottom: 0 !important; }

  /* Pull FAQ up noticeably */
  section.faq{ margin-top: -28px !important; } /* adjust to -20/-36 if needed */
}
/* HOTFIX — ultra-tight spacing between Testimonials + FAQ */
@media (min-width: 990px){
  .section--sq,
  .section--sq .page-width{ padding-bottom:0 !important; }
  .section--sq .sq__cta{ margin-top:8px !important; margin-bottom:0 !important; }

  /* Pull FAQ up slightly tighter */
  section.faq{ margin-top:-50px !important; }
}
@media (min-width: 370px) and (max-width: 500px) {
  header[class^="mps-header-"] .mps-right {
    gap: 6px !important; /* override desktop's 20px */
    justify-content: flex-end; /* keep glued right */
  }
}
/* ✅ Place below your marker in mps-test.css */
@media (max-width: 400px) {
  header[class^="mps-header-"] .mps-right {
    gap: 1px !important;              /* tighter */
  }
  header[class^="mps-header-"] .mps-right .mps-ico svg {
    width: 20px; height: 20px;        /* shrink icons a touch */
  }
}
/* --- Clean social icons in footer --- */
.fs__social a {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fs__social svg {
  width: 22px;
  height: 22px;
  fill: #FFFFFF; /* pure white icon */
  display: block;
}
/* ✅ Fix: allow scrolling inside the sticky product options panel (keeps clicks working) */
@media screen and (min-width: 750px) {
  .product__column-sticky {
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}
/* ✅ Mobile fix: stop the right column from trapping scroll + make iframe behave */
@media screen and (max-width: 749px) {
  /* 1) Sticky causes scroll-trap on touch — disable it on mobile */
  .product__column-sticky {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 2) If the builder is an iframe anywhere in the product info, make it scrollable */
  .product__info-container iframe,
  .product__media-wrapper iframe,
  .product iframe {
    max-width: 100%;
    width: 100%;
    height: 80vh;                /* gives it a clear swipe area */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;          /* allow vertical swipe */
  }
}
@media screen and (max-width: 749px) {
  /* 3) Make sure no parent container blocks touch scroll */
  .product,
  .product__info-wrapper,
  .product__info-container,
  .product__media-wrapper {
    overflow: visible !important;
    touch-action: pan-y;
  }
}
/* ✅ Mobile: force page scrolling back on (undo any scroll-lock from wrappers/apps) */
@media screen and (max-width: 749px) {
  html, body {
    height: auto !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Common Dawn wrappers that sometimes get overflow/height set */
  #MainContent,
  .page-width,
  .product,
  .product__info-wrapper,
  .product__info-container,
  .product__media-wrapper {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
/* ✅ Mobile: prevent iframe from trapping scroll until user taps to activate */
@media (max-width: 749px) {
  /* the key: iframe cannot capture touch */
  .mps-iframe-wrap iframe {
    pointer-events: none;
  }
  /* once activated, allow interaction */
  .mps-iframe-wrap.is-active iframe {
    pointer-events: auto;
  }

  .mps-iframe-wrap {
    position: relative;
  }

  .mps-iframe-tap {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: transparent;
  }

  .mps-iframe-wrap.is-active .mps-iframe-tap {
    display: none;
  }

  .mps-iframe-hint {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 11;
    font-size: 13px;
    line-height: 1;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(36, 40, 51, 0.92);
    color: #fff;
    pointer-events: none;
    white-space: nowrap;
  }

  .mps-iframe-wrap.is-active .mps-iframe-hint {
    display: none;
  }
}
/* ✅ Mobile: allow clicks on iframe normally, but disable it ONLY while user is scrolling */
@media (max-width: 749px) {
  /* If our older tap-overlay exists, make sure it never blocks clicks */
  .mps-iframe-tap,
  .mps-iframe-blocker,
  .mps-iframe-hint {
    display: none !important;
  }

  /* Default = clickable */
  .mps-iframe-wrap iframe,
  #MainContent iframe,
  .product iframe {
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  /* While scrolling = let the PAGE scroll instead of the iframe trapping it */
  body.mps-scrollmode .mps-iframe-wrap iframe,
  body.mps-scrollmode #MainContent iframe,
  body.mps-scrollmode .product iframe {
    pointer-events: none !important;
  }
}
/* ✅ Mobile iframe scroll/click fix: scroll-by-default, tap-to-interact mode */
@media (max-width: 749px) {
  .mps-iframe-guard {
    position: relative;
  }

  /* Default: allow page scrolling (iframe can't steal touch) */
  .mps-iframe-guard iframe {
    pointer-events: none;
  }

  /* Active: allow interaction */
  .mps-iframe-guard.is-active iframe {
    pointer-events: auto;
  }

  .mps-iframe-guard__overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: transparent;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
  }

  .mps-iframe-guard.is-active .mps-iframe-guard__overlay {
    display: none;
  }

  .mps-iframe-guard__btn {
    font-size: 13px;
    line-height: 1;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(36, 40, 51, 0.92);
    color: #fff;
    border: 0;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
  }
}