@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&family=Montserrat:wght@600;700;800&display=swap');

/* =========================================================================
   LEO Sticker - storefront skin (Dawn-like, stickios-style palette)
   navy #1E376C  ·  red #CE202F  ·  light #C6D2DA  ·  ink #020912
   Loaded from the mu-plugin layer so the theme files stay untouched.
   ========================================================================= */
:root {
  --leo-navy: #1E376C;
  --leo-navy-dark: #16294F;
  --leo-navy-soft: #E8EDF6;
  --leo-accent: #CE202F;
  --leo-accent-dark: #B01B27;
  --leo-ink: #020912;
  --leo-body: #3A3A3A;
  --leo-muted: #6B7280;
  --leo-line: #E6E6E6;
  --leo-bg-soft: #F6F6F6;
  --leo-radius: 8px;
  --leo-shadow: 0 2px 8px rgba(2, 9, 18, .06);
  --leo-shadow-hover: 0 8px 24px rgba(2, 9, 18, .12);
  --leo-font: Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --leo-heading: Montserrat, Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --leo-max: 1200px;
}

/* ---------- base ---------- */
body {
  font-family: var(--leo-font);
  color: var(--leo-body);
  background: #fff;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .wp-block-post-title, .wp-block-heading, .leo-col-title, .leo-tile-title, .leo-fcol-title {
  font-family: var(--leo-heading);
  color: var(--leo-navy);
  letter-spacing: .01em;
  line-height: 1.25;
}
h1 { font-weight: 800; font-size: clamp(28px, 4vw, 42px); }
h2, .wp-block-heading { font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); }
h3 { font-weight: 700; font-size: 20px; }
h4 { font-weight: 700; font-size: 16px; }
a { color: var(--leo-navy); text-decoration: none; }
a:hover { color: var(--leo-accent); }
p { color: var(--leo-body); }

/* ---------- header ---------- */
.leo-header-shell {
  background: #fff;
  border-bottom: 1px solid var(--leo-line);
  position: sticky;
  top: 0;
  z-index: 60;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.leo-header-row { max-width: var(--leo-max); margin: 0 auto; gap: 26px; }
.wp-block-site-title, .wp-block-site-title a {
  font-family: var(--leo-heading);
  font-weight: 800 !important;
  color: var(--leo-navy) !important;
  letter-spacing: .02em;
  font-size: 26px !important;
  line-height: 1;
}
.leo-primary-nav { gap: 4px; }
.leo-primary-nav a, .leo-primary-nav .wp-block-navigation-item__content {
  font-family: var(--leo-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--leo-navy);
  padding: 8px 12px;
  border-radius: 6px;
  transition: background .15s ease, color .15s ease;
}
.leo-primary-nav a:hover, .leo-primary-nav .wp-block-navigation-item__content:hover {
  background: var(--leo-navy-soft);
  color: var(--leo-navy);
}
.leo-header-actions { gap: 10px; align-items: center; }
.leo-search { display: flex; align-items: center; background: var(--leo-bg-soft); border: 1px solid var(--leo-line); border-radius: 999px; padding: 4px 6px 4px 14px; }
.leo-search-input { border: 0; background: transparent; outline: none; font-size: 14px; width: 170px; color: var(--leo-ink); }
.leo-search-btn { border: 0; background: transparent; cursor: pointer; display: flex; padding: 6px; color: var(--leo-navy); }
.leo-search-btn svg { width: 18px; height: 18px; fill: currentColor; }
.leo-header-actions .wc-block-customer-account__account-icon,
.leo-header-actions .wc-block-mini-cart__icon { color: var(--leo-navy); }

/* ---------- buttons ---------- */
.wp-element-button, button.wp-element-button, .wp-block-button__link,
.wc-block-components-button:not(.is-link), button.single_add_to_cart_button,
.leo-top-btn, input[type="submit"] {
  font-family: var(--leo-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  background: var(--leo-navy) !important;
  color: #fff !important;
  border: 1px solid var(--leo-navy) !important;
  border-radius: 6px !important;
  padding: 13px 26px !important;
  transition: background .15s ease, transform .15s ease;
}
.wp-element-button:hover, .wp-block-button__link:hover, .wc-block-components-button:not(.is-link):hover,
button.single_add_to_cart_button:hover, .leo-top-btn:hover {
  background: var(--leo-navy-dark) !important;
  border-color: var(--leo-navy-dark) !important;
  color: #fff !important;
}
.wp-block-button.is-style-outline .wp-block-button__link,
.wc-block-components-button.is-link {
  background: #fff !important;
  color: var(--leo-navy) !important;
  border: 1px solid var(--leo-navy) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--leo-navy-soft) !important; }

/* ---------- product grid (Woo product-collection blocks) ---------- */
ul.wc-block-product-template { gap: 26px 22px; }
li.wc-block-product, li.product {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
}
.wc-block-components-product-image, li.product .woocommerce-loop-product__link img {
  border-radius: var(--leo-radius);
  overflow: hidden;
  background: var(--leo-bg-soft);
  transition: box-shadow .18s ease, transform .18s ease;
}
.wc-block-components-product-image img, li.product img { border-radius: var(--leo-radius); }
li.wc-block-product:hover .wc-block-components-product-image { box-shadow: var(--leo-shadow-hover); transform: translateY(-3px); }
.wc-block-components-product-title, .wp-block-post-title {
  font-family: var(--leo-heading);
  font-size: 15px !important;
  font-weight: 600;
  color: var(--leo-navy);
  margin: 12px 0 4px !important;
}
.wc-block-components-product-title a, .wp-block-post-title a { color: var(--leo-navy); }
.wc-block-components-product-title a:hover { color: var(--leo-accent); }
.wc-block-components-product-price, .woocommerce-Price-amount {
  font-family: var(--leo-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--leo-ink);
}
.wc-block-components-product-sale-badge {
  background: var(--leo-accent) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600;
}

/* ---------- collection / tile components (leo-*) ---------- */
.leo-section { padding: 54px 0; max-width: var(--leo-max); margin: 0 auto; }
.leo-section + .leo-section { border-top: 1px solid var(--leo-line); }
.leo-col-title { font-size: 22px; font-weight: 700; margin-bottom: 14px; }
.leo-col-list { display: grid; gap: 8px; }
.leo-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--leo-bg-soft);
  border: 1px solid var(--leo-line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--leo-navy);
  transition: border-color .15s ease, background .15s ease;
}
.leo-chip:hover { border-color: var(--leo-navy); background: #fff; }
.leo-chip-count, .leo-top-count { color: var(--leo-muted); font-size: 12px; font-weight: 500; }
.leo-card, .leo-col {
  background: #fff;
  border: 1px solid var(--leo-line);
  border-radius: 12px;
  padding: 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.leo-card:hover, .leo-col:hover { border-color: var(--leo-navy); box-shadow: var(--leo-shadow); }
.leo-card-body { font-size: 14px; color: var(--leo-muted); }
.leo-tile {
  background: #fff; border: 1px solid var(--leo-line); border-radius: 12px; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .15s ease;
}
.leo-tile:hover { transform: translateY(-3px); box-shadow: var(--leo-shadow-hover); border-color: var(--leo-navy); }
.leo-tile img { width: 100%; display: block; }
.leo-tile-body { padding: 14px; }
.leo-tile-title { font-size: 15px; font-weight: 600; color: var(--leo-navy); margin: 0 0 4px; }
.leo-tile-price { font-size: 14px; font-weight: 600; color: var(--leo-ink); }
.leo-panel { background: var(--leo-bg-soft); border: 1px solid var(--leo-line); border-radius: 12px; }
.leo-panel-inner { padding: 18px; }
.leo-panel-foot { border-top: 1px solid var(--leo-line); padding: 12px 18px; }
.leo-top-link { font-size: 14px; font-weight: 600; color: var(--leo-navy); }
.leo-top-link:hover { color: var(--leo-accent); }

/* ---------- product page ---------- */
.single-product .woocommerce-product-gallery img { border-radius: var(--leo-radius); }
.single-product .product_title, .single-product h1.product_title { font-family: var(--leo-heading); font-weight: 800; font-size: clamp(24px, 3vw, 34px); color: var(--leo-navy); }
.single-product .price, .single-product p.price { font-size: 22px; font-weight: 700; color: var(--leo-ink); }
.single-product .woocommerce-product-details__short-description { color: var(--leo-body); }
.single-product table.leo-specs, .single-product table { border-collapse: collapse; width: 100%; font-size: 14px; }
.single-product table th, .single-product table td { border-bottom: 1px solid var(--leo-line); padding: 10px 12px; text-align: left; }
.single-product table th { color: var(--leo-navy); font-weight: 600; width: 34%; background: var(--leo-bg-soft); }
.single-product .single_add_to_cart_button { width: 100%; }
.leo-pay-badge, .leo-trust-item { font-size: 13px; color: var(--leo-muted); }

/* ---------- store notice / breadcrumbs / pagination ---------- */
.wp-block-woocommerce-store-notice, .woocommerce-store-notice { background: var(--leo-navy) !important; color: #fff !important; font-size: 13px !important; }
.wp-block-woocommerce-breadcrumbs, .woocommerce-breadcrumb { font-size: 13px; color: var(--leo-muted); }
.wp-block-woocommerce-breadcrumbs a, .woocommerce-breadcrumb a { color: var(--leo-muted); }
.wp-block-woocommerce-breadcrumbs a:hover, .woocommerce-breadcrumb a:hover { color: var(--leo-navy); }
.wp-block-query-pagination a, .woocommerce-pagination a { color: var(--leo-navy); font-weight: 600; }
.wp-block-query-pagination .current, .woocommerce-pagination .current { background: var(--leo-navy); color: #fff; border-radius: 6px; padding: 6px 12px; }

/* ---------- footer ---------- */
.leo-footer {
  background: var(--leo-bg-soft);
  border-top: 1px solid var(--leo-line);
  margin-top: 40px;
}
.leo-footer .wp-block-columns { max-width: var(--leo-max); margin: 0 auto; gap: 34px; }
.leo-fcol-title, .leo-footer h4, .leo-footer .wp-block-heading {
  font-family: var(--leo-heading);
  font-size: 14px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--leo-navy);
  margin-bottom: 10px;
}
.leo-footer .wp-block-list li, .leo-fcol-list li { margin-bottom: 8px; }
.leo-footer a { font-size: 14px; color: var(--leo-body); }
.leo-footer a:hover { color: var(--leo-accent); }
.leo-footer .wp-block-site-title a { font-size: 22px !important; color: var(--leo-navy) !important; }
.leo-footer-trust { color: var(--leo-muted); }
.leo-footer-bottom {
  max-width: var(--leo-max);
  margin: 26px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--leo-line);
  font-size: 13px;
  color: var(--leo-muted);
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .leo-search-input { width: 120px; }
  .leo-header-row { gap: 14px; }
}
@media (max-width: 860px) {
  .leo-search { display: none; }
  ul.wc-block-product-template { gap: 20px 14px; }
  .leo-section { padding: 38px 0; }
  .leo-footer .wp-block-columns { gap: 22px; }
}


/* =========================================================================
   Overrides for the existing theme components (they carry inline styles and
   !important rules, so these need !important too). Palette follows the target.
   ========================================================================= */

/* announcement strip -> navy */
body .leo-announce { background: var(--leo-navy) !important; }
body .leo-announce-inner { color: #fff !important; }

/* front-page hero */
.leo-hero .leo-eyebrow, body.home .leo-hero .leo-eyebrow { color: var(--leo-accent) !important; }
.leo-hero h1, body.home .leo-hero h1 {
  font-family: var(--leo-heading) !important;
  font-weight: 800 !important;
  color: var(--leo-navy) !important;
  letter-spacing: -.01em !important;
}
.leo-hero p, body.home .leo-hero p { color: var(--leo-body) !important; }
.leo-hero img, body.home .leo-hero img { border-radius: var(--leo-radius) !important; box-shadow: var(--leo-shadow) !important; }
.leo-hero a.leo-btn:first-of-type, body.home .leo-hero a.leo-btn:first-of-type {
  background: var(--leo-navy) !important; border-color: var(--leo-navy) !important; color: #fff !important;
}
.leo-hero a.leo-btn:first-of-type:hover { background: var(--leo-navy-dark) !important; border-color: var(--leo-navy-dark) !important; }
.leo-hero a.leo-btn:not(:first-of-type) {
  background: #fff !important; border-color: var(--leo-navy) !important; color: var(--leo-navy) !important;
}
.leo-hero a.leo-btn:not(:first-of-type):hover { background: var(--leo-navy-soft) !important; }
.leo-hero a.leo-chip, body.home .leo-hero a.leo-chip {
  background: #fff !important; border-color: var(--leo-line) !important; color: var(--leo-navy) !important;
}
.leo-hero a.leo-chip:hover { border-color: var(--leo-navy) !important; }

/* buttons anywhere in the storefront */
.leo-btn { background: var(--leo-navy) !important; border-color: var(--leo-navy) !important; color: #fff !important; }

/* chips, cards and tiles */
body .leo-chip { background: var(--leo-bg-soft) !important; border-color: var(--leo-line) !important; color: var(--leo-navy) !important; }
body .leo-chip:hover { background: #fff !important; border-color: var(--leo-navy) !important; }
body .leo-card, body .leo-col, body.home .leo-card { border-radius: 12px !important; border-color: var(--leo-line) !important; }
body.home .leo-card:hover { border-color: var(--leo-navy) !important; box-shadow: var(--leo-shadow-hover) !important; }
body .leo-tile { border-radius: 12px !important; }

/* headings everywhere follow the heading face */
body .leo-col-title, body .leo-tile-title, body .leo-fcol-title, body .wp-block-heading,
body .wc-block-components-product-title, body .wp-block-post-title {
  font-family: var(--leo-heading) !important;
  color: var(--leo-navy) !important;
}

/* price emphasis */
body .woocommerce-Price-amount bdi, body .wc-block-components-product-price { color: var(--leo-ink) !important; }


/* product card title/price anchors */
li.wc-block-product .wp-block-post-title a, li.wc-block-product .wc-block-components-product-title a,
li.product .woocommerce-loop-product__title, li.product .woocommerce-loop-product__link .woocommerce-loop-product__title {
  color: var(--leo-navy) !important;
}
li.wc-block-product .wp-block-post-title a:hover, li.wc-block-product .wc-block-components-product-title a:hover { color: var(--leo-accent) !important; }

/* footer -> light surface (the target footer is light with navy text) */
body .leo-footer-v2, body .leo-footer {
  background: var(--leo-bg-soft) !important;
  color: var(--leo-body) !important;
  border-top: 1px solid var(--leo-line) !important;
}
body .leo-footer-v2 .leo-fbrand-name, body .leo-footer-v2 h3, body .leo-footer-v2 .leo-fgrid h3,
body .leo-footer h4, body .leo-footer .wp-block-site-title a { color: var(--leo-navy) !important; }
body .leo-footer-v2 p, body .leo-footer-v2 .leo-fbrand-line, body .leo-footer-v2 .leo-ftrust, body .leo-footer-v2 .leo-fpay { color: var(--leo-muted) !important; }
body .leo-footer-v2 a, body .leo-footer a { color: var(--leo-body) !important; }
body .leo-footer-v2 a:hover, body .leo-footer a:hover { color: var(--leo-accent) !important; }
body .leo-footer-v2 .leo-badges li {
  background: #fff !important; border: 1px solid var(--leo-line) !important; color: var(--leo-navy) !important;
  border-radius: 999px !important; padding: 6px 12px !important; font-size: 13px !important;
}
body .leo-footer-v2 .leo-badges { display: flex !important; flex-wrap: wrap; gap: 8px !important; list-style: none; padding: 0; }
body .leo-footer-v2 .leo-n { color: var(--leo-muted) !important; }
body .leo-footer-v2 .leo-fbrand > :last-child::before { color: var(--leo-navy) !important; }


/* ---------- final hard overrides (beat the theme's body-prefixed !important rules) ---------- */
html body .leo-btn, html body a.leo-btn, html body .leo-hero a.leo-btn:first-of-type {
  background: var(--leo-navy) !important;
  border-color: var(--leo-navy) !important;
  color: #fff !important;
}
html body a.leo-btn:not(:first-of-type), html body .leo-hero a.leo-btn:not(:first-of-type) {
  background: #fff !important;
  border-color: var(--leo-navy) !important;
  color: var(--leo-navy) !important;
}
html body .wp-element-button, html body .wp-block-button__link,
html body a.wc-block-components-product-button__button,
html body button.single_add_to_cart_button, html body .wc-block-components-button:not(.is-link) {
  background: var(--leo-navy) !important;
  border-color: var(--leo-navy) !important;
  color: #fff !important;
}
html body .wp-element-button:hover, html body .wp-block-button__link:hover,
html body a.wc-block-components-product-button__button:hover, html body button.single_add_to_cart_button:hover {
  background: var(--leo-navy-dark) !important;
  border-color: var(--leo-navy-dark) !important;
}
html body .wc-block-components-button.is-link, html body .is-style-outline .wp-block-button__link {
  background: transparent !important; border-color: var(--leo-navy) !important; color: var(--leo-navy) !important;
}
html body .leo-footer-v2 a, html body .leo-footer a, html body .leo-fcol-list a, html body .leo-footer-v2 .leo-fcol-list a {
  color: var(--leo-body) !important;
}
html body .leo-footer-v2 a:hover, html body .leo-footer a:hover { color: var(--leo-accent) !important; }
html body .leo-footer-v2 .leo-fbrand-name, html body .leo-footer-v2 .leo-fcol-title,
html body .leo-footer-v2 h3, html body .leo-footer h4 { color: var(--leo-navy) !important; }
html body .leo-footer-v2, html body .leo-footer { background: var(--leo-bg-soft) !important; border-top: 1px solid var(--leo-line) !important; }
html body .leo-footer-v2 p, html body .leo-ftrust, html body .leo-fpay { color: var(--leo-muted) !important; }


/* ---------- product page specifics (theme sets these with equal-or-higher specificity) ---------- */
html body h1, html body h1.wp-block-heading, html body .wp-block-post-title, html body .product_title {
  color: var(--leo-navy) !important;
}
html body.single-product form.cart button.single_add_to_cart_button,
html body.single-product .single_add_to_cart_button.alt,
html body.single-product .single_add_to_cart_button {
  background: var(--leo-navy) !important;
  border-color: var(--leo-navy) !important;
  color: #fff !important;
}
html body.single-product form.cart button.single_add_to_cart_button:hover,
html body.single-product .single_add_to_cart_button:hover {
  background: var(--leo-navy-dark) !important;
  border-color: var(--leo-navy-dark) !important;
}
html body.single-product .price, html body.single-product p.price, html body.single-product .woocommerce-Price-amount {
  color: var(--leo-ink) !important;
}
