/* ============================================================
   GLOBAL TECH — SECTIONS
   Hero, nosotros, categorías, tienda, contacto, footer.
   Mobile-first: base → 768px → 1200px
   ============================================================ */

@layer sections {

  main { display: block; }

  section { padding-block: var(--sp-section); }

  /* ----------------------------------------------------------
     HERO
     ---------------------------------------------------------- */
  .hero {
    position: relative;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding-block: calc(var(--nav-h) + var(--sp-6)) var(--sp-8);
    overflow: hidden;
    isolation: isolate;
  }

  .hero__bg {
    position: absolute;
    inset: -8% 0;
    z-index: -2;
    background-size: cover;
    background-position: 60% center; /* la botella queda a la derecha */
    will-change: transform;
  }

  .hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Scrim radial detrás del título (centro) para asegurar contraste del
       texto, + el degradé vertical que funde con el resto de la página. */
    background:
      radial-gradient(ellipse 72% 55% at 50% 42%, rgba(5, 5, 5, 0.6), transparent 72%),
      var(--g-hero-overlay);
  }

  @media (min-width: 768px) {
    .hero__bg { background-position: center; }
  }

  .hero__particles {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

  .hero__brand-logo {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    z-index: 0;
    width: clamp(230px, 30vh, 310px);
    aspect-ratio: 720 / 500;
    translate: -50% 0;
    pointer-events: none;
    filter: drop-shadow(0 0 22px rgba(212, 175, 55, 0.16));
  }

  .hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: var(--sp-5);
    max-width: 900px;
    padding-inline: var(--sp-4);
  }

  @media (min-width: 768px) and (max-height: 760px) {
    .hero__content { transform: translateY(3.25rem); }
    .hero__brand-logo { width: 260px; }
    .hero__scroll { display: none; }
  }

  .hero__eyebrow {
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--c-gold-light);
  }

  .hero__title {
    font-size: var(--fs-hero);
    font-weight: 600;
    line-height: 1.05;
  }

  .hero__title em {
    font-style: italic;
    background: var(--g-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .hero__subtitle {
    font-size: var(--fs-md);
    font-weight: 300;
    color: var(--c-text-soft);
    max-width: 34rem;
    line-height: 1.7;
  }

  .hero__pills {
    list-style: none;
    padding: 0;
    margin: var(--sp-2) 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2) var(--sp-4);
  }

  .hero__pills li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    letter-spacing: 0.04em;
  }

  .hero__pills i { color: var(--c-gold); font-size: 0.75rem; }

  .hero__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
  }

  .hero__scroll {
    position: absolute;
    bottom: var(--sp-5);
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: var(--sp-2);
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--t-fast);
  }

  .hero__scroll:hover { color: var(--c-gold); }

  .hero__scroll-line {
    width: 1px;
    height: 44px;
    background: linear-gradient(180deg, var(--c-gold), transparent);
    overflow: hidden;
    position: relative;
  }

  .hero__scroll-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, var(--c-gold-light));
    animation: scrollHint 1.8s ease-in-out infinite;
  }

  /*
   * En pantallas táctiles el logo forma parte del flujo. Así la composición
   * completa se centra como una sola pieza y no invade el navbar cuando la
   * barra de Safari/Brave reduce la altura visible.
   */
  @media (max-width: 767px) {
    .hero {
      min-height: 100vh;
      min-height: 100svh;
      padding-block:
        calc(var(--nav-h) + env(safe-area-inset-top) + 1rem)
        calc(2rem + env(safe-area-inset-bottom));
    }

    .hero__bg {
      inset-block: -4%;
      background-position: 64% center;
    }

    .hero__content {
      width: 100%;
      max-width: 30rem;
      gap: clamp(0.75rem, 2.1svh, 1.125rem);
      padding-inline: 1.25rem;
    }

    .hero__brand-logo {
      position: relative;
      inset: auto;
      width: clamp(168px, 48vw, 196px);
      translate: none;
      margin-bottom: -0.25rem;
    }

    .hero__eyebrow {
      font-size: 0.68rem;
      line-height: 1.5;
      letter-spacing: 0.28em;
    }

    .hero__title {
      font-size: clamp(2.25rem, 10.5vw, 2.85rem);
    }

    .hero__subtitle {
      max-width: 22rem;
      font-size: 0.96rem;
      line-height: 1.55;
    }

    .hero__ctas {
      width: min(100%, 19rem);
      flex-direction: column;
      gap: 0.75rem;
      margin-top: 0.125rem;
    }

    .hero__ctas .btn {
      width: 100%;
      min-height: 46px;
      padding-block: 0.65rem;
    }

    .hero__scroll {
      bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }
  }

  @media (max-width: 767px) and (max-height: 720px) {
    .hero {
      padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    .hero__content {
      gap: 0.65rem;
    }

    .hero__brand-logo {
      width: 150px;
    }

    .hero__subtitle {
      font-size: 0.9rem;
      line-height: 1.45;
    }

    .hero__scroll {
      display: none;
    }
  }

  @media (max-width: 767px) and (orientation: portrait) and (min-height: 721px) {
    .hero__brand-logo {
      width: clamp(280px, 82vw, 330px);
      justify-self: center;
      margin-inline: auto;
      translate: 0 -1.5rem;
    }
  }

  @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .is-apple-touch-webkit .hero__content {
      transform: translateY(-4svh);
    }

    .hero__brand-logo {
      position: relative;
      inset: auto;
      width: clamp(360px, 48vw, 440px);
      translate: none;
      justify-self: center;
      margin-inline: auto;
      margin-bottom: -0.25rem;
    }
  }

  @media (orientation: landscape) and (max-height: 600px) {
    .is-apple-touch-webkit .hero {
      min-height: 100vh;
      min-height: 100svh;
      padding-block:
        calc(var(--nav-h) + env(safe-area-inset-top) + 0.5rem)
        calc(0.75rem + env(safe-area-inset-bottom));
    }

    .is-apple-touch-webkit .hero__content {
      max-width: min(92vw, 680px);
      gap: 0.45rem;
      padding-left: max(1.25rem, env(safe-area-inset-left));
      padding-right: max(1.25rem, env(safe-area-inset-right));
      transform: none;
    }

    .is-apple-touch-webkit .hero__brand-logo {
      position: relative;
      inset: auto;
      width: clamp(135px, 38svh, 180px);
      translate: none;
      margin-bottom: -0.2rem;
    }

    .is-apple-touch-webkit .hero__eyebrow {
      font-size: 0.62rem;
      line-height: 1.4;
      letter-spacing: 0.28em;
    }

    .is-apple-touch-webkit .hero__title {
      font-size: clamp(2rem, 11svh, 2.75rem);
    }

    .is-apple-touch-webkit .hero__subtitle {
      display: none;
    }

    .is-apple-touch-webkit .hero__ctas {
      width: auto;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 0.65rem;
      margin-top: 0.15rem;
    }

    .is-apple-touch-webkit .hero__ctas .btn {
      width: auto;
      min-height: 42px;
      padding: 0.55rem 1.25rem;
      font-size: 0.72rem;
    }

    .is-apple-touch-webkit .hero__scroll {
      display: none;
    }
  }

  /* ----------------------------------------------------------
     MARQUEE DE MARCAS
     ---------------------------------------------------------- */
  .brands {
    padding-block: var(--sp-6);
    border-block: 1px solid var(--c-border);
    background: var(--c-bg-elevated);
    overflow: hidden;
  }

  .marquee {
    display: flex;
    gap: var(--sp-8);
    width: max-content;
    animation: marquee 42s linear infinite;
  }

  .brands:hover .marquee { animation-play-state: paused; }

  .marquee__group {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    padding-right: var(--sp-8);
  }

  .marquee__item {
    font-family: var(--f-serif);
    font-size: var(--fs-md);
    font-style: italic;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    white-space: nowrap;
    transition: color var(--t-base);
  }

  .marquee__item:hover { color: var(--c-gold); }

  .marquee__dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--c-gold-dark);
    flex: none;
  }

  /* ----------------------------------------------------------
     TRUST STRIP (beneficios)
     ---------------------------------------------------------- */
  .trust {
    padding-block: var(--sp-6);
  }

  .trust__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5) var(--sp-4);
  }

  .trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-3);
  }

  .trust-item i {
    flex: none;
    width: 44px;
    height: 44px;
    /* !important gana contra el CSS de FontAwesome (que carga sin @layer
       y de otro modo pisaría el display, descentrando el glyph). */
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    background: var(--c-gold-soft);
    font-size: 1rem;
    color: var(--c-gold);
  }

  .trust-item h3 {
    font-family: var(--f-sans);
    font-size: var(--fs-sm);
    font-weight: 500;
  }

  .trust-item p {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin-top: 2px;
    line-height: 1.55;
  }

  /* ----------------------------------------------------------
     PASOS DE COMPRA (tienda)
     ---------------------------------------------------------- */
  .steps {
    padding-block: 0 var(--sp-6);
  }

  .steps__grid {
    display: grid;
    gap: var(--sp-3);
    counter-reset: paso;
  }

  .step {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    counter-increment: paso;
  }

  .step::before {
    content: "0" counter(paso);
    font-family: var(--f-serif);
    font-size: var(--fs-lg);
    font-style: italic;
    background: var(--g-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    flex: none;
  }

  .step h3 {
    font-family: var(--f-sans);
    font-size: var(--fs-sm);
    font-weight: 500;
  }

  .step p {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin-top: 2px;
  }

  /* ----------------------------------------------------------
     MAYORISTAS / CATÁLOGOS
     ---------------------------------------------------------- */
  .wholesale { background: var(--c-bg); }

  .wholesale__intro {
    max-width: 40rem;
  }

  .wholesale__intro p {
    color: var(--c-text-soft);
    line-height: 1.8;
    margin-top: var(--sp-4);
  }

  .wholesale__grid {
    display: grid;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
  }

  .catalog-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--sp-3);
    padding: var(--sp-5);
    text-decoration: none;
  }

  .catalog-card > div { width: 100%; }

  /* Solo el ícono principal de la card (no el de __dl) */
  .catalog-card > i {
    flex: none;
    width: 52px;
    height: 52px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: var(--r-md);
    background: var(--c-gold-soft);
    border: 1px solid var(--c-border);
    font-size: 1.3rem;
    color: var(--c-gold);
    transition: transform var(--t-spring);
  }

  .catalog-card:hover > i { transform: translateY(-3px); }

  .catalog-card h3 {
    font-family: var(--f-sans);
    font-size: var(--fs-base);
    font-weight: 500;
  }

  .catalog-card p {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin-top: 2px;
  }

  .catalog-card__dl {
    width: 44px;
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: var(--c-gold-soft);
    color: var(--c-gold);
    font-size: 1rem;
    transition: transform var(--t-base), background var(--t-fast);
  }

  .catalog-card__dl i {
    width: auto !important;
    height: auto !important;
    border: none !important;
    background: none !important;
    border-radius: 0 !important;
    font-size: inherit;
    color: inherit;
    display: inline !important;
    line-height: 1;
    transform: none !important;
  }

  .catalog-card:hover .catalog-card__dl {
    transform: translateY(3px);
    background: rgba(212, 175, 55, 0.14);
  }

  .wholesale__cta {
    margin-top: var(--sp-6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
  }

  .wholesale__cta p {
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
  }

  /* ----------------------------------------------------------
     NOSOTROS
     ---------------------------------------------------------- */
  .about__grid {
    display: grid;
    gap: var(--sp-7);
  }

  .about__story p + p { margin-top: var(--sp-4); }

  .about__story p {
    color: var(--c-text-soft);
    line-height: 1.85;
  }

  .about__story strong {
    color: var(--c-gold-light);
    font-weight: 500;
  }

  /* Stats / counters */
  .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
    margin-top: var(--sp-7);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--c-border);
  }

  .stat { text-align: center; }

  .stat__value {
    font-family: var(--f-serif);
    font-size: var(--fs-2xl);
    font-weight: 600;
    background: var(--g-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }

  .stat__label {
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin-top: var(--sp-2);
  }

  /* Valores */
  .values {
    display: grid;
    gap: var(--sp-4);
    margin-top: var(--sp-7);
  }

  .value-card {
    padding: var(--sp-5);
    display: grid;
    gap: var(--sp-3);
    align-content: start;
  }

  .value-card i {
    font-size: 1.5rem;
    background: var(--g-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .value-card h3 {
    font-family: var(--f-sans);
    font-size: var(--fs-md);
    font-weight: 500;
  }

  .value-card p {
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
    line-height: 1.7;
  }

  /* Visión / Misión */
  .vm-grid {
    display: grid;
    gap: var(--sp-5);
    margin-top: var(--sp-7);
  }

  .vm-card {
    padding: var(--sp-6);
    text-align: center;
  }

  .vm-card h3 {
    font-size: var(--fs-lg);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    background: var(--g-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: var(--sp-4);
  }

  .vm-card p {
    color: var(--c-text-soft);
    line-height: 1.85;
  }

  /* ----------------------------------------------------------
     CATEGORÍAS SHOWCASE
     ---------------------------------------------------------- */
  .categories { background: var(--c-bg-elevated); }

  .categories__grid {
    display: grid;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
  }

  .category-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-lg);
    overflow: hidden;
    text-decoration: none;
    border: 1px solid var(--c-border);
    isolation: isolate;
    transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  }

  .category-card:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--sh-gold-hover);
    transform: translateY(-4px);
  }

  .category-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .category-card:hover img { transform: scale(1.08); }

  .category-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--g-card-overlay);
    transition: opacity var(--t-base);
  }

  .category-card__body {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--sp-5);
    display: grid;
    gap: var(--sp-1);
  }

  .category-card__name {
    font-family: var(--f-serif);
    font-size: var(--fs-lg);
    color: var(--c-text);
  }

  .category-card__desc {
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--t-slow), opacity var(--t-slow);
  }

  .category-card:hover .category-card__desc,
  .category-card:focus-visible .category-card__desc {
    max-height: 4em;
    opacity: 1;
  }

  .category-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-gold);
    margin-top: var(--sp-2);
  }

  .category-card__cta i {
    transition: transform var(--t-base);
  }

  .category-card:hover .category-card__cta i { transform: translateX(6px); }

  /* ----------------------------------------------------------
     FAMILIAS OLFATIVAS
     ---------------------------------------------------------- */
  .familias__grid {
    display: grid;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
  }

  .familia-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 230px;
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    border: 1px solid var(--c-border);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  }

  .familia-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.85;
    transition: opacity var(--t-slow), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .familia-card:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--sh-gold-hover);
    transform: translateY(-4px);
  }

  .familia-card:hover::before { opacity: 1; transform: scale(1.06); }

  /* Arte por familia: territorios de color dentro de la paleta dorada */
  .familia-card--ambar::before {
    background:
      radial-gradient(ellipse 90% 70% at 75% 15%, rgba(212, 160, 60, 0.4), transparent 65%),
      radial-gradient(ellipse 70% 60% at 20% 90%, rgba(140, 85, 20, 0.45), transparent 70%),
      var(--c-surface);
  }

  .familia-card--amaderada::before {
    background:
      radial-gradient(ellipse 80% 70% at 20% 10%, rgba(120, 80, 40, 0.5), transparent 65%),
      radial-gradient(ellipse 70% 50% at 85% 85%, rgba(70, 45, 22, 0.55), transparent 70%),
      var(--c-surface);
  }

  .familia-card--floral::before {
    background:
      radial-gradient(ellipse 85% 65% at 70% 20%, rgba(190, 120, 110, 0.32), transparent 65%),
      radial-gradient(ellipse 60% 55% at 15% 85%, rgba(212, 175, 55, 0.2), transparent 70%),
      var(--c-surface);
  }

  .familia-card--gourmand::before {
    background:
      radial-gradient(ellipse 85% 70% at 30% 15%, rgba(190, 120, 45, 0.4), transparent 65%),
      radial-gradient(ellipse 70% 55% at 85% 90%, rgba(120, 60, 25, 0.45), transparent 70%),
      var(--c-surface);
  }

  .familia-card--fresca::before {
    background:
      radial-gradient(ellipse 85% 65% at 75% 15%, rgba(150, 180, 150, 0.22), transparent 65%),
      radial-gradient(ellipse 65% 55% at 15% 85%, rgba(212, 195, 120, 0.2), transparent 70%),
      var(--c-surface);
  }

  .familia-card--especiada::before {
    background:
      radial-gradient(ellipse 85% 70% at 70% 15%, rgba(180, 75, 35, 0.38), transparent 65%),
      radial-gradient(ellipse 65% 55% at 20% 90%, rgba(212, 140, 40, 0.3), transparent 70%),
      var(--c-surface);
  }

  .familia-card__body {
    display: grid;
    gap: var(--sp-1);
  }

  .familia-card__name {
    font-family: var(--f-serif);
    font-size: var(--fs-lg);
    color: var(--c-text);
  }

  .familia-card__notes {
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-gold-light);
  }

  .familia-card__desc {
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
    line-height: 1.6;
    margin-top: var(--sp-1);
  }

  /* ----------------------------------------------------------
     GUÍA DE NOTAS
     ---------------------------------------------------------- */
  .notes-guide__grid {
    display: grid;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
    counter-reset: acto;
  }

  .note-tier {
    padding: var(--sp-6);
    display: grid;
    gap: var(--sp-3);
    align-content: start;
  }

  .note-tier__num {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: var(--fs-xl);
    line-height: 1;
    background: var(--g-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .note-tier h3 {
    font-family: var(--f-sans);
    font-size: var(--fs-md);
    font-weight: 500;
  }

  .note-tier p {
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
    line-height: 1.75;
  }

  /* ----------------------------------------------------------
     TIENDA
     ---------------------------------------------------------- */
  .store-hero {
    padding-block: calc(var(--nav-h) + var(--sp-8)) var(--sp-6);
    text-align: center;
    background:
      radial-gradient(ellipse 70% 50% at 50% 0%, rgba(212,175,55,0.08), transparent),
      var(--c-bg);
  }

  .store-hero h1 {
    font-size: var(--fs-2xl);
  }

  .store-hero p {
    color: var(--c-text-soft);
    max-width: 36rem;
    margin: var(--sp-4) auto 0;
  }

  .store-hero__trust {
    list-style: none;
    padding: 0;
    margin: var(--sp-6) auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3) var(--sp-5);
    max-width: 52rem;
  }

  .store-hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
  }

  .store-hero__trust i { color: var(--c-gold); }

  .store-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
  }

  .store-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--r-full);
    border: 1px solid var(--c-border-strong);
    background: var(--c-gold-soft);
    color: var(--c-gold-light);
    font-size: var(--fs-xs);
    font-weight: 500;
    transition: background var(--t-fast), color var(--t-fast);
  }

  .store-chip:hover {
    background: var(--g-gold);
    color: var(--c-text-invert);
    border-color: transparent;
  }

  .store-chip--clear {
    background: transparent;
    color: var(--c-text-muted);
    border-style: dashed;
  }

  .store-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-6);
  }

  .store-more-wrap[hidden] { display: none !important; }

  .recent {
    padding-block: var(--sp-7) var(--sp-9);
    border-top: 1px solid rgba(212, 175, 55, 0.08);
  }

  .recent .section-title { margin-bottom: var(--sp-5); }

  .product-detail__secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
  }

  .product-detail__secondary .btn { width: 100%; }

  .product-detail__name a {
    color: inherit;
    text-decoration: none;
  }
  .product-detail__name a:hover { color: var(--c-gold-light); }

  .product-detail__trust {
    list-style: none;
    padding: 0;
    margin: var(--sp-5) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-4);
  }

  .product-detail__trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
  }

  .product-detail__trust i { color: var(--c-gold); }

  .product-detail__stock--oos { color: var(--c-error); }

  .cart-bar {
    position: fixed;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-drawer);
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 0.7rem 0.7rem 0.7rem 1rem;
    border-radius: var(--r-lg);
    border: 1px solid var(--c-border-strong);
    background: rgba(16, 16, 18, 0.94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: var(--sh-lg);
    transform: translateY(120%);
    transition: transform var(--t-spring);
  }

  .cart-bar.is-visible {
    display: flex;
    transform: translateY(0);
  }

  .cart-bar__info {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .cart-bar__info strong {
    font-family: var(--f-sans);
    font-size: var(--fs-sm);
    font-weight: 500;
  }

  .cart-bar__info span {
    font-size: var(--fs-xs);
    color: var(--c-gold-light);
    font-variant-numeric: tabular-nums;
  }

  .cart-bar .btn { flex: none; padding-inline: 1.1rem; min-height: 42px; }

  @media (min-width: 900px) {
    .cart-bar { display: none !important; }
  }

  body:has(.cart-bar.is-visible) {
    padding-bottom: 5.5rem;
  }

  /* Barra de filtros */
  .store-controls {
    /* En mobile NO es sticky: apilada (tabs + buscador + 3 selects) ocuparía
       media pantalla si quedara fija. Scrollea con el contenido. */
    position: static;
    z-index: var(--z-raised);
    padding-block: var(--sp-4);
    background: rgba(5, 5, 5, 0.88);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--c-border);
  }

  .store-controls__inner {
    display: grid;
    gap: var(--sp-3);
  }

  .store-tabs {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .store-tabs[hidden] { display: none !important; }

  /* Categoría principal: un solo grupo compacto */
  .store-tabs--cat {
    gap: 0;
    width: fit-content;
    max-width: 100%;
    padding: 3px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: var(--r-full);
    background: rgba(12, 12, 14, 0.72);
  }

  .store-tabs--cat .store-tab {
    min-height: 36px;
    padding: 0.35rem 0.95rem;
    border: none;
    border-radius: var(--r-full);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: var(--c-text-muted);
  }

  .store-tabs--cat .store-tab:hover {
    color: var(--c-gold-light);
    border-color: transparent;
    background: rgba(212, 175, 55, 0.06);
  }

  .store-tabs--cat .store-tab.is-active {
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.15);
  }

  .store-tabs--cat .store-tab__count {
    opacity: 0.5;
    font-weight: 400;
  }

  /* Fila secundaria (familia o subtipo): más liviana */
  .store-tabs--secondary {
    gap: 0.35rem;
  }

  .store-tab--sub {
    min-height: 34px;
    padding: 0.3rem 0.8rem;
    font-size: 0.78rem;
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--c-text-muted);
  }

  .store-tab--sub.is-active {
    background: transparent;
    border-color: rgba(212, 175, 55, 0.55);
    color: var(--c-gold-light);
    font-weight: 500;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.12);
  }

  .store-tabs::-webkit-scrollbar { display: none; }

  .store-tab {
    flex: none;
    min-height: 44px;
    padding: var(--sp-2) var(--sp-5);
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    font-weight: 400;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: all var(--t-fast);
    touch-action: manipulation;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    cursor: pointer;
  }

  #filter-genero[hidden] { display: none !important; }

  .store-tab:hover {
    color: var(--c-gold-light);
    border-color: var(--c-border-strong);
  }

  .store-tab.is-active {
    background: var(--g-gold);
    border-color: transparent;
    color: var(--c-text-invert);
    font-weight: 600;
  }

  .store-tab.is-empty {
    opacity: 0.45;
  }

  .store-tab__count {
    opacity: 0.65;
    font-size: 0.82em;
    margin-left: 0.4em;
    font-variant-numeric: tabular-nums;
  }

  .store-filters {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-3);
  }

  /* Variante tienda: buscador + selects */
  .store-filters--frag { grid-template-columns: 1fr 1fr; }
  .store-filters--frag .store-search { grid-column: 1 / -1; }
  .store-filters--belleza { grid-template-columns: 1fr 1fr; }
  .store-filters--belleza .store-search { grid-column: 1 / -1; }

  .store-search {
    position: relative;
    display: flex;
    align-items: center;
  }

  .store-search i {
    position: absolute;
    left: var(--sp-4);
    color: var(--c-text-muted);
    font-size: 0.9rem;
    pointer-events: none;
  }

  .store-search input {
    width: 100%;
    min-height: 48px;
    padding: var(--sp-2) var(--sp-4) var(--sp-2) calc(var(--sp-4) * 2.4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    color: var(--c-text);
    font-size: 16px;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
  }

  .store-search input:focus {
    outline: none;
    border-color: var(--c-gold);
    box-shadow: 0 0 0 3px var(--c-gold-soft);
  }

  .store-sort {
    min-height: 48px;
    padding: var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-4);
    background: var(--c-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23d4af37' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right var(--sp-4) center;
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color var(--t-fast);
  }

  .store-sort:focus {
    outline: none;
    border-color: var(--c-gold);
  }

  /* Grid de productos */
  .store-grid-section { padding-block: var(--sp-6) var(--sp-9); }

  .store-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  @media (min-width: 560px) {
    .store-grid { grid-template-columns: repeat(2, 1fr); }
  }

  .store-count {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-4);
  }

  .store-status {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
    background: var(--c-surface);
  }

  .store-status[hidden] { display: none !important; }

  .store-status--loading { border-color: rgba(212,175,55,0.25); color: var(--c-gold-light); }
  .store-status--error {
    border-color: rgba(248,113,113,0.35);
    color: #fecaca;
    background: rgba(248,113,113,0.08);
  }

  .store-status__btn {
    margin-left: auto;
    padding: 0.35rem 0.85rem;
    border-radius: var(--r-full);
    border: 1px solid var(--c-border-strong);
    color: var(--c-gold-light);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .store-status__btn:hover { background: var(--c-gold-soft); }

  .order-ok-page {
    padding-block: calc(var(--nav-h) + var(--sp-8)) var(--sp-9);
  }

  /* ---------- Página Mi cuenta / Hub ---------- */
  .account-page {
    padding-block: calc(var(--nav-h) + var(--sp-7)) var(--sp-9);
    min-height: 100dvh;
    background:
      radial-gradient(ellipse 60% 40% at 50% 0%, rgba(212, 175, 55, 0.07), transparent 70%);
  }

  .account-page__wrap { max-width: 1100px; }

  .account-page__header {
    margin-bottom: var(--sp-6);
  }

  .account-page__lead {
    color: var(--c-text-soft);
    max-width: 36rem;
    margin-top: var(--sp-3);
    line-height: 1.7;
    font-size: var(--fs-sm);
  }

  .account-page__shell {
    min-height: 520px;
  }

  .account-page__card {
    padding: 0;
    overflow: hidden;
    min-height: 360px;
  }

  /* Hub layout */
  .acc-hub {
    display: grid;
    gap: var(--sp-4);
    align-items: start;
  }

  .acc-hub__side {
    border: 1px solid rgba(212, 175, 55, 0.16);
    border-radius: var(--r-lg);
    background:
      linear-gradient(165deg, rgba(212, 175, 55, 0.07), transparent 40%),
      var(--c-surface);
    padding: var(--sp-4);
    display: grid;
    gap: var(--sp-4);
  }

  .acc-hub__profile {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }

  .acc-hub__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    flex: none;
    border: 2px solid rgba(212, 175, 55, 0.4);
    background: var(--c-gold-soft);
    color: var(--c-gold-light);
    font-weight: 600;
  }

  .acc-hub__avatar img { width: 100%; height: 100%; object-fit: cover; }

  .acc-hub__who {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
  }

  .acc-hub__tier {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-gold);
    font-weight: 600;
  }

  .acc-hub__who strong {
    font-family: var(--f-serif);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .acc-hub__mail {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .acc-hub__nav {
    display: grid;
    gap: 4px;
  }

  .acc-hub__nav-btn {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border-radius: var(--r-md);
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    text-align: left;
    transition: background var(--t-fast), color var(--t-fast);
  }

  .acc-hub__nav-btn i {
    width: 1.1rem;
    text-align: center;
    color: var(--c-gold);
    opacity: 0.75;
  }

  .acc-hub__nav-btn em {
    margin-left: auto;
    font-style: normal;
    font-size: 0.7rem;
    min-width: 1.4rem;
    height: 1.4rem;
    display: grid;
    place-items: center;
    border-radius: var(--r-full);
    background: rgba(212, 175, 55, 0.12);
    color: var(--c-gold-light);
  }

  .acc-hub__nav-btn.is-active {
    background: var(--g-gold);
    color: var(--c-text-invert);
    font-weight: 600;
  }

  .acc-hub__nav-btn.is-active i,
  .acc-hub__nav-btn.is-active em {
    color: inherit;
    opacity: 1;
    background: rgba(0, 0, 0, 0.12);
  }

  .acc-hub__side-foot {
    display: grid;
    gap: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(212, 175, 55, 0.1);
  }

  .acc-hub__wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 42px;
    border-radius: var(--r-full);
    border: 1px solid rgba(37, 211, 102, 0.35);
    color: #6ee7a0;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
  }

  .acc-hub__logout {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0.35rem;
  }

  .acc-hub__logout:hover { color: var(--c-error); }

  .acc-hub__main {
    border: 1px solid rgba(212, 175, 55, 0.14);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    padding: var(--sp-5);
    min-height: 480px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
  }

  .acc-hub__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
  }

  .acc-hub__greet {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
  }

  .acc-hub__title {
    margin: 0.2rem 0 0;
    font-family: var(--f-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
  }

  .acc-hub__shop { min-height: 42px; }

  .acc-hub__body { display: grid; gap: var(--sp-5); }

  .acc-dash, .acc-orders, .acc-wish, .acc-help, .acc-datos { display: grid; gap: var(--sp-5); }

  .acc-lead {
    margin: 0;
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    line-height: 1.6;
  }

  .acc-promise {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid rgba(212, 175, 55, 0.2);
    background: linear-gradient(120deg, rgba(212, 175, 55, 0.1), transparent 60%);
  }

  .acc-promise i {
    color: var(--c-gold);
    font-size: 1.2rem;
    margin-top: 0.15rem;
  }

  .acc-promise strong {
    display: block;
    font-family: var(--f-serif);
    font-size: 1.15rem;
    margin-bottom: 0.25rem;
  }

  .acc-promise p {
    margin: 0;
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    line-height: 1.6;
  }

  .acc-tier {
    padding: var(--sp-5);
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    background: rgba(0, 0, 0, 0.25);
    display: grid;
    gap: var(--sp-3);
  }

  .acc-tier__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-4);
  }

  .acc-tier__label {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-gold);
  }

  .acc-tier h3 {
    margin: 0.2rem 0;
    font-family: var(--f-serif);
    font-size: 1.5rem;
  }

  .acc-tier p { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }

  .acc-tier__spent {
    text-align: right;
  }

  .acc-tier__spent strong {
    display: block;
    font-family: var(--f-serif);
    font-size: 1.35rem;
    color: var(--c-gold-light);
  }

  .acc-tier__spent span {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .acc-tier__bar {
    height: 6px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
  }

  .acc-tier__bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--g-gold);
  }

  .acc-tier__next {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
  }

  .acc-quick {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  .acc-quick__btn {
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    padding: var(--sp-4) var(--sp-3);
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--c-text-soft);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
  }

  .acc-quick__btn i { color: var(--c-gold); font-size: 1.1rem; }
  .acc-quick__btn:hover {
    border-color: rgba(212, 175, 55, 0.4);
    color: var(--c-gold-light);
    transform: translateY(-2px);
  }

  .acc-grid2 {
    display: grid;
    gap: var(--sp-4);
  }

  .acc-block {
    padding: var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    background: rgba(0, 0, 0, 0.18);
    display: grid;
    gap: var(--sp-3);
  }

  .acc-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
  }

  .acc-block h3 {
    margin: 0;
    font-family: var(--f-serif);
    font-size: 1.2rem;
  }

  .acc-link {
    border: 0;
    background: none;
    color: var(--c-gold);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
  }

  .acc-link:hover { color: var(--c-gold-light); }

  .acc-empty {
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    display: grid;
    gap: var(--sp-3);
    justify-items: center;
    color: var(--c-text-soft);
  }

  .acc-empty i { font-size: 1.8rem; color: var(--c-gold); opacity: 0.7; }
  .acc-empty h3 { margin: 0; font-family: var(--f-serif); font-size: 1.35rem; color: var(--c-text); }
  .acc-empty p { margin: 0; max-width: 28rem; line-height: 1.6; }
  .acc-empty--sm { padding: var(--sp-4); }

  .acc-mini-row {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
  }

  .acc-mini {
    width: 64px;
    height: 64px;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    display: grid;
    place-items: center;
  }

  .acc-mini img { width: 100%; height: 100%; object-fit: cover; }
  .acc-mini__ph { font-size: 0.7rem; color: var(--c-gold); font-weight: 600; }

  .acc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

  .acc-chip {
    padding: 0.35rem 0.75rem;
    border-radius: var(--r-full);
    border: 1px solid rgba(212, 175, 55, 0.28);
    background: rgba(212, 175, 55, 0.1);
    color: var(--c-gold-light);
    font-size: var(--fs-xs);
  }

  .acc-chip--soft {
    border-color: var(--c-border);
    background: transparent;
    color: var(--c-text-soft);
  }

  .acc-hint, .acc-foot {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: 1.5;
  }

  .acc-values {
    display: grid;
    gap: var(--sp-3);
  }

  .acc-values article {
    padding: var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    display: grid;
    gap: 0.35rem;
  }

  .acc-values i { color: var(--c-gold); }
  .acc-values h4 { margin: 0; font-size: var(--fs-sm); }
  .acc-values p { margin: 0; font-size: var(--fs-xs); color: var(--c-text-muted); }

  .order-card--full { padding: 0; overflow: hidden; }
  .order-card__hit {
    display: grid;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-4) var(--sp-5);
    text-align: left;
    color: inherit;
    background: transparent;
    border: 0;
  }
  .order-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: 0 var(--sp-4) var(--sp-4);
  }
  .order-card__actions .btn { min-height: 38px; flex: 1 1 auto; font-size: 0.7rem; }

  .order-steps {
    display: flex;
    gap: 6px;
  }
  .order-steps > i {
    flex: 1;
    height: 4px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.08);
  }
  .order-steps > i.is-on { background: var(--c-gold); }

  .order-steps--lg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2);
    margin: var(--sp-3) 0;
  }
  .order-steps__item {
    display: grid;
    gap: 0.35rem;
    justify-items: center;
    text-align: center;
    font-size: 0.65rem;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .order-steps__item i {
    width: 100%;
    height: 4px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.08);
  }
  .order-steps__item.is-on { color: var(--c-gold-light); }
  .order-steps__item.is-on i { background: var(--c-gold); }

  .acc-wish__list { display: grid; gap: var(--sp-3); }
  .acc-wish__item {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: var(--sp-4);
    padding: var(--sp-3);
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    background: rgba(0, 0, 0, 0.2);
  }
  .acc-wish__img {
    width: 88px;
    height: 88px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--c-surface-2);
    display: grid;
    place-items: center;
  }
  .acc-wish__img img { width: 100%; height: 100%; object-fit: cover; }
  .acc-wish__brand {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-gold);
  }
  .acc-wish__name {
    display: block;
    color: var(--c-text);
    text-decoration: none;
    font-family: var(--f-serif);
    font-size: 1.1rem;
    margin: 0.15rem 0;
  }
  .acc-wish__acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
  }
  .acc-wish__acts .btn { min-height: 36px; font-size: 0.7rem; }

  .acc-form { display: grid; gap: var(--sp-4); max-width: 520px; }
  .acc-form__h {
    margin: 0;
    font-family: var(--f-serif);
    font-size: 1.25rem;
  }
  .acc-form__row {
    display: grid;
    gap: var(--sp-3);
  }
  .acc-field {
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    margin: 0;
  }
  .acc-field legend {
    padding: 0 0.4rem;
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-gold);
  }
  .acc-checks {
    display: grid;
    gap: 0.45rem;
  }
  .acc-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
    cursor: pointer;
  }
  .acc-check input { accent-color: var(--c-gold); }

  .acc-help__grid {
    display: grid;
    gap: var(--sp-3);
  }
  .acc-help__card {
    display: grid;
    gap: 0.35rem;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--t-fast), transform var(--t-fast);
  }
  .acc-help__card:hover {
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
  }
  .acc-help__card i { color: var(--c-gold); font-size: 1.2rem; }
  .acc-help__card h3 { margin: 0; font-size: var(--fs-sm); }
  .acc-help__card p { margin: 0; font-size: var(--fs-xs); color: var(--c-text-muted); }

  .acc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
  }
  .acc-list li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
  }
  .acc-list i { color: var(--c-gold); font-size: 0.75rem; }

  .acc-detail-acts {
    display: grid;
    gap: var(--sp-2);
  }

  .acc-datos { gap: var(--sp-6); }

  @media (min-width: 900px) {
    .acc-hub {
      grid-template-columns: 260px 1fr;
      gap: var(--sp-5);
    }
    .acc-hub__side {
      position: sticky;
      top: calc(var(--nav-h) + 1rem);
    }
    .acc-hub__main { padding: var(--sp-6) var(--sp-7); }
    .acc-quick { grid-template-columns: repeat(4, 1fr); }
    .acc-grid2 { grid-template-columns: 1.1fr 0.9fr; }
    .acc-values { grid-template-columns: repeat(3, 1fr); }
    .acc-help__grid { grid-template-columns: repeat(2, 1fr); }
    .acc-form__row { grid-template-columns: 1fr 1fr; }
    .acc-checks { grid-template-columns: 1fr 1fr; }
  }

  .account-gate {
    padding: var(--sp-8) var(--sp-6);
    text-align: center;
    display: grid;
    gap: var(--sp-4);
    justify-items: center;
  }

  .account-gate__icon {
    width: 72px;
    height: 72px;
    border-radius: var(--r-full);
    display: grid;
    place-items: center;
    border: 1px solid var(--c-border);
    background: var(--c-gold-soft);
    color: var(--c-gold);
    font-size: 1.5rem;
  }

  .account-gate h2 {
    font-family: var(--f-serif);
    font-size: var(--fs-xl);
  }

  .account-gate p {
    color: var(--c-text-soft);
    max-width: 28rem;
    line-height: 1.7;
  }

  .nav__icon-btn.is-active-icon,
  a.nav__icon-btn[aria-current="page"] {
    color: var(--c-gold);
    background: var(--c-gold-soft);
  }

  @media (min-width: 768px) {
    .account-page__card .account {
      padding: var(--sp-7) var(--sp-8);
    }
    .account-page__card .account__form {
      max-width: 440px;
    }
    .account__hero {
      padding: var(--sp-6);
    }
    .account__avatar {
      width: 88px;
      height: 88px;
    }
  }

  .order-ok-card {
    padding: var(--sp-6);
    text-align: center;
  }

  .order-ok-summary {
    text-align: left;
    margin: var(--sp-5) 0;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
  }

  .order-ok-lines {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-3);
    display: grid;
    gap: 0.5rem;
  }

  .order-ok-lines li {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
  }

  .order-ok-total {
    display: flex;
    justify-content: space-between;
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(212,175,55,0.12);
    font-size: var(--fs-base);
    color: var(--c-gold-light);
  }

  .order-ok-meta {
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
  }

  .co-address-row {
    display: grid;
    grid-template-columns: 1fr 6.5rem;
    gap: var(--sp-3);
  }

  .pdp-sticky {
    position: fixed;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-drawer);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 0.65rem 0.75rem 0.65rem 1rem;
    border-radius: var(--r-lg);
    border: 1px solid var(--c-border-strong);
    background: rgba(16, 16, 18, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--sh-lg);
  }

  .pdp-sticky[hidden] { display: none !important; }

  .pdp-sticky__info {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .pdp-sticky__info strong {
    font-family: var(--f-sans);
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pdp-sticky__info span {
    font-size: var(--fs-xs);
    color: var(--c-gold-light);
  }

  .pdp-sticky .btn { flex: none; min-height: 42px; }

  body:has(.cart-bar.is-visible) .pdp-sticky {
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }

  @media (min-width: 900px) {
    .pdp-sticky { display: none !important; }
  }

  .pdp__pyramid { margin-top: var(--sp-5); }

  .pdp__col-media {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }
  .pdp__accords {
    width: 100%;
    padding: 0;
    margin-top: 0.2rem;
  }

  /* Panel de firma olfativa: metal cepillado + láminas cromáticas 3D. */
  .accords {
    position: relative;
    isolation: isolate;
    margin: 0;
    width: 100%;
    padding: 1.35rem 1.35rem 1rem;
    overflow: hidden;
    border: 1px solid rgba(224, 187, 78, 0.58);
    border-radius: 20px;
    background:
      radial-gradient(ellipse 82% 58% at 50% -12%, rgba(255, 255, 255, 0.1), transparent 58%),
      repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7px),
      linear-gradient(145deg, #1a1a1d 0%, #080809 48%, #111114 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.09),
      inset 0 0 0 4px rgba(0, 0, 0, 0.34),
      0 18px 42px rgba(0, 0, 0, 0.34),
      0 0 26px rgba(212, 175, 55, 0.07);
  }

  .accords::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 5px;
    pointer-events: none;
    border: 1px solid rgba(244, 213, 119, 0.18);
    border-radius: 15px;
  }

  .accords::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -42%;
    right: -12%;
    width: 52%;
    aspect-ratio: 1;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236, 200, 96, 0.11), transparent 68%);
  }

  .accords > * {
    position: relative;
    z-index: 1;
  }

  .accords__head {
    display: grid;
    gap: 0.15rem;
    margin-bottom: 1rem;
    padding: 0 0.2rem 0.9rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.22);
  }

  .accords__eyebrow {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--c-gold);
  }

  .accords__title {
    font-family: var(--f-serif);
    font-size: clamp(1.05rem, 0.95rem + 0.32vw, 1.24rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    color: #f5ead0;
    margin: 0;
  }

  .accords__list {
    display: grid;
    gap: 9px;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .accord {
    --accord-w: 100%;
    --accord-delay: 0s;
    --accord-color: #8a7a6a;
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 3rem;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    padding: 0.42rem 0.78rem;
    overflow: hidden;
    border: 1px solid rgba(235, 206, 121, 0.2);
    border-radius: 10px;
    background:
      repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 6px),
      linear-gradient(180deg, #19191c 0%, #08080a 54%, #101012 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -1px 0 rgba(0, 0, 0, 0.74),
      0 5px 12px rgba(0, 0, 0, 0.26);
    transition:
      transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
      border-color 220ms ease,
      box-shadow 220ms ease;
  }

  .accord::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.46) 0%,
        rgba(255, 255, 255, 0.13) 22%,
        transparent 45%,
        rgba(0, 0, 0, 0.28) 76%,
        rgba(0, 0, 0, 0.48) 100%),
      linear-gradient(100deg,
        rgba(255, 255, 255, 0.1),
        transparent 36%,
        rgba(0, 0, 0, 0.16) 78%),
      var(--accord-color);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset -8px 0 16px rgba(0, 0, 0, 0.2),
      7px 0 14px rgba(0, 0, 0, 0.2);
    animation: accord-fill 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) var(--accord-delay) forwards;
    will-change: width;
  }

  .accord::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 3px;
    left: 5px;
    width: calc(var(--accord-w) - 10px);
    height: 34%;
    pointer-events: none;
    border-radius: 8px 8px 45% 45%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0.55;
  }

  .accord:hover {
    z-index: 2;
    transform: translate3d(4px, -1px, 0);
    border-color: rgba(242, 207, 105, 0.48);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.11),
      inset 0 -1px 0 rgba(0, 0, 0, 0.74),
      -5px 9px 18px rgba(0, 0, 0, 0.36),
      0 0 18px rgba(212, 175, 55, 0.07);
  }

  @keyframes accord-fill {
    from { width: 0; opacity: 0.58; }
    to { width: var(--accord-w); opacity: 1; }
  }

  @keyframes accord-edge-in {
    from { opacity: 0; transform: translateX(-100%) scaleY(0.35); }
    to { opacity: 1; transform: translateX(-100%) scaleY(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .accord::before {
      animation: none;
      width: var(--accord-w);
      opacity: 1;
    }
    .accord__edge { animation: none; opacity: 1; }
    .accord:hover { transform: none; }
  }

  .accord__rank {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(247, 222, 149, 0.36);
    border-radius: 50%;
    background:
      radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.14), transparent 34%),
      rgba(5, 5, 6, 0.58);
    color: #f5e5b7;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 3px 8px rgba(0, 0, 0, 0.3);
  }

  .accord__label {
    position: relative;
    z-index: 3;
    justify-self: start;
    min-width: 0;
    max-width: 100%;
    padding: 0.28rem 0.58rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--r-full);
    background: rgba(5, 5, 7, 0.46);
    color: #fffaf0;
    font-size: 0.86rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.025em;
    line-height: 1.2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  .accord__edge {
    position: absolute;
    z-index: 2;
    top: 5px;
    bottom: 5px;
    left: var(--accord-w);
    width: 2px;
    pointer-events: none;
    border-radius: 2px;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.78),
      rgba(255, 255, 255, 0.18) 42%,
      rgba(0, 0, 0, 0.44));
    box-shadow:
      -2px 0 4px rgba(255, 255, 255, 0.14),
      3px 0 7px rgba(0, 0, 0, 0.34);
    opacity: 0;
    transform: translateX(-100%);
    transform-origin: center;
    animation: accord-edge-in 0.22s ease calc(var(--accord-delay) + 0.65s) forwards;
  }

  .accords__legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.85rem 0 0;
    padding-inline: 0.2rem;
    color: rgba(230, 222, 204, 0.52);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .accords__legend > span {
    width: 2.35rem;
    height: 1px;
    background: linear-gradient(90deg, var(--c-gold), transparent);
  }

  .product-detail__col-media .accords {
    margin-top: var(--sp-2);
  }
  .product-detail__col-media .accords__list {
    max-width: none;
  }
  .accord--light .accord__label {
    color: #fffaf0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  }

  @media (max-width: 560px) {
    .pdp__accords { margin-top: 0; }
    .accords {
      padding: 1.05rem 0.9rem 0.85rem;
      border-radius: 17px;
    }
    .accords::before { border-radius: 12px; }
    .accords__head {
      margin-bottom: 0.8rem;
      padding-bottom: 0.75rem;
    }
    .accord {
      min-height: 2.8rem;
      grid-template-columns: 1.8rem minmax(0, 1fr);
      gap: 0.5rem;
      padding: 0.38rem 0.58rem;
    }
    .accord__rank {
      width: 1.8rem;
      height: 1.8rem;
    }
    .accord__label {
      padding-inline: 0.48rem;
      font-size: 0.8rem;
    }
    .accords__legend {
      font-size: 0.56rem;
      letter-spacing: 0.09em;
    }
  }

  /* Meta ficha olfativa */
  .perfume-meta {
    margin-top: var(--sp-4);
    display: grid;
    gap: var(--sp-3);
  }
  .perfume-meta__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .perfume-meta__chip {
    padding: 0.3rem 0.7rem;
    border-radius: var(--r-full);
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    letter-spacing: 0.04em;
  }
  .perfume-meta__ratings {
    display: grid;
    gap: 0.45rem;
  }
  .perfume-meta__rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .perfume-meta__dots {
    display: inline-flex;
    gap: 4px;
  }
  .perfume-meta__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--c-border);
    display: inline-block;
  }
  .perfume-meta__dot.is-on {
    background: var(--c-gold);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.25);
  }

  .product-detail__col-media {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .store-search-wrap { position: relative; }
  .store-suggest {
    position: absolute;
    left: 0; right: 0; top: calc(100% + 4px);
    z-index: 20;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    overflow: hidden;
  }
  .store-suggest[hidden] { display: none !important; }
  .store-suggest__item {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.7rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid rgba(212,175,55,0.08);
    color: inherit;
    font-size: var(--fs-sm);
  }
  .store-suggest__item:hover { background: var(--c-gold-soft); }
  .store-suggest__item span { color: var(--c-gold); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; }
  .store-suggest__item em { color: var(--c-gold-light); font-style: normal; font-size: var(--fs-xs); }

  .ship-progress {
    margin: var(--sp-3) 0;
    padding: var(--sp-3);
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
    background: var(--c-gold-soft);
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
  }
  .ship-progress--ok { color: var(--c-gold-light); }
  .ship-progress__bar {
    margin-top: 0.45rem;
    height: 4px;
    border-radius: var(--r-full);
    background: rgba(212,175,55,0.15);
    overflow: hidden;
  }
  .ship-progress__bar span {
    display: block;
    height: 100%;
    background: var(--g-gold);
    border-radius: inherit;
  }

  .local-notice {
    position: fixed;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    z-index: calc(var(--z-toast) - 1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.85rem 1rem;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border-strong);
    background: rgba(16,16,18,0.96);
    backdrop-filter: blur(12px);
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    box-shadow: var(--sh-lg);
  }
  .local-notice p { margin: 0; flex: 1; line-height: 1.5; min-width: 12rem; }
  .local-notice a { color: var(--c-gold-light); }
  .local-notice .btn { flex: none; min-height: 36px; }

  .footer__hours {
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
  .footer__hours i { color: var(--c-gold); }

  .store-empty {
    text-align: center;
    padding: var(--sp-9) var(--sp-4);
    color: var(--c-text-soft);
    display: grid;
    gap: var(--sp-3);
    justify-items: center;
  }

  /* display:grid pisa el [hidden] nativo del browser */
  .store-empty[hidden] { display: none !important; }

  .store-empty i {
    font-size: 2.2rem;
    color: var(--c-gold-dark);
    opacity: 0.5;
  }

  /* Detalle de producto (dentro del modal) */
  .product-detail {
    display: grid;
  }

  .product-detail__media {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 42%, rgba(210, 170, 50, 0.06) 0%, transparent 52%),
      radial-gradient(circle at 50% 42%, #FFFEFA 0%, #F7F3E9 55%, #EEE8DA 100%);
  }

  .product-detail__media img {
    position: absolute;
    z-index: 1;
    inset: clamp(1.25rem, 8%, 2.25rem);
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    padding: 0;
    margin: 0;
    background: transparent;
    filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.12));
  }

  .product-detail__body {
    padding: var(--sp-6);
    display: grid;
    gap: var(--sp-4);
    align-content: start;
  }

  .product-detail__brand {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-gold);
  }

  .product-detail__name {
    font-size: var(--fs-lg);
    line-height: 1.15;
  }

  .product-detail__desc {
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
    line-height: 1.8;
    max-height: 9.5em;
    overflow-y: auto;
  }

  .product-detail__prices {
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
  }

  .product-detail__ars {
    font-size: var(--fs-xl);
    font-family: var(--f-serif);
    font-weight: 600;
    color: var(--c-gold-light);
    font-variant-numeric: tabular-nums;
  }

  .product-detail__usd {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .product-detail__stock {
    font-size: var(--fs-sm);
    color: var(--c-success);
  }

  .product-detail__stock--low { color: var(--c-warning); }

  .product-detail__actions {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-4);
    align-items: center;
    margin-top: var(--sp-2);
  }

  /* Meta de card (ml · familia) */
  .product-card__meta {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    letter-spacing: 0.06em;
  }

  /* Badges de fragancia (género / familia / ml) */
  .frag-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .frag-badge {
    padding: 4px 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-soft);
  }

  .frag-badge--gold {
    border-color: var(--c-border-strong);
    color: var(--c-gold-light);
    background: var(--c-gold-soft);
  }

  /* Pirámide olfativa */
  .pyramid {
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
  }

  .pyramid__tier {
    display: grid;
    gap: var(--sp-2);
  }

  .pyramid__tier + .pyramid__tier {
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(212, 175, 55, 0.08);
  }

  .pyramid__label {
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-gold);
  }

  .pyramid__label em {
    font-family: var(--f-serif);
    font-size: 1.15em;
    margin-right: 6px;
  }

  .pyramid__notes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .note-chip {
    padding: 4px 12px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    transition: border-color var(--t-fast), color var(--t-fast);
  }

  .note-chip:hover {
    border-color: var(--c-border-strong);
    color: var(--c-gold-light);
  }

  /* Historia completa plegable */
  .product-detail__more summary {
    cursor: pointer;
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-gold);
    list-style: none;
    transition: color var(--t-fast);
  }

  .product-detail__more summary::-webkit-details-marker { display: none; }
  .product-detail__more summary::after { content: " +"; }
  .product-detail__more[open] summary::after { content: " −"; }
  .product-detail__more summary:hover { color: var(--c-gold-light); }
  .product-detail__more p { margin-top: var(--sp-3); max-height: none; }

  /* Similares */
  .similares {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-border);
  }

  .similares__title {
    font-family: var(--f-sans);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-gold);
    margin-bottom: var(--sp-3);
  }

  .similares__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
  }

  .similar-card {
    display: grid;
    gap: var(--sp-1);
    text-align: left;
    border-radius: var(--r-sm);
  }

  .similar-card__img {
    display: block;
    aspect-ratio: 1;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    transition: border-color var(--t-fast), transform var(--t-fast);
  }

  .similar-card:hover .similar-card__img {
    border-color: var(--c-border-strong);
    transform: translateY(-3px);
  }

  .similar-card__img img { width: 100%; height: 100%; object-fit: cover; }
  .similar-card__img .product-placeholder span { font-size: 1.3rem; }

  .similar-card__name {
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .similar-card__price {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-gold-light);
    font-variant-numeric: tabular-nums;
  }

  /* Finder */
  .finder {
    padding: var(--sp-7) var(--sp-6);
    display: grid;
    justify-items: center;
    gap: var(--sp-5);
    text-align: center;
  }

  .finder__title {
    font-size: var(--fs-xl);
    line-height: 1.12;
  }

  .finder__options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
    width: 100%;
  }

  .finder__options--grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .finder__option {
    display: grid;
    justify-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-3);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-weight: 400;
    transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
    touch-action: manipulation;
  }

  .finder__option:hover {
    border-color: var(--c-gold);
    background: var(--c-gold-soft);
    transform: translateY(-2px);
  }

  .finder__option i {
    font-size: 1.3rem;
    background: var(--g-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .finder__option small {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: 1.4;
  }

  /* Checkout */
  .checkout {
    padding: var(--sp-6);
    display: grid;
    gap: var(--sp-5);
  }

  .checkout__head { display: grid; gap: var(--sp-2); }

  .checkout h2 {
    font-size: var(--fs-lg);
  }

  .checkout__lead {
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
    line-height: 1.6;
  }

  .checkout__form {
    display: grid;
    gap: var(--sp-4);
  }

  /* Resumen con miniaturas */
  .co-summary {
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--c-surface);
  }

  .co-summary__items {
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-3);
    max-height: 232px;
    overflow-y: auto;
  }

  .co-item {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    transition: background var(--t-fast);
  }

  .co-item:hover { background: var(--c-surface-2); }

  .co-item__img {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
  }

  .co-item__img img { width: 100%; height: 100%; object-fit: cover; }
  .co-item__img .product-placeholder span { font-size: 1rem; }

  .co-item__qty {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 19px; height: 19px;
    padding-inline: 4px;
    display: grid;
    place-items: center;
    background: var(--g-gold);
    color: var(--c-text-invert);
    font-size: 0.66rem;
    font-weight: 700;
    border-radius: var(--r-full);
    border: 2px solid var(--c-surface);
    font-variant-numeric: tabular-nums;
  }

  .co-item__info { min-width: 0; display: grid; gap: 1px; }

  .co-item__name {
    font-size: var(--fs-sm);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .co-item__brand {
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-gold);
  }

  .co-item__price {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-gold-light);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .co-summary__totals {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-4);
    border-top: 1px solid var(--c-border);
    background: var(--c-bg-elevated);
  }

  .co-row {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
  }

  .co-row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .co-row--muted span:last-child { color: var(--c-text-muted); }

  .co-row--total {
    padding-top: var(--sp-3);
    margin-top: var(--sp-1);
    border-top: 1px solid var(--c-border);
    font-size: var(--fs-md);
    color: var(--c-text);
    font-weight: 600;
  }

  .co-row--total span:last-child {
    color: var(--c-gold-light);
    font-family: var(--f-serif);
    font-size: var(--fs-lg);
  }

  /* Franja de confianza */
  .co-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    justify-content: center;
    list-style: none;
    padding: 0;
  }

  .co-trust li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
  }

  .co-trust i { color: var(--c-gold); }

  .checkout__note {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: 1.6;
    text-align: center;
  }

  /* ---------- Éxito ---------- */
  .order-success {
    padding: var(--sp-7) var(--sp-6);
    text-align: center;
    display: grid;
    gap: var(--sp-5);
    justify-items: center;
  }

  .order-success__icon {
    position: relative;
    width: 84px; height: 84px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,0.16), rgba(212,175,55,0.04));
    border: 1px solid var(--c-border-strong);
    font-size: 2rem;
    color: var(--c-gold);
    animation: successPop 500ms var(--t-spring) both;
  }

  .order-success__ring {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid var(--c-gold);
    animation: successRing 1400ms ease-out 300ms infinite;
  }

  .order-success__head { display: grid; gap: var(--sp-2); }
  .order-success h2 { font-size: var(--fs-xl); }

  .order-success__sub {
    color: var(--c-text-soft);
    max-width: 24rem;
    margin-inline: auto;
    line-height: 1.6;
  }

  /* Botón de copiar orden */
  .order-success__id {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--r-md);
    background: var(--c-gold-soft);
    color: var(--c-gold-light);
    transition: border-color var(--t-fast), background var(--t-fast);
  }

  .order-success__id:hover {
    border-color: var(--c-gold);
    background: rgba(212, 175, 55, 0.12);
  }

  .order-success__id-label {
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .order-success__id-value {
    font-family: var(--f-serif);
    font-size: var(--fs-md);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
  }

  .order-success__id i { font-size: 0.85rem; opacity: 0.7; }
  .order-success__id.is-copied i::before { content: "\f00c"; } /* check */
  .order-success__id.is-copied { border-color: var(--c-success); color: var(--c-success); }

  /* Timeline "qué sigue" */
  .order-steps {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0;
    width: 100%;
    text-align: left;
    margin-block: var(--sp-1);
  }

  .order-step {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--sp-4);
    padding-bottom: var(--sp-4);
  }

  /* Línea que une los pasos */
  .order-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: 0;
    width: 1px;
    background: linear-gradient(var(--c-border-strong), var(--c-border));
  }

  .order-step:last-child { padding-bottom: 0; }

  .order-step__dot {
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    color: var(--c-gold);
    font-size: 0.9rem;
    z-index: 1;
  }

  .order-step strong {
    display: block;
    font-family: var(--f-sans);
    font-size: var(--fs-sm);
    font-weight: 500;
    margin-top: 3px;
  }

  .order-step small {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: 1.5;
    margin-top: 2px;
  }

  /* ----------------------------------------------------------
     CONTACTO
     ---------------------------------------------------------- */
  .contact { background: var(--c-bg-elevated); }

  .contact__grid {
    display: grid;
    gap: var(--sp-5);
    margin-top: var(--sp-6);
  }

  .contact-card {
    padding: var(--sp-6);
    display: grid;
    gap: var(--sp-3);
    justify-items: center;
    text-align: center;
    text-decoration: none;
  }

  .contact-card i {
    font-size: 1.8rem;
    background: var(--g-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .contact-card h3 {
    font-family: var(--f-sans);
    font-size: var(--fs-md);
    font-weight: 500;
  }

  .contact-card p {
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
    word-break: break-word;
  }

  /* ----------------------------------------------------------
     FOOTER
     ---------------------------------------------------------- */
  .footer {
    border-top: 1px solid var(--c-border);
    padding-block: var(--sp-8) var(--sp-6);
    background: var(--c-bg);
  }

  .footer__grid {
    display: grid;
    gap: var(--sp-6);
  }

  .footer__brand-logo {
    width: 220px;
    aspect-ratio: 720 / 500;
    margin-left: -38px;
    margin-bottom: var(--sp-4);
    filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.16));
  }

  .footer__brand p {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    max-width: 30rem;
    line-height: 1.7;
  }

  .footer__title {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--c-gold);
    margin-bottom: var(--sp-4);
  }

  .footer__links {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
  }

  .footer__links a {
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
    text-decoration: none;
    transition: color var(--t-fast), padding-left var(--t-fast);
  }

  .footer__links a:hover {
    color: var(--c-gold-light);
    padding-left: 6px;
  }

  .footer__social {
    display: flex;
    gap: var(--sp-3);
  }

  .footer__social a {
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    color: var(--c-text-soft);
    font-size: 1rem;
    text-decoration: none;
    transition: all var(--t-fast);
  }

  .footer__social a:hover {
    color: var(--c-text-invert);
    background: var(--g-gold);
    border-color: transparent;
    transform: translateY(-3px);
  }

  .footer__bottom {
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid rgba(212, 175, 55, 0.08);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    letter-spacing: 0.06em;
  }

  /* ----------------------------------------------------------
     HOME FEATURED
     ---------------------------------------------------------- */
  .home-featured { padding-block: var(--sp-7) var(--sp-8); }

  .home-featured__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
    margin-bottom: var(--sp-6);
  }

  .home-featured__lead {
    color: var(--c-text-soft);
    max-width: 36rem;
    margin-top: var(--sp-3);
    line-height: 1.7;
  }

  .home-featured__grid { margin-top: 0; }

  /* ----------------------------------------------------------
     CÓMO COMPRAR (home)
     ---------------------------------------------------------- */
  .how { padding-block: var(--sp-7); background: var(--c-bg-elevated); }

  .how .section-title { margin-bottom: var(--sp-6); }

  .how__grid { margin-top: var(--sp-2); }

  /* ----------------------------------------------------------
     PROMESA / AUTENTICIDAD
     ---------------------------------------------------------- */
  .about__promise { padding: var(--sp-6); }

  .promise-list {
    list-style: none;
    padding: 0;
    margin: var(--sp-5) 0 0;
    display: grid;
    gap: var(--sp-3);
  }

  .promise-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    line-height: 1.55;
  }

  .promise-list i {
    color: var(--c-gold);
    margin-top: 0.2em;
    flex: none;
  }

  .authenticity { padding-block: var(--sp-8); }

  .auth-block {
    display: grid;
    gap: var(--sp-6);
    padding: var(--sp-6);
  }

  .auth-block__copy p {
    color: var(--c-text-soft);
    line-height: 1.8;
    margin-top: var(--sp-4);
    max-width: 40rem;
  }

  .auth-block__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
  }

  /* ----------------------------------------------------------
     FAQ
     ---------------------------------------------------------- */
  .faq { padding-block: var(--sp-8); }

  .faq__list {
    margin-top: var(--sp-6);
    display: grid;
    gap: var(--sp-3);
  }

  .faq__item { overflow: hidden; }

  .faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    text-align: left;
    font-family: var(--f-sans);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text);
  }

  .faq__q i {
    color: var(--c-gold);
    transition: transform var(--t-base);
    flex: none;
  }

  .faq__item.is-open .faq__q i { transform: rotate(180deg); }

  .faq__a {
    padding: 0 var(--sp-5) var(--sp-5);
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    line-height: 1.75;
  }

  .faq__a p { margin: 0; }

  /* ----------------------------------------------------------
     LEGAL
     ---------------------------------------------------------- */
  /* ----------------------------------------------------------
     PDP — página de producto
     ---------------------------------------------------------- */
  .pdp {
    padding-block: calc(var(--nav-h) + var(--sp-6)) var(--sp-9);
  }

  .pdp__crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
    align-items: center;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-5);
  }

  .pdp__crumb a {
    color: var(--c-text-soft);
    text-decoration: none;
  }

  .pdp__crumb a:hover { color: var(--c-gold-light); }

  .pdp__grid {
    display: grid;
    gap: var(--sp-6);
  }

  /* PDP media: marfil/champagne premium (pisa glass-card bg). */
  .pdp__media,
  .pdp__media.glass-card {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 34%),
      radial-gradient(ellipse 54% 55% at 50% 48%, rgba(255, 255, 255, 0.42), transparent 72%),
      radial-gradient(ellipse 74% 18% at 50% 96%, rgba(168, 116, 14, 0.23), transparent 74%),
      repeating-radial-gradient(circle at 82% 24%, rgba(170, 130, 55, 0.025) 0 1px, transparent 1px 7px),
      radial-gradient(circle at 50% 41%, #fffdf7 0%, #f8f2e4 58%, #e9dec7 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Frame = área útil (inset = margen). Img llena el frame con contain → centrado real */
  .pdp__media-frame {
    position: absolute;
    z-index: 1;
    inset: clamp(1.25rem, 8%, 2.25rem);
    display: block;
    pointer-events: none;
  }

  .pdp__media-frame img,
  .pdp__media > img {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.12));
    pointer-events: auto;
  }

  .pdp__media-frame .product-ph,
  .pdp__media-frame .pdp__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .pdp__placeholder { width: 100%; height: 100%; min-height: 280px; }

  .pdp__brand {
    display: block;
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-gold);
    font-weight: 500;
  }

  .pdp__title {
    font-size: var(--fs-xl);
    margin-top: var(--sp-2);
  }

  .pdp__prices {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
  }

  .pdp__ars {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--c-gold-light);
    font-variant-numeric: tabular-nums;
  }

  .pdp__usd {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
  }

  .pdp__stock {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--c-success);
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }

  .pdp__stock--low { color: var(--c-warning); }
  .pdp__stock--oos { color: var(--c-error); }

  .pdp__desc {
    margin-top: var(--sp-5);
    color: var(--c-text-soft);
    line-height: 1.8;
  }

  .pdp__h {
    font-family: var(--f-sans);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text);
    margin-bottom: var(--sp-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .pdp__actions {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    align-items: center;
  }

  .pdp__actions #pdp-buy {
    grid-column: 1 / -1;
  }

  .pdp__secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
  }

  .pdp__secondary .btn { width: 100%; }

  .pdp__trust {
    list-style: none;
    padding: 0;
    margin: var(--sp-5) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-4);
  }

  .pdp__trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
  }

  .pdp__trust i { color: var(--c-gold); }

  .pdp__related { margin-top: var(--sp-9); }
  .pdp__related .section-title { margin-bottom: var(--sp-5); }

  /* Checkout — medios de pago */
  .pay-methods {
    border: 0;
    margin: var(--sp-5) 0 0;
    padding: 0;
  }

  .pay-methods__grid {
    display: grid;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
  }

  .pay-method { cursor: pointer; }

  .pay-method input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .pdp__media-frame::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -1.1rem -3% -2.6rem;
    pointer-events: none;
    border: 1px solid rgba(185, 135, 25, 0.34);
    border-radius: 50% 50% 46% 46% / 45% 45% 55% 55%;
    background: transparent;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.42),
      0 0 22px rgba(212, 175, 55, 0.08);
  }

  .pay-method__card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--sp-3);
    row-gap: 2px;
    align-items: center;
    padding: var(--sp-4);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  }

  .pay-method__card i {
    grid-row: 1 / span 2;
    color: var(--c-gold);
    font-size: 1.1rem;
    width: 1.4rem;
    text-align: center;
  }

  .pay-method__card strong {
    font-family: var(--f-sans);
    font-size: var(--fs-sm);
    font-weight: 500;
  }

  .pay-method__card small {
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
  }

  .pay-method input:checked + .pay-method__card {
    border-color: var(--c-border-strong);
    background: var(--c-gold-soft);
    box-shadow: var(--sh-gold);
  }

  .pay-method input:focus-visible + .pay-method__card {
    outline: 2px solid var(--c-gold);
    outline-offset: 2px;
  }

  .pay-preview {
    margin-top: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--r-md);
    border: 1px dashed var(--c-border);
    background: rgba(212, 175, 55, 0.04);
  }

  .pay-preview__label {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-2);
  }

  .pay-preview__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.45rem;
  }

  .pay-preview__list li {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
  }

  .pay-preview__list span { color: var(--c-text-muted); }
  .pay-preview__list strong { color: var(--c-text); font-weight: 500; text-align: right; }

  .pay-box {
    margin-top: var(--sp-5);
    padding: var(--sp-5);
    border-radius: var(--r-md);
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface);
    text-align: left;
  }

  .pay-box h3 {
    font-family: var(--f-sans);
    font-size: var(--fs-base);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .pay-box h3 i { color: var(--c-gold); }

  .pay-box__hint {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
    line-height: 1.6;
  }

  .pay-box__rows {
    list-style: none;
    padding: 0;
    margin: var(--sp-4) 0 0;
    display: grid;
    gap: var(--sp-2);
  }

  .pay-box__rows li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.08);
    font-size: var(--fs-sm);
  }

  .pay-box__rows li > span { color: var(--c-text-muted); }

  .pay-box__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--c-text);
    text-align: right;
    max-width: 65%;
  }

  .pay-box__copy strong {
    font-weight: 500;
    word-break: break-all;
  }

  .pay-box__copy i { color: var(--c-gold); opacity: 0.85; }
  .pay-box__copy.is-copied i { color: var(--c-success); }

  .pay-box--mp .btn { margin-top: var(--sp-4); }

  /* Checkout envío + cupón */
  .ship-zone { border: 0; margin: var(--sp-5) 0 0; padding: 0; }
  .ship-zone__grid { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
  .ship-zone__opt {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    cursor: pointer;
    background: var(--c-surface);
  }
  .ship-zone__opt:has(input:checked) {
    border-color: var(--c-border-strong);
    background: var(--c-gold-soft);
  }
  .ship-zone__opt input { margin-top: 0.25rem; accent-color: var(--c-gold); }
  .ship-zone__opt strong { display: block; font-family: var(--f-sans); font-size: var(--fs-sm); font-weight: 500; }
  .ship-zone__opt small { color: var(--c-text-muted); font-size: var(--fs-xs); }

  .coupon-field__row { display: flex; gap: var(--sp-2); }
  .coupon-field__row .field__input { flex: 1; }
  .co-row--disc { color: var(--c-success); }
  .co-ship-note {
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: 1.5;
  }

  /* Wishlist / compare */
  .product-card__media-wrap { position: relative; }
  .card-tools {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .card-tool {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: var(--r-full);
    border: 1px solid rgba(228, 188, 64, 0.82);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.055), transparent 46%),
      rgba(6,6,7,0.94);
    color: #e8ca68;
    font-size: 1.05rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
      inset 0 0 0 1px rgba(255,236,172,0.08),
      0 0 0 1px rgba(52,36,4,0.82),
      0 5px 13px rgba(0,0,0,0.38);
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  }
  .card-tool:hover, .card-tool.is-on {
    color: #fff0ad;
    border-color: #f4d675;
    transform: translateY(-1px);
    box-shadow:
      inset 0 0 0 1px rgba(255,236,172,0.12),
      0 0 0 1px rgba(212,175,55,0.74),
      0 7px 18px rgba(0,0,0,0.45),
      0 0 16px rgba(212,175,55,0.18);
  }
  .card-tool.is-on { background: linear-gradient(180deg, rgba(212,175,55,0.2), rgba(6,6,7,0.96)); }

  .wish-item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid rgba(212,175,55,0.08);
    align-items: start;
  }
  .wish-item__img {
    width: 72px; height: 72px; border-radius: var(--r-sm); overflow: hidden;
    background: var(--c-surface); display: block;
  }
  .wish-item__img img { width: 100%; height: 100%; object-fit: cover; }
  .wish-item__name {
    font-size: var(--fs-sm); font-weight: 500; color: var(--c-text);
    text-decoration: none; display: block;
  }
  .wish-item__brand, .wish-item__price {
    display: block; font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 2px;
  }
  .wish-item__price { color: var(--c-gold-light); font-weight: 500; }
  .wish-item__cta { margin-top: var(--sp-2); min-height: 36px; font-size: 0.7rem; padding-inline: 0.75rem; }

  .compare-bar {
    position: fixed;
    left: 50%;
    bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 120%);
    z-index: calc(var(--z-drawer) - 1);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: 0.65rem 0.75rem 0.65rem 1.1rem;
    border-radius: var(--r-full);
    border: 1px solid var(--c-border-strong);
    background: rgba(16,16,18,0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--sh-lg);
    transition: transform var(--t-spring);
    max-width: calc(100vw - 1.5rem);
  }
  .compare-bar.is-visible { transform: translate(-50%, 0); }
  .compare-bar__info { display: flex; gap: 0.4rem; align-items: baseline; font-size: var(--fs-sm); white-space: nowrap; }
  .compare-bar__info strong { color: var(--c-gold-light); }
  .compare-bar__actions { display: flex; gap: var(--sp-2); }
  .compare-bar .btn { min-height: 38px; padding-inline: 0.9rem; }

  .compare__title { margin-bottom: var(--sp-5); }
  .compare__table-wrap { overflow-x: auto; }
  .compare__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
  }
  .compare__table th, .compare__table td {
    padding: var(--sp-3);
    border-bottom: 1px solid rgba(212,175,55,0.1);
    vertical-align: top;
    font-size: var(--fs-sm);
  }
  .compare__table thead th { min-width: 140px; position: relative; }
  .compare__table tbody th {
    text-align: left;
    color: var(--c-text-muted);
    font-family: var(--f-sans);
    font-weight: 500;
    width: 7rem;
  }
  .compare__prod { text-decoration: none; color: inherit; display: grid; gap: var(--sp-2); justify-items: center; }
  .compare__img { width: 88px; height: 88px; border-radius: var(--r-sm); overflow: hidden; background: var(--c-surface); }
  .compare__img img { width: 100%; height: 100%; object-fit: cover; }
  .compare__name { font-size: var(--fs-xs); text-align: center; line-height: 1.35; }
  .compare__rm {
    position: absolute; top: 4px; right: 4px;
    width: 28px; height: 28px; border-radius: var(--r-full);
    color: var(--c-text-muted); font-size: 1.1rem;
  }
  .compare__notes { color: var(--c-text-soft); font-size: var(--fs-xs); line-height: 1.5; }
  .compare-empty { padding: var(--sp-6); text-align: center; }

  .pdp__media { position: relative; }
  .pdp__tools { position: absolute; top: 12px; right: 12px; z-index: 2; }
  .pdp__tools .card-tools { position: static; }
  .pdp__faq { margin-top: var(--sp-6); }
  .pdp__faq .faq__list { margin-top: var(--sp-3); }
  .store-faq { padding-block: var(--sp-8) var(--sp-9); }

  /* Blog */
  .blog-index, .blog-post {
    padding-block: calc(var(--nav-h) + var(--sp-8)) var(--sp-9);
  }
  .blog-index__lead {
    color: var(--c-text-soft);
    max-width: 36rem;
    margin: var(--sp-3) 0 var(--sp-6);
    line-height: 1.7;
  }
  .blog-grid {
    display: grid;
    gap: var(--sp-4);
  }
  .blog-card {
    padding: var(--sp-5);
    text-decoration: none;
    display: grid;
    gap: var(--sp-3);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
  }
  .blog-card:hover { transform: translateY(-3px); box-shadow: var(--sh-gold-hover); }
  .blog-card__tag {
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-gold);
  }
  .blog-card h2 {
    font-size: var(--fs-lg);
  }
  .blog-card p { color: var(--c-text-soft); font-size: var(--fs-sm); line-height: 1.7; }
  .blog-card__more {
    color: var(--c-gold-light);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .blog-index__cta { margin-top: var(--sp-7); }
  .blog-post__meta {
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    margin: var(--sp-2) 0 var(--sp-6);
    letter-spacing: 0.06em;
  }
  .blog-post__body a { color: var(--c-gold-light); }

  /* ---------- Páginas institucionales ---------- */
  .site-page {
    padding-block: calc(var(--nav-h) + var(--sp-7)) var(--sp-9);
    min-height: 70dvh;
  }

  .site-page__wrap {
    max-width: 46rem;
  }

  .site-page__wrap--narrow {
    max-width: 40rem;
  }

  .site-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-6);
  }

  .site-crumb a {
    color: var(--c-text-soft);
    text-decoration: none;
  }

  .site-crumb a:hover { color: var(--c-gold-light); }

  .site-page__hero {
    margin-bottom: clamp(2rem, 4vw, 3rem);
  }

  .site-page__hero--center {
    text-align: center;
  }

  .site-page__title {
    margin: 0.35rem 0 0;
    font-family: var(--f-serif);
    font-weight: 500;
    font-size: clamp(2.2rem, 5vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .site-page__title em {
    font-style: italic;
    color: var(--c-gold-light);
    font-weight: 500;
  }

  .site-page__lead {
    margin: 1.25rem 0 0;
    max-width: 36rem;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--c-text-soft);
    font-weight: 300;
  }

  .site-page__hero--center .site-page__lead {
    margin-inline: auto;
  }

  .site-page__meta {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
  }

  .site-prose {
    color: var(--c-text-soft);
    line-height: 1.85;
    display: grid;
    gap: 1.15rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
  }

  .site-prose--tight { gap: 0.85rem; }

  .site-prose h2 {
    margin: 0.5rem 0 0;
    font-family: var(--f-serif);
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--c-text);
  }

  .site-prose p { margin: 0; }

  .site-prose ul,
  .site-prose ol {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.45rem;
  }

  .site-prose a {
    color: var(--c-gold-light);
    text-underline-offset: 3px;
  }

  .site-pillars {
    list-style: none;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    padding: 0;
    display: grid;
    gap: 1.25rem;
  }

  @media (min-width: 700px) {
    .site-pillars { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
  }

  .site-pillars li {
    display: grid;
    gap: 0.35rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(212, 175, 55, 0.14);
  }

  .site-pillars strong {
    font-family: var(--f-serif);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--c-text);
  }

  .site-pillars span {
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--c-text-muted);
  }

  .site-contact-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
  }

  @media (min-width: 700px) {
    .site-contact-grid { grid-template-columns: repeat(3, 1fr); }
    .site-contact-grid--2 { grid-template-columns: 1fr 1fr; }
  }

  .site-contact {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: 1.35rem 1.25rem;
    border: 1px solid rgba(212, 175, 55, 0.14);
    border-radius: var(--r-md);
    background: linear-gradient(165deg, rgba(212, 175, 55, 0.05), transparent 55%);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--t-fast), transform var(--t-fast);
  }

  .site-contact:hover {
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
  }

  .site-contact__k {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-gold);
  }

  .site-contact h2 {
    margin: 0;
    font-family: var(--f-serif);
    font-size: 1.35rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .site-contact h2 i { color: var(--c-gold); font-size: 1rem; }

  .site-contact p {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    line-height: 1.55;
  }

  .site-contact__go {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-gold-light);
  }

  .site-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
  }

  .site-cta-row--center { justify-content: center; }

  .site-banner {
    margin: 0 0 1.75rem;
    padding: 1rem 1.15rem;
    border-left: 2px solid var(--c-gold);
    background: rgba(212, 175, 55, 0.06);
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    line-height: 1.6;
  }

  .site-table-wrap {
    overflow-x: auto;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid rgba(212, 175, 55, 0.14);
    border-bottom: 1px solid rgba(212, 175, 55, 0.14);
  }

  .site-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
  }

  .site-table th,
  .site-table td {
    padding: 1rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .site-table thead th {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-gold);
    font-weight: 500;
  }

  .site-table tbody th {
    font-family: var(--f-serif);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--c-text);
  }

  .site-table td { color: var(--c-text-soft); }

  .site-faq .faq__list { margin-top: 0; }

  .legal-page {
    padding-block: calc(var(--nav-h) + var(--sp-8)) var(--sp-9);
  }

  .legal-page__updated {
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    margin: var(--sp-3) 0 var(--sp-6);
    letter-spacing: 0.06em;
  }

  .legal-page__body {
    color: var(--c-text-soft);
    line-height: 1.8;
    display: grid;
    gap: var(--sp-4);
  }

  .legal-page__body h2 {
    font-family: var(--f-serif);
    font-size: var(--fs-lg);
    color: var(--c-text);
    margin-top: var(--sp-4);
  }

  .legal-page__body ul {
    padding-left: 1.2rem;
    display: grid;
    gap: var(--sp-2);
  }

  .legal-page__body a {
    color: var(--c-gold-light);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .footer__bottom-links {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .footer__bottom-links a {
    color: inherit;
    text-decoration: none;
  }

  .footer__bottom-links a:hover { color: var(--c-gold-light); }

  /* ==========================================================
     BREAKPOINT: TABLET ≥768px
     ========================================================== */
  @media (min-width: 768px) {
    .trust__grid { grid-template-columns: repeat(4, 1fr); }
    .auth-block {
      grid-template-columns: 1.4fr 0.8fr;
      align-items: center;
      padding: var(--sp-7) var(--sp-8);
    }
    .auth-block__cta { flex-direction: column; align-items: stretch; }
    .pdp__grid { grid-template-columns: 1fr 1.05fr; align-items: start; gap: var(--sp-7); }
    .pay-methods__grid { grid-template-columns: repeat(3, 1fr); }
    .blog-grid { grid-template-columns: repeat(3, 1fr); }
    .ship-zone__grid { grid-template-columns: repeat(2, 1fr); }
    .steps__grid { grid-template-columns: repeat(3, 1fr); }
    .wholesale__grid { grid-template-columns: repeat(3, 1fr); }
    .wholesale__grid--two { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
    .familias__grid { grid-template-columns: repeat(2, 1fr); }
    .notes-guide__grid { grid-template-columns: repeat(3, 1fr); }
    .about__grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
    .values { grid-template-columns: repeat(2, 1fr); }
    .vm-grid { grid-template-columns: 1fr 1fr; }
    .categories__grid { grid-template-columns: repeat(2, 1fr); }
    .store-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
    /* En desktop la barra es compacta (2 filas) → sticky útil sin molestar. */
    .store-controls { position: sticky; top: var(--nav-h); }
    .store-controls__inner {
      grid-template-columns: 1fr;
      align-items: center;
      gap: var(--sp-3);
    }
    .store-tabs,
    .store-tabs--cat,
    .store-tabs--secondary,
    #store-secondary-tabs { grid-column: 1 / -1; }
    .store-filters { grid-column: 1 / -1; grid-template-columns: 1fr 220px; }
    .store-filters--frag { grid-template-columns: 1.4fr repeat(3, minmax(140px, 1fr)); }
    .store-filters--frag .store-search { grid-column: auto; }
    .store-filters--belleza { grid-template-columns: 1.6fr repeat(2, minmax(150px, 1fr)); }
    .store-filters--belleza .store-search { grid-column: auto; }
    .contact__grid { grid-template-columns: repeat(3, 1fr); }
    .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
    .product-detail { grid-template-columns: 1fr 1fr; }
    .product-detail__media { aspect-ratio: auto; min-height: 100%; }
    .checkout { padding: var(--sp-7); }
  }

  /* ==========================================================
     BREAKPOINT: DESKTOP ≥1200px
     ========================================================== */
  @media (min-width: 1200px) {
    .values { grid-template-columns: repeat(5, 1fr); }
    .value-card { padding: var(--sp-5) var(--sp-4); }
    .categories__grid { grid-template-columns: repeat(3, 1fr); }
    .familias__grid { grid-template-columns: repeat(3, 1fr); }
    .store-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
    .home-featured__grid.store-grid { grid-template-columns: repeat(4, 1fr); }
  }

  /* ============================================================
     MAYORISTAS — cotizador B2B
     ============================================================ */
  .ws {
    padding-block: calc(var(--nav-h) + var(--sp-5)) var(--sp-8);
    min-height: 70dvh;
  }

  .ws-crumb {
    margin-bottom: 0.75rem !important;
  }

  .ws-hero {
    margin: 0;
    padding: 0;
  }

  .ws-hero__title {
    margin: 0.2rem 0 0;
    font-family: var(--f-serif);
    font-weight: 500;
    font-size: clamp(1.85rem, 4vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .ws-hero__lead {
    margin: 0.55rem 0 0;
    font-family: var(--f-serif);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--c-gold-light);
    max-width: 28ch;
  }

  .ws-hero__sub {
    margin: 0.45rem 0 0;
    max-width: 34rem;
    color: var(--c-text-soft);
    line-height: 1.5;
    font-weight: 300;
    font-size: var(--fs-sm);
  }

  .ws-hero__tiers {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2);
    max-width: 26rem;
  }

  .ws-hero__tiers li {
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    padding: 0.75rem 0.65rem;
    text-align: center;
  }

  .ws-hero__tiers strong {
    display: block;
    font-family: var(--f-serif);
    font-size: 1.35rem;
    color: var(--c-gold);
    font-weight: 600;
  }

  .ws-hero__tiers span {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  /*
    Tres hijos directos en grid:
      tools | quote
      grid  | quote
    quote con align-self:start + height:max-content para NO inflar la fila 1
    (eso era el hueco negro bajo el buscador).
  */
  .ws-layout {
    --ws-block-gap: 1.35rem; /* misma distancia chips→buscador y buscador→productos */
    display: grid;
    margin: var(--ws-block-gap) 0 0;
    padding: 0;
    gap: var(--ws-block-gap) 1.1rem;
    align-items: start;
  }

  @media (min-width: 1024px) {
    .ws-layout {
      grid-template-columns: minmax(0, 1fr) minmax(280px, 32%);
      grid-template-rows: auto auto;
      grid-template-areas:
        "tools quote"
        "grid  quote";
      column-gap: 1.1rem;
      row-gap: var(--ws-block-gap);
    }

    .ws-toolbar { grid-area: tools; }
    .ws-aside   { grid-area: quote; }
    .ws-catalog { grid-area: grid; }
  }

  .ws-main {
    display: contents; /* los hijos participan del grid del layout */
  }

  .ws-toolbar {
    display: grid;
    gap: var(--sp-3);
    margin: 0;
    padding: var(--sp-4);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    align-self: start;
  }

  .ws-catalog {
    display: block;
    margin: 0;
    padding: 0;
    align-self: start;
    min-width: 0;
  }

  .ws-search {
    position: relative;
    display: block;
  }

  .ws-search i {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-muted);
    font-size: 0.85rem;
    pointer-events: none;
  }

  .ws-search input,
  .ws-toolbar select {
    width: 100%;
    min-height: 44px;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    background: var(--c-bg-elevated);
    color: var(--c-text);
    font: inherit;
    padding: 0.55rem 0.85rem;
  }

  .ws-search input { padding-left: 2.35rem; }

  .ws-search input:focus,
  .ws-toolbar select:focus {
    outline: 2px solid rgba(212, 175, 55, 0.45);
    outline-offset: 1px;
    border-color: var(--c-border-strong);
  }

  .ws-toolbar__filters {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: 1fr;
  }

  @media (min-width: 640px) {
    .ws-toolbar__filters {
      grid-template-columns: 1fr 1fr auto;
      align-items: center;
    }
  }

  .ws-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
    min-height: 44px;
    user-select: none;
  }

  .ws-check input { accent-color: var(--c-gold); width: 1rem; height: 1rem; }

  .ws-toolbar__count {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    letter-spacing: 0.04em;
  }

  .ws-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
  }

  @media (min-width: 560px) {
    .ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (min-width: 1200px) {
    .ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (min-width: 1400px) {
    .ws-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .ws-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-5);
  }
  .ws-more-wrap[hidden],
  #ws-more[hidden] {
    display: none !important;
  }

  .ws-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
    color: var(--c-text-soft);
    border: 1px dashed var(--c-border);
    border-radius: var(--r-lg);
  }

  .ws-state--error { color: var(--c-error); }
  .ws-state .btn { margin-top: var(--sp-4); }

  .ws-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding: 3px;
    border: 1px solid rgba(212, 175, 55, 0.7);
    border-radius: 29px;
    background:
      linear-gradient(155deg, rgba(255, 255, 255, 0.07), transparent 22%),
      repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 7px),
      #050506;
    overflow: hidden;
    box-shadow:
      inset 0 0 0 1px rgba(7, 7, 8, 0.96),
      inset 0 0 0 2px rgba(244, 214, 122, 0.15),
      0 14px 36px rgba(0, 0, 0, 0.4);
    transition:
      transform var(--t-base),
      border-color var(--t-base),
      box-shadow var(--t-base);
    transform: translateZ(0);
  }

  .ws-card::after {
    content: "";
    position: absolute;
    z-index: 8;
    inset: 6px;
    pointer-events: none;
    border: 1px solid rgba(246, 218, 137, 0.32);
    border-radius: 23px;
  }

  @media (hover: hover) {
    .ws-card:hover {
      transform: translate3d(0, -4px, 0);
      border-color: rgba(246, 216, 125, 0.92);
      box-shadow:
        inset 0 0 0 1px rgba(7, 7, 8, 0.96),
        inset 0 0 0 2px rgba(244, 214, 122, 0.22),
        0 22px 52px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(212, 175, 55, 0.1);
    }
  }

  .ws-card.is-in-quote {
    border-color: rgba(246, 216, 125, 0.94);
    box-shadow:
      inset 0 0 0 1px rgba(7, 7, 8, 0.96),
      inset 0 0 0 2px rgba(244, 214, 122, 0.26),
      0 18px 46px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(212, 175, 55, 0.19);
  }

  .ws-card.is-in-quote::after {
    border-color: rgba(249, 224, 150, 0.52);
    box-shadow: inset 0 0 14px rgba(212, 175, 55, 0.06);
  }

  .ws-card.is-oos { opacity: 0.72; }

  .ws-card__media {
    position: relative;
    z-index: 1;
    aspect-ratio: 1;
    display: block;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    box-shadow:
      inset 0 -1px 0 rgba(212, 175, 55, 0.18),
      0 8px 22px rgba(0, 0, 0, 0.16);
  }

  .ws-card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
    padding: 4px 10px;
    background: var(--g-gold);
    color: var(--c-text-invert);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--r-full);
    line-height: 1.2;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.13),
      0 5px 14px rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(235, 203, 110, 0.5);
    pointer-events: none;
  }

  .ws-card__badge--hot {
    background: rgba(5,5,5,0.88);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
  }

  .ws-card__badge--oos {
    background: rgba(248, 113, 113, 0.18);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.4);
    box-shadow: none;
  }

  .ws-card__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.55rem;
    padding: 0.95rem 1rem 1.05rem;
    min-height: 0;
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0 0 24px 24px;
    background:
      radial-gradient(ellipse 92% 26% at 50% 0%, rgba(255, 255, 255, 0.065), transparent 68%),
      repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 7px),
      linear-gradient(145deg, #151518 0%, #08080a 54%, #101012 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 10px 22px rgba(0, 0, 0, 0.24);
  }

  .ws-card__body::before {
    content: "";
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 1.6rem;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(45, 31, 8, 0) 0%,
      rgba(45, 31, 8, 0.11) 40%,
      rgba(18, 15, 10, 0.5) 78%,
      #141416 100%);
  }

  .ws-card__body > * {
    position: relative;
    z-index: 1;
  }

  .ws-card__body::after {
    content: "";
    position: absolute;
    top: -1px;
    right: 9%;
    left: 9%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
      transparent,
      rgba(242, 207, 105, 0.34) 25%,
      rgba(242, 207, 105, 0.66) 50%,
      rgba(242, 207, 105, 0.34) 75%,
      transparent);
    box-shadow: 0 -3px 9px rgba(212, 175, 55, 0.08);
  }

  .ws-card__brand {
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .ws-card__name {
    margin: 0;
    font-family: var(--f-serif);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--c-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
  }

  .ws-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    padding: 0.48rem 0.58rem;
    border: 1px solid rgba(212, 175, 55, 0.14);
    border-radius: 9px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
      rgba(0, 0, 0, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  }

  .ws-card__retail {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
    padding: 0.12rem 0.18rem 0.48rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
  }

  .ws-card__retail strong {
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
  }

  .ws-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.42rem;
    padding: 0.12rem 0;
  }

  .ws-tiers--empty {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: 1.45;
    padding: 0.45rem 0.5rem;
    border-radius: var(--r-sm);
    border: 1px solid rgba(212, 175, 55, 0.16);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
      rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  }

  .ws-tier {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.24);
    border-radius: 9px;
    padding: 0.4rem 0.35rem;
    text-align: center;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 30%, transparent 44%),
      repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 6px),
      linear-gradient(145deg, #17171a 0%, #08080a 64%, #111114 100%);
    min-width: 0;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -1px 0 rgba(0, 0, 0, 0.7),
      0 5px 10px rgba(0, 0, 0, 0.22);
    transition:
      transform 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease;
  }

  .ws-tier::before {
    content: "";
    position: absolute;
    top: 2px;
    right: 4px;
    left: 4px;
    height: 30%;
    pointer-events: none;
    border-radius: 7px 7px 50% 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent);
  }

  @media (hover: hover) {
    .ws-tier:hover {
      transform: translateY(-1px);
      border-color: rgba(230, 195, 93, 0.42);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.7),
        0 8px 14px rgba(0, 0, 0, 0.3);
    }
  }

  .ws-tier.is-active {
    border-color: rgba(236, 201, 99, 0.6);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.025) 34%, transparent 48%),
      repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 6px),
      linear-gradient(145deg, rgba(212, 175, 55, 0.2), rgba(84, 60, 5, 0.11) 60%, rgba(15, 15, 17, 0.92));
    box-shadow:
      inset 0 0 0 1px rgba(244, 215, 127, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 7px 15px rgba(0, 0, 0, 0.28),
      0 0 15px rgba(212, 175, 55, 0.08);
  }

  .ws-tier.is-missing { opacity: 0.55; }

  .ws-tier__label {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: var(--c-text-muted);
  }

  .ws-tier.is-active .ws-tier__label { color: var(--c-gold-light); }

  .ws-tier__price {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    word-break: break-word;
  }

  .ws-tier.is-active .ws-tier__price { color: var(--c-gold-light); }

  .ws-tier__save {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.62rem;
    color: var(--c-success);
    line-height: 1.2;
  }

  .ws-card__line-save {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-gold-light);
  }

  .ws-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    margin-top: auto;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(212, 175, 55, 0.12);
  }

  .ws-card__oos-label {
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .ws-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(212, 175, 55, 0.42);
    border-radius: var(--r-full);
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 42%),
      repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 6px),
      linear-gradient(145deg, #17171a, #070708 66%, #111114);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -1px 0 rgba(0, 0, 0, 0.7),
      0 6px 14px rgba(0, 0, 0, 0.26);
  }

  .ws-qty__btn {
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    background: transparent;
    color: var(--c-text);
    font-size: 1.05rem;
    cursor: pointer;
  }

  .ws-qty__btn:hover:not(:disabled) { color: var(--c-gold-light); background: var(--c-gold-soft); }
  .ws-qty__btn:disabled { opacity: 0.35; cursor: not-allowed; }

  .ws-qty__input {
    width: 2.6rem;
    height: 2.25rem;
    border: 0;
    border-inline: 1px solid var(--c-border);
    background: transparent;
    color: var(--c-text);
    text-align: center;
    font: inherit;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
  }

  .ws-qty__input::-webkit-outer-spin-button,
  .ws-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  .ws-qty__val {
    min-width: 1.75rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-sm);
  }

  .ws-qty--sm .ws-qty__btn { width: 1.85rem; height: 1.85rem; }

  @media (max-width: 560px) {
    .ws-card .ws-qty__btn {
      width: 2.75rem;
      height: 2.75rem;
    }

    .ws-card .ws-qty__input {
      width: 3rem;
      height: 2.75rem;
    }
  }

  .ws-aside { display: none; }

  @media (min-width: 1024px) {
    .ws-aside {
      display: block;
      grid-area: quote;
      position: sticky;
      top: calc(var(--nav-h) + 0.75rem);
      align-self: start;
      height: max-content; /* no estirar filas del grid */
      max-height: calc(100dvh - var(--nav-h) - 1.5rem);
      overflow: auto;
      min-width: 0;
      min-height: 0;
    }
  }

  @media (max-width: 1023px) {
    .ws-main {
      display: flex;
      flex-direction: column;
      gap: var(--ws-block-gap, 1.35rem);
    }
  }

  .ws-summary {
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    padding: 0.85rem 0.95rem 1rem;
    display: grid;
    gap: 0.7rem;
  }

  .ws-summary__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .ws-summary__head h2 {
    margin: 0;
    font-family: var(--f-serif);
    font-size: 1.45rem;
    font-weight: 500;
  }

  .ws-summary__clear {
    border: 0;
    background: none;
    color: var(--c-text-muted);
    font: inherit;
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 0.25rem;
  }

  .ws-summary__clear:hover { color: var(--c-gold-light); }

  .ws-summary__empty {
    margin: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    line-height: 1.55;
  }

  .ws-progress {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem 0.8rem;
    border-radius: var(--r-md);
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--c-border);
  }

  .ws-progress__track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
  }

  .ws-progress__step {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    min-width: 2.5rem;
  }

  .ws-progress__dot {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    border: 2px solid var(--c-border-strong);
    background: var(--c-bg);
    display: grid;
    place-items: center;
    font-size: 0.55rem;
    color: var(--c-bg);
  }

  .ws-progress__step.is-current .ws-progress__dot {
    background: var(--c-gold);
    border-color: var(--c-gold);
    box-shadow: 0 0 0 4px rgba(212,175,55,0.18);
  }

  .ws-progress__step.is-done .ws-progress__dot {
    background: var(--c-gold);
    border-color: var(--c-gold);
    color: #1a1405;
    font-weight: 700;
  }

  .ws-progress__lbl {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
  }

  .ws-progress__step.is-current .ws-progress__lbl,
  .ws-progress__step.is-done .ws-progress__lbl {
    color: var(--c-gold-light);
  }

  .ws-progress__line {
    flex: 1;
    height: 2px;
    background: var(--c-border);
    margin-bottom: 1rem;
  }

  .ws-progress__step.is-done + .ws-progress__line {
    background: linear-gradient(90deg, var(--c-gold), rgba(212,175,55,0.35));
  }

  .ws-progress__units {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--c-text);
  }

  .ws-progress__hint {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    line-height: 1.45;
  }

  .ws-summary__lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
    max-height: min(42vh, 360px);
    overflow: auto;
  }

  .ws-summary__line {
    border-top: 1px solid var(--c-border);
    padding-top: 0.65rem;
  }

  .ws-summary__line-top {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .ws-summary__line-top strong {
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.35;
  }

  .ws-summary__rm {
    border: 0;
    background: transparent;
    color: var(--c-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.1rem 0.35rem;
  }

  .ws-summary__rm:hover { color: var(--c-error); }

  .ws-summary__line-mid {
    margin-top: 0.45rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    font-variant-numeric: tabular-nums;
  }

  .ws-summary__line-mid > strong { color: var(--c-text); }

  .ws-summary__totals {
    display: grid;
    gap: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--c-border);
  }

  .ws-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
  }

  .ws-summary__row strong {
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
  }

  .ws-summary__row--total {
    font-size: 1.05rem;
    color: var(--c-text);
  }

  .ws-summary__row--total strong {
    color: var(--c-gold-light);
    font-size: 1.15rem;
  }

  .ws-summary__row--save strong { color: var(--c-success); }

  .ws-summary__note {
    margin: 0.25rem 0 0;
    font-size: var(--fs-xs);
    color: var(--c-warning);
    line-height: 1.45;
  }

  .ws-summary__cta {
    width: 100%;
    justify-content: center;
  }

  .ws-summary__cta:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .ws-summary__contact {
    display: grid;
    gap: 0.35rem;
    margin-bottom: var(--sp-3);
  }

  .ws-summary__fine {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: 1.45;
    text-align: center;
  }

  /* Mobile sticky bar */
  .ws-bar {
    position: fixed;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-drawer);
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 0.7rem 0.7rem 0.7rem 1rem;
    border-radius: var(--r-lg);
    border: 1px solid var(--c-border-strong);
    background: rgba(16, 16, 18, 0.94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: var(--sh-lg);
    transform: translateY(120%);
    transition: transform var(--t-spring);
  }

  .ws-bar.is-visible {
    display: flex;
    transform: translateY(0);
  }

  .ws-bar__info {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .ws-bar__info strong {
    font-size: var(--fs-sm);
    font-weight: 500;
  }

  .ws-bar__info span {
    font-size: var(--fs-xs);
    color: var(--c-gold-light);
    font-variant-numeric: tabular-nums;
  }

  @media (min-width: 1024px) {
    .ws-bar { display: none !important; }
  }

  body:has(.ws-bar.is-visible) {
    padding-bottom: 5.5rem;
  }

  body:has(.ws-bar.is-visible) .wa-float {
    bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
  }

  #ws-drawer .drawer__body {
    display: block;
  }

  #ws-drawer .ws-summary {
    border: 0;
    padding: 0;
    background: transparent;
  }

  .ws-drawer-close {
    border: 0;
    background: transparent;
    color: var(--c-text-soft);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--r-full);
    cursor: pointer;
    font-size: 1.1rem;
  }

  .ws-drawer-close:hover {
    color: var(--c-text);
    background: var(--c-gold-soft);
  }
}