/* === Smooth-scroll offset for brand anchors (sticky header) === */
:target { scroll-margin-top: 90px; }
.brand-anchor { display:block; height:0; scroll-margin-top: 90px; position: relative; }

/* === Product card: brand link badge === */
.eae-brand-link {
  display: inline-block;
  margin: 6px 0 10px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: #ff6a00 !important;
  background: rgba(255, 106, 0, 0.08);
  border: 1px solid rgba(255, 106, 0, 0.25);
  border-radius: 999px;
  transition: all 0.15s ease;
  line-height: 1.4;
}
.eae-brand-link:hover {
  background: #ff6a00;
  color: #0a0a0a !important;
  border-color: #ff6a00;
}
.eae-brand-link strong { font-weight: 600; }

/* === Shop / product layout polish === */
ul.products.products li.product .post_data,
ul.products li.product .post_data {
  padding: 18px 16px 22px !important;
}
ul.products li.product .woocommerce-loop-product__title {
  font-size: 17px !important;
  line-height: 1.3 !important;
  margin: 0 0 4px !important;
  font-weight: 600;
}
ul.products li.product .post_featured {
  background: #0f0f0f;
}
ul.products li.product .post_featured img {
  object-fit: contain !important;
  padding: 16px;
  background: #fff;
  transition: transform 0.3s ease;
}
ul.products li.product:hover .post_featured img {
  transform: scale(1.04);
}

/* Tighten product grid gutters on small screens */
@media (max-width: 768px) {
  ul.products.products,
  ul.products {
    gap: 16px !important;
  }
}

/* === Shop pagination polish === */
.woocommerce-pagination,
nav.woocommerce-pagination {
  padding: 32px 0 16px;
}
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
  border-radius: 8px !important;
  min-width: 38px;
  height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid #2a2a2a !important;
  transition: all 0.15s;
}
.woocommerce-pagination ul.page-numbers li a:hover,
.woocommerce-pagination ul.page-numbers li span.current {
  background: #ff6a00 !important;
  color: #0a0a0a !important;
  border-color: #ff6a00 !important;
}

/* === Make in-page anchors scroll into view nicely === */
html { scroll-behavior: smooth; }

/* === Top nav fixes ==========================================================
   1. The theme shows the 3-dot mobile burger (sc_layouts_menu_mobile_button)
      at viewport widths where the full desktop menu also fits — hide it on
      desktop so the full 7-item nav (Home … Contact) shows uninterrupted.
   2. Style the Contact link as a distinct CTA pill so it reads as an action,
      not just another text link.
============================================================================ */
@media (min-width: 768px) {
  .sc_layouts_menu_mobile_button,
  .sc_layouts_menu_mobile_button_burger,
  .sc_layouts_menu_mobile_button_modern_burger {
    display: none !important;
  }
  .sc_layouts_menu_mobile_button + .sc_layouts_menu,
  .sc_layouts_menu_mobile_button + nav.sc_layouts_menu {
    display: inline-block !important;
  }
}

/* Contact link uses the same styling as other nav items — no overrides needed. */

/* Brand-page logo tiles: wrap the existing <img> so the whole tile is a link.
   Keep the layout neutral so we don't disturb the Elementor image-box grid. */
.eae-brand-tile-link {
  display: inline-block;
  text-decoration: none !important;
  transition: transform .18s ease;
}
.eae-brand-tile-link:hover { transform: translateY(-2px); }
.eae-brand-tile-link img { transition: filter .18s ease; }
.eae-brand-tile-link:hover img { filter: brightness(1.05); }

/* === Smooth cross-document page transitions =================================
   Modern browsers (Chrome/Edge 126+, expanding to Safari/Firefox) cross-fade the
   old and new documents automatically when this rule is present on both sides.
   Older browsers fall back to the body fade-in below — no flash, no jump.
============================================================================ */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}
::view-transition-old(root) {
  animation-name: eae-vt-fade-out;
}
::view-transition-new(root) {
  animation-name: eae-vt-fade-in;
}
@keyframes eae-vt-fade-out { to   { opacity: 0; } }
@keyframes eae-vt-fade-in  { from { opacity: 0; } }

/* Fallback fade-in for browsers without View Transitions.
   Short and only on initial paint — won't be visible when VT is doing its job. */
body {
  animation: eae-page-enter 200ms ease-out both;
}
@keyframes eae-page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Respect accessibility preference: turn motion off entirely. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { animation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 1ms; }
}