.wapu-archive__category-desc--top{padding:var(--wtds-s-4) var(--wtds-s-5) var(--wtds-s-2);border-bottom:var(--wtds-border-thin) solid var(--wtds-separator-soft);max-width:100%}.wapu-archive__category-desc-eyebrow{font-family:var(--wtds-font-display);font-size:var(--wtds-fs-caption-2);font-weight:var(--wtds-fw-semibold);letter-spacing:var(--wtds-ls-wide);text-transform:uppercase;color:var(--wtds-ink-3);margin:0 0 var(--wtds-s-1)}.wapu-archive__category-desc--top p{font-family:var(--wtds-font-text);font-size:var(--wtds-fs-body);line-height:var(--wtds-lh-relaxed);color:var(--wtds-ink-2);margin:0 0 var(--wtds-s-1);max-width:42.5rem}.wapu-archive__category-desc--top p:last-child{margin-bottom:0}.wapu-archive__category-desc--top strong{color:var(--wtds-ink);font-weight:var(--wtds-fw-semibold)}.wapu-archive__sort-btn--plain{display:inline-flex;align-items:center;gap:var(--wtds-s-1);padding:0 var(--wtds-s-2);min-height:2rem;background:transparent;border:0;border-radius:var(--wtds-r-pill);font-family:var(--wtds-font-text);font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-medium);color:var(--wtds-ink);cursor:pointer;transition:background-color var(--wtds-dur-fast) var(--wtds-ease)}.wapu-archive__sort-btn--plain:hover{background:var(--wtds-fill-4)}.wapu-archive__sort-btn--plain.is-active{background:var(--wtds-fill-3);font-weight:var(--wtds-fw-semibold)}.wapu-archive__sort-btn--plain .wapu-archive__sort-chevron{transition:transform var(--wtds-dur-fast) var(--wtds-ease)}.wapu-archive__sort-btn--plain[aria-expanded=true] .wapu-archive__sort-chevron{transform:rotate(180deg)}.wapu-archive__collections-btn{display:inline-flex;align-items:center;gap:var(--wtds-s-1);padding:0 var(--wtds-s-2);min-height:2rem;background:var(--wtds-ink);color:var(--wtds-surface);border:0;border-radius:var(--wtds-r-pill);font-family:var(--wtds-font-text);font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-medium);cursor:pointer;transition:opacity var(--wtds-dur-fast) var(--wtds-ease)}.wapu-archive__collections-btn:hover{opacity:.85}.wapu-archive__collections-btn:active{transform:scale(.98)}.wapu-archive__collections-btn[disabled]{opacity:.4;cursor:not-allowed}.wapu-archive__collections-btn .wapu-archive__collections-icon{width:1rem;height:1rem;flex-shrink:0}.wapu-archive__filter-bar{position:sticky;top:0;z-index:20;background:var(--wtds-glass);backdrop-filter:blur(.625rem);-webkit-backdrop-filter:blur(.625rem);display:flex;align-items:center;justify-content:flex-end;max-width:87.5rem;margin:0 auto var(--wtds-s-2);padding:var(--wtds-s-1) 0}.wapu-archive__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--wtds-s-8) var(--wtds-s-5);text-align:center;gap:var(--wtds-s-2);min-height:20rem}.wapu-archive__empty-icon{width:3.5rem;height:3.5rem;border-radius:var(--wtds-r-pill);background:var(--wtds-fill-3);display:flex;align-items:center;justify-content:center;color:var(--wtds-ink-3);margin-bottom:var(--wtds-s-1)}.wapu-archive__empty-icon svg{width:1.5rem;height:1.5rem}.wapu-archive__empty-title{font-family:var(--wtds-font-display);font-size:var(--wtds-fs-title-3);font-weight:var(--wtds-fw-regular);font-style:normal;color:var(--wtds-ink);margin:0;line-height:var(--wtds-lh-snug)}.wapu-archive__empty-message{font-family:var(--wtds-font-text);font-size:var(--wtds-fs-footnote);color:var(--wtds-ink-3);margin:0;max-width:25rem;line-height:var(--wtds-lh-relaxed)}.wapu-archive__empty-cta{margin-top:var(--wtds-s-1);display:inline-flex;align-items:center;justify-content:center;padding:0 var(--wtds-s-3);min-height:2.5rem;background:var(--wtds-ink);color:var(--wtds-surface);border:0;border-radius:var(--wtds-r-pill);font-family:var(--wtds-font-text);font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-medium);text-decoration:none;cursor:pointer;transition:opacity var(--wtds-dur-fast) var(--wtds-ease)}.wapu-archive__empty-cta:hover{opacity:.85}.wapu-archive__empty-cta:active{transform:scale(.98)}.wapu-archive__filters-sheet{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;visibility:hidden;opacity:0;transition:opacity var(--wtds-dur) var(--wtds-ease),visibility var(--wtds-dur) var(--wtds-ease);pointer-events:none}.wapu-archive__filters-sheet.is-open{visibility:visible;opacity:1;pointer-events:auto}.wapu-archive__filters-sheet-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--wtds-scrim-strong);backdrop-filter:blur(.25rem);-webkit-backdrop-filter:blur(.25rem);border:0;cursor:pointer;padding:0}.wapu-archive__filters-sheet-dialog{position:absolute;bottom:0;left:0;right:0;max-height:85vh;max-height:85svh;background:var(--wtds-surface);border-radius:var(--wtds-r-xl) var(--wtds-r-xl) 0 0;display:flex;flex-direction:column;transform:translateY(100%);transition:transform var(--wtds-dur) var(--wtds-ease);overflow:hidden}.wapu-archive__filters-sheet.is-open .wapu-archive__filters-sheet-dialog{transform:translateY(0)}.wapu-archive__filters-sheet-handle{width:2.25rem;height:.25rem;background:var(--wtds-fill-2);border-radius:var(--wtds-r-pill);margin:var(--wtds-s-1) auto var(--wtds-s-half);flex-shrink:0}.wapu-archive__filters-sheet-header{display:flex;align-items:center;justify-content:space-between;padding:var(--wtds-s-1) var(--wtds-s-2) var(--wtds-s-2);border-bottom:var(--wtds-border-thin) solid var(--wtds-separator-soft);flex-shrink:0}.wapu-archive__filters-sheet-title{font-family:var(--wtds-font-text);font-size:var(--wtds-fs-callout);font-weight:var(--wtds-fw-semibold);color:var(--wtds-ink);margin:0}.wapu-archive__filters-sheet-close{background:transparent;border:0;font-family:var(--wtds-font-text);font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-medium);color:var(--wtds-ink-3);cursor:pointer;padding:var(--wtds-s-half) var(--wtds-s-1);border-radius:var(--wtds-r-sm);transition:color var(--wtds-dur-fast) var(--wtds-ease)}.wapu-archive__filters-sheet-close:hover{color:var(--wtds-ink)}.wapu-archive__filters-sheet-body{padding:var(--wtds-s-1) var(--wtds-s-2) 0;overflow-y:auto;flex:1;overscroll-behavior:contain}.wapu-archive__filters-sheet-section{padding:var(--wtds-s-2) 0;border-bottom:var(--wtds-border-thin) solid var(--wtds-separator-soft)}.wapu-archive__filters-sheet-section:last-child{border-bottom:0}.wapu-archive__filters-sheet-section-head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--wtds-s-1) 0;margin:0;background:transparent;border:0;cursor:pointer;font-family:inherit;text-align:left;transition:opacity var(--wtds-dur-fast) var(--wtds-ease)}.wapu-archive__filters-sheet-section-head:hover{opacity:.75}.wapu-archive__filters-sheet-section-title{font-family:var(--wtds-font-text);font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-semibold);color:var(--wtds-ink);margin:0}.wapu-archive__filters-sheet-section-meta{display:inline-flex;align-items:center;gap:var(--wtds-s-1)}.wapu-archive__filters-sheet-section-count{font-family:var(--wtds-font-text);font-size:var(--wtds-fs-caption-2);color:var(--wtds-ink-3)}.wapu-archive__filters-sheet-section-active{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 var(--wtds-s-half);background:var(--wtds-ink);color:var(--wtds-surface);border-radius:var(--wtds-r-pill);font-size:var(--wtds-fs-caption-2);font-weight:var(--wtds-fw-semibold)}.wapu-archive__filters-sheet-section-chevron{color:var(--wtds-ink-3);transition:transform var(--wtds-dur-fast) var(--wtds-ease);flex-shrink:0}.wapu-archive__filters-sheet-section.is-expanded .wapu-archive__filters-sheet-section-chevron{transform:rotate(180deg)}.wapu-archive__filters-sheet-section:not(.is-expanded) .wapu-archive__filters-sheet-options{display:none}.wapu-archive__filters-sheet-section.is-expanded .wapu-archive__filters-sheet-options{margin-top:var(--wtds-s-1)}.wapu-archive__filters-sheet-options{display:flex;flex-wrap:wrap;gap:var(--wtds-s-1)}.wapu-archive__filters-sheet-opt{display:inline-flex;align-items:center;gap:var(--wtds-s-half);padding:0 var(--wtds-s-1);min-height:2rem;background:var(--wtds-fill-4);color:var(--wtds-ink);border:0;border-radius:var(--wtds-r-pill);font-family:var(--wtds-font-text);font-size:var(--wtds-fs-caption-1);font-weight:var(--wtds-fw-medium);cursor:pointer;transition:background-color var(--wtds-dur-fast) var(--wtds-ease),color var(--wtds-dur-fast) var(--wtds-ease)}.wapu-archive__filters-sheet-opt:hover{background:var(--wtds-fill-3)}.wapu-archive__filters-sheet-opt.is-selected{background:var(--wtds-ink);color:var(--wtds-surface)}.wapu-archive__filters-sheet-opt.is-selected:hover{opacity:.85}.wapu-archive__filters-sheet-opt svg{flex-shrink:0}.wapu-archive__filters-sheet-opt-label{white-space:nowrap}.wapu-archive__filters-sheet-opt-count{font-size:var(--wtds-fs-caption-2);opacity:.55}.wapu-archive__filters-sheet-opt.is-selected .wapu-archive__filters-sheet-opt-count{opacity:.7}.wapu-archive__filters-sheet-footer{display:flex;gap:var(--wtds-s-1);padding:var(--wtds-s-2);padding-bottom:calc(var(--wtds-s-2) + env(safe-area-inset-bottom,0px));border-top:var(--wtds-border-thin) solid var(--wtds-separator-soft);background:var(--wtds-surface);flex-shrink:0}.wapu-archive__filters-sheet-reset{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--wtds-s-3);min-height:2.75rem;background:transparent;border:var(--wtds-border-thin) solid var(--wtds-separator);border-radius:var(--wtds-r-pill);font-family:var(--wtds-font-text);font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-medium);color:var(--wtds-ink);text-decoration:none;cursor:pointer;flex-shrink:0;transition:background-color var(--wtds-dur-fast) var(--wtds-ease)}.wapu-archive__filters-sheet-reset:hover{background:var(--wtds-fill-4)}.wapu-archive__filters-sheet-apply{flex:1;min-height:2.75rem;background:var(--wtds-ink);color:var(--wtds-surface);border:0;border-radius:var(--wtds-r-pill);font-family:var(--wtds-font-text);font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-semibold);cursor:pointer;transition:opacity var(--wtds-dur-fast) var(--wtds-ease)}.wapu-archive__filters-sheet-apply:hover{opacity:.88}.wapu-archive__filters-sheet-apply:active{transform:scale(.99)}.wapu-archive__filters-sheet-apply.is-loading{opacity:.6;cursor:wait}@media (min-width: 56.25rem){.wapu-archive__filters-sheet-dialog{top:0;bottom:0;left:auto;right:0;width:min(30rem,100%);max-height:100vh;max-height:100svh;border-radius:var(--wtds-r-xl) 0 0 var(--wtds-r-xl);transform:translate(100%)}.wapu-archive__filters-sheet.is-open .wapu-archive__filters-sheet-dialog{transform:translate(0)}.wapu-archive__filters-sheet-handle{display:none}.wapu-archive__filters-sheet-header{padding:var(--wtds-s-3) var(--wtds-s-3) var(--wtds-s-2)}.wapu-archive__filters-sheet-body{padding:var(--wtds-s-1) var(--wtds-s-3) 0}.wapu-archive__filters-sheet-footer{padding:var(--wtds-s-2) var(--wtds-s-3)}}body.wapu-filters-sheet-open{overflow:hidden}.wapu-archive__mobile-nav{display:none}.wapu-archive{background:var(--wtds-surface);min-height:100vh;padding:var(--wtds-s-5) var(--wtds-s-5) var(--wtds-s-6);box-sizing:border-box}.wapu-archive__toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:1.125rem;max-width:87.5rem;margin:0 auto 1.5rem;padding-bottom:1.25rem;border-bottom:.5px solid var(--wtds-outline-soft)}.wapu-archive__toolbar-left{min-width:0;display:flex;flex-direction:column;gap:.5rem}.wapu-archive__eyebrow{font-family:var(--wtds-font-text);font-size:var(--wtds-fs-caption-2);letter-spacing:.3em;text-transform:uppercase;color:var(--wtds-ink-4);font-weight:var(--wtds-fw-medium);line-height:1}.wapu-archive__title{margin:0;font-family:var(--wtds-font-display);font-size:var(--wtds-fs-hero-display);font-weight:var(--wtds-fw-regular);font-style:normal;line-height:1;letter-spacing:-.025em;color:var(--wtds-ink)}.wapu-archive__section-title{margin:0;font-family:var(--wtds-font-display);font-size:clamp(1.625rem,2.5vw,2.25rem);font-weight:var(--wtds-fw-bold);line-height:1.05;letter-spacing:var(--wtds-ls-tight);color:var(--wtds-ink)}.wapu-archive__section-count{margin:.375rem 0 0;font-family:var(--wtds-font-text);font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-medium);color:var(--wtds-ink-3);letter-spacing:0}.wapu-archive__toolbar-right{display:flex;align-items:center;gap:.625rem;width:auto;margin-left:auto;padding-bottom:.25rem}.wapu-archive__count{font-family:var(--wtds-font-text);font-size:var(--wtds-fs-caption-1);color:var(--wtds-ink-3);font-variant-numeric:tabular-nums;letter-spacing:0}.wapu-archive__category-desc{max-width:87.5rem;margin:0 auto var(--wtds-s-3);padding:var(--wtds-s-2) var(--wtds-s-3);background:var(--wtds-surface-2);border-radius:var(--wtds-r-md);font-family:var(--wtds-font-text);font-size:var(--wtds-fs-subhead);line-height:1.65;color:var(--wtds-ink-3)}.wapu-archive__category-desc p{margin:0 0 .75em}.wapu-archive__category-desc p:last-child{margin-bottom:0}.wapu-archive__sort-btn{min-width:9.625rem;justify-content:space-between}.wapu-archive__sort-btn svg{flex-shrink:0;width:.875rem;height:.875rem;color:currentColor}.wapu-archive__collections-btn{min-width:10.75rem}.wapu-archive__collections-icon{flex-shrink:0;width:1rem;height:1rem}.wapu-archive__collections-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--wtds-z-modal);display:none;align-items:center;justify-content:center;padding:1.5rem}.wapu-archive__collections-modal.is-open{display:flex}.wapu-archive__collections-overlay{position:absolute;top:0;right:0;bottom:0;left:0;border:0;margin:0;padding:0;background:var(--wtds-scrim-strong);-webkit-backdrop-filter:var(--wtds-blur-sm);backdrop-filter:var(--wtds-blur-sm)}.wapu-archive__collections-dialog{position:relative;z-index:1;width:min(57.6875rem,calc(100% - 3rem));background:var(--wtds-surface);border-radius:var(--wtds-r-lg);box-shadow:var(--wtds-shadow-lg);padding:var(--wtds-s-3)}.wapu-archive__collections-head{display:flex;flex-direction:column;gap:var(--wtds-s-1);padding:var(--wtds-s-1) 3rem var(--wtds-s-1) var(--wtds-s-1);margin-bottom:var(--wtds-s-1)}.wapu-archive__collections-close{position:absolute;top:var(--wtds-s-2);right:var(--wtds-s-2);width:2.25rem;min-height:2.25rem;box-shadow:inset 0 0 0 var(--wtds-border-thin) var(--wtds-separator-soft);background:var(--wtds-surface);color:var(--wtds-ink);z-index:2}.wapu-archive__collections-close:hover:not(:disabled):not(.wapu-btn--loading){background:var(--wtds-surface-2);box-shadow:inset 0 0 0 var(--wtds-border-thin) var(--wtds-separator);transform:scale(1.03)}.wapu-archive__collections-close:active{transform:scale(.97)}.wapu-archive__collections-title{margin:0;font-family:var(--wtds-font-display);font-size:var(--wtds-fs-title-3);font-weight:var(--wtds-fw-bold);line-height:1.35;color:var(--wtds-ink)}.wapu-archive__collections-subtitle{margin:0;font-family:var(--wtds-font-display);font-size:var(--wtds-fs-callout);font-weight:var(--wtds-fw-semibold);line-height:1.4;color:var(--wtds-ink)}.wapu-archive__collections-grid{display:grid;grid-template-columns:1fr;gap:var(--wtds-s-1)}.wapu-archive__collection-card{display:flex;align-items:center;gap:var(--wtds-s-2);padding:var(--wtds-s-1) var(--wtds-s-2);text-decoration:none;color:inherit;position:relative;transition:background var(--wtds-dur-fast) var(--wtds-ease)}.wapu-archive__collection-card:hover{background:var(--wtds-fill-4)}.wapu-archive__collection-card:after{content:"";flex-shrink:0;width:.5rem;height:.5rem;border-top:.09375rem solid var(--wtds-ink-3);border-right:.09375rem solid var(--wtds-ink-3);transform:rotate(45deg);margin-left:auto;transition:border-color var(--wtds-dur-fast) var(--wtds-ease)}.wapu-archive__collection-card:hover:after{border-color:var(--wtds-ink)}.wapu-archive__collection-card[hidden],.wapu-archive__collection-card.is-filtered-out{display:none}.wapu-archive__collection-thumb{width:3.5rem;height:3.5rem;border-radius:var(--wtds-r-sm);overflow:hidden;flex-shrink:0;background:var(--wtds-fill-3)}.wapu-archive__collection-thumb img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.wapu-archive__collection-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:.125rem}.wapu-archive__collection-name{display:block;font-family:var(--wtds-font-text);font-size:var(--wtds-fs-subhead);font-weight:var(--wtds-fw-semibold);line-height:1.3;color:var(--wtds-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wapu-archive__collection-count{display:block;font-family:var(--wtds-font-display);font-size:var(--wtds-fs-subhead);font-weight:var(--wtds-fw-semibold);line-height:1.35;color:var(--wtds-ink-3)}body.wapu-archive-collections-open{overflow:hidden}.wapu-archive__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;grid-auto-flow:dense;gap:var(--wtds-s-5) var(--wtds-s-2);max-width:87.5rem;margin:0 auto;align-items:start}.wapu-archive__grid>li{display:flex;flex-direction:column}.wapu-archive__hero{grid-column:1;grid-row:1;width:100%;aspect-ratio:1 / 2;max-width:none;margin-inline:0;border-radius:var(--wtds-r-xs);overflow:hidden;background:var(--wtds-surface)}.wapu-archive__hero-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;display:block}@media (min-width: 48.0625rem){.wapu-archive__hero{width:100%;margin-inline:0}}.wapu-archive .woocommerce-pagination{display:none!important}.wapu-archive__infinite-scroll{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.625rem;min-height:2.75rem;margin:2.5rem auto 0;padding-top:2rem;border-top:.5px solid var(--wtds-outline-soft);max-width:87.5rem}.wapu-archive__infinite-loader{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;font-family:var(--wtds-font-text);font-size:var(--wtds-fs-caption-1);font-weight:var(--wtds-fw-medium);color:var(--wtds-ink-3);letter-spacing:.02em}.wapu-archive__infinite-loader[hidden],.wapu-archive__infinite-manual[hidden],.wapu-archive__infinite-end[hidden]{display:none}.wapu-archive__infinite-spinner{width:.875rem;height:.875rem;border-radius:var(--wtds-r-pill);border:.09375rem solid var(--wtds-outline-soft);border-top-color:var(--wtds-ink);animation:wapu-archive-spin .9s linear infinite}.wapu-archive__infinite-manual{display:flex;flex-direction:column;align-items:center;gap:.75rem}.wapu-archive__infinite-btn{display:inline-flex;align-items:center;justify-content:center;padding:.875rem 2.25rem;background:transparent;border:.5px solid var(--wtds-outline);border-radius:var(--wtds-r-pill);font-family:var(--wtds-font-text);font-size:var(--wtds-fs-caption-1);font-weight:var(--wtds-fw-medium);letter-spacing:.12em;text-transform:uppercase;color:var(--wtds-ink);cursor:pointer;transition:background var(--wtds-dur-fast) var(--wtds-ease),color var(--wtds-dur-fast) var(--wtds-ease),border-color var(--wtds-dur-fast) var(--wtds-ease)}.wapu-archive__infinite-btn:hover{background:var(--wtds-ink);color:var(--wtds-surface);border-color:var(--wtds-ink)}.wapu-archive__infinite-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.wapu-archive__infinite-counter{margin:0;font-family:var(--wtds-font-text);font-size:var(--wtds-fs-caption-2);color:var(--wtds-ink-4);font-variant-numeric:tabular-nums;letter-spacing:.02em}.wapu-archive__infinite-end{margin:0;font-family:var(--wtds-font-display);font-style:normal;font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-regular);color:var(--wtds-ink-3);text-align:center;letter-spacing:-.005em}@keyframes wapu-archive-spin{to{transform:rotate(360deg)}}.wapu-archive .woocommerce-no-products-found{text-align:center;padding:var(--wtds-s-8) var(--wtds-s-3);font-family:var(--wtds-font-text);font-size:var(--wtds-fs-subhead);color:var(--wtds-ink-3)}@media (max-width: 75rem){.wapu-archive__grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;gap:var(--wtds-s-4) var(--wtds-s-2)}}@media (max-width: 56.25rem){.wapu-archive{padding:var(--wtds-s-3) var(--wtds-s-3) var(--wtds-s-6)}.wapu-archive__collections-dialog{width:min(47.5rem,calc(100% - 1.75rem));padding:var(--wtds-s-3)}.wapu-archive__collections-grid{gap:var(--wtds-s-1)}.wapu-archive__collection-card{padding:var(--wtds-s-1) var(--wtds-s-2);gap:var(--wtds-s-2)}.wapu-archive__collection-thumb{width:3rem;height:3rem}.wapu-archive__collection-name{font-size:var(--wtds-fs-subhead)}.wapu-archive__collection-count{font-size:var(--wtds-fs-footnote)}.wapu-archive__toolbar{margin-bottom:var(--wtds-s-2);align-items:stretch;flex-wrap:wrap;gap:var(--wtds-s-2)}.wapu-archive__section-title{font-size:clamp(1.375rem,6.5vw,2rem)}.wapu-archive__toolbar-right{width:100%;margin-left:0;padding-bottom:0}.wapu-archive__count{display:none}.wapu-archive__grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:var(--wtds-s-4) var(--wtds-s-2)}}@media (max-width: 48rem){body.woocommerce-shop .site-footer,body.tax-product_cat .site-footer,body.tax-product_brand .site-footer,body.tax-product_tag .site-footer{display:none}body.woocommerce-shop,body.tax-product_cat,body.tax-product_brand,body.tax-product_tag{background:var(--wtds-surface);-webkit-font-smoothing:antialiased}.wapu-archive{background:var(--wtds-surface);padding:var(--wtds-s-3) var(--wtds-s-2) var(--wtds-s-5);min-height:100dvh}.wapu-archive__toolbar{max-width:100%;margin:var(--wtds-s-1) 0 var(--wtds-s-2);flex-direction:column;align-items:stretch;gap:.625rem}.wapu-archive__section-title{font-size:var(--wtds-fs-title-3);letter-spacing:var(--wtds-ls-tight)}.wapu-archive__section-count{margin-top:.25rem;font-size:var(--wtds-fs-caption-1)}.wapu-archive__toolbar-right{width:100%;margin-left:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wtds-s-1)}.wapu-archive__sort-wrap{width:100%}.wapu-archive__sort-btn,.wapu-archive__collections-btn{min-height:3rem;width:100%;padding:0 var(--wtds-s-2);justify-content:center}.wapu-archive__sort-btn svg{width:1rem;height:1rem;flex-shrink:0}.wapu-archive__collections-icon{width:1.125rem;height:1.125rem}.wapu-archive__collections-modal{padding:var(--wtds-s-2)}.wapu-archive__collections-dialog{width:100%;border-radius:var(--wtds-r-md);padding:var(--wtds-s-2);max-height:min(80vh,40rem);overflow-y:auto}.wapu-archive__collections-close{top:.625rem;right:.625rem;width:2.125rem;min-height:2.125rem}.wapu-archive__collections-head{margin-bottom:.625rem;padding:.25rem 2.625rem .25rem .25rem}.wapu-archive__collections-title{font-size:var(--wtds-fs-callout)}.wapu-archive__collections-subtitle{font-size:var(--wtds-fs-subhead);font-weight:var(--wtds-fw-semibold)}.wapu-archive__collections-grid{grid-template-columns:1fr;gap:.625rem}.wapu-archive__collection-card{padding:.625rem}.wapu-archive__collection-thumb{width:4rem;height:4rem}.wapu-archive__collection-name{font-size:var(--wtds-fs-subhead);font-weight:var(--wtds-fw-semibold)}.wapu-archive__collection-count{font-size:var(--wtds-fs-footnote)}.wapu-archive__grid{padding:0;max-width:100%;gap:var(--wtds-s-4) var(--wtds-s-2);grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}.wapu-archive__infinite-scroll{margin-top:var(--wtds-s-2);min-height:2.5rem}.wapu-archive__infinite-loader,.wapu-archive__infinite-end{font-size:var(--wtds-fs-caption-1)}.wapu-archive__sort-menu{right:auto;left:0;min-width:0;width:-moz-max-content;width:max-content;max-width:calc(100vw - 1.5rem);z-index:var(--wtds-z-dropdown)}}@media (max-width: 23.75rem){.wapu-archive__grid{gap:var(--wtds-s-3) var(--wtds-s-2);grid-auto-rows:auto}}.wapu-archive__hero-video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;display:block}.wapu-archive__hero-embed{position:relative;width:100%;height:100%;overflow:hidden}.wapu-archive__hero-embed iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:none;pointer-events:none}@media (max-width: 23.75rem){.wapu-archive__collections-modal{padding:.625rem}.wapu-archive__collections-dialog{width:calc(100% - .5rem);padding:var(--wtds-s-2);border-radius:var(--wtds-r-md)}.wapu-archive__collections-grid{grid-template-columns:1fr;gap:var(--wtds-s-1)}.wapu-archive__collections-head{gap:.375rem}.wapu-archive__collections-title{font-size:var(--wtds-fs-subhead)}.wapu-archive__collections-subtitle{font-size:var(--wtds-fs-footnote)}.wapu-archive__collection-card{padding:.5625rem;gap:.625rem}.wapu-archive__collection-thumb{width:3.5rem;height:3.5rem}.wapu-archive__collection-name{font-size:var(--wtds-fs-subhead)}.wapu-archive__collection-count{font-size:var(--wtds-fs-caption-1)}}.wapu-archive__collections-dialog--large{max-height:min(82vh,47.5rem)}.wapu-archive__collections-search{position:relative;width:100%;height:3.4375rem;border:var(--wtds-border-thin) solid var(--wtds-separator-soft);border-radius:var(--wtds-r-md);background:var(--wtds-surface);margin-bottom:var(--wtds-s-3)}.wapu-archive__collections-search-input{width:100%;height:100%;border:0;border-radius:var(--wtds-r-md);background:transparent;color:var(--wtds-ink);font-family:var(--wtds-font-display);font-size:var(--wtds-fs-callout);font-weight:var(--wtds-fw-regular);line-height:1.5;padding:0 2.875rem 0 var(--wtds-s-2);outline:none}.wapu-archive__collections-search-input::-moz-placeholder{color:var(--wtds-ink-4);opacity:1}.wapu-archive__collections-search-input::placeholder{color:var(--wtds-ink-4);opacity:1}.wapu-archive__collections-search-input::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}.wapu-archive__collections-search-input:focus-visible{box-shadow:var(--wtds-shadow-focus)}.wapu-archive__collections-search-icon{position:absolute;right:var(--wtds-s-2);top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;color:var(--wtds-ink-3);pointer-events:none}.wapu-archive__collections-grid--large{gap:var(--wtds-s-3);max-height:28rem;overflow-y:auto;overflow-x:hidden;align-content:start;padding-right:.25rem}.wapu-archive__collections-grid--large::-webkit-scrollbar{width:.3125rem}.wapu-archive__collections-grid--large::-webkit-scrollbar-thumb{border-radius:var(--wtds-r-pill);background:var(--wtds-separator)}.wapu-archive__collections-grid--large::-webkit-scrollbar-track{background:transparent}.wapu-archive__collections-empty{margin:var(--wtds-s-1) 0 0;font-family:var(--wtds-font-display);font-size:var(--wtds-fs-subhead);font-weight:var(--wtds-fw-semibold);color:var(--wtds-ink-3);text-align:center;width:100%}@media (max-width: 56.25rem){.wapu-archive__collections-search{height:3.125rem;margin-bottom:var(--wtds-s-2)}.wapu-archive__collections-search-input{font-size:var(--wtds-fs-subhead);padding-right:2.5rem}.wapu-archive__collections-grid--large{gap:var(--wtds-s-2);max-height:26.25rem}}@media (max-width: 48rem){.wapu-archive__collections-search{height:2.875rem;border-radius:var(--wtds-r-sm);margin-bottom:.625rem}.wapu-archive__collections-search-input{border-radius:var(--wtds-r-sm);font-family:var(--wtds-font-text);font-size:var(--wtds-fs-footnote);padding:0 2.25rem 0 var(--wtds-s-2)}.wapu-archive__collections-search-icon{right:var(--wtds-s-2)}.wapu-archive__collections-grid--large{grid-template-columns:1fr;max-height:none;overflow:visible;padding-right:0;gap:.625rem}.wapu-archive__collections-empty{font-size:var(--wtds-fs-footnote);text-align:left}}@media (max-width: 23.75rem){.wapu-archive__collections-search{height:2.75rem;margin-bottom:var(--wtds-s-1)}.wapu-archive__collections-search-input{font-size:var(--wtds-fs-footnote)}}.wapu-archive__sort-wrap{position:relative}.wapu-archive__sort-btn[aria-expanded=true] .wapu-archive__sort-chevron{transform:rotate(180deg)}.wapu-archive__sort-chevron{transition:transform var(--wtds-dur-fast) var(--wtds-ease)}.wapu-archive__sort-btn.is-active{background:var(--wtds-action);color:var(--wtds-action-ink);box-shadow:none}.wapu-archive__sort-btn.is-active svg{color:var(--wtds-action-ink)}.wapu-archive__sort-menu{position:absolute;top:calc(100% + .375rem);right:0;min-width:13.75rem;background:var(--wtds-surface);border:var(--wtds-border-thin) solid var(--wtds-separator-soft);border-radius:var(--wtds-r-md);box-shadow:var(--wtds-shadow-md);padding:.375rem;z-index:var(--wtds-z-dropdown);opacity:0;transform:translateY(-.375rem);transition:opacity var(--wtds-dur-fast) var(--wtds-ease),transform var(--wtds-dur-fast) var(--wtds-ease);pointer-events:none}.wapu-archive__sort-menu:not([hidden]){opacity:1;transform:translateY(0);pointer-events:auto}.wapu-archive__sort-option{display:flex;align-items:center;gap:.625rem;padding:.5625rem var(--wtds-s-2);border-radius:var(--wtds-r-xs);text-decoration:none;color:var(--wtds-ink);font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-medium);transition:background var(--wtds-dur-fast) var(--wtds-ease);cursor:pointer}.wapu-archive__sort-option:hover{background:var(--wtds-fill-4)}.wapu-archive__sort-option.is-active{background:var(--wtds-action-soft);color:var(--wtds-action);font-weight:var(--wtds-fw-semibold)}.wapu-archive__sort-option.is-active:after{content:"";display:block;width:.4375rem;height:.4375rem;border-radius:50%;background:var(--wtds-action);margin-left:auto;flex-shrink:0}.wapu-archive__sort-option svg{flex-shrink:0;opacity:.55}.wapu-archive__sort-option.is-active svg{opacity:1;color:var(--wtds-action)}.wapu-archive__sort-option-label{flex:1}.wapu-archive__sort-option-count{display:inline-flex;align-items:center;padding:.125rem .4375rem;border-radius:var(--wtds-r-pill);background:var(--wtds-fill-3);color:var(--wtds-ink-3);font-size:var(--wtds-fs-caption-2);font-weight:var(--wtds-fw-semibold)}.wapu-archive__sort-option.is-active .wapu-archive__sort-option-count{background:var(--wtds-action-soft);color:var(--wtds-action)}.wapu-sw{position:relative;width:100%;height:100%;overflow:hidden;display:block}.wapu-sw__link{display:block;width:100%;height:100%;text-decoration:none;color:inherit;background:transparent;position:relative}.wapu-sw__wrap{position:relative;width:100%;height:100%;padding:1rem;box-sizing:border-box}.wapu-sw__img{position:absolute;top:1rem;right:1rem;bottom:1rem;left:1rem;width:auto;height:auto;max-width:calc(100% - 2rem);max-height:calc(100% - 2rem);-o-object-fit:contain;object-fit:contain;opacity:0;transition:opacity var(--wtds-dur) var(--wtds-ease)}.wapu-sw__img.is-active{opacity:1}.wapu-sw-row{display:flex;align-items:center;gap:.625rem;padding:0;margin:var(--wtds-s-1) 0 0;flex-wrap:nowrap;position:relative;z-index:1}.wapu-sw-row .wapu-swatch{width:1.5rem;height:1.5rem;min-width:1.5rem;min-height:1.5rem;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:50%;overflow:visible;cursor:pointer;padding:0;border:0;background:transparent}.wapu-sw-row .wapu-swatch .wapu-swatch__media{display:block;width:100%;height:100%;background-color:var(--wtds-fill-3);background-position:center;background-size:cover;background-repeat:no-repeat;border-radius:50%;box-shadow:inset 0 0 0 var(--wtds-border-hairline) var(--wtds-shadow-color-soft);transition:transform var(--wtds-dur-fast) var(--wtds-ease)}.wapu-sw-row .wapu-swatch.is-active .wapu-swatch__media{box-shadow:0 0 0 .09375rem var(--wtds-surface),0 0 0 .1875rem var(--wtds-ink)}.wapu-sw-row .wapu-swatch:hover:not(.is-active) .wapu-swatch__media{transform:scale(1.12)}.wapu-sw-row__more{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-family:var(--wtds-font-text);font-size:var(--wtds-fs-callout);font-weight:var(--wtds-fw-regular);line-height:1;color:var(--wtds-ink-3);background:transparent;border:0;text-decoration:none;cursor:pointer;padding:0;margin-left:.125rem;transition:color var(--wtds-dur-fast) var(--wtds-ease)}.wapu-sw-row__more:hover{color:var(--wtds-ink)}@media (prefers-reduced-motion: reduce){.wapu-sw__img,.wapu-sw-row .wapu-swatch__media{transition:none}.wapu-sw-row .wapu-swatch:hover .wapu-swatch__media{transform:none}}@media (max-width: 56.25rem){.wapu-archive__filter-bar{margin:0 -.75rem .625rem;padding:0 .75rem}}.wapu-archive__active-filters{max-width:87.5rem;margin:0 auto 1rem}@media (max-width: 56.25rem){.wapu-archive__active-filters{margin:0 0 .75rem;padding:0 .75rem}}.wapu-product-card--skeleton{pointer-events:none}.wapu-product-card--skeleton .wapu-product-card__media{aspect-ratio:1 / 1;border-radius:var(--wtds-r-xs);margin:0}.wapu-product-card--skeleton .wapu-product-card__info{gap:.375rem} /* ────────────────────────────────────────────────────────────── * [v4.0.25] Mobile cards cleanup — feedback Velvet "muy sucio". * * En viewport ≤ 48rem las cards se sentían cargadas: * - La visibilidad del CTA ya no se decide aquí: Vista de productos * es la autoridad única de contenido para la ProductCard. * - Swatch single (1 solo orfano) abajo del precio se ve solo * y poco editorial. * - Spacing entre brand/título/precio apretado. * * Fix: minimal mobile-only rules. Sin tocar desktop. * * ── [v4.2.40 — PR-3.2 surgical cleanup] ── * Removí 15 `!important` de las reglas de spacing/typography mobile * de este bloque. archive.css se enqueue con `array('wapu-main')` * como dependency (ver app/frontend/class-wapu-enqueue.php), así que SIEMPRE * carga después de main.css. Misma specificity en mobile · gana por * cascade order sin necesitar `!important`. * * El único `display:none!important` conservado aquí es el caso de * swatch degenerado; el CTA ya obedece exclusivamente al renderer. * ────────────────────────────────────────────────────────────── */ @media (max-width: 48rem) { /* ProductCard content visibility belongs to Vista de productos. Mobile archive no longer hides the canonical CTA independently. */ /* 2. Hide swatch row si tiene 1 swatch o menos (orfana). KEEP !important · defensiva contra plugins/themes que puedan re-mostrar la fila via `display:flex` específico. */ .wapu-sw-row:not(:has(.wapu-swatch:nth-child(2))) { display: none !important; } /* 3. Tighten spacing dentro de la card info. PR-3.2: removido `!important` · cascade order suficiente. */ .wapu-product-card__info { gap: .25rem; padding: .625rem 0 0; } .wapu-product-card__brand { font-size: .625rem; letter-spacing: 0.16em; margin: 0 0 .125rem; } .wapu-product-card__name { font-size: .8125rem; line-height: 1.3; margin: 0; } .wapu-product-card__price-wrap { margin-top: .25rem; } /* 4. Si la swatch row sí se muestra (2+ swatches), tighten gap. PR-3.2: removido `!important` · cascade order suficiente. */ .wapu-sw-row { margin-top: .25rem; gap: .375rem; } .wapu-sw-row .wapu-swatch { width: 1.125rem; height: 1.125rem; min-width: 1.125rem; min-height: 1.125rem; } } /* ────────────────────────────────────────────────────────────── * [v4.0.30] Archive swatches — visibility + degenerate hide. * * Bugs visibles en velvetbeauty.mx (Mayo 2026): * - GISOU: 1 swatch blanco invisible contra card blanca. * - NATASHA DENONA: 1 swatch que muestra la foto entera del * producto comprimida en círculo (no era un swatch real, * era el variation_image de fallback). * - PATRICK STARRR: 2 swatches OK — caso correcto, no tocar. * * Fixes: * 1) Borde más visible para swatches claros (white/nude/cream). * Reforzamos el inset shadow + agregamos un outer hairline. * 2) Ocultar swatch row degenerada (1 solo swatch) en TODOS los * viewports — antes era solo mobile (línea ~24 arriba). * Una variación única no aporta visual diferenciador. * 3) image-swatches mantienen background-size:cover + position:center * (ya estaban). Cuando es fallback de variation-image, el problema * real es que el merchant no subió un swatch dedicado: la solución * product-side. Aquí dejamos cover para que al menos no se distorsione. * ────────────────────────────────────────────────────────────── */ /* Hide degenerate single-swatch row across all breakpoints (no solo mobile). :has() — soportado en todos los browsers modernos (>94% global Mayo 2026). Si el browser no soporta :has(), la row se sigue mostrando como antes (fallback gracioso, no rompe). */ .wapu-sw-row:not(:has(.wapu-swatch:nth-child(2))) { display: none; } /* Swatch media — borde más visible + outer hairline. Selector más específico que la regla base para overridear el inset débil (var(--wtds-on-surface) = 12% black) sin tocar la regla original. */ .wapu-sw-row .wapu-swatch .wapu-swatch__media { box-shadow: inset 0 0 0 1px var(--wtds-shadow-color-strong), 0 0 0 1px var(--wtds-shadow-color-faint); /* Refuerzo de aspect-ratio (defensivo — el width/height del padre ya lo garantiza, pero aspect-ratio:1 evita degradaciones si algún contenedor pierde altura por flex-shrink). */ aspect-ratio: 1 / 1; /* image swatches: cover + center ya en regla base (línea principal), reforzamos object-position por si algún consumer lo overrideó. */ background-position: center center; background-size: cover; } /* is-active mantiene su ring marcado (regla base lo cubre, no override). */ /* ═══════════════════════════════════════════════════════════════════ * [v4.0.37] BADGES PREMIUM — overrides al inline-style previous-generation * * `Wapu_Playground_Badges::render_for_product()` emite spans con styles * INLINE hardcoded (font Poppins, padding .5rem 1rem, font-size .625rem, * border-radius .25rem, etc.). Eso da un look genérico y no respeta el * Design System del theme. * * Acá sobrescribimos esos inline styles con specificity alta + tokens * del DS. Resultado: badges se ven premium, alineadas con el drop activo, * tipografía consistente con el resto de la card. * * Sobrescribir inline styles requiere `!important` (única forma). * ═══════════════════════════════════════════════════════════════════ */ /* Container de badges (kit-badge wrapper) — top-left apilable */ .wapu-product-card .wapu-kit-badge, .wapu-kit-badge { position: absolute !important; top: var(--wtds-s-1, .75rem) !important; left: var(--wtds-s-1, .75rem) !important; z-index: 2 !important; pointer-events: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } /* Badge pill — el shape más común. Override de inline styles. */ .wapu-kit-badge__pill, .wapu-product-card .wapu-kit-badge__pill { /* tipografía DS */ font-family: var(--wtds-font-text) !important; font-size: var(--wtds-fs-caption-2, .625rem) !important; font-weight: var(--wtds-fw-bold, 700) !important; line-height: 1 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; /* spacing premium */ padding: .375rem .625rem !important; border-radius: var(--wtds-r-pill, 62.4375rem) !important; /* shadow sutil para flotar */ box-shadow: 0 1px .25rem var(--wtds-shadow-color-soft) !important; /* Smooth animation entrada */ animation: wapu-kit-badge-fade-in 0.4s var(--wtds-ease, ease) backwards; /* Defensive: si emite color: white pero el bg es muy claro, forzar contraste */ text-shadow: none !important; } /* Badge line — variant editorial */ .wapu-kit-badge__line, .wapu-product-card .wapu-kit-badge__line { font-family: var(--wtds-font-text) !important; font-size: var(--wtds-fs-caption-1, .6875rem) !important; font-weight: var(--wtds-fw-semibold, 600) !important; line-height: 1 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: .375rem 0 .375rem .625rem !important; border-left: .125rem solid currentColor !important; } /* Animation entrada suave */ @keyframes wapu-kit-badge-fade-in { from { opacity: 0; transform: translateY(-.25rem); } to { opacity: 1; transform: translateY(0); } } /* Múltiples badges apilados — gap consistente */ .wapu-product-card__media .wapu-kit-badge + .wapu-kit-badge, .wapu-product-card__media .wapu-kit-badge ~ .wapu-product-card__wholesale-badge { top: calc(var(--wtds-s-1, .75rem) + 1.75rem) !important; } /* Mobile — badges un poco más chicas para no saturar */ @media (max-width: 37.5rem) { .wapu-kit-badge__pill, .wapu-product-card .wapu-kit-badge__pill { font-size: .5625rem !important; padding: .3125rem .5rem !important; letter-spacing: 0.1em !important; } } /* Wholesale badge — alinear visual con kit-badges */ .wapu-product-card__wholesale-badge { position: absolute; top: var(--wtds-s-1, .75rem); left: var(--wtds-s-1, .75rem); z-index: 2; pointer-events: none; display: inline-flex; align-items: center; gap: .25rem; padding: .375rem .625rem; border-radius: var(--wtds-r-pill, 62.4375rem); background: var(--wtds-ink); color: var(--wtds-surface); font-family: var(--wtds-font-text); font-size: var(--wtds-fs-caption-2, .625rem); font-weight: var(--wtds-fw-bold, 700); line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 1px .25rem var(--wtds-shadow-color-soft); } .wapu-product-card__wholesale-badge-icon { font-size: .75rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .wapu-product-card__wholesale-badge-icon svg { width: .75rem; height: .75rem; display: block; } /* Etiqueta Woo propiedad de wapu-woocommerce. El fondo es deliberadamente opaco para conservar contraste incluso sobre fotografias oscuras. */ .wapu-product-card { position: relative; } .wapu-product-card .wapu-wc-product-tag--archive, .wapu-wc-product-tag--archive { position: absolute; top: var(--wtds-s-1, .75rem); left: var(--wtds-s-1, .75rem); z-index: 4; opacity: 1; isolation: isolate; display: inline-flex; align-items: center; gap: .4375rem; max-width: calc(100% - 1.5rem); min-height: 2rem; padding: 0 .8125rem; border: 1px solid var(--wtds-outline-strong); border-radius: var(--wtds-r-pill, 62.4375rem); background: var(--wapu-tag-color, var(--wtds-accent)); color: var(--wapu-tag-contrast, var(--wtds-action-ink)); box-shadow: 0 .5rem 1.375rem var(--wtds-shadow-color-strong); font-family: var(--wtds-font-text, Poppins, Arial, sans-serif); font-size: .6875rem; font-weight: var(--wtds-fw-medium); line-height: 1; white-space: nowrap; pointer-events: none; } .wapu-wc-product-tag--archive .wapu-wc-product-tag__dot { width: .4375rem; height: .4375rem; flex: 0 0 .4375rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .1875rem var(--wtds-shadow-color-medium); } .wapu-wc-product-tag--archive .wapu-wc-product-tag__label { overflow: hidden; text-overflow: ellipsis; } .wapu-wc-product-tag--archive ~ .wapu-product-card__wholesale-badge { top: calc(var(--wtds-s-1, .75rem) + 2.5rem); } /* Compatibilidad con el markup previous-generation que todavía puede quedar en caché o ser emitido por una versión previa de WapuOS - Blocks. El background inline usa !important, pero consume esta variable heredada; redefinirla en el pill permite volverlo realmente opaco sin tocar el plugin visual. */ .wapu-product-card .wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag, .wapu-archive .wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag, .wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag { --wapu-woo-tag-bg: var(--wtds-surface-translucent) !important; opacity: 1 !important; border: 1px solid var(--wtds-outline-soft) !important; box-shadow: 0 .5rem 1.375rem var(--wtds-shadow-color-strong) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } @media (max-width: 37.5rem) { .wapu-product-card .wapu-wc-product-tag--archive, .wapu-wc-product-tag--archive { top: .5rem; left: .5rem; max-width: calc(100% - 1rem); min-height: 1.8125rem; padding: 0 .625rem; font-size: .625rem; } } /* ────────────────────────────────────────────────────────────── * [v4.3.9] Sheet filters · mini buscador de términos * Busca dentro de los chips del drawer sin tocar la lógica de aplicar filtros. * ────────────────────────────────────────────────────────────── */ .wapu-archive__filters-term-search { position: relative; flex-shrink: 0; margin: 0; padding: var(--wtds-s-2) var(--wtds-s-2); border-bottom: var(--wtds-border-thin) solid var(--wtds-separator-soft); background: var(--wtds-surface); } .wapu-archive__filters-term-search-input { width: 100%; min-height: 2.75rem; border: var(--wtds-border-thin) solid var(--wtds-separator-soft); border-radius: var(--wtds-r-pill); background: var(--wtds-fill-4); color: var(--wtds-ink); font-family: var(--wtds-font-text); font-size: var(--wtds-fs-footnote); font-weight: var(--wtds-fw-medium); line-height: 1.2; outline: none; padding: 0 2.75rem 0 2.625rem; transition: background-color var(--wtds-dur-fast) var(--wtds-ease), border-color var(--wtds-dur-fast) var(--wtds-ease), box-shadow var(--wtds-dur-fast) var(--wtds-ease); } .wapu-archive__filters-term-search-input::placeholder { color: var(--wtds-ink-4); opacity: 1; } .wapu-archive__filters-term-search-input::-webkit-search-cancel-button { appearance: none; -webkit-appearance: none; } .wapu-archive__filters-term-search-input:focus { background: var(--wtds-surface); border-color: var(--wtds-separator); box-shadow: var(--wtds-shadow-focus); } .wapu-archive__filters-term-search-icon, .wapu-archive__filters-term-search-clear { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; } .wapu-archive__filters-term-search-icon { left: calc(var(--wtds-s-2) + .9375rem); color: var(--wtds-ink-3); pointer-events: none; } .wapu-archive__filters-term-search-clear { right: calc(var(--wtds-s-2) + .5rem); width: 2rem; height: 2rem; border: 0; border-radius: var(--wtds-r-pill); background: transparent; color: var(--wtds-ink-3); cursor: pointer; font-family: var(--wtds-font-text); font-size: 1.25rem; line-height: 1; } .wapu-archive__filters-term-search-clear:hover { background: var(--wtds-fill-3); color: var(--wtds-ink); } .wapu-archive__filters-term-search-clear[hidden] { display: none; } .wapu-archive__filters-term-empty { margin: var(--wtds-s-2) 0; padding: var(--wtds-s-2); border-radius: var(--wtds-r-md); background: var(--wtds-fill-4); color: var(--wtds-ink-3); font-family: var(--wtds-font-text); font-size: var(--wtds-fs-footnote); font-weight: var(--wtds-fw-medium); line-height: var(--wtds-lh-relaxed); } .wapu-archive__filters-term-empty[hidden], .wapu-archive__filters-sheet-section[hidden], .wapu-archive__filters-sheet-opt[hidden] { display: none; } .wapu-archive__filters-sheet-section.is-searching .wapu-archive__filters-sheet-section-title::after { content: " · coincide"; color: var(--wtds-ink-4); font-weight: var(--wtds-fw-medium); } @media (min-width: 56.25rem) { .wapu-archive__filters-term-search { padding: var(--wtds-s-2) var(--wtds-s-3); } .wapu-archive__filters-term-search-icon { left: calc(var(--wtds-s-3) + .9375rem); } .wapu-archive__filters-term-search-clear { right: calc(var(--wtds-s-3) + .5rem); } } @media (max-width: 48rem) { .wapu-archive__filters-term-search { padding: .625rem var(--wtds-s-2) .75rem; } .wapu-archive__filters-term-search-input { min-height: 2.625rem; font-size: var(--wtds-fs-caption-1); padding-left: 2.5rem; padding-right: 2.5rem; } } /* ═══════════════════════════════════════════════════════════════════════ * [v4.2.40] WAPUOS-VAS · Day 3 PR-3.2 · archive.css Surgical Cleanup * ─────────────────────────────────────────────────────────────────────── * NO añade reglas nuevas. Solo registra qué se limpió, qué se preservó * y por qué. Este bloque vive al final del archivo como ancla documental * (rollback se hace via git diff · ver checkpoint). * * Removido en esta PR (`!important` count en archive.css): * 50 → 35 (−15 · −30 %) * * Las 15 removals son TODAS en el bloque `[v4.0.25] Mobile cards * cleanup` (líneas ~30-56 del archivo original). Son reglas de * spacing y typography mobile. Razón segura: * * archive.css load order: * `wp_enqueue_style('wapu-archive', …, array('wapu-main'), …)` * ─ app/frontend/class-wapu-enqueue.php * * → archive.css carga DESPUÉS de main.css siempre. * → Misma specificity dentro del mismo media query (≤48rem) * gana el que carga después. `!important` era overkill. * * Preservado intencionalmente: * * 1. CTA móvil ya NO se preserva aquí. Vista de productos es la * autoridad única de visibilidad de la ProductCard. * * 2. `.wapu-sw-row:not(:has(.wapu-swatch:nth-child(2))) * { display: none !important }` @ ≤48rem * └─ Defensiva contra plugins terceros que puedan setear * `display: flex !important` en `.wapu-sw-row`. * * 3. `.wapu-archive .woocommerce-pagination { display: none !important }` * └─ Defensiva contra WooCommerce base styles. WC override. * * 4. Bloque `[v4.0.37] BADGES PREMIUM` (32 `!important`) — INTACTO. * └─ Sobrescribe inline-styles emitidos por * `Wapu_Playground_Badges::render_for_product()`. Inline * styles SOLO se pueden vencer con `!important`. Tocarlos * rompe los badges. Cleanup real requiere extraer el render * del badge a CSS clases puras vía PHP (deferred wave). * * Debt remanente clasificada para próximas waves: * * 🟡 Med · `.woocommerce-pagination` hide (1) — WC override * 🟡 Med · swatch row degenerada hide (1) — contract * 🔴 High · `.wapu-kit-badge` family vs inline-style (32) — render-side cleanup * ───── * 35 total * * @since 4.2.40 * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * [v4.2.41] WAPUOS-VAS · Day 3 PR-3.3 · Archive Grid Rhythm Alignment * ─────────────────────────────────────────────────────────────────────── * Refinement de cadencia visual. Establece tokens scoped de rhythm, * suaviza el jump de gap 32→2.5rem en el rango desktop, y tokeniza * valores off-grid heredados. * * Charter (igual que PR-3.2): * - 0 `!important` nuevos * - 0 reglas CSS nuevas en bloques existentes (solo este block) * - 0 hex hardcoded · todo tokens DS o derived * - 0 cambios PHP / JS / markup / templates * - Append-only · rollback trivial (eliminar este bloque) * - archive.css carga después de main.css (dependency en * class-wapu-enqueue.php) · cascade order resuelve sin * necesidad de `!important` */ /* P8: Quick Preview paint moved to product-quick-view.css (WTDS-owned, conditionally loaded). */ /* * Capas (8): * R1 Rhythm tokens scoped a .wapu-archive * R2 Grid row-gap suavizado vía clamp() · ≥48.0625rem * R3 Toolbar tokenization (gap/margin/padding 1.125rem/1.5rem/1.25rem → tokens) * R4 Toolbar-left gap tokenizado * R5 Section-count margin-top off-grid → --wtds-s-1 * R6 Category-desc bottom margin aligned con grid rhythm * R7 Infinite scroll tokenization * R8 Active filters margin tokenization * * @since 4.2.41 * ═══════════════════════════════════════════════════════════════════════ */ /* ─── R1 · Rhythm tokens scoped a .wapu-archive ───────────────────── Custom properties locales que sirven como single source of truth para el ritmo del archive. Scoped al `.wapu-archive` para no contaminar otros surfaces del DS. */ .wapu-archive { --wapu-grid-row-gap: clamp(var(--wtds-s-4), 1.6vw + 1rem, var(--wtds-s-5)); --wapu-grid-col-gap: var(--wtds-s-2); --wapu-toolbar-gap: clamp(var(--wtds-s-2), 1.5vw, var(--wtds-s-3)); } /* ─── R2 · Grid row-gap suavizado vía clamp · ≥48.0625rem ──────────────── Reemplaza el jump discreto 32→2.5rem (en 75.0625rem breakpoint) por una interpolación suave entre viewports 769-1500. Resultado: en pantallas intermedias (~1280-1440) el grid respira más sin esperar al breakpoint duro de 75.0625rem. Mobile (≤768) y small mobile (≤380) NO se tocan · esas reglas base mantienen sus valores explícitos. Solo column-gap se tokeniza vía la var (que apunta al mismo --wtds-s-2 actual · no cambia visualmente). */ @media (min-width: 48.0625rem) { .wapu-archive__grid { row-gap: var(--wapu-grid-row-gap); column-gap: var(--wapu-grid-col-gap); } } /* [v4.7.40] Una sola fila de badges sobre la card. El markup canónico agrupa estado, etiquetas Woo y mayoreo; estas reglas neutralizan los top/left inline heredados y mantienen el estado primero. */ .wapu-product-card > .wapu-product-card__badges { position: absolute; top: var(--wtds-s-1, .75rem); left: var(--wtds-s-1, .75rem); right: var(--wtds-s-1, .75rem); z-index: 4; display: flex; align-items: center; gap: .375rem; min-width: 0; pointer-events: none; } /* Playground owns badge placement. Multiple groups may coexist when a WooCommerce tag and an automatic badge use different Studio positions. */ .wapu-product-card > .wapu-product-card__badges[data-position="top-left"] { top: var(--wtds-s-1, .75rem); bottom: auto; justify-content: flex-start; } .wapu-product-card > .wapu-product-card__badges[data-position="top-right"] { top: var(--wtds-s-1, .75rem); bottom: auto; justify-content: flex-end; } .wapu-product-card > .wapu-product-card__badges[data-position="bottom-left"] { top: auto; bottom: var(--wtds-s-1, .75rem); justify-content: flex-start; } .wapu-product-card > .wapu-product-card__badges[data-position="bottom-right"] { top: auto; bottom: var(--wtds-s-1, .75rem); justify-content: flex-end; } .wapu-product-card > .wapu-product-card__badges > .wa-badge { position: static; max-width: 100%; } .wapu-product-card > .wapu-product-card__badges > .wa-badge__label, .wapu-product-card > .wapu-product-card__badges .wa-badge__label { min-width: 0; } .wapu-product-card > .wapu-product-card__badges > .wapu-kit-badge, .wapu-product-card > .wapu-product-card__badges > .wapu-wc-product-tag--archive, .wapu-product-card > .wapu-product-card__badges > .wapu-product-card__wholesale-badge, .wapu-product-card > .wapu-product-card__badges > .wa-product-card__badges, .wapu-product-card > .wapu-product-card__badges > .wa-product-card__badges > * { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; order: 10; } .wapu-product-card > .wapu-product-card__badges > .wa-product-card__badges { display: contents !important; } .wapu-product-card > .wapu-product-card__badges > .wapu-kit-badge--woo-tag, .wapu-product-card > .wapu-product-card__badges > .wapu-wc-product-tag--archive, .wapu-product-card > .wapu-product-card__badges > .wa-product-card__badges > .wa-badge--woo-tag { order: 20; min-width: 0; max-width: 100%; flex: 0 1 auto; justify-content: flex-start !important; overflow: hidden; } .wapu-product-card > .wapu-product-card__badges .wapu-kit-badge__pill--woo-tag { min-width: 0 !important; max-width: 100% !important; } .wapu-product-card > .wapu-product-card__badges .wapu-kit-badge__text, .wapu-product-card > .wapu-product-card__badges .wapu-wc-product-tag__label, .wapu-product-card > .wapu-product-card__badges .wa-badge--woo-tag .wa-badge__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 37.5rem) { .wapu-product-card > .wapu-product-card__badges { left: .5rem; right: .5rem; gap: .3125rem; } .wapu-product-card > .wapu-product-card__badges[data-position="top-left"], .wapu-product-card > .wapu-product-card__badges[data-position="top-right"] { top: .5rem; bottom: auto; } .wapu-product-card > .wapu-product-card__badges[data-position="bottom-left"], .wapu-product-card > .wapu-product-card__badges[data-position="bottom-right"] { top: auto; bottom: .5rem; } } /* ─── R3 · Toolbar tokenization ───────────────────────────────────── Removidos los valores off-grid del .wapu-archive__toolbar: - gap: 1.125rem → var(--wapu-toolbar-gap) · clamp 16-24px - margin: 1.5rem → var(--wtds-s-3) · no visual change - padding-bottom: 1.25rem → var(--wtds-s-3) · +.25rem breath antes del border-bottom */ .wapu-archive__toolbar { gap: var(--wapu-toolbar-gap); margin: 0 auto var(--wtds-s-3); padding-bottom: var(--wtds-s-3); } /* ─── R4 · Toolbar-left gap tokenizado ────────────────────────────── Era `gap: .5rem` hardcoded · idéntico a --wtds-s-1. Cero cambio visual, solo alineación al canon. */ .wapu-archive__toolbar-left { gap: var(--wtds-s-1); } /* ─── R5 · Section-count margin-top off-grid corregido ────────────── Era `margin: .375rem 0 0` (off .5rem-grid). Ajustamos a --wtds-s-1 (.5rem). +.125rem barely visible · alinea con cadencia. */ .wapu-archive__section-count { margin-top: var(--wtds-s-1); } /* ─── R6 · Category-desc bottom margin aligned con grid rhythm ────── Antes: margin-bottom var(--wtds-s-3) fijo (1.5rem). Después: usa la misma var de row-gap · al ensanchar el viewport el espacio entre la category description y el grid crece con la misma cadencia que el ritmo entre filas de productos. En mobile (≤48rem) cae al fallback --wtds-s-3 porque la var de R1 sigue válida pero R2 no aplica · @≤768 archive.css base no override esta prop, así que el valor de R1 se usa directamente. Cero regresión mobile. */ .wapu-archive__category-desc { margin-bottom: var(--wapu-grid-row-gap, var(--wtds-s-3)); } /* ─── R7 · Infinite scroll tokenization ───────────────────────────── - margin: 2.5rem auto 0 → var(--wtds-s-5) · same value tokenized - padding-top: 2rem → var(--wtds-s-4) · same value tokenized - gap: .625rem (off-grid) → var(--wtds-s-1) (.5rem) · -.125rem subtle - .wapu-archive__infinite-manual gap: .75rem → var(--wtds-s-1) + subtle vertical breath via parent gap inherit · NO cambio visual notable */ .wapu-archive__infinite-scroll { margin-top: var(--wtds-s-5); padding-top: var(--wtds-s-4); gap: var(--wtds-s-1); } .wapu-archive__infinite-manual { gap: var(--wtds-s-2); } /* ─── R8 · Active filters margin tokenization ─────────────────────── Era `margin: 0 auto 1rem`. Tokenizamos a --wtds-s-2 · cero cambio visual. */ .wapu-archive__active-filters { margin: 0 auto var(--wtds-s-2); } /* ─── v4.3.13 · Category description moved below product grid ───────── La descripción editable de categoría/marca vive al final del archive: funciona como bloque editorial/SEO discreto y deja limpio el hero de colección. */ .wapu-archive__category-desc--bottom { max-width: 87.5rem; margin: clamp(var(--wtds-s-6), 6vw, var(--wtds-s-8)) auto 0; padding: var(--wtds-s-4) 0 0; background: transparent; border-top: var(--wtds-border-thin) solid var(--wtds-separator-soft); border-radius: 0; color: var(--wtds-ink-3); font-family: var(--wtds-font-text); font-size: var(--wtds-fs-footnote); line-height: var(--wtds-lh-relaxed); } .wapu-archive__category-desc--bottom .wapu-archive__category-desc-eyebrow { margin: 0 0 var(--wtds-s-1); font-family: var(--wtds-font-text); font-size: var(--wtds-fs-caption-2); font-weight: var(--wtds-fw-medium); letter-spacing: .24em; text-transform: uppercase; color: var(--wtds-ink-4); } .wapu-archive__category-desc--bottom .wapu-archive__category-desc-copy { max-width: 47.5rem; } .wapu-archive__category-desc--bottom p { margin: 0; } .wapu-archive__category-desc--bottom p + p { margin-top: var(--wtds-s-1); } .wapu-archive__category-desc--bottom a { color: var(--wtds-ink); text-decoration-thickness: var(--wtds-border-thin); text-underline-offset: .18em; } .wapu-archive__category-desc--bottom strong { color: var(--wtds-ink); font-weight: var(--wtds-fw-semibold); } @media (max-width: 48rem) { .wapu-archive__category-desc--bottom { max-width: 100%; margin-top: var(--wtds-s-5); padding-top: var(--wtds-s-3); font-size: var(--wtds-fs-caption-1); } } /* end · WAPUOS-VAS Day 3 PR-3.3 Archive Grid Rhythm Alignment * ═══════════════════════════════════════════════════════════════════════ */ /* Shared containment fix for collections modal: * keep scroll inside the list and clip any card overflow to the dialog radius. */ .wapu-archive__collections-dialog { display: flex; flex-direction: column; overflow: hidden; } .wapu-archive__collections-dialog--large { overflow: hidden; } .wapu-archive__collections-grid--large { min-height: 0; padding-bottom: var(--wtds-s-1); overscroll-behavior: contain; } /* ── Toast para quick view (espejo de single-product) ───────────────── */ .wapu-single__toast{ position:fixed; top:calc(var(--wtds-header-full-h, 4.5rem) + .75rem); right:.875rem; left:auto; bottom:auto; transform:translateY(-.625rem); width:min(26.25rem,calc(100vw - 1.75rem)); display:grid; grid-template-columns:1.25rem minmax(0,1fr); align-items:center; column-gap:.625rem; padding:.75rem .875rem; z-index:99999; border-radius:var(--wtds-r-md); font-family:var(--wtds-font-display); font-size:var(--wtds-fs-footnote); font-weight:var(--wtds-fw-semibold); line-height:1.35; box-shadow:0 .875rem 2.125rem var(--wtds-shadow-color-medium); z-index:1300; opacity:0; pointer-events:none; transition:opacity .2s ease,transform .2s ease; } .wapu-single__toast.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; } .wapu-single__toast-icon{ width:1.25rem;height:1.25rem; display:inline-flex;align-items:center;justify-content:center; } .wapu-single__toast-icon svg{width:1.25rem;height:1.25rem;display:block;} .wapu-single__toast-message{ display:block;line-height:1.35;white-space:normal; } .wapu-single__toast.is-success{ background:var(--wtds-success-soft); color:var(--wtds-success-pressed); border:1px solid var(--wtds-success-outline); } .wapu-single__toast.is-error{ background:var(--wtds-danger-soft); color:var(--wtds-danger-pressed); border:1px solid var(--wtds-danger-outline); } body.admin-bar .wapu-single__toast{top:3rem;} /* ── Botón inline "Elegir tamaño / tono" en la product card ─────────── */ .wapu-product-card__cta-inline { display: inline-flex; align-items: center; gap: .3125rem; margin-top: .5rem; padding: .375rem .75rem; background: transparent; border: .5px solid var(--wtds-separator-soft); border-radius: var(--wtds-r-pill); font-family: var(--wtds-font-text); font-size: var(--wtds-fs-caption-1); font-weight: var(--wtds-fw-medium); color: var(--wtds-ink); cursor: pointer; transition: background .15s ease, border-color .15s ease; line-height: 1; } .wapu-product-card__cta-inline:hover { background: var(--wtds-fill-3); border-color: var(--wtds-separator); } /* position:relative necesario para el overlay del producto variable */ .wapu-product-card__media { position: relative; } .wapu-archive__sort-menu { max-height: min(70vh, 27.5rem); overflow-y: auto; overscroll-behavior: contain; } .wapu-archive__sort-group { margin-top: .375rem; padding-top: .375rem; border-top: var(--wtds-border-thin, 1px) solid var(--wtds-separator-soft); } .wapu-archive__sort-heading { display: block; padding: .375rem var(--wtds-s-2, .75rem) .25rem; font-family: var(--wtds-font-text); font-size: var(--wtds-fs-caption-2, .6875rem); font-weight: var(--wtds-fw-semibold, 600); letter-spacing: .12em; text-transform: uppercase; color: var(--wtds-ink-4); } .wapu-archive__sort-option--tag .wapu-archive__sort-option-label { max-width: 11.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 48rem) { .wapu-archive__sort-option--tag .wapu-archive__sort-option-label { max-width: calc(100vw - 9.375rem); } } /* Keep the filter CTA above either the theme or Playground mobile app bar. */ @media (max-width: 61.9375rem) { body.wapu-has-mobile-bottom-nav .wapu-archive__filters-sheet-footer { padding-bottom: calc( var(--wtds-s-2, 1rem) + var(--wapu-mobile-appbar-height, calc(3.75rem + env(safe-area-inset-bottom, 0px))) ); } } /* Preserve the canonical product-card spacing over archive previous-generation rules. */ .wapu-product-card__info { gap: .5rem; } /* Keep the archive hero in one row, matching the height established by product cards. */ @media (min-width: 48.0625rem) { .wapu-archive__grid { row-gap: 1.5rem; } .wapu-archive__hero { position: relative; grid-row: auto; align-self: stretch; aspect-ratio: auto; min-height: 0; } .wapu-archive__hero > .wapu-archive__hero-img, .wapu-archive__hero > .wapu-archive__hero-video, .wapu-archive__hero > .wapu-archive__hero-embed { position: absolute; inset: 0; width: 100%; height: 100%; } .wapu-archive__hero > .wapu-archive__hero-img { box-sizing: border-box; padding: 0; object-fit: cover; object-position: center; } } /* Galería editorial interactiva — Pins renderizados por Wapu Playground. */ .wapu-editorial-tile--pin { display: block; min-width: 0; min-height: 0; overflow: hidden; } .wapu-editorial-tile--pin > .wapu-pins-wrap, .wapu-editorial-tile--pin .wapu-pins-canvas, .wapu-editorial-tile--pin .wapu-pins-image-wrap { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; } .wapu-editorial-tile--pin .wapu-pins-image-wrap { aspect-ratio: auto; overflow: hidden; border-radius: inherit; } .wapu-editorial-tile--pin .wapu-pins-image, .wapu-editorial-tile__video { display: block; width: 100%; height: 100%; object-fit: cover; } .wapu-editorial-tile__video { background: var(--wtds-fill-3); } .wapu-editorial-tile--pin .wapu-pins-dot { z-index: 3; } /* [4.7.58] Stack de swatches al mismo encuadre que la imagen simple. `.wapu-product-card__img` ocupa toda la caja 1:1 del media, mientras que el stack se dibujaba con 1rem de aire por lado. La misma rejilla mostraba dos tamaños de producto según tuviera variantes o no. Se mantiene `contain`, así que la imagen sigue sin recortarse. */ .wapu-sw__wrap{ padding:0; } .wapu-sw__img{ top:0; right:0; bottom:0; left:0; width:100%; height:100%; max-width:100%; max-height:100%; } /* ── Swatches 2.0 · additive presentation contract ─────────────────── */ .wapu-sw-row .wapu-swatch--dual .wapu-swatch__media { background-size: 100% 100%; } .wapu-sw-row .wapu-swatch--button { width: auto; min-width: 1.5rem; max-width: 4.5rem; border-radius: var(--wtds-r-pill); } .wapu-sw-row .wapu-swatch--button .wapu-swatch__media { width: auto; min-width: 1.5rem; max-width: 4.5rem; padding: 0 .4375rem; border-radius: var(--wtds-r-pill); background: var(--wtds-fill-4); display: inline-flex; align-items: center; justify-content: center; } .wapu-sw-row .wapu-swatch__button-label { display: block; max-width: 3.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--wtds-font-text); font-size: var(--wtds-fs-caption-2); font-weight: var(--wtds-fw-medium); line-height: 1; color: var(--wtds-ink); } /* WTDS Responsive Contract 2.0 — catalog responds to its own available width. */ .wapu-archive { container-type: inline-size; container-name: wapu-catalog; } @container wapu-catalog (max-width: 68rem) { .wapu-archive__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .wapu-archive__toolbar { align-items: flex-start; flex-wrap: wrap; } } @container wapu-catalog (max-width: 48rem) { .wapu-archive__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .wapu-archive__toolbar-right { inline-size: 100%; margin-inline-start: 0; } } @container wapu-catalog (max-width: 30rem) { .wapu-archive__grid { gap: var(--wtds-comfort-gap-md) var(--wtds-s-1); } .wapu-archive__toolbar-right { grid-template-columns: 1fr; } .wapu-archive__filter-bar { justify-content: stretch; } } /* ── ProductCard variable content containment ───────────────────────── * Variations are additive ProductCard content. They may increase card height, * but must never establish a wider intrinsic size or replace the media box. */ .wapu-product-card__info .wapu-sw-row { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; box-sizing: border-box; } .wapu-product-card__info .wapu-sw-row .wapu-swatch, .wapu-product-card__info .wapu-sw-row .wapu-sw-row__more { max-width: 100%; } .wapu-product-card__info .wapu-sw-row .wapu-swatch--button { min-width: 0; max-width: min(4.5rem, 42%); } .wapu-product-card__info .wapu-sw-row .wapu-swatch--button .wapu-swatch__media { min-width: 0; max-width: 100%; } /* ── Studio -> legacy Woo product tag presentation bridge ───────────── * wapu-woocommerce may still emit one of the historical tag markups. The * canonical ProductCard root carries Studio's family/position contract so * those tags follow Vista de productos instead of remaining a fixed pill. */ .wapu-product-card[data-product-view-woo-tag-family] :where( .wapu-wc-product-tag--archive, .wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag ) { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .3125rem; width: auto; height: auto; min-width: 0; max-width: 100%; min-height: 1.875rem; padding: 0 .75rem; font-size: var(--wapu-product-view-woo-tag-size, .625rem); line-height: 1; text-align: center; white-space: nowrap; overflow: visible; clip-path: none; border-radius: 0; } .wapu-product-card[data-product-view-woo-tag-family="rounded"] :where(.wapu-wc-product-tag--archive,.wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag) { border-radius: 999px; } .wapu-product-card[data-product-view-woo-tag-family="editorial"] :where(.wapu-wc-product-tag--archive,.wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag) { border-radius: 8px; } .wapu-product-card[data-product-view-woo-tag-family="minimal"] :where(.wapu-wc-product-tag--archive,.wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag) { min-height: auto; padding: .25rem 0; border-width: 0 0 1px; border-radius: 0; background: transparent; box-shadow: none; } .wapu-product-card[data-product-view-woo-tag-family="circle"] :where(.wapu-wc-product-tag--archive,.wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag) { width: 4rem; height: 4rem; min-width: 4rem; max-width: 4rem; min-height: 4rem; padding: .5rem; border-radius: 50%; white-space: normal; line-height: 1.08; overflow: hidden; } .wapu-product-card[data-product-view-woo-tag-family="seal"] :where(.wapu-wc-product-tag--archive,.wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag) { width: 4.25rem; height: 4.25rem; min-width: 4.25rem; max-width: 4.25rem; min-height: 4.25rem; padding: .625rem; border-radius: 50%; white-space: normal; line-height: 1.05; overflow: hidden; clip-path: polygon(50% 0,61% 10%,76% 5%,83% 20%,100% 28%,92% 45%,100% 61%,84% 71%,80% 89%,63% 86%,50% 100%,37% 88%,20% 94%,16% 75%,0 66%,8% 50%,0 33%,17% 23%,22% 6%,39% 12%); } .wapu-product-card[data-product-view-woo-tag-family="tag"] :where(.wapu-wc-product-tag--archive,.wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag) { min-height: 2rem; padding: 0 1.25rem 0 .75rem; border-radius: 4px; clip-path: polygon(0 0,84% 0,100% 50%,84% 100%,0 100%); } .wapu-product-card[data-product-view-woo-tag-family="ticket"] :where(.wapu-wc-product-tag--archive,.wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag) { min-height: 2rem; padding: 0 .9375rem; border-radius: 4px; clip-path: polygon(0 0,100% 0,100% 32%,94% 50%,100% 68%,100% 100%,0 100%,0 68%,6% 50%,0 32%); } .wapu-product-card[data-product-view-woo-tag-family="ribbon"] :where(.wapu-wc-product-tag--archive,.wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag) { min-height: 2rem; padding: 0 1.4375rem 0 .75rem; border-radius: 5px 0 0 5px; clip-path: polygon(0 0,100% 0,88% 50%,100% 100%,0 100%); } .wapu-product-card[data-product-view-woo-tag-family="drop"] :where(.wapu-wc-product-tag--archive,.wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag) { width: 4.25rem; height: 3.75rem; min-width: 4.25rem; max-width: 4.25rem; min-height: 3.75rem; padding: .5625rem .625rem; border-radius: 50% 50% 50% 14%; white-space: normal; line-height: 1.06; overflow: hidden; } /* The previous-generation kit pill has !important geometry in its own base * stylesheet. These scoped declarations are intentionally the compatibility * bridge and therefore match that priority without leaking into Studio UI. */ .wapu-product-card[data-product-view-woo-tag-family="rounded"] .wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag { border-radius:999px !important; clip-path:none !important; } .wapu-product-card[data-product-view-woo-tag-family="editorial"] .wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag { border-radius:8px !important; clip-path:none !important; } .wapu-product-card[data-product-view-woo-tag-family="minimal"] .wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag { border-radius:0 !important; clip-path:none !important; } .wapu-product-card[data-product-view-woo-tag-family="circle"] .wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag { border-radius:50% !important; } .wapu-product-card[data-product-view-woo-tag-family="seal"] .wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag { border-radius:50% !important; clip-path:polygon(50% 0,61% 10%,76% 5%,83% 20%,100% 28%,92% 45%,100% 61%,84% 71%,80% 89%,63% 86%,50% 100%,37% 88%,20% 94%,16% 75%,0 66%,8% 50%,0 33%,17% 23%,22% 6%,39% 12%) !important; } .wapu-product-card[data-product-view-woo-tag-family="tag"] .wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag { border-radius:4px !important; clip-path:polygon(0 0,84% 0,100% 50%,84% 100%,0 100%) !important; } .wapu-product-card[data-product-view-woo-tag-family="ticket"] .wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag { border-radius:4px !important; clip-path:polygon(0 0,100% 0,100% 32%,94% 50%,100% 68%,100% 100%,0 100%,0 68%,6% 50%,0 32%) !important; } .wapu-product-card[data-product-view-woo-tag-family="ribbon"] .wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag { border-radius:5px 0 0 5px !important; clip-path:polygon(0 0,100% 0,88% 50%,100% 100%,0 100%) !important; } .wapu-product-card[data-product-view-woo-tag-family="drop"] .wapu-kit-badge--woo-tag .wapu-kit-badge__pill--woo-tag { border-radius:50% 50% 50% 14% !important; clip-path:none !important; } .wapu-product-card[data-product-view-woo-tag-position="top-left"] > .wapu-wc-product-tag--archive, .wapu-product-card[data-product-view-woo-tag-position="top-left"] .wapu-product-card__media > .wapu-wc-product-tag--archive { top:var(--wtds-s-1,.75rem);right:auto;bottom:auto;left:var(--wtds-s-1,.75rem); } .wapu-product-card[data-product-view-woo-tag-position="top-right"] > .wapu-wc-product-tag--archive, .wapu-product-card[data-product-view-woo-tag-position="top-right"] .wapu-product-card__media > .wapu-wc-product-tag--archive { top:var(--wtds-s-1,.75rem);right:var(--wtds-s-1,.75rem);bottom:auto;left:auto; } .wapu-product-card[data-product-view-woo-tag-position="bottom-left"] > .wapu-wc-product-tag--archive, .wapu-product-card[data-product-view-woo-tag-position="bottom-left"] .wapu-product-card__media > .wapu-wc-product-tag--archive { top:auto;right:auto;bottom:var(--wtds-s-1,.75rem);left:var(--wtds-s-1,.75rem); } .wapu-product-card[data-product-view-woo-tag-position="bottom-right"] > .wapu-wc-product-tag--archive, .wapu-product-card[data-product-view-woo-tag-position="bottom-right"] .wapu-product-card__media > .wapu-wc-product-tag--archive { top:auto;right:var(--wtds-s-1,.75rem);bottom:var(--wtds-s-1,.75rem);left:auto; } /* [v7.7.7] Archive editorial Pins — the Pin canvas ratio owns its footprint. * Legacy main.css gives every editorial tile a fixed tall 2-column box. Pins * are interactive compositions, so their public ratio must survive inside the * catalog grid. Size modifiers remain the grid contract; panoramic Pins are * emitted as 2x1 by archive-grid.php. */ .wapu-archive__grid > .wapu-editorial-tile--pin { height: auto; min-height: 0; grid-row: auto; align-self: start; } .wapu-archive__grid > .wapu-editorial-tile--pin.wapu-editorial-tile--1x1 { grid-column: span 1; aspect-ratio: 1 / 1; } .wapu-archive__grid > .wapu-editorial-tile--pin.wapu-editorial-tile--2x1 { grid-column: span 2; aspect-ratio: 16 / 9; } .wapu-archive__grid > .wapu-editorial-tile--pin.wapu-editorial-tile--1x2 { grid-column: span 1; aspect-ratio: 1 / 2; } .wapu-archive__grid > .wapu-editorial-tile--pin.wapu-editorial-tile--2x2 { grid-column: span 2; aspect-ratio: 1 / 1; } .wapu-archive__grid > .wapu-editorial-tile--pin.wapu-editorial-tile--pin-landscape { aspect-ratio: 16 / 9; } /* [2026-08-28] Archive product-card breathing room. * Playground's current ProductCard has a more editorial content rhythm, so * desktop catalog grids need additional separation between cards. Keep the * tighter responsive rhythm below the desktop breakpoint. */ @media (min-width: 48.0625rem) { .wapu-archive__grid { row-gap: var(--wtds-s-5); column-gap: var(--wtds-s-3); } } /* Archive toolbar — count + sort + filters share one control row. */ .wapu-archive__toolbar-right{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--wtds-s-1);min-width:0} .wapu-archive__allfilters-btn{flex:0 0 auto;white-space:nowrap;min-height:2.75rem} .wapu-archive__sort-wrap{flex:0 1 auto;min-width:0} @container wapu-catalog (max-width:48rem){ .wapu-archive__toolbar-right{display:flex;inline-size:100%;margin-inline-start:0;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none} .wapu-archive__toolbar-right::-webkit-scrollbar{display:none} .wapu-archive__sort-wrap,.wapu-archive__sort-btn,.wapu-archive__collections-btn,.wapu-archive__allfilters-btn{width:auto;min-width:max-content} } @container wapu-catalog (max-width:30rem){ .wapu-archive__toolbar-right{display:flex;grid-template-columns:none} } /* Mobile archive toolbar — keep one row by collapsing Filters to an icon button. */ @container wapu-catalog (max-width:30rem){ .wapu-archive__count{display:none} .wapu-archive__allfilters-btn{inline-size:2.75rem;min-inline-size:2.75rem;padding-inline:0;justify-content:center;gap:0} .wapu-archive__allfilters-btn .wapu-btn__label{display:none} .wapu-archive__allfilters-btn .wapu-btn__icon{margin:0} .wapu-archive__allfilters-btn .wapu-badge--count{position:absolute;inset-block-start:-.2rem;inset-inline-end:-.2rem} }