:root{--single-gutter: min(4.5rem, 5vw);--single-pre-h: 2.5rem;--single-pre-pt: min(1.5rem, 1.8vw);--single-thumb-w: min(5.5rem, 6vw);--single-thumb-item-h: min(4.75rem, 5.2vw);--single-offcanvas-w: min(48.875rem, 42vw);--single-bar-h: min(5rem, 5.5vw)}.wapu-single{background:var(--wtds-surface);min-height:calc(100vh - 7.375rem);padding-bottom:calc(var(--single-bar-h) + 2rem);position:relative;max-width:120rem;margin-left:auto;margin-right:auto}.wapu-single__pre{display:flex;align-items:center;justify-content:space-between;padding:var(--single-pre-pt) var(--single-gutter) 0;height:calc(var(--single-pre-pt) + var(--single-pre-h));max-width:90rem;margin-left:auto;margin-right:auto}.wapu-single__breadcrumb{font-family:var(--wtds-font-display);font-size:var(--wtds-fs-caption-1);font-weight:var(--wtds-fw-regular);color:var(--wtds-ink-3);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:37.5rem;transition:opacity .15s}.wapu-single__breadcrumb:hover{opacity:.65}.wapu-single__tabs{display:flex;gap:var(--wtds-s-1);background:transparent;border:none;overflow:visible;border-radius:0}.wapu-single__tab{display:inline-flex;align-items:center;justify-content:center;min-height:2rem;padding:0 var(--wtds-s-2);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);line-height:var(--wtds-lh-snug);color:var(--wtds-ink-3);cursor:pointer;white-space:nowrap;transition:background-color var(--wtds-dur-fast) var(--wtds-ease),color var(--wtds-dur-fast) var(--wtds-ease)}.wapu-single__tab--active{background:var(--wtds-fill-4);color:var(--wtds-ink);font-weight:var(--wtds-fw-semibold);box-shadow:none}.wapu-single__tab:not(.wapu-single__tab--active):hover{background:var(--wtds-fill-4);color:var(--wtds-ink-2)}.wapu-single__tab:focus-visible{outline:none;box-shadow:var(--wtds-shadow-focus)}.wapu-single__content{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);align-items:start;padding:2rem var(--single-gutter) 0;gap:2.5rem;max-width:90rem;margin-left:auto;margin-right:auto}.wapu-single__gallery{display:grid;grid-template-columns:1fr var(--single-thumb-w);gap:.75rem;align-items:start}.wapu-single__main-image{width:100%;aspect-ratio:1;border-radius:var(--wtds-r-md);overflow:hidden;background:var(--wtds-surface-2);position:relative}.wapu-single__main-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-width:none;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center;display:block}.wapu-single__thumbs{display:flex;flex-direction:column;align-items:center;width:100%;gap:.5rem;padding:0 .25rem}.wapu-single__thumb-nav{width:2.5625rem;height:2.5625rem;display:flex;align-items:center;justify-content:center;background:var(--wtds-surface-2);border:none;cursor:pointer;color:var(--wtds-ink-2);border-radius:50%;flex-shrink:0;transition:background .15s}.wapu-single__thumb-nav:hover{background:var(--wtds-separator-soft)}.wapu-single__thumb-nav:disabled{opacity:.3;cursor:default}.wapu-single__thumb-track{display:flex;flex-direction:column;gap:.5rem;width:100%}.wapu-single__thumb{position:relative;width:100%;height:var(--single-thumb-item-h);flex-shrink:0;border-radius:var(--wtds-r-md);overflow:hidden;border:.125rem solid transparent;background:var(--wtds-surface-2);padding:0;cursor:pointer;transition:border-color .18s,box-shadow .18s,filter .25s}.wapu-single__thumb img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-width:none;-o-object-fit:cover;object-fit:cover;display:block}.wapu-single__thumb:not(.wapu-single__thumb--active){filter:grayscale(100%);opacity:.55}.wapu-single__thumb:not(.wapu-single__thumb--active):hover{filter:grayscale(40%);opacity:.8;border-color:var(--wtds-ink-4)}.wapu-single__thumb--active{border-color:var(--wtds-ink);box-shadow:0 1.25rem 1.25rem -1.25rem var(--wtds-shadow-color-soft);filter:grayscale(0%);opacity:1}.wapu-single__info{min-width:0;display:flex;flex-direction:column;gap:1.25rem}.wapu-single__brand-eyebrow{display:inline-flex;align-items:center;gap:.75rem;margin-bottom:.75rem;font-family:var(--wtds-font-text);font-size:var(--wtds-fs-caption-2);font-weight:var(--wtds-fw-semibold);letter-spacing:.3em;text-transform:uppercase;color:var(--wtds-ink)}.wapu-single__brand-eyebrow:after{content:"";display:inline-block;width:2rem;height:.5px;background:var(--drop-accent, var(--wtds-separator))}.wapu-single__brand-link{color:inherit;text-decoration:none;transition:opacity var(--wtds-dur-fast) var(--wtds-ease)}.wapu-single__brand-link:hover{opacity:.65}.wapu-single__brand-text{color:inherit}.wapu-single__title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:0}.wapu-single__title{font-family:var(--wtds-font-display);font-size:var(--wtds-fs-title-2);font-weight:300;font-style:normal;line-height:1.15;letter-spacing:-.02em;color:var(--wtds-ink);margin:0;flex:1;min-width:0}.wapu-single__share{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:.5px solid var(--wtds-ink-4);border-radius:50%;background:transparent;color:var(--wtds-ink-3);cursor:pointer;flex-shrink:0;margin-top:.25rem;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-single__share:hover,.wapu-single__share:focus-visible{background:var(--wtds-fill-4);color:var(--wtds-ink);border-color:var(--wtds-ink);outline:none}.wapu-single__share svg{width:1rem;height:1rem;display:block}.wapu-single__share.is-active{background:var(--wtds-ink);color:var(--wtds-surface);border-color:var(--wtds-ink)}.wapu-share-menu{position:absolute;top:calc(100% + .5rem);right:0;min-width:12.5rem;background:var(--wtds-surface);border:.5px solid var(--wtds-separator-soft);border-radius:.75rem;padding:.375rem;box-shadow:0 .5rem 1.5rem var(--wtds-shadow-color-soft);z-index:100;opacity:0;transform:translateY(-.25rem);pointer-events:none;transition:opacity .18s ease,transform .18s ease}.wapu-share-menu.is-open{opacity:1;transform:translateY(0);pointer-events:auto}.wapu-share-menu__item{display:flex;align-items:center;gap:.625rem;width:100%;padding:.625rem .75rem;border:0;background:transparent;color:var(--wtds-ink);font-family:var(--wtds-font-text);font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-regular);text-align:left;cursor:pointer;border-radius:var(--wtds-r-xs);text-decoration:none}.wapu-share-menu__item:hover{background:var(--wtds-fill-4)}.wapu-share-menu__item svg{width:1rem;height:1rem;flex-shrink:0;color:var(--wtds-ink-3)}.wapu-share-menu__item--copied svg{color:var(--wtds-success)}.wapu-single__share-wrap{position:relative;display:inline-block}.wapu-single__title em{font-style:italic;color:var(--drop-primary, inherit);font-weight:var(--wtds-fw-regular)}.wapu-single__desc-wrap{display:flex;flex-direction:column;gap:.625rem}.wapu-single__desc{font-family:var(--wtds-font-text);font-size:var(--wtds-fs-subhead);font-weight:var(--wtds-fw-regular);line-height:1.5;color:var(--wtds-ink-3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.wapu-single__ver-mas{display:inline-flex;align-items:center;gap:.25rem;align-self:flex-start;background:none;border:none;padding:.3125rem .75rem .3125rem 0;font-family:var(--wtds-font-display);font-size:var(--wtds-fs-caption-1);font-weight:var(--wtds-fw-semibold);color:var(--wtds-ink);cursor:pointer;transition:gap .2s ease,opacity .15s;text-decoration:none;white-space:nowrap;letter-spacing:.01em}.wapu-single__ver-mas:hover{gap:.5rem;opacity:.85}.wapu-single__price{line-height:1.2}.wapu-single__price .wapu-price--single{display:flex;flex-direction:column;gap:.375rem;align-items:flex-start}.wapu-single__price .wapu-price__row{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.75rem}.wapu-single__price .wapu-price__current{font-family:var(--wtds-font-display);font-size:var(--wtds-fs-title-2);font-weight:var(--wtds-fw-medium);color:var(--wtds-ink);line-height:1;letter-spacing:-.01em}.wapu-single__price .wapu-price__cents{font-size:.6em;font-weight:var(--wtds-fw-semibold);opacity:.7;margin-left:-1px;vertical-align:baseline}.wapu-single__price .wapu-price__old{font-family:var(--wtds-font-text);font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-regular);color:var(--wtds-ink-4);text-decoration:line-through;line-height:1}.wapu-single__price .wapu-price__from{font-family:var(--wtds-font-display);font-size:var(--wtds-fs-caption-1);font-weight:var(--wtds-fw-medium);color:var(--wtds-ink-3);line-height:1;margin-right:-.25rem}.wapu-single__price .wapu-price__pills{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}.wapu-sale-pill{display:inline-flex;align-items:center;padding:var(--wtds-s-1) var(--wtds-s-2);background:var(--wtds-danger-soft);color:var(--wtds-danger);border-radius:var(--wtds-r-pill);font-family:var(--wtds-font-display);font-size:var(--wtds-fs-caption-2);font-weight:var(--wtds-fw-semibold);letter-spacing:var(--wtds-ls-tight);line-height:1;cursor:help;position:relative;text-decoration:none;white-space:nowrap;transition:background-color var(--wtds-dur-fast) var(--wtds-ease)}.wapu-sale-pill:hover,.wapu-sale-pill:focus-visible{background:var(--wtds-danger-soft)}.wapu-sale-pill:focus-visible{outline:none;box-shadow:var(--wtds-shadow-focus)}.wapu-sale-pill:hover .wapu-tooltip,.wapu-sale-pill:focus .wapu-tooltip,.wapu-sale-pill:focus-within .wapu-tooltip{opacity:1;visibility:visible;transform:translate(-50%) translateY(0);transition:opacity var(--wtds-dur-fast) var(--wtds-ease),transform var(--wtds-dur-fast) var(--wtds-ease),visibility 0s linear 0s}.wapu-single__variants{display:flex;flex-direction:column;gap:1rem}.wapu-single__variants-header{display:flex;align-items:center;justify-content:space-between}.wapu-single__variants-label-wrap{display:flex;flex-direction:column;gap:.1875rem}.wapu-single__variant-count{font-family:var(--wtds-font-display);font-size:var(--wtds-fs-caption-2);font-weight:var(--wtds-fw-semibold);text-transform:uppercase;letter-spacing:.1em;color:var(--wtds-ink-3)}.wapu-single__variants-label{font-family:var(--wtds-font-display);font-size:var(--wtds-fs-callout);font-weight:var(--wtds-fw-semibold);color:var(--wtds-ink)}.wapu-single__view-toggle{position:relative;display:flex;gap:0;background:var(--wtds-fill-3);border:none;border-radius:var(--wtds-r-sm);padding:.125rem;overflow:hidden}.wapu-single__view-indicator{position:absolute;top:.125rem;left:0;height:calc(100% - .25rem);border-radius:calc(var(--wtds-r-sm) - .125rem);background:var(--wtds-surface);box-shadow:var(--wtds-shadow-sm);pointer-events:none;z-index:0}.wapu-single__view-btn{position:relative;z-index:1;width:var(--wtds-s-4);height:var(--wtds-s-4);display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--wtds-ink-4);transition:color var(--wtds-dur-fast) var(--wtds-ease)}.wapu-single__view-btn:hover{color:var(--wtds-ink-3)}.wapu-single__view-btn--active{color:var(--wtds-ink)}.wapu-single__view-btn--active svg{color:var(--wtds-ink)}.wapu-single__view-btn--active svg line,.wapu-single__view-btn--active svg rect,.wapu-single__view-btn--active svg path{stroke:currentColor}.wapu-single__view-btn--active svg circle{fill:currentColor}.wapu-single__variant-items--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.75rem,4rem));justify-content:start;gap:.875rem .75rem}.wapu-single__variant-items--list{display:flex;flex-direction:column;gap:0;background:var(--wtds-surface);border:1px solid var(--wtds-surface-2);border-radius:var(--wtds-r-md);overflow-x:hidden;overflow-y:auto;max-height:22.25rem;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--wtds-separator-soft) transparent}.wapu-single__actions-row{display:flex;align-items:center;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--wtds-outline-soft);position:relative}.wapu-single__actions-row .wcpl-list-popup{top:calc(100% + .5rem);left:0;right:auto;bottom:auto;max-width:min(17.5rem,calc(100vw - 2rem));min-width:min(12.5rem,calc(100vw - 2rem))}.wapu-single__action-btn{display:inline-flex;align-items:center;gap:var(--wtds-s-1);padding:var(--wtds-s-1) var(--wtds-s-2);border-radius:var(--wtds-r-sm);border:var(--wtds-border-thin) solid var(--wtds-separator-soft);background:var(--wtds-surface);color:var(--wtds-ink-2);font-size:var(--wtds-fs-caption-1);font-weight:var(--wtds-fw-medium);font-family:var(--wtds-font-text);cursor:pointer;transition:border-color var(--wtds-dur-fast) var(--wtds-ease),background-color var(--wtds-dur-fast) var(--wtds-ease),color var(--wtds-dur-fast) var(--wtds-ease);white-space:nowrap}.wapu-single__action-btn:hover{border-color:var(--wtds-separator);background:var(--wtds-surface-2)}.wapu-single__action-btn.is-active{color:var(--wtds-danger);border-color:var(--wtds-danger-soft);background:var(--wtds-danger-soft)}.wapu-single__action-btn:disabled{opacity:.4;cursor:not-allowed}.wapu-single__variant-items--list::-webkit-scrollbar{width:.25rem}.wapu-single__variant-items--list::-webkit-scrollbar-track{background:transparent}.wapu-single__variant-items--list::-webkit-scrollbar-thumb{background:var(--wtds-separator-soft);border-radius:.25rem}.wapu-single__variant-items--list::-webkit-scrollbar-thumb:hover{background:var(--wtds-ink-4)}.wapu-single__variant-item{background:none;border:.5px solid var(--wtds-separator-soft);border-radius:var(--wtds-r-xs);cursor:pointer;padding:0;overflow:hidden;transition:border-color .18s,box-shadow .18s;text-align:left;display:flex}.wapu-single__variant-item:hover{border-color:var(--wtds-ink-4)}.wapu-single__variant-item[aria-selected=true],.wapu-single__variant-item--selected{border-color:var(--wtds-ink);box-shadow:0 0 0 1px var(--wtds-ink)}.wapu-single__variant-item--sold-out{opacity:.4;cursor:not-allowed}.wapu-single__variant-items--grid .wapu-single__variant-item{flex-direction:column;align-items:center;gap:var(--wtds-s-1);border:0;border-radius:0;padding:var(--wtds-s-1);background:transparent}.wapu-single__variant-items--grid .wapu-single__variant-item:hover{border-color:transparent;background:transparent}.wapu-single__variant-items--grid .wapu-single__variant-item[aria-selected=true],.wapu-single__variant-items--grid .wapu-single__variant-item--selected{border:0;box-shadow:none;background:transparent}.wapu-single__variant-items--grid .wapu-single__variant-thumb{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--wtds-surface-2);transition:box-shadow var(--wtds-dur-fast) var(--wtds-ease)}.wapu-single__variant-items--grid .wapu-single__variant-item[aria-selected=true] .wapu-single__variant-thumb,.wapu-single__variant-items--grid .wapu-single__variant-item--selected .wapu-single__variant-thumb{box-shadow:0 0 0 .09375rem var(--wtds-ink)}.wapu-single__variant-items--grid .wapu-single__variant-meta{padding:0;display:flex;flex-direction:column;align-items:center;gap:.125rem;text-align:center;width:100%}.wapu-single__variant-items--grid .wapu-single__variant-name{font-family:var(--wtds-font-text);font-size:var(--wtds-fs-caption-2);font-weight:var(--wtds-fw-regular);color:var(--wtds-ink-2);line-height:1.2;letter-spacing:0}.wapu-single__variant-items--grid .wapu-single__variant-item[aria-selected=true] .wapu-single__variant-name,.wapu-single__variant-items--grid .wapu-single__variant-item--selected .wapu-single__variant-name{color:var(--wtds-ink);font-weight:var(--wtds-fw-medium)}.wapu-single__variant-items--list .wapu-single__variant-item{flex-direction:row;border-radius:0;border:none;border-bottom:1px solid var(--wtds-surface-2);padding:1.125rem 1rem;align-items:center;gap:1.125rem;min-height:5.75rem}.wapu-single__variant-items--list .wapu-single__variant-item:last-child{border-bottom:none}.wapu-single__variant-items--list .wapu-single__variant-item[aria-selected=true],.wapu-single__variant-items--list .wapu-single__variant-item--selected{background:var(--wtds-surface-2);box-shadow:none}.wapu-single__variant-items--list .wapu-single__variant-thumb{width:clamp(3rem,3.6vw,3.875rem);height:clamp(3rem,3.6vw,3.875rem);min-width:3rem;min-height:3rem;border-radius:25rem;border:.125rem solid var(--wtds-separator-soft);box-shadow:0 1.25rem 1.25rem -1.25rem var(--wtds-shadow-color-soft);overflow:hidden;background:var(--wtds-surface-2);flex-shrink:0}.wapu-single__variant-items--list .wapu-single__variant-item[aria-selected=true] .wapu-single__variant-thumb,.wapu-single__variant-items--list .wapu-single__variant-item--selected .wapu-single__variant-thumb{border-color:var(--wtds-ink)}.wapu-single__variant-items--list .wapu-single__variant-meta{flex:1;display:flex;flex-direction:column;gap:.125rem}.wapu-single__variant-items--list .wapu-single__variant-name{font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wapu-single__variant-thumb img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.wapu-single__variant-swatch{display:block;width:100%;height:100%;border-radius:inherit;background-size:cover;background-position:center;background-repeat:no-repeat}.wapu-single__variant-items--grid .wapu-single__variant-swatch{border-radius:0}.wapu-single__variant-items--list .wapu-single__variant-swatch{border-radius:50%}.wapu-single__variant-item--sold-out .wapu-single__variant-swatch{position:relative}.wapu-single__variant-item--sold-out .wapu-single__variant-swatch:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top right,transparent calc(50% - .75px),var(--wtds-danger) 50%,transparent calc(50% + .75px));border-radius:inherit}.wapu-single__variant-name{font-family:var(--wtds-font-display);font-size:var(--wtds-fs-caption-2);font-weight:var(--wtds-fw-medium);color:var(--wtds-ink);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wapu-single__main-image:hover .wapu-single__main-img{transform:scale(1.06)}.wapu-single__offcanvas{position:fixed;top:0;right:0;bottom:0;width:min(35rem,42vw);min-width:21.25rem;background:var(--wtds-surface);z-index:1000;transform:translate(100%);transition:transform var(--wtds-dur) var(--wtds-ease);overflow:hidden;display:flex;flex-direction:column;box-shadow:-.125rem 0 3.75rem var(--wtds-shadow-color-soft)}.wapu-single__offcanvas[aria-hidden=false]{transform:translate(0)}.wapu-single__offcanvas-topbar{display:flex;align-items:center;justify-content:flex-end;padding:1.75rem 2.5rem 1.5rem;border-bottom:1px solid var(--wtds-surface-2);flex-shrink:0}.wapu-single__offcanvas-close{border-radius:var(--wtds-r-pill);background:var(--wtds-surface-2);font-family:var(--wtds-font-display);font-size:var(--wtds-fs-caption-2);font-weight:var(--wtds-fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--wtds-ink-3);padding:0 1rem;transition:background .18s,color .18s}.wapu-single__offcanvas-close:hover:not(:disabled):not(.wapu-btn--loading){background:var(--wtds-separator-soft);color:var(--wtds-ink)}.wapu-single__offcanvas-panel{padding:2.5rem 2.5rem 3rem;flex:1;display:flex;flex-direction:column;gap:2rem;min-height:0;overflow-y:auto}.wapu-single__offcanvas-panel[hidden]{display:none}.wapu-single__offcanvas-title{font-family:var(--wtds-font-display);font-size:var(--wtds-fs-title-2);font-weight:var(--wtds-fw-bold);line-height:1.35;letter-spacing:-.01em;color:var(--wtds-ink);margin:0;flex-shrink:0}.wapu-single__offcanvas-title--similares{font-size:var(--wtds-fs-callout)}.wapu-single__offcanvas-desc-wrap{flex:1;position:relative;overflow:hidden;min-height:0}.wapu-single__offcanvas-desc-wrap:after{content:"";position:absolute;bottom:0;left:0;right:0;height:6.25rem;background:linear-gradient(to bottom,var(--wtds-glass-faint),var(--wtds-surface-translucent));pointer-events:none}.wapu-single__offcanvas-desc{font-family:var(--wtds-font-text);font-size:var(--wtds-fs-body);font-weight:var(--wtds-fw-regular);line-height:1.65;color:var(--wtds-ink-3);height:100%;overflow-y:auto;padding-bottom:3rem}.wapu-single__offcanvas-desc p{margin:0}.wapu-single__offcanvas-desc p+p{margin-top:.875rem}.wapu-single__related-list{display:flex;flex-direction:column;gap:0;margin:0 -.5rem}.wapu-single__related-card{display:flex;align-items:center;gap:1.25rem;padding:1rem .5rem;border-bottom:1px solid var(--wtds-surface-2);text-decoration:none;color:inherit;border-radius:var(--wtds-r-xs);transition:background .18s}.wapu-single__related-card:first-child{border-top:1px solid var(--wtds-surface-2)}.wapu-single__related-card:hover{background:var(--wtds-surface-2)}.wapu-single__related-thumb{width:5.5rem;height:5.5rem;border-radius:var(--wtds-r-xs);overflow:hidden;background:var(--wtds-surface-2);flex-shrink:0}.wapu-single__related-thumb img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.wapu-single__related-info{flex:1;display:flex;flex-direction:column;gap:.25rem;min-width:0}.wapu-single__related-brand{font-family:var(--wtds-font-display);font-size:var(--wtds-fs-caption-2);font-weight:var(--wtds-fw-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--wtds-ink-4);display:block}.wapu-single__related-name{font-family:var(--wtds-font-text);font-size:var(--wtds-fs-footnote);color:var(--wtds-ink);display:block;line-height:1.45}.wapu-single__related-price{font-family:var(--wtds-font-text);font-size:var(--wtds-fs-caption-1);font-weight:var(--wtds-fw-semibold);color:var(--wtds-ink-3);display:block}.wapu-single__related-cta{display:block;text-align:center;margin-top:.5rem;padding:1.125rem 1.75rem;background:var(--wtds-ink);border-radius:var(--wtds-r-pill);font-family:var(--wtds-font-display);font-size:var(--wtds-fs-caption-2);font-weight:var(--wtds-fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--wtds-surface);text-decoration:none;transition:background .18s}.wapu-single__related-cta:hover{background:var(--wtds-ink-2)}.wapu-single__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--wtds-scrim);backdrop-filter:blur(.1875rem);-webkit-backdrop-filter:blur(.1875rem);z-index:999;opacity:0;pointer-events:none;transition:opacity var(--wtds-dur) var(--wtds-ease)}.wapu-single__overlay--visible{opacity:1;pointer-events:all}body.wapu-offcanvas-open{overflow:hidden}.wapu-single__cart-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--wtds-scrim-strong);z-index:1301;opacity:0;pointer-events:none;transition:opacity .28s ease}.wapu-single__cart-overlay--visible{opacity:1;pointer-events:auto}body.wapu-cart-sheet-open{overflow:hidden}.wapu-single__cart-sheet{position:fixed;left:0;right:0;bottom:0;width:100%;margin-left:0;margin-right:0;background:var(--wtds-surface);border-radius:1.375rem 1.375rem 0 0;box-shadow:0 -.75rem 2.75rem var(--wtds-shadow-color-strong);z-index:1305;height:52svh;max-height:52svh;display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translate3d(0,110%,0);transition:transform .36s cubic-bezier(.22,1,.36,1),opacity .28s ease}.wapu-single__cart-sheet.is-open{opacity:1;pointer-events:auto;transform:translateZ(0)}.wapu-single__cart-sheet.is-gsap-opening,.wapu-single__cart-overlay.is-gsap-opening,.wapu-single__cart-sheet.is-dragging{transition:none}.wapu-single__cart-sheet-headbar{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:.75rem 1rem .375rem;touch-action:none}.wapu-single__cart-sheet-pill{width:2.875rem;height:.5625rem;border:none;border-radius:var(--wtds-r-pill);background:var(--wtds-separator-soft);cursor:grab;touch-action:none}.wapu-single__cart-sheet-pill:active{cursor:grabbing}.wapu-single__cart-sheet-close{position:absolute;right:.75rem;top:.5rem;width:2.125rem;height:2.125rem;border:none;border-radius:var(--wtds-r-pill);background:var(--wtds-surface-2);color:var(--wtds-ink-2);font-size:1.25rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.wapu-single__cart-sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:.5rem 1.25rem calc(1.125rem + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:.875rem}.wapu-single__cart-sheet-product{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:.875rem;align-items:center}.wapu-single__cart-sheet-thumb{width:5.5rem;height:5.5rem;border-radius:.75rem;overflow:hidden;background:var(--wtds-surface-2)}.wapu-single__cart-sheet-thumb img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.wapu-single__cart-sheet-copy{min-width:0;display:flex;flex-direction:column;gap:.25rem}.wapu-single__cart-sheet-title{margin:0;font-family:var(--wtds-font-display);font-size:var(--wtds-fs-callout);font-weight:var(--wtds-fw-bold);line-height:1.3;color:var(--wtds-ink)}.wapu-single__cart-sheet-name{margin:0;font-family:var(--wtds-font-display);font-size:var(--wtds-fs-subhead);font-weight:var(--wtds-fw-medium);color:var(--wtds-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wapu-single__cart-sheet-qty{margin:0;font-family:var(--wtds-font-display);font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-semibold);color:var(--wtds-ink-3)}.wapu-single__cart-sheet-subtitle{margin:0;font-family:var(--wtds-font-display);font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-semibold);color:var(--wtds-ink-3);letter-spacing:.01em}.wapu-single__cart-sheet-related-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(7.625rem,1fr);gap:.625rem;overflow-x:auto;overflow-y:hidden;padding-bottom:.125rem;scrollbar-width:none}.wapu-single__cart-sheet-related-list::-webkit-scrollbar{display:none}.wapu-single__cart-sheet-related-card{text-decoration:none;border:.5px solid var(--wtds-separator-soft);border-radius:.75rem;background:var(--wtds-surface);padding:.625rem;display:flex;flex-direction:column;gap:.5rem;min-height:10.25rem}.wapu-single__cart-sheet-related-thumb{width:100%;aspect-ratio:1;border-radius:var(--wtds-r-sm);overflow:hidden;background:var(--wtds-surface-2);display:block}.wapu-single__cart-sheet-related-thumb img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.wapu-single__cart-sheet-related-name{font-family:var(--wtds-font-display);font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-semibold);line-height:1.25;color:var(--wtds-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wapu-single__cart-sheet-related-price{font-family:var(--wtds-font-text);font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-bold);color:var(--wtds-ink-2);margin-top:auto}.wapu-single__cart-sheet-related-price .woocommerce-Price-amount{font-size:inherit;font-weight:inherit;color:inherit}.wapu-single__cart-sheet-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem;margin-top:auto}.wapu-single__cart-sheet-cta{width:100%;height:2.875rem;border-radius:var(--wtds-r-pill);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-family:var(--wtds-font-display);font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-bold);white-space:nowrap;padding:0 1rem}.wapu-single__cart-sheet-cta--ghost{background:var(--wtds-surface-2);color:var(--wtds-ink-2)}.wapu-single__cart-sheet-cta--primary{background:var(--wtds-ink);color:var(--wtds-surface)}.wapu-single__cart-bar{position:fixed;bottom:0;left:0;right:0;height:var(--single-bar-h);background:var(--wtds-surface-2);border-top:none;z-index:990;overflow:hidden}.wapu-single__cart-form{height:100%}.wapu-single__cart-bar-inner{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;height:100%;padding:0 var(--single-gutter)}.wapu-single__qty-select-wrap{display:flex;align-items:center;justify-content:center;border:.1rem solid var(--wtds-surface-2);border-radius:.75rem;background:var(--wtds-surface);padding:0 1rem;height:min(3.25rem,3.5vw);min-height:2.875rem;width:min(16.25rem,17vw);cursor:pointer;position:relative;box-shadow:0 1px .125rem var(--wtds-shadow-color-faint);flex-shrink:0}.wapu-single__qty-select{flex:1;width:100%;background:none;border:none;outline:none;font-family:var(--wtds-font-display);font-size:var(--wtds-fs-caption-1);font-weight:var(--wtds-fw-bold);color:var(--wtds-ink-2);cursor:pointer;padding:0 1.5rem;box-shadow:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;text-align:center;-moz-text-align-last:center;text-align-last:center}.wapu-single__qty-chevron{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--wtds-ink-2);flex-shrink:0}.wapu-single__add-btn{height:3rem;min-height:3rem;width:auto;min-width:11.25rem;max-width:16.25rem;padding:0 var(--wtds-s-3);background:var(--wtds-ink);color:var(--wtds-surface);border:none;border-radius:var(--wtds-r-pill);font-family:var(--wtds-font-text);font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-medium);letter-spacing:var(--wtds-ls-wide);text-transform:uppercase;cursor:pointer;transition:transform var(--wtds-dur-fast) var(--wtds-ease),opacity var(--wtds-dur-fast) var(--wtds-ease);white-space:nowrap;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:0;position:relative}.wapu-single__add-btn:hover:not(:disabled){opacity:.88;transform:translateY(-1px)}.wapu-single__add-btn:disabled{background:var(--wtds-ink-3);color:var(--wtds-surface);cursor:not-allowed}.wapu-single__add-btn.added{background:var(--wtds-success)}.wapu-single__add-btn.loading,.wapu-single__add-btn.is-loading{opacity:.95;cursor:wait}.wapu-single__add-btn-label{display:inline-flex;align-items:center;justify-content:center;text-align:center}.wapu-single__add-btn-arrow{display:inline-block;margin-left:.5rem;flex-shrink:0;transition:transform var(--wtds-dur-fast) var(--wtds-ease)}.wapu-single__add-btn:hover:not(:disabled) .wapu-single__add-btn-arrow{transform:translate(.1875rem)}.wapu-single__add-btn:disabled .wapu-single__add-btn-arrow{opacity:.4}.wapu-single__add-btn.is-loading .wapu-single__add-btn-arrow{opacity:0}.wapu-single__add-btn-loader{width:1rem;height:1rem;position:absolute;right:.875rem;top:50%;border-radius:var(--wtds-r-pill);border:.125rem solid var(--wtds-outline);border-top-color:var(--wtds-outline-strong);opacity:0;transform:translateY(-50%) scale(.7);transition:opacity .22s ease,transform .22s ease;pointer-events:none}.wapu-single__add-btn.is-loading .wapu-single__add-btn-loader{opacity:1;transform:translateY(-50%) scale(1);animation:wapuSpin .75s linear infinite}.wapu-single__add-btn.is-loading .wapu-single__add-btn-label{opacity:.95}.wapu-single__add-btn.is-success{background:var(--wtds-success);background-color:var(--wtds-success)}.wapu-single__add-btn.is-error{animation:wapuBtnShake .36s ease}.wapu-single__cart-feedback{margin:.5rem 0 0;font-family:var(--wtds-font-display);font-size:var(--wtds-fs-caption-1);line-height:1.35;text-align:right}.wapu-single__cart-feedback.is-error{color:var(--wtds-danger-pressed)}.wapu-single__cart-feedback.is-success{color:var(--wtds-success)}.wapu-single__toast{position:fixed;inset:calc(.875rem + env(safe-area-inset-top,0px)) .875rem auto auto;transform:translateY(-.625rem);width:min(26.25rem,calc(100vw - 1.75rem));max-width:26.25rem;height:auto;min-height:0;max-height:none;display:grid;grid-template-columns:1.25rem minmax(0,1fr);align-items:center;-moz-column-gap:.625rem;column-gap:.625rem;padding:.75rem .875rem;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:1200;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.wapu-single__toast.is-visible{opacity:1;transform:translateY(0)}.wapu-single__toast-icon{flex:0 0 1.25rem;width:1.25rem;height:1.25rem;margin-top:0;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;min-width:0;min-height:0;height:auto;line-height:1.35;text-align:center;white-space:normal}.wapu-single__toast.is-error{background:var(--wtds-danger-soft);color:var(--wtds-danger-pressed);border:1px solid var(--wtds-danger-outline)}.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-warning{background:var(--wtds-warning-soft);color:var(--wtds-warning);border:1px solid var(--wtds-warning-outline)}body.admin-bar .wapu-single__toast{top:3rem}@media screen and (max-width: 48.875rem){body.admin-bar .wapu-single__toast{top:3.75rem}}@media (max-width: 90rem){.wapu-single__qty-select-wrap{width:min(11.25rem,20vw)}.wapu-single__add-btn{min-width:10rem;max-width:12.5rem}}@media (max-width: 64rem){:root{--single-gutter: 1.75rem;--single-offcanvas-w: 27.5rem;--single-bar-h: 4.5rem;--single-thumb-w: 3.75rem}.wapu-single__content{grid-template-columns:1fr;gap:1.5rem}.wapu-single__gallery{grid-template-columns:1fr var(--single-thumb-w)}.wapu-single__variant-items--grid{grid-template-columns:repeat(auto-fill,minmax(5rem,5.5rem))}.wapu-single__variant-items--list{max-height:18.75rem}.wapu-single__qty-select-wrap{width:auto;flex:1;height:3rem}.wapu-single__add-btn{width:auto;min-width:10rem;height:3rem}.wapu-single__offcanvas{width:min(30rem,60vw)}.wapu-single__offcanvas-topbar{padding:1.5rem 2rem 1.25rem}.wapu-single__offcanvas-panel{padding:2rem 2rem 2.5rem}.wapu-single__cart-sheet{width:100%}}@media (max-width: 47.9375rem){:root{--single-gutter: clamp(1.25rem, 5vw, 1.5rem);--single-offcanvas-w: 100%;--single-bar-h: 4.5rem;--single-thumb-w: 3.75rem;--single-thumb-item-h: 3.5rem;--single-mobile-inset: 1.25rem;--single-variant-mobile-max-h: min(46vh, 20rem)}html,body,#page,#content,.wapu-single{overflow-x:hidden;max-width:100%}.wapu-single__pre{padding-top:.875rem;padding-left:0;padding-right:0;width:calc(100% - (var(--single-mobile-inset) * 2));margin-left:auto;margin-right:auto;height:auto;flex-wrap:wrap;gap:.625rem;align-items:center}.wapu-single__breadcrumb{font-size:var(--wtds-fs-caption-1);max-width:calc(100% - 8.75rem)}.wapu-single__content{grid-template-columns:minmax(0,1fr);padding-top:1rem;padding-left:0;padding-right:0;width:calc(100% - (var(--single-mobile-inset) * 2));max-width:100%;margin-left:auto;margin-right:auto;overflow:hidden}.wapu-single__gallery{grid-template-columns:1fr;grid-template-rows:auto auto;padding-left:0;padding-right:0;min-width:0;width:100%}.wapu-single__thumbs{flex-direction:row;height:auto;padding:.625rem 1rem .5rem;gap:.5rem}.wapu-single__thumb-nav{display:none}.wapu-single__thumb-track{flex-direction:row;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:.5rem}.wapu-single__thumb-track::-webkit-scrollbar{display:none}.wapu-single__thumb{width:var(--single-thumb-item-h);height:var(--single-thumb-item-h);flex-shrink:0}.wapu-single__gallery .wapu-gal__thumb,.wapu-single__gallery #wapu-gal .wapu-gal__thumb{width:var(--single-thumb-item-h);flex-shrink:0}.wapu-single__title{font-size:var(--wtds-fs-title-3)}.wapu-single__variants-header{margin-left:.5rem;margin-right:.5rem}.wapu-single__view-toggle{flex-shrink:0}.wapu-single__variant-items--grid{grid-template-columns:repeat(4,minmax(0,1fr));justify-content:stretch;max-height:var(--single-variant-mobile-max-h);overflow-y:auto;overflow-x:hidden;align-content:start;scrollbar-width:thin;scrollbar-color:var(--wtds-separator-soft) transparent;-webkit-overflow-scrolling:touch;padding-left:.5rem;padding-right:.5rem}.wapu-single__variant-items--grid::-webkit-scrollbar{width:.25rem}.wapu-single__variant-items--grid::-webkit-scrollbar-track{background:transparent}.wapu-single__variant-items--grid::-webkit-scrollbar-thumb{background:var(--wtds-separator-soft);border-radius:.25rem}.wapu-single__variant-items--list{max-height:var(--single-variant-mobile-max-h);-webkit-overflow-scrolling:touch;margin-left:.5rem;margin-right:.5rem}.wapu-single__variant-items--list .wapu-single__variant-item{padding-left:.875rem;padding-right:.875rem}.wapu-single__cart-bar-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5rem;padding-left:0;padding-right:0;width:calc(100% - (var(--single-mobile-inset) * 2));margin-left:auto;margin-right:auto}.wapu-single__qty-select-wrap{width:100%;min-width:0;max-width:100%;height:2.875rem;overflow:hidden}.wapu-single__qty-select{width:100%;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 1.5rem;text-align:center;-moz-text-align-last:center;text-align-last:center}.wapu-single__add-btn{width:auto;min-width:7.875rem;padding:0 .875rem;font-size:var(--wtds-fs-footnote);height:2.875rem;flex-shrink:0;justify-self:end}.wapu-single__cart-sheet{width:100%;border-radius:1.25rem 1.25rem 0 0;height:70svh;max-height:70svh}.wapu-single__cart-sheet-headbar{padding-top:.625rem}.wapu-single__cart-sheet-close{top:.375rem;right:.625rem}.wapu-single__cart-sheet-body{padding-left:1rem;padding-right:1rem;gap:.75rem}.wapu-single__cart-sheet-product{grid-template-columns:4.5rem minmax(0,1fr);gap:.75rem}.wapu-single__cart-sheet-thumb{width:4.5rem;height:4.5rem}.wapu-single__cart-sheet-title{font-size:var(--wtds-fs-subhead)}.wapu-single__cart-sheet-subtitle{font-size:var(--wtds-fs-caption-1)}.wapu-single__cart-sheet-related-list{grid-auto-columns:minmax(6.75rem,42vw)}.wapu-single__cart-sheet-related-card{min-height:9.25rem;padding:.5625rem}.wapu-single__cart-sheet-actions{grid-template-columns:1fr}.wapu-single__cart-sheet-cta{height:2.75rem}.wapu-single__toast{inset:auto auto calc(var(--single-bar-h) + .875rem + env(safe-area-inset-bottom,0px)) 50%;transform:translate(-50%,.625rem);width:min(94vw,35rem);max-width:94vw;height:auto;min-height:0;max-height:none}.wapu-single__toast.is-visible{transform:translate(-50%)}.wapu-single__offcanvas{width:100%;max-width:100%;min-width:0}.wapu-single__offcanvas-topbar{padding:1.25rem 1.25rem 1.125rem}.wapu-single__offcanvas-panel{padding:1.5rem 1.25rem 2.5rem;gap:1.25rem}.wapu-single__related-list{margin:0 -.25rem}.wapu-single__related-card{padding:.875rem .25rem;gap:1rem}.wapu-single__related-thumb{width:4.5rem;height:4.5rem}.wapu-single__gallery img{max-width:none;height:100%}}@keyframes wapuFadeIn{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes wapuFadeUp{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}@keyframes wapuSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes wapuBtnShake{0%,to{transform:translate(0)}25%{transform:translate(-.1875rem)}50%{transform:translate(.1875rem)}75%{transform:translate(-.125rem)}}@media (prefers-reduced-motion: no-preference){.wapu-single__title,.wapu-single__desc-wrap,.wapu-single__price,.wapu-single__variants{visibility:hidden}}body.wapu-no-gsap .wapu-single__title,body.wapu-no-gsap .wapu-single__desc-wrap,body.wapu-no-gsap .wapu-single__price,body.wapu-no-gsap .wapu-single__variants{visibility:visible!important}@keyframes wapuPulse{0%{box-shadow:0 0 var(--wtds-focus-ring-color)}70%{box-shadow:0 0 0 .375rem var(--wtds-focus-ring-color)}to{box-shadow:0 0 var(--wtds-focus-ring-color)}}@media (prefers-reduced-motion: no-preference){.wapu-single__variant-item--selected,.wapu-single__variant-item[aria-selected=true]{animation:wapuPulse .5s ease both}}.wapu-single .related.products,.wapu-single .upsells.products{display:none!important}.wapu-single .woocommerce-notices-wrapper{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}.wapu-single .woocommerce-tabs>ul.tabs,.wapu-single .woocommerce-tabs #tab-description,.wapu-single .woocommerce-tabs #tab-additional_information{display:none!important}.wapu-single .woocommerce-tabs,.wapu-single .woocommerce-tabs #tab-reviews,.wapu-single #reviews,.wapu-single .woocommerce-Reviews{display:revert;visibility:visible}.wapu-single #reviews,.wapu-single .woocommerce-Reviews,.wapu-single #review_form_wrapper,.wapu-single #review_form,.wapu-single .comment-form,.wapu-single .commentlist{all:revert;box-sizing:border-box}.wapu-single .wapu-wc-wrapper{display:contents}.wapu-single__qty-select-wrap .wapu-single__qty-select{border:none;border-radius:0;padding:0 1.5rem;box-shadow:none;background-image:none;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;font-family:var(--wtds-font-display);font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-bold);color:var(--wtds-ink-2);cursor:pointer;line-height:1.5;height:auto;width:100%;text-align:center;-moz-text-align-last:center;text-align-last:center}.wapu-single__qty-select-wrap .wapu-single__qty-select:focus{border:none;box-shadow:none;outline:none;--tw-ring-shadow: none}.wapu-single .wapu-single__add-btn,.wapu-single .wapu-single__add-btn.button,.wapu-single .wapu-single__add-btn.button.alt,.wapu-single .wapu-single__add-btn.single_add_to_cart_button{background:var(--wtds-ink)!important;background-color:var(--wtds-ink)!important;color:var(--wtds-surface)!important;border:none!important;border-radius:var(--wtds-r-pill)!important;font-family:var(--wtds-font-text)!important;font-size:var(--wtds-fs-footnote)!important;font-weight:var(--wtds-fw-medium)!important;letter-spacing:var(--wtds-ls-wide)!important;text-transform:uppercase!important;padding:0 var(--wtds-s-3)!important;line-height:1!important;text-decoration:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:0!important;text-shadow:none!important}.wapu-single .wapu-single__add-btn .wapu-single__add-btn-label{display:inline-flex;align-items:center;justify-content:center;width:100%;text-align:center}.wapu-single .wapu-single__add-btn:hover:not(:disabled){background:var(--wtds-ink);background-color:var(--wtds-ink);opacity:.88}.wapu-single .wapu-single__add-btn.is-loading:disabled{background:var(--wtds-ink);background-color:var(--wtds-ink);color:var(--wtds-surface)}.wapu-single .wapu-single__add-btn.is-success:disabled{background:var(--wtds-success);background-color:var(--wtds-success);color:var(--wtds-surface)}.wapu-single .wapu-single__add-btn:disabled{background:var(--wtds-ink-3) !important;background-color:var(--wtds-ink-3) !important;color:var(--wtds-surface) !important;cursor:not-allowed;opacity:1}.wapu-single__gallery img,.wapu-single__variant-thumb img,.wapu-single__related-thumb img{max-width:none;height:100%}.wapu-single__gallery #wapu-gal{grid-column:1 / -1;display:grid;grid-template-columns:1fr var(--single-thumb-w);gap:.75rem;align-items:start;width:100%;max-width:100%;min-width:0;overflow-x:hidden}.wapu-single__gallery,.wapu-single__gallery .wapu-gal__main,.wapu-single__gallery .wapu-gal__carousel,.wapu-single__gallery .wapu-gal__thumbs{max-width:100%;min-width:0}.wapu-single__gallery .wapu-gal__main{grid-column:1;grid-row:1;border-radius:var(--wtds-r-md);overflow:hidden;width:100%;min-width:0;background:var(--wtds-surface-2)}.wapu-single__gallery .wapu-gal__main:not(.is-transitioning):hover .wapu-gal__img--front{transform:scale(1.06)}.wapu-single__gallery .wapu-gal__carousel{grid-column:2;grid-row:1;flex-direction:column;align-items:center;gap:.5rem;margin-top:0;padding:0 .25rem}.wapu-single__gallery .wapu-gal__arrow{width:2.5625rem;height:2.5625rem;border-radius:50%;background:var(--wtds-surface-2);border:none;color:var(--wtds-ink-2);box-shadow:none;flex-shrink:0;transition:background .15s}.wapu-single__gallery .wapu-gal__arrow:hover{background:var(--wtds-separator-soft);border-color:transparent;box-shadow:none}.wapu-single__gallery .wapu-gal__arrow--prev,.wapu-single__gallery .wapu-gal__arrow--next{transform:rotate(90deg)}.wapu-single__gallery .wapu-gal__arrow--prev:active,.wapu-single__gallery .wapu-gal__arrow--next:active{transform:rotate(90deg) scale(.93)}.wapu-single__gallery .wapu-gal__arrow--prev.is-hidden,.wapu-single__gallery .wapu-gal__arrow--next.is-hidden{transform:rotate(90deg);opacity:0;pointer-events:none}.wapu-single__gallery .wapu-gal__thumbs{flex-direction:column;overflow-x:hidden;overflow-y:auto;flex:1;width:100%;padding:.25rem .125rem;align-items:center;scrollbar-width:none}.wapu-single__gallery .wapu-gal__thumbs::-webkit-scrollbar{display:none}.wapu-single__gallery .wapu-gal__thumb,.wapu-single__gallery #wapu-gal .wapu-gal__thumb{width:100%;height:var(--single-thumb-item-h);border-radius:var(--wtds-r-md);border:.125rem solid transparent;background:var(--wtds-surface-2);flex-shrink:0;filter:grayscale(100%);opacity:.55;transform:none;animation:none;transition:border-color .18s,box-shadow .18s,filter .25s,opacity .25s}.wapu-single__gallery .wapu-gal__thumb img,.wapu-single__gallery #wapu-gal .wapu-gal__thumb img{border-radius:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .2s ease}.wapu-single__gallery .wapu-gal__thumb:hover,.wapu-single__gallery #wapu-gal .wapu-gal__thumb:hover{filter:grayscale(40%);opacity:.8;border-color:var(--wtds-ink-4);transform:none}.wapu-single__gallery .wapu-gal__thumb:hover img,.wapu-single__gallery #wapu-gal .wapu-gal__thumb:hover img{transform:scale(1.05)}.wapu-single__gallery .wapu-gal__thumb.is-active,.wapu-single__gallery #wapu-gal .wapu-gal__thumb.is-active{border-color:var(--wtds-ink);box-shadow:0 1.25rem 1.25rem -1.25rem var(--wtds-shadow-color-soft);filter:grayscale(0%);opacity:1;transform:none}.wapu-single__gallery #wapu-gal img{max-width:none;height:100%}@media (min-width: 48rem){.wapu-single__gallery .wapu-gal__carousel{max-height:clamp(26.25rem,62vh,40rem);overflow:hidden;min-height:0}.wapu-single__gallery .wapu-gal__thumbs{max-height:calc(clamp(26.25rem,62vh,40rem) - 5.625rem);min-height:0;height:auto}}@media (max-width: 47.9375rem){.wapu-single__content{overflow-x:hidden;overflow-y:visible}.wapu-single__gallery #wapu-gal{grid-template-columns:1fr;grid-template-rows:auto auto;max-width:100%;min-width:0;overflow:hidden}.wapu-single__gallery .wapu-gal__main{grid-column:1;grid-row:1;width:100%;max-width:100%;aspect-ratio:1 / 1;min-height:0}.wapu-single__gallery #wapu-gal .wapu-gal__img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.wapu-single__gallery .wapu-gal__carousel{grid-column:1;grid-row:2;flex-direction:row;padding:.5rem 0;max-width:100%;min-width:0;overflow:hidden}.wapu-single__gallery .wapu-gal__thumbs{flex-direction:row;overflow-x:auto;overflow-y:hidden;height:auto;justify-content:flex-start;align-items:center;min-width:0;padding-inline:.125rem}.wapu-single__gallery .wapu-gal__thumb,.wapu-single__gallery #wapu-gal .wapu-gal__thumb{width:var(--single-thumb-item-h);flex-shrink:0}.wapu-single__gallery .wapu-gal__arrow--prev,.wapu-single__gallery .wapu-gal__arrow--prev.is-hidden,.wapu-single__gallery .wapu-gal__arrow--next,.wapu-single__gallery .wapu-gal__arrow--next.is-hidden{transform:none}.wapu-single__gallery .wapu-gal__arrow--prev:active,.wapu-single__gallery .wapu-gal__arrow--next:active{transform:scale(.93)}}@media (max-width: 61.9375rem){:root{--single-bar-h: 5rem}.wapu-single{padding-bottom:calc(var(--single-bar-h) + env(safe-area-inset-bottom,0px) + 1.5rem)}.wapu-single__cart-bar{bottom:0;padding-bottom:env(safe-area-inset-bottom,0px);z-index:1200;opacity:1;visibility:visible;transform:translateZ(0);pointer-events:auto;transition:opacity .18s ease}body.wapu-has-mobile-bottom-nav .wapu-single__cart-bar{bottom:var(--wapu-mobile-appbar-height, calc(3.75rem + env(safe-area-inset-bottom, 0px)) );padding-bottom:0}body.wapu-has-mobile-bottom-nav .wapu-single{padding-bottom:calc(var(--single-bar-h) + var(--wapu-mobile-appbar-height, calc(3.75rem + env(safe-area-inset-bottom, 0px)) ) + 1.5rem)}}.wapu-single__offcanvas-info{margin-top:var(--wtds-s-5);padding-top:var(--wtds-s-4);border-top:.5px solid var(--wtds-separator-soft)}.wapu-single__offcanvas-info-block{margin-bottom:var(--wtds-s-4)}.wapu-single__offcanvas-info-block:last-child{margin-bottom:0}.wapu-single__offcanvas-info-title{font-family:Poppins,sans-serif;font-size:var(--wtds-fs-footnote);font-weight:var(--wtds-fw-semibold);letter-spacing:.12em;text-transform:uppercase;color:var(--wtds-ink-3);margin:0 0 var(--wtds-s-2)}.wapu-single__offcanvas-info-list{list-style:none;padding:0;margin:0;font-size:var(--wtds-fs-subhead);line-height:1.65;color:var(--wtds-ink-2)}.wapu-single__offcanvas-info-list li{padding:.25rem 0 .25rem var(--wtds-s-2);position:relative}.wapu-single__offcanvas-info-list li:before{content:"—";position:absolute;left:0;color:var(--wtds-ink-4)} /* ─────────────────────────────────────────────────────────────── * [v4.0.27] Variant name truncation fix * * Problema: nombres largos como "Translucent-universal" se cortaban * en "Translucent-univers..." porque la regla base * .wapu-single__variant-name tenía white-space:nowrap+ellipsis. * En grid view con columnas de 60-64px, el corte era brutal. * * Fix: en grid view permitimos hasta 2 líneas con line-clamp + * word-break. La lista (--list) NO se toca — ahí los nombres son * cortos y horizontales, ellipsis sigue siendo lo correcto. * ─────────────────────────────────────────────────────────────── */ .wapu-single__variant-items--grid .wapu-single__variant-name { white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; hyphens: auto; } /* ─── Etiquetas WooCommerce ───────────────────────────────────── wapu-woocommerce emite el HTML; el theme controla toda la presentacion. */ .wapu-wc-product-tags { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .375rem; margin: .375rem 0 .75rem; line-height: 1; } .wapu-single__title-row { flex-wrap: wrap; } .wapu-single__title-row > .wapu-wc-product-tags { order: 2; flex: 0 0 100%; max-width: 100%; } .wapu-wc-product-tag--single { position: relative; display: inline-flex; color: var(--wapu-tag-color, var(--wtds-accent)); } .wapu-wc-product-tag__trigger { appearance: none; -webkit-appearance: none; display: inline-flex; margin: 0; padding: 0; border: 0; border-radius: 62.4375rem; background: transparent; color: inherit; font: inherit; cursor: help; } .wapu-wc-product-tag__trigger:focus-visible { outline: .125rem solid var(--wapu-tag-color, var(--wtds-accent)); outline-offset: .1875rem; } .wapu-wc-product-tag--single .wapu-wc-product-tag__pill { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 1.875rem; padding: 0 .75rem; border-radius: 62.4375rem; background: color-mix(in srgb, var(--wapu-tag-color, var(--wtds-accent)) 14%, white); color: var(--wapu-tag-color, var(--wtds-accent)); box-shadow: 0 .5rem 1.25rem var(--wtds-shadow-color-soft); font-family: var(--wtds-font-text, Poppins, Arial, sans-serif); font-size: .625rem; font-weight: var(--wtds-fw-medium); line-height: 1; white-space: nowrap; } @supports not (background: color-mix(in srgb, black, white)) { .wapu-wc-product-tag--single .wapu-wc-product-tag__pill { background: var(--wtds-surface-translucent); } } .wapu-wc-product-tag__dot { display: inline-flex; width: .375rem; height: .375rem; flex: 0 0 .375rem; border-radius: 50%; background: currentColor; } .wapu-wc-product-tag__popover { position: absolute; top: calc(100% + .5625rem); left: 0; z-index: 60; width: max-content; min-width: 13.75rem; max-width: min(20rem, calc(100vw - 2rem)); padding: .75rem .875rem; border-radius: 1rem; background: var(--wtds-surface-inverse); color: var(--wtds-action-ink); box-shadow: 0 1.125rem 2.75rem var(--wtds-shadow-color-strong); font-family: var(--wtds-font-text, Poppins, Arial, sans-serif); font-size: .75rem; font-weight: 500; line-height: 1.45; opacity: 0; visibility: hidden; transform: translateY(-.25rem); transition: opacity .16s ease, visibility .16s ease, transform .16s ease; pointer-events: auto; text-align: left; } .wapu-wc-product-tag__popover::before { content: ""; position: absolute; left: 1.125rem; top: -.375rem; width: .75rem; height: .75rem; border-radius: .125rem; background: var(--wtds-surface-inverse); transform: rotate(45deg); } .wapu-wc-product-tag__popover-title, .wapu-wc-product-tag__popover-text { display: block; } .wapu-wc-product-tag__popover-title { margin-bottom: .3125rem; font-size: .6875rem; font-weight: var(--wtds-fw-medium); color: var(--wtds-action-ink); } .wapu-wc-product-tag__popover-text { color: var(--wtds-action-ink); } .wapu-wc-product-tag--has-description:hover .wapu-wc-product-tag__popover, .wapu-wc-product-tag--has-description:focus-within .wapu-wc-product-tag__popover, .wapu-wc-product-tag--has-description.is-open .wapu-wc-product-tag__popover { opacity: 1; visibility: visible; transform: translateY(0); } .wapu-vg__main, .wapu-vg__grid { position: relative; } .wapu-wc-product-tag-icons { --wapu-tag-icon-size: clamp(4.75rem, 5.5vw, 5.5rem); position: absolute; top: 1rem; right: 1rem; z-index: 25; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; width: max-content; max-width: calc(var(--wapu-tag-icon-size) + var(--wapu-tag-icon-size) + .5rem); pointer-events: none; line-height: 1; } .wapu-wc-product-tag-icons__item { box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex: 0 0 var(--wapu-tag-icon-size); width: var(--wapu-tag-icon-size); height: var(--wapu-tag-icon-size); overflow: hidden; border: 0; border-radius: 50%; background: transparent; box-shadow: none; } .wapu-wc-product-tag-icons__item img { display: block !important; flex: 0 0 100%; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; object-fit: cover !important; object-position: center !important; } @media (max-width: 47.9375rem) { .wapu-single__title-row > .wapu-wc-product-tags { margin-top: .25rem; gap: .3125rem; } .wapu-wc-product-tag--single .wapu-wc-product-tag__pill { min-height: 1.75rem; padding: 0 .625rem; font-size: .5625rem; } .wapu-wc-product-tag__popover { position: fixed; left: 1rem; right: 1rem; bottom: 5.5rem; top: auto; width: auto; min-width: 0; max-width: none; padding: .875rem 1rem; border-radius: 1.125rem; } .wapu-wc-product-tag__popover::before { display: none; } .wapu-wc-product-tag-icons { --wapu-tag-icon-size: 4rem; top: .625rem; right: .625rem; gap: .375rem; max-width: calc(var(--wapu-tag-icon-size) + var(--wapu-tag-icon-size) + .375rem); } .wapu-wc-product-tag-icons__item { flex-basis: var(--wapu-tag-icon-size); width: var(--wapu-tag-icon-size); height: var(--wapu-tag-icon-size); } } /* ─────────────────────────────────────────────────────────────── * [v4.0.28] Fix gallery PDP — main image no rendea con shortcode * * Problema reportado: en PDPs que usan [wapu_variation_gallery] * (ej. R.E.M Beauty Lip Oil), los thumbs sí se ven a la izquierda * pero la imagen principal queda en blanco a la derecha. * * Causa: el outer .wapu-single__gallery tiene * grid-template-columns: 1fr var(--single-thumb-w); * Y el shortcode mete su propio .wapu-vg que también es grid * (con sus thumbs internos). El slot de la columna 5.5rem del outer * queda vacío pero ocupa espacio, comprimiendo el main. * * El override existente solo aplicaba a #wapu-gal (previous-generation del plugin * smart-variations). Ahora también aplica al .wapu-vg del * shortcode nuevo: que ocupe ambas columnas del outer. * ─────────────────────────────────────────────────────────────── */ .wapu-single__gallery > .wapu-vg, .wapu-single__gallery .wapu-vg { grid-column: 1 / -1; width: 100%; max-width: 100%; min-width: 0; } /* Defensiva extra: asegurar que el main no colapse a 0 */ .wapu-vg__main { min-width: 0; width: 100%; } .wapu-vg__main img, .wapu-vg__img { max-width: 100%; height: auto; } /* Align PDP CTA with the same WTDS primary operational role used in Quick View. */ .wapu-single .wapu-single__add-btn, .wapu-single .wapu-single__add-btn.button, .wapu-single .wapu-single__add-btn.button.alt, .wapu-single .wapu-single__add-btn.single_add_to_cart_button { background: var(--wtds-primary) !important; background-color: var(--wtds-primary) !important; color: var(--wtds-primary-ink) !important; border-color: var(--wtds-primary) !important; } .wapu-single .wapu-single__add-btn:hover:not(:disabled) { background: var(--wtds-primary) !important; background-color: var(--wtds-primary) !important; } /* ─────────────────────────────────────────────────────────────── * [v4.0.32] Bug A — Galería main image en blanco para SIMPLE products * * Reportado por usuario en Ohana store: Color Wow Youth Juice + AMIKA * Hydro Rush (productos simples) muestran thumbs columna izquierda y * área central VACÍA. R.E.M Beauty Lip Oil (variable) ya estaba bien * tras 4.0.28. * * Causa raíz: `.wapu-vg__main` no tiene min-height defensivo. Si la * imagen falla en cargar (broken src, lazy load fail, attachment * con size woocommerce_single faltante), el container colapsa a * altura cero porque depende del height intrínseco de su . * * Para productos simples sin galería extra (frames === 1), el render * solo emite `.wapu-vg__main` sin `.wapu-vg__thumbs`. Sin altura * intrínseca, parece "vacío". * ─────────────────────────────────────────────────────────────── */ .wapu-vg__main { /* aspect-ratio defensivo igual que .wapu-single__main-image */ aspect-ratio: 1 / 1; background: var(--wtds-surface-2); border-radius: var(--wtds-r-md, .75rem); overflow: hidden; position: relative; } .wapu-vg__main > img, .wapu-vg__main .wapu-vg__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; } /* Para productos sin imagen (rare edge), placeholder visible. El PHP ya emite wc_placeholder_img_src() pero defensivo CSS por si el src queda vacío (ej. wp_get_attachment_image_url falló). */ .wapu-vg__main > img[src=""] { display: none; } .wapu-vg__main:not(:has(img[src*="://"])) { background: var(--wtds-surface-2); } /* ─────────────────────────────────────────────────────────────── * [v4.0.32] Bug B — Info column text overflow (PDP) * * Title con `font-size: var(--wtds-fs-title-2)` (huge en desktop) más * `flex:1, min-width:0` debería wrap. Pero un nombre como "Cactus * Fruit 3-in-1 Styling Cream with Taming Wand" tiene palabras muy * largas (Styling, Conditioner, Hydration) que sin `word-break` se * salen del container. * * Aplicamos word-break + overflow-wrap defensivo al title y desc. * ─────────────────────────────────────────────────────────────── */ .wapu-single__title { word-break: break-word; overflow-wrap: anywhere; hyphens: auto; /* clamp font-size para que no sea descomunal en viewports estrechos */ font-size: clamp(1.5rem, 3.2vw, var(--wtds-fs-title-2)); } .wapu-single__desc, .wapu-single__desc-wrap { word-break: break-word; overflow-wrap: anywhere; min-width: 0; } .wapu-single__info { /* defensivo: que info nunca se salga de su columna del grid */ max-width: 100%; overflow-x: hidden; } .wapu-single__title-row { /* el row es flex con title + share button. min-width:0 en title solo no es suficiente — el flex container también lo necesita. */ min-width: 0; max-width: 100%; } .wapu-single__brand-eyebrow { /* el eyebrow tiene letter-spacing wide — si la marca es "DOLCE & GABBANA" debe poder wrap o truncarse, no salirse. */ flex-wrap: wrap; word-break: break-word; } /* ═══════════════════════════════════════════════════════════════════════ * Wave PDP Mobile Add-To-Cart Reliability (4.2.2) * ───────────────────────────────────────────────────────────────────── * Inline CTA persistente debajo de variants/price. En mobile (max 61.9375rem) * REEMPLAZA al cart-bar fixed; en desktop (≥62rem) queda oculto y el * cart-bar fixed sigue siendo el CTA principal. * ═══════════════════════════════════════════════════════════════════ */ /* Default desktop: inline CTA hidden, cart-bar fixed visible */ .wapu-single__inline-cta{display:none} @media (max-width:61.9375rem){ /* Show inline CTA below variants */ .wapu-single__inline-cta{display:flex!important;flex-direction:column;gap:.5rem;margin-top:1.25rem;width:100%;visibility:visible!important;opacity:1!important} .wapu-single__inline-cta-btn{ display:inline-flex;align-items:center;justify-content:center; width:100%;min-height:3.25rem;padding:0 1.25rem; background:var(--wtds-primary); color:var(--wtds-primary-ink); border:none;border-radius:var(--wtds-r-pill); font-family:var(--wtds-font-text);font-size:var(--wtds-fs-footnote); font-weight:var(--wtds-fw-medium);letter-spacing:var(--wtds-ls-wide); text-transform:uppercase;text-align:center; cursor:pointer;position:relative; transition:opacity var(--wtds-dur-fast) var(--wtds-ease),background-color var(--wtds-dur-fast) var(--wtds-ease); -webkit-tap-highlight-color:transparent; } .wapu-single__inline-cta-btn:hover:not(:disabled){opacity:.92} .wapu-single__inline-cta-btn:disabled{ background:var(--wtds-ink-3);color:var(--wtds-action-ink, var(--wtds-surface)); cursor:not-allowed;opacity:1; } .wapu-single__inline-cta-btn.is-loading{cursor:wait} .wapu-single__inline-cta-btn.is-success{background:var(--wtds-success)} .wapu-single__inline-cta-btn.is-error{animation:wapuBtnShake .36s ease} .wapu-single__inline-cta-arrow{display:inline-block;margin-left:.625rem;flex-shrink:0;transition:transform var(--wtds-dur-fast) var(--wtds-ease)} .wapu-single__inline-cta-btn:hover:not(:disabled) .wapu-single__inline-cta-arrow{transform:translateX(.1875rem)} .wapu-single__inline-cta-btn:disabled .wapu-single__inline-cta-arrow{opacity:.4} .wapu-single__inline-cta-btn.is-loading .wapu-single__inline-cta-arrow{opacity:0} .wapu-single__inline-cta-loader{ width:1.125rem;height:1.125rem;position:absolute;right:1.125rem;top:50%; border-radius:50%;border:.125rem solid var(--wtds-outline-strong); border-top-color:var(--wtds-outline-strong);opacity:0; transform:translateY(-50%) scale(.7); transition:opacity .22s ease,transform .22s ease;pointer-events:none; } .wapu-single__inline-cta-btn.is-loading .wapu-single__inline-cta-loader{ opacity:1;transform:translateY(-50%) scale(1); animation:wapuSpin .75s linear infinite; } .wapu-single__inline-cta-feedback{ margin:0;font-family:var(--wtds-font-display); font-size:var(--wtds-fs-caption-1);line-height:1.35; text-align:center;color:var(--wtds-danger-pressed); } .wapu-single__inline-cta-feedback[hidden]{display:none} .wapu-single__inline-cta-feedback.is-success{color:var(--wtds-success)} /* Mobile: hide cart-bar fixed (inline CTA replaces it) */ .wapu-single__cart-bar{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;left:-624.9375rem!important;z-index:-1!important} /* Restore body padding-bottom (cart-bar no longer reserves space mobile) */ .wapu-single{padding-bottom:1.5rem} body.wapu-has-mobile-bottom-nav .wapu-single{ padding-bottom:calc(var(--wapu-mobile-appbar-height, 3.75rem) + 1.5rem) } /* Defensive: respect inline CTA disabled visual cue prominently */ .wapu-single__inline-cta-btn[disabled]{ background:var(--wtds-ink-3)!important; background-color:var(--wtds-ink-3)!important; color:var(--wtds-surface)!important; } } .wapu-sv-sizes{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; } /* GSAP fallback: if GSAP isn't loaded, body gets `wapu-no-gsap` class — already * handled above via PR-C. Inline CTA needs no extra rule because its display * already does NOT depend on visibility:hidden global rule. */ /* ═══════════════════════════════════════════════════════════════════════ * [v4.2.42] WAPUOS-VAS · Day 4 PR-4 · PDP Emotional Alignment * ─────────────────────────────────────────────────────────────────────── * Refinement de cadencia emocional sobre el PDP. Suaviza spacing, * tokeniza valores off-grid, y alinea el rhythm con el canon que ya * estableció el archive (PR-3.1 → PR-3.3). Sin tocar gallery JS, * variation engine, swatches engine, AJAX cart, ni lógica de * pricing/stock. Sin nuevas reglas en bloques heredados de * single-product.css. * * Charter: * - 0 `!important` nuevos (los 37 reales del archive base intactos) * - 0 hex hardcoded · todo tokens DS o derived * - 0 cambios PHP / JS / markup / templates * - 0 cambios en :root local PDP tokens existentes * - 0 cambios en `single-product-immersive.css`, `single-swatches.css`, * `variation-gallery.css` * - Append-only · rollback trivial (eliminar este bloque) * - Cascade: same specificity, source order resuelve · sin pelea * * Capas (11): * R1 Rhythm tokens scoped a .wapu-single * R2 Info column vertical rhythm · 1.25rem → clamp(1.25rem, ..., --wtds-s-3) * R3 Gallery thumb↔main gap · .75rem → --wtds-s-2 (1rem · ≥769) * R4 Content padding/gap tokenization (32/40 → --wtds-s-4/--wtds-s-5) * R5 Title-row gap · .75rem → --wtds-s-2 * R6 Price wrap gap canon · .375rem → --wtds-s-1 (.5rem) * R7 Desc wrap gap canon · .625rem → --wtds-s-1 * R8 Variant grid gap canon · 14/12 → --wtds-s-2 (≥769) * R9 Inline-CTA breath · margin-top 20 → --wtds-s-3 (1.5rem) * R10 Cart-bar inner gap · 12 → --wtds-s-2 (≥769) * R11 Brand-eyebrow rhythm · 12 → --wtds-s-2 (margin + internal gap) * * @since 4.2.42 * ═══════════════════════════════════════════════════════════════════════ */ /* ─── R1 · Rhythm tokens scoped a .wapu-single ────────────────────── Custom properties locales al PDP. Una vez declaradas aquí, los R2–R11 pueden consumirlas. Cero contaminación cross-surface. */ .wapu-single { --wapu-single-info-rhythm: clamp(1.25rem, 1.5vw + .5rem, var(--wtds-s-3)); --wapu-single-section-gap: var(--wtds-s-3); --wapu-single-block-gap: var(--wtds-s-2); --wapu-single-eyebrow-gap: var(--wtds-s-2); } /* ─── R2 · Info column vertical rhythm ────────────────────────────── Era 1.25rem hardcoded · gap entre brand-eyebrow / title / price / variants / CTA. Movemos a clamp que: - mobile/tablet: mantiene 1.25rem (lower bound) - intermediate: interpola suavemente - desktop wide ≥~1200: crece a 1.5rem (--wtds-s-3) · +.25rem breath Resultado emocional: en pantallas grandes el resumen respira más, en mobile no se aprieta. */ .wapu-single__info { gap: var(--wapu-single-info-rhythm); } /* ─── R3 · Gallery thumb↔main gap ─────────────────────────────────── .75rem off-grid · ahora 1rem (--wtds-s-2). Solo desktop/tablet ≥769 porque a mobile el gallery cambia a flex-row (vista horizontal de thumbs) y ese gap ya está bien en .5rem. */ @media (min-width: 48.0625rem) { .wapu-single__gallery { gap: var(--wtds-s-2); } } /* ─── R4 · Content padding/gap tokenization ───────────────────────── Hardcoded 2rem / 2.5rem → tokens canon. Cero delta visual (mismos valores) pero alineamos al sistema y futuros refinements son centralizados. */ .wapu-single__content { padding-top: var(--wtds-s-4); gap: var(--wtds-s-5); } /* ─── R5 · Title-row gap ──────────────────────────────────────────── Gap entre title y botón share era .75rem (off-grid). +4 a --wtds-s-2. */ .wapu-single__title-row { gap: var(--wtds-s-2); } /* ─── R6 · Price wrap gap canon ───────────────────────────────────── .375rem off-grid (vertical gap entre current price y regular price tachado dentro de .wapu-price--single). +2 a --wtds-s-1 (.5rem). */ .wapu-single__price .wapu-price--single { gap: var(--wtds-s-1); } /* ─── R7 · Desc wrap gap canon ────────────────────────────────────── .625rem off-grid (gap entre párrafos del short description). -2 a --wtds-s-1 (.5rem) · tighter · alinea con cadencia editorial silenciosa. */ .wapu-single__desc-wrap { gap: var(--wtds-s-1); } /* ─── R8 · Variant grid gap canon ─────────────────────────────────── variant-items--grid era `gap: .875rem .75rem` (off-grid en ambos ejes). Movemos a --wtds-s-2 simétrico (16/16). +2/+4 breath entre variant tiles. Solo ≥769 para no afectar el mobile que tenga su propia regla (si la hay). */ @media (min-width: 48.0625rem) { .wapu-single__variant-items--grid { gap: var(--wtds-s-2); } } /* ─── R9 · Inline-CTA breath ──────────────────────────────────────── margin-top entre variants/cart-form y el botón inline CTA era 1.25rem (off-grid). +4 a --wtds-s-3 (1.5rem) · más respiración antes del CTA principal. NO toca display/visibility/opacity (esas tienen !important defensivo en la base · respeto). */ .wapu-single__inline-cta { margin-top: var(--wtds-s-3); } /* ─── R10 · Cart-bar inner gap (≥769) ─────────────────────────────── Cart-bar inferior fija · gap entre qty-select y add-to-cart era .75rem off-grid. +4 a --wtds-s-2 (1rem) · espacio más limpio entre los dos controles principales. Scoped a ≥769 porque el mobile usa grid de 2 columnas con gap .5rem (ya canon · no tocar). */ @media (min-width: 48.0625rem) { .wapu-single__cart-bar-inner { gap: var(--wtds-s-2); } } /* ─── R11 · Brand-eyebrow rhythm ──────────────────────────────────── El brand-eyebrow encima del título tenía gap .75rem y margin-bottom .75rem. Movemos ambos a --wtds-s-2 (1rem) · cohesión visual + .25rem de breath antes del título. Es el primer elemento que el usuario lee en el resumen · merece la pausa editorial. */ .wapu-single__brand-eyebrow { gap: var(--wapu-single-eyebrow-gap); margin-bottom: var(--wapu-single-eyebrow-gap); } /* ─── Scroll stability · PDP ──────────────────────────────────────── El single tiene bloques que terminan de ajustar altura una vez que el browser aplica assets/JS del picker y de la galería. En algunos navegadores eso dispara scroll anchoring y se siente como un jalón durante el scroll normal. Desactivamos anchoring solo en el PDP y solo en los contenedores que cambian de layout. */ .wapu-single, .wapu-single__content, .wapu-single__gallery, .wapu-single__info, .wapu-single__variants, .wapu-single__variation-picker, #wapu-variant-items { overflow-anchor: none; } /* ─── FAQs de empresa · PDP hook block ───────────────────────────── */ .wapu-product-faqs { width: min(70rem, calc(100% - 3rem)); margin: clamp(2rem, 4vw, 4rem) auto calc(6rem + env(safe-area-inset-bottom, 0px)); padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--wtds-outline-soft); border-radius: 1.75rem; background: var(--wtds-glass); } .wapu-product-faqs__header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22.5rem); gap: 1.5rem; align-items: end; margin-bottom: 1.5rem; } .wapu-product-faqs__eyebrow { display: block; margin-bottom: .5rem; font-size: .6875rem; font-weight: var(--wtds-fw-medium); letter-spacing: .12em; text-transform: uppercase; color: var(--wtds-on-surface-subtle); } .wapu-product-faqs__title { margin: 0; color: var(--wtds-ink); font-size: clamp(1.625rem, 3vw, 2.625rem); font-weight: var(--wtds-fw-medium); line-height: 1.05; letter-spacing: 0; } .wapu-product-faqs__intro { margin: 0; color: var(--wtds-on-surface-muted); font-size: .9375rem; font-weight: var(--wtds-fw-medium); line-height: 1.55; } .wapu-product-faqs__list { display: grid; gap: .625rem; } .wapu-product-faqs__item { border: 1px solid var(--wtds-outline-soft); border-radius: 1.125rem; background: var(--wtds-glass); overflow: hidden; } .wapu-product-faqs__item[open], .wapu-product-faqs__item.is-open { background: var(--wtds-surface-translucent); } .wapu-product-faqs__question { display: flex; align-items: center; justify-content: space-between; gap: 1.125rem; padding: 1.125rem 1.25rem; color: var(--wtds-ink); font-size: 1rem; font-weight: var(--wtds-fw-medium); line-height: 1.35; cursor: pointer; list-style: none; } .wapu-product-faqs__question::-webkit-details-marker { display: none; } .wapu-product-faqs__chevron { flex: 0 0 auto; color: var(--wtds-on-surface-subtle); transition: transform .18s ease, color .18s ease; } .wapu-product-faqs__item[open] .wapu-product-faqs__chevron, .wapu-product-faqs__item.is-open .wapu-product-faqs__chevron { color: var(--wtds-accent); transform: rotate(180deg); } .wapu-product-faqs__item.is-closing .wapu-product-faqs__chevron { color: var(--wtds-on-surface-subtle); transform: rotate(0deg); } .wapu-product-faqs__answer { padding: 0 1.25rem 1.25rem; color: var(--wtds-on-surface-muted); font-size: .9375rem; font-weight: 500; line-height: 1.75; } .wapu-product-faqs__answer p { margin: 0; } .wapu-product-faqs__answer p + p { margin-top: .75rem; } @media (max-width: 48rem) { .wapu-product-faqs { width: calc(100% - 2rem); margin-top: 1.75rem; padding: 1.25rem; border-radius: 1.375rem; } .wapu-product-faqs__header { grid-template-columns: 1fr; gap: .75rem; margin-bottom: 1.125rem; } .wapu-product-faqs__intro { font-size: .875rem; } .wapu-product-faqs__question { padding: 1rem; font-size: .9375rem; } .wapu-product-faqs__answer { padding: 0 1rem 1rem; font-size: .875rem; } } /* end · WAPUOS-VAS Day 4 PR-4 PDP Emotional Alignment * ═══════════════════════════════════════════════════════════════════════ */ /* ─── PDP social interest · wapu-listas ────────────────────────────── */ .wapu-single__actions-row { flex-wrap: wrap; } .wapu-single__interest-note { flex: 0 0 100%; display: flex; align-items: center; flex-wrap: wrap; gap: .375rem .5rem; margin: .125rem 0 0; color: var(--wtds-ink-3); font-family: var(--wtds-font-text); font-size: var(--wtds-fs-caption-1); font-weight: var(--wtds-fw-medium); line-height: var(--wtds-lh-snug); } .wapu-single__interest-kicker { color: var(--wtds-ink-4); font-size: var(--wtds-fs-caption-2); font-weight: var(--wtds-fw-semibold); letter-spacing: var(--wtds-ls-wide); text-transform: uppercase; } .wapu-single__interest-dot { width: .25rem; height: .25rem; border-radius: var(--wtds-r-pill); background: currentColor; opacity: .38; } .wapu-single__interest-copy { color: var(--wtds-ink-3); } @media (max-width: 47.9375rem) { .wapu-single__interest-note { gap: .25rem .4375rem; font-size: var(--wtds-fs-caption-1); } } /* PDP: la columna derecha no debe crear un scroll interno. El scroll debe pertenecer a la pagina completa, no al panel de info. */ .wapu-single__info, #wapu-info { height: auto !important; max-height: none !important; overflow-y: visible !important; } .wapu-single__info::-webkit-scrollbar, #wapu-info::-webkit-scrollbar { display: none; } /* ── Aviso de reposición ─────────────────────────────────────────────── */ .wapu-restock { display: grid; grid-template-columns: 2.625rem minmax(0, 1fr); gap: .875rem; width: 100%; margin-top: 1.125rem; padding: 1.125rem; border: 1px solid var(--wtds-outline-soft); border-radius: 1.125rem; background: var(--wtds-surface); box-shadow: none; opacity: 1; transform: none; transition: border-color .22s ease; } .wapu-restock.is-enhanced { opacity: 0; transform: translateY(.5rem); transition: opacity .22s ease, transform .22s ease, border-color .22s ease; } .wapu-restock.is-visible { opacity: 1; transform: translateY(0); } .wapu-restock[hidden] { display: none !important; } .wapu-single--restock-replacing .wapu-restock { margin-top: 0; margin-bottom: 1.125rem; } .wapu-single--restock-replacing-b2b .wapu-b2b-front-table, body.wapu-b2b-product-active .wapu-restock:not([hidden]) ~ .wapu-b2b-front-table { display: none !important; } .wapu-single--restock-replacing-standard .wapu-single__price, body:not(.wapu-b2b-product-active) .wapu-restock:not([hidden]) ~ .wapu-single__price { display: none !important; } .wapu-single--restock-replacing-standard.wapu-single--restock-parent-unavailable .wapu-single__variants-contract, body:not(.wapu-b2b-product-active) .wapu-restock[data-parent-available="0"]:not([hidden]) ~ .wapu-single__variants-contract { display: none !important; } .wapu-restock__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.625rem; height: 2.625rem; border-radius: 50%; background: var(--wtds-scrim-faint); color: var(--wtds-ink); } .wapu-restock__content { min-width: 0; } .wapu-restock__eyebrow { margin: 0 0 .1875rem; color: var(--wtds-warning-pressed); font-size: .625rem; font-weight: var(--wtds-fw-medium); letter-spacing: .11em; line-height: 1.2; text-transform: uppercase; } .wapu-restock__title { margin: 0; font-family: var(--wtds-font-display, Manrope, sans-serif); font-size: 1.0625rem; font-weight: var(--wtds-fw-medium); line-height: 1.25; } .wapu-restock__copy { margin: .3125rem 0 .875rem; color: var(--wtds-ink-3); font-size: .8125rem; line-height: 1.5; } .wapu-restock__controls { display: flex; gap: .5rem; } .wapu-restock__controls--account .wapu-restock__submit { width: 100%; } .wapu-restock__email { min-width: 0; min-height: 2.75rem; flex: 1 1 auto; padding: 0 .875rem; border: 1px solid var(--wtds-outline); border-radius: .75rem; background: var(--wtds-surface); color: var(--wtds-ink); font: inherit; font-size: .8125rem; outline: none; transition: border-color .18s ease, box-shadow .18s ease; } .wapu-restock__email:focus { border-color: var(--wtds-ink); box-shadow: 0 0 0 .1875rem var(--wtds-shadow-color-soft); } .wapu-restock__submit { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 7.25rem; min-height: 2.75rem; padding: 0 1.125rem; border: 0; border-radius: .75rem; background: var(--wtds-ink); color: var(--wtds-surface); font: inherit; font-size: .75rem; font-weight: var(--wtds-fw-medium); cursor: pointer; transition: opacity .18s ease, transform .18s ease; } .wapu-restock__submit:hover { transform: translateY(-1px); } .wapu-restock__submit:disabled { cursor: wait; opacity: .65; transform: none; } .wapu-restock__spinner { display: none; position: absolute; top: 50%; left: 50%; width: 1rem; height: 1rem; margin: -.5rem 0 0 -.5rem; border: .125rem solid currentColor; border-right-color: transparent; border-radius: 50%; animation: wapu-restock-spin .7s linear infinite; } .wapu-restock.is-loading [data-wapu-restock-button-text] { visibility: hidden; } .wapu-restock.is-loading .wapu-restock__spinner { display: block; } .wapu-restock__privacy, .wapu-restock__feedback { margin: .4375rem 0 0; color: var(--wtds-ink-3); font-size: .625rem; line-height: 1.4; } .wapu-restock__form[hidden] { display: none !important; } .wapu-restock__feedback.is-error { color: var(--wtds-danger); font-weight: var(--wtds-fw-medium); } .wapu-restock__trap { position: absolute !important; left: -624.9375rem !important; width: 1px !important; height: 1px !important; opacity: 0 !important; } .wapu-restock__success { display: flex; align-items: center; gap: .625rem; padding: .6875rem .75rem; border-radius: .75rem; background: var(--wtds-success-soft); color: var(--wtds-success-pressed); animation: wapu-restock-success .28s ease both; } .wapu-restock__success[hidden] { display: none !important; } .wapu-restock__success-check { display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; flex: 0 0 1.625rem; border-radius: 50%; background: var(--wtds-success); color: var(--wtds-on-image); line-height: 0; overflow: hidden; } .wapu-restock__success-check svg { display: block; width: .875rem; height: .875rem; flex: 0 0 .875rem; } .wapu-restock__success-copy { min-width: 0; } .wapu-restock__success-copy strong, .wapu-restock__success-copy > span { display: block; } .wapu-restock__success-copy strong { font-size: .8125rem; } .wapu-restock__success-copy > span { margin-top: 1px; font-size: .6875rem; color: var(--wtds-success-pressed); } .wapu-single__variant-item--sold-out.is-restock-selectable { opacity: .58; cursor: pointer; } .wapu-single__variant-item--sold-out.is-restock-selectable:hover, .wapu-single__variant-item--sold-out.is-restock-selectable:focus-visible { opacity: .82; outline: none; box-shadow: 0 0 0 .125rem var(--wtds-surface), 0 0 0 .25rem var(--wtds-ink-3); } @keyframes wapu-restock-spin { to { transform: rotate(360deg); } } @keyframes wapu-restock-success { from { opacity: 0; transform: translateY(.3125rem); } } @media (max-width: 37.5rem) { .wapu-restock { grid-template-columns: 2.25rem minmax(0, 1fr); gap: .6875rem; padding: .9375rem; border-radius: 1rem; } .wapu-restock__icon { width: 2.25rem; height: 2.25rem; } .wapu-restock__controls { flex-direction: column; } .wapu-restock__submit { width: 100%; } } @media (prefers-reduced-motion: reduce) { .wapu-restock, .wapu-restock__submit, .wapu-restock__success { transition: none; animation: none; } } /* ─── FAQs · apertura animada (v4.7.59) ──────────────────────────────
no anima su altura de forma nativa. El JS envuelve la respuesta en .wapu-product-faqs__panel y alterna .is-open; la transición usa grid-template-rows, que sí interpola entre 0fr y 1fr sin necesidad de medir alturas ni fijar un max-height arbitrario. Sin JS el bloque sigue funcionando como un
normal. */ .wapu-product-faqs__item .wapu-product-faqs__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s cubic-bezier(.32, .72, 0, 1); } .wapu-product-faqs__item.is-animated .wapu-product-faqs__panel { grid-template-rows: 0fr; } .wapu-product-faqs__item.is-animated.is-open .wapu-product-faqs__panel { grid-template-rows: 1fr; } .wapu-product-faqs__panel > * { min-height: 0; overflow: hidden; } .wapu-product-faqs__item.is-animated .wapu-product-faqs__answer { opacity: 0; transform: translateY(-.25rem); transition: opacity .24s ease, transform .32s cubic-bezier(.32, .72, 0, 1); } .wapu-product-faqs__item.is-animated.is-open .wapu-product-faqs__answer { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .wapu-product-faqs__item .wapu-product-faqs__panel, .wapu-product-faqs__item.is-animated .wapu-product-faqs__answer { transition: none; } } /* R15 · Product-type purchase surface * The Theme keeps layout ownership while custom Woo/Wapu product types own * their purchase form (e.g. wapu_kit, grouped, external). */ .wapu-single--type-purchase{padding-bottom:2rem} .wapu-single__type-purchase{margin-top:var(--wtds-s-4);padding:var(--wtds-s-4);border:.5px solid var(--wtds-separator-soft);border-radius:var(--wtds-r-md);background:var(--wtds-surface-2)} .wapu-single__type-purchase[data-product-type="wapu_kit"]{margin-top:var(--wtds-s-2);padding:0;border:0;border-radius:0;background:transparent} .wapu-single__type-purchase .cart{margin:0} .wapu-single__type-purchase select,.wapu-single__type-purchase input[type="number"]{font:inherit;color:var(--wtds-ink);background:var(--wtds-surface);border:.5px solid var(--wtds-separator);border-radius:var(--wtds-r-sm)} .wapu-single__type-purchase .single_add_to_cart_button,.wapu-single__type-purchase .button.alt{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0 var(--wtds-s-4)!important;border:0!important;border-radius:var(--wtds-r-pill)!important;background:var(--wtds-ink)!important;color:var(--wtds-surface)!important;font-family:var(--wtds-font-text)!important;font-size:var(--wtds-fs-footnote)!important;font-weight:var(--wtds-fw-semibold)!important;text-decoration:none!important;cursor:pointer} .wapu-single__type-purchase .single_add_to_cart_button:hover,.wapu-single__type-purchase .button.alt:hover{opacity:.88} @media(max-width:47.9375rem){.wapu-single--type-purchase{padding-bottom:2rem}.wapu-single__type-purchase{padding:var(--wtds-s-3)}} /* WapuCommerce CX bridge: promotion + Gift Card context (WTDS presentation only). */ .wapu-product-promo,.wapu-product-gift-hint{display:flex;align-items:flex-start;gap:.75rem;margin:.875rem 0;padding:.875rem 1rem;border:.5px solid var(--wtds-separator-soft);border-radius:.875rem;background:var(--wtds-surface-2)} .wapu-product-promo__icon,.wapu-product-gift-hint__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 2.125rem;width:2.125rem;height:2.125rem;border-radius:.625rem;background:var(--wtds-action-soft);color:var(--wtds-action);font-size:1rem} .wapu-product-promo__content,.wapu-product-gift-hint>div{min-width:0;display:flex;flex-direction:column;gap:.25rem} .wapu-product-promo__title,.wapu-product-gift-hint strong{color:var(--wtds-ink);font-size:.875rem;font-weight:var(--wtds-fw-bold)} .wapu-product-promo__list{display:flex;flex-direction:column;gap:.125rem;margin:0;padding:0;list-style:none;color:var(--wtds-ink-2);font-size:.84rem;line-height:1.45} .wapu-product-promo__note,.wapu-product-gift-hint p{margin:0;color:var(--wtds-ink-4);font-size:.75rem;line-height:1.45} /* WTDS Responsive Contract 2.0 — PDP responds to the product region, not only viewport. */ .wapu-single { container-type: inline-size; container-name: wapu-product; } @container wapu-product (max-width: 62rem) { .wapu-single__content { grid-template-columns: minmax(0,1fr); } .wapu-single__info { max-inline-size: none; } } @container wapu-product (max-width: 44rem) { .wapu-single__gallery { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; } .wapu-single__thumbs { order: 2; } .wapu-single__cart-sheet-actions { grid-template-columns: 1fr; } } @container wapu-product (max-width: 30rem) { .wapu-single__variant-items--grid { grid-template-columns: repeat(4, minmax(0,1fr)); } .wapu-single__cart-bar-inner { grid-template-columns: minmax(0,1fr) auto; gap: var(--wtds-s-1); } }