/* ============================================================
   Martin D' Mor — Custom Overrides v3.0
   Covers: X-020, X-021, X-022, X-023, X-024, X-025, X-026
   Fixes:  nav-drawer, cart mobile, white margin, scrollbar
   ============================================================ */
html, body { overflow-x: hidden !important; max-width: 100vw; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f5f3ef; }
::-webkit-scrollbar-thumb { background: #c4bfb3; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a09a8c; }
* { scrollbar-width: thin; scrollbar-color: #c4bfb3 #f5f3ef; }
body:not(.logged-in) .product-card[data-product-name*="teste" i],
body:not(.logged-in) .product-card[data-product-name*="Teste"],
body:not(.logged-in) .product-card--hidden { display: none !important; }
.section--featured .product-grid, .section--featured .grid {
  display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; gap: 20px; padding: 0 20px 16px; scrollbar-width: none;
}
.section--featured .product-grid::-webkit-scrollbar, .section--featured .grid::-webkit-scrollbar { display: none; }
.section--featured .product-card {
  flex: 0 0 280px; scroll-snap-align: start; margin: 0 !important;
  border-radius: 8px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.section--featured .product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
.section--featured .product-card__image { aspect-ratio: 3/4; overflow: hidden; border-radius: 8px 8px 0 0; }
.section--featured .product-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.section--featured .product-card:hover .product-card__image img { transform: scale(1.05); }
.section--featured .product-card__title { font-size: 14px; line-height: 1.3; padding: 12px 12px 4px; }
.section--featured .product-card__price { font-size: 13px; padding: 0 12px 8px; }
.section--featured .product-card__badge { font-size: 10px; padding: 3px 8px; }
.section--featured .product-card__actions .btn { font-size: 12px; padding: 10px 14px; }
.section--featured .product-card__installments { font-size: 11px; padding: 0 12px 12px; }
@media (max-width: 767px) { .section--featured .product-card { flex: 0 0 220px; } }
@media (max-width: 374px) { .section--featured .product-card { flex: 0 0 180px; } }
@media (min-width: 992px) { .section--featured .product-card { flex: 0 0 320px; } }
.section--collections .collection-grid, .section--collections .grid {
  display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; gap: 20px; padding: 0 20px 16px; scrollbar-width: none;
}
.section--collections .collection-grid::-webkit-scrollbar, .section--collections .grid::-webkit-scrollbar { display: none; }
.section--collections .collection-card {
  flex: 0 0 280px; scroll-snap-align: start; min-height: 360px; border-radius: 8px;
  overflow: hidden; position: relative; background: var(--color-primary, #403D2E);
  text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.section--collections .collection-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.15); }
.section--collections .collection-card img, .section--collections .collection-card__image {
  width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;
}
.section--collections .collection-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); pointer-events: none; z-index: 1;
}
.section--collections .collection-card__name, .section--collections .collection-card span {
  position: absolute; bottom: 24px; left: 24px; right: 24px; z-index: 2; color: #fff;
  font-family: var(--font-display, 'Cormorant Garamond', serif); font-size: 24px; font-weight: 500; letter-spacing: 0.03em;
}
.section--collections .collection-card--no-image {
  background: linear-gradient(135deg, #403D2E 0%, #5a5640 50%, #403D2E 100%);
  display: flex; align-items: center; justify-content: center;
}
.section--collections .collection-card--no-image::after { display: none; }
.section--collections .collection-card--no-image span, .section--collections .collection-card--no-image .collection-card__name {
  position: relative; bottom: auto; left: auto; right: auto; text-align: center; font-size: 22px;
}
@media (max-width: 767px) { .section--collections .collection-card { flex: 0 0 240px; min-height: 300px; } }
@media (min-width: 992px) { .section--collections .collection-card { flex: 0 0 300px; min-height: 380px; } }
/* --- Scent Families: Visual Cards (matching Collection Cards) --- */
.section--scent-families .grid {
  display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; gap: 20px; padding: 0 20px 16px; scrollbar-width: none;
  flex-wrap: nowrap !important; justify-content: flex-start !important;
}
.section--scent-families .grid::-webkit-scrollbar { display: none; }
.section--scent-families .scent-family-card {
  flex: 0 0 280px !important; width: 280px !important; min-height: 360px !important;
  scroll-snap-align: start; border-radius: 8px !important;
  overflow: hidden; position: relative; background: var(--color-primary, #403D2E);
  text-decoration: none; display: block !important;
  border: none !important; padding: 0 !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  aspect-ratio: auto !important;
}
.section--scent-families .scent-family-card:hover {
  transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.15);
  color: #fff;
}
.section--scent-families .scent-family-card::before { display: none !important; }
.section--scent-families .scent-family-card__image {
  width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;
  transition: transform 0.4s ease;
}
.section--scent-families .scent-family-card:hover .scent-family-card__image { transform: scale(1.05); }
.section--scent-families .scent-family-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); pointer-events: none; z-index: 1;
}
.section--scent-families .scent-family-card__overlay {
  position: absolute !important; inset: 0; display: flex !important;
  flex-direction: column; align-items: flex-start; justify-content: flex-end;
  padding: 24px; z-index: 2; background: transparent !important;
}
.section--scent-families .scent-family-card__title {
  color: #fff !important; font-family: var(--font-display, 'Cormorant Garamond', serif) !important;
  font-size: 24px !important; font-weight: 500; letter-spacing: 0.03em;
  text-transform: none !important;
}
.section--scent-families .scent-family-card__desc {
  color: rgba(255,255,255,0.8); font-size: 13px; margin-top: 4px;
}
.section--scent-families .scent-family-card__count { display: none; }
.section--scent-families .scent-family-card__color { display: none; }
/* No-image fallback: gradient background */
.section--scent-families .scent-family-card:not(:has(.scent-family-card__image)) {
  background: linear-gradient(135deg, #403D2E 0%, #5a5640 50%, #403D2E 100%);
}
.section--scent-families .scent-family-card:not(:has(.scent-family-card__image))::after { display: none; }
.section--scent-families .scent-family-card:not(:has(.scent-family-card__image)) .scent-family-card__overlay {
  align-items: center; justify-content: center; text-align: center;
}
.section--scent-families .scent-family-card:not(:has(.scent-family-card__image)) .scent-family-card__title {
  font-size: 22px !important;
}
@media (max-width: 767px) {
  .section--scent-families .scent-family-card { flex: 0 0 240px !important; width: 240px !important; min-height: 300px !important; }
}
@media (min-width: 992px) {
  .section--scent-families .scent-family-card { flex: 0 0 300px !important; width: 300px !important; min-height: 380px !important; }
}
.quantity-selector { display: inline-flex; align-items: center; border: 1.5px solid var(--color-border, #d4d0c8); border-radius: 28px; overflow: hidden; }
.quantity-selector__btn, .quantity-selector button, .qty-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; font-size: 15px;
  color: var(--color-primary, #403D2E); transition: background 0.2s ease; user-select: none;
  border-radius: 50%; margin: 2px;
}
.quantity-selector__btn:hover, .quantity-selector button:hover, .qty-btn:hover { background: var(--color-bg-subtle, #f5f3ef); }
.quantity-selector input[type="number"], .quantity-selector .qty-value {
  width: 48px; height: 44px; text-align: center; border: none;
  border-left: 1.5px solid var(--color-border, #d4d0c8); border-right: 1.5px solid var(--color-border, #d4d0c8);
  font-family: var(--font-body, 'Red Hat Display', sans-serif); font-size: 15px; font-weight: 500;
  color: var(--color-primary, #403D2E); background: transparent; -moz-appearance: textfield;
}
.quantity-selector input[type="number"]::-webkit-inner-spin-button,
.quantity-selector input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 767px) {
  .cart-drawer { top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; max-height: 85vh; border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.12); transform: translateY(100%) !important; }
  .cart-drawer.is-open { transform: translateY(0) !important; }
  .cart-drawer__handle { display: block; width: 40px; height: 4px; background: #d4d0c8;
    border-radius: 4px; margin: 12px auto 8px; flex-shrink: 0; }
}
@media (min-width: 768px) { .cart-drawer__handle { display: none; } }
.cart-drawer__header { display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px 16px; border-bottom: 1px solid #f0ede8; }
.cart-drawer__title { font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 22px; font-weight: 500; color: var(--color-primary, #403D2E); }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 16px 20px; -webkit-overflow-scrolling: touch; }
.cart-drawer__footer { padding: 16px 20px; border-top: 1px solid #f0ede8; flex-shrink: 0; }
.cart-drawer__total { display: flex; justify-content: space-between; margin-bottom: 16px;
  font-size: 16px; font-weight: 600; color: var(--color-primary, #403D2E); }
.cart-drawer__checkout-btn { width: 100%; padding: 16px; background: var(--color-primary, #403D2E);
  color: #fff; border: none; border-radius: 4px;
  font-family: var(--font-body, 'Red Hat Display', sans-serif); font-size: 14px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; }
.cart-drawer__checkout-btn:hover { background: #2e2b20; }
.cart-drawer__empty { text-align: center; padding: 48px 20px; color: #999; font-size: 14px; }
.hamburger { display: none !important; }
.nav-drawer-backdrop { display: none !important; }
.footer-social { display: flex; gap: 16px; align-items: center; }
.footer-social .social-icon { display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--color-border, #d4d0c8);
  color: var(--color-primary, #403D2E); transition: all 0.25s ease; }
.footer-social .social-icon:hover { background: var(--color-primary, #403D2E); color: #fff;
  border-color: var(--color-primary, #403D2E); }
@media (max-width: 767px) {
  .section__title { font-size: 28px; }
  .section__subtitle { font-size: 13px; padding: 0 16px; }
  .section { padding: 48px 0; }
  .site-footer .container { padding: 0 20px; }
  .newsletter-form { flex-direction: column; gap: 12px; }
  .newsletter-form input { width: 100%; }
  .newsletter-form button { width: 100%; }
  .section--featured .btn--outline { margin-top: 8px; font-size: 12px; }
}
@media (max-width: 374px) { .section__title { font-size: 24px; } .site-header .logo img { max-height: 28px; } }
@media (prefers-reduced-motion: no-preference) {
  .section { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .section.is-visible { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Audit Fixes v4.0 — X-212 through X-217
   Date: 2026-03-07
   ============================================================ */

/* --- X-212: Sobre Nós — Chapter bars too tall on mobile --- */
/* The WP content uses inline grid-template-columns:1fr 1fr with
   min-height:320px gradient divs. On mobile they stack but remain
   320px tall, looking like giant green bars. */
@media (max-width: 767px) {
  .about-page section > div[style*="grid-template-columns"] > div[style*="min-height"] {
    min-height: 120px !important;
    max-height: 120px !important;
    border-radius: 8px !important;
  }
  /* Also shrink the roman numeral font inside */
  .about-page section > div[style*="grid-template-columns"] > div[style*="min-height"] p {
    font-size: 42px !important;
  }
  /* Pilares grid: collapse 3 cols to 1 on mobile */
  .about-page div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  /* Quote box padding reduction for mobile */
  .about-page div[style*="padding:64px 48px"] {
    padding: 32px 20px !important;
  }
  .about-page div[style*="padding:64px 48px"] p:first-child {
    font-size: 22px !important;
  }
}

/* --- X-213: Loading screen — refined animation --- */
/* Make loading smoother: smaller icon, spin instead of pulse, faster hide */
.mdmor-loading {
  background: var(--color-bg, #FAFAF5) !important;
}
.mdmor-loading__icon {
  width: 56px !important;
  height: 56px !important;
  animation: mdmor-spin-pause 2s ease-in-out infinite !important;
}
@keyframes mdmor-spin-pause {
  0% { opacity: 0.5; transform: rotate(0deg); }
  25% { opacity: 1; transform: rotate(360deg); }
  50% { opacity: 1; transform: rotate(360deg); }
  75% { opacity: 1; transform: rotate(720deg); }
  100% { opacity: 0.5; transform: rotate(720deg); }
}

/* --- X-214: Newsletter butterfly — center align --- */
.newsletter-butterfly {
  text-align: center !important;
  padding: 24px 0 8px !important;
}
.newsletter-butterfly svg {
  opacity: 0.5;
}

/* --- X-215: Footer icon divider — ensure centered and visible --- */
.footer-icon-divider {
  padding: var(--space-6, 24px) 0 var(--space-3, 12px) !important;
  text-align: center !important;
  background: transparent;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
}
/* On the dark footer bg, the marfim icon is fine.
   But before the footer (on light bg), it can be invisible.
   The divider sits inside footer which has dark bg, so it should be OK. */

/* --- X-216: Footer social icon — ensure proper circle rendering --- */
.footer-social .social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--color-footer-text, #F2EDD3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.footer-social .social-icon:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

/* --- X-217: Cookie banner — reduce overlap on mobile --- */
@media (max-width: 767px) {
  .cookie-consent, [class*="cookie"] {
    font-size: 13px !important;
    padding: 12px 16px !important;
  }
}

/* ============================================================
   Z-137: Sobre Nos — Semantic CSS classes to replace inline styles.
   Usage: Apply these classes in the WP editor (Code view) to replace
   style="" attributes. Each class mirrors a common inline pattern.
   ============================================================ */

/* Chapter section: 2-column grid with gradient bar + text */
.about-chapter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 48px;
}
.about-chapter__bar {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #403D2E 0%, #2a2819 100%);
  border-radius: 12px;
}
.about-chapter__bar p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 72px;
  color: #C9A96E;
  margin: 0;
}
.about-chapter__text {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-chapter__text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  color: #403D2E;
  margin: 0 0 16px;
}
.about-chapter__text p {
  font-size: 16px;
  line-height: 1.8;
  color: #5a5a5a;
}

/* Pilares grid: 3-column feature cards */
.about-pilares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 48px 0;
}
.about-pilar {
  text-align: center;
  padding: 32px 24px;
}
.about-pilar h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: #403D2E;
  margin: 0 0 12px;
}
.about-pilar p {
  font-size: 15px;
  line-height: 1.7;
  color: #666;
}

/* Quote box: centered testimonial / brand statement */
.about-quote {
  padding: 64px 48px;
  text-align: center;
  background: #f5f3ef;
  border-radius: 16px;
  margin: 48px 0;
}
.about-quote p:first-child {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-style: italic;
  color: #403D2E;
  line-height: 1.4;
  margin: 0 0 16px;
}
.about-quote p:last-child {
  font-size: 14px;
  color: #7A7A7A;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Hero banner for about page */
.about-hero {
  text-align: center;
  padding: 80px 0 48px;
}
.about-hero .page-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  color: #403D2E;
  margin: 0 0 12px;
}
.about-hero .page-subtitle {
  font-size: 18px;
  color: #7A7A7A;
  font-style: italic;
}

/* Responsive: about page semantic classes */
@media (max-width: 767px) {
  .about-chapter {
    grid-template-columns: 1fr;
  }
  .about-chapter__bar {
    min-height: 120px;
    max-height: 120px;
    border-radius: 8px;
  }
  .about-chapter__bar p {
    font-size: 42px;
  }
  .about-chapter__text {
    padding: 24px 16px;
  }
  .about-pilares {
    grid-template-columns: 1fr;
  }
  .about-quote {
    padding: 32px 20px;
  }
  .about-quote p:first-child {
    font-size: 22px;
  }
  .about-hero {
    padding: 48px 0 32px;
  }
  .about-hero .page-title {
    font-size: 32px;
  }
}

/* ============================================================
   Session 25 Fixes — X-253 through X-258
   Date: 2026-03-07
   ============================================================ */

/* --- X-253: Variation buttons — show size label, not SKU --- */
/* Override fixed 48px box to auto-width pill for text labels like P, M, G, GG */
.pdp__variations-buttons .variation-btn {
  width: auto;
  min-width: 52px;
  height: 44px;
  padding: 0 18px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1.5px solid var(--color-border, #d4d0c8);
  border-radius: 0;
  background: transparent;
  color: var(--color-black-deep, #1a1a1a);
  transition: all 0.2s ease;
}
.pdp__variations-buttons .variation-btn:hover {
  border-color: var(--color-black-deep, #1a1a1a);
}
.pdp__variations-buttons .variation-btn.active {
  border-color: var(--color-black-deep, #1a1a1a);
  background: var(--color-black-deep, #1a1a1a);
  color: #fff;
  font-weight: 600;
}

/* --- X-254: Popup Welcome — Complete luxury redesign --- */
.popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.popup.active {
  opacity: 1;
  pointer-events: auto;
}
.popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.popup-modal {
  position: relative;
  z-index: 1;
  width: 420px;
  max-width: 92vw;
  background: #FAFAF5;
  border-radius: 0;
  padding: 48px 40px 40px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.18);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  border-top: 3px solid #C9A96E;
}
.popup.active .popup-modal {
  transform: translateY(0) scale(1);
}
@keyframes popup-tag-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
  z-index: 2;
}
.popup-close:hover {
  color: #403D2E;
}
.popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popup-tag {
  display: inline-block;
  background: linear-gradient(90deg, #403D2E 0%, #5a553e 40%, #C9A96E 50%, #5a553e 60%, #403D2E 100%);
  background-size: 200% 100%;
  animation: popup-tag-shimmer 3s ease-in-out infinite;
  color: #F2EDD3;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 6px 20px;
  border-radius: 0;
  margin-bottom: 24px;
}
.popup-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.75rem;
  font-weight: 400;
  color: #403D2E;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.popup-subtitle {
  font-size: 0.8125rem;
  color: #7A7A7A;
  margin: 0 0 28px;
  line-height: 1.5;
}
.popup-form {
  width: 100%;
}
.popup-form .form-group {
  margin-bottom: 12px;
}
.popup-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid #d4d0c8;
  border-radius: 0;
  font-size: 0.8125rem;
  font-family: var(--font-body, 'Red Hat Display', sans-serif);
  background: #fff;
  color: #403D2E;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.popup-input:focus {
  outline: none;
  border-color: #403D2E;
}
.popup-input::placeholder {
  color: #b5b0a3;
}
.popup-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.6875rem;
  color: #999;
  cursor: pointer;
  text-align: left;
  margin-bottom: 20px;
}
.popup-consent input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: #403D2E;
}
.popup-consent a {
  color: #403D2E;
  text-decoration: underline;
}
.popup-form .btn,
.popup-form .btn-primary,
.popup-form .btn-block,
.popup-form button[type="submit"] {
  width: 100%;
  height: 48px;
  background: #403D2E;
  color: #fff;
  border: none;
  border-radius: 0;
  font-family: var(--font-body, 'Red Hat Display', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.popup-form button[type="submit"]:hover {
  background: #2e2b20;
}
.popup-error {
  color: #d32f2f;
  font-size: 0.6875rem;
  margin-top: 8px;
  text-align: center;
}
.popup-success {
  text-align: center;
  padding: 12px 0;
}
.popup-success__title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.5rem;
  color: #403D2E;
  margin: 0 0 16px;
}
.popup-coupon {
  background: #fff;
  border: 2px dashed #C9A96E;
  padding: 16px 24px;
  margin-bottom: 16px;
}
.popup-coupon-code {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: #403D2E;
}
.popup-success__note {
  font-size: 0.6875rem;
  color: #999;
  margin-bottom: 20px;
}
.popup-success .btn,
.popup-success .btn-primary {
  width: 100%;
  height: 48px;
  background: #403D2E;
  color: #fff;
  border: none;
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.popup-success .btn:hover {
  background: #2e2b20;
}
.popup-dismiss {
  background: none;
  border: none;
  color: #b5b0a3;
  font-size: 0.6875rem;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 16px;
  transition: color 0.2s;
}
.popup-dismiss:hover {
  color: #403D2E;
}
@media (max-width: 480px) {
  .popup-modal {
    padding: 36px 24px 28px;
  }
  .popup-title {
    font-size: 1.5rem;
  }
}

/* --- X-255: Desktop Gallery — YSL-inspired stacked layout --- */
/* Desktop: when --stacked modifier is present, hide the standard gallery parts.
   The generic hide was removed because it broke the standard gallery layout
   (video + thumbnails) for products without the stacked variant.
   Stacked-specific hides are in X-255b below. */
@media (min-width: 769px) {
  .pdp-gallery {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
  }
  /* Only hide standard parts when stacked layout is active */
  .pdp-gallery--stacked .pdp-gallery__thumbs {
    display: none !important;
  }
  .pdp-gallery--stacked .pdp-gallery__main {
    display: none !important;
  }
  .pdp-gallery--stacked .pdp-gallery__counter {
    display: none !important;
  }
  /* Standard gallery (non-stacked): ensure main is visible */
  .pdp-gallery:not(.pdp-gallery--stacked) .pdp-gallery__main {
    display: block !important;
  }
}

/* --- X-256: Installments cap at 6x --- */
/* Visual override: handled via PHP/JS max param change */

/* --- X-257: Product card hover image quality --- */
/* Ensure no downscaling during hover transition */
.product-card__image {
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.product-card__image.is-hover-transitioning {
  opacity: 0.92;
  transition: opacity 0.15s ease;
}
.product-card__image:not(.is-hover-transitioning) {
  transition: opacity 0.15s ease, transform 0.6s var(--ease-out, ease);
}

/* --- X-258: PDP Layout — sticky info panel + gallery containment --- */
@media (min-width: 769px) {
  .pdp__layout {
    display: grid !important;
    grid-template-columns: 58% 42% !important;
    gap: 0 !important;
    align-items: start !important;
  }
  /* Override the negative margin-top that pushes gallery behind header */
  body.single-mdmor_product .pdp__gallery {
    margin-top: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  body.single-mdmor_product .pdp__layout {
    padding-top: 0 !important;
  }
  .pdp__info {
    position: sticky !important;
    top: 100px !important;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    padding: 40px 48px !important;
  }
  .pdp__info::-webkit-scrollbar {
    display: none;
  }
}


/* --- X-255b: Stacked gallery images (YSL desktop style) --- */
@media (min-width: 769px) {
  .pdp-gallery--stacked {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    grid-template-columns: unset !important;
  }
  .pdp-gallery--stacked .pdp-gallery__thumbs,
  .pdp-gallery--stacked .pdp-gallery__main,
  .pdp-gallery--stacked .pdp-gallery__counter {
    display: none !important;
  }
  .pdp-gallery__stacked-item {
    cursor: zoom-in;
    overflow: hidden;
    background: var(--color-bg-light, #f5f3ef);
  }
  .pdp-gallery__stacked-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  .pdp-gallery__stacked-item:hover .pdp-gallery__stacked-img {
    transform: scale(1.02);
  }
}

/* Hide stacked items on mobile — mobile uses swipe carousel */
@media (max-width: 768px) {
  .pdp-gallery--stacked {
    display: none !important;
  }
  .pdp-gallery__stacked-item {
    display: none;
  }
}

/* --- X-254b: Popup refinements for the form layout --- */
.popup-form .form-group + .form-group {
  margin-bottom: 12px;
}
.popup-content > .popup-tag:first-child {
  margin-top: 0;
}

/* --- X-256b: Product card installments — cap display at 4x --- */
/* PHP already handles this via mdmor_installments_html($price, 4) */

/* --- X-270: PDP Mobile — Fix video overflow (grid 1fr = minmax(auto,1fr)) --- */
/* The video intrinsic width inflates the grid column on mobile.
   Fix: force minmax(0,1fr) and overflow containment on gallery. */
@media (max-width: 768px) {
  .pdp__layout {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .pdp__gallery {
    min-width: 0 !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }
  .pdp__info {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }
  .pdp-gallery-mobile {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .pdp-gallery-mobile__track {
    max-width: 100% !important;
  }
  .pdp-gallery-mobile__slide {
    max-width: 100% !important;
  }
  .pdp-gallery-mobile__video,
  .pdp-gallery-mobile__img {
    max-width: 100% !important;
  }
}

/* --- X-519: Nav drawer priority links (Minha Conta + Blog at top) --- */
.nav-drawer__priority-links {
  padding: 8px 20px 12px;
  border-bottom: 1px solid var(--color-border, #E6DCA9);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-drawer__priority-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary, #403D2E);
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.nav-drawer__priority-link:hover {
  background: var(--color-bg-light, #F9F8F3);
}
.nav-drawer__priority-link svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* --- X-520: Gold metallic "Ver todos os produtos" button --- */
.btn--view-all,
.section--featured .btn--gold-metallic {
  display: inline-block;
  margin: 24px auto 0;
}

/* --- X-521: Checkout gold buttons --- */
.checkout-step__nav .btn--primary {
  border: 2px solid #C9A96E;
  box-shadow: inset 0 0 0 1px rgba(201, 169, 110, 0.3);
}
.checkout-step__nav .btn--primary:hover {
  box-shadow: 0 4px 16px rgba(201, 169, 110, 0.25), inset 0 0 0 1px rgba(201, 169, 110, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   X-530: Homepage Olive Green + Gold Metallic Overhaul
   Replicates blog page aesthetic: olive green bg, ivory titles,
   gold metallic borders on collection/family cards.
   ═══════════════════════════════════════════════════════════════ */

/* --- Olive green section background --- */
.section--olive {
  background: var(--color-primary, #403D2E);
  position: relative;
}

/* --- Ivory titles on olive green --- */
.section--olive .section__title {
  color: var(--color-ivory, #E6DCA9) !important;
}
.section--olive .section__subtitle {
  color: rgba(230, 220, 169, 0.7) !important;
}

/* --- Collection cards: gold metallic border --- */
.section--olive .collection-card {
  border: 2px solid #C9A96E !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.section--olive .collection-card:hover {
  border-color: #E8D5A3 !important;
  box-shadow: 0 8px 32px rgba(201, 169, 110, 0.3), 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

/* --- Scent family cards: gold metallic border --- */
.section--olive .scent-family-card {
  border: 2px solid #C9A96E !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.section--olive .scent-family-card:hover {
  border-color: #E8D5A3 !important;
  box-shadow: 0 8px 32px rgba(201, 169, 110, 0.3), 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

/* --- Featured section: keep white but add subtle separation --- */
.section--featured {
  background: #fff;
  position: relative;
}

/* --- "Ver todos os produtos" button: gold metallic on white bg --- */
.section--featured .btn--gold-metallic {
  display: inline-block;
  margin: 24px auto 0;
  padding: 14px 40px;
  font-size: 13px;
}

/* --- No-image collection cards on olive: adjust gradient --- */
.section--olive .collection-card--no-image {
  background: linear-gradient(135deg, #4a4735 0%, #5a5640 50%, #4a4735 100%) !important;
}

/* --- No-image scent cards on olive: adjust gradient --- */
.section--olive .scent-family-card:not(:has(.scent-family-card__image)) {
  background: linear-gradient(135deg, #4a4735 0%, #5a5640 50%, #4a4735 100%) !important;
}