/* ═══════════════════════════════════════════════════════════════
   AMARÍA — Catálogo / Archive (Shop + Categoría)  ·  V1 top-bar
   Port WooCommerce del handoff "design_handoff_amaria_tienda".
   Fuente: catalog.css + tokens de styles.css (reproducción fiel).
   Todo va scopeado bajo .cat-page para no chocar con el tema.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens (de styles.css :root, scopeados al catálogo) ── */
.cat-page {
  --ink: #1B1F1D;
  --ink-60: rgba(27, 31, 29, 0.6);
  --ink-40: rgba(27, 31, 29, 0.4);
  --paper: #F7F7F6;
  --paper-2: #EFEFEE;
  --paper-3: #E5E5E3;
  --mint: #CDE0D8;
  --mint-tint: #EFEFED;
  --mint-deep: #8FB0A4;
  --sand: #D9C9B0;
  --line: rgba(27, 31, 29, 0.14);
  --line-strong: rgba(27, 31, 29, 0.28);
  --serif: "Playfair Display", "Times New Roman", serif;
  --sans: "Jost", system-ui, -apple-system, sans-serif;
  --eyebrow: 0.66rem;
  --maxw: 1320px;
  font-family: var(--sans);
  color: var(--ink);
}
.cat-page *, .cat-page *::before, .cat-page *::after { box-sizing: border-box; }
.cat-page img { display: block; max-width: 100%; }
.cat-page button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
.cat-page a { color: inherit; text-decoration: none; }

/* Evita el corrimiento horizontal al sobreescribir el .container del tema
   (mismo aprendizaje que la PDP). */
body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag,
body.tax-product_brand { overflow-x: hidden; }

/* ── Utilidades mínimas usadas dentro del catálogo ── */
.cat-page .eyebrow { font-size: var(--eyebrow); letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; }
.cat-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
       padding: 0.95rem 1.4rem; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
       font-weight: 500; border: 1px solid var(--ink); transition: all 0.18s ease; cursor: pointer; border-radius: 0; }
.cat-page .btn--solid { background: var(--ink); color: var(--paper); }
.cat-page .btn--solid:hover { background: transparent; color: var(--ink); }
.cat-page .btn--full { width: 100%; }


/* ════════ catalog.css (handoff, reproducción fiel) ════════ */
.cat-wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 2.2rem; }

/* ───────── Hero / header band ───────── */
.cat-hero { border-bottom: 1px solid var(--line); }
.cat-hero__inner { max-width: var(--maxw); margin: 0 auto; padding: 3.2rem 2.2rem 2.6rem;
                   display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; }
.cat-hero__eye { color: var(--ink-60); margin-bottom: 1rem; }
.cat-hero__title { font-family: var(--serif); font-weight: 400; font-size: 3.4rem; line-height: 1.02;
                   margin: 0; letter-spacing: -0.01em; }
.cat-hero__title em { font-style: italic; }
.cat-hero__intro { font-size: 0.96rem; line-height: 1.6; color: var(--ink-60); margin: 0.9rem 0 0; max-width: 460px; }
.cat-hero__aside { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.8rem; }
.cat-hero__count { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-60); }
.cat-hero__count b { color: var(--ink); font-weight: 500; }

/* category chips row under hero */
.cat-subnav { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 1.1rem 2.2rem; max-width: var(--maxw);
              margin: 0 auto; border-bottom: 1px solid var(--line); }
.cat-subnav__chip { padding: 0.5rem 0.95rem; border: 1px solid var(--line-strong); border-radius: 999px;
                    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-60);
                    cursor: pointer; transition: all 0.15s ease; white-space: nowrap; }
.cat-subnav__chip:hover { border-color: var(--ink); color: var(--ink); }
.cat-subnav__chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ───────── Controls bar (top-bar variant) ───────── */
.cat-controls { position: relative; z-index: 20; }
.cat-controls__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
                     padding: 1.1rem 2.2rem; max-width: var(--maxw); margin: 0 auto; }
.cat-controls__left { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.cat-controls__right { display: flex; align-items: center; gap: 1.6rem; }

.cat-fbtn { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1.1rem; white-space: nowrap;
            border: 1px solid var(--line-strong); font-size: 0.74rem; letter-spacing: 0.12em;
            text-transform: uppercase; font-weight: 500; transition: all 0.15s ease; cursor: pointer; flex-shrink: 0; }
.cat-fbtn:hover { border-color: var(--ink); }
.cat-fbtn.is-open { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cat-fbtn svg { width: 16px; height: 16px; }
.cat-fbtn .chev { transition: transform 0.2s ease; }
.cat-fbtn.is-open .chev { transform: rotate(180deg); }
.cat-fbtn__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
                   padding: 0 5px; border-radius: 999px; background: var(--mint); color: var(--ink);
                   font-size: 0.66rem; letter-spacing: 0; }
.cat-fbtn.is-open .cat-fbtn__count { background: var(--mint); color: var(--ink); }

/* active filter chips */
.cat-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 0.8rem;
            background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px;
            font-size: 0.74rem; letter-spacing: 0.02em; }
.cat-chip button { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
                   border-radius: 50%; color: var(--ink-60); }
.cat-chip button:hover { color: var(--ink); }
.cat-chip__clear { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-60); text-decoration: underline;
                   text-underline-offset: 3px; cursor: pointer; }
.cat-chip__clear:hover { color: var(--ink); }

/* count text */
.cat-count { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-60); white-space: nowrap; }
.cat-count b { color: var(--ink); font-weight: 500; }

/* sort */
.cat-sort { position: relative; }
.cat-sort__btn { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.74rem; letter-spacing: 0.1em;
                 text-transform: uppercase; font-weight: 500; cursor: pointer; padding: 0.5rem 0; white-space: nowrap; }
.cat-sort__btn svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.cat-sort.is-open .cat-sort__btn svg.chev { transform: rotate(180deg); }
.cat-sort__menu { position: absolute; top: calc(100% + 0.6rem); right: 0; min-width: 240px; background: var(--paper);
                  border: 1px solid var(--ink); z-index: 40; box-shadow: 0 18px 50px rgba(27,31,29,0.12);
                  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: all 0.16s ease; }
.cat-sort.is-open .cat-sort__menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cat-sort__opt { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left;
                 padding: 0.85rem 1.1rem; font-size: 0.84rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.cat-sort__opt:last-child { border-bottom: 0; }
.cat-sort__opt:hover { background: var(--paper-2); }
.cat-sort__opt.is-active { font-weight: 500; }
.cat-sort__opt.is-active::after { content: ''; }
.cat-sort__opt .tick { width: 14px; height: 14px; color: var(--ink); opacity: 0; }
.cat-sort__opt.is-active .tick { opacity: 1; }

/* ───────── Mega filter panel (top-bar dropdown) ───────── */
.cat-mega { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; overflow: hidden; max-height: 0;
            transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1); }
/* 10 opciones máx. por faceta → ~600-630px de contenido en desktop.
   El tope se acota al viewport y el panel scrollea en vez de recortar el pie. */
.cat-mega.is-open { max-height: min(640px, calc(100vh - 120px)); overflow-y: auto; overscroll-behavior: contain;
                    box-shadow: 0 24px 50px rgba(27,31,29,0.12); }
.cat-mega__inner { border-top: 1px solid var(--line); border-bottom: 1px solid var(--ink);
                   padding: 2.2rem 2.2rem 1.6rem; background: var(--paper); max-width: var(--maxw); margin: 0 auto; }
.cat-mega__cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.4rem; }
.cat-facet__h { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-60);
                margin: 0 0 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.cat-facet__list { display: flex; flex-direction: column; gap: 0.7rem; }
/* Pie siempre alcanzable: se queda pegado al fondo mientras hay scroll. */
.cat-mega__foot { position: sticky; bottom: 0; z-index: 2; background: var(--paper);
                  display: flex; align-items: center; justify-content: space-between; margin-top: 1.8rem;
                  padding-top: 1.2rem; padding-bottom: 0.6rem; border-top: 1px solid var(--line); }

/* custom check option */
.cat-opt { display: flex; align-items: center; gap: 0.65rem; font-size: 0.86rem; cursor: pointer; color: var(--ink);
           user-select: none; }
.cat-opt__box { width: 16px; height: 16px; border: 1px solid var(--line-strong); flex-shrink: 0;
                display: flex; align-items: center; justify-content: center; transition: all 0.14s ease; }
.cat-opt__box svg { width: 11px; height: 11px; color: var(--paper); opacity: 0; }
.cat-opt.is-on .cat-opt__box { background: var(--ink); border-color: var(--ink); }
.cat-opt.is-on .cat-opt__box svg { opacity: 1; }
.cat-opt:hover .cat-opt__box { border-color: var(--ink); }
.cat-opt__n { flex: 1; }
.cat-opt__c { color: var(--ink-40); font-size: 0.76rem; }
/* swatch option (color facet) */
.cat-opt__swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); flex-shrink: 0; }

/* ───────── Sidebar variant layout ───────── */
.cat-layout { display: grid; grid-template-columns: 256px 1fr; gap: 2.4rem; max-width: var(--maxw);
              margin: 0 auto; padding: 1.8rem 2.2rem 0; align-items: start; }
.cat-aside { position: sticky; top: 1.5rem; }
.cat-aside__head { display: flex; align-items: center; justify-content: space-between;
                   padding-bottom: 1rem; border-bottom: 1px solid var(--ink); margin-bottom: 0.4rem; }
.cat-aside__head h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; margin: 0;
                      display: flex; align-items: center; gap: 0.6rem; }
.cat-aside__head svg { width: 18px; height: 18px; }
.cat-aside__clear { font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-60); text-decoration: underline;
                    text-underline-offset: 3px; cursor: pointer; }
.cat-aside__clear:hover { color: var(--ink); }

.cat-acc { border-bottom: 1px solid var(--line); }
.cat-acc__head { display: flex; align-items: center; justify-content: space-between; width: 100%;
                 padding: 1.05rem 0; cursor: pointer; }
.cat-acc__head span.lbl { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }
.cat-acc__head .right { display: flex; align-items: center; gap: 0.6rem; }
.cat-acc__head .pillc { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
                        padding: 0 5px; border-radius: 999px; background: var(--mint); color: var(--ink); font-size: 0.64rem; }
.cat-acc__head .plus { font-family: var(--serif); font-size: 1.3rem; line-height: 1; transition: transform 0.2s ease; }
.cat-acc.is-open .plus { transform: rotate(45deg); }
.cat-acc__body { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }
.cat-acc.is-open .cat-acc__body { max-height: 420px; }
.cat-acc__body-in { display: flex; flex-direction: column; gap: 0.8rem; padding: 0.2rem 0 1.2rem; }

/* price range */
.cat-price { display: flex; flex-direction: column; gap: 0.9rem; padding: 0.4rem 0 1.2rem; }
.cat-price__vals { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--ink-60); }
.cat-price__track { position: relative; height: 2px; background: var(--paper-3); }
.cat-price__fill { position: absolute; height: 100%; background: var(--ink); }
.cat-price__dots { display: flex; justify-content: space-between; }

/* main column */
.cat-main__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
                 padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.8rem; }
.cat-main__chips { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

/* ───────── Product grid ───────── */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2rem 1.8rem; padding: 1.8rem 2.2rem 4rem;
            max-width: var(--maxw); margin: 0 auto; }
.cat-grid--3 { grid-template-columns: repeat(3, 1fr); padding: 0 0 4rem; max-width: none; }

/* ───────── Product card ───────── */
.cat-card { display: flex; flex-direction: column; }
.cat-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2);
                   cursor: pointer; }
.cat-card__layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
                   transition: opacity 0.45s ease; }
.cat-card__layer--alt { opacity: 0; }
/* El cross-fade en hover solo cuando hay imagen alterna (galería); si no, no
   desvanecemos la base para no mostrar el fondo gris del media. */
.cat-card.cat-card--has-alt:hover .cat-card__layer--base { opacity: 0; }
.cat-card.cat-card--has-alt:hover .cat-card__layer--alt { opacity: 1; }
.cat-card__layer img { width: 100%; height: 100%; object-fit: cover; }

/* placeholder bottle tile */
.cat-ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
          gap: 0.9rem; }
.cat-ph__bottle { width: 34%; height: 58%; border-radius: 14px 14px 8px 8px; position: relative;
                  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14%;
                  box-shadow: inset 0 0 0 1px rgba(27,31,29,0.06); }
.cat-ph__bottle::before { content: ''; position: absolute; top: -13%; width: 34%; height: 14%;
                          border-radius: 4px 4px 2px 2px; background: rgba(27,31,29,0.18); }
.cat-ph__mono { font-family: var(--serif); font-size: 0.92rem; letter-spacing: 0.1em; color: rgba(27,31,29,0.34); }
.cat-ph__brand { font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(27,31,29,0.4); }

/* tag */
.cat-card__tag { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 3; padding: 0.34rem 0.6rem;
                 background: var(--ink); color: var(--paper); font-size: 0.58rem; letter-spacing: 0.16em;
                 text-transform: uppercase; font-weight: 500; white-space: nowrap; }
.cat-card__tag--mint { background: var(--mint); color: var(--ink); }
.cat-card__tag--sand { background: var(--sand); color: var(--ink); }

/* favorite */
.cat-card__fav { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; width: 34px; height: 34px;
                 border-radius: 50%; background: rgba(247,247,246,0.86); backdrop-filter: blur(4px);
                 display: flex; align-items: center; justify-content: center; transition: all 0.16s ease;
                 color: var(--ink); }
.cat-card__fav svg { width: 17px; height: 17px; transition: all 0.16s ease; }
.cat-card__fav:hover { background: var(--paper); transform: scale(1.06); }
.cat-card__fav.is-on { color: #C0654E; }
.cat-card__fav.is-on svg { fill: #C0654E; }

/* quick add bar */
.cat-card__add { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; transform: translateY(101%);
                 transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); background: var(--paper);
                 border-top: 1px solid var(--ink); padding: 0.95rem; font-size: 0.72rem; letter-spacing: 0.16em;
                 text-transform: uppercase; font-weight: 500; text-align: center; display: flex; align-items: center;
                 justify-content: center; gap: 0.5rem; }
.cat-card__add svg { width: 15px; height: 15px; }
.cat-card:hover .cat-card__add { transform: translateY(0); }
.cat-card__add:hover { background: var(--ink); color: var(--paper); }

/* body */
.cat-card__body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.28rem;
                  padding: 1.1rem 0.4rem 0; }
.cat-card__brand { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-40); }
.cat-card__name { font-family: var(--serif); font-size: 1.28rem; font-weight: 400; margin: 0; line-height: 1.15; }
.cat-card__sub { font-size: 0.8rem; color: var(--ink-60); margin: 0; line-height: 1.4; }
.cat-card__price { font-size: 0.88rem; margin-top: 0.35rem; letter-spacing: 0.01em; }
.cat-card__price .from { font-size: 0.68rem; color: var(--ink-60); letter-spacing: 0.04em; }

/* color swatches */
.cat-card__colors { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.55rem; }
.cat-sw { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(27,31,29,0.18);
          cursor: pointer; transition: transform 0.14s ease; position: relative; }
.cat-sw:hover { transform: scale(1.18); }
.cat-sw.is-active { box-shadow: inset 0 0 0 1px rgba(27,31,29,0.18), 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
.cat-card__colors-more { font-size: 0.68rem; color: var(--ink-60); margin-left: 0.1rem; }

/* empty state */
.cat-empty { grid-column: 1 / -1; text-align: center; padding: 4rem 1rem; color: var(--ink-60); }
.cat-empty h4 { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; color: var(--ink); margin: 0 0 0.5rem; }

/* footer of grid */
.cat-more { text-align: center; padding: 0 2.2rem 4rem; color: var(--ink-40); font-size: 0.78rem;
            letter-spacing: 0.16em; text-transform: uppercase; }
.cat-more__rule { max-width: 90px; margin: 0 auto 1.4rem; border: 0; border-top: 1px solid var(--line-strong); }

/* ───────── Login modal (favorites) ───────── */
.cat-modal { position: absolute; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
             padding: 2rem; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.cat-modal.is-open { opacity: 1; pointer-events: auto; }
.cat-modal__scrim { position: absolute; inset: 0; background: rgba(27,31,29,0.42); backdrop-filter: blur(2px); }
.cat-modal__card { position: relative; width: 100%; max-width: 420px; background: var(--paper); padding: 2.8rem 2.6rem;
                   text-align: center; box-shadow: 0 30px 80px rgba(27,31,29,0.28);
                   transform: translateY(10px); transition: transform 0.22s ease; }
.cat-modal.is-open .cat-modal__card { transform: translateY(0); }
.cat-modal__close { position: absolute; top: 1rem; right: 1rem; width: 30px; height: 30px; display: flex;
                    align-items: center; justify-content: center; color: var(--ink-60); }
.cat-modal__close:hover { color: var(--ink); }
.cat-modal__ic { width: 46px; height: 46px; border-radius: 50%; background: var(--mint-tint); color: #C0654E;
                 display: flex; align-items: center; justify-content: center; margin: 0 auto 1.2rem; }
.cat-modal__ic svg { width: 22px; height: 22px; fill: currentColor; }
.cat-modal__t { font-family: var(--serif); font-size: 1.8rem; font-weight: 400; margin: 0 0 0.5rem; }
.cat-modal__p { font-size: 0.88rem; color: var(--ink-60); line-height: 1.55; margin: 0 0 1.6rem; }
.cat-modal__field { display: flex; align-items: center; border: 1px solid var(--line-strong); margin-bottom: 0.8rem; }
.cat-modal__field input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 0.88rem;
                          padding: 0.85rem 1rem; outline: none; color: var(--ink); }
.cat-modal__alt { font-size: 0.78rem; color: var(--ink-60); margin: 1.1rem 0 0; }
.cat-modal__alt a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); cursor: pointer; }

/* ───────── Responsive (container queries — track the artboard width, not the viewer's window) ───────── */
@container (max-width: 1024px) {
  .cat-hero__inner { padding: 2.4rem 1.2rem 2rem; }
  .cat-hero__title { font-size: 2.6rem; }
  .cat-controls__bar { padding: 1rem 1.2rem; }
  .cat-mega__cols { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); padding: 1.4rem 1.2rem 3rem; }
  .cat-layout { grid-template-columns: 220px 1fr; gap: 1.6rem; padding: 1.4rem 1.2rem 0; }
  .cat-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .cat-subnav { padding: 1rem 1.2rem; }
}
@container (max-width: 720px) {
  .cat-hero__inner { grid-template-columns: 1fr; align-items: start; }
  .cat-hero__aside { align-items: flex-start; text-align: left; }
  .cat-hero__title { font-size: 2.1rem; }
  .cat-mega__cols { grid-template-columns: 1fr 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; padding: 1.2rem 1rem 2.6rem; }
  .cat-layout { grid-template-columns: 1fr; }
  .cat-aside { position: static; }
  .cat-grid--3 { grid-template-columns: 1fr 1fr; }
  .cat-card__name { font-size: 1.05rem; }

  /* controls stack: filter button full-width, count + sort on their own row */
  .cat-controls__bar { flex-wrap: wrap; gap: 0.9rem 0.8rem; padding: 1rem; }
  .cat-controls__left { width: 100%; gap: 0.6rem; }
  .cat-fbtn { flex: 1 1 auto; justify-content: center; }
  .cat-controls__right { width: 100%; justify-content: space-between; gap: 0.8rem; }
  .cat-sort__menu { right: 0; left: auto; }
  /* subnav becomes a horizontal scroller */
  .cat-subnav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
                scrollbar-width: none; }
  .cat-subnav::-webkit-scrollbar { display: none; }
  /* keep quick-add pinned to the bottom of the image, always visible (no hover on touch) */
  .cat-card__add { transform: translateY(0); }
  /* roomier tap targets */
  .cat-card__fav { width: 38px; height: 38px; }
}
@container (max-width: 440px) {
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 1.3rem 0.8rem; }
  .cat-card__name { font-size: 1rem; }
  .cat-card__sub { font-size: 0.74rem; }
  .cat-sort__btn { font-size: 0.68rem; }
  .cat-sort__lbl { display: none; }
  .cat-card__add { font-size: 0.64rem; letter-spacing: 0.1em; padding: 0.85rem 0.4rem; white-space: nowrap; }
  .cat-mega__cols { grid-template-columns: 1fr; gap: 0; }
  .cat-mega__inner { padding: 1.4rem 1rem 1.2rem; }
  .cat-facet__h { margin-bottom: 0.7rem; }
}

/* ════════ Ajustes del port WooCommerce ════════ */

/* Propiedades estructurales de .cat-page (de la línea original de catalog.css):
   container-type habilita las @container queries; position contiene el overlay
   del mega-filtro y el modal; min-height evita huecos en grillas cortas. */
.cat-page { position: relative; min-height: 60vh; background: var(--paper); container-type: inline-size; }

/* Las .cat-opt ahora son <label> con un <input type=checkbox hidden> real
   (filtro = formulario GET nativo, funciona sin JS). Replicamos el estado
   visual is-on a partir del checkbox marcado además de la clase .is-on JS. */
.cat-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.cat-opt:has(input:checked) .cat-opt__box { background: var(--ink); border-color: var(--ink); }
.cat-opt:has(input:checked) .cat-opt__box svg { opacity: 1; }

/* La tarjeta entera es enlazable: el <a> de media no debe tapar fav/add/swatches. */
.cat-card__media > a.cat-card__link { position: absolute; inset: 0; z-index: 1; }
.cat-card__name a, .cat-card__brand a { color: inherit; }

/* "Añadir al carrito" como enlace/booton de Woo manteniendo el diseño. */
.cat-card__add.added, .cat-card__add.loading { pointer-events: none; }
.cat-card__add.loading { opacity: 0.7; }

/* El loader AJAX de Woo y el "ver carrito" por defecto se ocultan en la tarjeta. */
.cat-card .added_to_cart { display: none !important; }

/* Neutralizar el contenedor del tema SOLO en el listado, para permitir el
   full-bleed del hero/controles. Samatex envuelve el loop en .product-layout
   (desde woocommerce.php) dentro del .container global del tema. Ajusta el
   selector si tu build usa otra clase (inspecciona con Chrome). */
body.post-type-archive-product .product-layout,
body.tax-product_cat .product-layout,
body.tax-product_tag .product-layout,
body.tax-product_brand .product-layout,
body.post-type-archive-product #content .container,
body.tax-product_cat #content .container,
body.post-type-archive-product .site-content .container,
body.tax-product_cat .site-content .container {
  max-width: none; width: 100%; padding-left: 0; padding-right: 0; padding-bottom: 0;
}
/* La .cat-page ignora cualquier padding/sidebar heredado del .product-layout. */
.product-layout > .cat-page { margin: 0; }

/* ════════ Correcciones sobre el tema Samatex ════════ */

/* (1) El tema pinta un fondo (café/arena) en sus <button> y selects. Forzamos
   que los controles del catálogo respeten el diseño: sin relleno, solo borde. */
.cat-page .cat-fbtn,
.cat-page .cat-sort__btn,
.cat-page .cat-subnav__chip {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0;
  box-shadow: none !important;
}
.cat-page .cat-fbtn.is-open { background: var(--ink) !important; color: var(--paper) !important; }
.cat-page .cat-subnav__chip.is-active { background: var(--ink) !important; color: var(--paper) !important; }
.cat-page .cat-subnav__chip { border-radius: 999px; }
/* hover: el tema deja el texto blanco (ilegible). Mantener tinta sobre fondo claro. */
.cat-page .cat-fbtn:hover,
.cat-page .cat-sort__btn:hover,
.cat-page .cat-subnav__chip:hover {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
}
.cat-page .cat-fbtn.is-open:hover { background: var(--ink) !important; color: var(--paper) !important; }
.cat-page .cat-subnav__chip.is-active:hover { background: var(--ink) !important; color: var(--paper) !important; }
/* Subnav en una sola fila con scroll horizontal en TODOS los tamaños (como en móvil):
   no envuelve; las categorías se desplazan lateralmente. */
.cat-page .cat-subnav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cat-page .cat-subnav::-webkit-scrollbar { display: none; }
.cat-page .cat-subnav__chip { flex: 0 0 auto; white-space: nowrap; }
/* el menú desplegable de orden sí lleva su fondo claro */
.cat-page .cat-sort__menu { background: var(--paper) !important; }
.cat-page .cat-sort__opt:hover { background: var(--paper-2) !important; }

/* (2) Imágenes desencajadas: el tema fuerza width/height auto y lazy-load.
   Forzamos que la foto llene la caja 4/5 con recorte cover, sin desbordes. */
.cat-page .cat-card__media { background: var(--paper-2); }
.cat-page .cat-card__layer { position: absolute; inset: 0; display: block; }
.cat-page .cat-card__media img,
.cat-page .cat-card__layer img {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover !important; object-position: center;
  margin: 0 !important; padding: 0 !important;
}
/* Samatex añade clases lazy en .product-layout; evita placeholders mal escalados. */
.cat-page .cat-card__media img.lazyload,
.cat-page .cat-card__media img.lazyloaded { opacity: 1 !important; }

/* (3) Panel de filtros: Precio va arriba en fila horizontal a todo el ancho;
   las otras 5 facetas (Categoría, Marca, Tipo de cabello, Necesidad, Textura)
   en columnas. auto-fit evita huecos si alguna faceta no tiene productos. */
.cat-page .cat-mega__cols { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.cat-page .cat-facet--price { width: 100%; margin-bottom: 1.8rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.cat-page .cat-facet__list--row { flex-direction: row; flex-wrap: wrap; gap: 0.9rem 2.2rem; }
.cat-page .cat-facet__list--row .cat-opt { width: auto; flex: 0 0 auto; }
/* En móvil el precio sigue a lo ancho (fila con salto), no en columna. */
@container (max-width: 720px) {
  .cat-page .cat-facet--price { margin-bottom: 1.4rem; padding-bottom: 1.2rem; }
  .cat-page .cat-facet__list--row { flex-direction: row !important; flex-wrap: wrap; gap: 0.7rem 1.3rem; }
}

/* (4) Ajustes finos solicitados */
button.cat-sort__btn { display: flex; align-items: center; }
button#amCatFilterBtn { display: flex; align-items: center; }
body.post-type-archive-product .product-layout { padding: 0; }

/* (5) La tarjeta lleva ahora las clases estándar de WooCommerce (.product, tipo,
   etc.) para que VillaTheme vincule el swatch con el botón de carrito. Neutralizamos
   estilos heredados de .product que romperían el grid. */
.cat-page .cat-grid .product { margin: 0; padding: 0; width: auto; float: none; list-style: none; }

/* (6) Botón "Añadir al carrito": siempre visible, debajo de la tarjeta (no hover).
   Lleva clases estándar (button/add_to_cart_button) para VillaTheme/Woo; forzamos
   el diseño para que el estilo .button del tema no lo descoloque. */
.cat-page .cat-card__add {
  position: static !important;
  transform: none !important;
  display: flex !important; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100% !important; max-width: none !important; align-self: stretch;
  margin: 1.1rem 0 0 !important;
  border: 1px solid var(--ink) !important; border-top: 1px solid var(--ink) !important; border-radius: 0 !important;
  background: var(--paper) !important; color: var(--ink) !important;
  padding: 0.9rem 1rem !important; min-height: 0 !important; line-height: 1 !important;
  font-size: 0.72rem !important; font-weight: 500 !important; letter-spacing: 0.16em !important;
  text-transform: uppercase !important; box-shadow: none !important;
}
.cat-page .cat-card__add svg { width: 15px; height: 15px; }
.cat-page .cat-card__add:hover { background: var(--ink) !important; color: var(--paper) !important; }
/* al estar el botón en el cuerpo, anulamos el viejo slide-up sobre la imagen */
.cat-page .cat-card:hover .cat-card__add { transform: none !important; }

/* Bloque de variaciones de VillaTheme (clases reales del plugin). */
.cat-page .cat-card__variations { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 100%; margin-top: 0.6rem; }
.cat-page .cat-card__variations .vi_wpvs_loop_variation_form { width: 100%; display: flex; justify-content: center; margin: 0; }
.cat-page .cat-card__variations table.variations,
.cat-page .cat-card__variations table.variations tbody,
.cat-page .cat-card__variations table.variations tr,
.cat-page .cat-card__variations table.variations td { display: table !important; margin: 0 auto !important; }
.cat-page .cat-card__variations .vi-wpvs-variation-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.cat-page .cat-card__variations .vi-wpvs-select-attribute { display: none !important; } /* el <select> oculto; se ven los swatches */
/* Ocultar el enlace estándar "Seleccionar opciones" de las variables: VillaTheme lo
   reemplaza por su botón AJAX (vi_wpvs_loop_atc_button). Mantener oculto lo que el
   plugin oculta. Antes el estilo de abajo lo "des-ocultaba" y salía un 2º botón. */
.cat-page .cat-card__variations .vi_wpvs_loop_variation_hidden,
.cat-page .cat-card__variations a.add_to_cart_button.product_type_variable { display: none !important; }
/* botón de carrito VISIBLE (clon AJAX de VillaTheme en variables, o el estándar en
   simples) con el look del diseño */
.cat-page .cat-card__cart { width: 100%; }
.cat-page .cat-card__variations .vi_wpvs_loop_atc_button,
.cat-page .cat-card__cart .add_to_cart_button,
.cat-page .cat-card__cart .button,
.cat-page a.cat-card__add {
  width: 100% !important; max-width: none !important; margin: 0.7rem 0 0 !important;
  display: flex !important; align-items: center; justify-content: center; gap: 0.5rem;
  border: 1px solid var(--ink) !important; border-radius: 0 !important;
  background: var(--paper) !important; color: var(--ink) !important;
  padding: 0.9rem 1rem !important; min-height: 0 !important; line-height: 1 !important;
  font-size: 0.72rem !important; font-weight: 500 !important; letter-spacing: 0.16em !important;
  text-transform: uppercase !important; box-shadow: none !important; float: none !important;
}
.cat-page .cat-card__cart .add_to_cart_button { margin-top: 0 !important; }
.cat-page .cat-card__variations .vi_wpvs_loop_atc_button:hover,
.cat-page .cat-card__cart .add_to_cart_button:hover,
.cat-page a.cat-card__add:hover { background: var(--ink) !important; color: var(--paper) !important; }
.cat-page a.cat-card__add svg { width: 15px; height: 15px; }
.cat-page .cat-card__variations .added_to_cart,
.cat-page .cat-card__cart .added_to_cart { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: underline; margin-top: 0.3rem; display: inline-block; }

/* (7) La grilla ahora es <ul class="products"> + <li class="product"> (estructura
   estándar del loop) para que el JS de VillaTheme y el AJAX del tema inicialicen
   cada item. Neutralizamos los estilos de lista/float que trae WooCommerce. */
.cat-page ul.cat-grid.products { list-style: none !important; display: grid; max-width: var(--maxw) !important; margin: 0 auto !important; padding: 1.8rem 2.2rem 4rem !important; }
.cat-page ul.cat-grid.products::before,
.cat-page ul.cat-grid.products::after { content: none !important; display: none !important; }
.cat-page .cat-grid li.product.cat-card { display: flex !important; flex-direction: column !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; list-style: none !important; clear: none !important; }
.cat-page .cat-grid li.product.cat-card::before { content: none !important; }

/* (8) Móvil: el mega-filtro no debe quedar en 2 columnas pegadas (los contadores
   chocaban con la columna vecina), y el grid llevaba demasiado padding lateral.
   ≤768px: 2 columnas con gap cómodo. ≤520px (teléfonos): 1 columna. */
@container (max-width: 768px) {
  .cat-page .cat-mega__cols { grid-template-columns: 1fr 1fr !important; gap: 1.2rem 2rem !important; }
  .cat-page ul.cat-grid.products { padding-left: 1.2rem !important; padding-right: 1.2rem !important; }
}
@container (max-width: 520px) {
  .cat-page .cat-mega__cols { grid-template-columns: 1fr !important; gap: 1.1rem 0 !important; }
  .cat-page ul.cat-grid.products { padding-left: 1rem !important; padding-right: 1rem !important; }
}
/* el cuerpo crece y el bloque de carrito/variaciones se fija abajo → botones alineados en fila */
.cat-page .cat-card__body { flex: 1 1 auto; }
.cat-page .cat-card__variations,
.cat-page .cat-card__cart { margin-top: auto; }
/* Loader AJAX del tema: oculto salvo cuando el tema lo activa durante el add. */
.cat-page .cat-card .ajax-add-to-cart-loading { position: absolute; top: 10px; right: 10px; z-index: 4; pointer-events: none; }

/* ---- Favoritos en la tarjeta ---------------------------------------- */
.cat-page .cat-card__media { position: relative; }

.cat-page .cat-card__fav { position: absolute; top: 10px; right: 10px; z-index: 3; }

.cat-page .cat-card__fav .am-wl-toggle {
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--hairline, rgba(0,0,0,.12));
  border-radius: 50%;
  background: #fff !important;   /* Samatex fuerza el fondo melón en <button> */
  color: var(--ink, #1a1a1a);
  line-height: 0; cursor: pointer; box-shadow: none;
  -webkit-appearance: none; appearance: none;
  transition: transform .18s ease, border-color .18s ease;
}
.cat-page .cat-card__fav .am-wl-toggle:hover { transform: scale(1.06); }
.cat-page .cat-card__fav .am-wl-toggle:focus-visible {
  outline: 2px solid var(--ink, #1a1a1a); outline-offset: 2px;
}

.cat-page .cat-card__fav .am-wl-heart svg { display: block; width: 18px; height: 18px; }
.cat-page .cat-card__fav .am-wl-toggle svg path {
  fill: none; stroke: currentColor; stroke-width: 1.6;
}
.cat-page .cat-card__fav .am-wl-toggle.is-saved svg path { fill: currentColor; }
.cat-page .cat-card__fav .am-wl-label { display: none; }