/*
 * main.css — Nostro Fumo Guarulhos Theme
 * Faithfully recreates the visual identity from nostrofumoguarulhos.com.br
 * Load order: Bootstrap 5.3.3 (local) → Google Fonts (Outfit + DM Sans) → this file
 *
 * @package nostrofumo
 */

/* ============================================================
   1. Design Tokens (CSS Custom Properties)
   ============================================================ */
:root {
  /* Brand colours (extracted from real site) */
  --nf-white:            #FFFFFF;
  --nf-off-white:        #FCFCFC;
  --nf-bg:               #F5F5F5;
  --nf-black:            #000000;
  --nf-dark:             #1E1B1B;
  --nf-text:             #545454;
  --nf-text-muted:       #959595;
  --nf-border:           #EEEEEE;
  --nf-green:            #31AD1B;
  --nf-green-dark:       #34804E;
  --nf-green-light:      #32AB5B;
  --nf-red:              #ff2a13;
  --nf-yellow:           #f2b01e;

  /* Gradients */
  --nf-topbar-gradient:  linear-gradient(180deg, #D1E7DB 0%, #DCF6E8 100%);
  --nf-navbar-gradient:  linear-gradient(180deg, #0A1A0A 0%, #000000 100%);
  --nf-footer-gradient:  linear-gradient(180deg, #000000 0%, #050A05 100%);

  /* Typography */
  --nf-font-heading:     'Outfit', sans-serif;
  --nf-font-body:        'DM Sans', sans-serif;

  /* Layout */
  --nf-header-height:    auto;
  --nf-container-max:    1200px;
  --nf-radius:           10px;
  --nf-radius-sm:        5px;

  /* Transitions */
  --nf-transition:       0.3s ease;
}

/* ============================================================
   2. Global Reset & Base
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--nf-white);
  color: var(--nf-text);
  font-family: var(--nf-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; height: auto; }

a {
  color: var(--nf-green);
  text-decoration: none;
  transition: color var(--nf-transition);
}
a:hover { color: var(--nf-green-dark); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--nf-font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--nf-black);
}

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* Focus visible — keyboard accessibility */
:focus-visible {
  outline: 2px solid var(--nf-green);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   3. Bootstrap Overrides
   ============================================================ */
.container { max-width: var(--nf-container-max); }

/* Buttons */
.btn {
  font-family: var(--nf-font-heading);
  font-weight: 600;
  border-radius: var(--nf-radius-sm);
  transition: all var(--nf-transition);
  min-height: 44px;
  padding: 0.6rem 1.4rem;
}

.btn-nf-dark {
  background-color: var(--nf-black);
  border-color: var(--nf-black);
  color: var(--nf-white);
}
.btn-nf-dark:hover,
.btn-nf-dark:focus {
  background-color: var(--nf-green);
  border-color: var(--nf-green);
  color: var(--nf-black);
}

.btn-nf-green {
  background-color: var(--nf-green);
  border-color: var(--nf-green);
  color: var(--nf-white);
}
.btn-nf-green:hover,
.btn-nf-green:focus {
  background-color: var(--nf-green-dark);
  border-color: var(--nf-green-dark);
  color: var(--nf-white);
}

.btn-nf-outline {
  background-color: transparent;
  border: 1px solid var(--nf-black);
  color: var(--nf-black);
}
.btn-nf-outline:hover {
  background-color: var(--nf-black);
  color: var(--nf-white);
}

.btn-nf-ghost {
  background-color: rgba(0,0,0,0.05);
  border: none;
  color: var(--nf-black);
}
.btn-nf-ghost:hover {
  background-color: rgba(0,0,0,0.18);
  color: var(--nf-black);
}

/* Form controls */
.form-control, .form-select {
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius-sm);
  font-family: var(--nf-font-body);
  padding: 0.65rem 0.9rem;
  transition: border-color var(--nf-transition), box-shadow var(--nf-transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--nf-green);
  box-shadow: 0 0 0 3px rgba(49, 173, 27, 0.15);
}

.form-label {
  font-family: var(--nf-font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--nf-dark);
  margin-bottom: 0.35rem;
}

/* Cards */
.card {
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius);
  overflow: hidden;
  transition: box-shadow var(--nf-transition), transform var(--nf-transition);
}
.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   4. Utility Classes
   ============================================================ */
.text-nf-green  { color: var(--nf-green) !important; }
.text-nf-dark   { color: var(--nf-dark) !important; }
.text-nf-muted  { color: var(--nf-text-muted) !important; }
.bg-nf-dark     { background: var(--nf-navbar-gradient); }
.bg-nf-light    { background-color: var(--nf-bg); }

.section-padding { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .section-padding { padding-top: 5rem; padding-bottom: 5rem; } }
.section-padding.section-pb-sm { padding-bottom: 2.5rem; }
@media (min-width: 768px) { .section-padding.section-pb-sm { padding-bottom: 2.5rem; } }
.section-padding.section-pt-lg { padding-top: 3.75rem; }
@media (min-width: 768px) { .section-padding.section-pt-lg { padding-top: 3.75rem; } }
.section-padding.section-pt-sm { padding-top: 2.5rem; }
@media (min-width: 768px) { .section-padding.section-pt-sm { padding-top: 2.5rem; } }

.section-title {
  font-family: var(--nf-font-heading);
  font-weight: 700;
  color: var(--nf-black);
  margin-bottom: 0;
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  .section-title { font-size: 1.75rem; }
}

.divider-title {
  width: 100%;
  max-width: 100%;
  height: 2px;
  background: var(--nf-black);
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: var(--nf-green);
  color: var(--nf-white);
  font-weight: 700;
  border-radius: 0 0 4px 0;
  transition: top 0.1s;
}
.skip-link:focus { top: 0; color: var(--nf-white); }

/* ============================================================
   5. Header — Top Bar (mint gradient)
   ============================================================ */
.header-topbar {
  background: var(--nf-topbar-gradient);
  padding: 0.5rem 0;
  font-size: 0.8rem;
  font-family: var(--nf-font-body);
}
.header-topbar a,
.header-topbar span {
  color: var(--nf-green-light);
  transition: color var(--nf-transition);
}
.header-topbar a:hover {
  color: var(--nf-green-dark);
}
.header-topbar .topbar-icon {
  color: var(--nf-green-light);
  margin-right: 0.4rem;
}
.topbar-divider {
  border-left: 1px solid rgba(50, 171, 91, 0.22);
  height: 1.2em;
  margin: 0 0.75rem;
}

@media (max-width: 991.98px) {
  .header-topbar {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .header-topbar .topbar-icon {
    width: 14px;
    height: 14px;
  }
}

/* ============================================================
   6. Header — Main Bar (white on desktop, dark on mobile)
   ============================================================ */
.header-main {
  background: var(--nf-white);
  padding: 1rem 0;
  border-bottom: 1px solid var(--nf-border);
}
.header-main .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

@media (max-width: 991.98px) {
  .header-main {
    background: var(--nf-navbar-gradient);
    border-bottom: 2px solid var(--nf-green);
    padding: 0.75rem 0;
  }
  .header-main .site-logo .logo-light,
  .header-main .site-logo .logo-dark {
    height: 50px;
  }
  .header-main .header-action-btn {
    background: transparent;
    color: var(--nf-white);
  }
  .header-main .header-action-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--nf-green);
  }
  .header-main .navbar-toggler-nf {
    background: transparent;
    color: var(--nf-white);
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    transition: color var(--nf-transition);
  }
  .header-main .navbar-toggler-nf:hover {
    color: var(--nf-green);
  }
  .header-main .navbar-toggler-nf svg {
    width: 24px;
    height: 24px;
  }
  .header-main .cart-count {
    background: var(--nf-green);
  }
}

/* Logo — larger to match real site (350x157 natural size) */
.site-logo img {
  height: 70px;
  width: auto;
}
@media (min-width: 768px) {
  .site-logo img { height: 90px; }
}
@media (min-width: 1200px) {
  .site-logo img { height: 100px; }
}

/* Header icon groups */
.header-icons-left,
.header-icons-right {
  flex: 1;
}
.header-icons-right {
  justify-content: flex-end;
}

@media (max-width: 767.98px) {
  .header-icons-left .header-action-btn svg,
  .header-icons-right .header-action-btn svg {
    width: 18px;
    height: 18px;
  }
  .header-main .site-logo .logo-light,
  .header-main .site-logo .logo-dark {
    height: 50px;
  }
}

/* Header icon buttons */
.header-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  color: var(--nf-black);
  border: none;
  cursor: pointer;
  transition: all var(--nf-transition);
  position: relative;
  text-decoration: none;
}
.header-action-btn:hover {
  background: rgba(0,0,0,0.18);
  color: var(--nf-black);
}
.header-action-btn svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 767.98px) {
  .header-action-btn {
    width: 36px;
    height: 36px;
  }
  .header-action-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* Cart count badge */
.cart-count-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--nf-green);
  color: var(--nf-white);
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* ============================================================
   7. Header — Navigation Bar (dark gradient)
   ============================================================ */
.header-navbar {
  background: var(--nf-navbar-gradient);
  padding: 0;
  border-top: 2px solid var(--nf-green);
  position: relative;
}

.header-navbar .nav-link {
  font-family: var(--nf-font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--nf-white);
  padding: 12px 15px;
  transition: color var(--nf-transition), background var(--nf-transition);
  white-space: nowrap;
}
.header-navbar .nav-link:hover,
.header-navbar .nav-link.active {
  color: var(--nf-green);
  background: rgba(49, 173, 27, 0.08);
}

.header-navbar .nav-link .nav-icon {
  color: var(--nf-green);
  margin-right: 0.35rem;
  font-size: 1rem;
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: -0.1em;
}

/* Mega menu — generic Bootstrap dropdown */
.header-navbar .dropdown-menu {
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid var(--nf-green);
  border-radius: var(--nf-radius);
  padding: 1.25rem;
  min-width: 600px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.header-navbar .dropdown-menu .dropdown-header {
  color: var(--nf-white);
  font-family: var(--nf-font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  padding: 0.25rem 0 0.5rem;
  border-bottom: 1px solid rgba(49,173,27,0.3);
  margin-bottom: 0.5rem;
}
.header-navbar .dropdown-item {
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  padding: 0.35rem 0;
  background: none;
  transition: color var(--nf-transition);
}
.header-navbar .dropdown-item:hover {
  color: var(--nf-green);
  background: none;
}

/* ── Mega Menu Panel (hover-triggered) ─────────────────────────── */
.mega-menu-item {
  position: static;
}
.mega-menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: rgba(0, 0, 0, 0.95);
  border-top: 2px solid var(--nf-green);
  border-bottom: 2px solid var(--nf-green);
  padding: 2rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 1050;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.mega-menu-item:hover > .mega-menu-panel,
.mega-menu-item.active > .mega-menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-menu-inner {
  max-width: var(--nf-container-max);
  margin: 0 auto;
  padding: 0 1rem;
}

.mega-menu-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.mega-col-heading {
  font-family: var(--nf-font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--nf-white);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(49,173,27,0.3);
  letter-spacing: 0.03em;
}

.mega-col-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mega-col-item {
  margin-bottom: 0.25rem;
}
.mega-col-item a,
.mega-col-item > span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  text-decoration: none;
  padding: 0.3rem 0;
  transition: color var(--nf-transition);
}
.mega-col-item a:hover {
  color: var(--nf-green);
}
.mega-col-item .mega-icon,
.mega-col-item .mega-leaf-icon {
  color: var(--nf-green);
  flex-shrink: 0;
  display: inline-flex;
  vertical-align: middle;
}
.mega-col-item .mega-icon svg,
.mega-col-item .mega-leaf-icon svg {
  width: 14px;
  height: 14px;
}

/* Featured product carousel (Categorias col 4) */
.mega-featured-col {
  border-left: 1px solid rgba(49,173,27,0.2);
  padding-left: 1.5rem;
}
.mega-featured-carousel {
  position: relative;
  overflow: hidden;
}
.mega-featured-slide {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  animation: megaCarouselFadeIn 0.4s ease;
}
.mega-featured-slide.active {
  display: flex;
}
@keyframes megaCarouselFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mega-featured-slide a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  color: var(--nf-white);
  transition: color var(--nf-transition);
}
.mega-featured-slide a:hover {
  color: var(--nf-green);
}
.mega-featured-img {
  width: 100%;
  height: 140px;
  border-radius: var(--nf-radius-sm);
  overflow: hidden;
  border: 1px solid rgba(49,173,27,0.2);
  position: relative;
}
.mega-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mega-featured-title {
  font-family: var(--nf-font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.3;
}
.mega-featured-price {
  font-family: var(--nf-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--nf-green);
}
.mega-featured-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  padding-top: 0.75rem;
}
.mega-featured-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}
.mega-featured-dots .dot:hover {
  background: rgba(255,255,255,0.6);
}
.mega-featured-dots .dot.active {
  background: var(--nf-green);
  transform: scale(1.25);
}
.mega-no-products {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  font-style: italic;
}

/* Google Maps embed (Fale Conosco col 4) */
.mega-map-col {
  border-left: 1px solid rgba(49,173,27,0.2);
  padding-left: 1.5rem;
}
.mega-map-embed {
  border-radius: var(--nf-radius-sm);
  overflow: hidden;
  border: 1px solid rgba(49,173,27,0.2);
}
.mega-map-embed iframe {
  width: 100%;
  height: 200px;
  border: none;
  display: block;
}

/* Mega link toggle (no Bootstrap dropdown) */
.header-navbar .mega-menu-toggle {
  cursor: pointer;
}
.header-navbar .mega-menu-toggle::after {
  display: inline-block;
  margin-left: 0.4rem;
  vertical-align: 0.2em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
  color: var(--nf-green);
  transition: transform 0.25s ease;
}
.mega-menu-item:hover > .mega-menu-toggle::after {
  transform: rotate(180deg);
}

/* Mobile menu toggle */
.navbar-toggler-nf {
  background: none;
  border: none;
  color: var(--nf-white);
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (max-width: 991.98px) {
  .header-navbar .dropdown-menu {
    min-width: 100%;
    border: none;
    border-top: 1px solid rgba(49,173,27,0.3);
    border-radius: 0;
  }
  .mega-menu-panel {
    position: static;
    border: none;
    padding: 1rem 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .mega-menu-cols {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .mega-featured-col,
  .mega-map-col {
    border-left: none;
    padding-left: 0;
  }
  .mega-map-embed iframe {
    height: 150px;
  }
}

/* ============================================================
   8. Mobile Offcanvas Menu
   ============================================================ */
.offcanvas-menu {
  background: var(--nf-black);
  color: var(--nf-white);
  width: 300px !important;
}
.offcanvas-menu .offcanvas-header {
  border-bottom: 1px solid rgba(49,173,27,0.3);
  padding: 1.25rem 1.5rem;
}
.offcanvas-menu .offcanvas-body {
  padding: 1rem 1.5rem;
}

/* Offcanvas nav with icons */
.offcanvas-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}
.offcanvas-nav-item {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.offcanvas-nav-row {
  display: flex;
  align-items: center;
}
.offcanvas-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--nf-font-heading);
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 1rem 0;
  text-decoration: none;
  transition: color var(--nf-transition);
  flex: 1;
}
.offcanvas-nav-link:hover,
.offcanvas-nav-link.active {
  color: var(--nf-green);
}
.offcanvas-nav-icon {
  color: var(--nf-green);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.offcanvas-nav-text {
  flex: 1;
}
.offcanvas-submenu-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  padding: 0.25rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: color var(--nf-transition);
}
.offcanvas-submenu-toggle:hover {
  color: var(--nf-green);
}
.offcanvas-submenu {
  padding-left: 1.5rem;
  border-left: 2px solid rgba(49,173,27,0.3);
  margin-bottom: 0.5rem;
}
.offcanvas-submenu .offcanvas-nav-link {
  font-size: 0.85rem;
  padding: 0.65rem 0;
  text-transform: none;
}

/* ============================================================
   8b. Mobile Horizontal Scrollable Nav
   ============================================================ */
/* ============================================================
   9. Hero / Slider Revolution Placeholder
   ============================================================ */
.hero-slider-placeholder {
  background: var(--nf-bg);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .hero-slider-placeholder { min-height: 500px; }
}
.hero-slider-placeholder .placeholder-text {
  text-align: center;
  color: var(--nf-text-muted);
  font-family: var(--nf-font-heading);
  font-size: 1.1rem;
}

/* ============================================================
   10. Benefits Carousel / Bar
   ============================================================ */
.benefits-bar {
  padding: 2rem 0;
  background: var(--nf-white);
}
.benefit-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
}
.benefit-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}
.benefit-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.benefit-title {
  font-family: var(--nf-font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--nf-black);
  margin-bottom: 0.15rem;
  line-height: 1.2;
}
.benefit-desc {
  font-size: 0.85rem;
  color: var(--nf-text);
  line-height: 1.4;
  margin: 0;
}
.benefit-item > div {
  max-width: 267px;
}

/* ============================================================
   11. Product Card (white card, portrait image, uppercase title)
   ============================================================ */
.product-card {
  background: var(--nf-white);
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius);
  overflow: hidden;
  transition: box-shadow var(--nf-transition), transform var(--nf-transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

.product-card-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 6;
  background: var(--nf-bg);
  display: block;
}
.product-card-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--nf-transition);
}
.product-card:hover .product-card-img-wrap img {
  transform: scale(1.04);
}

/* Badges */
.product-badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-family: var(--nf-font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 3px;
}
.badge-sale { background: var(--nf-red); color: #fff; }
.badge-out  { background: var(--nf-text-muted); color: #fff; }

/* Card body */
.product-card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
}

.product-card-title {
  font-family: var(--nf-font-heading);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--nf-black);
  margin-bottom: 0.5rem;
}
.product-card-title a {
  color: inherit;
  text-decoration: none;
}
.product-card-title a:hover { color: var(--nf-green); }

@media (max-width: 767.98px) {
  .product-card-title { font-size: 0.9rem; }
}

/* ── Pricing block (product cards — homepage, archives, carousels, related) ──
   Markup comes straight from WC_Product::get_price_html(), filtered by
   nostrofumo_pix_price_html() (inc/woocommerce.php):

     <div class="product-card-price">
       [<del>..</del> <ins>..</ins>]  OR  <span class="woocommerce-Price-amount">..</span>
       <span class="pix-price-wrap"><span class="pix-badge">PIX</span> <span class="woocommerce-Price-amount">..</span> <small>..</small></span>
     </div>

   Same hierarchy as the single product page, scaled down for card context:
   main price bold/larger on its own line, PIX line smaller directly below.
   ────────────────────────────────────────────────────────────────────────── */
.product-card-price {
  font-family: var(--nf-font-body);
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.product-card-price > .woocommerce-Price-amount,
.product-card-price > ins {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--nf-dark);
  line-height: 1.2;
}
.product-card-price > ins {
  text-decoration: none;
}
.product-card-price > del {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--nf-text-muted);
  text-decoration: line-through;
  opacity: 0.7;
  margin-right: 0.25rem;
}

/* PIX price — secondary line, smaller than the main price above */
.product-card-price .pix-price-wrap {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  margin-top: 0.1rem;
}
.product-card-price .pix-price-wrap .woocommerce-Price-amount {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--nf-green-dark);
}
.product-card-price .pix-price-wrap small {
  font-size: 0.7rem;
  color: var(--nf-text-muted);
  font-weight: 400;
}

/* ── PIX badge pill — shared across every context that renders price_html
   (single product, product cards, mega menu carousel). Lives in main.css
   (loaded on every page) rather than woocommerce.css (shop pages only),
   since product cards also render on the homepage, search results, and
   brand archive pages which are not is_woocommerce(). ──────────────────── */
.pix-badge {
  display: inline-flex;
  align-items: center;
  background: #32BCAD;
  color: #fff;
  font-family: var(--nf-font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  vertical-align: middle;
}

/* Card CTA — icon + label, same pattern as the single-product add-to-cart button */
.product-card-cta {
  padding: 0 1rem 1rem;
}
.product-card-cta .btn {
  width: 100%;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.6rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}
.product-card-cta .btn svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

/* ============================================================
   12. Product Hover Overlay (add-to-cart / view details)
   ============================================================ */
.product-card-img-wrap .hover-actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(0,0,0,0.7);
  opacity: 0;
  transition: opacity var(--nf-transition);
}
.product-card:hover .hover-actions { opacity: 1; }
.hover-actions .btn {
  background: var(--nf-black);
  color: var(--nf-white);
  border: none;
  min-height: 38px;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.hover-actions .btn svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}
.hover-actions .btn:hover {
  background: var(--nf-green);
  color: var(--nf-white);
}

/* ============================================================
   13. Homepage Sections
   ============================================================ */

/* Section header with divider */
.nf-section-header {
  margin-bottom: 1.5rem;
}
.nf-section-header .section-title {
  font-size: 1.4rem;
}
.nf-section-header .divider-title {
  margin-top: 0.5rem;
}

/* Sorrilha carousel heading CTA — isolated to preserve other section headers. */
.product-carousel-heading__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.product-carousel-heading__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.product-carousel-heading__link svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
@media (max-width: 767.98px) {
  .product-carousel-heading__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* Promo banners (Frete Grátis / Suporte) */
.promo-banners-section {
  padding: 0;
}
.promo-banners-section .container {
  padding: 0;
}
@media (min-width: 1200px) {
  .promo-banners-section .container {
    max-width: 1280px;
  }
}
.promo-banners-section .row {
  --bs-gutter-x: 0;
  column-gap: 20px;
  margin-left: 0;
  margin-right: 0;
}
.promo-banners-section .row > [class*="col-md-6"] {
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 768px) {
  .promo-banners-section .row > [class*="col-md-6"] {
    flex: 0 0 auto !important;
    width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
}
.promo-banner-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  background-color: #FFFFFF;
  background-size: cover;
  background-position: center center;
  margin-bottom: 20px;
}
.promo-banner-card .promo-inner {
  display: flex;
  width: 100%;
  min-height: 320px;
}
.promo-banner-card .promo-spacer {
  flex: 0 0 38%;
}
.promo-banner-card .promo-content {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 25px 25px 37px 25px;
  color: var(--nf-dark);
}
.promo-banner-card .promo-content h3 {
  font-family: var(--nf-font-heading);
  font-size: 28px;
  font-weight: 700;
  text-transform: capitalize;
  line-height: 1.3em;
  color: #1E1B1B;
  margin: 0 0 5px 0;
  text-align: start;
}
.promo-banner-card .promo-content p {
  font-family: var(--nf-font-body);
  font-size: 16px;
  line-height: 20px;
  color: #545454;
  text-align: start;
  margin-bottom: 0.5rem;
}
.promo-banner-card .promo-content .promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.75rem;
  padding: 6px 15px;
  align-self: flex-start;
  background-color: #000000;
  color: #FFFFFF;
  fill: #FFFFFF;
  border: none;
  border-radius: 5px;
  font-family: var(--nf-font-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  min-height: 40px;
  text-decoration: none;
  transition: all 0.3s;
}
.promo-banner-card .promo-btn:hover,
.promo-banner-card .promo-btn:focus {
  background-color: #31AD1B;
  color: #000000;
  fill: #000000;
  box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
}
.promo-banner-card.frete .promo-btn:hover,
.promo-banner-card.frete .promo-btn:focus {
  background-color: #31AD1B;
  color: #000000;
  fill: #000000;
  box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
}
.promo-banner-card.suporte .promo-btn:hover,
.promo-banner-card.suporte .promo-btn:focus {
  background-color: #FFFFFF;
  color: #000000;
  fill: #000000;
  box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
}
.promo-banner-card .promo-btn svg {
  width: 1em;
  height: 1em;
}
.promo-banner-card.frete .promo-btn .btn-text {
  order: 1;
}
.promo-banner-card.frete .promo-btn .btn-icon {
  order: 2;
}
.promo-banner-card.suporte .promo-btn .btn-icon {
  order: 1;
}
.promo-banner-card.suporte .promo-btn .btn-text {
  order: 2;
}

/* Promo banners — Mobile (gradient backgrounds + icon) */
@media (max-width: 767.98px) {
  .promo-banners-section .row {
    row-gap: 0.9375rem;
  }
  .promo-banner-card {
    background-image: none !important;
    background-color: transparent;
    border-radius: 15px;
    border: 1px solid #EEEEEE;
  }
  .promo-banner-card .promo-spacer {
    display: none;
  }
  .promo-banner-card .promo-mobile-icon {
    flex: 0 0 38%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 15px 15px 0 15px;
  }
  .promo-banner-card .promo-mobile-icon img {
    width: 100%;
    max-width: 141px;
    height: auto;
  }
  .promo-banner-card .promo-content {
    flex: 0 0 62%;
    padding: 0 25px 25px 25px;
    justify-content: center;
  }
  .promo-banner-card.promo-mobile.frete {
    background: linear-gradient(180deg, #80E4FF 0%, #D6F8DA 100%) !important;
    border: 1px solid #EEEEEE;
  }
  .promo-banner-card.promo-mobile.suporte {
    background: linear-gradient(180deg, #DCF3C0 0%, #BCDEAC 100%) !important;
    border: 1px solid #EEEEEE;
  }
}

/* ============================================================
   14. Breadcrumb
   ============================================================ */
.breadcrumb-wrap {
  background: var(--nf-bg);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--nf-border);
}
.breadcrumb {
  font-size: 0.8rem;
  margin: 0;
  font-family: var(--nf-font-body);
}
.breadcrumb-item a { color: var(--nf-text-muted); }
.breadcrumb-item a:hover { color: var(--nf-green); }
.breadcrumb-item.active { color: var(--nf-dark); }
.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: var(--nf-text-muted);
}

/* ============================================================
   15. Footer (dark gradient, 4 columns + bottom bar)
   ============================================================ */
.site-footer {
  background: var(--nf-footer-gradient);
  border-top: 3px solid var(--nf-green);
  padding-top: 3.5rem;
}

.footer-logo img {
  max-height: 60px;
  width: auto;
  margin-bottom: 1.25rem;
}
.footer-tagline {
  color: rgba(255,255,255,0.7);
  font-family: var(--nf-font-body);
  font-size: 0.95rem;
  line-height: 1.7;
}

.footer-heading {
  font-family: var(--nf-font-heading);
  color: var(--nf-white);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1.25rem;
}
@media (min-width: 992px) {
  .footer-heading { font-size: 1.15rem; }
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a {
  color: rgba(255,255,255,0.6);
  font-size: 0.95rem;
  transition: color var(--nf-transition);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.footer-links a:hover { color: var(--nf-green); }
.footer-links .footer-icon {
  color: var(--nf-green);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* Footer social icons */
.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}
.footer-social a {
  color: var(--nf-white);
  transition: color var(--nf-transition);
}
.footer-social a:hover { color: var(--nf-green); }
.footer-social svg { width: 20px; height: 20px; }

/* Footer contact */
.footer-contact-item {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
}
.footer-contact-item svg,
.footer-contact-item i {
  color: var(--nf-green);
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.footer-contact-item a {
  color: rgba(255,255,255,0.6);
}
.footer-contact-item a:hover { color: var(--nf-green); }

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.25rem 0;
  margin-top: 3rem;
}
.footer-bottom-text {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  margin: 0;
}
.footer-bottom-text a {
  color: rgba(255,255,255,0.6);
}
.footer-bottom-text a:hover { color: var(--nf-green); }
.footer-bottom-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.footer-bottom-links a {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
}
.footer-bottom-links a:hover { color: var(--nf-green); }

/* ============================================================
   16. Page Banner (inner pages)
   ============================================================ */
.page-banner {
  background: var(--nf-bg);
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--nf-border);
}
.page-banner-title {
  font-size: 1.75rem;
  margin: 0;
}

/* Category archive banner (tall, with bg image from WooCommerce category thumbnail) */
.category-banner {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.category-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #000000 0%, rgba(76, 159, 28, 0.67) 100%);
  z-index: 1;
}
.category-banner-content {
  position: relative;
  z-index: 2;
  padding: 2rem;
}
.category-banner-title {
  font-family: var(--nf-font-body);
  font-size: 2rem;
  font-weight: 700;
  color: var(--nf-white);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
}
@media (min-width: 768px) {
  .category-banner-title { font-size: 2.5rem; }
}
.category-banner-desc {
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  margin-top: 0.75rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* Breadcrumb inside category banner */
.category-breadcrumb {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
}
.category-breadcrumb a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color var(--nf-transition);
}
.category-breadcrumb a:hover { color: var(--nf-green); }
.category-breadcrumb .sep {
  margin: 0 0.4rem;
  color: rgba(255,255,255,0.4);
}
.category-breadcrumb .current {
  color: var(--nf-white);
  font-weight: 600;
}

/* ============================================================
   17. Shop / Archive Grid
   ============================================================ */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.shop-toolbar .woocommerce-result-count {
  color: var(--nf-text-muted);
  font-size: 0.875rem;
  margin: 0;
}
.shop-toolbar .woocommerce-ordering select {
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

/* Sidebar */
.shop-sidebar .widget-title {
  font-family: var(--nf-font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--nf-dark);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--nf-border);
}
.shop-sidebar ul {
  list-style: none;
  padding: 0;
}
.shop-sidebar ul li a {
  display: block;
  padding: 0.3rem 0;
  color: var(--nf-text);
  font-size: 0.875rem;
  transition: color var(--nf-transition);
}
.shop-sidebar ul li a:hover,
.shop-sidebar ul li.current-cat > a {
  color: var(--nf-green);
}

/* ============================================================
   18. Search Overlay
   ============================================================ */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18vh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Keep fully hidden via the HTML [hidden] attribute before JS initialises */
.search-overlay[hidden]:not(.is-open) { display: none !important; }
.search-overlay-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255,255,255,0.1);
  border: none;
  color: var(--nf-white);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--nf-transition);
}
.search-overlay-close:hover { background: var(--nf-green); }
.search-input-wrap {
  position: relative;
  display: flex;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  background: var(--nf-white);
  border: 2px solid var(--nf-border);
  border-radius: var(--nf-radius);
  overflow: hidden;
  transition: border-color var(--nf-transition);
}
.search-input-wrap:focus-within {
  border-color: var(--nf-green);
}
.search-input {
  background: transparent;
  border: none;
  color: var(--nf-dark);
  font-size: 1.1rem;
  font-weight: 500;
  font-family: var(--nf-font-body);
  padding: 0.9rem 1.25rem;
  border-radius: 0;
  flex: 1;
  height: 50px;
  width: 100%;
  transition: none;
}
.search-input:focus {
  outline: none;
  box-shadow: none;
}
.search-input::placeholder { color: var(--nf-text-muted); }
.search-submit-btn {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: var(--nf-green);
  border: none;
  border-radius: 0;
  color: var(--nf-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--nf-transition);
}
.search-submit-btn:hover {
  background: var(--nf-green-dark);
}
.search-submit-btn svg {
  width: 20px;
  height: 20px;
}

.search-suggestions {
  background: var(--nf-white);
  border-radius: var(--nf-radius);
  margin-top: 0.5rem;
  max-width: 600px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.search-suggestion-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background var(--nf-transition);
  border-bottom: 1px solid var(--nf-border);
  color: var(--nf-dark);
}
.search-suggestion-item:last-child { border-bottom: none; }
.search-suggestion-item:hover { background: var(--nf-bg); }
.search-suggestion-thumb { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; }
.search-suggestion-name { font-weight: 600; font-size: 0.875rem; color: var(--nf-dark); }
.search-suggestion-price { font-size: 0.8rem; color: var(--nf-green); }

@media (max-width: 767.98px) {
  .search-overlay {
padding-top: 6rem;
    align-items: flex-start;
  }
  .search-overlay-content {
    width: 100%;
    padding: 0 1rem;
  }
  .search-input-wrap {
    max-width: 100%;
    border-radius: var(--nf-radius-sm);
  }
  .search-input {
    font-size: 1rem;
    padding: 0.75rem 1rem;
    height: 48px;
  }
  .search-submit-btn {
    width: 48px;
    height: 48px;
  }
  .search-submit-btn svg {
    width: 18px;
    height: 18px;
  }
  .search-suggestions {
    max-width: 100%;
    margin-top: 0.75rem;
  }
  .search-overlay-close {
    top: 1rem;
    right: 1rem;
  }
}

/* Tablet 768px–991.98px: more vertical breathing room */
@media (min-width: 768px) and (max-width: 991.98px) {
  .search-overlay {
    padding-top: 5rem;
    align-items: flex-start;
  }
}

/* ============================================================
   18b. Age Gate Modal — matches Elementor popup ID 3495
   ============================================================ */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}
.age-gate[hidden] { display: none !important; }
.age-gate-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.92);
}
.age-gate-modal {
  position: relative;
  z-index: 1;
  background: var(--nf-white);
  width: 430px;
  max-width: 100%;
  text-align: center;
  box-shadow: 2px 8px 23px 3px rgba(0,0,0,0.2);
  animation: ageGateFadeIn 0.4s ease;
}
@keyframes ageGateFadeIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.age-gate-logo {
  padding: 2rem 2rem 0.75rem;
}
.age-gate-logo img {
  width: 200px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.age-gate-title {
  font-family: var(--nf-font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--nf-dark);
  margin-bottom: 1.5rem;
  line-height: 1.3;
}
.age-gate-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0;
  padding: 0 2rem 2rem;
}
.age-gate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 2rem;
  font-family: var(--nf-font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 38px;
  border: 2px solid var(--nf-green);
  flex: 1;
}
.age-gate-btn + .age-gate-btn {
  margin-left: 0.75rem;
}
.age-gate-btn--yes {
  background: var(--nf-green);
  color: var(--nf-white);
}
.age-gate-btn--yes:hover {
  background: var(--nf-white);
  color: var(--nf-green);
}
.age-gate-btn--no {
  background: transparent;
  color: var(--nf-green);
}
.age-gate-btn--no:hover {
  background: var(--nf-green);
  color: var(--nf-white);
}

@media (max-width: 480px) {
  .age-gate-modal {
    width: 90%;
  }
  .age-gate-logo {
    padding: 1.5rem 1.5rem 0.5rem;
  }
  .age-gate-logo img {
    width: 160px;
  }
  .age-gate-actions {
    padding: 0 1.5rem 1.5rem;
    gap: 0;
  }
  .age-gate-btn {
    padding: 0.6rem 1.25rem;
    font-size: 0.8rem;
    min-height: 34px;
  }
  .age-gate-btn + .age-gate-btn {
    margin-left: 0.5rem;
  }
}

@media (max-width: 480px) {
  .age-gate-modal {
    padding: 2rem 1.5rem 1.5rem;
  }
  .age-gate-title {
    font-size: var(--nf-fs-lg, 1.25rem);
  }
  .age-gate-desc {
    font-size: 0.8rem;
  }
  .age-gate-btn {
    padding: 0.75rem 0.75rem;
    font-size: 0.875rem;
  }
}

/* ============================================================
   19. Cart count badge — header & floating bar
   ============================================================ */

/* Badge on the header cart icon button */
.header-action-btn .cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--nf-green);
  color: var(--nf-white);
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* ── Shared accent button (used in cart page + account + addresses) ── */
.btn-accent {
  background: var(--nf-green);
  color: var(--nf-white);
  border: none;
  border-radius: var(--nf-radius-sm);
  padding: 0.65rem 1.5rem;
  font-family: var(--nf-font-heading);
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  transition: background var(--nf-transition), color var(--nf-transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.875rem;
}
.btn-accent:hover { background: var(--nf-green-dark); color: var(--nf-white); }

.btn-outline-accent {
  background: transparent;
  color: var(--nf-green);
  border: 1px solid var(--nf-green);
  border-radius: var(--nf-radius-sm);
  padding: 0.4rem 0.85rem;
  font-family: var(--nf-font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: all var(--nf-transition);
}
.btn-outline-accent:hover {
  background: var(--nf-green);
  color: var(--nf-white);
}

.text-accent { color: var(--nf-green) !important; }

/* ============================================================
   20. Pagination
   ============================================================ */
.woocommerce-pagination ul,
.page-numbers {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.page-numbers li a,
.page-numbers li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: var(--nf-radius-sm);
  background: var(--nf-white);
  border: 1px solid var(--nf-border);
  color: var(--nf-text);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--nf-transition);
}
.page-numbers li a:hover {
  border-color: var(--nf-green);
  color: var(--nf-green);
}
.page-numbers li span.current {
  background: var(--nf-black);
  border-color: var(--nf-black);
  color: var(--nf-white);
}

/* ============================================================
   21. 404 Page
   ============================================================ */
.error-404 .error-code {
  font-family: var(--nf-font-heading);
  font-size: clamp(5rem, 15vw, 10rem);
  font-weight: 700;
  color: var(--nf-border);
  line-height: 1;
}

/* ============================================================
   22. My Account
   ============================================================ */
.woocommerce-MyAccount-navigation {
  background: var(--nf-bg);
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius);
  padding: 1rem 0;
}
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.65rem 1.25rem;
  color: var(--nf-text);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--nf-font-heading);
  border-left: 3px solid transparent;
  transition: all var(--nf-transition);
}
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--nf-green);
  border-left-color: var(--nf-green);
  background: rgba(49,173,27,0.05);
}

/* ============================================================
   23. Responsive
   ============================================================ */
@media (max-width: 767.98px) {
  .section-padding { padding-top: 3rem; padding-bottom: 3rem; }
}

@media (min-width: 992px) {
  .desktop-only { display: block !important; }
  .mobile-only  { display: none !important; }
}
@media (max-width: 991.98px) {
  .desktop-only { display: none !important; }
  .mobile-only  { display: block !important; }
}

/* ============================================================
   24. Accessibility
   ============================================================ */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================
   25. Load More Button
   ============================================================ */
.btn-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--nf-font-body);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--nf-black);
  color: var(--nf-white);
  border: none;
  border-radius: var(--nf-radius-sm);
  padding: 0.85rem 2.5rem;
  min-height: 44px;
  min-width: 44px;
  transition: all var(--nf-transition);
  cursor: pointer;
}
.btn-load-more:hover,
.btn-load-more:focus-visible {
  background: var(--nf-green);
  color: var(--nf-black);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.btn-load-more:focus-visible {
  outline: 2px solid var(--nf-green-dark);
  outline-offset: 2px;
}
.btn-load-more:disabled {
  cursor: default;
  opacity: 0.85;
}

/* Spinner shown while the AJAX request is in flight */
.btn-load-more-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  flex: 0 0 auto;
}
.btn-load-more.is-loading .btn-load-more-spinner {
  display: inline-block;
  animation: nf-spin 0.7s linear infinite;
}
.btn-load-more.is-loading .btn-load-more-text::after {
  content: '...';
}

@keyframes nf-spin {
  to { transform: rotate(360deg); }
}

/* Newly loaded product cards — soft fade + slide-up entrance */
.load-more-item-enter {
  opacity: 0;
  transform: translateY(16px);
}
.load-more-item-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
@media (prefers-reduced-motion: reduce) {
  .load-more-item-enter,
  .load-more-item-enter-active {
    transition: none;
    transform: none;
  }
  .btn-load-more.is-loading .btn-load-more-spinner {
    animation: none;
  }
}


/* ============================================================
   26. WhatsApp Floating Balloon
   ============================================================ */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 999;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: transform var(--nf-transition), box-shadow var(--nf-transition);
  color: #fff;
  text-decoration: none;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
  color: #fff;
}
.whatsapp-float svg {
  width: 28px;
  height: 28px;
}

/* ============================================================
   27. Info Bar (bottom announcement bar after page load)
   ============================================================ */
.info-bar-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 998;
  background: var(--nf-white);
  color: var(--nf-dark);
  padding: 0.85rem 1.25rem;
  font-size: 0.85rem;
  font-family: var(--nf-font-body);
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  border-top: 1px solid var(--nf-border);
}
.info-bar-bottom.is-visible {
  transform: translateY(0);
}
.info-bar-bottom a {
  color: var(--nf-green);
  font-weight: 600;
  text-decoration: underline;
}
.info-bar-bottom .info-bar-close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--nf-text-muted);
  cursor: pointer;
  padding: 0.3rem;
  line-height: 1;
}
.info-bar-bottom .info-bar-close:hover { color: var(--nf-dark); }

/* ── Message rotation (crossfade) ─────────────────────────── */
.info-bar-messages {
  position: relative;
  flex: 1;
  min-width: 0;
}
.info-bar-slide {
  display: none;
}
.info-bar-slide.active {
  display: inline;
  animation: infoBarFadeIn 0.5s ease;
}
@keyframes infoBarFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* When info bar is visible, push whatsapp balloon up */
.info-bar-bottom.is-visible ~ .whatsapp-float,
body.has-info-bar .whatsapp-float {
  bottom: 4.5rem;
}

/* ============================================================
   28. Benefits Carousel (swiper-like simple auto-scroll)
   ============================================================ */
.benefits-bar {
  overflow: hidden;
}
.benefits-bar .benefits-track {
  display: flex;
  gap: 0;
  animation: benefitsScroll 25s linear infinite;
}
.benefits-bar:hover .benefits-track {
  animation-play-state: paused;
}
@keyframes benefitsScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Mobile + Tablet: horizontal scroll carousel, items at natural width */
@media (max-width: 991.98px) {
  .benefits-bar {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .benefits-bar::-webkit-scrollbar { display: none; }
  .benefits-bar .benefits-track {
    animation: benefitsScroll 25s linear infinite;
    justify-content: flex-start;
    gap: 0;
  }
  .benefits-bar .benefit-item {
    flex: 0 0 auto;
    width: auto;
    scroll-snap-align: start;
  }
}

/* Desktop: static row with items equally spaced */
@media (min-width: 992px) {
  .benefits-bar .benefits-track {
    animation: none;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0;
  }
  .benefits-bar .benefit-item { flex: 1; }
}

/* ============================================================
   29. Product Carousel (4 desktop, 3 tablet, 2 mobile)
   ============================================================ */
.product-carousel-wrap {
  position: relative;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}
.product-carousel-wrap::-webkit-scrollbar { display: none; }
.product-carousel-track {
  display: flex;
  gap: 0.75rem;
  width: 100%;
}

/* The shared card class intentionally reuses Bootstrap's `.carousel-item`.
   Bootstrap gives that class `margin-right: -100%` for slide transitions,
   which makes flex cards overlap. Reset its slide-only properties here. */
.product-carousel-track > .carousel-item {
  display: block !important;
  float: none !important;
  margin: 0 !important;
  min-width: 0;
  flex: 0 0 calc((100% - 0.75rem) / 2);
  width: calc((100% - 0.75rem) / 2);
  scroll-snap-align: start;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .product-carousel-track { gap: 1rem; }
  .product-carousel-track > .carousel-item {
    flex-basis: calc((100% - 2rem) / 3);
    width: calc((100% - 2rem) / 3);
  }
}

@media (min-width: 992px) {
  .product-carousel-track { gap: 1.25rem; }
  .product-carousel-track > .carousel-item {
    flex-basis: calc((100% - 3.75rem) / 4);
    width: calc((100% - 3.75rem) / 4);
  }
}

/* Carousel navigation arrows — base rule MUST come before the
   max-width:767.98px override below, otherwise equal-specificity
   source order makes `display: flex` win on mobile too (this bug
   previously hid the arrows nowhere but also could re-show them
   depending on stylesheet concatenation order — keeping strict
   base-then-override order here to avoid any ambiguity). */
.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--nf-white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  color: var(--nf-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--nf-transition);
}
.carousel-nav-btn:hover { background: var(--nf-green); color: var(--nf-white); }
.carousel-nav-btn.prev { left: -10px; }
.carousel-nav-btn.next { right: -10px; }

@media (max-width: 767.98px) {
  .carousel-nav-btn { display: none; }
  .product-carousel-track .carousel-item {
    width: calc(50% - 10px);
  }
  .product-carousel-track {
    gap: 0.75rem;
  }
}

.product-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 1rem;
}
.product-carousel-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nf-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}
.product-carousel-dots .dot:hover {
  background: var(--nf-green);
}
.product-carousel-dots .dot.active {
  background: var(--nf-green);
  transform: scale(1.3);
}

/* ── Stable controls for the Sorrilha and related-product carousels ────────
   The viewport alone scrolls. The stage and pagination remain outside it, so
   arrows/dots never travel with product cards or get clipped by overflow. */
.product-carousel-wrap--sorrilha,
.product-carousel-wrap--related {
  overflow: visible;
  padding-bottom: 0;
}
.product-carousel-wrap--sorrilha .product-carousel-stage,
.product-carousel-wrap--related .product-carousel-stage {
  position: relative;
  padding: 0 3rem;
}
.product-carousel-wrap--sorrilha .product-carousel-viewport,
.product-carousel-wrap--related .product-carousel-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.product-carousel-wrap--sorrilha .product-carousel-viewport::-webkit-scrollbar,
.product-carousel-wrap--related .product-carousel-viewport::-webkit-scrollbar {
  display: none;
}
.product-carousel-wrap--sorrilha .carousel-nav-btn,
.product-carousel-wrap--related .carousel-nav-btn {
  z-index: 10;
}
.product-carousel-wrap--sorrilha .carousel-nav-btn.prev,
.product-carousel-wrap--related .carousel-nav-btn.prev {
  left: 0.25rem;
}
.product-carousel-wrap--sorrilha .carousel-nav-btn.next,
.product-carousel-wrap--related .carousel-nav-btn.next {
  right: 0.25rem;
}
.product-carousel-wrap--sorrilha .product-carousel-dots,
.product-carousel-wrap--related .product-carousel-dots {
  min-height: 1.3rem;
}
@media (min-width: 1200px) {
  /* Use the complete content width for four cards; Bootstrap's desktop
     container leaves a safe outer gutter for the 40px arrow controls. */
  .product-carousel-wrap--sorrilha .product-carousel-stage,
  .product-carousel-wrap--related .product-carousel-stage {
    padding: 0;
  }
  .product-carousel-wrap--sorrilha .carousel-nav-btn.prev,
  .product-carousel-wrap--related .carousel-nav-btn.prev {
    left: -2.5rem;
  }
  .product-carousel-wrap--sorrilha .carousel-nav-btn.next,
  .product-carousel-wrap--related .carousel-nav-btn.next {
    right: -2.5rem;
  }
}

@media (max-width: 767.98px) {
  .product-carousel-wrap--sorrilha .product-carousel-stage,
  .product-carousel-wrap--related .product-carousel-stage {
    padding: 0;
  }
}

/* ============================================================
   30. Product card image fix — ensure WooCommerce images display
   ============================================================ */
.product-card-img-wrap img,
.product-card-img-wrap .wp-post-image,
.product-card-img-wrap .attachment-woocommerce_thumbnail {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  max-width: none !important;
}

/* ============================================================
   31. Floating Action Bar (nf-fab)
   Desktop: fixed right sidebar with rounded-left buttons
   Mobile: fixed bottom bar, full width
   ============================================================ */

/* ── Entrance animation ───────────────────────────────────── */
@keyframes nf-fab-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Container ────────────────────────────────────────────── */
.nf-fab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1050; /* above Bootstrap offcanvas backdrop (1040) */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  animation: nf-fab-in 0.4s ease-out both;
}

/* ── Individual button ────────────────────────────────────── */
.nf-fab__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 52px;
  height: 58px;
  padding: 0;
  background: var(--nf-dark);
  color: var(--nf-white);
  border: none;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  font-family: var(--nf-font-body);
  box-shadow: -3px 2px 10px rgba(0, 0, 0, 0.35);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.nf-fab__btn:hover,
.nf-fab__btn:focus-visible {
  background: var(--nf-green);
  color: var(--nf-white);
  box-shadow: -4px 4px 16px rgba(49, 173, 27, 0.4);
  outline: none;
}
.nf-fab__btn:focus-visible {
  outline: 2px solid var(--nf-green);
  outline-offset: 2px;
}

/* Staggered entrance */
.nf-fab__btn:nth-child(1) { animation: nf-fab-in 0.4s 0.05s ease-out both; }
.nf-fab__btn:nth-child(2) { animation: nf-fab-in 0.4s 0.15s ease-out both; }
.nf-fab__btn:nth-child(3) { animation: nf-fab-in 0.4s 0.25s ease-out both; }

/* Icon */
.nf-fab__btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block !important;
  transition: transform 0.25s ease;
}
.nf-fab__btn:hover svg { transform: scale(1.12); }

/* Label text below icon */
.nf-fab__label {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  color: inherit;
}

/* Cart icon wrapper — needed for badge positioning */
.nf-fab__icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Cart count badge inside fab */
.nf-fab__btn .cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--nf-green);
  color: var(--nf-white);
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  border: 2px solid var(--nf-dark);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.nf-fab__btn:hover .cart-count {
  background: var(--nf-white);
  color: var(--nf-green);
  border-color: var(--nf-green);
}

/* ── Mobile: horizontal bottom bar ───────────────────────── */
@media (max-width: 767.98px) {
  .nf-fab {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: none;
    flex-direction: row;
    gap: 0;
    border-radius: 0;
    animation: none;
    background: var(--nf-dark);
    box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  .nf-fab__btn {
    flex: 1;
    height: 58px;
    border-radius: 0;
    box-shadow: none;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    animation: none;
  }
  .nf-fab__btn:last-child { border-right: none; }

  /* Push page content above the bottom bar */
  body { padding-bottom: 58px; }

  /* When info bar is open, reserve space for it too (info bar sits above FAB) */
  body.has-info-bar { padding-bottom: calc(58px + var(--nf-infobar-height, 56px)); }

  /* ── Mobile: info bar sits above the bottom FAB bar ──────── */
  body.has-info-bar .info-bar-bottom,
  .info-bar-bottom.is-visible {
    bottom: 58px;
  }

  /* Shift WhatsApp balloon above the bar */
  .whatsapp-float { bottom: calc(58px + 1rem) !important; }
  body.has-info-bar .whatsapp-float { bottom: calc(58px + var(--nf-infobar-height, 56px) + 1rem) !important; }
}

/* ── Tablet (768px–991.98px): FAB is a right-side floating column, info
   bar is full-width at bottom. They don't overlap on a static viewport, but
   while scrolling make sure WhatsApp sits above the info bar. ───────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
  body.has-info-bar .whatsapp-float {
    bottom: calc(var(--nf-infobar-height, 56px) + 1rem) !important;
  }
}

/* ============================================================
   32. Single Product Page (fallback if woocommerce.css not loaded)
   ============================================================ */
.woocommerce div.product form.cart {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.woocommerce div.product form.cart .qty {
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius-sm);
  padding: 0.65rem 0.9rem;
  width: 80px;
  text-align: center;
  font-size: 1rem;
  font-family: var(--nf-font-body);
}
.woocommerce div.product form.cart .qty:focus {
  border-color: var(--nf-green);
  outline: none;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  background: var(--nf-black);
  color: var(--nf-white);
  border: none;
  border-radius: var(--nf-radius-sm);
  padding: 0.75rem 1.5rem;
  font-family: var(--nf-font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 48px;
  transition: background var(--nf-transition), color var(--nf-transition);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.woocommerce div.product form.cart .single_add_to_cart_button::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  flex-shrink: 0;
  -webkit-mask: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22M1%201h4l2.68%2013.39a2%202%200%200%200%202%201.61h9.72a2%202%200%200%200%202-1.61L23%206H6%22%2F%3E%3C%2Fsvg%3E') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22M1%201h4l2.68%2013.39a2%202%200%200%200%202%201.61h9.72a2%202%200%200%200%202-1.61L23%206H6%22%2F%3E%3C%2Fsvg%3E') center/contain no-repeat;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: var(--nf-green);
  color: var(--nf-black);
}

/* Price on single product page */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--nf-font-body);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--nf-dark);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  line-height: 1.2;
}
.woocommerce div.product p.price del { color: var(--nf-text-muted); font-size: 1rem; font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; }

/* Product gallery images */
.woocommerce div.product div.images img {
  border-radius: var(--nf-radius);
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.woocommerce div.product div.images .flex-viewport {
  border-radius: var(--nf-radius);
  overflow: hidden;
}
.woocommerce div.product ol.flex-control-thumbs li {
  width: 80px;
  height: 80px;
}
.woocommerce div.product ol.flex-control-thumbs li img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--nf-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--nf-transition), transform var(--nf-transition);
}
.woocommerce div.product ol.flex-control-thumbs li img:hover {
  transform: scale(1.05);
}
.woocommerce div.product ol.flex-control-thumbs li img.flex-active {
  border-color: var(--nf-green);
}


/* ============================================================
   38. Production integration compatibility
   ============================================================ */
/* The production mega-menu provider marks its parent items with data-mega.
   Keep the original walker classes supported while accepting that markup. */
.header-navbar .nav-item[data-mega] {
  position: static;
}
.header-navbar .nav-item[data-mega]:hover > .mega-menu-panel,
.header-navbar .nav-item[data-mega].active > .mega-menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.header-navbar .nav-item[data-mega] > .nav-link::after {
  display: inline-block;
  margin-left: 0.4rem;
  vertical-align: 0.2em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
  color: var(--nf-green);
  transition: transform 0.25s ease;
}
.header-navbar .nav-item[data-mega]:hover > .nav-link::after,
.header-navbar .nav-item[data-mega].active > .nav-link::after {
  transform: rotate(180deg);
}

/* Slider Revolution 7 renders a custom sr7-module element. The home wrapper
   must not make it a shrink-to-fit flex item, otherwise the module can
   initialise with no usable width. */
.hero-slider-placeholder {
  display: block;
  min-height: 0;
}
.hero-slider-placeholder > sr7-module {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Preserve WooCommerce's native variable-product lifecycle. Its variation
   hook supplies the variation data, hidden fields and cart button used by
   Variation Swatches for WooCommerce Pro. */
.woocommerce div.product form.variations_form {
  display: block;
}
.woocommerce div.product form.variations_form .variations {
  width: 100%;
  margin-bottom: 1rem;
}
.woocommerce div.product form.variations_form .single_variation_wrap {
  margin-top: 1rem;
}
.woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}


/* ============================================================
   39. Quem Somos
   ============================================================ */
.about-page {
  background: var(--nf-off-white);
}
.about-page__hero {
  background: var(--nf-navbar-gradient);
  border-bottom: 3px solid var(--nf-green);
  color: var(--nf-white);
  padding: 4.5rem 0;
}
.about-page__hero-content {
  max-width: var(--nf-container-max);
}
.about-page__eyebrow {
  color: var(--nf-green);
  font-family: var(--nf-font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 0.7rem;
  text-transform: uppercase;
}
.about-page__hero h1 {
  color: var(--nf-white);
  font-size: clamp(2rem, 4vw, 3.25rem);
  margin: 0;
}
.about-page__section {
  padding-top: 3rem;
}
.about-page__content {
  max-width: 960px;
  margin: 0 auto;
}
.about-page__copy {
  background: var(--nf-white);
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.05);
  padding: clamp(1.5rem, 4vw, 3.5rem);
}
.about-page__copy > p {
  color: var(--nf-text);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.about-page__copy > p:first-child {
  color: var(--nf-dark);
  font-family: var(--nf-font-heading);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5;
  margin-bottom: 2rem;
}
.about-page__copy h2 {
  border-left: 4px solid var(--nf-green);
  color: var(--nf-black);
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
  margin: 2.5rem 0 1rem;
  padding-left: 0.85rem;
}
.about-page__copy h2:first-child {
  margin-top: 0;
}
.about-page__copy > ul {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 1.5rem 0 2.5rem;
  padding: 0;
}
.about-page__copy > ul li {
  background: var(--nf-off-white);
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius-sm);
  color: var(--nf-text);
  line-height: 1.6;
  padding: 1rem;
}
.about-page__copy > ul strong {
  color: var(--nf-dark);
  display: block;
  font-family: var(--nf-font-heading);
  margin-bottom: 0.25rem;
}
.about-page__gallery {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 2.5rem;
}
.about-page__gallery figure {
  aspect-ratio: 4 / 5;
  background: var(--nf-bg);
  border-radius: var(--nf-radius-sm);
  margin: 0;
  overflow: hidden;
}
.about-page__gallery img {
  height: 100%;
  object-fit: cover;
  transition: transform var(--nf-transition);
  width: 100%;
}
.about-page__gallery figure:hover img {
  transform: scale(1.04);
}
.about-page__copy > svg {
  display: none;
}
@media (max-width: 991.98px) {
  .about-page__gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .about-page__hero {
    padding: 3.25rem 0;
  }
  .about-page__section {
    padding-top: 2rem;
  }
  .about-page__copy > ul {
    grid-template-columns: 1fr;
  }
  .about-page__gallery {
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2rem;
  }
}


/* ============================================================
   40. Quem Somos and Error Pages
   ============================================================ */
/* Let the institutional page use the complete theme container rather than
   constraining all content to a narrow central card. */
.about-page__content {
  max-width: none;
}
.about-page__copy {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.about-page__copy > p,
.about-page__copy h2,
.about-page__copy > ul {
  max-width: 1120px;
}
.about-page__copy > p:first-child {
  max-width: none;
  background: linear-gradient(135deg, var(--nf-white) 0%, var(--nf-off-white) 100%);
  border: 1px solid var(--nf-border);
  border-left: 5px solid var(--nf-green);
  border-radius: var(--nf-radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.about-page__gallery {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-top: 3rem;
}
.about-page__gallery figure {
  border: 1px solid var(--nf-border);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  cursor: zoom-in;
  position: relative;
  transition: box-shadow var(--nf-transition), transform var(--nf-transition);
}
.about-page__gallery figure::after {
  content: 'Ampliar imagem';
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.78);
  color: var(--nf-white);
  font-family: var(--nf-font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--nf-transition), transform var(--nf-transition);
}
.about-page__gallery figure:hover,
.about-page__gallery figure:focus-visible {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
  transform: translateY(-4px);
}
.about-page__gallery figure:hover::after,
.about-page__gallery figure:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
.about-page__gallery figure:focus-visible {
  outline: 3px solid var(--nf-green);
  outline-offset: 3px;
}

/* Gallery lightbox, created only for .about-page__gallery by main.js. */
.about-lightbox[hidden] {
  display: none !important;
}
.about-lightbox {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.about-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(4px);
}
.about-lightbox__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 1100px);
  max-height: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}
.about-lightbox__figure {
  min-width: 0;
  max-height: calc(100vh - 7rem);
  margin: 0;
  text-align: center;
}
.about-lightbox__image {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  margin: 0 auto;
  border-radius: var(--nf-radius-sm);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  object-fit: contain;
}
.about-lightbox__caption {
  margin: 0.75rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.875rem;
}
.about-lightbox__control,
.about-lightbox__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(0, 0, 0, 0.45);
  color: var(--nf-white);
  cursor: pointer;
  transition: background var(--nf-transition), border-color var(--nf-transition), color var(--nf-transition);
}
.about-lightbox__control {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 2rem;
  line-height: 1;
}
.about-lightbox__close {
  position: absolute;
  top: -0.25rem;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.7rem;
  line-height: 1;
}
.about-lightbox__control:hover,
.about-lightbox__control:focus-visible,
.about-lightbox__close:hover,
.about-lightbox__close:focus-visible {
  background: var(--nf-green);
  border-color: var(--nf-green);
  color: var(--nf-black);
}
body.has-about-lightbox {
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .about-page__copy > p:first-child {
    padding: 1.25rem;
  }
  .about-page__gallery figure::after {
    opacity: 1;
    transform: none;
  }
  .about-lightbox {
    padding: 1rem 0.5rem;
  }
  .about-lightbox__dialog {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .about-lightbox__figure {
    grid-row: 1;
    max-height: calc(100vh - 8rem);
  }
  .about-lightbox__image {
    max-height: calc(100vh - 10rem);
  }
  .about-lightbox__control {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
  }
  .about-lightbox__previous { left: 0.25rem; }
  .about-lightbox__next { right: 0.25rem; }
  .about-lightbox__close { top: -0.5rem; right: 0.25rem; }
}

/* Dedicated error-page composition; other templates remain unaffected. */
.error-page {
  background: var(--nf-off-white);
}
.error-page__hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 9vw, 7rem) 0;
  background: var(--nf-navbar-gradient);
}
.error-page__hero::before,
.error-page__hero::after {
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  content: '';
  filter: blur(4px);
  pointer-events: none;
}
.error-page__hero::before {
  top: -13rem;
  left: -8rem;
  background: rgba(49, 173, 27, 0.2);
}
.error-page__hero::after {
  right: -10rem;
  bottom: -16rem;
  background: rgba(255, 255, 255, 0.08);
}
.error-page .container {
  position: relative;
  z-index: 1;
}
.error-page .error-404 {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 3.75rem);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 3px solid var(--nf-green);
  border-radius: var(--nf-radius);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28);
  text-align: center;
}
.error-page__eyebrow {
  margin: 0 0 0.6rem;
  color: var(--nf-green);
  font-family: var(--nf-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.error-page .error-code {
  color: var(--nf-green);
  font-family: var(--nf-font-heading);
  font-size: clamp(5rem, 16vw, 8.5rem);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 0.8;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.error-page .error-404 h1 {
  color: var(--nf-white);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: 1.5rem 0 0.85rem;
}
.error-page__description {
  max-width: 590px;
  margin: 0 auto 2rem;
  color: rgba(255, 255, 255, 0.76);
}
.error-page__search {
  max-width: 560px;
  margin: 0 auto 2rem;
}
.error-page__search .form-control {
  min-height: 48px;
  border-color: rgba(255, 255, 255, 0.3);
}
.error-page__search .form-control:focus {
  border-color: var(--nf-green);
}
.error-page__search .btn {
  min-width: 52px;
  padding-inline: 1rem;
}
.error-page__search .btn svg {
  width: 18px;
  height: 18px;
}
.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.error-page__home-link {
  border-color: rgba(255, 255, 255, 0.72);
  color: var(--nf-white);
}
.error-page__home-link:hover,
.error-page__home-link:focus-visible {
  border-color: var(--nf-white);
  background: var(--nf-white);
  color: var(--nf-black);
}
@media (max-width: 575.98px) {
  .error-page__search .input-group {
    flex-wrap: nowrap;
  }
  .error-page__actions .btn {
    width: 100%;
  }
}


/* ============================================================
   41. Mega menu Destaques carousel
   ============================================================ */
/* A scoped horizontal viewport keeps touch and wheel interaction confined to
   the Sorrilha products in the Categorias mega menu. */
.mega-featured-carousel {
  overflow: visible;
}
.mega-featured-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  touch-action: pan-x pan-y;
}
.mega-featured-viewport::-webkit-scrollbar {
  display: none;
}
.mega-featured-viewport:focus-visible {
  outline: 2px solid var(--nf-green);
  outline-offset: 3px;
}
.mega-featured-track {
  display: flex;
  width: 100%;
}
.mega-featured-slide,
.mega-featured-slide.active {
  display: flex;
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
.mega-featured-slide a {
  width: 100%;
  gap: 0.55rem;
}
.mega-featured-img {
  width: min(100%, 200px);
  height: 240px;
  margin: 0 auto;
  aspect-ratio: 5 / 6;
  background: rgba(255, 255, 255, 0.04);
}
.mega-featured-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  margin-top: 0.1rem;
  color: var(--nf-green);
  line-height: 1.2;
}
.mega-featured-price > .woocommerce-Price-amount,
.mega-featured-price > ins {
  color: var(--nf-green);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}
.mega-featured-price > del {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
  font-weight: 400;
  text-decoration: line-through;
}
.mega-featured-price .pix-price-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.2rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.7rem;
}
.mega-featured-price .pix-price-wrap .woocommerce-Price-amount {
  color: var(--nf-white);
  font-size: 0.76rem;
  font-weight: 700;
}
.mega-featured-price .pix-price-wrap .pix-badge {
  font-size: 0.55rem;
  padding: 0.12rem 0.3rem;
}
.mega-featured-price .pix-price-wrap small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.65rem;
}


/* Keep the four desktop mega-menu columns equal when the featured carousel
   contains wide intrinsic product content. The mobile single-column rule above
   remains unchanged. */
@media (min-width: 992px) {
  .mega-menu-cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .mega-menu-cols > .mega-menu-col,
  .mega-featured-col,
  .mega-featured-carousel,
  .mega-featured-viewport,
  .mega-featured-track,
  .mega-featured-slide {
    min-width: 0;
    max-width: 100%;
  }
}