/* ============================================================
   TEXTIL DEL HOGAR — BASE — tokens de marca, reset, tipografia, botones, inputs e iconos.
   Primera capa: no depende de ninguna otra.
   ============================================================ */
@font-face {
  font-family:'Archivo';
  font-style:normal;
  font-weight:300 900;
  font-stretch:75% 125%;
  font-display:swap;
  src:url('../fonts/archivo-latin-variable.woff2') format('woff2');
}
@font-face {
  font-family:'Figtree';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/figtree-latin-variable.woff2') format('woff2');
}

/* Iconos: sprite SVG de Lucide (assets/img/icons.svg) via _partials/icon.tpl.
   El <svg> mide 1em x 1em, asi que el tamano se sigue controlando con font-size
   igual que con el webfont de Material Icons al que sustituye. */
.tdh-ico{
  display:inline-block; width:1em; height:1em; font-size:24px; line-height:1;
  vertical-align:middle; flex-shrink:0; overflow:visible;
}
.tdh-ico--filled{ fill:currentColor; }

/* ============================================================
   TEXTIL DEL HOGAR v4 — mundo neutro (reemplaza al turquesa/coral)
   Grises calidos + tinta · formas cuadradas · layout fluido.
   El logo multicolor y la foto de producto llevan todo el color;
   las superficies se quedan neutras. Un unico acento (teal profundo
   del logo) para enlaces, foco y estados activos.
   Los nombres de variable se conservan para que la capa v3 herede
   el mundo nuevo sin reescribir cada regla.
   ============================================================ */

:root {
  /* ====== NEUTRALES CALIDOS (nuevo sistema) ====== */
  --ink:#1C1C1A; --fg1:#1C1C1A; --fg2:#53514B; --fg3:#8B877E;
  --line:#E3E1D9; --line-2:#EFEEE7;
  --bg1:#FFFFFF; --bg2:#FAFAF8; --bg3:#F2F1EC; --bg-cream:#F5F3ED;

  /* ====== ESCALA "TEAL" REMAPEADA ======
     Los tonos claros (50-400) pasan a grises calidos: se usaban para
     fondos suaves, bordes y hovers de facetas. Los profundos (600-900)
     conservan el teal del logo como ACENTO pequeno (enlaces, foco). */
  --teal-50:#F4F3EE; --teal-100:#E9E7DF; --teal-200:#D8D5CA; --teal-300:#C3C0B4;
  --teal-400:#8B877E; --teal-500:#1F8585; --teal-600:#1F8585; --teal-700:#1F8585;
  --teal-800:#186A6A; --teal-900:#114E4E;
  --teal:#1F8585;

  /* ====== ESCALA "PINK/CORAL" REMAPEADA ======
     El coral desaparece como color de superficie: sus usos principales
     (CTAs) se vuelven tinta; sus fondos suaves pasan a gris calido.
     El rojo ladrillo apagado queda reservado al descuento. */
  --coral:#1C1C1A;
  --pink-50:#F4F3EE; --pink-100:#E9E7DF; --pink-200:#D8D5CA; --pink-300:#C3C0B4;
  --pink-400:#8B877E; --pink-500:#1C1C1A; --pink-600:#000000; --pink-700:#5A5650;

  /* ====== SEMANTIC ====== */
  --price:var(--ink);                      /* precio en tinta */
  --sale:#9E3B32;                          /* descuento: ladrillo apagado */
  --sale-bg:#F6EBE8;
  --success:#2F7D5B; --success-bg:#E9F2EC;
  --warning:#B47918; --star:#C99A2E; --focus:#1F8585;

  /* ====== TYPE ====== */
  --font-display:'Archivo', sans-serif;
  --font-body:'Figtree', sans-serif;
  --font-script:'Archivo', sans-serif;

  /* ====== RADII — cuadrado ======
     pill se colapsa a 2px: todos los botones/controles "pill" heredados
     se vuelven cuadrados de golpe. Solo quedan redondos los elementos
     con 99px/50% hardcodeado (avatar, contador del carrito). */
  --r-xs:2px; --r-sm:2px; --r-md:3px; --r-lg:4px; --r-xl:4px; --r-pill:2px;

  /* ====== SHADOWS — neutras y discretas ====== */
  --sh-xs:0 1px 2px rgba(28,28,26,.06);
  --sh-sm:0 2px 8px rgba(28,28,26,.06);
  --sh-card:0 10px 28px rgba(28,28,26,.08);
  --sh-lift:0 18px 44px rgba(28,28,26,.12);
  --sh-pink:none;
  --sh-teal:none;

  /* ====== LAYOUT FLUIDO (sin tope de ancho) ====== */
  --gutter:clamp(16px, 2.6vw, 32px);
}

/* ============================================================
   BASE
   ============================================================ */
/* Bootstrap 4 (classic) ya lo aplica, pero el tema no debe depender de ello:
   sin esto los tamanos en px de las casillas y los steppers salen mas grandes. */
*{ box-sizing:border-box; }
/* Igual que el kit del prototipo: evita que una imagen imponga su ancho
   intrinseco al contenedor (critico dentro de grid/flex). */
img{ max-width:100%; }
body{ font-family:var(--font-body); background:var(--bg2); color:var(--ink); font-size:16px; line-height:1.6; }
.container{ max-width:none; }
a{ color:var(--teal-700); text-decoration:none; }
a:hover{ color:var(--teal-800); }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4{ font-family:var(--font-display); color:var(--ink); font-weight:800; letter-spacing:-.015em; }
::selection{ background:var(--ink); color:var(--bg2); }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--teal-200); border-radius:0; }

/* helpers de marca */
.tdh-eyebrow{ font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg3); }
.tdh-script{ font-family:var(--font-script); font-weight:700; color:var(--ink); }

/* ============================================================
   BOTONES — tinta, cuadrados, Nunito 800, uppercase discreto
   ============================================================ */
.btn{
  font-family:var(--font-display); font-weight:800; border:0; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center; gap:8px; line-height:1;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
  text-transform:uppercase; letter-spacing:.06em; font-size:13.5px;
}
.btn-primary,
.btn-primary:focus{ background:var(--ink); color:#fff; box-shadow:none; padding:14px 24px; }
.btn-primary:hover{ background:#000; color:#fff; }
.btn-primary:active{ background:#000; transform:none; }
.tdh-btn-coral,
.btn-coral{ background:var(--ink); color:#fff; box-shadow:none; padding:14px 24px; border-radius:var(--r-pill); font-family:var(--font-display); font-weight:800; }
.tdh-btn-coral:hover,
.btn-coral:hover{ background:#000; color:#fff; }
.btn-secondary,
.btn-tertiary,
.btn-ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--ink); padding:12px 22px; }
.btn-secondary:hover,
.btn-ghost:hover{ background:var(--ink); color:#fff; }
.btn-sm{ padding:9px 16px; font-size:12.5px; }
.btn-lg{ padding:16px 30px; font-size:15px; }

/* inputs */
.form-control,
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea{
  border:1.5px solid var(--line); border-radius:var(--r-md); color:var(--ink); font-family:var(--font-body);
}
.form-control:focus{ border-color:var(--teal-700); box-shadow:0 0 0 3px var(--teal-50); }
.tdh-badge{ position:absolute; top:-7px; right:-9px; background:var(--ink); color:#fff; font-size:11px; font-weight:800; min-width:19px; height:19px; border-radius:99px; display:flex; align-items:center; justify-content:center; padding:0 5px; font-family:var(--font-display); }
.block-promo .promo-code .btn,
.cart-voucher .btn{ border-radius:var(--r-pill); }
#payment-confirmation button,
.checkout-process .btn-primary{ border-radius:var(--r-pill); }

/* Banda a todo el ancho (full-bleed): overflow-x:clip evita scroll horizontal
   sin romper el header sticky. */
html, body{ overflow-x:clip; }
body.page-authentication .page-header{ display:none; }

/* FIX v7c — registro: ocultar título por defecto + alinear panel de marca arriba */
body.page-registration .page-header{ display:none; }
@keyframes tdh-pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
/* Rebote al anadir al carrito (tarjeta y ficha de producto) */
@keyframes tdh-add-pop{ 0%{ transform:scale(.85); } 60%{ transform:scale(1.06); } 100%{ transform:scale(1); } }

/* badges (product-flags) */
.product-flags{ position:absolute; top:12px; left:12px; margin:0; padding:0; list-style:none; z-index:2; }
.product-flag{ font-family:var(--font-display); font-weight:800; font-size:12px; border-radius:var(--r-pill); padding:5px 12px; background:var(--ink); color:#fff; display:inline-block; margin:0 0 4px; position:static; box-shadow:none; }
.product-flag.new,
.product-flag.online-only{ background:var(--ink); }
.product-flag.discount,
.product-flag.discount-percentage,
.product-flag.on-sale{ background:var(--sale); }

/* ===========================================================================
   Flags de producto (PDP + listado) — paleta v4: descuento = ladrillo,
   nuevo/online = tinta. Se igualan los selectores de alta especificidad del
   tema padre y se cargan despues para ganar la cascada.
   =========================================================================== */
.product-flags li.product-flag{
  background:var(--ink); background-color:var(--ink); color:#fff;
}
.product-flags li.product-flag.discount,
.product-flags li.product-flag.discount-amount,
.product-flags li.product-flag.discount-percentage,
.product-flags li.product-flag.on-sale{
  background:var(--sale); background-color:var(--sale); color:#fff;
}
.product-flags li.product-flag.new,
.product-flags li.product-flag.online-only{
  background:var(--ink); background-color:var(--ink); color:#fff;
}

/* Banderas de producto discretas (menos tamaño, no tapen imagen) */
.product-flags{ top:0; left:0; }
.product-flag,
.product-flags li.product-flag{
  font-size:11px !important;
  padding:5px 9px !important;
  border-radius:var(--r-xs) !important;
  margin:0 0 3px !important;
  line-height:1.2 !important;
  letter-spacing:.02em !important;
  box-shadow:none !important;
}
.product-flags li.product-flag.discount,
.product-flags li.product-flag.discount-amount,
.product-flags li.product-flag.discount-percentage,
.product-flags li.product-flag.on-sale{ background:var(--sale) !important; background-color:var(--sale) !important; }
.product-flags li.product-flag.new,
.product-flags li.product-flag.online-only{ background:var(--ink) !important; background-color:var(--ink) !important; }
.product-flags li.product-flag.out_of_stock{
  background:#6b7280 !important; background-color:#6b7280 !important; color:#fff !important;
  display:inline-block !important;
}