/* Shared stylesheet for country micro-sites. Class names are generic and reusable across countries. */
:root {
  --site-bg: #ffffff;
  --site-text: #1f2328;
  --site-muted: #6b7280;
  --site-accent: #e11d2e;
  --site-accent-soft: #fdeceb;
  --site-border: #eceff1;
}

* { box-sizing: border-box; }

body.msite-body {
  margin: 0;
  background: var(--site-bg);
  color: var(--site-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

.msite-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Header */
.msite-header {
  padding: 0;
  border-bottom: 1px solid var(--site-border);
}
.msite-header-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.85rem 1.25rem !important;
}
.msite-logo {
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--site-text);
  text-decoration: none;
  flex: 0 0 auto;
}
.msite-logo i { color: var(--site-accent); margin-right: 0.4rem; }

.msite-search {
  flex: 1 1 320px;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #f6f7f9;
  border: 1px solid var(--site-border);
  border-radius: 999px;
  padding: 0.5rem 1rem;
}
.msite-search i { color: var(--site-muted); font-size: 0.85rem; }
.msite-search input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  font-size: 0.9rem;
  color: var(--site-text);
}

.msite-nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.msite-nav a {
  color: var(--site-muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}
.msite-nav a:hover { color: var(--site-accent); }
.msite-btn-countries {
  background: var(--site-accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 0.5rem 0.95rem !important;
  border-radius: 999px !important;
  white-space: nowrap;
}
.msite-btn-countries:hover { background: #c8142c !important; color: #fff !important; }

/* Category nav bar (dedicated strip below top header bar) */
.msite-cat-nav {
  display: block !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  width: 100%;
  position: relative; /* anchors the scroll-fade pseudo-elements below */
}
.msite-cat-nav .msite-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.6rem 2.25rem !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.msite-cat-nav .msite-container::-webkit-scrollbar {
  display: none !important;
  height: 0 !important;
}
/* When every item fits without scrolling, center them for a tidier look on wide
   desktop screens -- but NEVER center a row that's wider than its scrollable
   container, since centering an overflowing flex row clips both ends behind the
   edges with no visible scroll affordance (this was the actual cause of
   "Supermarkets" clipping on the left and the last item, Blog, being pushed off
   the right edge as a bare icon). Detected/toggled by a small inline script
   rather than a media query, since it depends on real content width, not
   viewport width -- a country with fewer/longer category labels may still
   overflow on a desktop-width screen while another fits fine.
   The .msite-cat-nav--fits class below is what actually re-enables centering. */
.msite-cat-nav .msite-container.msite-cat-nav--fits {
  justify-content: center !important;
}
/* Right-edge fade + arrow cue: without this, a row with more items than fit the
   viewport looks identical to a genuinely broken/clipped layout (e.g. "Black
   Friday" trailing off the edge with no scrollbar visible) rather than an
   intentional horizontally-scrollable strip. Shown only while the row is
   actually scrollable -- .msite-cat-nav--fits (added by header.php's own script
   when everything already fits) turns it off, so it never appears as a
   misleading "there's more" hint on a row that has nothing more to show. */
.msite-cat-nav::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.5rem;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.95) 65%);
  pointer-events: none;
}
.msite-cat-nav.msite-cat-nav--fits::after,
.msite-cat-nav:has(.msite-cat-nav--fits)::after {
  display: none;
}
.msite-cat-nav a,
.msite-cat-nav a:link,
.msite-cat-nav a:visited {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  color: #374151 !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  padding: 0.375rem 0.6rem !important;
  border-radius: 0.375rem !important;
  transition: all 0.2s ease !important;
  flex: 0 0 auto;
}
.msite-cat-nav a i {
  color: inherit;
  font-size: 0.85rem;
  margin-right: 0.375rem !important;
}
.msite-cat-nav a:hover,
.msite-cat-nav a:focus {
  color: #ea580c !important;
  background-color: #fff7ed !important;
}
.msite-cat-nav a:hover i,
.msite-cat-nav a:focus i {
  color: #ea580c !important;
}
/* Desktop compaction: tighten gaps/padding/font-size so all category items fit
   on a single centered line without horizontal scroll on typical desktop
   widths. Mobile/tablet (<1024px) keeps the larger touch-friendly sizing and
   the horizontal-scroll fallback above untouched.
   Sizing here was verified against real rendered glyph widths for the widest
   label sets in the fleet (German and French compound labels, e.g. "Gesundheit
   & Schönheit", "Kleidung & Schuhe") at 1024px and 1280px viewports -- not
   just estimated -- to make sure the fix actually holds for every country,
   not only ones with short English labels. */
@media (min-width: 1024px) {
  .msite-cat-nav .msite-container {
    max-width: 1280px;
    gap: 0.2rem !important;
    padding: 0.45rem 0.75rem !important;
  }
  .msite-cat-nav a,
  .msite-cat-nav a:link,
  .msite-cat-nav a:visited {
    font-size: 0.75rem !important;
    padding: 0.26rem 0.36rem !important;
    letter-spacing: -0.015em;
  }
  .msite-cat-nav a i {
    font-size: 0.72rem;
    margin-right: 0.22rem !important;
  }
}
/* Extra squeeze only for the widest label sets (German/French compound words)
   so 1024px-wide screens hold a single line without shrinking every other
   country's already-comfortable fit any further than necessary. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .msite-cat-nav .msite-container {
    gap: 0.125rem !important;
    padding: 0.4rem 0.5rem !important;
  }
  .msite-cat-nav a,
  .msite-cat-nav a:link,
  .msite-cat-nav a:visited {
    font-size: 0.7rem !important;
    padding: 0.26rem 0.32rem !important;
  }
}

/* Hero */
.msite-hero {
  padding: 2rem 0 1.5rem;
  text-align: center;
}
.msite-hero h1 {
  font-size: 2rem;
  margin: 0 0 0.5rem;
  font-weight: 800;
}

/* Store archive hero */
.msite-store-logo {
  width: 96px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--site-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
}
.msite-store-logo i { font-size: 1.75rem; color: var(--site-accent); }
.msite-store-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.msite-store-meta {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.msite-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #f3f4f6;
  color: var(--site-muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}
.msite-badge-accent {
  background: var(--site-accent-soft);
  color: var(--site-accent);
}

/* Pros/Cons */
.msite-proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1.25rem 0;
}
.msite-proscons h4 {
  font-size: 0.95rem;
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.msite-pros h4 i { color: #16a34a; }
.msite-cons h4 i { color: #dc2626; }
.msite-proscons ul { margin: 0; padding-left: 1.2rem; }
.msite-proscons li { margin-bottom: 0.4rem; font-size: 0.95rem; }
@media (max-width: 640px) {
  .msite-proscons { grid-template-columns: 1fr; }
}
.msite-hero p {
  color: var(--site-muted);
  font-size: 1.05rem;
  margin: 0 auto;
  max-width: 640px;
}

/* Sections */
.msite-section { padding: 1.5rem 0; }
.msite-section h2 {
  font-size: 1.35rem;
  margin: 0 0 1rem;
  font-weight: 700;
}
.msite-section h2 i { color: var(--site-accent); margin-right: 0.5rem; }

/* Grids */
.msite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.9rem;
}
.msite-card {
  background: #fff;
  border: 1px solid var(--site-border);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  color: var(--site-text);
}
.msite-card i {
  font-size: 1.4rem;
  color: var(--site-accent);
  margin-bottom: 0.5rem;
  display: block;
}
.msite-store-logo-img {
  display: block;
  max-width: 90px;
  max-height: 45px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto 0.5rem;
  background: #fff;
  border-radius: 4px;
  border: 1px solid var(--site-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 4px;
}
.msite-card span { font-size: 0.92rem; font-weight: 600; }

/* Branded initials fallback badge: shown instead of a generic broken-image icon
   when a store has no real logo file (either logo_path was never set, or the
   guessed /assets/images/stores/{code}/{slug}.webp path 404s at runtime). Built
   server-side (category.php computes the initials + a stable per-store accent
   color from the store name) so it works identically for both failure cases --
   a plain onerror swap to one shared static SVG can't show per-store text/color,
   which is why this exists as a separate, always-rendered sibling element instead:
   the <img> and this badge coexist in the markup, and onerror only toggles which
   one is visible via a class, rather than trying to inject text into a swapped
   <img src>. */
.msite-store-logo-fallback {
  display: none;
  width: 60px;
  height: 45px;
  margin: 0 auto 0.5rem;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  text-transform: uppercase;
}
img.msite-logo-failed {
  display: none;
}
img.msite-logo-failed + .msite-store-logo-fallback {
  display: flex;
}
/* Hero store logo (bigger context, .msite-store-logo) needs its own fallback
   sizing to match the larger 96x64 box instead of the small card-grid badge. */
.msite-store-logo .msite-store-logo-fallback {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 8px;
  font-size: 1.35rem;
}

/* Placeholder flyer cards */
.msite-card.msite-placeholder {
  border-style: dashed;
  color: var(--site-muted);
}
.msite-card.msite-placeholder i { color: var(--site-muted); }

/* Article */
.msite-article {
  background: #ffffff;
  padding: 0.5rem 0 1rem;
}
.msite-article h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 800;
}
.msite-article h3 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--site-text);
}
.msite-article p {
  margin: 0 0 1.4rem;
  color: #374151;
  font-size: 1.05rem;
  line-height: 1.75;
}
.msite-article ul {
  margin: 0 0 1.5rem;
  padding-left: 1.5rem;
}
.msite-article li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  color: #374151;
}
.msite-article strong {
  color: var(--site-text);
  font-weight: 700;
}

/* FAQ */
.msite-faq-item {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--site-border);
}
.msite-faq-item:last-child { border-bottom: none; }
.msite-faq-item h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 700;
}
.msite-faq-item p {
  margin: 0;
  color: var(--site-muted);
  font-size: 0.95rem;
}

/* Inline keyword links (internal-link placeholders) */
.msite-inline-link {
  color: var(--site-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--site-accent-soft);
}
.msite-inline-link:hover { border-bottom-color: var(--site-accent); }

/* Comparison table */
.msite-table-wrap {
  overflow-x: auto;
  margin: 2rem 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.msite-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: #ffffff;
}
.msite-table caption {
  text-align: left;
  font-weight: 700;
  padding: 0.9rem 1rem 0.6rem;
  color: var(--site-text);
  caption-side: top;
}
.msite-table th,
.msite-table td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}
.msite-table th {
  color: var(--site-muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: #f9fafb;
}
.msite-table tbody tr:last-child td { border-bottom: none; }

/* Direct-Answer semantic entity text -- a plain, quotable factual sentence
   right under the H1 on category/store pages, styled as understated lead
   copy (not a callout box) so it reads naturally to human visitors while
   still being the first extractable text an AI crawler sees after the H1. */
.msite-direct-answer {
  max-width: 65ch;
  margin: 0.5rem 0 1rem;
  color: var(--site-text-muted, #4b5563);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* Key Takeaways summary callout (top of a category article) -- distinct blue
   tint from the amber Pro Tip callout below so the two read as different kinds
   of boxes at a glance (summary vs. actionable tip). */
.msite-key-takeaways {
  background: #eff6ff;
  border-left: 4px solid var(--site-accent, #2563eb);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0 2rem;
}
.msite-key-takeaways-label {
  display: block;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.msite-key-takeaways ul {
  margin: 0;
  padding-left: 1.25rem;
}
.msite-key-takeaways li {
  color: #1e3a5f;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.35rem;
}
.msite-key-takeaways li:last-child { margin-bottom: 0; }

/* Pro tip callout */
.msite-protip {
  background: var(--site-accent-soft);
  border-left: 3px solid var(--site-accent);
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  margin: 1.25rem 0;
}
.msite-protip-label {
  display: block;
  font-weight: 700;
  color: var(--site-accent);
  margin-bottom: 0.3rem;
  font-size: 0.92rem;
}
.msite-protip p {
  margin: 0;
  color: var(--site-text);
  font-size: 0.95rem;
}

/* Footer — dark, unified across home + all country/category pages */
.msite-footer {
  background: #0b1730;
  color: #c3cbdc;
  padding: 2.5rem 0 0;
  margin-top: 2rem;
}
.msite-footer-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  padding-bottom: 2rem;
}
.msite-footer-brand { flex: 1 1 260px; max-width: 360px; }
.msite-footer-brand .msite-logo { color: #fff; }
.msite-footer-brand .msite-logo i { color: var(--site-accent); }
.msite-footer-brand p { margin: 0.75rem 0 0; font-size: 0.9rem; color: #c3cbdc; }
.msite-footer-col { flex: 0 1 180px; }
.msite-footer-col h4 {
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.9rem;
}
.msite-footer-col a {
  display: block;
  color: #c3cbdc;
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}
.msite-footer-col a:hover { color: #fff; }
.msite-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 1.1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: #9fabc4;
}
.msite-footer-bottom a { color: #9fabc4; text-decoration: none; margin-left: 1rem; }
.msite-footer-bottom a:hover { color: #fff; }
@media (max-width: 640px) {
  .msite-footer-bottom { flex-direction: column; align-items: flex-start; }
  .msite-footer-bottom a { margin-left: 0; margin-right: 1rem; }
}

@media (prefers-color-scheme: dark) {
  body.msite-body {
    background: #ffffff;
    color: #1f2328;
  }
}

/* Flyer / catalogue viewer page */
.msite-breadcrumb {
  padding: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--site-muted);
}
.msite-breadcrumb a { color: var(--site-muted); text-decoration: none; }
.msite-breadcrumb a:hover { color: var(--site-accent); text-decoration: underline; }
.msite-breadcrumb-sep { margin: 0 0.4rem; color: var(--site-border); }
.msite-breadcrumb-current { color: var(--site-text); font-weight: 600; }

.msite-flyer-hero { padding-top: 1rem; }
.msite-flyer-hero h1 { font-size: 1.7rem; margin: 0 0 0.6rem; font-weight: 800; }
.msite-flyer-geo-highlight {
  color: var(--site-muted);
  font-size: 1rem;
  max-width: 760px;
  margin: 0;
}
.msite-flyer-expired-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin: 0 0 1rem;
  font-size: 0.92rem;
}
.msite-flyer-expired-banner a { color: #92400e; text-decoration: underline; font-weight: 700; }
.msite-flyer-expired-banner i { margin-top: 0.15rem; color: #d97706; }

.msite-flyer-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 860px) {
  .msite-flyer-layout { grid-template-columns: 1fr; }
}

.msite-flyer-viewer-meta {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.msite-badge-expired { background: #fee2e2; color: #b91c1c; }

.msite-flyer-pages {
  background: #f3f4f6;
  border-radius: 12px;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76vh;
  min-height: 320px;
  overflow: hidden;
}
.msite-flyer-page-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
  background: #fff;
  object-fit: contain;
}
.msite-flyer-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.msite-flyer-nav-btn {
  background: var(--site-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.msite-flyer-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.msite-flyer-page-indicator { font-size: 0.9rem; color: var(--site-muted); font-weight: 600; }

.msite-flyer-sidebar {
  background: #fff;
  border: 1px solid var(--site-border);
  border-radius: 12px;
  padding: 1.25rem;
}
.msite-flyer-sidebar h3 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
}
.msite-flyer-sidebar h3 i { color: var(--site-accent); margin-right: 0.4rem; }
.msite-flyer-info-list { margin: 0 0 1.25rem; }
.msite-flyer-info-list dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--site-muted);
  margin-top: 0.75rem;
}
.msite-flyer-info-list dt:first-child { margin-top: 0; }
.msite-flyer-info-list dd { margin: 0.15rem 0 0; font-weight: 600; }
.msite-flyer-cta {
  display: block;
  text-align: center;
  background: var(--site-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.92rem;
}

.msite-flyer-article-collapsible {
  max-height: 180px;
  overflow: hidden;
  transition: max-height 0.3s ease;
  position: relative;
}
.msite-flyer-article-collapsible:not(.is-expanded)::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
.msite-flyer-article-collapsible.is-expanded { max-height: 4000px; }
.msite-flyer-readmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  background: none;
  border: 1px solid var(--site-border);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--site-accent);
  cursor: pointer;
}

.msite-flyer-thumb {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  background: #f3f4f6;
}
.msite-flyer-card { text-decoration: none; color: var(--site-text); }

/* Related Category flyer cards */
.related-flyers-subtitle {
  color: var(--site-muted);
  font-size: 0.95rem;
  margin: -0.5rem 0 1.25rem;
}
.related-flyers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 960px) {
  .related-flyers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .related-flyers-grid { grid-template-columns: 1fr; }
}
.related-flyer-card {
  display: block;
  background: #fff;
  border: 1px solid var(--site-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--site-text);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.related-flyer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}
.related-flyer-thumb-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.related-flyer-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.related-flyer-thumb-fallback {
  font-size: 2rem;
  color: var(--site-border);
}
.related-flyer-body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.related-flyer-title {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--site-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.related-flyer-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  background: #e8f7ee;
  color: #1a7f3c;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}
.related-flyer-date-badge i { color: #1a7f3c; }

/* Seasonal long-form SEO content (Black Friday hub pages, etc.) */
.msite-seasonal-guide {
  max-width: 860px;
}
.msite-seasonal-hook {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--site-text);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.msite-seasonal-guide h2 {
  margin-top: 2.25rem;
  margin-bottom: 0.9rem;
  font-size: 1.4rem;
}
.msite-seasonal-guide p {
  line-height: 1.7;
  color: var(--site-text);
  margin-bottom: 1rem;
}
.msite-callout-box {
  background: var(--site-accent-soft);
  border: 1px solid var(--site-accent);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 2rem;
}
.msite-callout-box h3 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  color: var(--site-accent);
}
.msite-callout-box ul {
  margin: 0;
  padding-left: 1.25rem;
}
.msite-callout-box li {
  margin-bottom: 0.5rem;
  line-height: 1.55;
}
.msite-table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0 2rem;
}
.msite-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.msite-comparison-table caption {
  text-align: left;
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: var(--site-muted);
}
.msite-comparison-table th, .msite-comparison-table td {
  border: 1px solid var(--site-border);
  padding: 0.6rem 0.8rem;
  text-align: left;
}
.msite-comparison-table th {
  background: #f8f9fa;
  font-weight: 700;
}
.msite-faq-list {
  margin-top: 1rem;
}
.msite-faq-item {
  border: 1px solid var(--site-border);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.75rem;
}
.msite-faq-item summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.msite-faq-item summary::-webkit-details-marker { display: none; }
.msite-faq-item summary::before {
  content: '+';
  display: inline-block;
  width: 1.1rem;
  color: var(--site-accent);
  font-weight: 700;
}
.msite-faq-item[open] summary::before { content: '\2212'; }
.msite-faq-item p {
  margin: 0.6rem 0 0 1.1rem;
  color: var(--site-muted);
}

/* Store page flyer cards (active + expired both use this grid/card system) --
   4-column desktop grid, collapsing to 3/2/2 as the viewport narrows, matching
   the "compact card" spec: tight padding, aspect-3/4 thumbnail, 2-line title. */
.flyer-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1100px) {
  .flyer-card-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (max-width: 760px) {
  .flyer-card-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}
@media (max-width: 420px) {
  .flyer-card-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
}
.flyer-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--site-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--site-text);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.flyer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
}
.flyer-card-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}
.flyer-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
  padding: 0.25rem;
  box-sizing: border-box;
}
.flyer-card-thumb-fallback {
  font-size: 2rem;
  color: var(--site-border);
}
.flyer-card-badge-valid {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  background: #1a7f3c;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.flyer-card-badge-expired {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  background: #6b7280;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.flyer-card-store-badge {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--site-text);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  max-width: 65%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flyer-card-body {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}
.flyer-card-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  background: var(--site-accent-soft);
  color: var(--site-accent);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
}
.flyer-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--site-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.flyer-card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--site-accent);
  padding-top: 0.35rem;
}
.flyer-card-cta i {
  transition: transform 0.2s ease;
}
.flyer-card:hover .flyer-card-cta i {
  transform: translateX(4px);
}
.msite-empty-note {
  padding: 1.5rem;
  text-align: center;
  color: var(--site-muted);
  font-size: 0.95rem;
  background: #f9fafb;
  border: 1px dashed var(--site-border);
  border-radius: 12px;
}

/* ===== Blog magazine engine ===== */
.blog-hero-section {
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
  padding: 2.5rem 0 0.5rem;
  text-align: center;
}
.blog-page-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--site-text);
  margin: 0 0 0.5rem;
}
.blog-page-subtitle {
  color: var(--site-muted);
  font-size: 1.05rem;
  max-width: 640px;
  margin: 0 auto;
}
.blog-tag-pill {
  display: inline-flex;
  align-items: center;
  background: var(--site-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.blog-tag-pill-onimage {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
}
.blog-hero-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: center;
  text-decoration: none;
  color: var(--site-text);
  background: #fff;
  border: 1px solid var(--site-border);
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.blog-hero-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}
.blog-hero-image-wrap {
  position: relative;
  aspect-ratio: 16 / 11;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.blog-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-hero-image-fallback {
  font-size: 3rem;
  color: var(--site-border);
}
.blog-hero-body {
  padding: 1rem 2rem 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.blog-hero-title {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
}
.blog-hero-excerpt {
  color: var(--site-muted);
  line-height: 1.6;
  margin: 0;
}
.blog-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--site-muted);
  font-size: 0.85rem;
}
.blog-meta-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.blog-meta-row-small {
  font-size: 0.78rem;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}
.blog-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--site-accent);
  margin-top: 0.25rem;
}
.blog-hero-cta i { transition: transform 0.2s ease; }
.blog-hero-card:hover .blog-hero-cta i { transform: translateX(4px); }

.blog-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 960px) {
  .blog-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .blog-card-grid { grid-template-columns: 1fr; }
}
.blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--site-text);
  background: #fff;
  border: 1px solid var(--site-border);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.blog-card:hover {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}
.blog-card-image-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.blog-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-card-image-fallback {
  font-size: 2.2rem;
  color: var(--site-border);
}
.blog-card-body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.blog-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-excerpt {
  color: var(--site-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-single-container {
  max-width: 760px;
}
.blog-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--site-muted);
  margin-bottom: 1rem;
}
.blog-breadcrumb a {
  color: var(--site-muted);
  text-decoration: none;
}
.blog-breadcrumb a:hover { color: var(--site-accent); }
.blog-breadcrumb i { font-size: 0.65rem; }
.blog-single-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0.5rem 0 1rem;
}
.blog-single-cover {
  width: 100%;
  border-radius: 14px;
  margin: 1.25rem 0;
  object-fit: cover;
  max-height: 420px;
}
.blog-share-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.25rem 0;
  padding: 0.85rem 0;
  border-top: 1px solid var(--site-border);
  border-bottom: 1px solid var(--site-border);
}
.blog-share-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--site-muted);
  margin-right: 0.25rem;
}
.blog-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #f3f4f6;
  color: var(--site-text);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.blog-share-btn:hover {
  background: var(--site-accent);
  color: #fff;
}
.blog-copy-link-done { background: #1a7f3c !important; color: #fff !important; }
.blog-single-body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--site-text);
}
.blog-single-body p { margin: 0 0 1.25rem; }
.blog-single-body h2, .blog-single-body h3 { margin: 2rem 0 1rem; }

/* ===== News category ===== */
.news-card-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.news-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid var(--site-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--site-text);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.news-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.news-card-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.news-card-date {
  color: var(--site-muted);
  font-size: 0.82rem;
}
.news-tag-pill {
  display: inline-flex;
  background: var(--site-accent-soft);
  color: var(--site-accent);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.news-card-title {
  font-size: 1.1rem;
  font-weight: 700;
}
.news-card-excerpt {
  color: var(--site-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .blog-hero-card { grid-template-columns: 1fr; }
  .blog-hero-body { padding: 0 1.25rem 1.25rem; }
}