/* ============================================================
   Smile Viste a la Moda · Design tokens & base
   ============================================================ */

:root {
  /* Palette — Rose & Burgundy (default) */
  --bg: #F8F4F0;
  --surface: #FFFFFF;
  --surface-2: #FAF7F2;
  --ink: #2B2826;
  --ink-2: #6B6360;
  --ink-3: #9A928B;
  --line: #E8DFD6;
  --line-2: #F0E8DE;
  --rose: #E8C5C5;
  --rose-deep: #D4A5A5;
  --burgundy: #6B2C2C;
  --burgundy-deep: #501F1F;
  --champagne: #B8924F;

  /* Mapped semantic */
  --primary: var(--burgundy);
  --primary-ink: #FFFFFF;
  --primary-hover: var(--burgundy-deep);
  --accent-soft: var(--rose);
  --accent-soft-deep: var(--rose-deep);
  --accent-gold: var(--champagne);

  /* Type */
  --f-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Radii & shadow */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(43, 40, 38, 0.04), 0 1px 1px rgba(43, 40, 38, 0.03);
  --shadow-md: 0 8px 24px -8px rgba(43, 40, 38, 0.12);
  --shadow-lg: 0 20px 60px -20px rgba(43, 40, 38, 0.18);

  /* Layout */
  --nav-h: 64px;
  --banner-h: 36px;
  --max-w: 1280px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Palette 2: Powder & Antracita (minimal — black CTAs, less pink) */
[data-palette="powder"] {
  --bg: #FAF7F2;
  --rose: #EEDFD9;
  --rose-deep: #D4A5A5;
  --burgundy: #2B2826;
  --burgundy-deep: #1a1816;
  --champagne: #B8924F;
  --primary: #2B2826;
  --primary-hover: #1a1816;
  --accent-soft: #EEDFD9;
}

/* Palette 3: Warm rich (rosier background, same burgundy CTA) */
[data-palette="burgundy"] {
  --bg: #F5E8E5;
  --surface-2: #FBEDE8;
  --line: #ECD8D2;
  --line-2: #EFE0DA;
  --rose: #E8C5C5;
  --rose-deep: #D4A5A5;
  --burgundy: #6B2C2C;
  --burgundy-deep: #501F1F;
  --champagne: #B8924F;
  --primary: #6B2C2C;
  --primary-hover: #501F1F;
}

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  font-size: 15px;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.1;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.shell {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 720px) {
  .shell { padding: 0 26px; }
}

/* ============================================================
   Top banner
   ============================================================ */
.topbanner {
  height: var(--banner-h);
  background: var(--ink);
  color: #F5EFE8;
  font-size: 12px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
}
.topbanner span { display: inline-flex; align-items: center; gap: 8px; }
.topbanner .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--champagne); opacity: 0.7; }
@media (max-width: 720px) {
  .topbanner { font-size: 11px; }
  .topbanner .hide-sm { display: none; }
}

/* ============================================================
   Header
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 244, 240, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-row {
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.logo {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  cursor: pointer;
}
.logo .dotmark {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--burgundy);
  transform: translateY(-2px);
}
.logo small {
  font-family: var(--f-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.nav {
  display: flex;
  gap: 28px;
  font-size: 14px;
}
.nav button {
  color: var(--ink);
  padding: 8px 0;
  position: relative;
  font-weight: 450;
  letter-spacing: 0.01em;
  transition: color 0.2s var(--ease);
}
.nav button:hover { color: var(--burgundy); }
.nav button[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--burgundy);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.nav-actions .hicons {
  display: flex;
  align-items: center;
  gap: 2px;
  /* desktop default; mobile overrides inside @media via grid order/justify-self */
}
.icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  position: relative;
  transition: background 0.2s var(--ease);
}
.icon-btn:hover { background: rgba(43, 40, 38, 0.06); }
.icon-btn .badge[hidden] { display: none !important; }
.icon-btn .badge {
  position: absolute;
  top: 6px; right: 6px;
  min-width: 16px; height: 16px;
  border-radius: 9px;
  background: var(--burgundy);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-family: var(--f-body);
}
.search-wrap {
  position: relative;
  width: 320px;
  max-width: 100%;
}
.search-input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 16px 0 40px;
  background: rgba(255,255,255,0.6);
  font-size: 13px;
  transition: border-color 0.2s, background 0.2s;
}
.search-input:focus {
  outline: none;
  border-color: var(--ink);
  background: #fff;
}
.search-wrap svg.search-ic {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-2);
  pointer-events: none;
}

.menu-btn { display: none; }
@media (max-width: 960px) {
  .nav, .search-wrap { display: none; }
  .menu-btn { display: inline-flex; }
  .header-row { grid-template-columns: 44px 1fr auto; column-gap: 0; }
  .logo { font-size: 20px; }
  .logo small { display: none; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.2s var(--ease);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary {
  background: var(--primary);
  color: var(--primary-ink);
}
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary:hover { background: var(--ink); color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover { background: rgba(43,40,38,0.06); }
.btn-whatsapp {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}
.btn-whatsapp:hover { border-color: var(--ink); }
.btn-lg { height: 56px; padding: 0 28px; font-size: 15px; }
.btn-sm { height: 36px; padding: 0 16px; font-size: 13px; }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.product-card {
  cursor: pointer;
  position: relative;
}
.product-card .ph {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--line-2);
}
.product-card .ph img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), opacity 0.3s;
}
.product-card .ph img.alt {
  opacity: 0;
}
.product-card:hover .ph img.main { opacity: 0; }
.product-card:hover .ph img.alt { opacity: 1; }
.product-card:hover .ph img { transform: scale(1.03); }

.product-card .badge-row {
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.product-card .wish {
  position: absolute;
  top: 10px; right: 10px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  z-index: 2;
  transition: transform 0.2s var(--ease);
}
.product-card .wish:hover { transform: scale(1.08); }
.product-card .wish.on { color: var(--burgundy); }

.product-card .pmeta { padding: 14px 2px 0; }
.product-card .pname {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: 0.005em;
}
.product-card .prow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.product-card .pprice {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.product-card .pprice .old {
  color: var(--ink-3);
  text-decoration: line-through;
  margin-right: 6px;
  font-weight: 400;
}
.swatches {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.swatches .sw {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(43,40,38,0.12);
  cursor: pointer;
  transition: transform 0.2s;
}
.swatches .sw:hover { transform: scale(1.2); }
.swatches .sw.sel { box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 3px var(--bg); }
.swatches .more { font-size: 10px; color: var(--ink-2); margin-left: 2px; }

.tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
}
.tag.gold { background: var(--champagne); color: var(--ink); }
.tag.sale { background: var(--burgundy); color: #fff; }
.tag.soft { background: var(--rose); color: var(--ink); }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--ink);
  color: #DDD4CB;
  padding: 80px 0 32px;
  margin-top: 120px;
}
.footer h4 {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.footer a { color: #DDD4CB; opacity: 0.78; transition: opacity 0.2s; font-size: 14px; }
.footer a:hover { opacity: 1; color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-brand .logo { color: #fff; font-size: 28px; }
.footer-brand .logo small { color: #DDD4CB; opacity: 0.7; }
.footer-brand p { font-size: 14px; line-height: 1.6; color: #DDD4CB; opacity: 0.7; max-width: 280px; }
.footer-bottom {
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: rgba(221,212,203,0.5);
  letter-spacing: 0.04em;
}
.socials { display: flex; gap: 8px; }
.socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s var(--ease);
}
.socials a:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ============================================================
   WhatsApp FAB
   ============================================================ */
.wa-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  height: 56px;
  padding: 0 22px 0 18px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px -6px rgba(37, 211, 102, 0.5);
  z-index: 40;
  font-size: 14px;
  font-weight: 500;
  transition: transform 0.2s var(--ease);
}
.wa-fab:hover { transform: translateY(-2px); }
.wa-fab svg { flex-shrink: 0; }
@media (max-width: 720px) {
  .wa-fab .lbl { display: none; }
  .wa-fab { padding: 0; width: 56px; justify-content: center; right: 16px; bottom: 88px; }
}

/* ============================================================
   Mobile drawer
   ============================================================ */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(43, 40, 38, 0.4);
  backdrop-filter: blur(4px);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: min(360px, 88vw);
  background: var(--surface);
  z-index: 81;
  transform: translateX(-100%);
  transition: transform 0.3s var(--ease);
  display: flex;
  flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.drawer-body {
  padding: 12px 8px 24px;
  overflow-y: auto;
  flex: 1;
}
.drawer-section { padding: 8px 0; }
.drawer-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 18px;
  font-size: 15px;
  border-radius: 8px;
  text-align: left;
}
.drawer-link:hover, .drawer-link.active { background: var(--bg); }
.drawer-acc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 500;
}
.drawer-acc-body {
  padding: 0 18px 8px 30px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drawer-acc-body button {
  text-align: left;
  padding: 8px 0;
  font-size: 14px;
  color: var(--ink-2);
}
.drawer-acc-body button:hover { color: var(--ink); }
.drawer-foot {
  border-top: 1px solid var(--line);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drawer-foot .row { display: flex; gap: 8px; color: var(--ink-2); font-size: 13px; align-items: center; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
  background: var(--bg);
}
/* hero-text aligns its left edge with where the page shell (max-width
   1280px, centered) would start. Original JSX used inline padding-left
   max(24px, calc((100vw - 1280px)/2 + 24px)) — mirror that here. */
.hero-text {
  padding: 100px 64px 100px max(24px, calc((100vw - 1280px) / 2 + 24px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 600px;
}
.hero .eyebrow { margin-bottom: 24px; }
.hero h1 {
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.hero h1 em {
  font-style: italic;
  color: var(--burgundy);
  font-weight: 400;
}
.hero p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 36px;
  max-width: 440px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-img {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--line-2);
  overflow: hidden;
}
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-img .ribbon {
  position: absolute;
  bottom: 24px; left: 24px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-img .ribbon .dot { width: 5px; height: 5px; border-radius: 50%; background: #25D366; }
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 0; background: var(--bg); }
  .hero-text { padding: 6px 26px 28px; order: 2; max-width: none; }
  .hero-img {
    order: 1;
    margin: 26px;
    border-radius: 18px;
    overflow: hidden;
    height: 420px;
    aspect-ratio: auto;
    background: var(--surface-2);
  }
  .hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hero-img .ribbon {
    bottom: 14px; left: 14px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
  }
  .hero .eyebrow {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
  }
  .hero h1, .hero .hero-h1 {
    font-family: var(--f-display);
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
    font-weight: 500;
  }
  .hero h1 em, .hero .hero-h1 em {
    color: var(--burgundy);
    font-style: italic;
    font-weight: 500;
  }
  .hero p.lead {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
    margin-bottom: 18px;
    max-width: none;
  }
  .hero-cta {
    flex-direction: row;
    gap: 10px;
  }
  .hero-cta .btn {
    flex: 1;
    min-width: 0;
    padding: 13px 14px;
    font-size: 14px;
    justify-content: center;
  }
}

/* ============================================================
   Section heads
   ============================================================ */
.section {
  padding: 96px 0;
}
.section.tight { padding: 72px 0; }
@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .section.tight { padding: 48px 0; }
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.section-head h2 {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.section-head .lead {
  color: var(--ink-2);
  font-size: 15px;
  max-width: 440px;
  margin-top: 8px;
}
.section-head .link {
  font-size: 14px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
}
.section-head .link:hover { color: var(--burgundy); border-color: var(--burgundy); }

/* ============================================================
   Mosaic categories
   ============================================================ */
.mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 180px;
  gap: 14px;
}
.mosaic .tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  cursor: pointer;
  background: var(--line-2);
}
.mosaic .tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.mosaic .tile:hover img { transform: scale(1.04); }
.mosaic .tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(43,40,38,0.55) 100%);
}
.mosaic .tile .label {
  position: absolute;
  left: 18px; bottom: 16px;
  color: #fff;
  z-index: 2;
}
.mosaic .tile .label .l1 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.mosaic .tile .label .l2 {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 4px;
}
.mosaic .t1 { grid-column: span 6; grid-row: span 2; }
.mosaic .t2 { grid-column: span 3; grid-row: span 1; }
.mosaic .t3 { grid-column: span 3; grid-row: span 1; }
.mosaic .t4 { grid-column: span 3; grid-row: span 1; }
.mosaic .t5 { grid-column: span 3; grid-row: span 1; }
.mosaic .t6 { grid-column: span 12; grid-row: span 1; }
@media (max-width: 960px) {
  .mosaic { grid-auto-rows: 200px; }
  .mosaic .t1 { grid-column: span 12; grid-row: span 2; }
  .mosaic .t2, .mosaic .t3, .mosaic .t4, .mosaic .t5 { grid-column: span 6; }
  .mosaic .t6 { grid-column: span 12; }
}

/* ============================================================
   Why grid
   ============================================================ */
.why {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.why-item .ic {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--burgundy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.why-item h3 {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.why-item p { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 0; }
@media (max-width: 720px) {
  .why { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ============================================================
   Product grid
   ============================================================ */
.pgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 18px;
}
@media (max-width: 960px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .pgrid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; } }

/* ============================================================
   Store visit band
   ============================================================ */
.visit {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.visit-img {
  aspect-ratio: 5/4;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--line-2);
}
.visit-img img { width: 100%; height: 100%; object-fit: cover; }
.visit dl { display: grid; grid-template-columns: 120px 1fr; gap: 12px 24px; margin: 24px 0 32px; }
.visit dt { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.visit dd { margin: 0; font-size: 15px; color: var(--ink); }
@media (max-width: 860px) {
  .visit { grid-template-columns: 1fr; gap: 32px; }
  .visit dl { grid-template-columns: 100px 1fr; }
}

/* ============================================================
   Testimonials
   ============================================================ */
.tgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tcard {
  padding: 28px;
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tcard .stars { color: var(--champagne); display: flex; gap: 2px; }
.tcard blockquote {
  margin: 0;
  font-family: var(--f-display);
  font-size: 19px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--ink);
  font-style: italic;
  letter-spacing: -0.005em;
  flex: 1;
}
.tcard .who { display: flex; gap: 12px; align-items: center; }
.tcard .who .av {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--rose);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--burgundy);
  font-size: 14px;
  overflow: hidden;
}
.tcard .who .av img { width: 100%; height: 100%; object-fit: cover; }
.tcard .who .nm { font-size: 14px; font-weight: 500; }
.tcard .who .oc { font-size: 12px; color: var(--ink-2); letter-spacing: 0.04em; }
@media (max-width: 860px) {
  .tgrid { grid-template-columns: 1fr; }
}

/* ============================================================
   Newsletter strip
   ============================================================ */
.newsletter {
  background: var(--rose);
  padding: 64px 0;
}
.newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.newsletter h2 { font-size: clamp(28px, 3.5vw, 38px); color: var(--burgundy); }
.newsletter p { color: var(--ink); opacity: 0.85; margin-top: 8px; max-width: 420px; }
.newsletter form { display: flex; gap: 8px; }
.newsletter input {
  flex: 1;
  height: 52px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: #fff;
  padding: 0 22px;
  font-size: 14px;
}
.newsletter input:focus { outline: none; border-color: var(--burgundy); }
@media (max-width: 860px) {
  .newsletter-inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   Category page
   ============================================================ */
.cat-hero {
  position: relative;
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--line);
}
.breadcrumb {
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.06em;
  margin-bottom: 24px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { color: var(--ink-3); }
.cat-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: end;
}
.cat-hero h1 {
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.cat-hero p { color: var(--ink-2); font-size: 16px; margin-top: 16px; max-width: 480px; }
.cat-hero .ctx-img {
  aspect-ratio: 5/4;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--line-2);
}
.cat-hero .ctx-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .cat-hero-grid { grid-template-columns: 1fr; }
  .cat-hero .ctx-img { aspect-ratio: 16/9; }
}

.cat-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: var(--nav-h);
  background: var(--bg);
  z-index: 10;
  margin-bottom: 32px;
  gap: 12px;
}
.cat-toolbar .count { font-size: 13px; color: var(--ink-2); }
.cat-toolbar .right { display: flex; gap: 8px; align-items: center; }
.sort-select {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 36px 0 16px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%232B2826' fill='none' stroke-width='1.5' stroke-linecap='round'/></svg>") no-repeat right 14px center;
  font-size: 13px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.cat-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  padding-bottom: 80px;
}
@media (max-width: 960px) {
  .cat-layout { grid-template-columns: 1fr; gap: 24px; }
  .cat-layout aside { display: none; }
}

.filters h4 {
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--ink);
  font-weight: 600;
}
.filter-block { padding: 20px 0; border-bottom: 1px solid var(--line); }
.filter-block:first-child { padding-top: 0; }
.color-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.color-grid .cs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 44px;
  cursor: pointer;
  font-size: 10px;
  color: var(--ink-2);
}
.color-grid .cs span {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(43,40,38,0.12);
  transition: transform 0.2s;
}
.color-grid .cs:hover span { transform: scale(1.1); }
.color-grid .cs.on span { box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 3px var(--bg); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button {
  min-width: 40px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid var(--line);
  padding: 0 10px;
  font-size: 12px;
  background: #fff;
  transition: all 0.15s;
}
.chips button:hover { border-color: var(--ink); }
.chips button.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.range { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.range input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
}
.range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  background: var(--burgundy);
  border-radius: 50%;
  cursor: pointer;
}
.range .row { display: flex; justify-content: space-between; color: var(--ink-2); }

.radio-list { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.radio-list label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.radio-list input { accent-color: var(--burgundy); }

/* ============================================================
   Product detail
   ============================================================ */
.pdp { padding: 32px 0 80px; }
.pdp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 960px) { .pdp-grid { grid-template-columns: 1fr; gap: 32px; } }

.gallery { display: grid; grid-template-columns: 80px 1fr; gap: 14px; }
.gallery-thumbs { display: flex; flex-direction: column; gap: 10px; }
.gallery-thumbs button {
  aspect-ratio: 3/4;
  border-radius: 6px;
  overflow: hidden;
  background: var(--line-2);
  border: 1.5px solid transparent;
  position: relative;
}
.gallery-thumbs button.on { border-color: var(--ink); }
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main {
  aspect-ratio: 3/4;
  border-radius: var(--r-md);
  background: var(--line-2);
  overflow: hidden;
  position: relative;
}
.gallery-main img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.gallery-main.zoomed img { transform: scale(1.6); cursor: zoom-out; }
.gallery-main:not(.zoomed) img { cursor: zoom-in; }
@media (max-width: 720px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery-thumbs { flex-direction: row; order: 2; overflow-x: auto; }
  .gallery-thumbs button { width: 64px; flex-shrink: 0; }
}

.pdp-info h1 {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.pdp-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  font-family: var(--f-body);
}
.pdp-price .cur { font-size: 26px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.pdp-price .old { font-size: 16px; color: var(--ink-3); text-decoration: line-through; }
.pdp-price .pct {
  background: var(--burgundy);
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.pdp-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 28px;
}
.pdp-rating .stars { color: var(--champagne); display: inline-flex; gap: 1px; }
.pdp-rating a { border-bottom: 1px solid currentColor; }

.pdp-block { padding: 18px 0; border-bottom: 1px solid var(--line); }
.pdp-block .lbl {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pdp-block .lbl small { font-weight: 400; color: var(--ink-2); text-transform: none; letter-spacing: 0.01em; }
.pdp-block .lbl .link { color: var(--burgundy); cursor: pointer; border-bottom: 1px solid currentColor; padding-bottom: 1px; text-transform: none; letter-spacing: 0; font-weight: 500; }

.color-pick { display: flex; gap: 10px; flex-wrap: wrap; }
.color-pick .sw {
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(43,40,38,0.12);
  transition: transform 0.15s;
  position: relative;
}
.color-pick .sw:hover { transform: scale(1.08); }
.color-pick .sw.on { box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 3.5px var(--bg); }

.size-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.size-pick button {
  min-width: 52px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
}
.size-pick button:hover { border-color: var(--ink); }
.size-pick button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.size-pick button.out { color: var(--ink-3); position: relative; cursor: not-allowed; }
.size-pick button.out::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--ink-3) calc(50% - 1px), var(--ink-3) calc(50% + 1px), transparent calc(50% + 1px));
  opacity: 0.4;
}

.stock-ind {
  font-size: 13px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.stock-ind .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4CAF50;
  position: relative;
}
.stock-ind.low .pulse { background: var(--champagne); }
.stock-ind .pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.4;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

.pdp-actions {
  display: flex;
  gap: 10px;
  padding: 24px 0;
}
.pdp-actions .btn-primary { flex: 1; }

.trust-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 16px 0;
  margin-bottom: 8px;
}
.trust-badges .tb {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.3;
}
.trust-badges .tb svg { color: var(--burgundy); }
.trust-badges .tb b { color: var(--ink); font-weight: 600; font-size: 12px; }

.accordion-item {
  border-bottom: 1px solid var(--line);
}
.accordion-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.accordion-head .ic { transition: transform 0.2s; }
.accordion-head.open .ic { transform: rotate(45deg); }
.accordion-body {
  display: none;
  padding: 0 0 20px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.65;
}
.accordion-body.open { display: block; }
.accordion-body ul { padding-left: 18px; margin: 8px 0; }

/* sticky mobile bottom CTA */
.sticky-cta {
  display: none;
}
@media (max-width: 720px) {
  .sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 12px 16px;
    gap: 8px;
    z-index: 30;
    align-items: center;
  }
  .sticky-cta .price { font-weight: 600; flex-shrink: 0; font-variant-numeric: tabular-nums; }
  .sticky-cta .btn-primary { flex: 1; height: 44px; padding: 0 16px; font-size: 13px; }
  .sticky-cta .wa-circle {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  body.has-sticky-cta { padding-bottom: 80px; }
}

/* Reviews */
.reviews {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  padding-top: 24px;
}
.reviews-side .big {
  font-family: var(--f-display);
  font-size: 56px;
  font-weight: 500;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.reviews-side .big small { font-size: 18px; color: var(--ink-2); font-family: var(--f-body); font-weight: 400; }
.reviews-side .stars { color: var(--champagne); font-size: 16px; margin: 8px 0 4px; }
.reviews-side .count { font-size: 13px; color: var(--ink-2); margin-bottom: 24px; }
.reviews-side .bar-row { display: grid; grid-template-columns: 16px 1fr 28px; gap: 10px; align-items: center; font-size: 12px; color: var(--ink-2); margin-bottom: 6px; }
.reviews-side .bar { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; }
.reviews-side .bar i { display: block; height: 100%; background: var(--champagne); }
.reviews-list { display: flex; flex-direction: column; gap: 24px; }
.review {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.review .head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.review .av { width: 36px; height: 36px; border-radius: 50%; background: var(--rose); color: var(--burgundy); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; }
.review .nm { font-size: 14px; font-weight: 500; }
.review .meta { font-size: 12px; color: var(--ink-2); }
.review .stars { color: var(--champagne); font-size: 13px; }
.review p { margin: 6px 0 8px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.review .tags { display: flex; gap: 6px; font-size: 11px; color: var(--ink-2); letter-spacing: 0.04em; }
@media (max-width: 860px) { .reviews { grid-template-columns: 1fr; gap: 24px; } }

/* ============================================================
   Cart
   ============================================================ */
.cart-page { padding: 48px 0 96px; }
.cart-page h1 {
  font-size: clamp(34px, 4.5vw, 48px);
  margin-bottom: 8px;
}
.cart-page .sub { color: var(--ink-2); margin-bottom: 40px; }
.cart-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 960px) { .cart-grid { grid-template-columns: 1fr; gap: 32px; } }

.cart-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.cart-item .pi-img {
  aspect-ratio: 3/4;
  background: var(--line-2);
  border-radius: 8px;
  overflow: hidden;
}
.cart-item .pi-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item .name { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.cart-item .opts { font-size: 13px; color: var(--ink-2); display: flex; gap: 16px; margin-bottom: 12px; }
.cart-item .opts .o { display: inline-flex; align-items: center; gap: 6px; }
.cart-item .opts .sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(43,40,38,0.15); }
.cart-item .ctrl { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.cart-item .ctrl button.rem { color: var(--ink-2); border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.cart-item .ctrl button.rem:hover { color: var(--burgundy); border-color: var(--burgundy); }
.cart-item .right { text-align: right; }
.cart-item .right .pp { font-weight: 500; font-variant-numeric: tabular-nums; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 32px;
  overflow: hidden;
}
.qty button { width: 32px; height: 32px; color: var(--ink-2); font-size: 14px; }
.qty button:hover:not(:disabled) { color: var(--ink); background: var(--bg); }
.qty button:disabled { opacity: 0.3; cursor: not-allowed; }
.qty .v { min-width: 24px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }

.summary {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 28px;
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  border: 1px solid var(--line);
}
.summary h3 { font-family: var(--f-body); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin-bottom: 20px; }
.summary .row { display: flex; justify-content: space-between; font-size: 14px; padding: 8px 0; }
.summary .row.tot { font-size: 18px; font-weight: 500; padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--line); font-family: var(--f-display); }
.summary .row.tot .v { font-variant-numeric: tabular-nums; }
.summary .progress {
  margin: 8px 0 16px;
  padding: 14px;
  background: var(--rose);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
}
.summary .progress.done { background: #E8F0E5; color: #2E5C3F; }
.summary .progress .bar { height: 4px; background: rgba(43,40,38,0.12); border-radius: 4px; margin-top: 8px; overflow: hidden; }
.summary .progress .bar i { display: block; height: 100%; background: var(--burgundy); transition: width 0.4s var(--ease); }
.summary .progress.done .bar i { background: #2E5C3F; }
.summary .coupon { padding: 16px 0; border-top: 1px solid var(--line); margin-top: 12px; }
.summary .coupon button { font-size: 13px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; width: 100%; }
.summary .coupon .body { margin-top: 12px; display: none; gap: 8px; }
.summary .coupon .body.open { display: flex; }
.summary .coupon input { flex: 1; height: 40px; border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; font-size: 13px; background: var(--bg); }
.summary .coupon input:focus { outline: none; border-color: var(--ink); }
.summary .trust { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); line-height: 1.55; display: flex; flex-direction: column; gap: 6px; }
.summary .trust .t { display: flex; gap: 8px; align-items: center; }

.empty-state {
  text-align: center;
  padding: 80px 24px;
}
.empty-state h2 { font-size: 28px; margin-bottom: 8px; }
.empty-state p { color: var(--ink-2); margin-bottom: 24px; }

/* ============================================================
   Visit page
   ============================================================ */
.visit-hero {
  position: relative;
  height: 380px;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 24px;
}
.visit-hero img { width: 100%; height: 100%; object-fit: cover; }
.visit-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43,40,38,0.1) 30%, rgba(43,40,38,0.5) 100%);
}
.visit-hero .overlay {
  position: absolute;
  bottom: 32px; left: 36px;
  color: #fff;
  z-index: 2;
}
.visit-hero .overlay .eyebrow { color: rgba(255,255,255,0.85); }
.visit-hero .overlay h1 { font-size: clamp(36px, 4.5vw, 56px); margin-top: 8px; color: #fff; }

.vcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.vcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vcard h3 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.vcard .ic {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--burgundy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vcard p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.vcard .map {
  aspect-ratio: 16/10;
  border-radius: 8px;
  background: #E5DBC9 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='250' viewBox='0 0 400 250'><rect width='400' height='250' fill='%23E5DBC9'/><path d='M0 80 L400 60' stroke='%23C9A876' stroke-width='1.5' opacity='0.5'/><path d='M0 150 L400 130' stroke='%23C9A876' stroke-width='1' opacity='0.4'/><path d='M0 200 L400 195' stroke='%23C9A876' stroke-width='1' opacity='0.3'/><path d='M80 0 L120 250' stroke='%23C9A876' stroke-width='1' opacity='0.4'/><path d='M220 0 L240 250' stroke='%23C9A876' stroke-width='1.5' opacity='0.5'/><path d='M340 0 L350 250' stroke='%23C9A876' stroke-width='1' opacity='0.3'/><circle cx='220' cy='130' r='22' fill='%236B2C2C' opacity='0.18'/><path d='M220 110 C214 110 210 114 210 120 C210 128 220 142 220 142 C220 142 230 128 230 120 C230 114 226 110 220 110 Z' fill='%236B2C2C'/></svg>") center/cover;
  border: 1px solid var(--line);
}
.vcard table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vcard table td { padding: 8px 0; }
.vcard table td:first-child { color: var(--ink-2); }
.vcard table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.vcard table tr.closed td:last-child { color: var(--burgundy); }
.vcard .wa-row { display: flex; gap: 12px; align-items: center; padding: 14px; background: var(--surface-2); border-radius: 10px; }
.vcard .wa-row .ic-wa { width: 44px; height: 44px; border-radius: 50%; background: #25D366; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.vcard .wa-row b { font-size: 15px; }
.vcard .wa-row .sm { font-size: 12px; color: var(--ink-2); }
.vcard ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.vcard ul a { display: flex; justify-content: space-between; align-items: center; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.vcard ul a:hover { color: var(--burgundy); }
.vcard.pet {
  background: var(--rose);
  border-color: transparent;
}
.vcard.pet .ic { background: rgba(255,255,255,0.7); color: var(--burgundy); }
.vcard.pet h3 { color: var(--burgundy); }
.vcard.pet p { color: var(--ink); }
.vcard.pet .pets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 4px;
}
.vcard.pet .pets .pp {
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: var(--surface);
  overflow: hidden;
  position: relative;
}
.vcard.pet .pets .pp img { width: 100%; height: 100%; object-fit: cover; }
.vcard.pet .pets .pp .nm { position: absolute; bottom: -22px; left: 0; right: 0; font-size: 10px; text-align: center; color: var(--ink); letter-spacing: 0.04em; }
.vcard.pet .pets-wrap { padding-bottom: 22px; }
.vcard.tipbox { background: var(--surface-2); border: 1px dashed var(--champagne); }
@media (max-width: 960px) { .vcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .vcards { grid-template-columns: 1fr; } }

.vform {
  margin-top: 56px;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 40px;
  border: 1px solid var(--line);
}
.vform h2 { font-size: 32px; margin-bottom: 8px; }
.vform .sub { color: var(--ink-2); margin-bottom: 28px; }
.vform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vform .field { display: flex; flex-direction: column; gap: 6px; }
.vform .field.full { grid-column: 1 / -1; }
.vform label { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.vform input, .vform textarea, .vform select {
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  font-size: 14px;
  background: var(--bg);
  transition: border-color 0.15s;
}
.vform textarea { height: 120px; padding: 12px 14px; resize: vertical; }
.vform input:focus, .vform textarea:focus, .vform select:focus { outline: none; border-color: var(--ink); background: #fff; }
.vform button { margin-top: 12px; }
@media (max-width: 720px) {
  .vform { padding: 24px; }
  .vform-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Related products band
   ============================================================ */
.related { padding: 64px 0 24px; }
.related h2 { font-size: 28px; margin-bottom: 24px; }

/* ============================================================
   Newsletter modal
   ============================================================ */
.modal-bd {
  position: fixed;
  inset: 0;
  background: rgba(43, 40, 38, 0.6);
  backdrop-filter: blur(4px);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.modal-bd.open { opacity: 1; pointer-events: auto; }
.modal {
  background: #fff;
  border-radius: var(--r-lg);
  max-width: 760px;
  width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform: scale(0.96);
  transition: transform 0.3s var(--ease);
  position: relative;
}
.modal-bd.open .modal { transform: scale(1); }
.modal .ph {
  background: var(--line-2);
  aspect-ratio: 1/1;
  overflow: hidden;
}
.modal .ph img { width: 100%; height: 100%; object-fit: cover; }
.modal .body { padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; }
.modal .body .eyebrow { color: var(--burgundy); margin-bottom: 14px; }
.modal .body h2 { font-size: 32px; margin-bottom: 12px; }
.modal .body p { color: var(--ink-2); font-size: 14px; margin-bottom: 20px; }
.modal .body input { height: 48px; border: 1px solid var(--line); border-radius: 999px; padding: 0 18px; font-size: 14px; margin-bottom: 10px; }
.modal .body input:focus { outline: none; border-color: var(--ink); }
.modal .body .skip { font-size: 12px; color: var(--ink-2); margin-top: 12px; text-decoration: underline; text-align: center; cursor: pointer; }
.modal .close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.9); display: inline-flex; align-items: center; justify-content: center; z-index: 2; }
@media (max-width: 720px) {
  .modal { grid-template-columns: 1fr; max-width: 420px; }
  .modal .ph { aspect-ratio: 16/9; }
  .modal .body { padding: 24px; }
}

/* ============================================================
   Skeleton (subtle, used in category)
   ============================================================ */
.skel { background: linear-gradient(90deg, var(--line-2), var(--bg), var(--line-2)); background-size: 200% 100%; animation: sk 1.4s linear infinite; border-radius: 8px; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* page fade */
.page { animation: pf 0.35s var(--ease); }
@keyframes pf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* hide scrollbar on horizontal gallery thumbs */
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumbs { scrollbar-width: none; }

/* ============================================================
   Custom additions Smile V2 PrestaShop integration
   ============================================================ */

/* WhatsApp floating button */
.whatsapp-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  background: #25D366;
  color: #fff !important;
  border-radius: 999px;
  padding: 14px 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 24px -6px rgba(37, 211, 102, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-fab:hover {
  transform: translateY(-2px);
  color: #fff !important;
  box-shadow: 0 12px 30px -6px rgba(37, 211, 102, 0.65);
}
.whatsapp-fab span { font-family: var(--f-body); }

/* Mobile drawer — see appended block at bottom of file (v2 handoff 20260531) */
/* Footer */
.footer {
  background: var(--ink);
  color: var(--bg);
  padding: 64px 0 24px;
  font-family: var(--f-body);
  margin-top: 80px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-col h4 {
  font-family: var(--f-display);
  color: var(--bg);
  font-size: 18px;
  margin-bottom: 18px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--champagne); }
.footer-tagline { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.6; margin: 12px 0 16px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  color: #fff !important;
  transition: background 0.2s ease;
}
.footer-social a:hover { background: var(--burgundy); }
.footer-col p { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.7; margin-bottom: 12px; }
.footer-col p strong { color: rgba(255,255,255,0.9); }
.footer-col p a { display: inline; }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
@media (max-width: 600px) {
  .footer-bottom { flex-direction: column; gap: 12px; }
}
.footer-payments { display: inline-flex; align-items: center; gap: 8px; }


/* Section head + lead */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.lead { color: var(--ink-2); max-width: 520px; }
.link { color: var(--ink); font-size: 14px; font-weight: 500; padding-bottom: 2px; border-bottom: 1px solid var(--ink); }
.link:hover { color: var(--burgundy) !important; border-color: var(--burgundy); }

/* Hide at_nova/Leo modules that conflict */
#leo_topcatmenu,
.leo-topcatmenu,
#leobootstrapmenu_wrapper,
.leoslideshow_wrapper,
.ap-pagebuilder-content,
#header-wrapper > .row,
.header-top > .row,
.menu-top-cats,
.search-widget,
#_desktop_user_info,
#_desktop_cart,
#_mobile_top_menu_wrapper,
.header-banner,
.megamenu,
#mainpage_content_top {
  display: none !important;
}


/* === smile_v2 layout sanity overrides (2026-05-25) === */
.menu-btn { display: none; }
@media (max-width: 960px) {
  .menu-btn { display: inline-flex; }
}
/* Make sure products injected by displayHome behave inside the shell */
.products-grid .product-miniature { background: var(--surface); border: 1px solid var(--line-2); padding: 16px; border-radius: var(--r-md); }
.products-grid .product-miniature img { width: 100%; height: auto; }


/* === Tame at_nova module markup inside .products-grid (2026-05-25) === */
.products-grid .title_block,
.products-grid .sellers-products > h2,
.products-grid .newproducts-products > h2,
.products-grid .block_content > h2,
.products-grid h2.h2.title_block { display: none !important; }
.products-grid .sellers-products,
.products-grid .newproducts-products,
.products-grid .block { padding: 0; margin: 0; background: transparent; box-shadow: none; }
.products-grid .owl-row,
.products-grid .products_block { display: block; }
.products-grid #category-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}
.products-grid .item { width: auto !important; padding: 0 !important; }
.products-grid .product-miniature {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 16px;
  transition: border-color 0.2s var(--ease);
}
.products-grid .product-miniature:hover { border-color: var(--ink); }
.products-grid .product-miniature .thumbnail-container { aspect-ratio: 3/4; overflow: hidden; border-radius: var(--r-sm); }
.products-grid .product-miniature img { width: 100%; height: 100%; object-fit: cover; display: block; }
.products-grid .product-title,
.products-grid .product-miniature .product-name,
.products-grid .product-miniature h3 {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin: 14px 0 6px;
  line-height: 1.35;
  letter-spacing: 0;
}
.products-grid .product-price,
.products-grid .product-price-and-shipping .price {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--burgundy);
}

/* Hide also when ps_bestsellers / ps_newproducts wrap with bootstrap container */
.products-grid > .row,
.products-grid > .container { margin: 0; padding: 0; }

/* Belt-and-suspenders: appagebuilder leftover headers anywhere in our sections */
.section .title_block,
.section .ApTabs,
.section .nav-tabs,
.section .leoslideshow_wrapper,
.section .leoslideshow { display: none !important; }


/* === Hide legacy at_nova / Leo floating widgets (2026-05-25) === */
.leo-fly-cart,
.leo-fly-cart-icon-wrapper,
#back-top,
.appagebuilder-popup,
#popup-newletter,
#popup-newsletter,
#leo-popup,
.leo-popup,
.cdz-floating-cart { display: none !important; }


/* === Product miniature deep structure fixes (at_nova nesting) === */
.products-grid .product-miniature .thumbnail-container { aspect-ratio: 3/4; overflow: hidden; border-radius: var(--r-sm); position: relative; background: var(--line-2); }
.products-grid .product-miniature .thumbnail-container .product-image,
.products-grid .product-miniature .thumbnail-container .product-image > a,
.products-grid .product-miniature .thumbnail-container > a,
.products-grid .product-miniature .product-thumbnail { display: block; width: 100%; height: 100%; }
.products-grid .product-miniature img.img-fluid,
.products-grid .product-miniature .product-image img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }

/* Hide functional buttons (wishlist + add to cart + quickview) crusted by at_nova */
.products-grid .product-miniature .functional-buttons,
.products-grid .product-miniature .product-flags,
.products-grid .product-miniature .product-additional,
.products-grid .product-miniature .leo-wishlist-button,
.products-grid .product-miniature .quickview { display: none !important; }

/* Make the .item containers behave inside the grid */
.products-grid #category-products > .item,
.products-grid #category-products > .first { width: auto !important; padding: 0 !important; margin: 0 !important; float: none !important; }
.products-grid .product-miniature {
  width: 100% !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}

/* Show price prominently below image */
.products-grid .product-miniature .product-description,
.products-grid .product-miniature > .product-description { padding: 0; margin-top: 14px; text-align: left; }
.products-grid .product-miniature .product-title a { color: var(--ink); text-decoration: none; }
.products-grid .product-miniature .product-title a:hover { color: var(--burgundy); }


/* === Defeat Owl Carousel inside .products-grid: force grid layout (2026-05-25) === */
.products-grid .owl-carousel,
.products-grid .owl-row,
.products-grid .owl-stage-outer,
.products-grid .owl-stage {
  display: block !important;
  transform: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}
.products-grid .owl-nav,
.products-grid .owl-dots { display: none !important; }
.products-grid .owl-item {
  display: block !important;
  float: none !important;
  width: auto !important;
}

/* Force the inner product container into a real CSS grid */
.products-grid #category-products,
.products-grid .products,
.products-grid .product_list,
.products-grid .products_block > div {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
.products-grid .item,
.products-grid .first {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: block !important;
}

/* Image visibility - ensure the deeply nested image is visible */
.products-grid .product-miniature .thumbnail-container {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3/4 !important;
  overflow: hidden !important;
  border-radius: var(--r-sm) !important;
  background: var(--line-2) !important;
  position: relative !important;
}
.products-grid .product-miniature .thumbnail-container > .product-image,
.products-grid .product-miniature .thumbnail-container > a,
.products-grid .product-miniature .product-image,
.products-grid .product-miniature .product-thumbnail {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.products-grid .product-miniature img,
.products-grid .product-miniature .img-fluid {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  max-width: none !important;
}


/* === Clean .smile-products grid (replaces Owl Carousel output) === */
.products-grid .smile-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  width: 100%;
}
.products-grid .smile-products .product-miniature {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 16px;
  transition: border-color 0.2s var(--ease);
  display: flex;
  flex-direction: column;
}
.products-grid .smile-products .product-miniature:hover { border-color: var(--ink); }
.products-grid .smile-products .product-miniature .thumbnail-container {
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--line-2);
  position: relative;
}
.products-grid .smile-products .product-miniature .product-image,
.products-grid .smile-products .product-miniature .thumbnail.product-thumbnail {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.products-grid .smile-products .product-miniature img.img-fluid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.products-grid .smile-products .functional-buttons,
.products-grid .smile-products .product-flags,
.products-grid .smile-products .quickview,
.products-grid .smile-products .leo-wishlist-button,
.products-grid .smile-products .product-additional { display: none !important; }
.products-grid .smile-products .product-description,
.products-grid .smile-products .product-miniature > .product-description { padding: 14px 0 0; margin: 0; text-align: left; background: transparent; }
.products-grid .smile-products .product-title,
.products-grid .smile-products .product-name {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.35;
  letter-spacing: 0;
}
.products-grid .smile-products .product-title a,
.products-grid .smile-products .product-name a { color: var(--ink); text-decoration: none; }
.products-grid .smile-products .product-title a:hover { color: var(--burgundy); }
.products-grid .smile-products .product-price-and-shipping .price,
.products-grid .smile-products .product-price {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--burgundy);
}
.products-grid .smile-products .regular-price { color: var(--ink-2); text-decoration: line-through; font-weight: 400; margin-right: 6px; }
.products-grid .smile-products .discount-percentage,
.products-grid .smile-products .discount-amount { display: inline-block; padding: 2px 6px; background: var(--burgundy); color: #fff; font-size: 11px; border-radius: 4px; margin-left: 4px; }


/* === Hide leoquicklogin drawers/modal that leak below the footer === */
.lql-quickregister-slidebar,
.lql-quicklogin-slidebar,
.lql-social-modal,
.leoquicklogin-slidebar,
[class*="lql-"][class*="slidebar"],
#leoquicklogin-modal { display: none !important; }

/* Ensure body/html have no trailing space */
html, body { margin-bottom: 0; }
body > .main, main { margin-bottom: 0; }


/* === Kill ALL Leo trailing widgets after </main> (2026-05-25) === */
.leo-fly-cart-mask,
.leo-fly-cart-slidebar,
.leo-fly-cart-slidebar.slidebar_right,
.leo-fly-cart-slidebar.slidebar_bottom,
.leo-fly-cart.solo,
.leo-fly-cart.type-fixed,
.leo-fly-cart.enable-slidebar,
.modal.leo-quicklogin-modal,
.modal.lql-social-modal,
[class*="leo-fly-cart"],
[class*="leoquicklogin"][class*="slidebar"] { display: none !important; visibility: hidden !important; height: 0 !important; }


/* === Reset at_nova page-builder weirdness on <main id="page"> === */
#page {
  position: static !important;
  max-width: none !important;
  width: auto !important;
  overflow: visible !important;
  box-shadow: none !important;
  background: var(--bg) !important;
  margin: 0 !important;
  transform: none !important;
  transition: none !important;
}
main { text-align: left !important; }
html, body { height: auto !important; min-height: 0 !important; overflow-x: hidden; }
#wrapper > .container { margin-top: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important; }
#wrapper { padding: 0 !important; margin: 0 !important; }


/* === Force-hide every Bootstrap/Leo modal sitting in DOM after footer === */
.modal.fade:not(.show),
.modal.leo-modal,
.modal.leo-modal-compare,
.leo-modal,
.leo-modal-compare,
[class*="leo-modal"] { display: none !important; visibility: hidden !important; height: 0 !important; }


/* === Language switcher ES/EN === */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  margin: 0 8px;
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1;
}
.lang-switch .lang-link {
  padding: 4px 8px;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: 999px;
  transition: all 0.15s var(--ease);
  font-weight: 600;
}
.lang-switch .lang-link:hover { color: var(--ink); }
.lang-switch .lang-link.is-current {
  background: var(--ink);
  color: #fff;
  cursor: default;
  pointer-events: none;
}
@media (max-width: 720px) {
  .lang-switch { display: none; }
}

/* === Smile V2 — Category listing page (Claude Design) === */

.smile-listing { background: var(--bg); }

/* Category hero band */
.cat-hero {
  background: var(--surface-2);
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--line-2);
}
.cat-hero-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: center;
}
.cat-hero-text { max-width: 600px; }
.cat-h1 {
  font-family: var(--f-display);
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 16px 0 24px;
}
.cat-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 16px;
  max-width: 540px;
}
.cat-lead p { margin: 0 0 12px; }
.cat-lead p:last-child { margin-bottom: 0; }
.cat-count {
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.cat-hero-img {
  aspect-ratio: 4/5;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--line-2);
}
.cat-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .cat-hero { padding: 48px 0 36px; }
  .cat-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .cat-hero-img { aspect-ratio: 16/9; order: -1; }
}

/* Subcategory chips */
.smile-subcats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-2);
}
.smile-subcats-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 8px;
  font-weight: 500;
}
.smile-subcat-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  transition: all .15s var(--ease);
}
.smile-subcat-pill:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* Toolbar (sort + count) */
.smile-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 0 20px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 32px;
}
.smile-toolbar-count {
  font-size: 14px;
  color: var(--ink-2);
}
.smile-toolbar-count strong { color: var(--ink); font-weight: 600; }
.smile-toolbar-count .of { margin: 0 6px; color: var(--ink-3); }
.smile-toolbar-sort { display: flex; align-items: center; gap: 12px; }
.smile-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 36px 10px 14px;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%232B2826' stroke-width='1.6'><path d='M1 1l4 4 4-4'/></svg>") no-repeat right 12px center;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  min-width: 200px;
}
.smile-select:focus { outline: 0; border-color: var(--burgundy); }

/* Active filters chips */
.smile-active-filters { padding: 0 0 16px; }
.smile-active-filters .js-active-filter-title { display: none; }
.smile-active-filters .filter-block {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  background: var(--surface-2);
  border-radius: 999px;
  margin: 0 4px 4px 0;
}

/* Listing product grid spacing */
.smile-listing .products-grid { padding: 0; }
.smile-listing .smile-products {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 32px 24px;
}

/* Empty state */
.smile-empty {
  padding: 80px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
}
.smile-empty h2 {
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 12px;
}
.smile-empty p {
  font-size: 15px;
  color: var(--ink-2);
  margin: 0 0 24px;
}

/* Pagination */
.smile-pagination {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: center;
}
.smile-pages {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.smile-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  transition: all .15s var(--ease);
}
.smile-page-link:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--ink);
}
.smile-page-item.is-current .smile-page-link {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  cursor: default;
  pointer-events: none;
}
.smile-page-item.is-previous .smile-page-link,
.smile-page-item.is-next .smile-page-link {
  background: transparent;
  border-color: var(--line-2);
}

/* When inside listing, drop the home product-miniature outer padding */
.smile-listing .smile-products .product-miniature { padding: 12px; }

/* Hide leftover at_nova breadcrumb / category description card extras */
.smile-listing #subcategories,
.smile-listing #js-product-list-header .block-category {
  display: none;
}

/* Hide at_nova "subcategory-block" outer markup if it leaks (we render our own pills) */
.smile-listing #subcategories { display: none !important; }

/* === Smile breadcrumb (clean Claude style) === */
.smile-breadcrumb {
  padding: 24px 0 0;
  background: var(--bg);
}
.smile-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-3);
}
.smile-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.smile-breadcrumb a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color .15s ease;
}
.smile-breadcrumb a:hover { color: var(--ink); }
.smile-breadcrumb .sep { color: var(--ink-3); }
.smile-breadcrumb [aria-current=page] { color: var(--ink); font-weight: 500; }

/* Hide at_nova breadcrumb banner remnants and filter sidebars */
.box-breadcrumb,
.category-cover.hidden-sm-down,
.image-breadcrumb,
#js-product-list-header .block-category { display: none !important; }

/* Make sure listing main area takes full width even if layout file still has side-column scaffolding */
#content-wrapper, #wrapper > .container > .row, #wrapper > .container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }

/* === Defensive overrides for cat-hero (prevent at_nova text-align/font collapse) === */
.cat-hero, .cat-hero * { text-align: left !important; }
.cat-h1 {
  text-transform: none !important;
  font-family: var(--f-display) !important;
  font-size: clamp(40px, 5.5vw, 72px) !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.02em !important;
}
.cat-hero-inner { min-height: 360px; }
.cat-hero-img { min-height: 360px; }
.cat-hero-img img { object-position: center; }

/* Force grid layout reset (overrides at_nova .row/.col leakage) */
.cat-hero-inner.cat-hero-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 860px) {
  .cat-hero-inner.cat-hero-inner { grid-template-columns: 1fr !important; gap: 24px !important; }
  .cat-hero-img { aspect-ratio: 16/9 !important; order: -1 !important; min-height: 0 !important; }
  .cat-hero-inner { min-height: 0 !important; }
}

/* === Category sibling pills (inside hero) === */
.cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  transition: all .15s var(--ease);
  white-space: nowrap;
}
.cat-pill:not(.is-current) { color: var(--ink-2); }
.cat-pill:hover {
  background: var(--ink);
  color: #fff;
}
.cat-pill.is-current {
  background: var(--ink);
  color: #fff;
  cursor: default;
  pointer-events: none;
}


/* === Smile V2 — Category page filter sidebar (Claude Design) === */

.smile-listing-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: start;
  padding-top: 40px;
}
@media (max-width: 960px) {
  .smile-listing-grid { grid-template-columns: 1fr; gap: 24px; }
  .smile-filters { order: -1; }
}

/* Sidebar container */
.smile-filters {
  font-family: var(--f-body);
  color: var(--ink);
  position: sticky;
  top: 16px;
}

/* Hide the "Categorías" block + "Filtrar por" header (we have pills in hero already) */
.smile-filters .block-categories { display: none; }
.smile-filters > p.text-uppercase { display: none; }
.smile-filters #search_filter_controls { display: none; }
.smile-filters .title.hidden-md-up { display: none; }

/* Facet section */
.smile-filters .facet {
  padding: 20px 0;
  border-bottom: 1px solid var(--line-2);
}
.smile-filters .facet:last-child { border-bottom: 0; }
.smile-filters .facet-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
}
.smile-filters .facet ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.smile-filters .facet li { margin: 0 0 8px; }
.smile-filters .facet-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
}
.smile-filters .facet-label:hover { color: var(--ink); }
.smile-filters .facet-label a {
  color: inherit;
  text-decoration: none;
  flex: 1;
}
.smile-filters .magnitude {
  font-size: 11px;
  color: var(--ink-3);
  margin-left: 4px;
}

/* Custom checkbox/radio */
.smile-filters .custom-checkbox {
  position: relative;
  display: inline-flex;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  flex-shrink: 0;
}
.smile-filters .custom-checkbox input[type=checkbox],
.smile-filters .custom-checkbox input[type=radio] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.smile-filters .ps-shown-by-js {
  display: none !important;
}
.smile-filters .custom-checkbox input:checked ~ .ps-shown-by-js,
.smile-filters .custom-checkbox:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
}
.smile-filters .checkbox-checked { display: none; color: #fff; font-size: 14px; line-height: 1; }
.smile-filters .custom-checkbox input:checked ~ span .checkbox-checked,
.smile-filters .custom-checkbox:has(input:checked) .checkbox-checked { display: block; position: absolute; top: 0; left: 0; }

/* Color swatch facet — convert "VESTIDOS"-style labels to color dots if data-color is set */
.smile-filters .facet-color .facet-label {
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.smile-filters .facet-color ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.smile-filters .facet-color li { margin: 0; }
.smile-filters .facet-color .custom-checkbox {
  width: 28px; height: 28px; border-radius: 50%;
}

/* Size filter — pills */
.smile-filters .facet[data-name="Talla"] ul,
.smile-filters .facet[data-name="talla"] ul,
.smile-filters .facet[data-name="Tamaño"] ul {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.smile-filters .facet[data-name="Talla"] li,
.smile-filters .facet[data-name="talla"] li,
.smile-filters .facet[data-name="Tamaño"] li { margin: 0; }
.smile-filters .facet[data-name="Talla"] .facet-label,
.smile-filters .facet[data-name="talla"] .facet-label,
.smile-filters .facet[data-name="Tamaño"] .facet-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  gap: 0;
}
.smile-filters .facet[data-name="Talla"] .facet-label:hover,
.smile-filters .facet[data-name="talla"] .facet-label:hover,
.smile-filters .facet[data-name="Tamaño"] .facet-label:hover { border-color: var(--ink); color: var(--ink); }
.smile-filters .facet[data-name="Talla"] .custom-checkbox,
.smile-filters .facet[data-name="talla"] .custom-checkbox,
.smile-filters .facet[data-name="Tamaño"] .custom-checkbox { display: none; }
.smile-filters .facet[data-name="Talla"] .magnitude,
.smile-filters .facet[data-name="talla"] .magnitude,
.smile-filters .facet[data-name="Tamaño"] .magnitude { display: none; }

/* Price slider */
.smile-filters .ui-slider {
  position: relative;
  height: 2px;
  background: var(--line);
  border-radius: 999px;
  margin: 16px 4px;
}
.smile-filters .ui-slider .ui-slider-range {
  position: absolute;
  height: 100%;
  background: var(--burgundy);
  border-radius: 999px;
}
.smile-filters .ui-slider .ui-slider-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: var(--burgundy);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.smile-filters .faceted-slider .text-center {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 4px;
}

/* Hide PrestaShop's "OK" button on mobile filters */
.smile-filters .clear-top, .smile-filters .ok { display: none; }

/* === Hide legacy at_nova left column (we render filters in .smile-filters inside our grid) === */
#left-column,
#left-column .block-categories,
.layout-left-column #left-column { display: none !important; }

/* When left column is hidden, ensure content-wrapper takes full width */
#content-wrapper.left-column,
#content-wrapper.col-md-8,
#content-wrapper.col-lg-9,
.col-md-8.col-lg-9 { width: 100% !important; max-width: none !important; flex: 1 !important; }

/* === Smile V2 — Filter sidebar refinement (Claude palette, no at_nova styles) === */

/* Reset PrestaShop's chunky checkbox to a clean Claude style */
.smile-filters .custom-checkbox {
  position: relative;
  display: inline-flex;
  width: 18px;
  height: 18px;
  margin: 0;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 3px;
  flex-shrink: 0;
  transition: border-color .15s var(--ease), background .15s var(--ease);
  cursor: pointer;
  overflow: hidden;
}
.smile-filters .facet-label:hover .custom-checkbox { border-color: var(--ink-2); }
.smile-filters .custom-checkbox input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer; margin: 0;
}
/* The visible mark (PS wraps in .ps-shown-by-js > i.checkbox-checked) */
.smile-filters .custom-checkbox .ps-shown-by-js {
  display: none !important;
}
.smile-filters .custom-checkbox::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 10px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: translate(-50%, -60%) rotate(45deg) scale(0);
  transition: transform .15s var(--ease);
  pointer-events: none;
}
.smile-filters .custom-checkbox:has(input:checked) {
  background: var(--burgundy);
  border-color: var(--burgundy);
}
.smile-filters .custom-checkbox:has(input:checked)::after {
  transform: translate(-50%, -60%) rotate(45deg) scale(1);
}

/* Radio variant (same idea, round) */
.smile-filters .custom-radio {
  position: relative;
  display: inline-flex;
  width: 18px;
  height: 18px;
  margin: 0;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 50%;
  flex-shrink: 0;
  transition: border-color .15s var(--ease), background .15s var(--ease);
  cursor: pointer;
}
.smile-filters .custom-radio input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer; margin: 0;
}
.smile-filters .custom-radio::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .15s var(--ease);
  pointer-events: none;
}
.smile-filters .custom-radio:has(input:checked) {
  background: var(--burgundy);
  border-color: var(--burgundy);
}
.smile-filters .custom-radio:has(input:checked)::after {
  transform: translate(-50%, -50%) scale(1);
}

/* Loading state for product grid during AJAX */
#js-product-list { transition: opacity .2s ease; }
#js-product-list.is-loading {
  opacity: 0.45;
  pointer-events: none;
  position: relative;
}
#js-product-list.is-loading::after {
  content: '';
  position: absolute;
  top: 80px; left: 50%; transform: translateX(-50%);
  width: 32px; height: 32px;
  border: 3px solid var(--line);
  border-top-color: var(--burgundy);
  border-radius: 50%;
  animation: smile-spin 0.7s linear infinite;
  z-index: 10;
}

/* Hide PrestaShop's "Filtrar por" header and any leftover at_nova cruft inside .smile-filters */
.smile-filters > p.text-uppercase,
.smile-filters .h6.text-uppercase,
.smile-filters .clear-top,
.smile-filters .ok,
.smile-filters #search_filter_controls { display: none !important; }

/* === Smile V2 — Filter sidebar v3 (Claude reference exact match) === */

/* Sidebar baseline tweaks */
.smile-filters .facet {
  padding: 24px 0;
  border-bottom: 1px solid var(--line-2);
}
.smile-filters .facet:last-child { border-bottom: 0; }
.smile-filters .facet-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
}
.smile-filters .facet ul { list-style: none; padding: 0; margin: 0; }
.smile-filters .magnitude { display: none; } /* hide (N) counts per Claude design */

/* Hide the "Categorías" facet entirely (pills in hero already cover it) */
.smile-filters [data-facet-key="categorias"] { display: none !important; }

/* Hide noisy attribute groups that aren't relevant for boutique browsing */
.smile-filters [data-facet-key="composicion"],
.smile-filters [data-facet-key="caracteristicas"] { display: none !important; }

/* removed: legacy v3 color block (lines 2831-2882, 2026-06-01 cleanup) */
/* ============= TALLA — squared white pills with outline ============= */
.smile-filters [data-facet-key="talla"] ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.smile-filters [data-facet-key="talla"] li { margin: 0; }
.smile-filters [data-facet-key="talla"] .facet-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all .15s var(--ease);
  gap: 0;
}
.smile-filters [data-facet-key="talla"] .facet-label:hover {
  border-color: var(--ink);
}
.smile-filters [data-facet-key="talla"] .custom-checkbox { display: none; }
.smile-filters [data-facet-key="talla"] .facet-label a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.smile-filters [data-facet-key="talla"] li:has(input:checked) .facet-label,
.smile-filters [data-facet-key="talla"] .facet-label:has(input:checked) {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* ============= PRECIO — single line label + slider ============= */
.smile-filters [data-facet-key="precio"] .faceted-slider,
.smile-filters [data-facet-key="precio"] .ui-slider-horizontal {
  margin: 8px 4px 12px;
}
.smile-filters [data-facet-key="precio"] .ui-slider {
  height: 2px;
  background: var(--line);
  border-radius: 999px;
  position: relative;
}
.smile-filters [data-facet-key="precio"] .ui-slider-range {
  position: absolute;
  height: 100%;
  background: var(--burgundy);
  border-radius: 999px;
}
.smile-filters [data-facet-key="precio"] .ui-slider-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  background: var(--burgundy);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.smile-filters [data-facet-key="precio"] .text-center,
.smile-filters [data-facet-key="precio"] .faceted-slider > p:not(.facet-title) {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-2);
  padding: 0 4px;
  margin: 8px 0 0;
}

/* Count "8 vestidos" at top of sidebar — we'll synthesize via JS too (the toolbar count exists in top area, but the user wants it inside sidebar). For now, hide the at_nova "Filtrar por" text. */
.smile-filters > p.text-uppercase,
.smile-filters #search_filter_controls,
.smile-filters .clear-top,
.smile-filters .ok { display: none !important; }

/* === Smile V2 — Filter sidebar v4 (server-side data-facet-key, clean Claude design) === */

/* Order: COLOR first, then TALLA, then PRECIO, then everything else */
.smile-filters #search_filters { display: flex; flex-direction: column; }
.smile-filters [data-facet-key="color"]  { order: 1; }
.smile-filters [data-facet-key="talla"]  { order: 2; }
.smile-filters [data-facet-key="tamano"] { order: 2; }
.smile-filters [data-facet-key="precio"] { order: 3; }
.smile-filters [data-facet-key="largo"]  { order: 4; }

/* Hide categories/composicion/caracteristicas */
.smile-filters [data-facet-key="categorias"],
.smile-filters [data-facet-key="composicion"],
.smile-filters [data-facet-key="caracteristicas"] { display: none !important; }

/* removed: legacy v4 color block (lines 2984-3038, 2026-06-01 cleanup) */
/* ============ TALLA — squared pills row ============ */
.smile-filters [data-facet-key="talla"] .facet-list,
.smile-filters [data-facet-key="tamano"] .facet-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.smile-filters [data-facet-key="talla"] .facet-item,
.smile-filters [data-facet-key="tamano"] .facet-item { margin: 0; padding: 0; flex: 0 0 auto; }
.smile-filters [data-facet-key="talla"] .facet-label,
.smile-filters [data-facet-key="tamano"] .facet-label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all .15s var(--ease);
  flex-direction: row !important;
  gap: 0 !important;
  position: relative;
}
.smile-filters [data-facet-key="talla"] .facet-label:hover,
.smile-filters [data-facet-key="tamano"] .facet-label:hover { border-color: var(--ink); }
.smile-filters [data-facet-key="talla"] .custom-checkbox,
.smile-filters [data-facet-key="tamano"] .custom-checkbox { display: none; }
.smile-filters [data-facet-key="talla"] .search-link,
.smile-filters [data-facet-key="tamano"] .search-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.smile-filters [data-facet-key="talla"] .magnitude,
.smile-filters [data-facet-key="tamano"] .magnitude { display: none; }
.smile-filters [data-facet-key="talla"] .facet-item.is-active .facet-label,
.smile-filters [data-facet-key="tamano"] .facet-item.is-active .facet-label,
.smile-filters [data-facet-key="talla"] .facet-label:has(input:checked),
.smile-filters [data-facet-key="tamano"] .facet-label:has(input:checked) {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* ============ PRECIO ============ */
.smile-filters [data-facet-key="precio"] .ui-slider {
  height: 2px;
  background: var(--line);
  border-radius: 999px;
  position: relative;
  margin: 16px 6px;
}
.smile-filters [data-facet-key="precio"] .ui-slider-range {
  position: absolute; height: 100%;
  background: var(--burgundy);
  border-radius: 999px;
}
.smile-filters [data-facet-key="precio"] .ui-slider-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  background: var(--burgundy);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  cursor: pointer;
}

/* Clear-all button */
.smile-clear-all { margin-bottom: 8px; }
.smile-clear-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.smile-clear-btn:hover {
  border-color: var(--burgundy);
  color: var(--burgundy);
}

/* Remove any leftover at_nova noise */
.smile-filters > p.text-uppercase,
.smile-filters #search_filter_controls,
.smile-filters .title.hidden-md-up,
.smile-filters .clear-top,
.smile-filters .ok { display: none !important; }

/* ============================================================
   Smile V2 — Filter sidebar v5 (defensive, !important to defeat
   leftover at_nova / PrestaShop default rules)
   ============================================================ */

/* Reset PrestaShop's default checkbox styling we don't want */
.smile-filters .custom-checkbox input,
.smile-filters .custom-radio input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  z-index: 2 !important;
}
.smile-filters .ps-shown-by-js,
.smile-filters .checkbox-checked { display: none !important; }
/* removed: legacy v5 color + global magnitude:none (lines 3161-3233, 2026-06-01 cleanup) */
/* ============ TALLA — squared pills row ============ */
.smile-filters [data-facet-key="talla"] .facet-list,
.smile-filters [data-facet-key="tamano"] .facet-list,
.smile-filters [data-facet-key="size"] .facet-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.smile-filters [data-facet-key="talla"] .facet-item,
.smile-filters [data-facet-key="tamano"] .facet-item,
.smile-filters [data-facet-key="size"] .facet-item {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  display: block !important;
  width: auto !important;
}
.smile-filters [data-facet-key="talla"] .facet-label,
.smile-filters [data-facet-key="tamano"] .facet-label,
.smile-filters [data-facet-key="size"] .facet-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  width: auto !important;
  height: 44px !important;
  padding: 0 12px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 6px !important;
  background: var(--surface) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  transition: all .15s var(--ease);
  flex-direction: row !important;
  gap: 0 !important;
  margin: 0 !important;
  position: relative !important;
}
.smile-filters [data-facet-key="talla"] .facet-label:hover,
.smile-filters [data-facet-key="tamano"] .facet-label:hover,
.smile-filters [data-facet-key="size"] .facet-label:hover { border-color: var(--ink) !important; }
.smile-filters [data-facet-key="talla"] .custom-checkbox,
.smile-filters [data-facet-key="tamano"] .custom-checkbox,
.smile-filters [data-facet-key="size"] .custom-checkbox { display: none !important; }
.smile-filters [data-facet-key="talla"] .search-link,
.smile-filters [data-facet-key="tamano"] .search-link,
.smile-filters [data-facet-key="size"] .search-link {
  color: inherit !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.smile-filters [data-facet-key="talla"] .facet-item.is-active .facet-label,
.smile-filters [data-facet-key="tamano"] .facet-item.is-active .facet-label,
.smile-filters [data-facet-key="size"] .facet-item.is-active .facet-label {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}

/* ============================================================
   Smile V2 — Filter sidebar v6 (vertical color list with search + show more)
   ============================================================ */

/* Color search input (injected by JS) */
.smile-color-search {
  position: relative;
  margin-bottom: 12px;
}
.smile-color-search input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
  color: var(--ink);
  font-family: var(--f-body);
}
.smile-color-search input:focus {
  outline: none;
  border-color: var(--burgundy);
}
.smile-color-search::before {
  content: '';
  position: absolute;
  top: 50%; left: 12px;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A928B' stroke-width='2'><circle cx='11' cy='11' r='8'/><path d='M21 21l-4.35-4.35'/></svg>") no-repeat center / contain;
}

/* removed: legacy v6 color block (lines 3333-3441, 2026-06-01 cleanup) */
/* ============================================================
   Smile V2 — Defensive fixes v7 (double-circle, missing talla)
   ============================================================ */

/* Force-hide the native checkbox/radio AND any indicator span we don't want */
.smile-filters .custom-checkbox > input[type="checkbox"],
.smile-filters .custom-radio > input[type="radio"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  z-index: 2 !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* Reset ANY browser default styles that may leak through */
.smile-filters .custom-checkbox::before,
.smile-filters .custom-checkbox::after { content: none !important; }

/* Color: ONLY the .color-dot is visible (no outer ring, no input) */
.smile-filters [data-facet-key="color"] .custom-checkbox {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.smile-filters [data-facet-key="color"] .custom-checkbox::before,
.smile-filters [data-facet-key="color"] .custom-checkbox::after {
  content: none !important;
}

/* Talla: ensure visible (force display & layout) */
.smile-filters [data-facet-key="talla"],
.smile-filters [data-facet-key="tamano"],
.smile-filters [data-facet-key="size"] {
  display: block !important;
}
.smile-filters [data-facet-key="talla"] .facet-list,
.smile-filters [data-facet-key="tamano"] .facet-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

/* ============================================================
   Smile V2 — Price slider (native range, styled Claude)
   ============================================================ */

.smile-filters [data-facet-key="precio"] .facet-slider-label {
  display: none !important; /* Hide PS's default range text, our own labels handle it */
}

.smile-slider {
  padding: 12px 6px 4px;
}
.smile-slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--line);
  border-radius: 999px;
  outline: none;
  margin: 0 0 12px;
  cursor: pointer;
}
/* WebKit thumb */
.smile-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  background: var(--burgundy);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  cursor: pointer;
  transition: transform .15s var(--ease);
}
.smile-slider-input::-webkit-slider-thumb:hover { transform: scale(1.15); }
/* Firefox thumb */
.smile-slider-input::-moz-range-thumb {
  width: 14px; height: 14px;
  background: var(--burgundy);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  cursor: pointer;
}
.smile-slider-input::-moz-range-track {
  height: 2px;
  background: var(--line);
  border-radius: 999px;
}
.smile-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-2);
  padding: 0 2px;
}
.smile-slider-max { font-weight: 500; color: var(--ink); }

/* ============================================================
   Smile V2 — Active filter chips fix (material-icons replacement)
   ============================================================ */

/* Title "Filtros activos" */
.smile-active-filters .active-filter-title,
.smile-active-filters h1.h6 {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
  padding: 0;
}

/* The chip container itself */
.smile-active-filters ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* === removed: legacy chip + material-icons-hide rules (replaced by tail v2 chip-link block) === */


/* "Clear all" link if present */
.smile-active-filters .js-clear-all-link {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: var(--burgundy);
  text-decoration: underline;
}

/* === removed: legacy v2 chip CSS (burgundy pill + invisible overlay) — see end of file === */

/* ============================================================
   Smile V2 — Smooth nav transitions (cat pills full-page swap)
   ============================================================ */

section.smile-listing {
  transition: opacity .18s var(--ease, ease-out);
  will-change: opacity;
}
section.smile-listing.smile-nav-leaving {
  opacity: 0.35;
  pointer-events: none;
}
section.smile-listing.smile-nav-entering {
  opacity: 0;
  transform: translateY(6px);
  transition: none;
}

/* Pill hover affordance — subtle lift */
.cat-pill {
  transition: background .15s var(--ease, ease-out), color .15s var(--ease, ease-out), transform .15s var(--ease, ease-out), border-color .15s var(--ease, ease-out);
}
.cat-pill:hover {
  transform: translateY(-1px);
}
.cat-pill:active {
  transform: translateY(0);
}

/* ============================================================
   Smile V2 — Tight spacing between cat-header and listing grid
   ============================================================ */

.smile-listing > .section {
  padding: 24px 0 64px !important;
}
.smile-listing-grid {
  padding-top: 0 !important;
}
@media (max-width: 720px) {
  .smile-listing > .section { padding: 16px 0 48px !important; }
}

/* ============================================================
   Smile V2 — Tighter spacing v2 (less air below hero/pills)
   ============================================================ */

.cat-hero {
  padding: 56px 0 24px !important;
}
.cat-pills {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}
.smile-listing > .section {
  padding: 16px 0 56px !important;
}
.smile-listing-grid { padding-top: 0 !important; }
#js-product-list-top { margin-top: 0 !important; padding-top: 0 !important; }

@media (max-width: 720px) {
  .cat-hero { padding: 36px 0 16px !important; }
  .smile-listing > .section { padding: 12px 0 40px !important; }
}

/* ============================================================
   Smile V2 — Sort dropdown polish (a11y label + select override)
   ============================================================ */

/* a11y-only label (was leaking "Sort by" text into the page) */
.visually-hidden,
.smile-toolbar-sort .visually-hidden {
  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;
}

/* Visible "Ordenar por" affordance before the select */
.smile-toolbar-sort::before {
  content: "Ordenar por";
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Force Claude styling on the sort select (override theme bundle) */
.smile-toolbar-sort select,
select.smile-select,
.smile-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding: 10px 38px 10px 14px !important;
  font-family: var(--f-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%232B2826' stroke-width='1.6'><path d='M1 1l4 4 4-4'/></svg>") no-repeat right 14px center !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  min-width: 220px !important;
  height: auto !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
  transition: border-color .15s var(--ease, ease-out), background-color .15s var(--ease, ease-out) !important;
}
.smile-toolbar-sort select:hover,
.smile-select:hover {
  border-color: var(--ink) !important;
}
.smile-toolbar-sort select:focus,
.smile-select:focus {
  outline: 0 !important;
  border-color: var(--burgundy) !important;
}

/* ============================================================
   Smile V2 — Product card fix (override bundle .product-meta float)
   ============================================================ */

.products-grid .product-miniature .product-meta,
.smile-products .product-miniature .product-meta {
  float: none !important;
  width: 100% !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

.products-grid .product-miniature .product-description,
.smile-products .product-miniature .product-description {
  display: block !important;
  width: 100% !important;
  float: none !important;
  padding: 14px 0 0 !important;
  margin: 0 !important;
  text-align: left !important;
  background: transparent !important;
}

/* Force title visible + correct typo */
.products-grid .product-miniature .product-title,
.smile-products .product-miniature .product-title,
.products-grid .product-miniature h2.product-title,
.products-grid .product-miniature h3.product-title {
  display: block !important;
  visibility: visible !important;
  font-family: var(--f-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: var(--ink) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.products-grid .product-miniature .product-title a,
.smile-products .product-miniature .product-title a {
  color: var(--ink) !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}
.products-grid .product-miniature .product-title a:hover { color: var(--burgundy) !important; }

/* Price */
.products-grid .product-miniature .product-price-and-shipping,
.smile-products .product-miniature .product-price-and-shipping {
  display: block !important;
  margin: 0 !important;
}
.products-grid .product-miniature .product-price-and-shipping .price,
.smile-products .product-miniature .product-price-and-shipping .price,
.products-grid .product-miniature .price {
  display: inline-block !important;
  font-family: var(--f-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--burgundy) !important;
}

/* Hide noise that doesn't belong on the listing card */
.products-grid .product-miniature .leo-list-product-reviews,
.products-grid .product-miniature .product-list-reviews,
.products-grid .product-miniature .product-description-short,
.smile-products .product-miniature .leo-list-product-reviews,
.smile-products .product-miniature .product-list-reviews,
.smile-products .product-miniature .product-description-short { display: none !important; }

/* Variant color dots row */
.products-grid .product-miniature .highlighted-informations,
.smile-products .product-miniature .highlighted-informations {
  display: block !important;
  position: static !important;
  background: transparent !important;
  border: 0 !important;
  padding: 8px 0 0 !important;
  margin: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  height: auto !important;
}
.products-grid .product-miniature .variant-links,
.smile-products .product-miniature .variant-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center !important;
}
.products-grid .product-miniature .variant-links a.color,
.smile-products .product-miniature .variant-links a.color {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 1px solid var(--line) !important;
  margin: 0 !important;
}

/* ============================================================
   Smile V2 — Product card redesign (Claude Design target)
   ============================================================ */

/* Card = no border, no padding, image is the canvas */
.products-grid .product-miniature,
.smile-products .product-miniature,
.smile-listing .smile-products .product-miniature {
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.products-grid .product-miniature:hover,
.smile-products .product-miniature:hover {
  border: 0 !important;
}

/* Image area: rounded, filling container */
.products-grid .product-miniature .thumbnail-container,
.smile-products .product-miniature .thumbnail-container {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3/4 !important;
  background: var(--surface-2) !important;
  border-radius: 14px !important;
  border: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.products-grid .product-miniature .thumbnail-container .product-image,
.smile-products .product-miniature .thumbnail-container .product-image,
.products-grid .product-miniature .thumbnail-container > a,
.smile-products .product-miniature .thumbnail-container > a,
.products-grid .product-miniature .product-thumbnail,
.smile-products .product-miniature .product-thumbnail {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.products-grid .product-miniature img.img-fluid,
.smile-products .product-miniature img.img-fluid,
.products-grid .product-miniature .product-image img,
.smile-products .product-miniature .product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .6s var(--ease, ease-out) !important;
}
.products-grid .product-miniature:hover img.img-fluid,
.smile-products .product-miniature:hover img.img-fluid {
  transform: scale(1.04);
}

/* === Flags overlay (NUEVO, -16%, MÁS VENDIDO) === */
.products-grid .product-miniature .product-flags,
.smile-products .product-miniature .product-flags {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
.products-grid .product-miniature .product-flag,
.smile-products .product-miniature .product-flag,
.products-grid .product-miniature .product-flags li,
.smile-products .product-miniature .product-flags li {
  display: inline-block !important;
  padding: 5px 10px !important;
  font-family: var(--f-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
/* NEW = tan/brown */
.products-grid .product-miniature .product-flag.new,
.smile-products .product-miniature .product-flag.new,
.products-grid .product-miniature .product-flag.online-only,
.smile-products .product-miniature .product-flag.online-only {
  background: #b08d68 !important;
  color: #fff !important;
}
/* DISCOUNT = burgundy */
.products-grid .product-miniature .product-flag.discount,
.smile-products .product-miniature .product-flag.discount,
.products-grid .product-miniature .product-flag.discount-percentage,
.smile-products .product-miniature .product-flag.discount-percentage,
.products-grid .product-miniature .product-flag.discount-amount,
.smile-products .product-miniature .product-flag.discount-amount,
.products-grid .product-miniature .product-flag.on-sale,
.smile-products .product-miniature .product-flag.on-sale {
  background: var(--burgundy) !important;
  color: #fff !important;
}
/* BEST SELLER / blush */
.products-grid .product-miniature .product-flag.best-seller,
.smile-products .product-miniature .product-flag.best-seller,
.products-grid .product-miniature .product-flag.popular,
.smile-products .product-miniature .product-flag.popular {
  background: #f3d6d8 !important;
  color: var(--ink) !important;
}
/* PACK / default fallback */
.products-grid .product-miniature .product-flag.pack,
.smile-products .product-miniature .product-flag.pack {
  background: var(--ink) !important;
  color: #fff !important;
}

/* === Wishlist heart (top-right) === */
.products-grid .product-miniature .functional-buttons,
.smile-products .product-miniature .functional-buttons {
  display: block !important;
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  background: transparent !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Hide everything inside functional-buttons except wishlist */
.products-grid .product-miniature .functional-buttons > *,
.smile-products .product-miniature .functional-buttons > * { display: none !important; }
.products-grid .product-miniature .functional-buttons .leo-wishlist-button,
.smile-products .product-miniature .functional-buttons .leo-wishlist-button,
.products-grid .product-miniature .leo-wishlist-button,
.smile-products .product-miniature .leo-wishlist-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  color: var(--ink) !important;
  border: 0 !important;
  text-decoration: none !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: transform .15s var(--ease, ease-out), color .15s !important;
}
.products-grid .product-miniature .leo-wishlist-button:hover,
.smile-products .product-miniature .leo-wishlist-button:hover {
  transform: scale(1.08);
  color: var(--burgundy) !important;
}
.products-grid .product-miniature .leo-wishlist-button i,
.smile-products .product-miniature .leo-wishlist-button i {
  font-size: 16px !important;
}
.products-grid .product-miniature .leo-wishlist-button .leo-wishlist-bt-content::before,
.smile-products .product-miniature .leo-wishlist-button .leo-wishlist-bt-content::before {
  content: "♡";
  font-size: 18px;
  line-height: 1;
}
.products-grid .product-miniature .leo-wishlist-button.added .leo-wishlist-bt-content::before,
.smile-products .product-miniature .leo-wishlist-button.added .leo-wishlist-bt-content::before {
  content: "♥";
  color: var(--burgundy);
}

/* === Below-image content (name + price + colors) === */
.products-grid .product-miniature .product-meta,
.smile-products .product-miniature .product-meta {
  padding: 14px 4px 0 !important;
}
.products-grid .product-miniature .product-description,
.smile-products .product-miniature .product-description {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  row-gap: 4px !important;
  align-items: start !important;
  padding: 0 !important;
}
.products-grid .product-miniature .product-title,
.smile-products .product-miniature .product-title {
  grid-column: 1 !important;
  grid-row: 1 !important;
  font-family: var(--f-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
.products-grid .product-miniature .product-price-and-shipping,
.smile-products .product-miniature .product-price-and-shipping {
  grid-column: 1 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}
.products-grid .product-miniature .product-price-and-shipping .price,
.smile-products .product-miniature .product-price-and-shipping .price {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}
.products-grid .product-miniature .product-price-and-shipping .regular-price,
.smile-products .product-miniature .product-price-and-shipping .regular-price {
  font-size: 14px !important;
  color: var(--ink-3) !important;
  text-decoration: line-through !important;
}

/* Color dots in their own corner */
.products-grid .product-miniature .highlighted-informations,
.smile-products .product-miniature .highlighted-informations {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  align-self: end !important;
  padding: 0 !important;
  position: static !important;
}
.products-grid .product-miniature .variant-links,
.smile-products .product-miniature .variant-links {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}
.products-grid .product-miniature .variant-links a.color,
.smile-products .product-miniature .variant-links a.color {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.products-grid .product-miniature .variant-links .count,
.smile-products .product-miniature .variant-links .count { display: none !important; }

/* Hide reviews/desc on cards */
.products-grid .product-miniature .leo-list-product-reviews,
.products-grid .product-miniature .product-list-reviews,
.products-grid .product-miniature .product-description-short,
.smile-products .product-miniature .leo-list-product-reviews,
.smile-products .product-miniature .product-list-reviews,
.smile-products .product-miniature .product-description-short { display: none !important; }

/* Hover lift */
.products-grid .product-miniature .thumbnail-container,
.smile-products .product-miniature .thumbnail-container {
  transition: box-shadow .2s var(--ease, ease-out);
}
.products-grid .product-miniature:hover .thumbnail-container,
.smile-products .product-miniature:hover .thumbnail-container {
  box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}

/* ============================================================
   Smile V2 — Product card v3 (corregido: image-only es el clip)
   ============================================================ */

/* Reset wrappers */
.products-grid .product-miniature,
.smile-products .product-miniature {
  position: relative !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.products-grid .product-miniature:hover,
.smile-products .product-miniature:hover { border: 0 !important; }

/* thumbnail-container = layout wrapper (NOT clipping) */
.products-grid .product-miniature .thumbnail-container,
.smile-products .product-miniature .thumbnail-container {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* product-image = THE rounded clipping image (no white bg) */
.products-grid .product-miniature .product-image,
.smile-products .product-miniature .product-image {
  position: relative !important;
  display: block !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3/4 !important;
  background: var(--surface-2) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  transition: box-shadow .2s var(--ease, ease-out) !important;
}
.products-grid .product-miniature:hover .product-image,
.smile-products .product-miniature:hover .product-image {
  box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}
.products-grid .product-miniature .product-image > a,
.smile-products .product-miniature .product-image > a,
.products-grid .product-miniature .thumbnail.product-thumbnail,
.smile-products .product-miniature .thumbnail.product-thumbnail {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.products-grid .product-miniature .product-image img,
.products-grid .product-miniature img.img-fluid,
.smile-products .product-miniature .product-image img,
.smile-products .product-miniature img.img-fluid {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  background: transparent !important;
  transition: transform .6s var(--ease, ease-out) !important;
}
.products-grid .product-miniature:hover .product-image img,
.smile-products .product-miniature:hover .product-image img {
  transform: scale(1.04);
}

/* product-meta = block below image, NEVER floating */
.products-grid .product-miniature .product-meta,
.smile-products .product-miniature .product-meta {
  position: static !important;
  float: none !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  margin: 14px 0 0 !important;
  padding: 0 4px !important;
  background: transparent !important;
  border: 0 !important;
}
.products-grid .product-miniature .product-description,
.smile-products .product-miniature .product-description {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  row-gap: 4px !important;
  align-items: start !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  float: none !important;
}

/* Title */
.products-grid .product-miniature .product-title,
.smile-products .product-miniature .product-title,
.products-grid .product-miniature h2.product-title,
.products-grid .product-miniature h3.product-title {
  display: block !important;
  visibility: visible !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  font-family: var(--f-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.products-grid .product-miniature .product-title a,
.smile-products .product-miniature .product-title a {
  color: var(--ink) !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}
.products-grid .product-miniature .product-title a:hover,
.smile-products .product-miniature .product-title a:hover {
  color: var(--burgundy) !important;
}

/* Price */
.products-grid .product-miniature .product-price-and-shipping,
.smile-products .product-miniature .product-price-and-shipping {
  display: flex !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.products-grid .product-miniature .product-price-and-shipping .price,
.smile-products .product-miniature .product-price-and-shipping .price,
.products-grid .product-miniature .price {
  display: inline-block !important;
  font-family: var(--f-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}
.products-grid .product-miniature .regular-price,
.smile-products .product-miniature .regular-price {
  font-size: 14px !important;
  color: var(--ink-3) !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
}
.products-grid .product-miniature .discount-percentage,
.products-grid .product-miniature .discount-amount,
.smile-products .product-miniature .discount-percentage,
.smile-products .product-miniature .discount-amount { display: none !important; }

/* highlighted-informations = inline grid cell with color dots (NOT absolute) */
.products-grid .product-miniature .highlighted-informations,
.smile-products .product-miniature .highlighted-informations {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  align-self: end !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  z-index: auto !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
.products-grid .product-miniature .variant-links,
.smile-products .product-miniature .variant-links {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
.products-grid .product-miniature .variant-links a.color,
.smile-products .product-miniature .variant-links a.color {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  position: static !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}
.products-grid .product-miniature .variant-links .count,
.smile-products .product-miniature .variant-links .count { display: none !important; }

/* Flags overlay top-left of image */
.products-grid .product-miniature .product-flags,
.smile-products .product-miniature .product-flags {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
.products-grid .product-miniature .product-flag,
.smile-products .product-miniature .product-flag,
.products-grid .product-miniature .product-flags li,
.smile-products .product-miniature .product-flags li {
  display: inline-block !important;
  padding: 5px 10px !important;
  font-family: var(--f-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.products-grid .product-miniature .product-flag.new,
.smile-products .product-miniature .product-flag.new,
.products-grid .product-miniature .product-flag.online-only,
.smile-products .product-miniature .product-flag.online-only {
  background: #b08d68 !important;
  color: #fff !important;
}
.products-grid .product-miniature .product-flag.discount,
.products-grid .product-miniature .product-flag.discount-percentage,
.products-grid .product-miniature .product-flag.discount-amount,
.products-grid .product-miniature .product-flag.on-sale,
.smile-products .product-miniature .product-flag.discount,
.smile-products .product-miniature .product-flag.discount-percentage,
.smile-products .product-miniature .product-flag.discount-amount,
.smile-products .product-miniature .product-flag.on-sale {
  background: var(--burgundy) !important;
  color: #fff !important;
}
.products-grid .product-miniature .product-flag.best-seller,
.products-grid .product-miniature .product-flag.popular,
.smile-products .product-miniature .product-flag.best-seller,
.smile-products .product-miniature .product-flag.popular {
  background: #f3d6d8 !important;
  color: var(--ink) !important;
}

/* Wishlist heart top-right of image (Leo button) */
.products-grid .product-miniature .functional-buttons,
.smile-products .product-miniature .functional-buttons {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  display: block !important;
  background: transparent !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}
.products-grid .product-miniature .functional-buttons > *,
.smile-products .product-miniature .functional-buttons > * { display: none !important; }
.products-grid .product-miniature .leo-wishlist-button,
.smile-products .product-miniature .leo-wishlist-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  color: var(--ink) !important;
  border: 0 !important;
  position: static !important;
}
.products-grid .product-miniature .leo-wishlist-button:hover,
.smile-products .product-miniature .leo-wishlist-button:hover {
  transform: scale(1.08);
  color: var(--burgundy) !important;
}

/* Hide noise on cards */
.products-grid .product-miniature .leo-list-product-reviews,
.products-grid .product-miniature .product-list-reviews,
.products-grid .product-miniature .product-description-short,
.smile-products .product-miniature .leo-list-product-reviews,
.smile-products .product-miniature .product-list-reviews,
.smile-products .product-miniature .product-description-short { display: none !important; }

/* ============================================================
   Smile V2 — Product card v4 (FORCE flex column stacking)
   ============================================================ */

/* Force thumbnail-container to flex column - kills bundle floats */
.products-grid .product-miniature .thumbnail-container,
.smile-products .product-miniature .thumbnail-container,
.smile-listing .product-miniature .thumbnail-container,
article.product-miniature > .thumbnail-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* product-image: full width, NOT floating, fixed aspect ratio */
.products-grid .product-miniature .thumbnail-container .product-image,
.smile-products .product-miniature .thumbnail-container .product-image,
.thumbnail-container > .product-image,
article.product-miniature .product-image {
  position: relative !important;
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 3/4 !important;
  background: var(--surface-2) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  order: 1 !important;
  transform: none !important;
}

/* The anchor + img inside */
.products-grid .product-miniature .product-image > a,
.smile-products .product-miniature .product-image > a,
.thumbnail-container .product-image > a,
.thumbnail-container .thumbnail.product-thumbnail,
a.thumbnail.product-thumbnail {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  float: none !important;
}
.thumbnail-container .product-image img,
.product-miniature .product-image img,
.product-miniature img.img-fluid {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  max-width: none !important;
  transition: transform .6s var(--ease, ease-out) !important;
}
.product-miniature:hover .product-image img {
  transform: scale(1.04);
}
.product-miniature:hover .product-image {
  box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}

/* product-meta: block below image, full width, NOT floating */
.products-grid .product-miniature .thumbnail-container .product-meta,
.smile-products .product-miniature .thumbnail-container .product-meta,
.thumbnail-container > .product-meta,
article.product-miniature .product-meta {
  position: static !important;
  float: none !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  transform: none !important;
  margin: 14px 0 0 !important;
  padding: 0 4px !important;
  background: transparent !important;
  border: 0 !important;
  order: 2 !important;
}

.product-miniature .product-description {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  row-gap: 4px !important;
  align-items: start !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  float: none !important;
}

/* Title */
.product-miniature .product-title,
.product-miniature h2.product-title,
.product-miniature h3.product-title {
  display: block !important;
  visibility: visible !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  font-family: var(--f-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.product-miniature .product-title a {
  color: var(--ink) !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}
.product-miniature .product-title a:hover { color: var(--burgundy) !important; }

/* Price */
.product-miniature .product-price-and-shipping {
  display: flex !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.product-miniature .product-price-and-shipping .price,
.product-miniature .price {
  display: inline-block !important;
  font-family: var(--f-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}
.product-miniature .regular-price {
  font-size: 14px !important;
  color: var(--ink-3) !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
}
.product-miniature .discount-percentage,
.product-miniature .discount-amount { display: none !important; }

/* highlighted-informations: in-grid cell (NOT absolute), right column */
.product-miniature .highlighted-informations {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  align-self: end !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  z-index: auto !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  min-height: 0 !important;
}
.product-miniature .variant-links {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  position: static !important;
}
.product-miniature .variant-links a.color {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  position: static !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}
.product-miniature .variant-links .count { display: none !important; }

/* Flags overlay top-left of IMAGE (positioned relative to .product-miniature) */
.product-miniature {
  position: relative !important;
}
.product-miniature .product-flags {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
.product-miniature .product-flag,
.product-miniature .product-flags li {
  display: inline-block !important;
  padding: 5px 10px !important;
  font-family: var(--f-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.product-miniature .product-flag.new,
.product-miniature .product-flag.online-only {
  background: #b08d68 !important;
  color: #fff !important;
}
.product-miniature .product-flag.discount,
.product-miniature .product-flag.discount-percentage,
.product-miniature .product-flag.discount-amount,
.product-miniature .product-flag.on-sale {
  background: var(--burgundy) !important;
  color: #fff !important;
}
.product-miniature .product-flag.best-seller,
.product-miniature .product-flag.popular {
  background: #f3d6d8 !important;
  color: var(--ink) !important;
}

/* Wishlist heart top-right */
.product-miniature .functional-buttons {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  display: block !important;
  background: transparent !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  float: none !important;
}
.product-miniature .functional-buttons > * { display: none !important; }
.product-miniature .leo-wishlist-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  color: var(--ink) !important;
  border: 0 !important;
  position: static !important;
}

.product-miniature .leo-list-product-reviews,
.product-miniature .product-list-reviews,
.product-miniature .product-description-short { display: none !important; }

/* ============================================================
   Smile V2 — Product card v5 (nuke white bg + force text styles)
   ============================================================ */

/* Bootstrap .thumbnail bg/border kill (applies to <a class="thumbnail">) */
.product-miniature a.thumbnail,
.product-miniature .thumbnail,
.product-miniature .thumbnail.product-thumbnail,
.product-miniature a.thumbnail.product-thumbnail,
.thumbnail-container .thumbnail,
.thumbnail-container a.thumbnail {
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: none !important;
  max-width: none !important;
  height: 100% !important;
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
}

/* product-thumbnail before pseudo (some themes add overlay) */
.product-miniature .thumbnail::before,
.product-miniature .thumbnail::after,
.product-miniature .product-thumbnail::before,
.product-miniature .product-thumbnail::after { content: none !important; display: none !important; }

/* Make sure the image fills 100% and shows nothing else */
.product-miniature .product-image,
.thumbnail-container .product-image,
article.product-miniature .product-image {
  background: var(--surface-2) !important;
  background-color: var(--surface-2) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* === TEXT (title + price + flags) — super-specific overrides === */

html body .product-miniature .product-title,
html body .product-miniature .product-title a,
html body article.product-miniature h2.product-title,
html body article.product-miniature h2.product-title a,
html body article.product-miniature h3.product-title,
html body article.product-miniature h3.product-title a {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-family: var(--f-body, 'Inter', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--ink, #2B2826) !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body article.product-miniature .product-title a:hover {
  color: var(--burgundy, #6B1822) !important;
}

html body .product-miniature .product-price-and-shipping .price,
html body article.product-miniature .price,
html body article.product-miniature .product-price-and-shipping span[itemprop="price"] {
  font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
  font-family: var(--f-body, 'Inter', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ink, #2B2826) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline !important;
}
html body article.product-miniature .product-price-and-shipping {
  margin: 0 !important;
  padding: 0 !important;
}

/* === FLAGS positioning (escape DOM flow, overlay image) === */
html body article.product-miniature {
  position: relative !important;
}
html body article.product-miniature .product-flags {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 5 !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
}
html body article.product-miniature .product-flags li,
html body article.product-miniature .product-flag {
  display: inline-block !important;
  padding: 5px 10px !important;
  font-family: var(--f-body, 'Inter', sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  list-style: none !important;
  background: #b08d68 !important;  /* default = NEW tan */
  color: #fff !important;
}
html body article.product-miniature .product-flag.discount,
html body article.product-miniature .product-flag.discount-percentage,
html body article.product-miniature .product-flag.discount-amount,
html body article.product-miniature .product-flag.on-sale {
  background: var(--burgundy, #6B1822) !important;
  color: #fff !important;
}
html body article.product-miniature .product-flag.best-seller,
html body article.product-miniature .product-flag.popular {
  background: #f3d6d8 !important;
  color: var(--ink, #2B2826) !important;
}

/* ============================================================
   Smile V2 — Product card v6 (border on photo, hover image-only)
   ============================================================ */

/* Photo gets the border + radius. Bg can stay white — looks intentional now. */
html body article.product-miniature .product-image {
  border: 1px solid var(--line, #E8E2D9) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fff !important;
  transition: border-color .2s var(--ease, ease-out), box-shadow .2s var(--ease, ease-out) !important;
}

/* HOVER: only the image lifts/highlights. Title/price/colors stay calm. */
html body article.product-miniature:hover .product-image,
html body article.product-miniature .product-image:hover {
  border-color: var(--ink, #2B2826) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}
/* Kill any hover effect on the card itself or the meta */
html body article.product-miniature:hover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
html body article.product-miniature:hover .product-meta,
html body article.product-miniature:hover .product-description,
html body article.product-miniature:hover .product-title,
html body article.product-miniature:hover .product-title a,
html body article.product-miniature:hover .price,
html body article.product-miniature:hover .product-price-and-shipping,
html body article.product-miniature:hover .variant-links,
html body article.product-miniature:hover .highlighted-informations {
  color: var(--ink, #2B2826) !important;
  background: transparent !important;
  transform: none !important;
  text-decoration: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Only the title link itself can change color on direct hover */
html body article.product-miniature .product-title a:hover {
  color: var(--burgundy, #6B1822) !important;
}

/* Image zoom on hover - keep, but ONLY the image */
html body article.product-miniature .product-image img,
html body article.product-miniature .product-image .img-fluid {
  transition: transform .5s var(--ease, ease-out) !important;
}
html body article.product-miniature:hover .product-image img,
html body article.product-miniature .product-image:hover img {
  transform: scale(1.04) !important;
}

/* ============================================================
   Smile V2 — Product card v8 (exact match to standalone reference)
   ============================================================ */

/* === Photo wrapper (.product-image == reference .ph) === */
html body article.product-miniature .product-image {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3/4 !important;
  overflow: hidden !important;
  border-radius: var(--r-md, 10px) !important;
  background: var(--line-2, #F0E8DE) !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  box-shadow: none !important;
  transition: none !important;
}

/* Anchor inside fills the wrapper completely */
html body article.product-miniature .product-image > a,
html body article.product-miniature .thumbnail.product-thumbnail,
html body article.product-miniature a.thumbnail.product-thumbnail {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
  overflow: hidden !important;
  transition: none !important;
}
html body article.product-miniature .thumbnail::before,
html body article.product-miniature .thumbnail::after,
html body article.product-miniature .product-thumbnail::before,
html body article.product-miniature .product-thumbnail::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

/* The actual <img> — absolute inset 0, object-fit cover */
html body article.product-miniature .product-image img,
html body article.product-miniature .product-image .img-fluid,
html body article.product-miniature img.img-fluid {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: none !important;
  transition: transform 0.6s var(--ease, ease-out), opacity 0.3s !important;
}

/* Rollover alt image (PS product-additional span > img) */
html body article.product-miniature .product-additional {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
  z-index: 1 !important;
}
html body article.product-miniature .product-additional img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
html body article.product-miniature:hover .product-additional { opacity: 1 !important; }
html body article.product-miniature:hover .product-image > a > img:first-of-type { opacity: 0 !important; }
html body article.product-miniature:hover .product-image img { transform: scale(1.03) !important; }

/* === Badges/flags (.product-flags == .badge-row) === */
html body article.product-miniature {
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body article.product-miniature .product-flags {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  z-index: 5 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  pointer-events: none !important;
  background: transparent !important;
}
html body article.product-miniature .product-flag,
html body article.product-miniature .product-flags li {
  display: inline-block !important;
  font-family: var(--f-body, "Inter", sans-serif) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  padding: 5px 9px !important;
  border-radius: 4px !important;
  background: var(--ink, #2B2826) !important;
  color: #fff !important;
  white-space: nowrap !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  list-style: none !important;
  width: auto !important;
  height: auto !important;
}
html body article.product-miniature .product-flag.new,
html body article.product-miniature .product-flag.online-only {
  background: var(--champagne, #B8924F) !important;
  color: #fff !important;
}
html body article.product-miniature .product-flag.discount,
html body article.product-miniature .product-flag.discount-percentage,
html body article.product-miniature .product-flag.discount-amount,
html body article.product-miniature .product-flag.on-sale {
  background: var(--burgundy, #6B2C2C) !important;
  color: #fff !important;
}
html body article.product-miniature .product-flag.best-seller,
html body article.product-miniature .product-flag.popular {
  background: var(--rose, #E8C5C5) !important;
  color: var(--ink, #2B2826) !important;
}
html body article.product-miniature .product-flag.pack {
  background: var(--ink, #2B2826) !important;
  color: #fff !important;
}

/* === Wishlist heart (functional-buttons > leo-wishlist == .wish) === */
html body article.product-miniature .functional-buttons {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  display: block !important;
  background: transparent !important;
  z-index: 5 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  float: none !important;
}
html body article.product-miniature .functional-buttons > * { display: none !important; }
html body article.product-miniature .leo-wishlist-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.92) !important;
  color: var(--ink, #2B2826) !important;
  border: 0 !important;
  box-shadow: none !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform 0.2s var(--ease, ease-out) !important;
}
html body article.product-miniature .leo-wishlist-button:hover { transform: scale(1.08) !important; }
html body article.product-miniature .leo-wishlist-button.on,
html body article.product-miniature .leo-wishlist-button.added { color: var(--burgundy, #6B2C2C) !important; }

/* === Meta below image (.product-meta == .pmeta) === */
html body article.product-miniature .thumbnail-container {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
html body article.product-miniature .product-meta {
  float: none !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  padding: 14px 2px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  transform: none !important;
}
html body article.product-miniature .product-description {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  float: none !important;
}

/* Name (.product-title == .pname) */
html body article.product-miniature .product-title,
html body article.product-miniature h2.product-title,
html body article.product-miniature h3.product-title {
  display: block !important;
  font-family: var(--f-body, "Inter", -apple-system, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.005em !important;
  color: var(--ink, #2B2826) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  text-transform: none !important;
}
html body article.product-miniature .product-title a {
  color: var(--ink, #2B2826) !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}
html body article.product-miniature .product-title a:hover { color: var(--burgundy, #6B2C2C) !important; }

/* Price row (.prow) — price left, swatches right */
html body article.product-miniature .product-price-and-shipping {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
html body article.product-miniature .product-price-and-shipping .price,
html body article.product-miniature .price {
  display: inline-block !important;
  font-family: var(--f-body, "Inter", sans-serif) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink, #2B2826) !important;
  font-variant-numeric: tabular-nums !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body article.product-miniature .regular-price {
  color: var(--ink-3, #9A928B) !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
  margin-right: 6px !important;
  font-size: 13px !important;
}
html body article.product-miniature .discount-percentage,
html body article.product-miniature .discount-amount { display: none !important; }

/* Make price row + swatches sit side by side via flex on description */
html body article.product-miniature .product-description {
  position: relative !important;
}
html body article.product-miniature .highlighted-informations {
  position: absolute !important;
  right: 0 !important;
  bottom: 2px !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  opacity: 1 !important;
  z-index: auto !important;
  text-align: right !important;
  min-height: 0 !important;
  pointer-events: auto !important;
}
html body article.product-miniature .variant-links {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
}
html body article.product-miniature .variant-links a.color,
html body article.product-miniature .variant-links .color {
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(43,40,38,0.12) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  position: static !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  transition: transform 0.2s !important;
}
html body article.product-miniature .variant-links a.color:hover { transform: scale(1.2) !important; }
html body article.product-miniature .variant-links .count { display: none !important; }

/* Hide noise */
html body article.product-miniature .leo-list-product-reviews,
html body article.product-miniature .product-list-reviews,
html body article.product-miniature .product-description-short { display: none !important; }

/* === HOVER: only image scales. Meta absolutely unchanged. === */
html body article.product-miniature:hover,
html body article.product-miniature:hover .thumbnail-container,
html body article.product-miniature:hover .product-meta,
html body article.product-miniature:hover .product-description,
html body article.product-miniature:hover .product-title,
html body article.product-miniature:hover .product-title a,
html body article.product-miniature:hover .product-price-and-shipping,
html body article.product-miniature:hover .price,
html body article.product-miniature:hover .variant-links,
html body article.product-miniature:hover .highlighted-informations,
html body article.product-miniature:hover .variant-links a.color {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  text-decoration: none !important;
  margin-top: revert-layer;
}

/* ============================================================
   Smile V2 — Product card v9 (no image swap, simpler hover)
   ============================================================ */

/* Kill product-additional rollover completely */
html body article.product-miniature .product-additional,
html body article.product-miniature .product-additional img,
html body article.product-miniature span.product-additional {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Main image NEVER hides on hover */
html body article.product-miniature:hover .product-image img,
html body article.product-miniature:hover .product-image .img-fluid,
html body article.product-miniature:hover .product-image > a > img,
html body article.product-miniature .product-image > a > img,
html body article.product-miniature .product-image > a > img:first-of-type,
html body article.product-miniature:hover .product-image > a > img:first-of-type {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* HOVER: NO scale, NO transforms — just a soft border-color hint on the wrapper */
html body article.product-miniature:hover .product-image img,
html body article.product-miniature:hover .product-image {
  transform: none !important;
}

/* === product-image: beige bg, clearly visible (not white) === */
html body article.product-miniature .product-image,
html body article.product-miniature div.product-image {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3/4 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: #F0E8DE !important;
  background-color: #F0E8DE !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  box-shadow: none !important;
}

/* Anchor fills wrapper, transparent */
html body article.product-miniature .thumbnail,
html body article.product-miniature .thumbnail.product-thumbnail,
html body article.product-miniature a.thumbnail,
html body article.product-miniature a.thumbnail.product-thumbnail,
html body article.product-miniature .product-image > a {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
}

/* Image absolute fills the anchor */
html body article.product-miniature .product-image img,
html body article.product-miniature .product-image .img-fluid {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* === Flags position: ABSOLUTE relative to .product-image (not .product-miniature) === */
/* So even if meta moves, flags stay anchored to image */
html body article.product-miniature .product-flags {
  display: none !important;  /* hidden when natural position (inside meta) */
}
/* Recreate via ::before on .product-image? Not possible if PS variable. */
/* Alternative: keep flags in meta but make them flow normally */
html body article.product-miniature .product-flags {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  position: static !important;
}
html body article.product-miniature .product-flag,
html body article.product-miniature .product-flags li {
  display: inline-block !important;
  font-family: var(--f-body, Inter, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  background: #B8924F !important;  /* champagne default for new flag */
  color: #fff !important;
  white-space: nowrap !important;
  border: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  width: auto !important;
  height: auto !important;
}
html body article.product-miniature .product-flag.discount,
html body article.product-miniature .product-flag.discount-percentage,
html body article.product-miniature .product-flag.discount-amount,
html body article.product-miniature .product-flag.on-sale {
  background: #6B2C2C !important;
  color: #fff !important;
}
html body article.product-miniature .product-flag.best-seller,
html body article.product-miniature .product-flag.popular {
  background: #E8C5C5 !important;
  color: #2B2826 !important;
}

/* ================================================================
   [REFACTOR LISTING — reference parity 2026-05-26]
   Aligns .smile-listing-grid / .smile-products / .smile-toolbar / .cat-h1
   with the Claude Design standalone reference.
   ================================================================ */

.smile-listing-grid {
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  gap: 48px !important;
  padding-top: 0 !important;
  padding-bottom: 80px !important;
  align-items: start;
}
@media (max-width: 960px) {
  .smile-listing-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .smile-filters { display: none !important; }
}

.smile-products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px 18px !important;
}
@media (max-width: 960px) {
  .smile-products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 720px) {
  .smile-products { grid-template-columns: repeat(2, 1fr) !important; gap: 20px 12px !important; }
}

.smile-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 18px 0 !important;
  margin-bottom: 32px !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--bg) !important;
  position: sticky !important;
  top: var(--nav-h, 64px) !important;
  z-index: 10 !important;
  gap: 12px;
}
.smile-toolbar-count { font-size: 13px !important; color: var(--ink-2) !important; }

/* Hero h1 — Inter weight 400 per Claude Design (Playfair reserved for branding) */
.cat-h1 {
  font-family: var(--f-body) !important;
  font-size: clamp(40px, 5.5vw, 64px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  margin: 16px 0 16px !important;
}
.cat-lead { max-width: 480px !important; }

/* === FIX defensivo: menu-btn mobile === */
.menu-btn {
  color: var(--ink, #2B2826) !important;
}
.menu-btn svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  color: var(--ink, #2B2826) !important;
  stroke: currentColor !important;
}
@media (max-width: 960px) {
  .menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
  }
}


/* === Smile V2 — Mobile drawer (handoff: design_handoff_smile_menu) ===
   Mobile-only scope. Desktop sees nothing: drawer is display:none ≥960px.
   Replaces the old .mobile-drawer + .mobile-nav minimal block.
   ==================================================================== */

/* Hard kill in desktop — defense in depth (also done in the @media below) */
@media (min-width: 960px) {
  .mobile-drawer,
  .mobile-drawer-scrim { display: none !important; }
}

/* Base (mobile-first ≤959px) */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 92vw;
  max-width: 390px;
  height: 100vh;
  height: 100dvh;
  background: var(--surface, #FFFFFF);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform .32s cubic-bezier(0.22,1,0.36,1);
  visibility: hidden;
  box-shadow: -20px 0 50px -10px rgba(0,0,0,.25);
  overflow: hidden;
  font-family: var(--f-body, "Inter", sans-serif);
}
.mobile-drawer.open {
  transform: translateX(0);
  visibility: visible;
}

.mobile-drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(43,40,38,.45);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.mobile-drawer-scrim.open {
  opacity: 1;
  visibility: visible;
}

body.drawer-open {
  overflow: hidden;
  touch-action: none;
}

/* Header */
.mobile-drawer .d-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 22px 14px;
  flex-shrink: 0;
}
.mobile-drawer .d-head .logo {
  font-family: var(--f-display, "Playfair Display", Georgia, serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink, #2B2826);
  letter-spacing: -0.01em;
  line-height: 1;
}
.mobile-drawer .d-head .logo .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--burgundy, #6B2C2C);
  margin-left: 3px;
  vertical-align: middle;
}
.mobile-drawer .d-head .logo small {
  display: block;
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3, #9A928B);
  margin-top: 2px;
  font-weight: 500;
}
.mobile-drawer .x-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line, #E8DFD6);
  background: var(--surface, #FFFFFF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink, #2B2826);
  padding: 0;
  cursor: pointer;
}

/* Search */
.mobile-drawer .search {
  margin: 4px 20px 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2, #FAF7F2);
  border: 1px solid var(--line, #E8DFD6);
  border-radius: 999px;
  padding: 12px 16px;
  flex-shrink: 0;
}
.mobile-drawer .search svg { color: var(--ink-3, #9A928B); flex-shrink: 0; }
.mobile-drawer .search input {
  border: 0;
  background: none;
  outline: none;
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 15px;
  color: var(--ink, #2B2826);
  width: 100%;
  padding: 0;
}
.mobile-drawer .search input::placeholder { color: var(--ink-3, #9A928B); }
.mobile-drawer .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Scroll area */
.mobile-drawer .scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 20px 0;
}
.mobile-drawer .scroll::-webkit-scrollbar { width: 0; }

/* Primary nav */
.mobile-drawer .nav-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.mobile-drawer .nav-list li a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 4px;
  text-decoration: none;
  color: var(--ink, #2B2826);
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 17px;
  font-weight: 500;
  border-bottom: 1px solid var(--line-2, #F0E8DE);
  transition: color .15s;
  min-height: 44px;
}
.mobile-drawer .nav-list li a:hover,
.mobile-drawer .nav-list li a:focus-visible {
  color: var(--burgundy, #6B2C2C);
}
.mobile-drawer .nav-list .nav-ic {
  width: 24px;
  color: var(--burgundy, #6B2C2C);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-drawer .nav-list .chev {
  margin-left: auto;
  color: var(--ink-3, #9A928B);
  display: inline-flex;
}

/* Section label */
.mobile-drawer .sec-label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--champagne, #B8924F);
  font-weight: 600;
  margin: 24px 4px 12px;
}

/* Occasion chips */
.mobile-drawer .chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mobile-drawer .chip {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 64px;
  border-radius: 14px;
  padding: 12px 14px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line, #E8DFD6);
  background: var(--surface-2, #FAF7F2);
  color: var(--ink, #2B2826);
}
.mobile-drawer .chip .nm {
  font-family: var(--f-display, "Playfair Display", Georgia, serif);
  font-size: 16px;
  color: var(--ink, #2B2826);
  font-weight: 500;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}
.mobile-drawer .chip .sub {
  font-size: 11px;
  color: var(--ink-2, #6B6360);
  position: relative;
  z-index: 1;
  margin-top: 1px;
}

/* Ofertas highlight */
.mobile-drawer .ofertas {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  border-radius: 14px;
  padding: 0 16px;
  background: linear-gradient(100deg, var(--burgundy, #6B2C2C), var(--burgundy-deep, #501F1F));
  text-decoration: none;
}
.mobile-drawer .ofertas .nm {
  font-family: var(--f-display, "Playfair Display", Georgia, serif);
  font-size: 18px;
  color: #fff;
  font-weight: 500;
}
.mobile-drawer .ofertas .tag {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.18);
  padding: 4px 9px;
  border-radius: 999px;
  margin-left: auto;
  font-weight: 600;
}
.mobile-drawer .ofertas .ic {
  color: var(--rose, #E8C5C5);
  display: inline-flex;
}

/* Account row */
.mobile-drawer .acct {
  display: flex;
  gap: 10px;
  margin: 22px 0 16px;
}
.mobile-drawer .acct a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border: 1px solid var(--line, #E8DFD6);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink, #2B2826);
  background: var(--surface, #FFFFFF);
  min-height: 44px;
}
.mobile-drawer .acct a svg { color: var(--burgundy, #6B2C2C); }
.mobile-drawer .acct a span {
  font-size: 12px;
  font-weight: 500;
  font-family: var(--f-body, "Inter", sans-serif);
}

/* Footer / WhatsApp */
.mobile-drawer .d-foot {
  padding: 14px 20px 22px;
  border-top: 1px solid var(--line-2, #F0E8DE);
  background: var(--surface, #FFFFFF);
  flex-shrink: 0;
}
.mobile-drawer .wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #1FA855;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  padding: 14px;
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 8px 20px -8px rgba(31,168,85,.6);
}
.mobile-drawer .foot-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ink-2, #6B6360);
  margin-top: 14px;
  text-align: center;
}
.mobile-drawer .foot-meta svg { color: var(--champagne, #B8924F); flex-shrink: 0; }

/* Drawer notch space for iOS safe areas */
@supports (padding: max(0px)) {
  .mobile-drawer .d-head { padding-top: max(22px, env(safe-area-inset-top)); }
  .mobile-drawer .d-foot { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}

/* Ribbon as clickable WhatsApp link (preserve appearance) */
a.ribbon { text-decoration: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a.ribbon:hover, a.ribbon:focus-visible { box-shadow: 0 6px 18px -6px rgba(31,168,85,.5); transform: translateY(-1px); transition: transform .15s var(--ease), box-shadow .15s var(--ease); }


/* ============================================================
   Smile V2 — Página /es/contactenos (Visítanos) — Claude Design
   Hero + cards + WhatsApp CTA. Sin formulario.
   ============================================================ */

/* Esconder wrappers legacy que el layout-both-columns inyecta para page_name=contact */
.page-contact #contact-form-box > .row > #left-column,
.page-contact #contact-form-box > .row > #content-wrapper > #main > #content.page-content {
  /* no-op: dejamos que existan pero los visualmente vaciamos abajo */
}

/* La sección "contact-rich" legacy del módulo: ocultar (la reemplazamos con .visitanos) */
.page-contact #contact-form-box .contact-rich { display: none; }

/* Limpiar card wrappers de Bootstrap legacy en esta página */
.page-contact #content.page-content.card.card-block {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* ===== Sección Visítanos ===== */
.visitanos {
  padding: 56px 0 96px;
  background: var(--bg, #F8F4F0);
}

/* Hero */
.visitanos .vis-hero {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.visitanos .vis-hero .eyebrow {
  display: inline-block;
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--champagne, #B8924F);
  font-weight: 600;
  margin-bottom: 16px;
}
.visitanos .vis-h1 {
  font-family: var(--f-display, "Playfair Display", Georgia, serif);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink, #2B2826);
  margin: 0 0 18px;
}
.visitanos .vis-h1 em {
  font-style: italic;
  color: var(--burgundy, #6B2C2C);
  font-weight: 500;
}
.visitanos .vis-hero .lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2, #6B6360);
  max-width: 560px;
  margin: 0 auto 32px;
}
.visitanos .vis-cta {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.visitanos .vis-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Grid de cards */
.visitanos .vis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.visitanos .vis-card {
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--line, #E8DFD6);
  border-radius: 18px;
  padding: 28px;
  transition: box-shadow .2s var(--ease, cubic-bezier(0.22,1,0.36,1)),
              transform .2s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
.visitanos .vis-card:hover {
  box-shadow: 0 16px 40px -20px rgba(43,40,38,.18);
  transform: translateY(-2px);
}

.visitanos .vis-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-2, #FAF7F2);
  border: 1px solid var(--line, #E8DFD6);
  color: var(--burgundy, #6B2C2C);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.visitanos .vis-card__h {
  font-family: var(--f-display, "Playfair Display", Georgia, serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink, #2B2826);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.visitanos .vis-card__p {
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2, #6B6360);
  margin: 0 0 12px;
}
.visitanos .vis-card__p--mute {
  color: var(--ink-3, #9A928B);
  font-size: 13px;
}
.visitanos .vis-card__p strong { color: var(--ink, #2B2826); font-weight: 600; }

.visitanos .vis-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--burgundy, #6B2C2C);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.visitanos .vis-card__link:hover,
.visitanos .vis-card__link:focus-visible {
  border-bottom-color: var(--burgundy, #6B2C2C);
  color: var(--burgundy-deep, #501F1F);
}

/* Lista de horarios */
.visitanos .vis-hours {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.visitanos .vis-hours > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line-2, #F0E8DE);
}
.visitanos .vis-hours > div:last-child { border-bottom: 0; padding-bottom: 0; }
.visitanos .vis-hours dt {
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #2B2826);
  margin: 0;
}
.visitanos .vis-hours dd {
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 13px;
  color: var(--ink-2, #6B6360);
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

/* Lista de contacto */
.visitanos .vis-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.visitanos .vis-contact-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line-2, #F0E8DE);
}
.visitanos .vis-contact-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.visitanos .vis-contact-list .lbl {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3, #9A928B);
  font-weight: 600;
}
.visitanos .vis-contact-list a {
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #2B2826);
  text-decoration: none;
}
.visitanos .vis-contact-list a:hover { color: var(--burgundy, #6B2C2C); }

/* Listas de links/tips */
.visitanos .vis-link-list,
.visitanos .vis-tips-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.visitanos .vis-link-list li,
.visitanos .vis-tips-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2, #6B6360);
}
.visitanos .vis-link-list li::before,
.visitanos .vis-tips-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--champagne, #B8924F);
}
.visitanos .vis-link-list a {
  color: var(--burgundy, #6B2C2C);
  text-decoration: none;
  font-weight: 500;
}
.visitanos .vis-link-list a:hover { text-decoration: underline; }

/* Footer CTA strip */
.visitanos .vis-foot {
  background: linear-gradient(135deg, var(--burgundy, #6B2C2C), var(--burgundy-deep, #501F1F));
  color: #fff;
  border-radius: 18px;
  padding: 40px 32px;
  text-align: center;
}
.visitanos .vis-foot__title {
  font-family: var(--f-display, "Playfair Display", Georgia, serif);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  color: #fff;
  margin: 0 0 20px;
}
.visitanos .vis-foot .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1FA855;
  color: #fff;
  border: 0;
  box-shadow: 0 10px 24px -10px rgba(31,168,85,.55);
}
.visitanos .vis-foot .btn:hover { background: #1B9249; }

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .visitanos { padding: 32px 0 56px; }
  .visitanos .vis-hero { margin-bottom: 32px; }
  .visitanos .vis-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 32px;
  }
  .visitanos .vis-card { padding: 22px; border-radius: 16px; }
  .visitanos .vis-card__h { font-size: 19px; }
  .visitanos .vis-foot { padding: 28px 22px; border-radius: 16px; }
  .visitanos .vis-cta { flex-direction: column; align-items: stretch; }
  .visitanos .vis-cta .btn { justify-content: center; }
}
@media (max-width: 640px) {
  .visitanos .vis-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   Smile V2 — Hero dinámico (smilev2 module: $smilev_hero)
   Composición editorial: foto principal 4:5 + foto acento offset.
   Móvil oculta el acento (LCP-friendly, 1 sola foto).
   ============================================================ */

.hero-img .hero-art {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

/* Foto principal: ocupa 82% del ancho + 100% del alto */
.hero-img .hero-art .art-main {
  position: absolute;
  left: 0;
  top: 0;
  width: 82%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-2, #FAF7F2);
  box-shadow: 0 30px 60px -28px rgba(43,40,38,.4);
  display: block;
  text-decoration: none;
}
.hero-img .hero-art .art-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
.hero-img .hero-art .art-main:hover img,
.hero-img .hero-art .art-main:focus-visible img {
  transform: scale(1.03);
}

/* Foto acento: pequeña, offset abajo-derecha con marco cream */
.hero-img .hero-art .art-accent {
  position: absolute;
  right: 3%;
  bottom: 8%;
  width: 46%;
  height: 54%;
  border: 6px solid var(--cream, #FAF7F2);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-2, #FAF7F2);
  box-shadow: 0 24px 44px -22px rgba(43,40,38,.45);
  display: block;
  text-decoration: none;
}
.hero-img .hero-art .art-accent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
.hero-img .hero-art .art-accent:hover img,
.hero-img .hero-art .art-accent:focus-visible img {
  transform: scale(1.05);
}

/* Tag con nombre del producto principal (link clicable) */
.hero-img .hero-art .art-tag {
  position: absolute;
  left: 0;
  top: 7%;
  background: var(--cream, #FAF7F2);
  border: 1px solid var(--line, #E8DFD6);
  border-radius: 999px;
  padding: 9px 16px;
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 12px;
  color: var(--ink, #2B2826);
  font-weight: 500;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 6px 16px -8px rgba(43,40,38,.2);
  max-width: calc(82% - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-img .hero-art .art-tag .s {
  font-family: var(--f-display, "Playfair Display", Georgia, serif);
  color: var(--burgundy, #6B2C2C);
  font-style: italic;
}
.hero-img .hero-art .art-tag:hover {
  color: var(--burgundy, #6B2C2C);
}

/* Ribbon "Asesoras en línea ahora" sigue posicionado igual que en el fallback */
.hero-img .hero-art .ribbon {
  z-index: 4;
}

/* ===== Móvil: solo foto principal, sin acento ni tag ===== */
@media (max-width: 960px) {
  .hero-img .hero-art .art-main {
    width: 100%;
    border-radius: 18px;
  }
  .hero-img .hero-art .art-accent,
  .hero-img .hero-art .art-tag {
    display: none;
  }
}


/* === Hero dinámico v3 corrections (handoff §4.1) === */
.hero-img { overflow: hidden; }
@media (max-width: 960px) {
  .hero-img .hero-art .art-main img { object-position: 50% 18%; }
}


/* ============================================================
   Smile V2 — Hero dinámico v3: 4 layouts A/B/C/D + fallback
   El layout activo lo elige SmilevHeroService (daily/weekly/seeded/fixed).
   Cada layout reemplaza por completo a <section class="hero">.
   ============================================================ */

/* ==== Layout B · Full-bleed (1 foto + texto sobre scrim) ==== */
.hero--b {
  position: relative;
  height: clamp(420px, 60vh, 640px);
  overflow: hidden;
  border-radius: 0;
}
.hero--b .hero-b__bg {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  overflow: hidden;
}
.hero--b .hero-b__bg img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 25%;
  transition: transform 1s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
.hero--b .hero-b__bg:hover img,
.hero--b .hero-b__bg:focus-visible img { transform: scale(1.04); }
.hero--b .hero-b__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(40,30,28,.72), rgba(40,30,28,.15) 55%, transparent 70%);
  pointer-events: none;
}
.hero--b .hero-b__txt {
  position: absolute;
  left: max(28px, calc((100vw - 1280px) / 2 + 28px));
  bottom: 48px;
  z-index: 2;
  max-width: 600px;
  color: #fff;
}
.hero--b .hero-b__txt .eyebrow { color: var(--champagne-soft, #C9A86A); }
.hero--b .hero-b__txt .hero-h1 {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05; letter-spacing: -0.01em;
  color: #fff;
  margin: 12px 0 0;
}
.hero--b .hero-b__txt .hero-h1 em { color: #E8C5C5; font-style: italic; }
.hero--b .hero-b__txt .lead {
  font-size: 16px; line-height: 1.55;
  color: rgba(255,255,255,.88);
  margin: 14px 0 0;
  max-width: 42ch;
}
.hero--b .hero-b__txt .hero-cta { margin-top: 24px; }
.hero--b .hero-b__txt .btn-primary {
  background: #fff; color: var(--ink, #2B2826);
}
.hero--b .hero-b__txt .btn-primary:hover { background: var(--cream, #FAF7F2); }

/* ==== Layout C · Tríptico asimétrico (3 fotos + texto entre dúo) ==== */
.hero--c {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  min-height: 540px;
  background: var(--bg, #F8F4F0);
  overflow: hidden;
}
.hero--c .hero-c__hero {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}
.hero--c .hero-c__hero img {
  width: 100%; height: 100%; min-height: 540px;
  object-fit: cover; object-position: 50% 20%;
  transition: transform 1s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
.hero--c .hero-c__hero:hover img,
.hero--c .hero-c__hero:focus-visible img { transform: scale(1.04); }
.hero--c .hero-c__right {
  display: flex;
  flex-direction: column;
}
.hero--c .hero-c__txt {
  padding: 56px 56px 28px;
  max-width: 560px;
}
.hero--c .hero-c__txt .eyebrow { color: var(--champagne, #B8924F); font-weight: 600; }
.hero--c .hero-c__txt .hero-h1 {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.08; letter-spacing: -0.01em;
  margin: 14px 0 0;
}
.hero--c .hero-c__txt .lead {
  font-size: 15px; line-height: 1.55;
  color: var(--ink-2, #6B6360);
  margin: 14px 0 0;
}
.hero--c .hero-c__txt .hero-cta { margin-top: 20px; }
.hero--c .hero-c__duo {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 28px 28px;
  min-height: 240px;
}
.hero--c .hero-c__ph {
  display: block; overflow: hidden;
  border-radius: 10px;
  text-decoration: none;
  background: var(--surface-2, #FAF7F2);
}
.hero--c .hero-c__ph img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 20%;
  transition: transform .8s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
.hero--c .hero-c__ph:hover img,
.hero--c .hero-c__ph:focus-visible img { transform: scale(1.05); }

/* ==== Layout D · Banda editorial (texto centrado + mosaico 3) ==== */
.hero--d {
  background: var(--cream, #FAF7F2);
  padding: 56px 0 0;
}
.hero--d .hero-d__txt {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 28px 32px;
}
.hero--d .hero-d__txt .eyebrow { color: var(--champagne, #B8924F); font-weight: 600; }
.hero--d .hero-d__txt .hero-h1 {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05; letter-spacing: -0.01em;
  margin: 14px 0 0;
}
.hero--d .hero-d__txt .lead {
  font-size: 16px; line-height: 1.55;
  color: var(--ink-2, #6B6360);
  margin: 14px auto 0;
  max-width: 46ch;
}
.hero--d .hero-d__txt .hero-cta {
  margin-top: 22px;
  justify-content: center;
}
.hero--d .hero-d__trio {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 10px;
  height: 360px;
  padding: 0 max(20px, calc((100vw - 1280px) / 2 + 20px)) 0;
  align-items: end;
}
.hero--d .hero-d__ph {
  display: block; overflow: hidden;
  border-radius: 12px 12px 0 0;
  text-decoration: none;
  background: var(--surface-2, #FAF7F2);
  height: 100%;
}
.hero--d .hero-d__ph--mid {
  margin-top: -32px;
  height: calc(100% + 32px);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 24px 50px -28px rgba(43,40,38,.4);
}
.hero--d .hero-d__ph img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
  transition: transform .8s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
.hero--d .hero-d__ph:hover img,
.hero--d .hero-d__ph:focus-visible img { transform: scale(1.05); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  /* B móvil: el scrim cubre más, texto más compacto */
  .hero--b { height: clamp(420px, 70vh, 560px); }
  .hero--b .hero-b__txt {
    left: 20px; right: 20px; bottom: 28px;
    max-width: none;
  }
  .hero--b .hero-b__txt .hero-h1 { font-size: clamp(28px, 8vw, 40px); }
  .hero--b .hero-b__txt .lead { display: none; }

  /* C móvil: texto arriba + row horizontal scroll snap (sin JS) */
  .hero--c {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero--c .hero-c__hero { display: none; }
  .hero--c .hero-c__txt { padding: 28px 20px 16px; max-width: none; }
  .hero--c .hero-c__txt .hero-h1 { font-size: clamp(28px, 7vw, 36px); }
  .hero--c .hero-c__duo {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 8px 20px 28px;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
  .hero--c .hero-c__duo .hero-c__ph {
    flex: 0 0 78%;
    height: 320px;
    scroll-snap-align: start;
  }
  .hero--c .hero-c__duo::-webkit-scrollbar { display: none; }

  /* D móvil: mosaico 2x — primera grande, 2 abajo */
  .hero--d { padding: 28px 0 0; }
  .hero--d .hero-d__txt { padding: 0 20px 20px; }
  .hero--d .hero-d__txt .hero-h1 { font-size: clamp(28px, 8vw, 38px); }
  .hero--d .hero-d__trio {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 250px 140px;
    height: auto;
    padding: 0 20px;
    gap: 8px;
  }
  .hero--d .hero-d__ph--mid {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-top: 0;
    height: 100%;
    border-radius: 12px 12px 0 0;
  }
  .hero--d .hero-d__ph:not(.hero-d__ph--mid) {
    grid-row: 2;
    height: 100%;
  }
}


/* ============================================================
   Smile V2 — Hero editorial v4 (handoff design_handoff_smile_hero 4)
   Hero único, sin rotación. Marco champagne hairline desplazado.
   Foto editable desde smilecontent. Sin cintas/etiquetas sobre la imagen.
   ============================================================ */

.hero--editorial {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  background: var(--bg, #F1EAE2);
  /* Reset PS hero base styles that might inherit */
  min-height: 0;
}

/* ===== Text column ===== */
.hero--editorial .col-text { position: relative; }

.hero--editorial .eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.hero--editorial .eyebrow .ln {
  width: 42px;
  height: 1px;
  background: var(--champagne, #B8924F);
  display: inline-block;
  flex-shrink: 0;
}
.hero--editorial .eyebrow span:not(.ln) {
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--champagne, #B8924F);
  font-weight: 600;
}

.hero--editorial h1 {
  font-family: var(--f-display, "Playfair Display", Georgia, serif);
  font-weight: 400;
  font-size: clamp(48px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink, #241F1D);
  margin: 26px 0 0;
  text-wrap: balance;
}
.hero--editorial h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--burgundy, #6B2C2C);
}

.hero--editorial .lead {
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2, #6B6360);
  margin: 26px 0 0;
  max-width: 40ch;
}

.hero--editorial .actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 38px;
  flex-wrap: wrap;
}
.hero--editorial .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-radius: 999px;
  padding: 16px 34px;
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: all .25s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
.hero--editorial .btn-primary {
  background: var(--burgundy, #6B2C2C);
  color: #fff;
  border: 0;
}
.hero--editorial .btn-primary:hover,
.hero--editorial .btn-primary:focus-visible {
  background: var(--burgundy-deep, #501F1F);
  transform: translateY(-1px);
}
.hero--editorial .link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink, #241F1D);
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 14.5px;
  font-weight: 500;
  border-bottom: 1px solid var(--line, #E3D8CC);
  padding-bottom: 3px;
  transition: all .25s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
.hero--editorial .link svg {
  transition: transform .25s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
.hero--editorial .link:hover,
.hero--editorial .link:focus-visible {
  color: var(--burgundy, #6B2C2C);
  border-color: var(--champagne, #B8924F);
}
.hero--editorial .link:hover svg,
.hero--editorial .link:focus-visible svg {
  transform: translateX(4px);
}

.hero--editorial .meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 48px;
}
.hero--editorial .meta .est {
  font-family: var(--f-display, "Playfair Display", Georgia, serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-3, #9A928B);
}
.hero--editorial .meta .sep {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--champagne, #B8924F);
  display: inline-block;
  flex-shrink: 0;
}
.hero--editorial .meta .place {
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #9A928B);
}

/* ===== Image column ===== */
.hero--editorial .col-art { position: relative; }
.hero--editorial .frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
}
.hero--editorial .frame::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(20px, 20px);
  border: 1px solid var(--champagne, #B8924F);
  border-radius: 6px;
  pointer-events: none;
  z-index: 0;
}
.hero--editorial .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 40px 80px -36px rgba(36,31,29,.5);
  display: block;
  text-decoration: none;
  background: var(--surface-2, #FAF7F2);
}
.hero--editorial .hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  transition: transform .9s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
.hero--editorial .hero-photo:hover img,
.hero--editorial .hero-photo:focus-visible img {
  transform: scale(1.03);
}

/* ===== Responsive (móvil) ===== */
@media (max-width: 900px) {
  .hero--editorial {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: none;
    padding: 0;
  }
  .hero--editorial .col-art { order: -1; }
  .hero--editorial .frame {
    aspect-ratio: auto;
    height: 56vh;
    min-height: 380px;
    max-height: 560px;
    border-radius: 0;
    overflow: hidden;
  }
  .hero--editorial .frame::before { display: none; }
  .hero--editorial .hero-photo {
    border-radius: 0;
    box-shadow: none;
  }
  .hero--editorial .col-text {
    padding: 34px 26px 44px;
  }
  .hero--editorial h1 { margin-top: 18px; }
  .hero--editorial .lead { max-width: none; }
  .hero--editorial .meta { margin-top: 34px; }
}


/* ============================================================
   Smile V2 — "Para tu ocasión" v2 (handoff design_handoff_smile_ocasion 2)
   Galería editorial vertical 3×2 que abraza el 2:3 vertical de PS catálogo.
   Sin oc-feature-row + oc-quad. Un solo grid con 6 tiles, todos aspect 3/4.
   Graduación + Novias = is-feature (nombre 31px).
   ============================================================ */

.section--occasion {
  padding: 72px 0;
}

/* ===== Header (sin cambios respecto a v1) ===== */
.section--occasion .oc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 38px;
}
.section--occasion .oc-head__l { max-width: 720px; }
.section--occasion .oc-head .eyebrow {
  display: flex; align-items: center; gap: 14px;
}
.section--occasion .oc-head .eyebrow .ln {
  width: 42px; height: 1px;
  background: var(--champagne, #B8924F);
  display: inline-block; flex-shrink: 0;
}
.section--occasion .oc-head .eyebrow span:not(.ln) {
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--champagne, #B8924F);
  font-weight: 600;
}
.section--occasion .oc-head__h {
  font-family: var(--f-display, "Playfair Display", Georgia, serif);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink, #241F1D);
  margin: 18px 0 0;
}
.section--occasion .oc-head__lead {
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2, #6B6360);
  margin: 16px 0 0;
  max-width: 42ch;
}
.section--occasion .oc-head__r { flex-shrink: 0; padding-bottom: 6px; }
.section--occasion .oc-head__r .link {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink, #241F1D);
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 14px; font-weight: 500;
  border-bottom: 1px solid var(--line, #E3D8CC);
  padding-bottom: 4px;
  transition: all .25s var(--ease, cubic-bezier(0.22,1,0.36,1));
  white-space: nowrap;
}
.section--occasion .oc-head__r .link svg {
  transition: transform .25s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
.section--occasion .oc-head__r .link:hover,
.section--occasion .oc-head__r .link:focus-visible {
  color: var(--burgundy, #6B2C2C);
  border-color: var(--champagne, #B8924F);
}
.section--occasion .oc-head__r .link:hover svg { transform: translateX(4px); }

/* ===== Grid: un solo 3×2 ===== */
.section--occasion .oc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}

/* ===== Tile vertical 3:4 ===== */
.section--occasion .oc-tile {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: 5px;
  aspect-ratio: 3 / 4;
  box-shadow: 0 20px 44px -28px rgba(36,31,29,.45);
}
.section--occasion .oc-tile .oc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
  transition: transform .7s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
.section--occasion .oc-tile:hover .oc-img,
.section--occasion .oc-tile:focus-visible .oc-img {
  transform: scale(1.045);
}

.section--occasion .oc-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(43,25,23,.82) 0%,
    rgba(43,25,23,.30) 40%,
    rgba(43,25,23,0) 68%);
  pointer-events: none;
}

/* Marco interior champagne en hover */
.section--occasion .oc-tile::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 2;
  border: 1px solid rgba(205,174,120,0);
  border-radius: 3px;
  transition: border-color .3s var(--ease, cubic-bezier(0.22,1,0.36,1));
  pointer-events: none;
}
.section--occasion .oc-tile:hover::after,
.section--occasion .oc-tile:focus-visible::after {
  border-color: rgba(205,174,120,.85);
}

/* ===== Caption ===== */
.section--occasion .oc-cap {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  padding: 24px 26px;
  width: 100%;
}
.section--occasion .oc-name {
  font-family: var(--f-display, "Playfair Display", Georgia, serif);
  font-weight: 500;
  color: #FBF6EF;
  line-height: 1.05;
  letter-spacing: -0.005em;
  font-size: 24px;
}
.section--occasion .oc-tile.is-feature .oc-name { font-size: 31px; }

.section--occasion .oc-rule {
  width: 34px;
  height: 1.5px;
  background: var(--champagne-soft, #CDAE78);
  margin: 11px 0;
  transition: width .35s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
.section--occasion .oc-tile:hover .oc-rule,
.section--occasion .oc-tile:focus-visible .oc-rule {
  width: 54px;
}

.section--occasion .oc-sub {
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(251,246,239,.82);
  font-weight: 500;
}

.section--occasion .oc-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--champagne-soft, #CDAE78);
  opacity: 0;
  transform: translateY(6px);
  transition: all .3s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
.section--occasion .oc-tile:hover .oc-go,
.section--occasion .oc-tile:focus-visible .oc-go {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Responsive (handoff mock móvil) ===== */
@media (max-width: 900px) {
  .section--occasion { padding: 46px 0 30px; }
  .section--occasion .oc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
  }
  .section--occasion .oc-head .eyebrow .ln { width: 34px; }
  .section--occasion .oc-head .eyebrow span:not(.ln) {
    font-size: 10px;
    letter-spacing: .24em;
  }
  .section--occasion .oc-head__h { font-size: 30px; margin: 14px 0 0; }
  .section--occasion .oc-head__lead { font-size: 14px; margin: 12px 0 0; }
  .section--occasion .oc-head__r { padding-bottom: 0; }
  .section--occasion .oc-head__r .link {
    font-size: 13.5px;
    margin-top: 6px;
    padding-bottom: 4px;
  }

  .section--occasion .oc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 22px;
  }
  .section--occasion .oc-tile {
    border-radius: 6px;
    box-shadow: 0 16px 36px -24px rgba(36,31,29,.5);
  }
  .section--occasion .oc-tile .oc-img { object-position: 50% 20%; }
  .section--occasion .oc-cap { padding: 15px 16px; }
  .section--occasion .oc-name { font-size: 18px; }
  .section--occasion .oc-tile.is-feature .oc-name { font-size: 20px; }
  .section--occasion .oc-rule { width: 28px; margin: 8px 0; }
  .section--occasion .oc-sub {
    font-size: 9.5px;
    letter-spacing: .14em;
  }
  /* No hover en táctil: oc-go oculto, marco interior tampoco aplica */
  .section--occasion .oc-go { display: none; }
  .section--occasion .oc-tile::after { display: none; }
}


/* ============================================================
   Smile V2 — Header móvil (handoff design_handoff_smile_header) — B
   ☰ izquierda · logo centrado · cart derecha · searchbar fija debajo.
   Solo móvil. Desktop intacto.
   ============================================================ */

/* Desktop: hide mobile-only searchbar */
.searchbar-mobile { display: none; }

/* Mobile star color (also applies to desktop — sutil, on-brand) */
.topbanner .tb-star { color: var(--champagne-soft, #CDAE78); }

@media (max-width: 960px) {
  /* ===== Topbar móvil ===== */
  .topbanner {
    background: var(--burgundy-deep, #501F1F);
    color: #F7EFE6;
    height: 36px;
    font-size: 11px;
    letter-spacing: .04em;
    padding-top: 6px;
  }
  .topbanner .dot,
  .topbanner .hide-sm { display: none; }

  /* ===== Header móvil — grid 3 columnas ===== */
  .header {
    background: rgba(250,247,242,.94);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--line, #E3D8CC);
  }
  .header .shell { padding: 0; }
  .header-row {
    grid-template-columns: 44px 1fr 44px !important;
    height: 58px;
    padding: 0 14px;
    gap: 0;
  }

  /* Hide desktop nav + helpers */
  .header .nav,
  .header .nav-actions .search-wrap,
  .header .nav-actions .lang-switch,
  .header .nav-actions > a.icon-btn:not([data-smile-cart-icon]):not([data-smile-account-icon]) {
    display: none !important;
  }

  /* nav-actions: hijos directos heredan grid del header-row */
  .header .nav-actions {
    display: contents;
  }

  /* Logo centrado en columna 2 */
  .header .logo {
    justify-self: center;
    order: 2;
    font-family: var(--f-display, "Playfair Display", Georgia, serif);
    font-size: 23px;
    font-weight: 500;
    color: var(--ink, #241F1D);
    letter-spacing: -0.01em;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
  }
  .header .logo small { display: none; }
  .header .logo .dotmark {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--burgundy, #6B2C2C);
    display: inline-block;
  }

  /* Menu ☰ a la izquierda */
  .header .menu-btn {
    order: 1;
    justify-self: start;
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    padding: 0;
  }
  .header .menu-btn svg { width: 21px; height: 21px; }

  /* Right group: account + cart, packed together in col 3 */
  .header .nav-actions .hicons {
    order: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .header .nav-actions .hicons .icon-btn {
    width: 44px;
    height: 44px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .header .nav-actions .hicons .icon-btn svg { width: 21px; height: 21px; }
  .header .nav-actions [data-smile-account-icon] svg { stroke-width: 1.7; }
  .header .nav-actions [data-smile-cart-icon] .badge {
    position: absolute;
    top: 7px; right: 7px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--burgundy, #6B2C2C);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--cream, #FAF7F2);
    line-height: 1;
  }

  /* ===== Searchbar móvil (debajo del header-row, dentro del sticky) ===== */
  .searchbar-mobile {
    display: block;
    padding: 0 14px 12px;
    background: rgba(250,247,242,.94);
    margin: 0;
  }
  .searchbar-mobile .sm-field {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--line, #E3D8CC);
    border-radius: 999px;
    padding: 11px 16px;
  }
  .searchbar-mobile .sm-field svg {
    color: var(--ink-3, #9A928B);
    flex-shrink: 0;
  }
  .searchbar-mobile input[type="search"] {
    border: 0;
    background: none;
    outline: none;
    font-family: var(--f-body, "Inter", sans-serif);
    font-size: 13.5px;
    color: var(--ink, #241F1D);
    width: 100%;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
  }
  .searchbar-mobile input[type="search"]::placeholder {
    color: var(--ink-3, #9A928B);
  }
  .searchbar-mobile input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }
}

/* === Hero editorial v5 móvil — object-position arriba para no cortar cabeza === */

@media (max-width: 900px) {
  .hero--editorial .hero-photo img { object-position: 50% 4%; }
}



/* === Category hero móvil — fix handoff filtros 2 (A1-A5) === */

@media (max-width: 960px) {
  /* Hero compacto en móvil */
  .cat-hero { padding: 0; }
  .cat-hero .cat-hero-inner { padding: 18px 16px 0; }
  .cat-hero .cat-hero-text { padding: 0; }

  /* h1 más pequeño */
  .cat-hero .cat-h1 {
    font-size: clamp(28px, 7vw, 36px) !important;
    line-height: 1.05 !important;
    margin: 8px 0 0 !important;
  }

  /* Eyebrow jerarquía */
  .cat-hero .eyebrow {
    font-size: 10px !important;
    letter-spacing: .24em !important;
    color: var(--champagne, #B8924F) !important;
  }

  /* Ocultar descripción larga en móvil */
  .cat-hero .cat-lead { display: none !important; }

  /* Ocultar count en hero — ya está en la barra de filtros */
  .cat-hero .cat-count { display: none !important; }

  /* Pills: UNA FILA scroll horizontal (no wrap) */
  .cat-hero .cat-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 16px -16px 0 !important;
    padding: 4px 16px 14px !important;
    scrollbar-width: none !important;
  }
  .cat-hero .cat-pills::-webkit-scrollbar { display: none !important; }

  .cat-hero .cat-pill {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    border: 1px solid var(--line, #E3D8CC) !important;
    background: #fff !important;
    border-radius: 999px !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    color: var(--ink-2, #6B6360) !important;
    text-decoration: none !important;
    line-height: 1 !important;
  }
  .cat-hero .cat-pill.is-current {
    background: var(--ink, #241F1D) !important;
    color: #fff !important;
    border-color: var(--ink, #241F1D) !important;
    font-weight: 500 !important;
  }

  /* Ocultar imagen hero en móvil (cabeza/hombre del placeholder estorba en categoría) */
  .cat-hero .cat-hero-img { display: none !important; }
}




/* ============================================================
   Smile V2 — Category mobile grid + chips overflow fix
   ============================================================ */


  
/* === Mobile padding + chips alignment fix === */

@media (max-width: 960px) {
  /* Shell mobile: padding lateral consistente 16px (handoff filtros 2 A1) */
  body .shell { padding-left: 16px !important; padding-right: 16px !important; }

  /* mfilters-bar está fuera del .shell — necesita su propio padding */
  body .smile-listing .smile-mfilters-bar {
    margin: 0 !important;
    padding: 0 !important;
  }
  body .smile-listing .smile-mfilters-bar .mfb-row {
    padding: 11px 16px !important;
  }
  body .smile-listing .smile-mfilters-bar .mfb-chips {
    padding: 0 16px 11px !important;
  }

  /* cat-pills: alinear margen negativo con shell 16px (antes era -16 con shell 26 = desalineado) */
  .cat-hero .cat-pills {
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Extra padding al final del scroll para que el último chip no se corte */
  .cat-hero .cat-pills::after {
    content: '';
    flex: 0 0 16px;
  }
}


/* === Chips scroll fix: parent must allow descendant scroll === */

@media (max-width: 960px) {
  /* overflow:clip allows descendants to scroll horizontally; hidden would clip them. */
  .smile-listing { overflow-x: clip !important; }
  .smile-listing .section { overflow-x: visible !important; }
  /* extra safety: cat-pills full-bleed via padding tricks */
  .cat-hero .cat-pills { scroll-padding-right: 16px !important; }
  /* Add a ghost element at end to give scroll some breathing room */
  .cat-hero .cat-pills > :last-child { margin-right: 16px !important; }
}


/* === Chips scroll containment fix (anti drawer expose) === */

@media (max-width: 960px) {
  /* Pills container queda dentro del shell padding — NO full-bleed.
     Esto evita exponer elementos off-screen al hacer scroll horizontal. */
  .cat-hero .cat-pills {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .cat-hero .cat-pills > :last-child {
    margin-right: 4px !important;
  }
}


/* === Chips scroll containment v2: hard local clip === */

@media (max-width: 960px) {
  /* Forzar contención del scroll dentro del cat-hero-text */
  .cat-hero .cat-hero-text {
    position: relative;
    overflow: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .cat-hero .cat-pills {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .cat-hero .cat-pills::-webkit-scrollbar { display: none !important; }
}



/* ============================================================================
   Smile · Bottom-sheet de filtros móvil v3
   Scoped a @media (max-width:960px). Apunta al MARKUP REAL de ps_facetedsearch.
   Specificity: prefijo `body aside.smile-filters` para ganar sobre el legacy.
   Reemplaza por completo el bloque previo de `.smile-filters` en
   smile-v2-tokens.css (ver INSTALL.md). Evita !important salvo lo imprescindible.
   ============================================================================ */

@media (max-width: 960px){

  /* ---- tokens locales (por si el theme no los expone) ---- */
  :root{
    --sf-bg:#FAF7F2; --sf-ink:#241F1D; --sf-ink2:#6B6360; --sf-ink3:#9A928B;
    --sf-line:#E3D8CC; --sf-burgundy:#6B2C2C; --sf-champ:#B8924F; --sf-champ-soft:#CDAE78;
  }

  /* ===== SHEET ===== */
  body aside.smile-filters{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:100%; max-width:100%; max-height:90vh; height:auto;
    margin:0; padding:0;
    background:var(--sf-bg);
    border:0; border-radius:20px 20px 0 0;
    box-shadow:0 -20px 50px -20px rgba(0,0,0,.4);
    display:flex; flex-direction:column;
    transform:translateY(100%);
    transition:transform .32s cubic-bezier(.22,1,.36,1);
    z-index:1001; overflow:hidden;
    /* anula legacy del sidebar desktop */
    inset-inline:0;
  }
  body aside.smile-filters.is-open{ transform:translateY(0); }

  /* grab handle */
  body aside.smile-filters .mfs-grab{
    width:38px; height:4px; border-radius:999px; background:var(--sf-line);
    margin:8px auto 0; flex:0 0 auto;
  }

  /* ===== HEADER ===== */
  body aside.smile-filters .mfs-h{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px 12px; border-bottom:1px solid var(--sf-line); flex:0 0 auto;
  }
  body aside.smile-filters .mfs-ttl{
    font-family:"Playfair Display",Georgia,serif; font-weight:500; font-size:21px;
    color:var(--sf-ink); line-height:1;
  }
  body aside.smile-filters .mfs-h-actions{ display:flex; align-items:center; gap:14px; }
  body aside.smile-filters .mfs-cl{
    background:none; border:0; padding:0; cursor:pointer;
    font-family:"Inter",sans-serif; font-size:13px; color:var(--sf-ink2);
    text-decoration:underline; text-underline-offset:2px;
  }
  body aside.smile-filters .mfs-cl:hover{ color:var(--sf-burgundy); }
  body aside.smile-filters .mfs-x{
    width:36px; height:36px; border-radius:50%; border:1px solid var(--sf-line);
    background:#fff; color:var(--sf-ink); cursor:pointer;
    display:flex; align-items:center; justify-content:center; padding:0; flex:0 0 auto;
  }
  body aside.smile-filters .mfs-x:hover{ background:#F2EADF; }
  body aside.smile-filters .mfs-x svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }

  /* ===== BODY ===== */
  body aside.smile-filters .mfs-b{
    flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:6px 18px 12px;
  }
  body aside.smile-filters #search_filters{ margin:0; padding:0; border:0; background:none; }

  /* cada faceta */
  body aside.smile-filters .facet{
    padding:18px 0; margin:0; border:0; border-bottom:1px solid var(--sf-line);
  }
  body aside.smile-filters .facet:last-child{ border-bottom:0; }
  body aside.smile-filters .facet-title{
    margin:0 0 12px; padding:0;
    font-family:"Inter",sans-serif; font-size:11px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:var(--sf-champ);
  }
  body aside.smile-filters .facet-list{ list-style:none; margin:0; padding:0; }
  body aside.smile-filters .facet-item{ margin:0; padding:0; }
  body aside.smile-filters .facet-label{
    display:flex; align-items:center; gap:10px; margin:0; cursor:pointer; font-weight:400;
  }
  body aside.smile-filters .facet-label .search-link{
    display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0;
    text-decoration:none; color:var(--sf-ink);
  }
  body aside.smile-filters .facet-name{ font-size:14px; color:var(--sf-ink); }
  body aside.smile-filters .magnitude{ margin-left:auto; font-size:12px; color:var(--sf-ink3); }
  /* ocultar el input nativo (lo reemplazamos visualmente) */
  body aside.smile-filters .custom-checkbox input[type="checkbox"]{
    position:absolute; opacity:0; width:0; height:0; margin:0;
  }

  /* ---- checkboxes genéricos (composición / características / disponibilidad) ---- */
  body aside.smile-filters .facet:not([data-facet-key="talla"]):not([data-facet-key="color"]) .facet-item{
    padding:8px 0;
  }
  body aside.smile-filters .facet:not([data-facet-key="talla"]):not([data-facet-key="color"]) .custom-checkbox{
    width:18px; height:18px; border:1px solid var(--sf-line); border-radius:5px; background:#fff;
    display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; position:relative;
  }
  body aside.smile-filters .facet-label:has(input:checked) .custom-checkbox{
    background:var(--sf-burgundy); border-color:var(--sf-burgundy);
  }
  body aside.smile-filters .facet:not([data-facet-key="talla"]):not([data-facet-key="color"]) .custom-checkbox::after{
    content:""; width:9px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff;
    transform:rotate(-45deg) translateY(-1px); opacity:0;
  }
  body aside.smile-filters .facet-label:has(input:checked) .custom-checkbox::after{ opacity:1; }

  /* ===== TALLA (chips 44px) ===== */
  body aside.smile-filters .facet[data-facet-key="talla"] .facet-list{
    display:flex; flex-wrap:wrap; gap:8px;
  }
  body aside.smile-filters .facet[data-facet-key="talla"] .facet-label{
    min-width:44px; height:44px; padding:0 14px; border:1px solid var(--sf-line);
    border-radius:10px; background:#fff; justify-content:center; gap:0;
  }
  body aside.smile-filters .facet[data-facet-key="talla"] .custom-checkbox{ display:none; }
  body aside.smile-filters .facet[data-facet-key="talla"] .search-link{ justify-content:center; flex:0 0 auto; }
  body aside.smile-filters .facet[data-facet-key="talla"] .facet-name{ font-size:14px; }
  body aside.smile-filters .facet[data-facet-key="talla"] .magnitude{ display:none; }
  body aside.smile-filters .facet[data-facet-key="talla"] .facet-label:has(input:checked){
    background:var(--sf-ink); border-color:var(--sf-ink);
  }
  body aside.smile-filters .facet[data-facet-key="talla"] .facet-label:has(input:checked) .facet-name{ color:#fff; }

  /* ===== COLOR (grid 2 col + swatch) ===== */
  body aside.smile-filters .facet[data-facet-key="color"] .facet-list{
    display:grid; grid-template-columns:1fr 1fr; gap:10px 14px;
  }
  body aside.smile-filters .facet[data-facet-key="color"] .facet-label{ padding:3px 0; }
  body aside.smile-filters .facet[data-facet-key="color"] .custom-checkbox{
    width:22px; height:22px; border-radius:50%; flex:0 0 auto; position:relative; padding:0; border:0;
  }
  /* swatch real (cuando ps trae .color-dot con background-color inline) */
  body aside.smile-filters .facet[data-facet-key="color"] .color-dot{
    display:block; width:22px; height:22px; border-radius:50%;
    border:1px solid rgba(0,0,0,.12); box-sizing:border-box;
  }
  /* FALLBACK: colores SIN .color-dot (Champagne, Plateado, Dorado, Multicolor…) →
     pinta el .custom-checkbox como swatch champagne para que NUNCA quede invisible */
  body aside.smile-filters .facet[data-facet-key="color"] .custom-checkbox{
    background:linear-gradient(135deg,#EADfca,#CDAE78);
    border:1px solid rgba(0,0,0,.12);
  }
  /* anillo champagne al seleccionar */
  body aside.smile-filters .facet[data-facet-key="color"] .facet-label:has(input:checked) .custom-checkbox,
  body aside.smile-filters .facet[data-facet-key="color"] .facet-label:has(input:checked) .color-dot{
    box-shadow:0 0 0 2px var(--sf-bg), 0 0 0 4px var(--sf-champ);
  }

  /* ===== PRECIO (slider) ===== */
  body aside.smile-filters .faceted-slider{ list-style:none; margin:0; padding:0; }
  body aside.smile-filters .smile-slider{ padding:14px 4px 0; }
  body aside.smile-filters .smile-slider-input{
    -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:3px;
    background:linear-gradient(to right,var(--sf-champ) 0%,var(--sf-champ) 100%,var(--sf-line) 100%);
    background:var(--sf-line); outline:none; margin:0;
  }
  body aside.smile-filters .smile-slider-input::-webkit-slider-thumb{
    -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
    background:#fff; border:1.5px solid var(--sf-champ); box-shadow:0 3px 8px rgba(0,0,0,.15); cursor:pointer;
  }
  body aside.smile-filters .smile-slider-input::-moz-range-thumb{
    width:20px; height:20px; border-radius:50%; background:#fff; border:1.5px solid var(--sf-champ);
    box-shadow:0 3px 8px rgba(0,0,0,.15); cursor:pointer;
  }
  body aside.smile-filters .smile-slider-labels{
    display:flex; justify-content:space-between; margin-top:12px;
    font-size:13px; color:var(--sf-ink);
  }

  /* ===== FOOTER ===== */
  body aside.smile-filters .mfs-f{
    flex:0 0 auto; display:flex; gap:10px; align-items:center;
    padding:14px 18px; padding-bottom:max(14px, env(safe-area-inset-bottom));
    border-top:1px solid var(--sf-line); background:var(--sf-bg);
  }
  body aside.smile-filters .mfs-f__clr{
    flex:0 0 auto; padding:14px 18px; border:1px solid var(--sf-line); border-radius:999px;
    background:#fff; color:var(--sf-ink); font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap;
  }
  body aside.smile-filters .mfs-f__apply{
    flex:1 1 auto; min-width:0; padding:14px; border:0; border-radius:999px;
    background:var(--sf-burgundy); color:#fff; font-size:14px; font-weight:600; cursor:pointer;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  /* ===== SCRIM ===== */
  .smile-mfilters-scrim{
    position:fixed; inset:0; background:rgba(36,31,29,.45); z-index:1000;
    opacity:0; visibility:hidden; transition:opacity .3s ease;
  }
  .smile-mfilters-scrim.is-open{ opacity:1; visibility:visible; }

  /* ===== BODY LOCK + ocultar FAB WhatsApp ===== */
  body.mfilters-open{ overflow:hidden; touch-action:none; }
  body.mfilters-open .whatsapp-fab,
  body.mfilters-open .whatsapp-float,
  body.mfilters-open [class*="whatsapp"]{ display:none !important; } /* el FAB no debe verse sobre el sheet */
}

/* ============================================================
   Smile V2 — Barra Filtrar/Ordenar móvil (sticky)
   (Restaurado tras el reemplazo del filters-sheet v3)
   ============================================================ */

/* Desktop: oculta toda la maquinaria móvil */
.smile-mfilters-bar,
.smile-mfilters-scrim,
.smile-msort-sheet,
.smile-filters .mfs-grab,
.smile-filters .mfs-h,
.smile-filters .mfs-h-actions,
.smile-filters .mfs-cl,
.smile-filters .mfs-x,
.smile-filters .mfs-b,
.smile-filters .mfs-f {
  display: none;
}

@media (max-width: 960px) {
  /* Sheet body wrappers visibles en móvil */
  body aside.smile-filters .mfs-grab,
  body aside.smile-filters .mfs-h,
  body aside.smile-filters .mfs-b,
  body aside.smile-filters .mfs-f {
    display: flex;
  }
  body aside.smile-filters .mfs-h-actions { display: flex; }
  body aside.smile-filters .mfs-cl,
  body aside.smile-filters .mfs-x { display: inline-flex; }

  /* ===== Barra sticky Filtrar/Ordenar ===== */
  .smile-mfilters-bar {
    display: block;
    position: sticky;
    top: 0;
    z-index: 22;
    background: rgba(250,247,242,.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid #E3D8CC;
    border-bottom: 1px solid #E3D8CC;
    margin: 0;
  }
  body .smile-listing .smile-mfilters-bar .mfb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    gap: 10px;
  }
  .smile-mfilters-bar .mfb-count {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #6B6360;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
  }
  .smile-mfilters-bar .mfb-count b {
    color: #241F1D;
    font-weight: 600;
  }
  .smile-mfilters-bar .mfb-btns {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }
  .smile-mfilters-bar .mfb-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #E3D8CC;
    background: #fff;
    border-radius: 999px;
    padding: 9px 15px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #241F1D;
    cursor: pointer;
    min-height: 36px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .smile-mfilters-bar .mfb-btn svg {
    color: #6B2C2C;
    flex-shrink: 0;
  }
  .smile-mfilters-bar .mfb-badge {
    background: #6B2C2C;
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
  }
  .smile-mfilters-bar .mfb-badge[hidden] { display: none; }

  /* Chips de filtros activos */
  .smile-mfilters-bar .mfb-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 16px 11px;
    scrollbar-width: none;
  }
  .smile-mfilters-bar .mfb-chips::-webkit-scrollbar { display: none; }
  .smile-mfilters-bar .mfb-chips:empty { display: none; }
  .smile-mfilters-bar .mfb-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #6B2C2C;
    color: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    min-height: 28px;
  }
  .smile-mfilters-bar .mfb-chip .x { opacity: .8; font-size: 13px; line-height: 1; }
  .smile-mfilters-bar .mfb-chip.is-clear {
    background: transparent;
    color: #6B2C2C;
    border: 1px solid #E3D8CC;
  }

  /* Ocultar desktop toolbar (count/sort) en mobile — el mfb-bar lo reemplaza */
  .smile-listing-main .smile-toolbar,
  .smile-listing .smile-toolbar { display: none; }
  .smile-listing-main .smile-active-filters,
  .smile-listing .smile-active-filters { display: none; }

  /* ===== Sort sheet (more simple, no AJAX) ===== */
  .smile-msort-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #FAF7F2;
    border-radius: 20px 20px 0 0;
    z-index: 1001;
    max-height: 60vh;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(0.22,1,0.36,1);
    box-shadow: 0 -20px 50px -20px rgba(0,0,0,.4);
    overflow: hidden;
  }
  .smile-msort-sheet.is-open { transform: translateY(0); }
  .smile-msort-sheet .msort-grab {
    width: 38px; height: 4px;
    border-radius: 999px;
    background: #E3D8CC;
    margin: 8px auto 0;
    flex-shrink: 0;
  }
  .smile-msort-sheet .msort-h {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 19px;
    color: #241F1D;
    padding: 12px 18px 8px;
    border-bottom: 1px solid #E3D8CC;
  }
  .smile-msort-sheet .msort-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
  }
  .smile-msort-sheet .msort-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    color: #241F1D;
    text-decoration: none;
    min-height: 44px;
  }
  .smile-msort-sheet .msort-opt.is-current {
    color: #6B2C2C;
    font-weight: 600;
  }
}

/* === Fix: scrim + sheet visibles en móvil (el display:none global del desktop ganaba) === */
@media (max-width: 960px) {
  .smile-mfilters-scrim { display: block; }
}

/* === Defensive overrides for bottom-sheet open behavior =================
   - Scrim no debe interceptar taps salvo cuando está .is-open (evita "touch-through"
     que cierra el sheet apenas se abre).
   - Garantiza transform translateY(0) y display:flex con specificity alta cuando
     body.mfilters-open + aside.is-open, por encima de cualquier sticky/order legacy.
   - Garantiza que la barra y la scrim queden por debajo del sheet (z-index).
   ============================================================ */
@media (max-width: 960px) {
  .smile-mfilters-scrim { pointer-events: none; }
  .smile-mfilters-scrim.is-open { pointer-events: auto; }
  body.mfilters-open aside.smile-filters.is-open {
    transform: translateY(0) !important;
    display: flex !important;
    visibility: visible !important;
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1001 !important;
  }
  body.mfilters-open .smile-mfilters-bar { z-index: 22; }
}

/* ===========================================================================
   Smile V2 — Mobile filters sheet: FINAL consolidated overrides (2026-06-01)
   Replaces all previous stacked tail patches (Sheet-fix v2, colorfix v1+v2+v3,
   theme-bundle magnitude override). Backed by template fix:
     - themes/smile_v2/modules/ps_facetedsearch/views/templates/front/catalog/facets.tpl
       no longer emits <span class="magnitude"> for talla/tamano/size, so the
       PrestaShop theme bundle rule
         #search_filters .facet .facet-label .magnitude{position:absolute;...}
       has nothing to bite onto for talla.
     - assets/js/smile-color-filter.js no longer injects .smile-filters-count;
       the sticky bar .mfb-count already shows the total.
   Color facet still emits magnitude — see "color magnitude inline" block below
   which neutralizes the position:absolute rule for color only.
   =========================================================================== */
@media (max-width: 960px) {
  /* Defensive: if a stale .smile-filters-count survives in cached HTML or is
     re-introduced by a future tweak, keep it out of the sheet header. */
  body aside.smile-filters .smile-filters-count { display: none !important; }

  /* X close button: perfect 36x36 circle, no flex stretching. */
  body aside.smile-filters .mfs-x {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex: 0 0 36px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }
  body aside.smile-filters .mfs-x svg { width: 16px !important; height: 16px !important; }

  /* Sheet header: never clip the "Filtros" title. */
  body aside.smile-filters .mfs-h {
    flex: 0 0 auto !important;
    overflow: visible !important;
    align-items: center !important;
    padding: 14px 18px !important;
  }
  body aside.smile-filters .mfs-ttl { line-height: 1.2 !important; overflow: visible !important; }

  /* Color facet (inline magnitude next to label, 2-col grid, ellipsis on name). */
  body aside.smile-filters .facet[data-facet-key="color"] .facet-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  body aside.smile-filters .facet[data-facet-key="color"] .facet-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0;
    width: 100%;
    min-width: 0;
  }
  body aside.smile-filters .facet[data-facet-key="color"] .search-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-decoration: none;
    color: var(--sf-ink, #241F1D);
    font-size: 14px;
    line-height: 1.2;
  }
  body aside.smile-filters .facet[data-facet-key="color"] .facet-name {
    display: inline-block;
    color: var(--sf-ink, #241F1D);
    font-size: 14px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }
  /* Neutralize the theme bundle's #search_filters .facet .facet-label .magnitude
     { position:absolute; top:5px; right:0 } — for COLOR magnitudes only.
     Talla no longer renders magnitude (template change), so we don't need a
     talla-specific rule here. */
  body aside.smile-filters .facet[data-facet-key="color"] .magnitude {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-block;
    margin: 0;
    color: var(--sf-ink3, #9A928B);
    font-size: 12px;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Color swatches: circular. */
  body aside.smile-filters .facet[data-facet-key="color"] .custom-checkbox,
  body aside.smile-filters .facet[data-facet-key="color"] .color-dot {
    border-radius: 50% !important;
    width: 22px !important;
    height: 22px !important;
  }

  /* Talla chips: text visible, no flexbox surprises. (Magnitude already
     stripped at template level, so no need to fight position:absolute here.) */
  body aside.smile-filters .facet[data-facet-key="talla"] .facet-label,
  body aside.smile-filters .facet[data-facet-key="tamano"] .facet-label { overflow: visible; }
  body aside.smile-filters .facet[data-facet-key="talla"] .search-link,
  body aside.smile-filters .facet[data-facet-key="tamano"] .search-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-ink, #241F1D);
    font-size: 14px;
    line-height: 1;
  }
  body aside.smile-filters .facet[data-facet-key="talla"] .facet-name,
  body aside.smile-filters .facet[data-facet-key="tamano"] .facet-name {
    display: inline;
    color: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
  }
  body aside.smile-filters .facet[data-facet-key="talla"] .facet-label:has(input:checked) .facet-name,
  body aside.smile-filters .facet[data-facet-key="tamano"] .facet-label:has(input:checked) .facet-name { color: #fff; }

  /* Scroll body: thin scrollbar. */
  body aside.smile-filters .mfs-b {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--sf-line, #E3D8CC) transparent;
  }
  body aside.smile-filters .mfs-b::-webkit-scrollbar { width: 4px; }
  body aside.smile-filters .mfs-b::-webkit-scrollbar-thumb { background: var(--sf-line, #E3D8CC); border-radius: 2px; }
  body aside.smile-filters .mfs-b::-webkit-scrollbar-track { background: transparent; }
}

/* =================================================================
   v4 facets — desktop safety net (specificity body aside.smile-filters)
   Replicates .sf-* base styles with higher specificity so they win
   over any legacy or component CSS that might override.
   ================================================================= */
body aside.smile-filters .sf-facet { padding: 18px 0; border-bottom: 1px solid var(--sf-line, #E3D8CC); }
body aside.smile-filters .sf-facet:last-child { border-bottom: 0; }
body aside.smile-filters .sf-facet-title {
  margin: 0 0 12px; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sf-champ, #B8924F);
}
body aside.smile-filters .sf-list { list-style: none; margin: 0; padding: 0; }
body aside.smile-filters .sf-item { margin: 0; padding: 0; }
body aside.smile-filters .sf-opt {
  display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; position: relative;
}
body aside.smile-filters .sf-input {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none;
}
body aside.smile-filters .sf-name { font-family: "Inter", sans-serif; font-size: 14px; color: var(--sf-ink, #241F1D); }
body aside.smile-filters .sf-count { margin-left: auto; font-family: "Inter", sans-serif; font-size: 12px; color: var(--sf-ink3, #9A928B); }
body aside.smile-filters .sf-facet[data-key="composicion"] .sf-opt,
body aside.smile-filters .sf-facet[data-key="caracteristicas"] .sf-opt,
body aside.smile-filters .sf-facet[data-key="disponibilidad"] .sf-opt { padding: 8px 0; }
body aside.smile-filters .sf-box {
  width: 18px; height: 18px; border: 1px solid var(--sf-champ-soft, #CDAE78); border-radius: 5px;
  background: #fff; flex: 0 0 auto; position: relative; display: inline-block;
}
body aside.smile-filters .sf-box::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0;
}
body aside.smile-filters .sf-opt:has(.sf-input:checked) .sf-box { background: var(--sf-burgundy, #6B2C2C); border-color: var(--sf-burgundy, #6B2C2C); }
body aside.smile-filters .sf-opt:has(.sf-input:checked) .sf-box::after { opacity: 1; }
body aside.smile-filters .sf-list--chips { display: flex; flex-wrap: wrap; gap: 8px; }
body aside.smile-filters .sf-chip {
  min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--sf-line, #E3D8CC);
  border-radius: 10px; background: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-family: "Inter", sans-serif; font-size: 14px; color: var(--sf-ink, #241F1D); white-space: nowrap;
}
body aside.smile-filters .sf-opt:has(.sf-input:checked) .sf-chip { background: var(--sf-ink, #241F1D); border-color: var(--sf-ink, #241F1D); color: #fff; }
body aside.smile-filters .sf-color-search { margin: 0 0 14px; }
body aside.smile-filters .sf-color-search input {
  width: 100%; height: 44px; border: 1px solid var(--sf-line, #E3D8CC); border-radius: 999px; background: #fff;
  padding: 0 16px; font-family: "Inter", sans-serif; font-size: 13.5px; color: var(--sf-ink, #241F1D); outline: none;
}
body aside.smile-filters .sf-color-search input:focus { border-color: var(--sf-champ, #B8924F); }
body aside.smile-filters .sf-list--colors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
body aside.smile-filters .sf-list--colors .sf-opt { min-width: 0; }
body aside.smile-filters .sf-swatch {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.12); box-sizing: border-box;
  background: var(--sw, linear-gradient(135deg, #EADfca, #CDAE78));
}
body aside.smile-filters .sf-list--colors .sf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body aside.smile-filters .sf-list--colors .sf-count { margin-left: 6px; flex: 0 0 auto; }
body aside.smile-filters .sf-opt:has(.sf-input:checked) .sf-swatch { box-shadow: 0 0 0 2px var(--sf-bg, #FAF7F2), 0 0 0 4px var(--sf-champ, #B8924F); }
body aside.smile-filters .sf-color-more {
  margin-top: 14px; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; color: var(--sf-burgundy, #6B2C2C);
}
body aside.smile-filters .sf-color-more[hidden] { display: none; }
body aside.smile-filters .sf-slider { padding: 14px 4px 0; }
body aside.smile-filters .sf-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 3px;
  background: var(--sf-line, #E3D8CC); outline: none; margin: 0;
}
body aside.smile-filters .sf-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  border: 1.5px solid var(--sf-champ, #B8924F); box-shadow: 0 3px 8px rgba(0,0,0,.15); cursor: pointer;
}
body aside.smile-filters .sf-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1.5px solid var(--sf-champ, #B8924F);
  box-shadow: 0 3px 8px rgba(0,0,0,.15); cursor: pointer;
}
body aside.smile-filters .sf-slider-labels { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; color: var(--sf-ink, #241F1D); }

@media (min-width: 961px) {
  body aside.smile-filters .sf-grab,
  body aside.smile-filters .sf-head,
  body aside.smile-filters .sf-foot,
  .sf-scrim { display: none; }
}

/* === Desktop fixes: hide mobile chrome + style active-filter chips === */

/* Desktop only — kill mobile bar and sort sheet */
@media (min-width: 961px) {
  body .smile-listing > .smile-mfilters-bar,
  body .smile-listing > .smile-msort-sheet,
  body .smile-mfilters-bar,
  body .smile-msort-sheet { display: none !important; }
}

/* Active filters area (desktop + mobile) — pretty chips */
body #js-active-search-filters .smile-active-filters .active_filters {
  margin: 0 0 20px;
  padding: 0;
  background: none;
  border: 0;
}
body #js-active-search-filters .active-filter-title {
  display: none; /* "Filtros activos" — redundant, chips speak for themselves */
}
body #js-active-search-filters .active_filters > ul,
body #js-active-search-filters .active_filters ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body #js-active-search-filters .active_filters .filter-block {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 14px;
  background: #fff;
  border: 1px solid var(--sf-line, #E3D8CC);
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--sf-ink, #241F1D);
  white-space: nowrap;
  line-height: 1.4;
}
body #js-active-search-filters .active_filters .filter-block a.js-search-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sf-line, #E3D8CC);
  color: var(--sf-ink, #241F1D);
  text-decoration: none;
  margin-left: 4px;
  font-size: 0;
  transition: background .15s ease;
}
body #js-active-search-filters .active_filters .filter-block a.js-search-link:hover {
  background: var(--sf-burgundy, #6B2C2C);
  color: #fff;
}
body #js-active-search-filters .active_filters .filter-block a.js-search-link::before {
  content: "✕";
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  font-family: "Inter", sans-serif;
}
/* Hide the broken material-icons sprite */
body #js-active-search-filters .active_filters .filter-block a.js-search-link .material-icons,
body #js-active-search-filters .active_filters .filter-block a.js-search-link i { display: none; }

/* === Active filter chip — remove old ::before, style native ×/span instead === */
body #js-active-search-filters .active_filters .filter-block a.js-search-link::before { content: none; }
body #js-active-search-filters .active_filters .filter-block a.js-search-link span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  font-family: "Inter", sans-serif;
}
/* Ensure the link is actually clickable and on top */
body #js-active-search-filters .active_filters .filter-block a.js-search-link {
  pointer-events: auto;
  z-index: 1;
  position: relative;
  font-size: 14px;
}

/* === Active filter chip v2 — <a> wrappea todo el chip, click anywhere quita filtro === */
body #js-active-search-filters .active_filters .filter-block {
  /* el <li> queda como contenedor visual; el <a> dentro hace el chip */
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  display: inline-flex;
}
body #js-active-search-filters .active_filters .filter-block a.js-search-link.sf-active-remove {
  /* override de los styles previos del circle-only */
  width: auto;
  height: auto;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--sf-line, #E3D8CC);
  color: var(--sf-ink, #241F1D);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
body #js-active-search-filters .active_filters .filter-block a.js-search-link.sf-active-remove:hover {
  background: var(--sf-burgundy, #6B2C2C);
  color: #fff;
  border-color: var(--sf-burgundy, #6B2C2C);
}
body #js-active-search-filters .active_filters .filter-block a.js-search-link.sf-active-remove .sf-active-label {
  white-space: nowrap;
}
body #js-active-search-filters .active_filters .filter-block a.js-search-link.sf-active-remove .sf-active-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sf-line, #E3D8CC);
  color: var(--sf-ink, #241F1D);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  transition: all .15s ease;
}
body #js-active-search-filters .active_filters .filter-block a.js-search-link.sf-active-remove:hover .sf-active-x {
  background: #fff;
  color: var(--sf-burgundy, #6B2C2C);
}
/* Cancel old pseudo + span overrides */
body #js-active-search-filters .active_filters .filter-block a.js-search-link::before { content: none; }
body #js-active-search-filters .active_filters .filter-block a.js-search-link span:not(.sf-active-x):not(.sf-active-label) { display: none; }

/* === Active filter chip — burgundy pill (look pre-fix), <a> wrappea el chip entero === */
body #js-active-search-filters .active_filters .filter-block a.js-search-link.sf-active-remove {
  background: var(--sf-burgundy, #6B2C2C);
  color: #fff;
  border: 1px solid var(--sf-burgundy, #6B2C2C);
  font-weight: 500;
}
body #js-active-search-filters .active_filters .filter-block a.js-search-link.sf-active-remove:hover {
  background: #4a1019;
  color: #fff;
  border-color: #4a1019;
}
body #js-active-search-filters .active_filters .filter-block a.js-search-link.sf-active-remove .sf-active-x {
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: 14px;
  width: 18px;
  height: 18px;
}
body #js-active-search-filters .active_filters .filter-block a.js-search-link.sf-active-remove:hover .sf-active-x {
  background: rgba(255,255,255,.35);
  color: #fff;
}

/* === Home Tienda Física — handoff smile_tienda (banda solo texto + marco champagne inset) === */
.tf {
  max-width: 1180px;
  margin: 0 auto;
  background: #FAF7F2;
  border-radius: 20px;
  padding: 64px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.5);
}
.tf::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(205,174,120,.4);
  border-radius: 12px;
  pointer-events: none;
}
.tf-inner { position: relative; z-index: 1; }
.tf-kick {
  display: flex; align-items: center; gap: 13px; justify-content: center;
}
.tf-kick .ln { width: 34px; height: 1px; background: #B8924F; }
.tf-kick span:not(.ln) {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #B8924F;
  font-weight: 600;
  font-family: "Inter", sans-serif;
}
.tf-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #241F1D;
  margin: 18px 0 0;
}
.tf-title em { font-style: italic; color: #6B2C2C; }
.tf-addr {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #6B6360;
  margin: 16px auto 0;
  max-width: 48ch;
}
.tf-hours {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 620px;
  margin: 34px auto 0;
  border-top: 1px solid #E3D8CC;
  border-bottom: 1px solid #E3D8CC;
}
.tf-col {
  padding: 22px 18px;
  border-left: 1px solid #E3D8CC;
  text-align: center;
}
.tf-col:first-child { border-left: 0; }
.tf-col .d {
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9A928B;
  font-weight: 600;
}
.tf-col .h {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  color: #241F1D;
  margin-top: 8px;
}
.tf-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #6B2C2C;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  padding: 15px 30px;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 34px;
}
.tf-btn svg {
  width: 15px;
  height: 15px;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.tf-btn:hover svg { transform: translateX(4px); }

@media (max-width: 720px) {
  .tf { padding: 34px 22px; }
  .tf::before { inset: 12px; }
  .tf-title { font-size: 30px; }
  .tf-hours { grid-template-columns: 1fr; }
  .tf-col { border-left: 0; border-top: 1px solid #E3D8CC; padding: 16px; }
  .tf-col:first-child { border-top: 0; }
  .tf-btn { width: 100%; justify-content: center; }
}

/* === Cabecera de categoría — borde dorado champagne + marco offset + filete interior === */
.cathero-media { position: relative; }
.cathero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(18px, 18px);
  border: 1px solid #B8924F;
  border-radius: 8px;
  z-index: 0;
  pointer-events: none;
}
.cathero-pic {
  position: relative;
  z-index: 1;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid #B8924F;
  box-shadow: 0 36px 70px -34px rgba(36,31,29,.5);
}
.cathero-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
}
.cathero-pic::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(205,174,120,.6);
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 860px) {
  .cathero-media::before { display: none; }
}