/* ==========================================
   Petshop theme.css
   Palette aligned with alfies dog den/css/styles.css :root tokens.
   Almost all colours are driven by theme settings → injected as :root --color-*
   (see RenderPageService::buildThemeCssVariables). Each --theme-* below falls back
   to the Alfie static defaults if a setting is missing.
========================================== */

:root {
  /* ----- Core (builder / backend colors group) ----- */
  --theme-primary: var(--color-primary, #00b72f);
  --theme-secondary: var(--color-secondary, #0f2f2c);
  --theme-accent: var(--color-accent, #00b72f);
  --theme-accent-dark: var(--color-accentDark, #008f25);

  /* ----- Surfaces (Alfie: --bg, --card, --cream) ----- */
  --theme-bg: var(--color-background, #ffffff);
  --theme-surface: var(--color-surfaceCard, #ffffff);
  --theme-bg-muted: var(--color-cream, #efe7da);
  --theme-cream: var(--color-cream, #efe7da);

  /* ----- Text ----- */
  --theme-text: var(--color-secondary, #0f2f2c);
  --theme-text-secondary: var(--color-textSecondary, #1f3f3a);
  --theme-text-inverse: var(--color-textInverse, #ffffff);
  --theme-muted: var(--color-muted, #5f6f69);
  --theme-text-muted: var(--color-muted, #5f6f69);
  --theme-hero-heading: var(--color-heroHeading, #123a36);

  /* ----- Borders & shadows ----- */
  --theme-border: var(--color-border, #d9d9d4);
  --theme-shadow: var(--layout-shadow, 0 2px 8px rgba(0, 0, 0, 0.06));

  /* ----- Layout ----- */
  --theme-radius: var(--layout-radius, 10px);
  --theme-section-spacing: var(--layout-sectionSpacing, 40px);
  --theme-hero-media-radius: var(--layout-heroImageRadius, 22px);

  /* ----- Header shell (Alfie-style navy stack) ----- */
  --theme-header-bg: var(--color-headerBg, #1a2b4b);
  --theme-header-nav-bg: var(--color-headerNavBg, #152238);
  --theme-top-strip-bg: var(--color-topStripBg, #0f1a2e);
  --theme-nav-link-hover: var(--color-navLinkHover, rgba(255, 255, 255, 0.92));
  --theme-search-button-bg: var(--color-searchButtonBg, var(--color-primary, #00b72f));

  /* ----- Promo / secondary bars ----- */
  --theme-promo-bar-bg: var(--color-promoBarBg, #e4eaf2);
  --theme-promo-bar-text: var(--color-promoBarText, #2d3a4a);

  /* ----- UI & chrome ----- */
  --theme-price: var(--color-primary, #00b72f);
  --theme-danger: var(--color-danger, #b91c1c);
  --theme-success: var(--color-success, #16a34a);
  --theme-overlay: var(--color-overlay, rgba(0, 0, 0, 0.45));
  --theme-icon-bg: var(--color-iconBg, rgba(255, 255, 255, 0.15));
  --theme-announcement-bg: var(--color-announcementBg, #0f1a2e);

  --theme-control-bg: var(--color-controlBg, rgba(0, 0, 0, 0.5));
  --theme-control-bg-hover: var(--color-controlBgHover, rgba(0, 0, 0, 0.7));

  /* ----- Hero banner (carousel) ----- */
  --theme-overlay-dark: var(--color-overlayDark, #003c3a);
  --theme-overlay-light: var(--color-overlayLight, #ffffff);
  --theme-overlay-opacity: var(--color-overlayOpacity, 0.12);
  --theme-hero-banner-bg: var(--color-heroBannerBg, #1a2b4b);
  --theme-hero-text-panel-bg: var(--color-heroTextPanelBg, #1a2b4b);
  --theme-hero-bullet-inactive: var(--color-heroBulletInactive, rgba(255, 255, 255, 0.28));
  --theme-hero-bullet-active: var(--color-heroBulletActive, var(--color-primary, #00b72f));
  --theme-hero-title-color: var(--color-heroTitleColor, #ffffff);
  --theme-hero-subtitle-color: var(--color-heroSubtitleColor, rgba(255, 255, 255, 0.92));
  --theme-hero-cta-bg: var(--color-heroButtonBg, #00b72f);
  --theme-hero-cta-color: var(--color-heroButtonColor, #ffffff);

  /* ----- Footer ----- */
  --theme-footer-bg: var(--color-footerBg, #1a2b4b);
  --theme-footer-text: var(--color-footerText, #ffffff);
  --theme-footer-muted: var(--color-footerMuted, #c8ddd8);
  --theme-footer-surface: var(--color-footerSurface, rgba(255, 255, 255, 0.1));
  --theme-footer-surface-hover: var(--color-footerSurfaceHover, rgba(255, 255, 255, 0.2));

  /* ----- Typography ----- */
  --theme-font-family: var(--font-family, Inter), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --theme-font-size: var(--font-size, 14px);
  --theme-font-serif: var(--font-serif, Georgia), "Times New Roman", serif;
}

/* ==========================================
   Global reset / base
========================================== */

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

html {
  font-family: var(--theme-font-family);
  font-size: var(--theme-font-size);
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--theme-bg);
  color: var(--theme-text);
}

a {
  color: inherit;
}

/* ==========================================
   Typography
========================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--theme-text);
  margin: 0 0 0.5rem;
}

p {
  margin: 0 0 1rem;
  color: var(--theme-text);
}

.t1-hero-title {
  font-family: var(--theme-font-serif);
  letter-spacing: -0.02em;
  color: var(--theme-hero-heading);
}

/* ==========================================
   Generic buttons (fallback)
========================================== */

button,
.btn {
  background-color: var(--theme-primary);
  color: var(--theme-text-inverse);
  border: none;
  padding: 7px 12px;
  border-radius: var(--theme-radius);
  cursor: pointer;
}

.btn:hover {
  background-color: var(--theme-accent-dark);
}

.btn-secondary {
  background-color: var(--theme-secondary);
}

.btn-accent {
  background-color: var(--theme-accent);
}

/* ==========================================
   Utility: promo bar (optional markup)
========================================== */

.t1-promo-bar {
  background: var(--theme-promo-bar-bg);
  color: var(--theme-promo-bar-text);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 10px;
  border-bottom: 1px solid var(--theme-border);
}


/* Page canvas: solid white */
body,
body.theme-petshop-7,
#main-content.site-main,
.site-main {
  background-color: #ffffff !important;
  background: #ffffff !important;
}