/**
 * MG coupon restyle — wave design for [mg_offers] / [mg_offer] output.
 * Targets existing markup. No absolute-positioning tricks; sections render
 * in natural order so missing pieces (phone, cta, expiration) degrade cleanly.
 *
 * Blurb ("Locally owned…") is hardcoded below. Everything else dynamic.
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ─── Tokens ─── */
.offers {
  --offer-navy:        #1c3865;
  --offer-navy-deep:   #122548;
  --offer-blue:        #3a73c6;
  --offer-blue-light:  #b8d4f1;
  --offer-blue-pale:   #e7f0fb;
  --offer-red:         #c8252c;
  --offer-red-deep:    #a91a21;
  --offer-paper:       #f7faff;
  --offer-ink:         #0f2547;
  --offer-ink-soft:    #4b5a76;
}

/* ─── Grid ─── */
.offers {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 24px !important;
  max-width: 1440px !important;
  margin: 24px auto !important;
  padding: 0 8px !important;
  width: auto !important;
  grid-gap: 24px !important;
}
@media (max-width: 1180px) { .offers { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 620px)  { .offers { grid-template-columns: 1fr !important; } }

/* ─── Solo: a single [mg_offer] should render as one centered card,
   not as one cell of a 4-column grid. ─── */
.offers.offers--solo {
  display: block !important;
  grid-template-columns: none !important;
  max-width: 420px !important;
  margin: 24px auto !important;
  padding: 0 !important;
}
.offers.offers--solo .offer { width: 100%; }

/* ─── Card wrapper ─── */
.offers .offer {
  position: relative;
  display: flex;
  text-align: center;
}

.offers .offer .offer-content {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--offer-paper);
  border: 1px solid rgba(28, 56, 101, .18);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 rgba(18, 37, 72, 0);
  transition: box-shadow .22s ease, border-color .22s ease;
}
.offers .offer .offer-content:hover {
  border-color: rgba(28, 56, 101, .32);
  box-shadow: 0 10px 30px rgba(18, 37, 72, .14);
}

/* ─── The .offer-body anchor is the inner flex column. ─── */
.offers .offer .offer-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  background-color: var(--offer-paper) !important;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 90" preserveAspectRatio="none"><path d="M0,55 C100,15 200,80 290,50 C345,32 380,50 400,40 L400,0 L0,0 Z" fill="%23dce8f7"/><path d="M0,75 C90,45 200,95 290,68 C345,52 380,68 400,60 L400,0 L0,0 Z" fill="%23eaf1fa" opacity=".75"/></svg>');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 90px;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--offer-ink) !important;
  font-family: 'Inter', system-ui, sans-serif;
  text-decoration: none !important;
  box-shadow: none !important;
  text-align: center !important;
  width: 100% !important;
  height: auto !important;
}
.offers .offer .offer-body:hover { box-shadow: none !important; }
.offers .offer .offer-body > * { box-sizing: border-box; }

/* ─── Top pill badge ─── */
.offers .offer .offer-title {
  align-self: center !important;
  width: auto !important;
  margin: 0 auto 18px !important;
  padding: 11px 28px !important;
  background: var(--offer-navy) !important;
  color: #fff !important;
  font: 700 11px/1.3 'Inter', sans-serif !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  border-radius: 0 0 6px 6px !important;
  border: 0 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  max-width: 80%;
}
.offers .offer .offer-title::before,
.offers .offer .offer-title::after {
  content: "";
  width: 14px;
  height: 1.5px;
  background: rgba(255, 255, 255, .55);
  flex-shrink: 0;
}

/* ─── Headline ─── */
.offers .offer .offer-deal {
  margin: 24px 20px 14px !important;
  padding: 0 !important;
  border: 0 !important;
  font: 700 26px/1.16 'Playfair Display', serif !important;
  color: var(--offer-navy) !important;
  letter-spacing: -.005em !important;
  text-align: center !important;
  display: block !important;
  text-wrap: balance;
}

/* ─── Subhead (BC "cta" field — "Apply Today!", "Limited Time!", etc.) ─── */
.offers .offer .offer-cta {
  margin: 0 20px 16px !important;
  padding: 0 !important;
  font: 500 14px/1.4 'Inter', sans-serif !important;
  color: var(--offer-ink-soft) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
}

/* ─── "Call us Today!" CTA button (JS-injected when phone exists) ─── */
.offers .offer .mg-call-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 4px 20px 18px !important;
  padding: 14px 22px !important;
  background: var(--offer-red) !important;
  color: #fff !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font: 600 16px/1 'Inter', sans-serif !important;
  letter-spacing: .01em !important;
  transition: background .18s ease;
}
.offers .offer .mg-call-cta:hover { background: var(--offer-red-deep) !important; }
.offers .offer .mg-call-cta__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.offers .offer .mg-call-cta__icon svg { width: 12px; height: 12px; fill: #fff; }

/* ─── Fine print with shield icon ─── */
.offers .offer .offer-terms {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 0 20px 16px !important;
  padding: 0 !important;
  font: 400 12px/1.5 'Inter', sans-serif !important;
  color: var(--offer-ink-soft) !important;
  text-align: left !important;
}
.offers .offer .offer-terms::before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231c3865" stroke-width="1.8"><path d="M12 2 L4 5 L4 12 C4 17 8 21 12 22 C16 21 20 17 20 12 L20 5 Z M9 12 L11 14 L15 10"/></svg>')
    center/contain no-repeat;
}
.offers .offer .offer-terms p { margin: 0 !important; }

/* ─── Expiration ─── */
.offers .offer .offer-expiration {
  margin: 0 20px 16px !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--offer-ink-soft) !important;
  font: 500 10.5px/1.4 'Inter', sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  clip-path: none !important;
  width: auto !important;
  display: block !important;
}

/* ─── Promo code ─── */
.offers .offer .offer-promocode {
  margin: 0 20px 14px !important;
  font: 600 11px/1.2 'Inter', sans-serif !important;
  color: var(--offer-navy) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
.offers .offer .offer-promocode code {
  background: var(--offer-blue-pale);
  color: var(--offer-navy);
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 700;
}

/* ─── Logo block — logo in white area, wave sits BELOW the logo, transitioning into the dark footer band. ─── */
.offers .offer .offer-logo {
  padding: 18px 20px 80px !important;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 70" preserveAspectRatio="none"><path d="M0,30 C90,5 200,45 290,22 C350,8 380,22 400,15 L400,70 L0,70 Z" fill="%23b8d4f1"/><path d="M0,45 C100,22 210,60 300,38 C355,25 385,38 400,32 L400,70 L0,70 Z" fill="%233a73c6"/><path d="M0,58 C100,38 210,68 300,55 C360,46 385,55 400,50 L400,70 L0,70 Z" fill="%231c3865"/></svg>');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 70px;
  border: 0 !important;
  text-align: center !important;
}
.offers .offer .offer-logo img {
  max-height: 60px;
  width: auto;
  display: inline-block;
  mix-blend-mode: multiply;
}

/* ─── Dark footer band: address + (optional phone) + hardcoded blurb ─── */
.offers .offer .offer-address {
  background: var(--offer-navy) !important;
  color: rgba(255, 255, 255, .94) !important;
  font: 500 11.5px/1.4 'Inter', sans-serif !important;
  margin: 0 !important;
  padding: 14px 14px 10px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.offers .offer .offer-address::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.6"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>')
    center/contain no-repeat;
}
.offers .offer .offer-address .street-number,
.offers .offer .offer-address .city-state,
.offers .offer .offer-address .zip-code { display: block; }

.offers .offer .offer-phone {
  background: var(--offer-navy) !important;
  color: rgba(255, 255, 255, .94) !important;
  font: 600 13px/1.3 'Inter', sans-serif !important;
  margin: 0 !important;
  padding: 0 14px 12px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.offers .offer .offer-phone::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20 15.5c-1.2 0-2.5-.2-3.6-.6a1 1 0 0 0-1 .2l-2.2 2.2a15.1 15.1 0 0 1-6.6-6.6l2.2-2.2a1 1 0 0 0 .2-1A11.4 11.4 0 0 1 8.5 4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1c0 9.4 7.6 17 17 17a1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1z"/></svg>')
    center/contain no-repeat;
}

/* Hardcoded blurb — JS-appended as the last child of .offer-body, styled as the third dark strip. */
.offers .offer .offer-blurb {
  background: var(--offer-navy) !important;
  color: rgba(255, 255, 255, .94) !important;
  font: 500 11px/1.4 'Inter', sans-serif !important;
  margin: 0 !important;
  padding: 10px 14px 14px !important;
  text-align: center !important;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

/* ─── Print-view link below card. ─── */
.offers .offer .offer-footer {
  margin-top: 8px;
  text-align: center;
}
.offers .offer .offer-footer a {
  display: inline-block;
  font: 500 11px/1 'Inter', sans-serif;
  letter-spacing: .04em;
  color: var(--offer-ink-soft);
  text-decoration: underline;
  padding: 6px 8px;
}
.offers .offer .offer-footer a:hover { color: var(--offer-navy); }

/* ───────────────────────────────────────────────────────────────────
 * Single-coupon print view (offers-print.php).
 *
 * WYSIWYG: the on-screen page mirrors what comes out of the printer.
 * Ink-light, high-contrast, large type. The audience is older customers
 * who print and bring it in — readability and clarity over brand fanfare.
 *
 * The wrapper is #offers #offer (singular) instead of .offers .offer.
 * ─────────────────────────────────────────────────────────────────── */
body.offers-print {
  background: #f4f6fa;
  font-family: 'Inter', system-ui, sans-serif;
  color: #000;
}
body.offers-print #offers {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
body.offers-print #offer {
  width: 100%;
  max-width: 480px;
}

body.offers-print .offer { text-align: center; }
body.offers-print .offer-content {
  position: relative;
  background: #fff;
  border: 2px dashed #444;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
body.offers-print .offer-body {
  display: flex !important;
  flex-direction: column !important;
  background-color: #fff !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 12px !important;
  margin: 0 !important;
  height: auto !important;
  width: 100% !important;
  color: #000 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  text-align: center !important;
}
body.offers-print .offer-body > * { box-sizing: border-box; }

/* Top pill — outlined navy, no fill */
body.offers-print .offer-title {
  align-self: center !important;
  width: auto !important;
  max-width: 80%;
  margin: 8px auto 24px !important;
  padding: 10px 28px !important;
  background: transparent !important;
  color: #1c3865 !important;
  border: 1.5px solid #1c3865 !important;
  border-radius: 999px !important;
  font: 700 12px/1.3 'Inter', sans-serif !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  display: inline-block !important;
}

/* Headline — large, navy (small ink area, preserves brand) */
body.offers-print .offer-deal {
  margin: 16px 20px 14px !important;
  padding: 0 !important;
  border: 0 !important;
  font: 700 30pt/1.14 'Playfair Display', serif !important;
  color: #1c3865 !important;
  letter-spacing: -.005em !important;
  text-align: center !important;
  text-wrap: balance;
}

/* Subhead */
body.offers-print .offer-cta {
  margin: 0 24px 18px !important;
  padding: 0 !important;
  font: 500 14pt/1.4 'Inter', sans-serif !important;
  color: #000 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
}

/* Terms — larger for older eyes */
body.offers-print .offer-terms {
  margin: 0 28px 18px !important;
  padding: 0 !important;
  font: 400 11.5pt/1.55 'Inter', sans-serif !important;
  color: #000 !important;
  text-align: center !important;
}
body.offers-print .offer-terms::before { display: none !important; }
body.offers-print .offer-terms p { margin: 0 !important; }

/* Expiration — prominent and bold */
body.offers-print .offer-expiration {
  margin: 0 24px 22px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #000 !important;
  font: 700 12pt/1.4 'Inter', sans-serif !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  clip-path: none !important;
  width: auto !important;
  display: block !important;
}

/* Logo block — no wave, simple top hairline divider */
body.offers-print .offer-logo {
  padding: 18px 20px 18px !important;
  background-image: none !important;
  border: 0 !important;
  border-top: 1px solid #bbb !important;
  margin-top: 12px !important;
  text-align: center !important;
}
body.offers-print .offer-logo img {
  max-height: 72px;
  width: auto;
  display: inline-block;
  mix-blend-mode: multiply;
}

/* Address — black on white, easy to read */
body.offers-print .offer-address {
  background: transparent !important;
  color: #000 !important;
  font: 500 12.5pt/1.5 'Inter', sans-serif !important;
  margin: 0 !important;
  padding: 14px 16px 4px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
body.offers-print .offer-address::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>')
    center/contain no-repeat;
}
body.offers-print .offer-address .street-number,
body.offers-print .offer-address .city-state,
body.offers-print .offer-address .zip-code { display: block; }

/* Phone — biggest, boldest. This is what they'll use. */
body.offers-print .offer-phone {
  background: transparent !important;
  color: #000 !important;
  font: 700 18pt/1.3 'Inter', sans-serif !important;
  margin: 0 !important;
  padding: 6px 16px 14px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
body.offers-print .offer-phone::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M20 15.5c-1.2 0-2.5-.2-3.6-.6a1 1 0 0 0-1 .2l-2.2 2.2a15.1 15.1 0 0 1-6.6-6.6l2.2-2.2a1 1 0 0 0 .2-1A11.4 11.4 0 0 1 8.5 4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1c0 9.4 7.6 17 17 17a1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1z"/></svg>')
    center/contain no-repeat;
}

/* Blurb — small footer caption */
body.offers-print .offer-blurb {
  background: transparent !important;
  color: #000 !important;
  font: 500 10pt/1.4 'Inter', sans-serif !important;
  margin: 0 !important;
  padding: 10px 16px 12px !important;
  text-align: center !important;
  border-top: 1px solid #bbb;
}

body.offers-print .offer-footer { display: none !important; }
body.offers-print .offer-promocode {
  margin: 0 24px 16px !important;
  font: 700 13pt/1.2 'Inter', sans-serif !important;
  color: #1c3865 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
body.offers-print .offer-promocode code {
  background: transparent;
  color: #1c3865;
  padding: 4px 12px;
  border: 1.5px dashed #1c3865;
  border-radius: 4px;
  font-weight: 700;
}

/* ─── Actual paper-print rules (CMD+P) ─────────────────────────────
 * Designed for the audience that actually prints these: older customers
 * who want a clear, legible coupon to bring in. Priorities in order:
 *   1. Readability (big type, high contrast)
 *   2. Ink savings (no solid color fills, no decorative waves)
 *   3. Brand recognition (logo + small navy accents only)
 *   4. Coupon affordance (dashed cut-line border)
 * ──────────────────────────────────────────────────────────────────── */
@media print {
  /* Reset page chrome */
  body.offers-print {
    background: #fff !important;
    color: #000 !important;
  }
  body.offers-print #offers { padding: 0 !important; min-height: 0 !important; }

  /* Card: dashed cut-line border, no shadow, no decorative waves */
  body.offers-print .offer-content {
    border: 2px dashed #444 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  body.offers-print .offer-body {
    background-image: none !important;
    background-color: #fff !important;
    padding: 8px !important;
  }
  body.offers-print .offer-logo { background-image: none !important; }

  /* Top pill → outlined navy text, no fill */
  body.offers-print .offer-title {
    background: transparent !important;
    color: #1c3865 !important;
    border: 1.5px solid #1c3865 !important;
    border-radius: 999px !important;
    padding: 8px 24px !important;
    font-size: 12pt !important;
    margin: 12px auto 24px !important;
    letter-spacing: .2em !important;
  }
  body.offers-print .offer-title::before,
  body.offers-print .offer-title::after { display: none !important; }

  /* Headline — large, navy (small ink area, preserves brand) */
  body.offers-print .offer-deal {
    font-size: 28pt !important;
    line-height: 1.15 !important;
    color: #1c3865 !important;
    margin: 16px 16px 12px !important;
  }

  /* Subhead */
  body.offers-print .offer-cta {
    font-size: 13pt !important;
    color: #000 !important;
    margin: 0 16px 16px !important;
  }

  /* Terms — bigger than usual for older eyes */
  body.offers-print .offer-terms {
    font-size: 11pt !important;
    line-height: 1.5 !important;
    color: #000 !important;
    margin: 0 20px 16px !important;
  }
  body.offers-print .offer-terms::before {
    /* Strip the shield icon for print — saves space, doesn't add information */
    display: none !important;
  }

  /* Expiration — prominent so they know it's valid */
  body.offers-print .offer-expiration {
    font-size: 12pt !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin: 0 16px 20px !important;
    letter-spacing: .05em !important;
  }

  /* Logo — keep color (small area), no wave behind it */
  body.offers-print .offer-logo {
    padding: 16px 20px 16px !important;
    border-top: 1px solid #999 !important;
    margin-top: 12px !important;
  }
  body.offers-print .offer-logo img {
    max-height: 70px !important;
    mix-blend-mode: normal !important;
  }

  /* Address — readable size, no dark fill */
  body.offers-print .offer-address {
    background: transparent !important;
    color: #000 !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
    padding: 12px 16px 4px !important;
    gap: 4px !important;
  }
  body.offers-print .offer-address::before {
    /* Replace white pin icon with black version */
    background-image:
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>') !important;
    width: 16px !important;
    height: 16px !important;
  }

  /* Phone — biggest, boldest piece. This is what they'll use. */
  body.offers-print .offer-phone {
    background: transparent !important;
    color: #000 !important;
    font-size: 18pt !important;
    font-weight: 700 !important;
    padding: 4px 16px 12px !important;
    gap: 8px !important;
  }
  body.offers-print .offer-phone::before {
    background-image:
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M20 15.5c-1.2 0-2.5-.2-3.6-.6a1 1 0 0 0-1 .2l-2.2 2.2a15.1 15.1 0 0 1-6.6-6.6l2.2-2.2a1 1 0 0 0 .2-1A11.4 11.4 0 0 1 8.5 4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1c0 9.4 7.6 17 17 17a1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1z"/></svg>') !important;
    width: 18px !important;
    height: 18px !important;
  }

  /* Blurb — small footer text, no dark fill */
  body.offers-print .offer-blurb {
    background: transparent !important;
    color: #000 !important;
    font-size: 10pt !important;
    border-top: 1px solid #999 !important;
    padding: 10px 16px 8px !important;
  }

  /* Things that don't belong on paper */
  .offers .offer .mg-call-cta,
  .offers .offer .offer-footer,
  body.offers-print .mg-call-cta,
  body.offers-print .offer-footer { display: none !important; }

  /* Grid view: just stack cards if user prints from /specials directly */
  .offers .offer .offer-body  { background-image: none !important; }
  .offers .offer .offer-logo  { background-image: none !important; }
  .offers { display: block !important; }
}