/* SaveSleuth Design System (Front) — v5 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --ss-bg:        #f0f2f7;
  --ss-card:      #ffffff;
  --ss-text:      #0f172a;
  --ss-muted:     #64748b;

  --ss-primary:   #1d4ed8;
  --ss-primary-2: #2563eb;

  --ss-border:    rgba(15, 23, 42, .09);

  --ss-radius:    18px;
  --ss-radius-sm: 12px;
  --ss-radius-xs: 8px;

  --ss-shadow:    0 20px 50px rgba(15, 23, 42, .10);
  --ss-shadow-sm: 0 8px 24px  rgba(15, 23, 42, .08);
  --ss-shadow-xs: 0 2px 8px   rgba(15, 23, 42, .06);

  --ss-container: 1120px;
  --ss-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ============================================================
   BASE
   Astra sets its own body bg via Customizer — need !important
   ============================================================ */
html,
body {
  background: var(--ss-bg) !important;
  color: var(--ss-text);
  font-family: var(--ss-font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ss-primary);
  text-decoration: none;
  text-underline-offset: .16em;
}
a:hover { opacity: .85; }

h1, h2, h3, h4 { letter-spacing: -0.02em; }

/* ============================================================
   PAGE WRAPPER — white rounded card
   Astra's root wrapper is #page.site
   ============================================================ */
#page.site,
.hfeed.site,
.site {
  max-width: calc(var(--ss-container) + 80px);
  margin: 24px auto !important;
  background: var(--ss-card) !important;
  border-radius: 24px;
  box-shadow: var(--ss-shadow);
  overflow: hidden;
}

/* Reset backgrounds Astra adds on inner elements */
.site-content,
#content,
.ast-container,
.entry-content,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
  background: transparent !important;
  box-shadow: none !important;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header,
#masthead,
.ast-masthead-custom-menu-items {
  background: var(--ss-card) !important;
  border-bottom: 1px solid var(--ss-border);
  box-shadow: none !important;
}

.site-title a,
.ast-site-name-wrap a {
  color: var(--ss-text) !important;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}

/* Nav links */
.ast-nav-menu > li > a,
.main-navigation a,
#site-navigation a {
  color: var(--ss-muted) !important;
  font-size: 14px;
  font-weight: 500;
}
.ast-nav-menu > li > a:hover,
.main-navigation a:hover,
#site-navigation a:hover {
  color: var(--ss-text) !important;
  opacity: 1;
}

/* "Search" button in nav — add CSS class ss-nav-btn to menu item */
.ss-nav-btn > a,
.menu-item.ss-nav-btn > a {
  background: var(--ss-primary) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
}
.ss-nav-btn > a:hover {
  background: var(--ss-primary-2) !important;
  opacity: 1 !important;
}

/* ============================================================
   HERO SECTION
   Add class "ss-hero" to Gutenberg Group block
   ============================================================ */
.ss-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px;
  padding: 52px 40px 36px;
}

/* If no image — single column full width */
.ss-hero:has(.wp-block-buttons):not(:has(figure)) {
  grid-template-columns: 1fr;
  max-width: 680px;
}

.ss-hero h1,
.ss-hero .wp-block-heading {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  font-weight: 800;
  color: var(--ss-text);
  margin-bottom: 14px;
}

/* Blue accent — wrap word in <em> inside H1 */
.ss-hero h1 em,
.ss-hero .wp-block-heading em {
  color: var(--ss-primary);
  font-weight: 800;
  font-style: normal;
}

.ss-hero p {
  color: var(--ss-muted);
  font-size: 15px;
  margin-bottom: 24px;
}

/* Hero image (right column) */
.ss-hero figure img,
.ss-hero .wp-block-image img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(29,78,216,.2));
}

/* ============================================================
   SEARCH BAR — add class "ss-search" to Search block
   ============================================================ */
.ss-search .wp-block-search__inside-wrapper,
.ss-hero .wp-block-search__inside-wrapper {
  display: flex;
  max-width: 520px;
  border-radius: var(--ss-radius);
  overflow: hidden;
  box-shadow: var(--ss-shadow-xs);
}

.ss-search .wp-block-search__input,
.ss-hero .wp-block-search__input {
  flex: 1;
  border: 1.5px solid var(--ss-border);
  border-right: none;
  border-radius: var(--ss-radius) 0 0 var(--ss-radius) !important;
  padding: 13px 18px;
  font-size: 14px;
  color: var(--ss-text);
  background: var(--ss-bg);
  outline: none;
  transition: border-color .15s;
}
.ss-search .wp-block-search__input:focus,
.ss-hero .wp-block-search__input:focus {
  border-color: var(--ss-primary);
  background: #fff;
}

.ss-search .wp-block-search__button,
.ss-hero .wp-block-search__button {
  background: var(--ss-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 var(--ss-radius) var(--ss-radius) 0 !important;
  padding: 13px 26px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer;
  transition: background .15s;
  box-shadow: none !important;
}
.ss-search .wp-block-search__button:hover,
.ss-hero .wp-block-search__button:hover {
  background: var(--ss-primary-2) !important;
}

/* ============================================================
   SECTIONS WRAPPER — add class "ss-section" to Group blocks
   ============================================================ */
.ss-section {
  padding: 32px clamp(20px, 4vw, 48px);
}
.ss-section + .ss-section {
  border-top: 1px solid var(--ss-border);
}

/* Section header row — title + "View All" link */
.ss-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.ss-section-header h2 { font-size: 20px; font-weight: 700; margin: 0; }

.ss-view-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-primary);
}
.ss-view-all::after { content: " ›"; }

/* ============================================================
   STORE CARDS GRID — 4 columns
   Add class "ss-stores-grid" to Columns block
   Add class "ss-store-card" to each Column
   ============================================================ */
.ss-stores-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px;
  flex-wrap: unset !important;
}

.ss-stores-grid .wp-block-column,
.ss-store-card {
  background: var(--ss-card);
  border: 1.5px solid var(--ss-border);
  border-radius: var(--ss-radius);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  position: relative;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.ss-stores-grid .wp-block-column:hover,
.ss-store-card:hover {
  box-shadow: var(--ss-shadow-sm);
  transform: translateY(-2px);
  border-color: rgba(29, 78, 216, .22);
}

/* Heart icon */
.ss-stores-grid .wp-block-column::after,
.ss-store-card::after {
  content: "♡";
  position: absolute;
  top: 12px; right: 14px;
  font-size: 15px;
  color: rgba(100,116,139,.25);
  transition: color .15s;
}
.ss-stores-grid .wp-block-column:hover::after,
.ss-store-card:hover::after { color: #e11d48; }

.ss-store-card img,
.ss-stores-grid .wp-block-column img {
  max-height: 36px; width: auto; object-fit: contain;
}

.ss-deal-count { font-size: 13px; color: var(--ss-muted); margin: 0; }
.ss-deal-count strong { color: var(--ss-text); font-weight: 700; }

/* "View Deals" button in store card */
.ss-store-card .wp-block-button__link,
.ss-stores-grid .wp-block-column .wp-block-button__link {
  background: var(--ss-primary) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.ss-store-card .wp-block-button__link::after,
.ss-stores-grid .wp-block-column .wp-block-button__link::after { content: " ›"; }

/* ============================================================
   TRENDING DEALS GRID — 4 columns, left-aligned
   Add class "ss-trending-grid" to Columns block
   Add class "ss-deal-card" to each Column
   ============================================================ */
.ss-trending-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px;
  flex-wrap: unset !important;
}

.ss-trending-grid .wp-block-column,
.ss-deal-card {
  background: var(--ss-card);
  border: 1.5px solid var(--ss-border);
  border-radius: var(--ss-radius);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.ss-trending-grid .wp-block-column:hover,
.ss-deal-card:hover {
  box-shadow: var(--ss-shadow-sm);
  transform: translateY(-2px);
  border-color: rgba(29, 78, 216, .22);
}

.ss-deal-store { font-size: 15px; font-weight: 700; color: var(--ss-text); }
.ss-deal-title { font-size: 14px; font-weight: 600; color: var(--ss-text); }
.ss-deal-meta  { font-size: 12px; color: var(--ss-muted); }

.ss-deal-card .wp-block-button__link,
.ss-trending-grid .wp-block-column .wp-block-button__link {
  background: var(--ss-primary) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-top: auto;
}
.ss-deal-card .wp-block-button__link::after,
.ss-trending-grid .wp-block-column .wp-block-button__link::after { content: " ›"; }

/* ============================================================
   CARD — generic content card (Popular Pages etc.)
   Add class "ss-card" to Group block
   ============================================================ */
.ss-card {
  background: var(--ss-card);
  border: 1.5px solid var(--ss-border);
  border-radius: var(--ss-radius);
  padding: 24px 28px;
  box-shadow: var(--ss-shadow-xs);
  margin-top: 0;
}
.ss-card > *:first-child { margin-top: 0; }
.ss-card > *:last-child  { margin-bottom: 0; }
.ss-card h2 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.ss-card p  { line-height: 1.7; color: var(--ss-muted); }
.ss-card a  { color: var(--ss-primary); font-weight: 500; }

/* ============================================================
   STORE PAGE BANNER
   Add class "ss-store-banner" to Cover or Group block
   ============================================================ */
.ss-store-banner {
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%) !important;
  border-radius: var(--ss-radius);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  color: #fff !important;
}
.ss-store-banner::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(255,255,255,.07) 0%, transparent 60%);
  pointer-events: none;
}
.ss-store-banner h1,
.ss-store-banner h2 {
  color: #fff !important;
  font-size: clamp(20px, 2.5vw, 30px);
  margin: 4px 0;
}
.ss-store-banner p { color: rgba(255,255,255,.78) !important; font-size: 14px; margin: 8px 0 0; }
.ss-store-banner img { max-height: 60px; filter: brightness(0) invert(1); opacity: .9; }

/* ============================================================
   COUPON CARD
   ============================================================ */
.ss-coupon {
  background: var(--ss-card);
  border: 1.5px solid var(--ss-border);
  border-radius: var(--ss-radius);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
  margin-bottom: 14px;
  transition: box-shadow .2s, border-color .2s;
}
.ss-coupon:hover { box-shadow: var(--ss-shadow-sm); border-color: rgba(29,78,216,.22); }

.ss-coupon__title { font-size: 17px; font-weight: 700; color: var(--ss-text); margin: 0 0 4px; }
.ss-coupon__meta  { font-size: 12px; color: var(--ss-muted); display: flex; align-items: center; gap: 8px; }
.ss-coupon__verified::before { content: "● "; color: #22c55e; }
.ss-coupon__desc  { font-size: 14px; color: var(--ss-muted); margin: 8px 0 0; }

.ss-coupon__code {
  font-family: monospace;
  font-size: 14px; font-weight: 700;
  color: var(--ss-text);
  background: var(--ss-bg);
  border: 1.5px dashed var(--ss-border);
  border-radius: var(--ss-radius-xs);
  padding: 8px 14px;
  letter-spacing: .08em;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  margin-top: 10px;
  transition: border-color .15s;
}
.ss-coupon__code:hover { border-color: var(--ss-primary); }

.ss-coupon__btn {
  background: var(--ss-primary);
  color: #fff;
  border-radius: var(--ss-radius-sm);
  padding: 13px 22px;
  font-weight: 700; font-size: 14px;
  text-align: center; text-decoration: none;
  display: block; white-space: nowrap;
  transition: background .15s, transform .12s;
}
.ss-coupon__btn:hover { background: var(--ss-primary-2); transform: translateY(-1px); opacity: 1; }

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.ast-breadcrumbs-wrapper,
.ss-breadcrumbs {
  font-size: 13px; color: var(--ss-muted);
  padding: 14px 40px;
  border-bottom: 1px solid var(--ss-border);
}
.ast-breadcrumbs-wrapper a,
.ss-breadcrumbs a { color: var(--ss-muted); }
.ast-breadcrumbs-wrapper a:hover,
.ss-breadcrumbs a:hover { color: var(--ss-text); opacity: 1; }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.ss-faq {
  border: 1.5px solid var(--ss-border);
  border-radius: var(--ss-radius);
  overflow: hidden; margin-top: 28px;
}
.ss-faq__header {
  padding: 18px 22px; font-weight: 700; font-size: 16px;
  border-bottom: 1px solid var(--ss-border);
  display: flex; align-items: center; justify-content: space-between;
}
.ss-faq__item { border-bottom: 1px solid var(--ss-border); }
.ss-faq__item:last-child { border-bottom: none; }
.ss-faq__question {
  padding: 16px 22px; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
}
.ss-faq__question::after { content: "∨"; color: var(--ss-muted); }

/* ============================================================
   GLOBAL GUTENBERG BUTTONS
   ============================================================ */
.wp-block-button .wp-block-button__link {
  border-radius: 999px !important;
  padding: 11px 22px;
  font-weight: 600;
  font-size: 14px;
  border: 1.5px solid transparent;
  transition: transform .12s, box-shadow .12s, background .15s;
}
.wp-block-button .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--ss-shadow-sm);
  opacity: 1;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: linear-gradient(160deg, var(--ss-primary-2), var(--ss-primary)) !important;
  color: #fff !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--ss-primary) !important;
  border-color: rgba(29,78,216,.3) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(29,78,216,.06) !important;
}
.wp-block-button .wp-block-button__link:focus-visible {
  outline: 3px solid rgba(37,99,235,.30);
  outline-offset: 2px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
#colophon {
  background: var(--ss-card) !important;
  border-top: 1px solid var(--ss-border);
  padding: 20px 40px;
  font-size: 13px; color: var(--ss-muted);
}
.site-footer a, #colophon a { color: var(--ss-muted); }
.site-footer a:hover, #colophon a:hover { color: var(--ss-text); opacity: 1; }

/* ============================================================
   FOCUS / ACCESSIBILITY
   ============================================================ */
:focus-visible {
  outline: 3px solid rgba(29, 78, 216, .35);
  outline-offset: 2px;
  border-radius: var(--ss-radius-xs);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .ss-stores-grid.wp-block-columns,
  .ss-trending-grid.wp-block-columns {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ss-hero { grid-template-columns: 1fr; padding: 32px 20px 24px; }
  .ss-section { padding: 24px 20px; }
  .ss-coupon { grid-template-columns: 1fr; }
  .ss-store-banner { flex-direction: column; text-align: center; }
  .ast-breadcrumbs-wrapper, .ss-breadcrumbs { padding: 12px 20px; }
  #page.site, .hfeed.site, .site { margin: 0 !important; border-radius: 0; }
}

@media (max-width: 560px) {
  .ss-stores-grid.wp-block-columns,
  .ss-trending-grid.wp-block-columns {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ============================================================
   STORE TEMPLATE — дополнительные стили для паттерна
   ============================================================ */

/* Affiliate notice */
.ss-affiliate-note {
  font-size: 12px !important;
  color: var(--ss-muted) !important;
  margin-top: 20px !important;
  padding: 10px 14px;
  background: rgba(15, 23, 42, .03);
  border-radius: var(--ss-radius-xs);
  border-left: 3px solid var(--ss-border);
}
.ss-affiliate-note a { color: var(--ss-muted); text-decoration: underline; }

/* Offer list — чуть крупнее и с отступами */
.ss-offer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 0 !important;
  list-style: none !important;
}
.ss-offer-list li {
  padding: 12px 16px;
  background: var(--ss-bg);
  border-radius: var(--ss-radius-xs);
  border-left: 3px solid var(--ss-primary);
  font-size: 14px;
}
.ss-offer-list li strong { color: var(--ss-text); }

/* Info cards row (Shipping & Returns) */
.ss-info-cols.wp-block-columns {
  gap: 14px !important;
}
.ss-info-card.wp-block-column {
  background: var(--ss-bg);
  border: 1.5px solid var(--ss-border);
  border-radius: var(--ss-radius);
  padding: 18px 20px !important;
}
.ss-info-card p { font-size: 14px; color: var(--ss-text); line-height: 1.6; margin: 0; }

/* FAQ — native Details/Summary blocks */
.ss-faq-block .wp-block-details {
  border: 1.5px solid var(--ss-border);
  border-radius: var(--ss-radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}
.ss-faq-block .wp-block-details summary {
  padding: 14px 18px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ss-bg);
}
.ss-faq-block .wp-block-details summary::after {
  content: "∨";
  color: var(--ss-muted);
  font-weight: 400;
}
.ss-faq-block .wp-block-details[open] summary {
  border-bottom: 1px solid var(--ss-border);
  background: var(--ss-card);
}
.ss-faq-block .wp-block-details[open] summary::after { content: "∧"; }
.ss-faq-block .wp-block-details p {
  padding: 14px 18px;
  font-size: 14px;
  color: var(--ss-muted);
  margin: 0;
}

/* FAQ list (fallback без wp:details) */
.ss-faq-list {
  list-style: none !important;
  padding-left: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ss-faq-list li {
  padding: 14px 18px;
  background: var(--ss-bg);
  border: 1.5px solid var(--ss-border);
  border-radius: var(--ss-radius-sm);
  font-size: 14px;
  line-height: 1.6;
}
.ss-faq-list li strong {
  color: var(--ss-text);
  display: block;
  margin-bottom: 4px;
}

/* Info cols — fix Astra column gap */
.wp-block-columns.ss-info-cols {
  gap: 14px !important;
}

/* ============================================================
   STORE LIST — список магазинов с ссылками (Beauty, Pet и т.д.)
   ============================================================ */
.ss-store-list {
  list-style: none !important;
  padding-left: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px !important;
}
.ss-store-list li {
  border: 1.5px solid var(--ss-border);
  border-radius: var(--ss-radius-sm);
  background: var(--ss-card);
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.ss-store-list li:hover {
  box-shadow: var(--ss-shadow-xs);
  border-color: rgba(29, 78, 216, .22);
  transform: translateX(3px);
}
.ss-store-list li a {
  display: block;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ss-text);
  text-decoration: none;
}
.ss-store-list li a::after {
  content: " →";
  color: var(--ss-primary);
  font-weight: 600;
}
.ss-store-list li a:hover {
  color: var(--ss-primary);
  opacity: 1;
}

/* Quick links — маленький компактный список */
.ss-quick-links {
  list-style: none !important;
  padding-left: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px !important;
}
.ss-quick-links li a {
  display: inline-block;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ss-primary);
  background: rgba(29, 78, 216, .06);
  border: 1px solid rgba(29, 78, 216, .15);
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s;
}
.ss-quick-links li a:hover {
  background: rgba(29, 78, 216, .12);
  opacity: 1;
}

/* ============================================================
   CONTENT PADDING — universal fix for all pages/templates
   ============================================================ */

/* 1. Astra's content container — ensure padding on all templates */
.ast-container {
  padding-left: clamp(20px, 4vw, 48px) !important;
  padding-right: clamp(20px, 4vw, 48px) !important;
}

/* 2. alignfull blocks break out of .ast-container via negative margins.
      Inside our .site card they must stay contained and get their own padding.
      Use !important to beat Astra's page-builder-template overrides. */
.wp-block-group.alignfull,
.wp-block-group.alignfull.is-layout-constrained {
  padding-left:  clamp(20px, 4vw, 48px) !important;
  padding-right: clamp(20px, 4vw, 48px) !important;
  box-sizing: border-box;
}

/* 3. ss-section — explicit vertical + horizontal padding */
.wp-block-group.ss-section {
  padding: 32px clamp(20px, 4vw, 48px) !important;
}

/* 4. Prevent alignfull from overflowing the rounded .site card */
.site .wp-block-group.alignfull,
#page .wp-block-group.alignfull {
  width: 100% !important;
  max-width: 100% !important;
  margin-left:  0 !important;
  margin-right: 0 !important;
}

/* ============================================================
   AFFILIATE DISCLOSURE BAR — shown on every page above footer
   ============================================================ */
.ss-disclosure-bar {
  background: rgba(15, 23, 42, .04);
  border-top: 1px solid var(--ss-border);
  text-align: center;
  padding: 10px clamp(20px, 4vw, 48px);
}
.ss-disclosure-bar p {
  font-size: 12px;
  color: var(--ss-muted);
  margin: 0;
  line-height: 1.5;
}
.ss-disclosure-bar a {
  color: var(--ss-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ss-disclosure-bar a:hover {
  color: var(--ss-text);
  opacity: 1;
}

/* A–Z index list */
.ss-az-index {
  list-style: none !important;
  padding-left: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ss-az-index li {
  padding: 10px 16px;
  font-size: 14px;
  border-radius: var(--ss-radius-xs);
  border-left: 3px solid var(--ss-border);
  background: var(--ss-bg);
}
.ss-az-index li strong {
  color: var(--ss-text);
  font-weight: 700;
  min-width: 18px;
  display: inline-block;
}
.ss-az-index li a {
  color: var(--ss-primary);
  font-weight: 500;
}
.ss-az-index li a:hover { opacity: .8; }


.ss-breadcrumbs {
  font-size: 14px;
  margin: 0 0 10px;
  line-height: 1.5;
}

.ss-breadcrumbs a {
  text-decoration: none;
}

.ss-breadcrumb-sep {
  opacity: 0.7;
}

.ss-review-dates {
  font-size: 14px;
  opacity: 0.85;
  margin: 0 0 18px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.ss-review-summary {
  margin: 24px 0 28px;
}

.ss-review-summary__heading {
  margin-bottom: 10px;
}

.ss-review-summary__rating {
  margin: 0 0 10px;
  font-weight: 700;
}

.ss-review-summary__text {
  margin: 0;
}


/* Hide affiliate-toolkit stars and customer review links in product boxes */
.atkp-product-rating,
.atkp-rating,
.atkp-star-rating,
.atkp-stars,
.atkp-product-stars,
.atkp-review-stars,
.atkp-product-review-link,
.atkp-reviews-link,
.atkp-product-reviews,
.atkp-link-reviews {
  display: none !important;
}


/* ============================================================
   GLOBAL MEGA FOOTER — site-wide footer navigation above Astra footer
   ============================================================ */
.ss-mega-footer-wrap {
  border-top: 1px solid var(--ss-border);
  background: linear-gradient(180deg, rgba(29,78,216,.02) 0%, rgba(15,23,42,.02) 100%);
}

.ss-mega-footer {
  display: grid;
  grid-template-columns: minmax(240px, 1.1fr) minmax(0, 2fr);
  gap: 28px;
  padding-top: 28px;
  padding-bottom: 28px;
}

.ss-mega-footer__brand {
  padding-right: 12px;
}

.ss-mega-footer__title {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ss-text);
}

.ss-mega-footer__desc,
.ss-mega-footer__note {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--ss-muted);
}

.ss-mega-footer__note {
  font-size: 12px;
  padding: 10px 12px;
  background: rgba(15,23,42,.03);
  border-radius: var(--ss-radius-xs);
  border-left: 3px solid var(--ss-border);
}

.ss-mega-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.ss-mega-footer__col-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ss-text);
}

.ss-mega-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ss-mega-footer__links a {
  color: var(--ss-muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.ss-mega-footer__links a:hover {
  color: var(--ss-text);
  opacity: 1;
}

@media (max-width: 900px) {
  .ss-mega-footer {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .ss-mega-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .ss-mega-footer__grid {
    grid-template-columns: 1fr;
  }
}


/* SaveSleuth mega footer polish */
.ss-mega-footer__grid { align-items: start; }
.ss-mega-footer__brand { max-width: 320px; }
.ss-mega-footer__note { margin-top: 14px; }