/* ============================================================ SHOP ACTIONS — Quick View / Wishlist / Add to Cart icons on the /shop/ product grid, the Quick View modal, the variant size drawer, and the "My Wishlist" account tab grid (same surfaces, reuses the same JS — see shop-actions.js). ============================================================ */ /* ── Card restructure: link wrapper + meta row (bloodline label + icons) ── .neo-shop-piece is now the outer
; .neo-shop-piece__link is the real wrapping image/title/price. The 3 action buttons are siblings of that , in a row with the bloodline label, flexed space-between so icons sit right-aligned and the row degrades gracefully when there's no label. */ .neo-shop-piece__link { display: block; text-decoration: none; color: inherit; } .neo-shop-piece__meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; } .neo-shop-piece__meta-row .neo-shop-piece__bloodline { margin: 0; } .neo-shop-piece__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; } /* ── Icon buttons — 28px hit target / 16px glyph, cream at rest, gold on hover ── */ .neo-shop-action { appearance: none; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0; margin: 0; cursor: pointer; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--neo-cream); outline: none !important; transition: color .3s ease; } .neo-shop-action svg { width: 16px; height: 16px; display: block; } .neo-shop-action:hover, .neo-shop-action:focus-visible { color: var(--neo-gold) !important; } .neo-shop-action--wishlist.is-active { color: var(--neo-gold); } .neo-shop-action--wishlist.is-active svg { fill: currentColor; } .neo-shop-action--cart.is-error { color: #c9897b !important; } .neo-shop-action[disabled] { opacity: .4; cursor: not-allowed; } .neo-shop-action.is-busy { opacity: .5; pointer-events: none; } /* ============================================================ QUICK VIEW MODAL ============================================================ */ .neo-qv-pop { position: fixed; inset: 0; z-index: 2147483000; visibility: hidden; display: flex; align-items: center; justify-content: center; padding: 20px; } .neo-qv-pop[hidden] { display: none; } .neo-qv-pop.is-open { visibility: visible; } .neo-qv-pop * { box-sizing: border-box; } body.neo-qv-pop-lock { overflow: hidden; } .neo-qv-pop__scrim { position: absolute; inset: 0; background: rgba(8,6,4,0.7); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .4s ease; } .neo-qv-pop.is-open .neo-qv-pop__scrim { opacity: 1; } .neo-qv-pop__panel { position: relative; z-index: 1; width: 100%; max-width: 860px; max-height: 88vh; overflow-y: auto; background: var(--neo-panel); border: 1px solid var(--neo-line); box-shadow: 0 30px 90px rgba(0,0,0,.6); opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1); } .neo-qv-pop.is-open .neo-qv-pop__panel { opacity: 1; transform: none; } .neo-qv-pop__close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none !important; border: none !important; box-shadow: none !important; color: var(--neo-muted); font-size: 26px; line-height: 1; cursor: pointer; transition: color .3s ease; } .neo-qv-pop__close:hover, .neo-qv-pop__close:focus-visible { color: var(--neo-gold) !important; outline: none; } .neo-qv-pop__loading, .neo-qv-pop__error { padding: 90px 40px; text-align: center; font-family: var(--neo-font-body); font-style: italic; color: var(--neo-muted); } .neo-qv-pop__body { display: grid; grid-template-columns: 1fr 1fr; } .neo-qv-pop__media { background: var(--neo-ground); position: relative; } .neo-qv-pop__image { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Carousel: swipe/arrow gallery, shown only when a product has >1 photo ── */ .neo-qv-pop__carousel { position: relative; width: 100%; height: 100%; overflow: hidden; } .neo-qv-pop__track { display: flex; height: 100%; transition: transform .45s cubic-bezier(.16,1,.3,1); touch-action: pan-y; } .neo-qv-pop__slide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; } .neo-qv-pop__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(10,8,5,0.55) !important; border: 1px solid rgba(201,168,76,0.4) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--neo-cream); font-size: 18px; line-height: 1; cursor: pointer; transition: color .3s ease, border-color .3s ease, background .3s ease; } .neo-qv-pop__nav--prev { left: 14px; } .neo-qv-pop__nav--next { right: 14px; } .neo-qv-pop__nav:hover, .neo-qv-pop__nav:focus-visible { color: var(--neo-gold); border-color: var(--neo-gold) !important; outline: none; } .neo-qv-pop__dots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 2; } .neo-qv-pop__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(245,240,232,0.35); transition: background .3s ease, transform .3s ease; cursor: pointer; } .neo-qv-pop__dot.is-active { background: var(--neo-gold); transform: scale(1.3); } .neo-qv-pop__info { padding: 48px 44px; } .neo-qv-pop__title { font-family: var(--neo-font-brutalist); font-size: clamp(18px,2vw,24px); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--neo-cream); margin: 0 0 16px; } .neo-qv-pop__price { font-family: var(--neo-font-body); font-size: 18px; color: var(--neo-cream); margin-bottom: 20px; } .neo-qv-pop__price .woocommerce-Price-amount { color: var(--neo-cream); } .neo-qv-pop__desc { font-family: var(--neo-font-body); font-style: italic; font-size: 14px; line-height: 1.7; color: var(--neo-sand); margin: 0 0 28px; } .neo-qv-pop__oos { font-family: var(--neo-font-body); font-style: italic; font-size: 13px; color: var(--neo-muted); text-align: center; padding: 18px; border: 1px solid var(--neo-line); text-transform: uppercase; letter-spacing: 0.24em; margin-bottom: 12px; } .neo-qv-pop button.neo-qv-pop__cart-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 14px; width: 100%; font-family: var(--neo-font-body) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.36em !important; text-transform: uppercase !important; color: var(--neo-ground) !important; background: var(--neo-gold) !important; border: 1px solid var(--neo-gold) !important; border-radius: 0 !important; box-shadow: none !important; padding: 20px 26px !important; cursor: pointer; margin-top: 8px; transition: background .4s ease, color .4s ease; } .neo-qv-pop button.neo-qv-pop__cart-btn:hover:not(:disabled) { background: transparent !important; color: var(--neo-gold) !important; } .neo-qv-pop button.neo-qv-pop__cart-btn:disabled { opacity: .5; cursor: not-allowed; } .neo-qv-pop button.neo-qv-pop__cart-btn.is-error { background: transparent !important; color: #c9897b !important; border-color: #c9897b !important; } .neo-qv-pop__link { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; font-family: var(--neo-font-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--neo-gold); text-decoration: none; } .neo-qv-pop__link span { transition: transform .35s ease; } .neo-qv-pop__link:hover span { transform: translateX(5px); } @media (max-width: 720px) { .neo-qv-pop__body { grid-template-columns: 1fr; } .neo-qv-pop__media { aspect-ratio: 4/5; } .neo-qv-pop__info { padding: 32px 24px 40px; } } /* Size buttons reused inside Quick View + the variant drawer — same markup/classes as pdp.php's .neo-pdp-size, but pdp.css scopes its rules to a `.neo-pdp` ancestor that doesn't exist here, so restyle under our own ancestors. */ .neo-qv-pop .neo-pdp-size-block, .neo-variant-drawer .neo-pdp-size-block { margin-bottom: 20px; } .neo-qv-pop .neo-pdp-size-header, .neo-variant-drawer .neo-pdp-size-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .neo-qv-pop .neo-pdp-size-label, .neo-variant-drawer .neo-pdp-size-label { display: inline-block; font-family: var(--neo-font-body); font-size: var(--neo-label, 0.72rem); font-weight: 400; letter-spacing: 0.32em; text-transform: uppercase; color: var(--neo-gold); } .neo-qv-pop .neo-pdp-sizes, .neo-variant-drawer .neo-pdp-sizes { display: flex; flex-wrap: wrap; gap: 6px; } .neo-qv-pop button.neo-pdp-size, .neo-variant-drawer button.neo-pdp-size { appearance: none; flex: 1 1 60px; min-width: 48px; text-align: center; background: transparent !important; border: 1px solid rgba(221,213,192,0.28) !important; border-radius: 0 !important; color: var(--neo-cream) !important; font-family: var(--neo-font-body) !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; cursor: pointer; padding: 14px 4px !important; box-shadow: none !important; transition: border-color .3s ease, color .3s ease; } .neo-qv-pop button.neo-pdp-size:hover:not(.is-disabled):not(.is-active), .neo-variant-drawer button.neo-pdp-size:hover:not(.is-disabled):not(.is-active) { border-color: var(--neo-gold-soft) !important; } .neo-qv-pop button.neo-pdp-size.is-active, .neo-variant-drawer button.neo-pdp-size.is-active { border-color: var(--neo-gold) !important; color: var(--neo-gold) !important; box-shadow: inset 0 0 0 1px var(--neo-gold) !important; } .neo-qv-pop button.neo-pdp-size.is-disabled, .neo-variant-drawer button.neo-pdp-size.is-disabled { opacity: .28; cursor: not-allowed; text-decoration: line-through; border-color: var(--neo-line) !important; } /* ============================================================ VARIANT SIZE DRAWER — Add to Cart on variable products (PLP icon) Structurally modeled on .neo-oracle__drawer (scrim +