/* ==========================================================================
   P-24 · Perfumería Premium

   TEMAS
   Oscuro = paleta del logo original (bronce / chocolate).
   Claro  = paleta de logo-2 (acero / azul petróleo), muestreada de la imagen.
   Ambos comparten los mismos tokens, así que todo el CSS de abajo es un único
   juego de reglas: solo cambian los valores.
   ========================================================================== */

:root{
  /* --- Marca: bronce (tema oscuro) --- */
  --bronze-100:#F0D9B0;
  --bronze-200:#D8A860;
  --bronze-300:#C08E48;
  --bronze-400:#A9794A;

  --cream-100:#F7F0E3;
  --cream-200:#F1E6D2;
  --cream-300:#D9C8AC;
  --cream-400:#B3A086;

  /* --- Tokens de tema (valores del tema OSCURO) --- */
  --accent-100:var(--bronze-100);
  --accent-200:var(--bronze-200);
  --accent-300:var(--bronze-300);
  --accent-400:var(--bronze-400);

  --page-bg:#120C07;
  --accent-on:#2A1B0C;
  --accent-grad:linear-gradient(135deg,var(--accent-100),var(--accent-200) 50%,var(--accent-300));
  --accent-shadow:rgba(216,168,96,.8);
  --accent-shadow-hi:rgba(216,168,96,.95);
  --accent-ring:rgba(216,168,96,.3);
  --accent-tint:rgba(216,168,96,.1);

  --glass-bg:rgba(45,32,22,.46);
  --glass-bg-strong:rgba(32,22,15,.82);
  --glass-brd:rgba(240,217,176,.16);
  --glass-brd-hi:rgba(240,217,176,.34);
  --glass-blur:blur(18px) saturate(140%);

  --surface-soft:rgba(240,217,176,.05);
  --surface-hover:rgba(240,217,176,.13);
  --surface-sunken:rgba(22,15,9,.55);

  --ink:var(--cream-200);
  --ink-soft:var(--cream-300);
  --ink-mute:var(--cream-400);
  --ink-strong:var(--cream-100);

  --ok:#7FD4A3;
  --ok-bg:rgba(127,212,163,.11);
  --ok-brd:rgba(127,212,163,.3);

  --shadow-soft:0 16px 36px -22px rgba(0,0,0,.9);
  --shadow-lift:0 26px 56px -26px rgba(0,0,0,.95);
  --media-glow:rgba(240,217,176,.16);
  --photo-shadow:rgba(0,0,0,.6);

  --fab-badge-bg:#1A120B;
  --fab-badge-ink:var(--accent-100);
  --fab-divider:rgba(42,27,12,.28);
  --nav-bar-bg:rgba(20,13,8,.95);
  /* El header es fijo y el contenido pasa por detrás: necesita más cuerpo que
     el resto del glass o los títulos se transparentan y estorban la lectura. */
  --header-bg:rgba(26,18,11,.88);

  /* --- Fibra de carbono --- */
  --cf-base:#1A120B;
  --cf-weave:rgba(60,42,26,.30);
  --cf-hi:rgba(240,217,176,.055);
  --cf-lo:rgba(0,0,0,.34);
  --cf-size:6px;

  /* --- Geometría --- */
  --radius-lg:22px;
  --radius-md:15px;
  --radius-sm:11px;

  --header-h:68px;
  --nav-h:0px;              /* lo calcula app.js cuando la nav pasa a 2ª fila */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   TEMA CLARO — paleta de logo-2: acero, plata y azul petróleo
   -------------------------------------------------------------------------- */
:root[data-theme="light"]{
  --petrol-900:#05131A;
  --petrol-800:#092934;
  --petrol-700:#123743;
  --petrol-600:#18414E;

  --accent-100:var(--petrol-600);
  --accent-200:var(--petrol-700);
  --accent-300:var(--petrol-800);
  --accent-400:var(--petrol-900);

  --page-bg:#E6ECEE;
  --accent-on:#F4F7F8;
  --accent-grad:linear-gradient(135deg,var(--petrol-600),var(--petrol-700) 50%,var(--petrol-800));
  --accent-shadow:rgba(18,55,67,.42);
  --accent-shadow-hi:rgba(18,55,67,.58);
  --accent-ring:rgba(18,55,67,.28);
  --accent-tint:rgba(18,55,67,.08);

  --glass-bg:rgba(255,255,255,.56);
  --glass-bg-strong:rgba(247,250,251,.9);
  --glass-brd:rgba(18,55,67,.14);
  --glass-brd-hi:rgba(18,55,67,.3);

  --surface-soft:rgba(18,55,67,.045);
  --surface-hover:rgba(18,55,67,.1);
  --surface-sunken:rgba(255,255,255,.6);

  --ink:#102730;
  --ink-soft:#2C4A56;
  --ink-mute:#4C636D;        /* 5,2:1 sobre el fondo claro */
  --ink-strong:#05131A;

  --ok:#13694A;
  --ok-bg:rgba(19,105,74,.1);
  --ok-brd:rgba(19,105,74,.26);

  --shadow-soft:0 12px 28px -20px rgba(5,19,26,.45);
  --shadow-lift:0 22px 46px -24px rgba(5,19,26,.55);
  --media-glow:rgba(18,55,67,.08);
  --photo-shadow:rgba(5,19,26,.22);

  --fab-badge-bg:#F4F7F8;
  --fab-badge-ink:var(--petrol-800);
  --fab-divider:rgba(244,247,248,.34);
  --nav-bar-bg:rgba(244,247,248,.97);
  --header-bg:rgba(240,245,246,.92);

  /* Fibra de carbono limpia: trama de acero muy tenue sobre fondo claro */
  --cf-base:#EAEFF1;
  --cf-weave:rgba(18,55,67,.045);
  --cf-hi:rgba(255,255,255,.75);
  --cf-lo:rgba(18,55,67,.085);
}

*,*::before,*::after{box-sizing:border-box}

/* El atributo `hidden` debe ganarle a los `display` de las clases de abajo
   (carrito, fichas, botón flotante, filas del resumen, toast): la regla del
   navegador tiene menos especificidad que un selector de clase. */
[hidden]{display:none!important}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 14px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100%;
  padding-top:var(--header-h);
  font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  font-size:clamp(17px,.6vw + 15.2px,19px);
  line-height:1.5;
  color:var(--ink);
  background:var(--page-bg);
  overflow-x:hidden;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
body.is-locked{overflow:hidden}

img{max-width:100%;display:block}
button{font:inherit;color:inherit}
a{color:inherit}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

.skip-link{
  position:fixed;top:-100px;left:14px;z-index:90;
  padding:.7rem 1.1rem;border-radius:var(--radius-sm);
  background:var(--accent-200);color:var(--accent-on);
  font-weight:600;text-decoration:none;
}
.skip-link:focus-visible{top:14px}

:focus-visible{outline:2px solid var(--accent-200);outline-offset:3px;border-radius:6px}

/* --------------------------------------------------------------------------
   Fondo: fibra de carbono + resplandores de la paleta
   -------------------------------------------------------------------------- */
.aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;background-color:var(--cf-base)}

.aurora::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(130% 80% at 50% -10%, var(--media-glow) 0%, transparent 62%);
}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.42}
.orb-1{width:46vw;height:46vw;left:-12vw;top:-6vw;background:radial-gradient(circle,var(--accent-400) 0%,transparent 70%)}
.orb-2{width:40vw;height:40vw;right:-10vw;top:28vh;background:radial-gradient(circle,var(--accent-300) 0%,transparent 70%);opacity:.3}
.orb-3{width:52vw;height:52vw;left:18vw;bottom:-22vw;background:radial-gradient(circle,var(--accent-200) 0%,transparent 72%);opacity:.18}
:root[data-theme="light"] .orb{opacity:.2}
:root[data-theme="light"] .orb-2{opacity:.14}
:root[data-theme="light"] .orb-3{opacity:.1}

/* --------------------------------------------------------------------------
   Glass base
   -------------------------------------------------------------------------- */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.07);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--glass-bg-strong)}
}

/* --------------------------------------------------------------------------
   Header fijo
   -------------------------------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--header-bg);
  height:var(--header-h);
  border-width:0 0 1px;border-radius:0;
  padding-top:env(safe-area-inset-top);
}
.header-inner{
  max-width:1280px;height:var(--header-h);margin:0 auto;
  padding:0 clamp(14px,3vw,28px);
  display:flex;align-items:center;gap:clamp(8px,2vw,24px);
}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex:0 0 auto}
.brand-mark{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.brand-text strong{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.5rem;font-weight:700;letter-spacing:.06em;
  background:linear-gradient(100deg,var(--accent-100),var(--accent-200) 45%,var(--accent-400));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Cada tema usa su propio logotipo. Se intercambian por CSS y no por JS para
   que no haya parpadeo al cargar la página. */
.logo-light{display:none}
:root[data-theme="light"] .logo-dark{display:none}
:root[data-theme="light"] .logo-light{display:block}

/* Menú de navegación desplegable */
.nav-wrap{position:relative;margin-left:auto}
.nav-toggle{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.44rem .85rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--glass-brd-hi);background:var(--surface-soft);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:.86rem;color:var(--ink-strong);
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.nav-toggle:hover{background:var(--surface-hover)}
.nav-toggle svg{width:18px;height:18px;flex:0 0 auto}
.nav-drop{
  position:absolute;top:calc(100% + .5rem);right:0;z-index:55;
  min-width:210px;padding:.4rem;border-radius:var(--radius-md);
  display:flex;flex-direction:column;gap:.05rem;
  animation:popIn .18s var(--ease) both;
}
.nav-drop a{
  display:block;padding:.6rem .9rem;border-radius:var(--radius-sm);
  text-decoration:none;font-size:.93rem;color:var(--ink-soft);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.nav-drop a:hover,.nav-drop a:focus-visible{background:var(--surface-hover);color:var(--ink-strong)}
.nav-quiz-link{
  display:block;width:100%;text-align:left;
  padding:.65rem .9rem;margin-top:.2rem;border-radius:var(--radius-sm);
  border-top:1px solid var(--glass-brd);
  font-size:.93rem;font-weight:500;color:var(--accent-200);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.nav-quiz-link:hover{background:var(--surface-hover);color:var(--accent-100)}

.theme-toggle,.header-cart{
  flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--glass-brd);border-radius:50%;
  background:var(--surface-soft);cursor:pointer;color:var(--accent-100);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease);
}
.theme-toggle:hover,.header-cart:hover{
  background:var(--surface-hover);border-color:var(--glass-brd-hi);transform:translateY(-1px);
}
.theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
:root[data-theme="light"] .theme-toggle .icon-sun{display:block}
:root[data-theme="light"] .theme-toggle .icon-moon{display:none}

.header-cart{position:relative}
.header-cart svg{width:21px;height:21px;fill:currentColor}
.header-cart-count{
  position:absolute;top:-4px;right:-4px;min-width:21px;height:21px;padding:0 5px;
  display:grid;place-items:center;border-radius:11px;
  background:var(--accent-grad);color:var(--accent-on);
  font-size:.72rem;font-weight:600;line-height:1;
  box-shadow:0 3px 10px rgba(0,0,0,.4);
}

@media (max-width:660px){
  /* En móvil el header no es fijo: se ve al cargar y desaparece al hacer scroll */
  .site-header{position:relative;height:auto;padding-bottom:.3rem}
  .header-inner{height:auto;padding-top:.6rem;padding-bottom:.3rem}
  body{padding-top:0}
  html{scroll-padding-top:12px}
  .theme-toggle,.header-cart{width:38px;height:38px}
  /* El dropdown del nav abre hacia abajo desde el botón (mismo comportamiento en móvil) */
  .nav-drop{right:0;left:auto;min-width:190px}
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{padding:clamp(1.3rem,3vw,2.2rem) clamp(16px,4vw,32px) clamp(1rem,2vw,1.4rem);text-align:center}
.hero-inner{max-width:640px;margin:0 auto}
.hero-logo{
  width:clamp(76px,10vw,104px);height:auto;margin:0 auto .7rem;object-fit:contain;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.6));
  animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-title{
  margin:0 0 .5rem;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(2rem,5vw,3.1rem);font-weight:600;line-height:1.04;
  color:var(--ink-strong);
}
.hero-title em{
  font-style:italic;
  background:linear-gradient(100deg,var(--accent-100),var(--accent-200) 50%,var(--accent-400));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{margin:0 auto 1.2rem;max-width:44ch;color:var(--ink-soft);font-size:.96rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.78rem 1.5rem;border:1px solid transparent;border-radius:999px;
  font-size:.92rem;font-weight:500;letter-spacing:.04em;
  text-decoration:none;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--accent-grad);color:var(--accent-on);font-weight:600;
  box-shadow:0 12px 26px -14px var(--accent-shadow);
}
.btn-primary:hover{box-shadow:0 18px 34px -14px var(--accent-shadow-hi);transform:translateY(-2px)}
.btn-ghost{
  background:var(--surface-soft);border-color:var(--glass-brd-hi);color:var(--ink-strong);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.btn-ghost:hover{background:var(--surface-hover);transform:translateY(-2px)}

.link-btn{
  background:none;border:0;padding:.35rem;cursor:pointer;
  font-size:.84rem;color:var(--ink-mute);
  text-decoration:underline;text-underline-offset:3px;
}
.link-btn:hover{color:var(--accent-100)}

.icon-btn{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--glass-brd);border-radius:50%;
  background:var(--surface-soft);cursor:pointer;
  transition:background .2s var(--ease);
}
.icon-btn:hover{background:var(--surface-hover)}
.icon-btn svg{width:17px;height:17px}

/* --------------------------------------------------------------------------
   Promoción de 3 — tres bloques en fila, sin texto de más
   -------------------------------------------------------------------------- */
.promos{max-width:1280px;margin:0 auto;padding:clamp(.8rem,2vw,1.3rem) clamp(16px,3vw,28px)}
.promos-title{
  margin:0 0 .7rem;text-align:center;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.5rem,3vw,2rem);font-weight:600;color:var(--ink-strong);
}
.promo-row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.5rem,1.4vw,.9rem);max-width:720px;margin:0 auto;
}
.promo-tile{
  padding:.75rem .5rem;border-radius:var(--radius-md);text-align:center;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.06);
}
.promo-qty{
  display:block;font-size:.88rem;letter-spacing:.06em;color:var(--ink-mute);white-space:nowrap;
}
.promo-price{
  display:block;margin-top:.15rem;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.5rem,3.4vw,2rem);font-weight:700;color:var(--accent-100);
}
.promo-note{
  margin:.7rem auto 0;max-width:46ch;text-align:center;
  font-size:.88rem;color:var(--ink-mute);
}

/* --------------------------------------------------------------------------
   Quiz banner — llamada a la acción entre promos y catálogo
   -------------------------------------------------------------------------- */
.quiz-banner{
  max-width:1280px;margin:0 auto;
  padding:0 clamp(16px,3vw,28px) clamp(.6rem,1.4vw,1rem);
}
.quiz-banner-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.9rem 1.4rem;border-radius:var(--radius-lg);flex-wrap:wrap;
}
.quiz-banner-title{
  margin:0;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.35rem,2.8vw,1.8rem);font-weight:600;color:var(--ink-strong);
}
.quiz-banner-sub{margin:.15rem 0 0;font-size:.92rem;color:var(--ink-mute)}
.filter-quiz-btn{color:var(--accent-200);font-weight:500}
.filter-quiz-btn:hover{color:var(--accent-100)}

/* --------------------------------------------------------------------------
   Barra de sección + menú de filtros
   -------------------------------------------------------------------------- */
.catalog{max-width:1280px;margin:0 auto;padding:clamp(1rem,2vw,1.5rem) clamp(16px,3vw,28px)}
.catalog-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:clamp(.7rem,1.6vw,1.1rem);
}
.catalog-bar h2{
  margin:0;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.55rem,3.2vw,2.1rem);font-weight:600;line-height:1.1;
  color:var(--ink-strong);
}
.bar-note{margin:0;font-size:.9rem;color:var(--ink-mute);text-align:right}

.filter{position:relative;flex:0 0 auto}
.filter-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .95rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--glass-brd-hi);background:var(--surface-soft);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:.85rem;color:var(--ink-strong);
  transition:background .2s var(--ease);
}
.filter-btn:hover{background:var(--surface-hover)}
.filter-btn svg{width:17px;height:17px}
.filter-count{
  min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;
  border-radius:10px;background:var(--accent-grad);color:var(--accent-on);
  font-size:.7rem;font-weight:600;line-height:1;
}
.filter-menu{
  position:absolute;top:calc(100% + .5rem);right:0;z-index:50;
  width:min(300px,calc(100vw - 32px));
  padding:1rem;border-radius:var(--radius-md);
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  animation:popIn .2s var(--ease) both;
}
@keyframes popIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.filter-group + .filter-group{margin-top:.85rem}
.filter-label{
  margin:0 0 .4rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-mute);
}
.filter-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.fchip{
  padding:.34rem .75rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--glass-brd);background:var(--surface-soft);
  font-size:.88rem;color:var(--ink-soft);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.fchip:hover{background:var(--surface-hover)}
.fchip.is-on{
  background:var(--accent-grad);border-color:transparent;color:var(--accent-on);font-weight:500;
}
.filter-foot{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--glass-brd);
}
.filter-result{font-size:.84rem;color:var(--ink-mute)}

.grid-empty{margin:2rem 0;text-align:center;color:var(--ink-soft);font-size:.92rem}

/* --------------------------------------------------------------------------
   Tarjetas de producto
   Solo foto, nombre y precio de partida. Las presentaciones y la cantidad se
   eligen en la ventana que abre la tarjeta: el catálogo deja de amontonarse.
   -------------------------------------------------------------------------- */
.product-grid{
  display:grid;gap:clamp(.6rem,1.3vw,.95rem);
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
@media (max-width:520px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
}

.product-card{
  display:flex;flex-direction:column;text-align:left;
  padding:0;cursor:pointer;
  border-radius:var(--radius-lg);
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;                       /* nada sobresale de la tarjeta */
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.product-card:hover{
  transform:translateY(-4px);
  border-color:var(--glass-brd-hi);
  box-shadow:var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,.12);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .product-card{background:var(--glass-bg-strong)}
}

/* Marco de foto uniforme, centrado y sin desbordes.
   `minmax(0,1fr)` es lo que impide que la proporción intrínseca de la foto
   estire la fila y rompa el `aspect-ratio`: sin ese tope, un frasco de
   413x604 llevaba la fila a 479 px dentro de un marco de 323 px y quedaba
   recortado por abajo. El padding-top reserva la franja del chip. */
.card-media{
  position:relative;
  aspect-ratio:1 / 1;
  display:grid;
  grid-template-rows:minmax(0,1fr);
  grid-template-columns:minmax(0,1fr);
  place-items:center;
  padding:3.3rem .8rem .6rem;
  overflow:hidden;
  background:
    radial-gradient(70% 60% at 50% 42%, var(--media-glow) 0%, transparent 72%),
    linear-gradient(170deg, rgba(255,255,255,.055), rgba(0,0,0,.14));
  border-bottom:1px solid var(--glass-brd);
}
/* La caja de la imagen ocupa exactamente el área de contenido (que la fila
   `minmax(0,1fr)` mantiene acotada) y es `object-fit:contain` quien encaja la
   fotografía dentro, centrada y completa, sea cual sea su proporción. */
.card-media img{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  filter:drop-shadow(0 12px 20px var(--photo-shadow));
  transition:filter .3s var(--ease);
}
.product-card:hover .card-media img{
  /* Se anima el brillo, nunca la escala: así la foto no puede desbordar */
  filter:drop-shadow(0 16px 26px var(--photo-shadow)) brightness(1.06);
}

/* Chip «INSPIRADO EN»: dos renglones fijos (etiqueta arriba, marca abajo).
   En una sola línea, marcas como «Carolina Herrera» no caben en tarjetas de
   ~200 px y se recortaban. Al tener altura constante, el padding-top del marco
   reserva su franja exacta y nunca pisa la foto. `margin:0` porque el margen
   que el navegador da a los bloques de texto lo bajaba 16 px encima de ella. */
.card-tag{
  position:absolute;top:.6rem;left:.6rem;right:.6rem;z-index:2;margin:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  padding:.3rem .6rem;border-radius:var(--radius-sm);
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
  backdrop-filter:blur(10px) saturate(130%);
  border:1px solid var(--glass-brd-hi);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.6);
  pointer-events:none;
}
.card-tag span{
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;line-height:1.35;
  color:var(--accent-200);white-space:nowrap;
}
.card-tag strong{
  font-size:.8rem;font-weight:500;line-height:1.25;
  color:var(--ink-strong);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}

.card-body{display:flex;flex-direction:column;gap:.1rem;padding:.7rem .8rem .85rem}
.card-title{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.26rem;font-weight:600;line-height:1.15;color:var(--ink-strong);
}
.card-meta{font-size:.82rem;color:var(--ink-mute);letter-spacing:.02em}
.card-from{margin-top:.3rem;font-size:.83rem;color:var(--ink-mute)}
.card-from b{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.2rem;font-weight:700;color:var(--accent-100);
}

/* --------------------------------------------------------------------------
   Recargas
   -------------------------------------------------------------------------- */
.refill{display:grid;grid-template-columns:160px 1fr;gap:1.2rem;padding:1.1rem;border-radius:var(--radius-lg)}
@media (max-width:620px){
  .refill{grid-template-columns:1fr;gap:.9rem}
  .refill-media{max-width:120px;margin:0 auto}
}
.refill-media{
  display:grid;grid-template-rows:minmax(0,1fr);place-items:center;
  aspect-ratio:1 / 1;padding:.5rem;border-radius:var(--radius-md);overflow:hidden;
  background:radial-gradient(65% 60% at 50% 45%, var(--media-glow), transparent 72%);
  border:1px solid var(--glass-brd);
}
.refill-media img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 18px var(--photo-shadow))}
.refill-form{display:flex;flex-direction:column;gap:.8rem}
.refill-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:.8rem}
@media (max-width:560px){.refill-grid{grid-template-columns:1fr}}
.refill-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.refill-actions .btn{flex:1 1 auto}
.refill-help{margin:0;font-size:.88rem;color:var(--ink-mute);line-height:1.45}
.refill-list{
  margin:0;padding:.6rem .8rem;list-style:none;border-radius:var(--radius-sm);
  background:var(--ok-bg);border:1px solid var(--ok-brd);
  font-size:.88rem;color:var(--ok);
}
.refill-list li + li{margin-top:.2rem}

.field-label{
  display:block;margin:0 0 .35rem;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);
}

.aroma-select{
  width:100%;padding:.6rem .8rem;
  border:1px solid var(--glass-brd);border-radius:var(--radius-sm);
  background:var(--surface-sunken);color:var(--ink-strong);
  font:inherit;font-size:.88rem;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:11px;
  padding-right:2.2rem;
}

/* --------------------------------------------------------------------------
   Opciones de presentación (ficha y recargas)
   -------------------------------------------------------------------------- */
.opt-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
.opt{
  padding:.6rem .35rem;border-radius:var(--radius-sm);cursor:pointer;text-align:center;line-height:1.3;
  border:1px solid var(--glass-brd);background:var(--surface-soft);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease);
}
.opt:hover{background:var(--surface-hover);transform:translateY(-1px)}
.opt b{display:block;font-size:.92rem;font-weight:500;color:var(--ink-strong);white-space:nowrap}
.opt i{display:block;font-style:normal;font-size:.84rem;color:var(--accent-100);white-space:nowrap}
.opt em{display:block;font-style:normal;font-size:.74rem;color:var(--ink-mute);white-space:nowrap}
.opt[aria-pressed="true"]{
  background:var(--accent-tint);border-color:var(--accent-200);
  box-shadow:0 0 0 1px var(--accent-ring), inset 0 1px 0 rgba(255,255,255,.14);
}

/* Feromonas */
.pher-toggle{
  display:flex;align-items:center;gap:.6rem;cursor:pointer;
  padding:.55rem .7rem;border-radius:var(--radius-sm);
  border:1px solid var(--glass-brd);background:var(--surface-soft);
  transition:background .2s var(--ease);
}
.pher-toggle:hover{background:var(--surface-hover)}
.pher-toggle input{position:absolute;opacity:0;width:0;height:0}
.pher-box{
  flex:0 0 auto;width:18px;height:18px;border-radius:5px;
  border:1.5px solid var(--accent-400);display:grid;place-items:center;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.pher-box::after{
  content:"";width:9px;height:9px;border-radius:2px;transform:scale(0);
  background:var(--accent-on);transition:transform .18s var(--ease);
}
.pher-toggle input:checked + .pher-box{background:var(--accent-200);border-color:var(--accent-100)}
.pher-toggle input:checked + .pher-box::after{transform:scale(1)}
.pher-toggle input:focus-visible + .pher-box{outline:2px solid var(--accent-200);outline-offset:2px}
.pher-text{font-size:.9rem;color:var(--ink-soft);line-height:1.3}
.pher-text b{display:block;font-weight:500;color:var(--ink-strong)}

/* Cantidad */
.stepper{
  display:flex;align-items:center;gap:.1rem;flex:0 0 auto;
  border:1px solid var(--glass-brd);border-radius:999px;
  background:var(--surface-sunken);padding:.15rem;
}
.stepper button{
  width:32px;height:32px;display:grid;place-items:center;
  border:0;border-radius:50%;background:transparent;cursor:pointer;
  font-size:1.1rem;line-height:1;color:var(--accent-100);
  transition:background .18s var(--ease);
}
.stepper button:hover:not(:disabled){background:var(--surface-hover)}
.stepper button:disabled{opacity:.3;cursor:not-allowed}
.stepper output{min-width:26px;text-align:center;font-size:.95rem;font-weight:500;color:var(--ink-strong)}

/* --------------------------------------------------------------------------
   Línea de feromonas y footer
   -------------------------------------------------------------------------- */
.extras-line{
  max-width:1280px;margin:0 auto;padding:.3rem clamp(16px,3vw,28px) 1.2rem;
  text-align:center;font-size:.84rem;color:var(--ink-mute);
}
.extras-line strong{color:var(--accent-100);font-weight:500}

.site-footer{
  margin-top:clamp(.8rem,2vw,1.6rem);
  padding:1.5rem clamp(16px,4vw,32px) calc(6rem + env(safe-area-inset-bottom));
  text-align:center;border-top:1px solid var(--glass-brd);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.18));
}
.footer-name{
  margin:0 0 .6rem;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.15rem;letter-spacing:.08em;color:var(--accent-100);
}
.footer-wa{
  display:inline-block;padding:.5rem 1.2rem;border-radius:999px;
  border:1px solid var(--glass-brd-hi);background:var(--surface-soft);
  font-size:.85rem;letter-spacing:.05em;text-decoration:none;color:var(--ink-strong);
  transition:background .2s var(--ease);
}
.footer-wa:hover{background:var(--surface-hover)}
.footer-note{margin:.8rem auto 0;max-width:42ch;font-size:.86rem;color:var(--ink-mute)}

/* --------------------------------------------------------------------------
   Botón flotante del carrito
   -------------------------------------------------------------------------- */
.cart-fab{
  position:fixed;z-index:55;
  right:clamp(14px,3vw,26px);
  bottom:calc(clamp(14px,3vw,26px) + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:.6rem;
  padding:.68rem 1.05rem .68rem .68rem;border-radius:999px;cursor:pointer;
  background:var(--accent-grad);
  border:1px solid rgba(255,255,255,.22);
  color:var(--accent-on);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.85),0 0 0 1px var(--accent-ring);
  animation:fabIn .4s var(--ease) both;
}
@keyframes fabIn{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.cart-fab:hover{transform:translateY(-2px)}
.fab-badge{
  min-width:28px;height:28px;padding:0 7px;display:grid;place-items:center;
  border-radius:999px;background:var(--fab-badge-bg);color:var(--fab-badge-ink);
  font-size:.84rem;font-weight:600;line-height:1;
}
.fab-label{font-size:.86rem;font-weight:500}
.fab-total{font-size:.96rem;font-weight:700;padding-left:.6rem;border-left:1px solid var(--fab-divider)}
@media (max-width:340px){.fab-label{display:none}}
.cart-fab.is-bump{animation:bump .42s var(--ease)}
@keyframes bump{0%,100%{transform:none}35%{transform:scale(1.09)}}

/* --------------------------------------------------------------------------
   Capas superpuestas
   -------------------------------------------------------------------------- */
.backdrop{
  position:fixed;inset:0;z-index:70;
  background:rgba(8,5,3,.6);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  animation:fade .3s var(--ease) both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Ficha de producto y asesor: ventana centrada */
.sheet{
  position:fixed;z-index:75;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,calc(100vw - 28px));
  max-height:min(88vh,760px);overflow-y:auto;
  padding:1.4rem;border-radius:var(--radius-lg);
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  animation:sheetIn .3s var(--ease) both;
  -webkit-overflow-scrolling:touch;
}
@keyframes sheetIn{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%)}}
.sheet-close{position:absolute;top:.8rem;right:.8rem;z-index:3}

.sheet-hero{display:grid;grid-template-columns:140px 1fr;gap:1.1rem;margin-bottom:1.1rem}
@media (max-width:520px){
  .sheet{padding:1.1rem}
  .sheet-hero{grid-template-columns:100px 1fr;gap:.85rem}
}
.sheet-media{
  display:grid;grid-template-rows:minmax(0,1fr);place-items:center;
  aspect-ratio:1 / 1;padding:.6rem;border-radius:var(--radius-md);overflow:hidden;
  background:radial-gradient(65% 60% at 50% 45%, var(--media-glow), transparent 72%);
  border:1px solid var(--glass-brd);
}
.sheet-media img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 20px var(--photo-shadow))}
.sheet-intro{min-width:0;align-self:center}
.sheet-kicker{
  /* El hueco de la derecha deja libre el botón de cerrar, que va posicionado
     sobre esta misma franja: sin él, marcas largas pasaban por debajo. */
  margin:0 0 .25rem;padding-right:2.4rem;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-200);
}
.sheet-title{
  margin:0 0 .35rem;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.5rem,3.6vw,2rem);font-weight:600;line-height:1.1;color:var(--ink-strong);
}
.sheet-notes{margin:0 0 .5rem;font-size:.86rem;color:var(--ink-soft);line-height:1.4}
.sheet-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin:0}
.sheet-tags span{
  padding:.18rem .6rem;border-radius:999px;
  background:var(--surface-soft);border:1px solid var(--glass-brd);
  font-size:.72rem;color:var(--ink-mute);
}
.sheet-field{margin-bottom:.9rem}
.sheet-field .field-label{margin-bottom:.45rem}
.sheet-foot{
  display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--glass-brd);
}
.sheet-add{flex:1 1 auto}
.sheet-add b{font-weight:700}
.sheet .pher-toggle{margin-bottom:.2rem}

/* Asesor de aromas */
.quiz-progress{
  height:3px;margin:.2rem 0 1.1rem;border-radius:2px;overflow:hidden;
  background:var(--surface-soft);
}
.quiz-progress span{display:block;height:100%;background:var(--accent-grad);transition:width .3s var(--ease)}
.quiz-options{display:grid;gap:.5rem}
.quiz-opt{
  display:block;width:100%;text-align:left;cursor:pointer;
  padding:.85rem 1rem;border-radius:var(--radius-md);
  border:1px solid var(--glass-brd);background:var(--surface-soft);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease);
}
.quiz-opt:hover{background:var(--surface-hover);border-color:var(--glass-brd-hi);transform:translateY(-1px)}
.quiz-opt b{display:block;font-size:1rem;font-weight:500;color:var(--ink-strong)}
.quiz-opt span{display:block;margin-top:.1rem;font-size:.8rem;color:var(--ink-mute)}
.quiz-sheet-back{margin-top:.8rem}

.quiz-results{display:grid;gap:.6rem;margin:1rem 0}
.quiz-result{
  display:grid;grid-template-columns:28px 62px 1fr;gap:.7rem;align-items:center;
  width:100%;text-align:left;cursor:pointer;
  padding:.6rem;border-radius:var(--radius-md);
  border:1px solid var(--glass-brd);background:var(--surface-soft);
  transition:background .2s var(--ease),transform .15s var(--ease);
}
.quiz-result:hover{background:var(--surface-hover);transform:translateY(-1px)}
.qr-rank{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--accent-grad);color:var(--accent-on);font-size:.84rem;font-weight:700;
}
.qr-media{
  display:grid;grid-template-rows:minmax(0,1fr);place-items:center;
  width:62px;height:62px;padding:5px;border-radius:var(--radius-sm);overflow:hidden;
  background:radial-gradient(60% 60% at 50% 45%, var(--media-glow), transparent 72%);
  border:1px solid var(--glass-brd);
}
.qr-media img{width:100%;height:100%;object-fit:contain}
.qr-info{min-width:0}
.qr-info b{display:block;font-size:1rem;font-weight:500;color:var(--ink-strong)}
.qr-notes{
  display:block;font-size:.78rem;color:var(--ink-mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.qr-match{display:block;margin-top:.1rem;font-size:.74rem;color:var(--ok);font-weight:500}

/* --------------------------------------------------------------------------
   Panel del carrito
   -------------------------------------------------------------------------- */
.cart-panel{
  position:fixed;z-index:75;
  top:0;right:0;bottom:0;width:min(420px,100vw);
  display:flex;flex-direction:column;
  border-width:0 0 0 1px;border-radius:0;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  animation:slideIn .35s var(--ease) both;
  padding-top:env(safe-area-inset-top);
}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}

.cart-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.1rem;border-bottom:1px solid var(--glass-brd);
}
.cart-head h2{
  margin:0;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.6rem;font-weight:600;color:var(--ink-strong);
}
.cart-body{flex:1 1 auto;overflow-y:auto;padding:1rem 1.1rem;-webkit-overflow-scrolling:touch}
.cart-empty{margin:2.2rem 0;text-align:center;color:var(--ink-soft);font-size:.95rem}
.cart-empty-cta{margin-top:1rem}

.cart-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.cart-item{
  display:grid;grid-template-columns:60px 1fr;gap:.75rem;align-items:start;
  padding:.7rem;border-radius:var(--radius-md);
  background:var(--surface-soft);border:1px solid var(--glass-brd);
}
.cart-thumb{
  width:60px;height:60px;border-radius:var(--radius-sm);
  /* Mismo tope que en .card-media: sin `minmax(0,1fr)` los frascos altos
     estiraban la fila y se salían de la miniatura. */
  display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);
  place-items:center;overflow:hidden;padding:5px;
  background:radial-gradient(60% 60% at 50% 45%, var(--media-glow), transparent 72%);
  border:1px solid var(--glass-brd);
}
.cart-thumb img{width:100%;height:100%;object-fit:contain}
.cart-info{min-width:0}
.cart-name{
  margin:0;font-size:.95rem;font-weight:500;color:var(--ink-strong);
  display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
}
.cart-name span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-name b{flex:0 0 auto;font-weight:600;color:var(--accent-100)}
.cart-meta{margin:.1rem 0 .45rem;font-size:.78rem;color:var(--ink-mute)}
.cart-meta .pher{color:var(--ok)}
.cart-row{display:flex;align-items:center;gap:.5rem}
.cart-row .stepper{padding:.1rem}
.cart-row .stepper button{width:27px;height:27px;font-size:.95rem}
.cart-remove{
  margin-left:auto;background:none;border:0;padding:.3rem;cursor:pointer;
  color:var(--ink-mute);transition:color .2s var(--ease);
}
.cart-remove:hover{color:#E05A5A}
.cart-remove svg{width:15px;height:15px}

.cart-hints{display:flex;flex-direction:column;gap:.45rem;margin-top:.85rem}
.hint{
  margin:0;display:flex;gap:.5rem;align-items:flex-start;
  padding:.55rem .7rem;border-radius:var(--radius-sm);font-size:.8rem;line-height:1.4;
  background:var(--accent-tint);border:1px solid var(--accent-ring);color:var(--accent-100);
}
.hint.is-win{background:var(--ok-bg);border-color:var(--ok-brd);color:var(--ok)}

.cart-foot{
  flex:0 0 auto;padding:.65rem 1.1rem calc(.8rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--glass-brd);background:var(--surface-sunken);
}
.cart-summary{margin:0 0 .55rem;display:flex;flex-direction:column;gap:.2rem}
.cart-summary > div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.cart-summary dt{font-size:.85rem;color:var(--ink-mute)}
.cart-summary dd{margin:0;font-size:.9rem;font-weight:500;color:var(--ink-strong)}
.cart-summary .is-discount dd{color:var(--ok)}
.cart-summary .is-total{margin-top:.35rem;padding-top:.55rem;border-top:1px solid var(--glass-brd)}
.cart-summary .is-total dt{font-size:.95rem;color:var(--ink-strong);letter-spacing:.04em}
.cart-summary .is-total dd{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.75rem;font-weight:700;color:var(--accent-100);
}

.btn-wa{
  width:100%;background:linear-gradient(135deg,#2FBF63,#1F9E4D);
  color:#08240F;font-weight:600;
  box-shadow:0 12px 26px -14px rgba(47,191,99,.8);
}
.btn-wa:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(47,191,99,.95)}
.btn-wa:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.btn-wa svg{width:19px;height:19px;fill:currentColor}

/* Seguir comprando: cierra el panel y devuelve al catálogo sin perder nada */
.btn-keep{
  width:100%;margin-top:.5rem;
  background:var(--surface-soft);border-color:var(--glass-brd-hi);color:var(--ink-strong);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.btn-keep:hover{background:var(--surface-hover);transform:translateY(-1px)}
.btn-keep svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cart-foot .link-btn{display:block;margin:.55rem auto 0}

@media (max-width:560px){
  /* Hoja inferior en móvil */
  .cart-panel{
    top:auto;left:0;right:0;bottom:0;width:100%;
    height:min(88vh,100%);
    border-width:1px 0 0;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    animation-name:slideUp;
  }
  @keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
  .cart-head{position:relative}
  .cart-head::before{
    content:"";position:absolute;top:.4rem;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:2px;background:var(--glass-brd-hi);
  }
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.toast{
  position:fixed;z-index:95;left:50%;
  bottom:calc(5.4rem + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  max-width:calc(100vw - 32px);
  padding:.6rem 1.05rem;border-radius:999px;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--glass-brd-hi);
  font-size:.84rem;color:var(--ink-strong);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  box-shadow:var(--shadow-lift);
  animation:toastIn .3s var(--ease) both;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}