/** Shopify CDN: Minification failed

Line 894:72 Unexpected ","
Line 896:82 Unexpected ","
Line 903:88 Unexpected ","

**/
/*
 * klassy-collection-toolbar
 * source: ~/Claude/playwright-lab/out/dore-filter-sort/source.json (Dore mobile 414)
 *
 * Spec replicada:
 *   wrapper .collection__nav__buttons   display:flex; gap:10px
 *   each pill                           h~42.9px, padding 0 15px, border 1px solid #d3d3d3,
 *                                       border-radius 0, justify-content space-between,
 *                                       align-items center
 *   text                                font 11.3px/18.36, weight 500, color #646464,
 *                                       text-transform uppercase
 *   icon                                16x16, margin-left 8px, stroke currentColor
 *   button gap entre text e icon        flex space-between
 *
 * Klassy mapping:
 *   font-family NeueHaasDisplayRoman (klassy Regular es el más neutro;
 *   Neue Haas weight 500 al ser inalcanzable, dejamos Regular 400).
 */

.klassy-coll-toolbar {
  /* page-width controlado por Dawn; añadimos padding vertical propio */
  padding-block: 24px;
}

/* Ocultar UI nativa Dawn de filtros/sort para evitar UX duplicada con nuestra toolbar */
.section-klassy-collection-toolbar ~ * #main-collection-filters,
.section-klassy-collection-toolbar ~ * facet-filters-form,
.section-klassy-collection-toolbar ~ * .facets-vertical-sort,
.section-klassy-collection-toolbar ~ * .facets-wrapper {
  display: none !important;
}

/* ===========================================================
   PC SIDEBAR LAYOUT — drawer se convierte en sidebar inline
   en viewports grandes (>= 1000px), replicando Dore PC.
   - Sidebar 280px columna izquierda
   - Pill FILTER se oculta (filter siempre visible)
   - Product grid se desplaza a la derecha
   =========================================================== */

/* ===========================================================
   PC LAYOUT (>=750px) — replica exacta Dore PC
   source: out/dore-pc-layout/dore-pc-layout.json
   - Container .wrapper--full padding 50px 34px 76px
   - .collection__content flex: sidebar 250 + grid 1122 (sin gap)
   - Sidebar 250px max-width
   - Grid 4 columnas, gap ~20px
   =========================================================== */

@media screen and (min-width: 750px) {
  /* Pills FILTER+SORT y page-width full bleed se activan SOLO en PC sidebar mode
     (gated por body.klassy-pc-sidebar añadida por JS @ min-width 1100). Tablet
     750-1099 conserva las pills + drawer mobile. */
  body.klassy-pc-sidebar .klassy-coll-toolbar__btn--filter,
  body.klassy-pc-sidebar .klassy-coll-toolbar__btn--sort,
  body.klassy-pc-sidebar .klassy-coll-toolbar__sort-wrap {
    display: none !important;
  }

  body.klassy-pc-sidebar .klassy-coll-toolbar__inner {
    display: none;
  }

  /* Full-bleed: toolbar + grid en collection page extienden a 1440 con 34px de
     padding lateral, replicando Dore (no Dawn .page-width 1260 con 90px).
     Dawn inyecta `max-width: 126rem !important` desde settings, necesitamos
     !important para ganar la cascada.
     SOLO activo cuando body.klassy-pc-sidebar (>=1100px) — debajo conserva Dawn */
  body.klassy-pc-sidebar .klassy-coll-toolbar.page-width,
  body.klassy-pc-sidebar .section-klassy-collection-toolbar ~ * .collection.page-width {
    max-width: none !important;
    padding-left: 34px !important;
    padding-right: 34px !important;
  }

  /* La toolbar entera es position relative para anclar la sidebar */
  body.klassy-pc-sidebar .klassy-coll-toolbar {
    position: relative;
    padding: 0 34px;
    min-height: 0;
  }

  /* Sidebar inline — clase .is-pc-sidebar añadida por JS @ min-width 1100.
     IMPORTANTE: inset: auto DEBE ir antes de top/left, si no resetea ambos.
     padding-right 20px = gap visual entre contenido sidebar y grid (replica Dore
     .collection__filters__inner padding-right 20). */
  .klassy-filter-drawer.is-pc-sidebar {
    inset: auto;
    position: absolute;
    top: 50px;   /* coincide con padding-top de la wrapper Dore */
    left: 34px;  /* relativo a toolbar (padding-inline 34), queda en viewport x=34 */
    width: 250px;
    height: auto;
    pointer-events: auto;
    z-index: 1;
    padding-right: 20px;
    box-sizing: border-box;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__overlay {
    display: none;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__panel {
    position: static;
    transform: none !important;
    box-shadow: none !important;
    width: 100%;
    height: auto;
    max-width: none;
    background: transparent;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__header {
    display: none;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__scroll {
    overflow-y: visible;
    overflow-x: hidden; /* clamp horizontal overflow del PRICE input */
    padding: 0;
    min-width: 0;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__form,
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__panel {
    min-width: 0;
    max-width: 100%;
  }
  /* Group separator — Dore NO usa border, solo spacing entre headings */
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__group {
    border-bottom: 0;
    margin-bottom: 24px;
    min-width: 0;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__group:last-child {
    margin-bottom: 0;
  }
  /* Heading — Dore spec: 13px Medium uppercase, pad 0 28 4 0, h=23.5px */
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__group-heading {
    padding: 0 28px 4px 0 !important;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 19.5px;
    /* R7: cancelar el border-bottom mobile (PC nunca tuvo línea bajo heading,
       rondas 1-6 ya confirmaron) */
    border-bottom: 0 !important;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__group-label {
    font-family: 'NeueHaasDisplayBold', 'NeueHaasDisplayRoman', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 19.5px;
    letter-spacing: normal;
    text-transform: uppercase;
    color: rgb(34, 34, 34);
  }
  /* Chevron inline right (no separación extra)
     R6 2026-05-19: duration 0.18s→0.3s match Dore exact + easing easeOutCubic */
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__chevron {
    position: absolute;
    right: 6px;
    top: 50%;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    transform: rotate(-90deg);
    color: rgb(34, 34, 34);
    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__group[open] .klassy-filter-drawer__chevron {
    transform: rotate(0deg);
  }
  /* Body: smooth height animation driven by JS.
     scrollHeight incluye padding, así que dejamos pad 8/0/0 + overflow:hidden +
     transition height. JS setea height inline durante anim y limpia al final.
     R6 2026-05-19: smooth open/close (instead of native instant snap). */
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__group-body {
    padding: 8px 0 0 !important;
    border-top: 0 !important;
    margin-top: 0 !important;
    min-width: 0;
    overflow: hidden;
    transition: height 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  /* Hover swapper: inline color name span junto al label COLOUR
     R6 2026-05-19: match Dore .sidebar__heading__color (data-swapper-target). */
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__group-color {
    display: inline;
    margin-left: 6px;
    font-family: 'NeueHaasDisplayRoman', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 19.5px;
    color: rgb(34, 34, 34);
    text-transform: none;
    letter-spacing: normal;
    pointer-events: none;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__group-color:empty::before {
    content: '';
  }
  /* SHOW MORE: truncate items past threshold + button toggle
     R6 2026-05-19: match Dore .is-hidden + button[data-show-more] */
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__item.is-truncated,
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__swatch.is-truncated {
    display: none;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__group.is-expanded .klassy-filter-drawer__item.is-truncated {
    display: list-item;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__group.is-expanded .klassy-filter-drawer__swatch.is-truncated {
    display: inline-flex;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__show-more {
    display: block;
    margin-top: 4px;
    padding: 4px 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: 'NeueHaasDisplayBold', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgb(34, 34, 34);
    text-align: start;
    transition: color 0.3s;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__show-more:hover {
    color: rgb(100, 100, 100);
  }
  /* Items — Dore spec: 14.5px/21.75, item h=29.8 (line + ~8px pad) */
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__item {
    margin: 0;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__row {
    padding: 4px 0 !important;
    min-height: 29.8px;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__row-label {
    font-family: 'NeueHaasDisplayRoman', sans-serif;
    font-weight: 400;
    font-size: 14.5px;
    line-height: 21.75px;
    color: rgb(34, 34, 34);
    letter-spacing: normal;
    text-transform: none;
    min-width: 0;
    flex: 1 1 auto;
  }
  /* Checkbox — 16×16 square (más sutil que mobile 18) */
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__check {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    flex: 0 0 16px;
    border: 1px solid rgb(200, 200, 200);
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__check:checked::after {
    left: 4px;
    top: 0;
    width: 6px;
    height: 11px;
  }

  /* ===========================================================
     PRICE input — FIX overflow horizontal (era 344>250)
     Dawn input default min-width ~150-170px fuerza al flex parent
     a expandirse. Clamp con min-width:0 cascade + width:100%
     box-sizing border-box, reducir padding/font para entrar.
     =========================================================== */
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__price {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 4px 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__price-field {
    flex: 1 1 0;
    min-width: 0;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-sizing: border-box;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__price-field span {
    font-family: 'NeueHaasDisplayRoman', sans-serif;
    font-size: 11px;
    line-height: 1;
    color: rgb(100, 100, 100);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__price-field input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    font-family: 'NeueHaasDisplayRoman', sans-serif;
    font-size: 13px;
    line-height: 18px;
    padding: 6px 8px;
    border: 1px solid rgb(211, 211, 211);
    border-radius: 0;
    color: rgb(34, 34, 34);
    background: #fff;
    /* Hide spinner arrows que añaden ancho innecesario */
    -moz-appearance: textfield;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__price-field input::-webkit-outer-spin-button,
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__price-field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* ===========================================================
     PC COLOR swatches — circulos 26×26 con bg color (Dore spec ~34, ajustado)
     =========================================================== */
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 0 4px;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__swatch {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__swatch-color {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background-color: #fff;
    display: block;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__swatch:hover .klassy-filter-drawer__swatch-color {
    transform: scale(1.08);
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__swatch input:checked + .klassy-filter-drawer__swatch-color {
    box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px #222;
  }
  /* Mock filters disabled state — sutil pero visible */
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__check[disabled] {
    cursor: default;
    opacity: 0.85;
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__row:has(.klassy-filter-drawer__check[disabled]) {
    cursor: default;
  }
  /* Mock notice — pequeña tip arriba del filtro */
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__mock-notice {
    margin: 0 0 16px;
    padding: 8px 10px;
    background: rgba(34, 34, 34, 0.04);
    border-left: 2px solid #c8c8c8;
    font-family: 'NeueHaasDisplayRoman', sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: rgb(100, 100, 100);
  }
  .klassy-filter-drawer.is-pc-sidebar .klassy-filter-drawer__mock-notice strong {
    color: rgb(34, 34, 34);
    font-family: 'NeueHaasDisplayBold', sans-serif;
    font-weight: 700;
  }

  /* spacer end PC */

  /* Product grid: padding-left 250 = sidebar width (sin gap entre sidebar y grid,
     replica Dore). El padding outer 34px viene del .collection.page-width.
     → cards arrancan en viewport x = 34 + 250 = 284 ✓
     SOLO en body.klassy-pc-sidebar (>=1100px) — debajo grid full-width. */
  body.klassy-pc-sidebar #product-grid {
    padding-left: 250px;
    padding-right: 0;
  }

  /* Forzar grid 4 columnas, 20px gap (replica Dore).
     IMPORTANTE: #product-grid ES el <ul.grid.product-grid>, no su padre.
     Solo PC sidebar (>=1100); tablet usa Dawn defaults (2-col). */
  body.klassy-pc-sidebar #product-grid.grid,
  body.klassy-pc-sidebar #product-grid.product-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    column-gap: 20px !important;
    row-gap: 40px !important;
    margin: 0 !important;
    list-style: none;
  }

  body.klassy-pc-sidebar #product-grid.grid > .grid__item,
  body.klassy-pc-sidebar #product-grid.product-grid > .grid__item {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ===========================================================
     PRODUCT CARD pixel-perfect Dore
     Card 265.5×524 = image 265.5×398.2 (2:3 portrait) + info 125.8
     - Sin border, sin shadow, sin gradient
     - Image aspect forzado 2:3 (--ratio-percent 150%)
     - Info area: padding-top 13px, gap 6/2/3px entre rows
     - Title: Sofia Pro Regular 18px/27px color #000
     - Price: Sofia Pro Regular 14px, compare-at rgb(196,16,23) rojo
     - Sale badge: top-right de imagen 10/10px, blanco/negro 10px/12px
     =========================================================== */

  /* Card chrome: kill Dawn border/shadow/bg */
  #product-grid .card-wrapper {
    --border-radius: 0;
    --border-width: 0;
    --border-opacity: 0;
    --shadow-horizontal-offset: 0;
    --shadow-vertical-offset: 0;
    --shadow-blur-radius: 0;
    --shadow-opacity: 0;
  }
  #product-grid .card--card,
  #product-grid .card--standard .card__inner,
  #product-grid .card__inner {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  #product-grid .card--card:after,
  #product-grid .card--standard .card__inner:after {
    display: none !important;
  }

  /* Force image aspect 2:3 portrait (ratio Dore = 0.666 → percent 150%).
     Also kill any explicit height/aspect-ratio Dawn sets on the card container
     so total card height = image (398) + info (120) — no extra phantom space. */
  #product-grid .card,
  #product-grid .card__inner,
  #product-grid .card-wrapper {
    --ratio-percent: 150% !important;
  }
  #product-grid .grid__item,
  #product-grid .card-wrapper,
  #product-grid .card {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }
  #product-grid .card__media,
  #product-grid .card .media,
  #product-grid .card .media--hover-effect {
    background-color: rgb(247, 247, 247) !important; /* match Dore img-wrapper bg */
  }
  /* Image fits inside the 2:3 box maintaining proportion. */
  #product-grid .card__media .media img {
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* R10d 2026-05-19: KILL Dawn `.media--hover-effect` secondary-image swap.
     Bug en R8/R10c: tap swatch oculta secondary img, luego Dawn hover swap
     fades primary 0 + secondary 1 → secondary hidden = blanco vacío visible.
     Fix radical: primary siempre visible, secondary nunca renderiza. */
  #product-grid .card .media--hover-effect > img:first-of-type,
  #product-grid .card__media .media > img:first-of-type {
    opacity: 1 !important;
  }
  #product-grid .card .media--hover-effect > img:not(:first-of-type),
  #product-grid .card__media .media > img:not(:first-of-type) {
    display: none !important;
  }

  /* Info area below image — tighten Dawn padding + neutralize 1fr rows that
     stretch card__content beyond children (Dawn default 1rem padding + grid
     rows minmax(0,1fr) max-content minmax(0,1fr) + flex-grow:1).
     Force shrink-to-fit so card height = image + info only (replica Dore). */
  #product-grid .card__content {
    padding: 0 !important;
    display: block !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
  }
  /* Info area top padding — Dore: 13px gap imagen → swatches */
  #product-grid .card__information, .card--cstyle .card__information {
    padding: 13px 0 0 !important;
  }
  /* Gap entre elementos de card-information — overridden por margins específicos */
  #product-grid .card-information > * + *, .card--cstyle .card-information > * + * {
    margin-top: 0 !important;
  }
  #product-grid .card-information, .card--cstyle .card-information {
    text-align: left !important;
    padding: 0 !important;
  }
  /* Anti-aliasing (Dore usa antialiased webkit) */
  #product-grid .card-wrapper,
  #product-grid .card-wrapper * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* R10 2026-05-19: Title pixel-perfect Dore (.product__grid__title)
     — NeueHaasDisplayMedium 18px / 27px line-height / black.
     Decisión fija Sofia → NeueHaasDisplayRoman + faux-bold stroke 0.5px (proxy Medium).
     margin-top: 6px replica Dore swatches→title text-baseline gap. */
  #product-grid .card__heading, .card--cstyle .card__heading,
  #product-grid .card__heading.h5, .card--cstyle .card__heading.h5,
  #product-grid .card__heading a, .card--cstyle .card__heading a,
  #product-grid .card__heading a.full-unstyled-link, .card--cstyle .card__heading a.full-unstyled-link {
    font-family: 'NeueHaasDisplayMedium', 'NeueHaasDisplayRoman', sans-serif !important;
    font-size: 18px !important;
    line-height: 27px !important;
    font-weight: 400 !important;
    color: rgb(0, 0, 0) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    -webkit-text-stroke: 0 !important; /* R10c: stroke 0.5 era excesivo en 18px → off */
  }
  /* margin/padding sobre .card__heading.h5 (specificity 0,2,1) — replica Dore
     swatches→title text-baseline gap 6px */
  #product-grid .card__heading, .card--cstyle .card__heading,
  #product-grid .card__heading.h5, .card--cstyle .card__heading.h5 {
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
  }
  /* R10: subtítulo material/type — Dore .product_material
     NeueHaasDisplayRoman 14.5px / 26px / black. Decisión fija Sofia → Regular @400. */
  #product-grid .klassy-card-material, .card--cstyle .klassy-card-material {
    font-family: 'NeueHaasDisplayRoman', Assistant, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    line-height: 21.75px !important;
    color: rgb(0, 0, 0) !important;
    margin: 2px 0 0 0 !important; /* gap title → material 2px (Dore) */
    padding: 0 !important;
    letter-spacing: normal !important;
  }

  /* R10: Price row — Dore .product__grid__price NeueHaasDisplayRoman 14px / 21 */
  #product-grid .price, .card--cstyle .price,
  #product-grid .price *, .card--cstyle .price *,
  #product-grid .price__container .price-item, .card--cstyle .price__container .price-item {
    font-family: 'NeueHaasDisplayRoman', Assistant, sans-serif !important;
    font-size: 14px !important;
    line-height: 21px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
  }
  #product-grid .price, .card--cstyle .price {
    margin-top: 10px !important; /* gap material -> price 10px (Dore PC) */
  }
  #product-grid .price__container, .card--cstyle .price__container {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: baseline;
    justify-content: flex-start;
  }
  #product-grid .price-item--regular, .card--cstyle .price-item--regular {
    color: rgb(0, 0, 0) !important;
  }
  #product-grid .price-item--sale, .card--cstyle .price-item--sale {
    color: rgb(0, 0, 0) !important;
  }
  /* Compare-at (precio ORIGINAL) tachado en rojo. OJO: NO incluir
     .price-item--last → ese es el precio REBAJADO (price-item--sale), que NO debe
     ir tachado (bug "doblemente tachado", fix 2026-05-31). */
  #product-grid .price__sale .price-item--regular, .card--cstyle .price__sale .price-item--regular,
  #product-grid .price s.price-item, .card--cstyle .price s.price-item,
  #product-grid .price del.price-item, .card--cstyle .price del.price-item {
    color: rgb(196, 16, 23) !important;
    text-decoration: line-through !important;
  }
  /* Hide the secondary price-item that Dawn duplicates */
  #product-grid .price__regular .price-item--regular, .card--cstyle .price__regular .price-item--regular {
    color: rgb(0, 0, 0) !important;
  }

  /* Sale badge: reposition top-right of image, white-on-black, "Save X%" style.
     Dawn renderiza 2 badges (inner+outer). Dawn oculta el outer para card--standard.
     Nosotros mostramos el INNER (overlay sobre imagen) y ocultamos el outer.
     position:absolute con respecto a .card-wrapper (position:relative) → badge en
     viewport coords top-right de la imagen. */
  #product-grid .card-wrapper {
    position: relative;
  }
  /* Excluye el badge "Sold out: Notify Me": ese conserva su estilo base (igual que en
     home — abajo-centro, 12px mayúsculas, redondeado). Solo Sale/New In van top-right. */
  #product-grid .card__badge:not(:has(.klassy-soldout-notify)) {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    align-self: auto !important;
    justify-self: auto !important;
    margin: 0 !important;
    grid-row-start: auto !important;
    z-index: 2;
  }
  /* SHOW inner badge (overlay sobre imagen). Override Dawn `display:none` */
  #product-grid .card .card__inner > .card__content > .card__badge {
    display: block !important;
  }
  /* En colección, card__content está colapsado (height:0) y es el offset-parent → el badge
     anclado a él flotaba arriba. Lo hacemos estático para que el offset-parent del badge
     pase a ser card__inner (la imagen completa, position:relative). */
  #product-grid .card__inner > .card__content:has(.klassy-soldout-notify) {
    position: static !important;
  }
  /* "Sold out: Notify Me": abajo-centro de la imagen (como en home). */
  #product-grid .card__inner > .card__content > .card__badge:has(.klassy-soldout-notify) {
    position: absolute !important;
    top: auto !important;
    bottom: 11px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-self: auto !important;
    z-index: 4;
  }
  /* HIDE outer badge (sibling de card-information, no queremos duplicado) */
  #product-grid .card > .card__content > .card__badge {
    display: none !important;
  }
  #product-grid .card__badge:not(:has(.klassy-soldout-notify)) .badge {
    display: inline-block !important;
    padding: 3px 6px !important;
    background: rgb(0, 0, 0) !important;
    color: rgb(255, 255, 255) !important;
    font-family: 'NeueHaasDisplayRoman', sans-serif !important;
    font-size: 10px !important;
    line-height: 13px !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    height: auto !important;
  }
  /* Sold out: white-on-grey */
  #product-grid .card__badge .badge.color-inverse,
  #product-grid .card__badge .badge[class*="sold-out"] {
    background: rgb(100, 100, 100) !important;
  }

  /* ===========================================================
     KLASSY CARD SWATCHES — Dore pixel-perfect (.grid__swatch__container)
     R10 2026-05-19: 18→26 (match Dore .siblings__link). Container height 28.
     =========================================================== */
  .klassy-card-swatches {
    margin: 0;
    /* padding horizontal: el swatch NO puede ir pegado al borde de la card (overflow:hidden
       + border-radius) o el borde/aro del swatch se recorta (círculo "roto"). */
    padding: 0 4px;
    /* Dore container height 28 (gap-aware) */
    min-height: 28px;
    display: flex;
    align-items: center;
  }
  .klassy-card-swatches__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    overflow: visible;
  }
  /* BUG FIX: Dawn base.css `a:empty{display:none}` ocultaba estos anchors.
     R10d 2026-05-19: 26 → 18px decisión Arturo "circulitos más pequeños".
     position:relative + z-index:3 para no quedar bajo .full-unstyled-link::after */
  .klassy-card-swatches__item {
    display: inline-block !important;
    position: relative;
    z-index: 3;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.35);
    background-color: rgb(247, 247, 247);
    background-size: cover;
    background-position: center;
    flex: 0 0 18px;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
  }
  .klassy-card-swatches__more {
    position: relative;
    z-index: 3;
  }
  /* Hover sutil (Dore no tiene hover visual, pero click universal necesita pista) */
  .klassy-card-swatches__item:hover {
    border-color: rgba(0, 0, 0, 0.25);
  }
  .klassy-card-swatches__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 2px 0 6px;
    font-family: 'NeueHaasDisplayRoman', sans-serif;
    font-size: 14.5px;
    color: rgb(0, 0, 0);
    text-decoration: none;
    line-height: 1;
  }
  .klassy-card-swatches__more:hover {
    text-decoration: underline;
  }

  /* R10 2026-05-19: BADGE TOP-LEFT — Dore .product__badge--left
     Position: top:10 left:10 (gemelo de top-right). Bg blanco / texto negro
     (inverso del sale badge). Coexiste con el badge top-right Save X%. */
  #product-grid .card__badge--top-left {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2;
    margin: 0 !important;
  }
  #product-grid .card__badge--top-left .badge,
  #product-grid .card__badge--top-left .badge--top-left {
    display: inline-block !important;
    padding: 3px 6px !important;
    background: rgb(255, 255, 255) !important;
    color: rgb(0, 0, 0) !important;
    font-family: 'NeueHaasDisplayRoman', sans-serif !important;
    font-size: 10px !important;
    line-height: 13px !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    height: auto !important;
  }
}

/* ===========================================================
   CARD IMAGE BORDER-RADIUS (replica Dore ~8-10px)
   APLICA PC + mobile (fuera de @media para que ambos sean rounded)
   =========================================================== */
#product-grid .card,
#product-grid .card__inner,
#product-grid .card__media,
#product-grid .card .media,
#product-grid .card .media--hover-effect {
  border-radius: 10px !important;
  overflow: hidden;
}
#product-grid .card__media .media img {
  border-radius: 10px;
}

/* R10 mobile 2026-05-19: card pixel-perfect Dore mobile (iPhone 12 390×844).
   Dore mobile vs PC: title 18/27 IDÉNTICO, swatches 26 IDÉNTICOS; solo cambian
   material/price/+N de 14.5→13 (12.5% más pequeños). */
@media (max-width: 749px) {
  .klassy-card-swatches {
    margin: 0;
    padding: 0 4px;
    min-height: 28px;
    display: flex;
    align-items: center;
  }
  .klassy-card-swatches__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    overflow: visible;
  }
  /* BUG FIX (mobile también): a:empty { display:none } global de Dawn.
     R10d 26→18 (decisión Arturo). position:relative + z-index:3. */
  .klassy-card-swatches__item {
    display: inline-block !important;
    position: relative;
    z-index: 3;
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.35);
    background-color: rgb(247, 247, 247);
    background-size: cover;
    background-position: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
  }
  .klassy-card-swatches__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
    height: 26px;
    font-family: 'NeueHaasDisplayRoman', sans-serif;
    font-size: 13px;
    color: rgb(0, 0, 0);
    text-decoration: none;
    line-height: 1;
    padding: 0 2px 0 6px;
  }

  /* Title: 18/27 black (mismo que PC, replica Dore) */
  #product-grid .card__heading, .card--cstyle .card__heading,
  #product-grid .card__heading.h5, .card--cstyle .card__heading.h5,
  #product-grid .card__heading a, .card--cstyle .card__heading a,
  #product-grid .card__heading a.full-unstyled-link, .card--cstyle .card__heading a.full-unstyled-link {
    font-family: 'NeueHaasDisplayMedium', 'NeueHaasDisplayRoman', sans-serif !important;
    font-size: 18px !important;
    line-height: 27px !important;
    font-weight: 400 !important;
    color: rgb(0, 0, 0) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    -webkit-text-stroke: 0 !important;
  }
  /* Mobile gap swatches→title 6px (replica Dore product__grid__title_wrapper padding) */
  #product-grid .card__heading, .card--cstyle .card__heading,
  #product-grid .card__heading.h5, .card--cstyle .card__heading.h5 {
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
  }
  /* Material mobile: 13/19.5 Sofia Regular @400 black (Dore .product_material mobile) */
  #product-grid .klassy-card-material, .card--cstyle .klassy-card-material {
    font-family: 'NeueHaasDisplayRoman', Assistant, sans-serif !important;
    font-size: 13px !important;
    line-height: 19.5px !important;
    font-weight: 400 !important;
    color: rgb(0, 0, 0) !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    letter-spacing: normal !important;
  }
  /* Price mobile: 13/19.5 Sofia Regular @400 */
  #product-grid .price, .card--cstyle .price,
  #product-grid .price *, .card--cstyle .price *,
  #product-grid .price__container .price-item, .card--cstyle .price__container .price-item {
    font-family: 'NeueHaasDisplayRoman', Assistant, sans-serif !important;
    font-size: 13px !important;
    line-height: 19.5px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
  }
  #product-grid .price, .card--cstyle .price {
    margin-top: 8px !important;
  }
  /* Sale price colors (mobile) — match Dore: original struck RED, current BLACK */
  #product-grid .price-item--regular { color: rgb(0, 0, 0) !important; }, .card--cstyle .price-item--regular { color: rgb(0, 0, 0) !important; }
  #product-grid .price-item--sale, .card--cstyle .price-item--sale,
  #product-grid .price__sale .price-item--last { color: rgb(0, 0, 0) !important; }, .card--cstyle .price__sale .price-item--last { color: rgb(0, 0, 0) !important; }
  #product-grid .price__sale .price-item--regular, .card--cstyle .price__sale .price-item--regular,
  #product-grid .price s.price-item, .card--cstyle .price s.price-item,
  #product-grid .price del.price-item, .card--cstyle .price del.price-item {
    color: rgb(196, 16, 23) !important;
    text-decoration: line-through !important;
  }
  #product-grid .price__regular .price-item--regular { color: rgb(0, 0, 0) !important; }, .card--cstyle .price__regular .price-item--regular { color: rgb(0, 0, 0) !important; }
}

/* R8 2026-05-19: card swatch SELECTED ring — replica Dore .is-selected
   (ring inset blanco 1.5 + outline negro 2). Aplica PC + mobile. */
.klassy-card-swatches__item.is-selected {
  border-color: transparent;
  /* Anillo EXTERIOR (hueco blanco 2px + aro negro 2px sólido) — no toca el color pintado
     del swatch y se lee limpio incluso en el swatch blanco (antes 1.5px se veía fino/roto).
     La fila va overflow:visible para no recortarlo. */
  box-shadow:
    0 0 0 1.5px #fff,
    0 0 0 3px #000;
}
.klassy-card-swatches__item.is-selected:hover {
  transform: none;
}

.klassy-coll-toolbar__inner {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
}

.klassy-coll-toolbar__btn {
  /* Reset button browser-default */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  margin: 0;

  /* Pill spec Dore — ancho fijo ~194px replicando Dore mobile escalado a PC */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  width: 194px;
  min-height: 43px;
  padding: 0 15px;
  border: 1px solid #d3d3d3;
  border-radius: 0;

  /* Typography Dore */
  font-family: 'NeueHaasDisplayRoman', sans-serif;
  font-weight: 400;
  font-size: 11.3px;
  line-height: 18.36px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: rgb(100, 100, 100);
  text-decoration: none;
  cursor: pointer;

  transition: border-color 0.15s ease, color 0.15s ease;
}

.klassy-coll-toolbar__btn:hover {
  border-color: #646464;
  color: #222;
}

.klassy-coll-toolbar__btn:focus-visible {
  outline: 2px solid #222;
  outline-offset: 2px;
}

.klassy-coll-toolbar__btn-label {
  display: inline-block;
}

.klassy-coll-toolbar__btn-icon {
  width: 16px;
  height: 16px;
  margin-left: 8px;
  flex-shrink: 0;
  display: block;
  /* margin-top -2 replica el offset Dore (centrado óptico) */
  margin-top: -2px;
}

/* Sort wrapper relativo para anclar el dropdown */
.klassy-coll-toolbar__sort-wrap {
  position: relative;
  flex: 0 0 auto;
  display: flex;
}

.klassy-coll-toolbar__sort-wrap > .klassy-coll-toolbar__btn {
  width: 194px;
}

/* En mobile las pills crecen hasta ocupar el ancho disponible */
@media (max-width: 749px) {
  .klassy-coll-toolbar__btn,
  .klassy-coll-toolbar__sort-wrap > .klassy-coll-toolbar__btn {
    flex: 1 1 0;
    width: auto;
  }
  .klassy-coll-toolbar__sort-wrap { flex: 1 1 0; }
}

/* Sort dropdown — replica Dore (mobile spec: border 1px rgba(34,34,34,0.2),
   items padding 8px 15px font 12-13px, current bold) */
.klassy-coll-toolbar__sort-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid rgba(34, 34, 34, 0.2);
  min-width: 100%;
  width: max-content;
  max-width: 280px;
  z-index: 1000;
  box-shadow: none;
}

.klassy-coll-toolbar__sort-list[hidden] {
  display: none;
}

.klassy-coll-toolbar__sort-item {
  margin: 0;
  padding: 0;
}

.klassy-coll-toolbar__sort-link {
  display: block;
  padding: 8px 15px;
  font-family: 'NeueHaasDisplayRoman', sans-serif;
  font-size: 12px;        /* match Dore exacto */
  font-weight: 400;
  line-height: 18px;
  color: rgb(34, 34, 34);
  text-decoration: none;
  text-transform: none;   /* sentence case — items renderean tal cual Shopify los da */
  letter-spacing: normal;
  white-space: nowrap;
}

.klassy-coll-toolbar__sort-link:hover,
.klassy-coll-toolbar__sort-link:focus-visible {
  background: rgba(0,0,0,0.04);
  color: #000;
}

.klassy-coll-toolbar__sort-item.is-current .klassy-coll-toolbar__sort-link {
  font-family: 'NeueHaasDisplayBold', sans-serif;
  font-weight: 700;
  color: rgb(34, 34, 34);
}

/* ===========================================================
   LOADING — replica Dore .svg-loader-container scoped al grid
   Overlay SOLO sobre #product-grid (no full viewport).
   SVG spinner 18×18 con dos circles (track + animated dash).
   =========================================================== */

/* Container del grid — necesita position relative para el overlay absolute */
#product-grid {
  position: relative;
}

.klassy-grid-loader {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

#product-grid.klassy-is-loading .klassy-grid-loader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.klassy-grid-loader__svg {
  width: 28px;
  height: 28px;
  display: block;
  animation: klassy-rotator 1.4s linear infinite;
  color: rgba(34, 34, 34, 0.9);
}

.klassy-grid-loader__svg circle:first-child {
  fill: none;
  stroke: rgba(34, 34, 34, 0.18);
  stroke-width: 1.5;
}

.klassy-grid-loader__svg circle:last-child {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 88;
  stroke-dashoffset: 88;
  animation: klassy-dash 1.4s ease-in-out infinite;
  transform-origin: center;
}

@keyframes klassy-rotator {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}
@keyframes klassy-dash {
  0% { stroke-dashoffset: 88; }
  50% { stroke-dashoffset: 22; transform: rotate(135deg); }
  100% { stroke-dashoffset: 88; transform: rotate(450deg); }
}

/* Mobile fine-tuning — Dore @ m414 mantiene padding 16px lateral via page-width */
@media (max-width: 749px) {
  .klassy-coll-toolbar__btn {
    min-height: 43px;
    padding: 0 15px;
  }
}

/* ===========================================================
   FILTER DRAWER — left-slide replicando Dore mobile
   source: out/dore-filter-drawer/drawer-open.png + DOM probe
   - drawer w=372 @ 414 viewport (≈90%), max-width 400px en PC
   - header h=51px con "FILTER" uppercase + X close
   - sections accordion details/summary, heading uppercase bold + chevron
   - rows: label izq + checkbox/swatch der
   =========================================================== */

.klassy-filter-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.klassy-filter-drawer[hidden] { display: none !important; }

.klassy-filter-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  pointer-events: auto;
  transition: background-color 0.3s ease;
}

.klassy-filter-drawer.is-open .klassy-filter-drawer__overlay {
  background: rgba(0, 0, 0, 0.35);
}

.klassy-filter-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 90%;
  max-width: 400px;
  background: #ffffff;
  /* R7 2026-05-19: match Dore subtle 2-layer shadow (always present) */
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 3px 12px rgba(0,0,0,0.02);
  transform: translateX(-100%);
  /* R7 2026-05-19: 0.4s + easeOutCubic match Dore family (Dore mobile uses 0.5s
     default ease; compromiso 0.4s para no sentirse lento + easing del theme) */
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  outline: none;
}

.klassy-filter-drawer.is-open .klassy-filter-drawer__panel {
  transform: translateX(0);
}

/* Header */
.klassy-filter-drawer__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 51px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.klassy-filter-drawer__title {
  margin: 0;
  font-family: 'NeueHaasDisplayBold', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #222;
}

.klassy-filter-drawer__close {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 8px;
  margin: -8px -8px -8px 0;
  cursor: pointer;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
}
.klassy-filter-drawer__close:hover { color: #000; }
.klassy-filter-drawer__close:focus-visible { outline: 2px solid #222; outline-offset: 2px; }

/* Form */
.klassy-filter-drawer__form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.klassy-filter-drawer__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  /* R7 2026-05-19: match Dore mobile inner padding 16 sides + 200 bottom
     (generoso bottom para que el último item no quede pegado a edge).
     PC sidebar override más abajo via .is-pc-sidebar selector. */
  padding: 16px 16px 200px;
  /* iOS momentum scroll inside drawer */
  -webkit-overflow-scrolling: touch;
}

.klassy-filter-drawer__empty {
  margin: 24px 20px;
  font-family: 'NeueHaasDisplayRoman', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #646464;
}

/* Group (accordion section) */
.klassy-filter-drawer__group {
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

.klassy-filter-drawer__group:last-of-type { border-bottom: 0; }

.klassy-filter-drawer__group-heading {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* R7 2026-05-19: sides padding 0 — scroll wrapper aporta 16px lateral.
     Antes 18 20 → ahora 18 0 (vertical sin cambio, heading se alinea con items). */
  padding: 18px 0;
  cursor: pointer;
  user-select: none;
  /* R7 2026-05-19: separator line bajo heading (antes estaba en __group-body
     border-top; movida acá para sobrevivir limpia la animación smooth height). */
  border-bottom: 1px solid #e5e5e5;
}
.klassy-filter-drawer__group:not([open]) .klassy-filter-drawer__group-heading {
  border-bottom-color: transparent;
}
.klassy-filter-drawer__group-heading::-webkit-details-marker { display: none; }
.klassy-filter-drawer__group-heading::marker { content: ''; }

.klassy-filter-drawer__group-label {
  font-family: 'NeueHaasDisplayBold', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #222;
}

.klassy-filter-drawer__chevron {
  transition: transform 0.2s ease;
  color: #222;
}

.klassy-filter-drawer__group[open] .klassy-filter-drawer__chevron {
  transform: rotate(180deg);
}

.klassy-filter-drawer__group-body {
  padding: 4px 0 18px;
  border-top: 0;
  margin-top: 0;
  /* R7 2026-05-19: smooth accordion mobile (port R6 PC, base-level).
     overflow hidden + height transition; JS toggla inline height. */
  overflow: hidden;
  transition: height 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Show More / Less button — base styling (PC override en .is-pc-sidebar block).
   R7 2026-05-19: text-only bold uppercase, match Dore. */
.klassy-filter-drawer__show-more {
  display: block;
  margin-top: 8px;
  padding: 6px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: 'NeueHaasDisplayBold', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #222;
  text-align: start;
  transition: color 0.3s;
}
.klassy-filter-drawer__show-more:hover { color: #646464; }

/* SHOW MORE truncation — base (mobile + sin scope) */
.klassy-filter-drawer__item.is-truncated,
.klassy-filter-drawer__swatch.is-truncated {
  display: none;
}
.klassy-filter-drawer__group.is-expanded .klassy-filter-drawer__item.is-truncated {
  display: list-item;
}
.klassy-filter-drawer__group.is-expanded .klassy-filter-drawer__swatch.is-truncated {
  display: inline-flex;
}

/* Color swapper span (COLOUR heading)  R7 2026-05-19: visible también mobile */
.klassy-filter-drawer__group-color {
  display: inline;
  margin-left: 6px;
  font-family: 'NeueHaasDisplayRoman', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  color: #222;
  pointer-events: none;
}

/* List items (checkbox rows) */
.klassy-filter-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.klassy-filter-drawer__item {
  margin: 0;
}

.klassy-filter-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  cursor: pointer;
  gap: 12px;
}

.klassy-filter-drawer__row-label {
  font-family: 'NeueHaasDisplayRoman', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: #222;
  flex: 1 1 auto;
  word-break: break-word;
}

.klassy-filter-drawer__check {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border: 1px solid #c8c8c8;
  border-radius: 0;
  margin: 0;
  padding: 0;
  background: #fff;
  cursor: pointer;
  flex: 0 0 18px;
  position: relative;
  vertical-align: middle;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.klassy-filter-drawer__check:hover { border-color: #646464; }

.klassy-filter-drawer__check:checked {
  background: #222;
  border-color: #222;
}
.klassy-filter-drawer__check:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.klassy-filter-drawer__check:focus-visible { outline: 2px solid #222; outline-offset: 2px; }

.klassy-filter-drawer__item.is-disabled .klassy-filter-drawer__row { opacity: 0.5; cursor: not-allowed; }

/* Color swatches */
.klassy-filter-drawer__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 6px 0 6px;
}

.klassy-filter-drawer__swatch {
  display: inline-flex;
  cursor: pointer;
  position: relative;
}

.klassy-filter-drawer__swatch-color {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: block;
  border: 1px solid #d3d3d3;
  background-color: #fff;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.klassy-filter-drawer__swatch:hover .klassy-filter-drawer__swatch-color { transform: scale(1.05); }

.klassy-filter-drawer__swatch.is-active .klassy-filter-drawer__swatch-color {
  border: 2px solid #222;
  box-shadow: inset 0 0 0 2px #fff;
}

.klassy-filter-drawer__swatch.is-disabled { opacity: 0.4; pointer-events: none; }

/* Price inputs */
.klassy-filter-drawer__price {
  display: flex;
  gap: 12px;
  padding: 4px 0;
}
.klassy-filter-drawer__price-field {
  flex: 1 1 0;
  min-width: 0; /* permite que el campo encoja por debajo del ancho intrínseco del input (fix overflow móvil) */
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'NeueHaasDisplayRoman', sans-serif;
  font-size: 12px;
  color: #646464;
}
.klassy-filter-drawer__price-field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box; /* el padding no suma al ancho → no desborda el drawer en móvil */
  font-family: 'NeueHaasDisplayRoman', sans-serif;
  font-size: 14px;
  border: 1px solid #d3d3d3;
  padding: 8px 10px;
  border-radius: 0;
}

/* Sin footer — filtros aplican on-change vía AJAX (replica Dore) */

/* visually-hidden fallback */
.klassy-filter-drawer .visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   Mobile compaction — match Dore & Rose tight collection spacing.
   Paid traffic lands on mobile; tighter grid = more product per scroll.
   Targets (mobile 390px): bar→1st row 15px, row-gap 19px (Dore measured).
   Desktop untouched.
   ────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 749.98px) {
  .klassy-coll-toolbar { padding-block: 12px 6px; }
  #product-grid.product-grid { margin-top: 9px; }
}