*, *::before, *::after { box-sizing: border-box; }
    body {
      background: #F5F0EB;
      color: #1C1C1A;
      font-family: 'Inter', sans-serif;
      overflow-x: hidden;
    }

    /* ── Navbar: estilos en shop-shell.css (design system) ── */

    /* ── Shop hero ── */
    #shop-hero {
      padding-top: 100px;
      background: #F5F0EB;
    }

    /* ── Filters sidebar ── */
    #filters-sidebar {
      position: sticky;
      top: 80px;
      height: calc(100vh - 80px);
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: thin;
      scrollbar-color: #D6D0C8 transparent;
      flex: 0 0 17rem;
      width: 17rem;
      max-width: min(17rem, 100%);
      padding: 0 0.75rem 1rem 1rem;
      box-sizing: border-box;
    }
    #filters-sidebar::-webkit-scrollbar { width: 4px; }
    #filters-sidebar::-webkit-scrollbar-thumb { background: #D6D0C8; border-radius: 2px; }

    /* ── Filter accordion ── */
    .filter-group summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;
      border-bottom: 1px solid #D6D0C8;
      user-select: none;
    }
    .filter-group summary::-webkit-details-marker { display: none; }
    .filter-group[open] summary .filter-chevron { transform: rotate(180deg); }
    .filter-chevron { transition: transform .3s ease; }
    .filter-group .filter-body {
      padding: 12px 0 10px;
      min-width: 0;
    }

    /* Rejilla de muestras: centradas en celda para que el hover no desborde a los lados */
    .filter-swatch-grid {
      display: grid;
      justify-items: center;
      align-items: center;
      gap: 0.5rem 0.45rem;
      padding: 0.35rem 0.25rem 0.5rem;
      width: 100%;
      box-sizing: border-box;
    }
    .filter-swatch-grid--base {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .filter-swatch-grid--cordon {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    /* ── Color swatch filter ── */
    .color-swatch {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform .2s, box-shadow .2s;
      flex-shrink: 0;
      box-sizing: border-box;
    }
    .color-swatch:hover, .color-swatch.active {
      transform: scale(1.12);
      box-shadow: 0 0 0 2px rgba(28,28,26,0.2);
      z-index: 1;
      position: relative;
    }

    /* ── Product card ── */
    .product-card {
      position: relative;
      background: white;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      transition: box-shadow .4s ease, transform .4s ease;
    }
    .product-card:hover { box-shadow: 0 20px 60px rgba(28,28,26,0.12); transform: translateY(-4px); }

    .card-images {
      position: relative;
      overflow: hidden;
      background: #EDE5DB;
    }
    .card-img {
      width: 100%; aspect-ratio: 4/5;
      object-fit: cover;
      object-position: center;
      transition: opacity .55s ease, transform .7s ease;
      display: block;
    }
    .card-img-back {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 0;
      transform: scale(1.04);
      transition: opacity .55s ease, transform .7s ease;
    }
    .product-card:hover .card-img      { opacity: 0; }
    .product-card:hover .card-img-back { opacity: 1; transform: scale(1); }

    .card-quick-actions {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 16px;
      display: flex; gap: 8px;
      transform: translateY(100%);
      transition: transform .35s cubic-bezier(.4,0,.2,1);
      background: linear-gradient(to top, rgba(28,28,26,.5) 0%, transparent 100%);
    }
    .product-card:hover .card-quick-actions { transform: translateY(0); }

    /* ── Floating bar (recordatorio catálogo / CTA configurador) ── */
    #personalizer-bar {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
      background: #1C1C1A;
      border-radius: 100px;
      padding: 14px 28px;
      display: flex; align-items: center; gap: 6px;
      z-index: 200;
      box-shadow: 0 20px 60px rgba(28,28,26,0.3);
      transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .4s;
      white-space: nowrap;
    }
    #personalizer-bar.hidden { transform: translateX(-50%) translateY(120%); opacity: 0; pointer-events: none; }

    /* ── Reveal ── */
    .reveal { opacity:0; transform:translateY(24px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }
    .reveal-delay-1 { transition-delay:.08s; }
    .reveal-delay-2 { transition-delay:.16s; }
    .reveal-delay-3 { transition-delay:.24s; }

    /* ── Active filter tag ── */
    .active-filter-tag {
      display: inline-flex; align-items: center; gap: 6px;
      background: #1C1C1A; color: #F5F0EB;
      text-transform: uppercase; letter-spacing: .08em;
      font-size: 10px; font-weight: 600;
      padding: 5px 10px;
      border-radius: 100px;
    }
    .active-filter-tag button,
    .active-filter-tag .wishlist-btn-remove { opacity:.6; cursor: pointer; }

    /* ── Sort dropdown ── */
    .sort-select {
      appearance: none;
      background: transparent;
      border: 1px solid #D6D0C8;
      border-radius: 100px;
      padding: 8px 32px 8px 14px;
      font-family: 'Inter', sans-serif;
      font-size: 12px; color: #1C1C1A;
      cursor: pointer;
      background-image: 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='%231C1C1A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      outline: none;
      transition: border-color .2s;
    }
    .sort-select:focus { border-color: #1C1C1A; }

    /* ── Product badge ── */
    .badge {
      position: absolute; top: 12px; left: 12px; z-index: 2;
      font-size: 9px; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; padding: 4px 10px; border-radius: 100px;
    }
    .badge-sold  { background:#E8195A; color:#fff; }
    .badge-new   { background:#1C1C1A; color:#F5F0EB; }
    .badge-limit { background:#8B6F47; color:#fff; }
    .badge-sale  { background:#C4602A; color:#fff; }

    /* ── Wishlist btn ── */
    .wishlist-btn {
      position: absolute; top: 12px; right: 12px; z-index: 2;
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(245,240,235,.9);
      backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background .2s, transform .2s;
    }
    .wishlist-btn:hover { background: #fff; transform: scale(1.1); }
    .wishlist-btn.active svg { fill: #E8195A; stroke: #E8195A; }

    /* Newsletter pie: shop-shell.css */