/*
Theme Name: Curada
Theme URI: https://curada.ec
Description: Tema WooCommerce para Curada — selección exclusiva de carteras y accesorios. Migrado desde Shopify (export 21 AUG 2026).
Version: 2.5.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: curada
Domain Path: /languages
Tags: woocommerce, e-commerce, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ============================================================
   CURADA — Design tokens
   ============================================================ */
:root{
  --color-oxblood: #621912;
  --color-oxblood-deep: #4A120D;
  --color-taupe: #9C7B68;
  --color-clay: #DBAB96;
  --color-blush: #EBD3C5;
  --color-oat: #F4ECE5;
  --color-background: #FFFFFF;
  --color-text: #2B1410;
  --color-white: #FFFFFF;
  --color-line: rgba(43,20,16,0.14);
  --color-line-strong: rgba(43,20,16,0.24);

  --font-display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Cormorant", Georgia, serif;

  --page-width: 1400px;
  --section-spacing: 96px;
  --gutter: 24px;
  --button-radius: 2px;
  --heading-tracking: 0px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --shadow-card: 0 1px 2px rgba(43,20,16,0.06), 0 12px 28px -18px rgba(43,20,16,0.35);
  --shadow-lift: 0 20px 48px -20px rgba(43,20,16,0.45);
  --ease: cubic-bezier(.4,0,.2,1);
  --duration: 320ms;

  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
}

@media (max-width: 989px){
  :root{ --section-spacing: 64px; }
}
@media (max-width: 749px){
  :root{ --section-spacing: 48px; --gutter: 16px; }
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg, video{ display: block; max-width: 100%; height: auto; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea{ font: inherit; color: inherit; }
h1,h2,h3,h4,h5,p,figure{ margin: 0; }
table{ border-collapse: collapse; width: 100%; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

.visually-hidden{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-to-content{
  position: absolute; top: -60px; left: 12px; z-index: 1000;
  background: var(--color-oxblood); color: var(--color-oat);
  padding: 12px 20px; font-family: var(--font-body); font-weight: 500;
  transition: top var(--duration) var(--ease);
}
.skip-to-content:focus{ top: 12px; }

:focus-visible{ outline: 2px solid var(--color-oxblood); outline-offset: 3px; }

/* ============================================================
   Type
   ============================================================ */
.h0,.h1,.h2,.h3,.h4,.h5{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--heading-tracking);
  line-height: 1.08;
  color: var(--color-text);
}
.h0{ font-size: clamp(2.75rem, 2rem + 3.2vw, 5.25rem); }
.h1{ font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem); }
.h2{ font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); }
.h3{ font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); }
.h4{ font-size: 1.125rem; font-weight: 500; }
.h5{ font-size: 0.95rem; font-weight: 500; }

.wordmark{
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 500; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--color-oxblood);
}
.eyebrow::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.eyebrow--muted{ color: var(--color-taupe); }

.quote-editorial{
  font-family: var(--font-accent); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  line-height: 1.25; color: var(--color-oxblood-deep);
}

.eu{ font-family: var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125rem; }

.rte{ font-weight: 300; }
.rte p + p{ margin-top: 1em; }
.rte a{ text-decoration: underline; text-underline-offset: 3px; }
.rte ul{ list-style: disc; padding-left: 1.2em; }
.rte ul li{ margin-top: 0.4em; }

/* ============================================================
   Layout
   ============================================================ */
.page-width{
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section{ padding-block: calc(var(--section-spacing) / 2); }
.section--tight{ padding-block: calc(var(--section-spacing) / 3); }
.section-head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap;
}
.section-head__text{ max-width: 640px; }
.section-head .eyebrow{ margin-bottom: var(--space-3); }

.divider{ height: 1px; background: var(--color-line); border: 0; margin: 0; }

.curation-mark{
  display: flex; align-items: center; gap: var(--space-4);
  margin-block: var(--section-spacing);
}
.curation-mark::before,.curation-mark::after{
  content: ""; flex: 1; height: 1px; background: var(--color-line-strong);
}
.curation-mark__dot{
  width: 9px; height: 9px; border-radius: 50%; background: var(--color-oxblood); flex: none;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 500; font-size: 0.8125rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 16px 30px; border-radius: var(--button-radius);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
  white-space: nowrap;
}
.btn--primary{ background: var(--color-oxblood); color: var(--color-oat); }
.btn--primary:hover{ background: var(--color-oxblood-deep); }
.btn--secondary{ background: transparent; color: var(--color-taupe); border-color: var(--color-taupe); }
.btn--secondary:hover{ background: var(--color-taupe); color: var(--color-oat); }
.btn--light{ background: var(--color-oat); color: var(--color-oxblood); }
.btn--light:hover{ background: var(--color-white); }
.btn--ghost-light{ background: transparent; color: var(--color-oat); border-color: rgba(244,236,229,0.5); }
.btn--ghost-light:hover{ border-color: var(--color-oat); }
.btn--block{ width: 100%; }
.btn:disabled{ opacity: 0.45; cursor: not-allowed; }
.btn--icon{ padding: 10px; border-radius: 50%; }

.link-underline{
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em;
  padding-bottom: 3px; border-bottom: 1px solid currentColor;
  transition: opacity var(--duration) var(--ease);
}
.link-underline:hover{ opacity: 0.6; }

/* ============================================================
   Promo bar (countdown)
   ============================================================ */
.promo-bar{ background: var(--color-oxblood-deep); color: var(--color-oat); }
.promo-bar__inner{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding-block: 14px; flex-wrap: wrap; text-align: left;
}
.promo-bar__message-main{
  font-family: var(--font-display); font-weight: 600; font-size: 0.875rem;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.promo-bar__message-main strong{ font-weight: 600; }
.promo-bar__link{
  display: block; margin-top: 4px; text-decoration: underline; text-underline-offset: 3px;
  font-family: var(--font-body); font-weight: 500; font-size: 0.8125rem;
  text-transform: none; letter-spacing: 0;
}
.promo-bar__timer{ display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.promo-bar__timer-sep{ font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; opacity: 0.5; }
.promo-bar__timer-unit{
  display: flex; flex-direction: column; align-items: center; min-width: 28px;
  background: transparent; color: inherit; padding: 0;
}
.promo-bar__timer-unit span{ font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1; }
.promo-bar__timer-unit label{ font-size: 0.5625rem; letter-spacing: 0.08em; margin-top: 3px; text-transform: uppercase; opacity: 0.7; }

/* ============================================================
   Announcement bar
   ============================================================ */
.announcement{
  background: var(--color-clay); color: var(--color-oxblood-deep);
  overflow: hidden; position: relative;
}
.announcement__track{
  display: flex; gap: 64px; white-space: nowrap;
  padding-block: 10px; font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em;
  animation: marquee 13.26s linear infinite;
}
.announcement__track span{ flex: none; }
.announcement--static .announcement__track{ animation: none; justify-content: center; width: 100%; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--color-background);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-line);
}
.site-header__inner{
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-5); padding-block: 18px;
}
.site-header__logo{ display: flex; align-items: center; grid-column: 2; justify-self: center; }
.site-header__logo img{ width: auto; max-width: none; height: var(--logo-height, 27px); }
@media (max-width: 420px){
  .site-header__logo img{ height: min(var(--logo-height, 27px), 21px); }
}
.site-header__logo .wordmark{ font-size: 1.375rem; color: var(--color-oxblood); }
.site-header__logo .tagline{
  display: block; font-family: var(--font-body); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-taupe); margin-top: 2px;
}

.site-nav{ display: flex; align-items: center; justify-content: flex-start; gap: var(--space-5); grid-column: 1; min-width: 0; }
.site-nav a{
  position: relative; font-size: 0.8125rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 0;
}
.site-nav a::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--color-oxblood); transition: right var(--duration) var(--ease);
}
.site-nav a:hover::after{ right: 0; }
.site-nav .has-dropdown{ position: relative; }
.site-nav__dropdown{
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  background: var(--color-white); border: 1px solid var(--color-line); min-width: 220px;
  padding: var(--space-3) 0; box-shadow: var(--shadow-card); color: var(--color-text);
  opacity: 0; visibility: hidden; transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.site-nav .has-dropdown:hover .site-nav__dropdown{ opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.site-nav__dropdown a{ display: block; padding: 8px 20px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--color-text); }
.site-nav__dropdown a::after{ display: none; }
.site-nav__dropdown a:hover{ background: var(--color-oat); }

.site-header__actions{ display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); grid-column: 3; }
.header-icon-btn{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 49px; }
.header-icon-btn svg{ width: 20px; height: 20px; }
.cart-count{
  position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 50%; background: var(--color-oxblood); color: var(--color-oat);
  font-size: 0.625rem; font-weight: 500; display: flex; align-items: center; justify-content: center;
}
.cart-count[hidden]{ display: none; }

.mobile-menu-toggle{ display: none; grid-column: 1; }
.mobile-menu-toggle svg{ width: 28.6px; height: 28.6px; }
.site-header__search{ display: none; }
.search-inline{ position: relative; display: flex; align-items: center; }
.search-inline input{
  width: 220px; border: 1px solid var(--color-line-strong); background: var(--color-oat); color: var(--color-text);
  padding: 9px 14px; font-size: 0.8125rem;
}
.search-inline input:focus{ outline: none; border-color: var(--color-oxblood); }
.search-inline__form{
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 10;
  display: none; background: var(--color-white); padding: 10px;
  border: 1px solid var(--color-line); box-shadow: var(--shadow-card);
}
.search-inline.is-active .search-inline__form{ display: flex; }
.search-inline.is-active .search-inline__form input{ width: 240px; }

@media (max-width: 1279px){
  .site-nav{ display: none; }
  .mobile-menu-toggle{ display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 49px; }
}

.mobile-nav{
  position: fixed; inset: 0; z-index: var(--z-drawer);
  visibility: hidden; pointer-events: none;
}
.mobile-nav[open]{ visibility: visible; pointer-events: auto; }
.mobile-nav__overlay{
  position: absolute; inset: 0; background: rgba(43,20,16,0.45);
  opacity: 0; transition: opacity var(--duration) var(--ease);
}
.mobile-nav[open] .mobile-nav__overlay{ opacity: 1; }
.mobile-nav__panel{
  position: absolute; top: 0; left: 0; bottom: 0; width: min(340px, 86vw);
  background: var(--color-oat); padding: var(--space-6) var(--space-5);
  transform: translateX(-100%); transition: transform var(--duration) var(--ease);
  overflow-y: auto;
}
.mobile-nav[open] .mobile-nav__panel{ transform: translateX(0); }
.mobile-nav__close{ margin-bottom: var(--space-6); }
.mobile-nav a{
  display: block; padding: 14px 0; font-family: var(--font-display); font-size: 1.25rem;
  border-bottom: 1px solid var(--color-line);
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background: var(--color-oxblood-deep); color: var(--color-oat); }
.site-footer .wordmark{ color: var(--color-oat); font-size: 1.5rem; }
.footer-grid{
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-7);
  padding-block: var(--space-9);
}
.footer-col h5{
  text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.14em;
  color: var(--color-clay); margin-bottom: var(--space-4); font-weight: 500;
}
.footer-col ul li{ margin-bottom: 10px; }
.footer-col a{ font-size: 0.875rem; color: rgba(244,236,229,0.82); }
.footer-col a:hover{ color: var(--color-oat); }
.footer-brand p{ color: rgba(244,236,229,0.72); margin-top: var(--space-3); max-width: 320px; font-size: 0.875rem; }
.footer-social{ display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.footer-social a{
  width: 34px; height: 49px; border: 1px solid rgba(244,236,229,0.3); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.footer-social svg{ width: 15px; height: 15px; }
.footer-newsletter input{
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(244,236,229,0.4);
  padding: 10px 0; color: var(--color-oat); font-size: 0.875rem;
}
.footer-newsletter input::placeholder{ color: rgba(244,236,229,0.55); }
.footer-newsletter form{ display: flex; align-items: flex-end; gap: var(--space-3); }
.footer-newsletter button{ padding-bottom: 10px; }
.footer-bottom{
  border-top: 1px solid rgba(244,236,229,0.16);
  padding-block: var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  font-size: 0.75rem; color: rgba(244,236,229,0.6);
}
.footer-payment{ display: flex; gap: 8px; align-items: center; }
.footer-payment svg{ height: 20px; width: auto; }

@media (max-width: 989px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px){
  .footer-grid{ grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ============================================================
   Product card (placard style)
   ============================================================ */
.product-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
}
@media (max-width: 989px){ .product-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
@media (max-width: 480px){ .product-grid{ gap: var(--space-3); } }

.product-card{ display: block; }
.product-card__media{
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  background: var(--color-blush); margin-bottom: var(--space-3);
}
.product-card__media.bg-oat{ background: var(--color-oat); }
.product-card__media.bg-none{ background: transparent; }
.product-card__frame{ position: absolute; inset: 0; display: block; }
.product-card__frame img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease), opacity 400ms var(--ease);
}
.product-card__frame img.product-card__img--back{ opacity: 0; }
.product-card:hover .product-card__frame img.product-card__img--front{ opacity: 0; }
.product-card:hover .product-card__frame img.product-card__img--back{ opacity: 1; }
.product-card__placeholder{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--color-taupe);
}
.product-card__placeholder svg{ width: 30%; height: 30%; opacity: 0.5; }
.product-card__number{
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.08em; color: var(--color-oxblood);
  background: rgba(244,236,229,0.88); padding: 4px 9px;
}
.product-card__badge{
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--color-oxblood); color: var(--color-oat); padding: 4px 9px;
}
.product-card__quick-add{
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3;
  opacity: 0; transform: translateY(8px); display: flex; flex-direction: column; gap: 6px;
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.product-card:hover .product-card__quick-add, .product-card:focus-within .product-card__quick-add{ opacity: 1; transform: translateY(0); }
.product-card__vendor{ font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-taupe); margin-bottom: 4px; }
.product-card__title{ font-family: var(--font-display); font-size: 1rem; font-weight: 400; margin-bottom: 4px; }
.product-card__price{ font-size: 0.875rem; color: var(--color-oxblood); display: flex; gap: 8px; align-items: baseline; }
.product-card__price s{ color: var(--color-taupe); font-weight: 400; }

.product-card__swatches{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.swatch-chip{
  font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--color-taupe);
  border: 1px solid var(--color-line); padding: 3px 8px;
}
.swatch-chip--more{ color: var(--color-oxblood); border-color: var(--color-line-strong); }

.qa-swatches{ display: flex; flex-wrap: wrap; gap: 4px; }
.qa-swatch{
  font-size: 0.6875rem; background: var(--color-white); border: 1px solid var(--color-line-strong);
  padding: 5px 9px; transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.qa-swatch:hover{ border-color: var(--color-oxblood); }
.qa-swatch.is-selected{ background: var(--color-oxblood); border-color: var(--color-oxblood); color: var(--color-oat); }
.qa-swatch:disabled{ opacity: 0.4; text-decoration: line-through; cursor: not-allowed; }

.featured__cta{ display: flex; justify-content: center; margin-top: var(--space-7); }

/* ============================================================
   Hero / Image banner
   ============================================================ */
.hero{
  position: relative; display: flex; align-items: flex-end;
  min-height: 78vh; background: var(--color-oxblood); color: var(--color-oat); overflow: hidden;
}
.hero--no-media{ align-items: center; }
.hero__media{ position: absolute; inset: 0; }
.hero__media img{ width: 100%; height: 100%; object-fit: cover; }
.hero__scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(74,18,13,0.08), rgba(74,18,13,0.28));
}
.hero__content{ position: relative; z-index: 2; padding: var(--space-9) 0; max-width: 540px; }
.hero__content .eyebrow{ color: var(--color-clay); margin-bottom: var(--space-4); }
.hero__content .h0{ color: var(--color-oat); margin-bottom: var(--space-5); }
.hero__content p{ font-size: 1.0625rem; color: rgba(244,236,229,0.85); max-width: 480px; margin-bottom: var(--space-6); }
.hero__actions{ display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero--small{ min-height: 46vh; }

.hero--no-media{ background: var(--color-background); color: var(--color-text); }
.hero--no-media .hero__content .eyebrow{ color: var(--color-oxblood); }
.hero--no-media .hero__content .h0{ color: var(--color-text); }
.hero--no-media .hero__content p{ color: var(--color-taupe); }
.hero--no-media .btn--light{ background: var(--color-oxblood); color: var(--color-oat); }
.hero--no-media .btn--light:hover{ background: var(--color-oxblood-deep); }
.hero--no-media .btn--ghost-light{ color: var(--color-taupe); border-color: var(--color-taupe); }
.hero--no-media .btn--ghost-light:hover{ background: var(--color-taupe); color: var(--color-oat); }

@media (max-width: 749px){
  .hero{ min-height: 68vh; }
  .hero__content{ padding-block: var(--space-8); }
}

/* ============================================================
   Image with text
   ============================================================ */
.split{
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0;
}
.split__media{ aspect-ratio: 4/5; overflow: hidden; background: var(--color-blush); }
.split__media img{ width: 100%; height: 100%; object-fit: cover; }
.split__text{ padding: var(--space-8) clamp(24px, 6vw, 96px); }
.split__text .quote-editorial{ margin-block: var(--space-5); }
.split--reverse{ direction: rtl; }
.split--reverse .split__text{ direction: ltr; }
@media (max-width: 849px){
  .split{ grid-template-columns: 1fr; direction: ltr !important; }
  .split__text{ padding: var(--space-6) var(--gutter); }
}

/* ============================================================
   Service banner (envío / atención / pago)
   ============================================================ */
.service-banner{ border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.service-banner__grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-7) var(--space-5);
}
.service-banner__item{ display: flex; flex-direction: column; align-items: center; text-align: center; }
.service-banner__icon{ color: var(--color-oxblood); margin-bottom: var(--space-4); line-height: 0; }
.service-banner__icon svg{ width: 28px; height: 28px; }
.service-banner__title{
  font-family: var(--font-body); font-weight: 500; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-3);
}
.service-banner__text{ font-size: 0.875rem; color: var(--color-taupe); max-width: 32ch; }
.service-banner__link{
  margin-top: 6px; font-size: 0.875rem; color: var(--color-oxblood);
  text-decoration: underline; text-underline-offset: 3px;
}
.service-banner__link:hover{ opacity: 0.7; }

/* ============================================================
   Collection list tiles
   ============================================================ */
.tile-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.tile{ position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; background: var(--color-taupe); }
.tile img{ width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.tile:hover img{ transform: scale(1.05); }
.tile__scrim{ position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(43,20,16,0.65)); }
.tile__label{
  position: absolute; left: var(--space-5); bottom: var(--space-5); z-index: 2; color: var(--color-oat);
}
.tile__label .h4{ color: var(--color-oat); margin-bottom: 4px; }
.tile__label span{ font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-clay); }
@media (max-width: 989px){ .tile-grid{ grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Look book (shoppable hotspots)
   ============================================================ */
.lookbook{ padding-block: var(--section-spacing); }
.lookbook__head{ text-align: center; margin-bottom: var(--space-6); }
.lookbook__head .eyebrow{ margin-bottom: var(--space-3); }
.lookbook__head .h2{ text-transform: uppercase; letter-spacing: 0.02em; }
.lookbook__frame{
  position: relative; overflow: hidden; background: var(--color-blush);
  aspect-ratio: 3/4;
}
.lookbook__frame > img{ width: 100%; height: 100%; object-fit: cover; }
.lookbook__placeholder{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--color-taupe);
}
.lookbook__placeholder svg{ width: 14%; height: 14%; opacity: 0.45; }

.lookbook__hotspot{
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.lookbook__hotspot-dot{
  position: relative; z-index: 2; width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-oat); box-shadow: 0 2px 10px rgba(43,20,16,0.4);
}
.lookbook__hotspot-pulse{
  position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; border-radius: 50%;
  transform: translate(-50%, -50%); background: rgba(244,236,229,0.75);
  animation: lookbook-pulse 2s var(--ease) infinite;
}
.lookbook__hotspot:hover .lookbook__hotspot-dot{ background: var(--color-white); }
@keyframes lookbook-pulse{
  0%{ transform: translate(-50%, -50%) scale(1); opacity: 0.75; }
  70%{ transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
  100%{ transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

.lookbook__slider{ position: relative; }
.lookbook__viewport{ overflow: hidden; }
.lookbook__track{
  display: flex; will-change: transform;
  transition: transform 480ms var(--ease);
}
.lookbook__slide{
  flex: 0 0 100%; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 300px);
  justify-content: center; gap: var(--space-7); align-items: center;
}

.lookbook__arrow{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--color-background); border: 1px solid var(--color-line);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card); color: var(--color-text);
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.lookbook__arrow:hover{ background: var(--color-oat); border-color: var(--color-line-strong); }
.lookbook__arrow svg{ width: 11px; height: 11px; }
.lookbook__arrow--prev{ left: -14px; }
.lookbook__arrow--next{ right: -14px; }

.lookbook__product{ padding-top: var(--space-2); }
.lookbook__sheet-header{ display: none; }
.lookbook__product-media{
  display: block; position: relative; aspect-ratio: 4/5; max-width: 260px;
  background: var(--color-blush); overflow: hidden; margin-bottom: var(--space-4);
}
.lookbook__product-media img{ width: 100%; height: 100%; object-fit: cover; }
.lookbook__product-badge{
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--color-oxblood); color: var(--color-oat);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; padding: 4px 9px;
}
.lookbook__product-title{
  display: block; font-family: var(--font-display); font-size: 1.0625rem; margin-bottom: 6px;
}
.lookbook__product-cta{ margin-top: var(--space-5); }
.lookbook__product-empty{ color: var(--color-taupe); font-size: 0.875rem; }
/* Look sin producto: se reserva el mismo espacio que un look completo,
   para que la fila no se descuadre mientras se asignan los productos. */
.lookbook__product-body--empty .lookbook__product-media{
  background: var(--color-oat); border: 1px dashed var(--color-line);
}
.lookbook__product-title--empty{ color: var(--color-taupe); }
.lookbook__product-cta--empty{
  opacity: 0.4; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.lookbook__product.is-flash{ animation: lookbook-flash 700ms var(--ease); }
@keyframes lookbook-flash{
  0%{ opacity: 1; }
  25%{ opacity: 0.35; }
  100%{ opacity: 1; }
}

.lookbook__dots{ display: flex; justify-content: center; gap: 8px; margin-top: var(--space-5); }
.lookbook__dot{
  width: 7px; height: 7px; border-radius: 50%; padding: 0;
  background: var(--color-line-strong); transition: background var(--duration) var(--ease);
}
.lookbook__dot.is-active{ background: var(--color-oxblood); }

@media (max-width: 899px){
  .lookbook__slide{ position: relative; grid-template-columns: minmax(0, 460px); gap: 0; }
  .lookbook__arrow--prev{ left: 6px; }
  .lookbook__arrow--next{ right: 6px; }
  .lookbook__arrow{ width: 38px; height: 38px; }
  .lookbook__product-media{ max-width: 108px; margin: 0; }
  .lookbook__product-body{ display: grid; grid-template-columns: 108px 1fr; gap: var(--space-4); align-items: start; text-align: left; }
  .lookbook__product-info{ min-width: 0; }
  .lookbook__product-info .product-card__price{ margin-top: 4px; }
  .lookbook__product-info .product-card__swatches{ margin-top: 8px; }

  /* Product becomes a sheet that slides up over the image when the dot is tapped.
     Anchored to the slide (not the viewport) because the track's translateX
     would otherwise capture position:fixed. */
  .lookbook__product{
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    background: var(--color-background);
    transform: translateY(100%);
    transition: transform var(--duration) var(--ease);
    max-height: 100%; overflow-y: auto;
    padding: 0 var(--space-5) var(--space-5);
    box-shadow: 0 -14px 34px -18px rgba(43,20,16,0.5);
  }
  .lookbook__product.is-open{ transform: translateY(0); }
  .lookbook__sheet-header{
    display: flex; align-items: center; justify-content: space-between;
    padding-block: var(--space-4); margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-line);
    position: sticky; top: 0; background: var(--color-background);
  }
  .lookbook__sheet-header .eu{ color: var(--color-text); }
}

/* ============================================================
   Editorial quote section
   ============================================================ */
.quote-section{ background: var(--color-blush); text-align: center; padding-block: var(--space-9); }
.quote-section .quote-editorial{ max-width: 780px; margin-inline: auto; }
.quote-section cite{ display: block; margin-top: var(--space-5); font-style: normal; }

/* ============================================================
   Newsletter
   ============================================================ */
.newsletter{ background: var(--color-oxblood); color: var(--color-oat); text-align: center; }
.newsletter .h2{ color: var(--color-oat); }
.newsletter p{ color: rgba(244,236,229,0.8); max-width: 460px; margin: var(--space-4) auto var(--space-6); }
.newsletter form{ display: flex; gap: var(--space-3); max-width: 420px; margin: 0 auto; }
.newsletter input{
  flex: 1; background: transparent; border: 1px solid rgba(244,236,229,0.4); color: var(--color-oat);
  padding: 15px 18px; font-size: 0.875rem;
}
.newsletter input::placeholder{ color: rgba(244,236,229,0.55); }
.newsletter__success{ color: var(--color-clay); margin-top: var(--space-4); font-size: 0.875rem; }
@media (max-width: 599px){ .newsletter form{ flex-direction: column; } }

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb{ display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.75rem; color: var(--color-taupe); padding-block: var(--space-4); }
.breadcrumb a:hover{ color: var(--color-oxblood); }
.breadcrumb span[aria-hidden]{ opacity: 0.5; }

/* ============================================================
   Product page
   ============================================================ */
.product{
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 5vw, 80px);
  align-items: flex-start;
}
.product__gallery{ position: sticky; top: 96px; display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.product__gallery--thumbs{ grid-template-columns: 84px 1fr; }
.product__thumbs{ display: flex; flex-direction: column; gap: var(--space-3); max-height: 640px; overflow-y: auto; }
.product__thumb{
  border: 1px solid transparent; cursor: pointer; background: transparent; aspect-ratio: 1;
  transition: border-color var(--duration) var(--ease);
}
.product__thumb[aria-current="true"]{ border-color: var(--color-oxblood); }
.product__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.product__main-media{ position: relative; background: transparent; aspect-ratio: 4/5; overflow: hidden; }
.product__main-media img{ width: 100%; height: 100%; object-fit: cover; }
.product__count{
  position: absolute; bottom: 14px; right: 14px; background: rgba(43,20,16,0.65); color: var(--color-oat);
  font-size: 0.6875rem; padding: 4px 10px; letter-spacing: 0.05em;
}
.product__placeholder{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--color-taupe); }
.product__placeholder svg{ width: 22%; height: 22%; opacity: 0.45; }

.product__info{ padding-top: var(--space-2); }
.product__vendor{ font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-taupe); margin-bottom: var(--space-2); }
.product__title{ margin-bottom: var(--space-3); }
.product__price-row{ display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-5); }
.product__price{ font-family: var(--font-display); font-size: 1.375rem; color: var(--color-oxblood); }
.product__price s{ color: var(--color-taupe); font-size: 1rem; font-weight: 400; }
.product__price-note{ font-size: 0.75rem; color: var(--color-taupe); }

.product__description{ font-size: 0.9375rem; margin-bottom: var(--space-6); max-width: 52ch; }
.product__description.is-clamped{ max-height: 4.8em; overflow: hidden; }
.product__read-more{ font-size: 0.75rem; text-decoration: underline; text-underline-offset: 3px; margin-top: 6px; }

.option-group{ margin-bottom: var(--space-5); }
.option-group__label{ display: flex; justify-content: space-between; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-3); }
.option-group__label .current-value{ color: var(--color-taupe); text-transform: none; letter-spacing: 0; }
.swatch-list{ display: flex; flex-wrap: wrap; gap: 10px; }
.swatch{
  min-width: 46px; height: 46px; padding: 0 14px; border: 1px solid var(--color-line-strong);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem;
  background: var(--color-oat); cursor: pointer; transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.swatch:hover{ border-color: var(--color-oxblood); }
.swatch.is-selected{ background: var(--color-oxblood); border-color: var(--color-oxblood); color: var(--color-oat); }
.swatch.is-disabled{ opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
.swatch--color{ width: 34px; height: 49px; min-width: 34px; border-radius: 50%; padding: 0; border-width: 2px; border-color: transparent; box-shadow: 0 0 0 1px var(--color-line-strong); }
.swatch--color.is-selected{ box-shadow: 0 0 0 1px var(--color-oxblood); border-color: var(--color-oat); }

.qty-stepper{ display: inline-flex; align-items: center; border: 1px solid var(--color-line-strong); }
.qty-stepper button{ width: 40px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.qty-stepper input{ width: 42px; text-align: center; border: 0; background: transparent; height: 48px; -moz-appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

.product__form-row{ display: flex; gap: var(--space-3); align-items: stretch; margin-bottom: var(--space-4); }
.product__form-row .btn{ flex: 1; height: 48px; padding-block: 0; }
.product__stock{ font-size: 0.8125rem; margin-bottom: var(--space-5); display: flex; align-items: center; gap: 8px; }
.product__stock::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4c7a4c; }
.product__stock.is-out::before{ background: var(--color-oxblood); }

.trust-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-block: var(--space-6); padding-block: var(--space-5); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.trust-row__item{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; font-size: 0.75rem; color: var(--color-taupe); }
.trust-row__item svg{ width: 22px; height: 22px; color: var(--color-oxblood); }

.accordion-group .accordion{ border-bottom: 1px solid var(--color-line); }
.accordion__trigger{
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; font-family: var(--font-body); font-weight: 500; font-size: 0.875rem;
  text-transform: uppercase; letter-spacing: 0.06em; text-align: left;
}
.accordion__icon{ width: 12px; height: 12px; position: relative; flex: none; }
.accordion__icon::before,.accordion__icon::after{
  content: ""; position: absolute; background: var(--color-oxblood); transition: transform var(--duration) var(--ease);
}
.accordion__icon::before{ top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.accordion__icon::after{ left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.accordion[open] .accordion__icon::after{ transform: translateX(-50%) rotate(90deg); opacity: 0; }
.accordion__panel{ padding-bottom: 18px; font-size: 0.875rem; color: var(--color-text); }
.accordion__panel .rte{ font-size: 0.875rem; }
details.accordion > summary{ list-style: none; cursor: pointer; }
details.accordion > summary::-webkit-details-marker{ display: none; }

.related-products{ margin-top: var(--section-spacing); }

/* ============================================================
   Collection page
   ============================================================ */
.collection-banner{ background: var(--color-oxblood); color: var(--color-oat); padding-block: var(--space-8); text-align: center; }
.collection-banner .h1{ color: var(--color-oat); }
.collection-banner p{ color: rgba(244,236,229,0.75); max-width: 560px; margin: var(--space-3) auto 0; }

.collection-toolbar{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-5); flex-wrap: wrap;
}
.collection-toolbar__count{ font-size: 0.8125rem; color: var(--color-taupe); }
.select-wrap{ position: relative; display: inline-flex; align-items: center; }
.select-wrap select{
  appearance: none; border: 1px solid var(--color-line-strong); background: var(--color-oat);
  padding: 10px 32px 10px 14px; font-size: 0.8125rem;
}
.select-wrap svg{ position: absolute; right: 12px; width: 10px; pointer-events: none; }

.facets{ display: flex; gap: var(--space-3); flex-wrap: wrap; }
.facets summary{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--color-line-strong); padding: 8px 14px; font-size:0.75rem; text-transform: uppercase; letter-spacing:.06em; cursor:pointer; }
.facets details{ position: relative; }
.facets .facet-panel{ position:absolute; top:100%; left:0; margin-top:8px; background:var(--color-white); border:1px solid var(--color-line); padding: var(--space-4); min-width: 220px; z-index: 5; box-shadow: var(--shadow-card); }
.facet-panel label{ display:flex; gap:8px; align-items:center; font-size:0.8125rem; padding: 5px 0; }

.pagination{ display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-8); }
.pagination a, .pagination span{ width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; }
.pagination a:hover{ background: var(--color-blush); }
.pagination .is-current{ background: var(--color-oxblood); color: var(--color-oat); }

.empty-state{ text-align: center; padding-block: var(--space-9); }
.empty-state p{ color: var(--color-taupe); margin-block: var(--space-4) var(--space-6); }

/* ============================================================
   Cart drawer
   ============================================================ */
.cart-drawer{ position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; pointer-events: none; }
.cart-drawer[open]{ visibility: visible; pointer-events: auto; }
.cart-drawer__overlay{ position: absolute; inset: 0; background: rgba(43,20,16,0.45); opacity: 0; transition: opacity var(--duration) var(--ease); }
.cart-drawer[open] .cart-drawer__overlay{ opacity: 1; }
.cart-drawer__panel{
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 92vw);
  background: var(--color-oat); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--duration) var(--ease);
}
.cart-drawer[open] .cart-drawer__panel{ transform: translateX(0); }
.cart-drawer__header{ display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); border-bottom: 1px solid var(--color-line); }
.cart-drawer__header h2{ font-family: var(--font-display); font-size: 1.25rem; }
.cart-drawer__free-ship{ padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-line); font-size: 0.75rem; }
.cart-drawer__free-ship-bar{ height: 3px; background: var(--color-blush); margin-top: 8px; }
.cart-drawer__free-ship-bar span{ display: block; height: 100%; background: var(--color-oxblood); transition: width var(--duration) var(--ease); }
.cart-drawer__items{ flex: 1; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.cart-line{ display: grid; grid-template-columns: 84px 1fr; gap: var(--space-4); }
.cart-line__media{ background: var(--color-blush); aspect-ratio: 4/5; overflow: hidden; }
.cart-line__media img{ width: 100%; height: 100%; object-fit: cover; }
.cart-line__title{ font-family: var(--font-display); font-size: 0.9375rem; margin-bottom: 4px; }
.cart-line__variant{ font-size: 0.75rem; color: var(--color-taupe); margin-bottom: 8px; }
.cart-line__row{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cart-line__price{ font-size: 0.875rem; }
.cart-line__remove{ font-size: 0.75rem; text-decoration: underline; text-underline-offset: 3px; color: var(--color-taupe); }
.cart-drawer__footer{ padding: var(--space-5); border-top: 1px solid var(--color-line); }
.cart-drawer__subtotal{ display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 1.0625rem; margin-bottom: var(--space-4); }
.cart-drawer__note{ font-size: 0.75rem; color: var(--color-taupe); margin-bottom: var(--space-4); }
.cart-drawer__empty{ padding: var(--space-8) var(--space-5); text-align: center; color: var(--color-taupe); }

/* ============================================================
   Cart page
   ============================================================ */
.cart-table{ width: 100%; }
.cart-table th{ text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-taupe); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-line); font-weight: 500; }
.cart-table td{ padding-block: var(--space-5); border-bottom: 1px solid var(--color-line); vertical-align: top; }
.cart-table .cart-line__media{ width: 96px; }
.cart-summary{ background: var(--color-blush); padding: var(--space-6); position: sticky; top: 110px; }

@media (max-width: 989px){
  .product{ grid-template-columns: 1fr; }
  .product__gallery{ position: static; }
  .trust-row{ grid-template-columns: 1fr; }
  .cart-summary{ position: static; margin-top: var(--space-6); }
}
@media (max-width: 599px){
  .product__gallery{ grid-template-columns: 1fr; }
  .product__thumbs{ flex-direction: row; overflow-x: auto; max-height: none; }
  .product__thumb{ min-width: 64px; width: 64px; }
}

/* ============================================================
   Account / forms
   ============================================================ */
.form-card{ max-width: 440px; margin: 0 auto; background: var(--color-white); border: 1px solid var(--color-line); padding: var(--space-7) clamp(24px, 5vw, 56px); }
.form-card .h2{ text-align: center; margin-bottom: var(--space-6); }
.form-field{ display: block; margin-bottom: var(--space-4); }
.form-field label{ display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; color: var(--color-taupe); }
.form-field input, .form-field textarea, .form-field select{
  width: 100%; border: 1px solid var(--color-line-strong); background: var(--color-oat); padding: 12px 14px; font-size: 0.9375rem;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ outline: none; border-color: var(--color-oxblood); }
.form-check{ display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; margin-bottom: var(--space-5); }
.form-error{ background: var(--color-blush); border-left: 3px solid var(--color-oxblood); padding: 12px 16px; margin-bottom: var(--space-5); font-size: 0.875rem; }
.form-links{ display: flex; justify-content: space-between; margin-top: var(--space-5); font-size: 0.8125rem; }
.form-links a{ text-decoration: underline; text-underline-offset: 3px; color: var(--color-taupe); }

.account-header{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.account-table{ width: 100%; }
.account-table th{ text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-taupe); padding-bottom: 12px; border-bottom: 1px solid var(--color-line); font-weight: 500; }
.account-table td{ padding-block: 14px; border-bottom: 1px solid var(--color-line); font-size: 0.875rem; }
.address-card{ border: 1px solid var(--color-line); padding: var(--space-5); }
.address-card + .address-card{ margin-top: var(--space-4); }
.form-grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
@media (max-width: 599px){ .form-grid-2{ grid-template-columns: 1fr; } }

/* ============================================================
   FAQ / policy pages
   ============================================================ */
.faq__intro{ text-align: center; color: var(--color-taupe); margin-bottom: var(--space-7); }
.faq__list{ border-top: 1px solid var(--color-line); }
.faq__footer{
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid var(--color-line); color: var(--color-taupe); font-size: 0.9375rem;
}

/* ============================================================
   Contact page
   ============================================================ */
.contact__head{ text-align: center; max-width: 620px; margin: 0 auto var(--space-8); }
.contact__intro{ color: var(--color-taupe); margin-top: var(--space-4); }
.contact__grid{
  display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(32px, 6vw, 80px);
  align-items: start; max-width: 1000px; margin-inline: auto;
}
.contact__form-col .btn{ margin-top: var(--space-2); }
.contact__form-col textarea{ resize: vertical; }
.contact__success{
  background: var(--color-blush); border-left: 3px solid var(--color-oxblood);
  padding: var(--space-4) var(--space-5); font-size: 0.9375rem;
}
.contact__details{ display: flex; flex-direction: column; gap: var(--space-6); }
.contact__detail{ display: grid; grid-template-columns: 26px 1fr; gap: var(--space-4); align-items: start; }
.contact__detail-icon{ color: var(--color-oxblood); line-height: 0; }
.contact__detail-icon svg{ width: 22px; height: 22px; }
.contact__detail-title{
  font-family: var(--font-body); font-weight: 500; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px;
}
.contact__detail-text{ font-size: 0.9375rem; color: var(--color-taupe); }
.contact__detail-link{
  display: inline-block; margin-top: 4px; font-size: 0.9375rem; color: var(--color-oxblood);
  text-decoration: underline; text-underline-offset: 3px;
}
.contact__detail-link:hover{ opacity: 0.7; }
@media (max-width: 849px){
  .contact__grid{ grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ============================================================
   Misc pages
   ============================================================ */
.page-content{ max-width: 760px; margin-inline: auto; padding-block: var(--space-8); }
.page-content .h1{ margin-bottom: var(--space-6); text-align: center; }

.error-page{ text-align: center; padding-block: var(--space-9); }
.error-page .eyebrow{ justify-content: center; margin-bottom: var(--space-4); }

.search-results-count{ color: var(--color-taupe); font-size: 0.875rem; margin-bottom: var(--space-6); }
.search-form-page{ display: flex; gap: var(--space-3); max-width: 520px; margin: 0 auto var(--space-8); }
.search-form-page input{ flex: 1; border: 1px solid var(--color-line-strong); background: var(--color-oat); padding: 14px 16px; }

/* ============================================================
   Responsive grid helpers
   ============================================================ */
@media (max-width: 749px){
  .product-grid.cols-desktop-4{ grid-template-columns: repeat(2, 1fr); }
  .tile-grid{ grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Botón flotante de WhatsApp
   ============================================================ */
.whatsapp-float{
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
}
.whatsapp-float__btn{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: var(--color-text, #2b1410);
  box-shadow: 0 6px 20px rgba(43,20,16,0.22);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.whatsapp-float__btn svg{ width: 27px; height: 27px; position: relative; z-index: 2; }

/* Anillo que late en reposo para que el botón no pase desapercibido */
.whatsapp-float__ring{
  position: absolute; inset: 0; border-radius: 50%;
  background: #25D366; opacity: 0.55;
  animation: whatsapp-pulse 2.4s var(--ease) infinite;
}
@keyframes whatsapp-pulse{
  0%{ transform: scale(1); opacity: 0.5; }
  70%{ transform: scale(1.55); opacity: 0; }
  100%{ transform: scale(1.55); opacity: 0; }
}

/* Etiqueta: oculta en reposo, se despliega al pasar el cursor */
.whatsapp-float__label{
  font-family: var(--font-body); font-size: 0.8125rem; white-space: nowrap;
  background: var(--color-oxblood-deep); color: var(--color-oat);
  padding: 9px 14px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(43,20,16,0.18);
  opacity: 0; transform: translateX(10px);
  pointer-events: none;
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.whatsapp-float:hover .whatsapp-float__label,
.whatsapp-float:focus-visible .whatsapp-float__label{ opacity: 1; transform: translateX(0); }
.whatsapp-float:hover .whatsapp-float__btn,
.whatsapp-float:focus-visible .whatsapp-float__btn{
  transform: scale(1.09) rotate(-6deg);
  box-shadow: 0 10px 26px rgba(43,20,16,0.3);
}
/* El anillo se detiene en hover: ya hay feedback suficiente */
.whatsapp-float:hover .whatsapp-float__ring{ animation-play-state: paused; opacity: 0; }

@media (max-width: 749px){
  .whatsapp-float{ right: 16px; bottom: 16px; }
  .whatsapp-float__btn{ width: 50px; height: 50px; }
  .whatsapp-float__btn svg{ width: 24px; height: 24px; }
  /* En móvil la etiqueta estorbaría: el icono se explica solo */
  .whatsapp-float__label{ display: none; }
}

/* Se aparta cuando hay un panel abierto: en móvil el botón quedaba
   justo encima del CTA de la hoja del look book y bloqueaba el toque. */
body:has(.mobile-nav[open]) .whatsapp-float,
body:has(.cart-drawer[open]) .whatsapp-float,
body:has(.lookbook__product.is-open) .whatsapp-float{
  opacity: 0; pointer-events: none; transform: translateY(12px);
}
.whatsapp-float{
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

@media (prefers-reduced-motion: reduce){
  .whatsapp-float__ring{ animation: none; opacity: 0; }
  .whatsapp-float:hover .whatsapp-float__btn,
  .whatsapp-float:focus-visible .whatsapp-float__btn{ transform: none; }
}

/* === Header overrides (v2.1) === */
.site-header__logo--text{display:inline-flex;align-items:center;text-decoration:none}
.site-header__wordmark{
	font-family:'Outfit',sans-serif;
	font-weight:600;
	letter-spacing:.14em;
	font-size:1.65rem;
	color:var(--color-oxblood,#621912);
	line-height:1;
}
@media(min-width:768px){.site-header__wordmark{font-size:1.9rem}}

/* Scrolling promo ticker */
.promo-ticker{
	background:#e8bfa8;
	color:var(--color-oxblood,#621912);
	overflow:hidden;
	border-bottom:1px solid rgba(98,25,18,.08);
}
.promo-ticker__track{
	display:flex;
	gap:3.5rem;
	white-space:nowrap;
	padding:.6rem 0;
	font-family:'Outfit',sans-serif;
	font-size:.72rem;
	font-weight:500;
	letter-spacing:.18em;
	text-transform:uppercase;
	animation:promoScroll 45s linear infinite;
	width:max-content;
}
.promo-ticker__item{flex:none;position:relative;padding-right:3.5rem}
.promo-ticker__item::after{
	content:"·";
	position:absolute;
	right:0;top:50%;transform:translate(50%,-55%);
	opacity:.55;
}
@keyframes promoScroll{
	from{transform:translateX(0)}
	to{transform:translateX(-50%)}
}
.promo-ticker:hover .promo-ticker__track{animation-play-state:paused}

/* === Header layout (v2.2) : logo left, nav center, actions right === */
.site-header__inner{
	grid-template-columns: auto 1fr auto !important;
}
.site-header__logo{
	grid-column: 1 !important;
	justify-self: start !important;
}
.site-nav{
	grid-column: 2 !important;
	justify-content: center !important;
	gap: var(--space-5);
}
.site-header__actions{
	grid-column: 3 !important;
}

/* === Logo + Hero (v2.3) === */
.site-header__logo-img{
	height: 49px;
	width: auto;
	max-width: 220px;
	display: block;
}
@media(max-width:420px){
	.site-header__logo-img{ height: 37px; max-width: 190px; }
}
/* Hide any leftover wordmark text if the fallback path is used */
.site-header__wordmark{ display: none; }

/* === Featured collection: horizontal scroll (v2.4) === */
.featured--scroll{ padding-inline: 0; }
.featured--scroll .section-head{ padding-inline: max(24px, (100vw - var(--page-width))/2); margin-bottom: 24px; }
.product-scroll{
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
}
.product-scroll::-webkit-scrollbar{ display: none; }
.product-scroll__track{
	display: flex;
	gap: 24px;
	padding-inline: max(24px, (100vw - var(--page-width))/2);
	padding-block: 8px;
	width: max-content;
}
.product-scroll__item{
	flex: 0 0 auto;
	width: clamp(240px, 22vw, 320px);
	scroll-snap-align: start;
}
@media (max-width: 768px){
	.product-scroll__item{ width: 70vw; max-width: 300px; }
	.product-scroll__track{ gap: 16px; }
}
.featured--scroll .featured__cta{
	display: flex; justify-content: center; margin-top: 36px;
}

/* === PDP overrides (v2.5) === */
/* Full-width dark red add-to-cart button */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce form.cart .single_add_to_cart_button{
	background: var(--color-oxblood) !important;
	color: var(--color-oat) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 16px 28px !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	width: 100%;
	min-height: 52px;
	cursor: pointer;
	transition: background 200ms ease;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover{
	background: var(--color-oxblood-deep, #4a120c) !important;
}
/* Quantity: minimal − 1 + */
.woocommerce .quantity{
	display: inline-flex; align-items: center; border: 1px solid var(--color-line, #e5ded2);
	border-radius: 0; overflow: hidden; margin-right: 12px;
}
.woocommerce .quantity input.qty{
	width: 44px !important; height: 50px !important;
	border: 0 !important; text-align: center;
	font-size: 0.95rem !important; background: transparent !important;
	-moz-appearance: textfield;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
/* Add ± buttons via CSS pseudo isn't possible; use JS instead — see theme.js addendum */
.woocommerce .quantity .qty-btn{
	width: 40px; height: 50px; border: 0; background: transparent;
	font-size: 1.1rem; cursor: pointer; color: var(--color-text);
	display: inline-flex; align-items: center; justify-content: center;
}
.woocommerce .quantity .qty-btn:hover{ background: var(--color-oat); }
/* Form row layout: qty + button */
.woocommerce div.product form.cart{
	display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch;
	margin-block: 24px;
}
.woocommerce div.product form.cart .variations{ width: 100%; }
.woocommerce div.product form.cart .single_add_to_cart_button{ flex: 1; }

/* Color swatches */
.pdp-swatches{ margin-block: 8px; }
.pdp-swatches__native{ position: absolute; opacity: 0; pointer-events: none; height: 0; width: 0; }
.pdp-swatches__list{ display: flex; flex-wrap: wrap; gap: 10px; }
.pdp-swatch{
	display: inline-flex; align-items: center; gap: 10px;
	padding: 8px 14px; border: 1px solid var(--color-line, #e5ded2);
	background: #fff; cursor: pointer; font-size: 0.8125rem;
	transition: border-color 150ms ease, background 150ms ease;
}
.pdp-swatch:hover{ border-color: var(--color-oxblood); }
.pdp-swatch[aria-selected="true"]{
	background: var(--color-oxblood); color: var(--color-oat); border-color: var(--color-oxblood);
}
.pdp-swatch__chip{
	width: 14px; height: 14px; border-radius: 50%;
	border: 1px solid rgba(0,0,0,.15); display: inline-block;
}

/* Variations table (WC default) — hide the label row we already show */
.woocommerce div.product form.cart .variations th.label{
	font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
	color: var(--color-taupe); padding-right: 12px;
}
.woocommerce div.product form.cart .variations td{ padding-block: 6px; }
.woocommerce .single_variation_wrap .single_variation .price{ margin-bottom: 8px; color: var(--color-oxblood); font-family: var(--font-display); font-size: 1.25rem; }
.woocommerce a.reset_variations{ font-size: 0.75rem; color: var(--color-taupe); text-decoration: underline; }

/* Woo default table for variations */
.woocommerce div.product form.cart table.variations{ border: 0; margin-bottom: 0; }
.woocommerce div.product form.cart table.variations tbody{ display: block; }
.woocommerce div.product form.cart table.variations tr{ display: block; margin-bottom: 12px; }
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th{ display: block; padding: 0; }

/* === Collection header — Freja layout (v2.6) === */
.collection-header{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-6);
	padding-top: 56px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--color-line, #e5ded2);
	margin-bottom: 40px;
	flex-wrap: wrap;
}
.collection-header__title{ min-width: 0; }
.collection-header__h1{
	font-family: var(--font-display, 'Outfit', sans-serif);
	font-weight: 400;
	font-size: clamp(1.43rem, 2.97vw, 2.38rem);
	line-height: 1;
	margin: 0 0 8px;
	color: var(--color-text);
	letter-spacing: -0.01em;
}
.collection-header__subtitle{
	font-family: 'Cormorant', 'DM Sans', serif;
	font-style: italic;
	font-size: 1rem;
	color: var(--color-taupe, #8a7a6a);
	margin: 0;
}
.collection-header__meta{
	display: inline-flex;
	align-items: center;
	gap: 20px;
	font-size: 0.8125rem;
	color: var(--color-text);
	flex-wrap: wrap;
}
.collection-header__count{
	white-space: nowrap;
	font-size: 0.8125rem;
}
.collection-header__sort{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
}
.collection-header__sort-label{ color: var(--color-text); }
.collection-header__sort-dot{ color: var(--color-taupe); }

/* Bare select (no border) inside the collection header */
.select-wrap--bare{ position: relative; display: inline-flex; align-items: center; }
.select-wrap--bare select{
	appearance: none; -webkit-appearance: none;
	background: transparent; border: 0; padding: 0 22px 0 0;
	font: inherit; color: inherit; cursor: pointer;
	font-weight: 500;
}
.select-wrap--bare svg{
	position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	width: 14px; height: 14px; pointer-events: none;
}
.select-wrap--bare select:focus{ outline: none; }

@media (max-width: 620px){
	.collection-header{ padding-top: 32px; padding-bottom: 20px; margin-bottom: 24px; }
	.collection-header__meta{ width: 100%; justify-content: space-between; gap: 12px; }
}

/* === Hero overlay — Reh Studios style (v2.7) === */
.hero{ position: relative; }
.hero .page-width{
	position: absolute; inset: 0;
	display: flex; align-items: flex-end;
	pointer-events: none;
}
.hero__overlay{
	pointer-events: auto;
	padding-bottom: clamp(28px, 6vw, 72px);
	display: flex; flex-direction: column; gap: 22px;
	color: var(--color-text, #2b1410);
	text-shadow: none;
}
.hero__eyebrow{
	font-family: 'Outfit', sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.hero__cta-link{
	display: inline-block;
	align-self: flex-start;
	font-family: 'Outfit', sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text, #2b1410) !important;
	text-decoration: none;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(43,20,16,.6);
	transition: border-color 200ms ease, transform 200ms ease;
}
.hero__cta-link:hover{
	border-color: var(--color-text, #2b1410);
	transform: translateY(-1px);
}