/* VPZ Water — main stylesheet. Mobile first: phones get the app-like UI, desktop the classic shop. */ @font-face { font-family: "Tilda Sans"; src: url("../fonts/tildasans-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Tilda Sans"; src: url("../fonts/tildasans-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Tilda Sans"; src: url("../fonts/tildasans-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Tilda Sans"; src: url("../fonts/tildasans-bold.woff2") format("woff2"); font-weight: 700 800; font-style: normal; font-display: swap; } :root { --accent: #27b4f5; --ink: #0f1520; --ink-2: #616b7a; --bg: #fff; --soft: #f4f6f8; --line: #e7ebf0; --sky: linear-gradient(155deg, #a7d2ff 0%, #d6eeff 36%, #f1fbff 66%, #cbe7ff 100%); --r-xl: 44px; --r-lg: 32px; --r-md: 24px; --pill: 999px; --pad: 20px; --shadow: 0 14px 40px rgba(24, 70, 120, .12); --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --font: "Tilda Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --tabbar: 90px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { margin: 0; font: 500 16px/1.5 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); overflow-x: hidden; } body.vpz-no-tabbar { padding-bottom: env(safe-area-inset-bottom); } img, svg { max-width: 100%; height: auto; vertical-align: middle; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.18; font-weight: 600; letter-spacing: -.02em; } h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); } h2 { font-size: clamp(1.35rem, 3.5vw, 1.9rem); } h3 { font-size: 1.1rem; } p { margin: 0 0 1em; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } [hidden] { display: none !important; } .clear { clear: both; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .vpz-skip:focus { position: fixed !important; z-index: 100; top: 8px; left: 8px; width: auto; height: auto; clip: auto; clip-path: none; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: var(--pill); } .vpz-container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--pad); } .vpz-main { display: block; min-height: 50vh; } .vpz-main.vpz-container { padding-bottom: 28px; } .vpz-main--narrow { max-width: 860px; } .vpz-main--app { max-width: 1100px; } /* ---------- Round button ---------- */ .vpz-circle { position: relative; flex: none; display: inline-grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--line); border-radius: 50%; background: #fff; transition: transform .25s var(--spring), background .2s; } .vpz-circle:active { transform: scale(.92); } .vpz-circle img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .vpz-circle--user:has(img) { border: 0; background: #e8eefb; } .vpz-count { position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--pill); background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 0 0 2px #fff; } .vpz-count.is-pop { animation: vpz-pop .5s var(--spring); } /* ---------- Header (phones: greeting on the home screen) ---------- */ .vpz-header { display: none; padding-top: 12px; } .home .vpz-header { display: block; } .vpz-header__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 12px; align-items: center; } .vpz-header__logo, .vpz-nav { display: none; } .vpz-header__actions { grid-area: 1 / 2; display: flex; gap: 8px; } .vpz-hello { grid-area: 1 / 1; display: grid; font-size: 1.62rem; line-height: 1.2; letter-spacing: -.01em; min-width: 0; } .vpz-hello span { font-weight: 400; white-space: nowrap; font-size: clamp(1.1rem, 5.4vw, 1.62rem); } .vpz-hello span, .vpz-hello strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vpz-hello strong { font-weight: 600; font-size: clamp(1.2rem, 5.6vw, 1.62rem); } .vpz-circle--phone { display: none; } .vpz-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; } .vpz-brand svg { color: var(--accent); fill: var(--accent); } .custom-logo { max-height: 44px; width: auto; } /* ---------- App bar (phones, inner screens): back · title · profile · cart ---------- */ .vpz-appbar { position: sticky; top: 0; z-index: 45; display: flex; align-items: center; gap: 8px; padding: 10px var(--pad); background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.400) blur(16px); -webkit-backdrop-filter: saturate(1.400) blur(16px); } .vpz-appbar .vpz-circle { width: 50px; height: 50px; } .vpz-appbar__title { flex: 1; min-width: 0; text-align: center; font-size: clamp(1.05rem, 4.6vw, 1.38rem); font-weight: 500; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vpz-appbar__lead, .vpz-appbar__actions { flex: none; display: flex; gap: 6px; } .vpz-appbar .vpz-circle--home { color: var(--ink); } @media (max-width: 359px) { .vpz-appbar { gap: 4px; } .vpz-appbar .vpz-circle { width: 44px; height: 44px; } .vpz-appbar__lead, .vpz-appbar__actions { gap: 4px; } } /* ---------- Pill CTA ("slide to act") ---------- */ .vpz-pill { --knob: 92px; position: relative; display: flex; align-items: center; width: 100%; max-width: 460px; height: 82px; padding: 6px; border-radius: var(--pill); background: var(--soft); font-weight: 500; font-size: 1.19rem; letter-spacing: -.01em; touch-action: pan-y; user-select: none; -webkit-user-select: none; overflow: hidden; -webkit-user-drag: none; -webkit-touch-callout: none; } .vpz-pill--light { background: #fff; color: var(--ink); box-shadow: var(--shadow); } .vpz-pill__dot { position: relative; z-index: 2; flex: none; display: grid; place-items: center; width: var(--knob); height: 70px; border-radius: var(--pill); background: var(--ink); color: #fff; transition: width .45s var(--ease), transform .45s var(--ease); } .vpz-pill.is-dragging .vpz-pill__dot { transition: none; } .vpz-pill__label { flex: 1; text-align: center; padding-left: 6px; transition: opacity .2s; } .vpz-pill__chevs { margin-right: 22px; display: flex; } .vpz-pill__chevs svg path { animation: vpz-chev 1.600s infinite; } .vpz-pill__chevs svg path:nth-child(2) { animation-delay: .18s; } .vpz-pill__chevs svg path:nth-child(3) { animation-delay: .36s; } .vpz-pill:hover .vpz-pill__dot { width: calc(var(--knob) + 14px); } .vpz-pill.is-done .vpz-pill__dot { width: 100%; } .vpz-pill.is-done .vpz-pill__label, .vpz-pill.is-done .vpz-pill__chevs { opacity: 0; } /* ---------- Hero ---------- */ .vpz-hero { display: none; position: relative; background: var(--sky); overflow: hidden; } .vpz-hero__kicker { margin: 0 0 14px; font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; } .vpz-hero__title { font-size: clamp(2.3rem, 11.500vw, 4.200rem); line-height: 1.22; font-weight: 600; margin-bottom: .4em; } .vpz-hero__title mark { display: inline-block; padding: 0 .28em .06em; border-radius: .3em; background: var(--accent); color: #fff; } .vpz-hero__lead { max-width: 34em; color: #2c3e55; } .vpz-hero__art img, .vpz-bottle { width: auto; filter: drop-shadow(0 30px 34px rgba(20, 80, 140, .28)); } .vpz-bottle { transform: rotate(12deg); } .vpz-hero__art > * { animation: vpz-float 6s ease-in-out infinite; } /* Welcome screen (phones): covers the screen until the knob is slid. */ .vpz-splash-screen { display: none; } .vpz-splash body { overflow: hidden; } .vpz-splash .vpz-splash-screen { --splash-1: #a7d2ff; --splash-2: #e8f6ff; --splash-chip: var(--accent); --splash-text: var(--ink); display: block; position: fixed; inset: 0; z-index: 90; overflow: hidden; color: var(--splash-text); background: linear-gradient(170deg, var(--splash-1) 0%, var(--splash-2) 62%, var(--splash-1) 130%); transition: transform .7s var(--ease), border-radius .7s var(--ease); } .vpz-splash-screen.is-leaving { transform: translateY(-104%); border-radius: 0 0 var(--r-xl) var(--r-xl); } .vpz-splash-screen::before, .vpz-splash-screen::after { content: ""; position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); pointer-events: none; animation: vpz-drift 14s ease-in-out infinite alternate; } .vpz-splash-screen::before { width: 90vw; height: 46vw; top: 12%; right: -30%; } .vpz-splash-screen::after { width: 80vw; height: 40vw; bottom: 18%; left: -30%; animation-duration: 18s; } .vpz-splash-screen__inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; padding: calc(64px + env(safe-area-inset-top)) var(--pad) calc(24px + env(safe-area-inset-bottom)); text-align: center; } .vpz-splash-screen__kicker { margin: 0 0 12px; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; } .vpz-splash-screen__title { margin: 0; font-size: clamp(2.300rem, 11.500vw, 3.600rem); line-height: 1.16; font-weight: 600; letter-spacing: -.01em; } .vpz-splash-screen__title mark { display: inline-block; padding: 0 .26em .04em; border-radius: .28em; background: var(--splash-chip); color: #fff; } .vpz-splash-screen__text { margin: 12px auto 0; max-width: 26em; opacity: .8; } .vpz-splash-screen__art { flex: 1; min-height: 0; display: grid; place-items: center; margin: 6px -20px -26px; } .vpz-splash-screen__art img, .vpz-splash-screen__art .vpz-bottle { width: auto; height: 100%; max-height: 54vh; object-fit: contain; filter: drop-shadow(0 30px 34px rgba(20, 80, 140, .28)); animation: vpz-float 6s ease-in-out infinite; } .vpz-splash-screen .vpz-pill { margin-inline: auto; position: relative; z-index: 2; } .vpz-splash-screen__inner > * { animation: vpz-rise .9s var(--ease) both; } .vpz-splash-screen__title { animation-delay: .08s; } .vpz-splash-screen__art { animation-delay: .18s; } .vpz-splash-screen .vpz-pill { animation-delay: .3s; } /* ---------- Sections ---------- */ .vpz-section { margin-top: 26px; } .vpz-section--products { margin-top: 18px; } .vpz-section__head { display: none; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .vpz-section__head h2 { margin: 0; } .vpz-section__head a { color: var(--ink-2); font-size: .9rem; white-space: nowrap; } .vpz-chips { display: flex; gap: 8px; margin: 0 calc(var(--pad) * -1) 18px; padding: 2px var(--pad); overflow-x: auto; scrollbar-width: none; } .vpz-chips::-webkit-scrollbar { display: none; } .vpz-chip { flex: none; display: grid; place-items: center; height: 62px; padding: 0 26px; border-radius: var(--r-md); background: var(--soft); font-size: .95rem; white-space: nowrap; transition: background .3s, color .3s, transform .25s var(--spring); } .vpz-chip:active { transform: scale(.95); } .vpz-chip.is-active { background: var(--ink); color: #fff; } .vpz-benefits { display: grid; gap: 12px; } .vpz-benefit { padding: 24px; border-radius: var(--r-lg); background: var(--soft); } .vpz-benefit h3 { margin: 16px 0 4px; } .vpz-benefit p { margin: 0; color: var(--ink-2); font-size: .94rem; } .vpz-benefit__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--accent); } /* ---------- Product card ---------- */ ul.products { margin: 0 0 24px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; grid-auto-rows: 8px; } ul.products::before, ul.products::after { display: none !important; } ul.products li.product { --tone: #dbeeff; --tone-2: #7cc0f5; position: relative; grid-row: span 28; height: 210px; padding: 16px 14px; border-radius: 26px; background: var(--tone); overflow: hidden; isolation: isolate; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } ul.products li.product:nth-child(6n+1) { --tone: #ffdfe2; --tone-2: #ee9aa8; } ul.products li.product:nth-child(6n+2) { --tone: #dbeeff; --tone-2: #7cc0f5; } ul.products li.product:nth-child(6n+3) { --tone: #e1dcff; --tone-2: #a493f2; } ul.products li.product:nth-child(6n+4) { --tone: #ffdcbd; --tone-2: #f6a565; } ul.products li.product:nth-child(6n+5) { --tone: #ffeebb; --tone-2: #ecc853; } ul.products li.product:nth-child(6n+6) { --tone: #dcf9df; --tone-2: #7cd49a; } ul.products li.product:active { transform: scale(.975); } .vpz-grid-meta { grid-column: 2; grid-row: span 8; height: 52px; } .vpz-grid-meta__btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 100%; padding: 0 5px 0 18px; border: 0; border-radius: var(--pill); background: var(--soft); color: var(--ink); font-size: .95rem; font-weight: 500; text-align: left; transition: transform .25s var(--spring), background .25s; } button.vpz-grid-meta__btn:active { transform: scale(.96); } .vpz-grid-meta__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vpz-grid-meta__btn i { flex: none; display: grid; place-items: center; width: 44px; height: 42px; border-radius: var(--pill); background: #fff; } .vpz-card__link { position: absolute; inset: 0; padding: inherit; } .vpz-card__head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; max-width: calc(100% - 44px); } .vpz-card__title { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; font-weight: 600; font-size: 1.06rem; line-height: 1.22; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .vpz-card__rating, .vpz-card__sale { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: 8px; background: rgba(255, 255, 255, .92); font-size: .72rem; font-weight: 600; } .vpz-card__sale { padding: 0 8px; background: var(--ink); color: #fff; } .vpz-card__img { position: absolute; z-index: 1; right: -3%; bottom: 16px; width: 70%; height: 78%; display: flex; align-items: flex-end; justify-content: center; } .vpz-card__img img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; mix-blend-mode: multiply; transform-origin: 50% 100%; transition: transform .6s var(--ease); } .vpz-tilt .vpz-card__img img { transform: rotate(14deg); } .vpz-card__foot { position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 40px; padding: 4px 4px 4px 14px; border-radius: var(--pill); border: 1px solid rgba(255, 255, 255, .65); background: linear-gradient(90deg, rgba(255, 255, 255, .5) 20%, color-mix(in srgb, var(--tone-2) 60%, transparent)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .vpz-card__price { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: .82rem; line-height: 1.1; white-space: nowrap; } .vpz-card__price del { display: block; font-size: .68rem; font-weight: 500; opacity: .6; } .vpz-card__price ins { text-decoration: none; } .vpz-card__foot .button { flex: none; display: grid; place-items: center; width: 48px; min-height: 0; height: 100%; padding: 0; border: 0; border-radius: var(--pill); background: var(--ink); color: #fff; transition: transform .3s var(--spring), background .3s; } .vpz-card__foot .button svg { width: 18px; height: 18px; } .vpz-card__foot .button:active { transform: scale(.86); } .vpz-card__foot .button.loading svg { animation: vpz-wiggle .5s ease-in-out infinite; } .vpz-card__foot .button.added { background: var(--accent); } .vpz-card__foot .added_to_cart { display: none; } /* Favourite button (printed by VPZ Core). */ .vpz-fav { position: absolute; z-index: 3; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink); transition: transform .3s var(--spring); } .vpz-fav svg { width: 18px; height: 18px; transition: fill .2s, color .2s; } .vpz-fav:active { transform: scale(.85); } .vpz-fav.is-active { color: #ff4d6d; } .vpz-fav.is-active svg { fill: currentColor; animation: vpz-pop .45s var(--spring); } .vpz-fav--single { top: 4px; right: 0; width: 52px; height: 52px; background: var(--soft); } .vpz-fav--single svg { width: 22px; height: 22px; } /* Home carousel (reference "Home"): centre card ~304pt, neighbours peek ~33pt on both sides, every card is a soft trapezoid (narrower at the top), the list loops endlessly. */ .vpz-carousel { position: relative; margin: 0 calc(var(--pad) * -1); } .vpz-carousel ul.products { position: relative; display: flex; gap: 10px; margin: 0; padding: 14px 0 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .vpz-carousel ul.products::-webkit-scrollbar { display: none; } .vpz-carousel ul.products li.product { flex: 0 0 calc(100% - 86px); height: min(373px, 96vw); padding: 36px 30px; border-radius: 0; background: none; overflow: visible; scroll-snap-align: center; scroll-snap-stop: always; } .vpz-carousel ul.products li.product::before { content: ""; position: absolute; z-index: -1; inset: -12px -7px 0; border-radius: 56px; background: var(--tone); transform: perspective(900px) rotateX(8deg); transform-origin: 50% 100%; } .vpz-carousel .vpz-card__head { max-width: 60%; gap: 10px; } .vpz-carousel .vpz-card__title { font-size: 2.1rem; line-height: 1.16; font-weight: 600; -webkit-line-clamp: 2; } .vpz-carousel .vpz-card__rating, .vpz-carousel .vpz-card__sale { height: 25px; padding: 0 11px 0 9px; border-radius: 9px; font-size: .84rem; font-weight: 500; } .vpz-carousel .vpz-card__rating svg { width: 15px; height: 15px; } .vpz-carousel .vpz-card__img { right: 7%; bottom: 52px; width: 75%; height: 80%; } .vpz-carousel .vpz-card__foot { left: 10px; right: 10px; bottom: 14px; height: 68px; padding: 5px 5px 5px 24px; border-color: rgba(255, 255, 255, .8); } .vpz-carousel .vpz-card__price { font-size: 1.12rem; font-weight: 500; } .vpz-carousel .vpz-card__foot .button { width: 80px; background: #000; } .vpz-carousel .vpz-card__foot .button svg { width: 24px; height: 24px; } .vpz-carousel .vpz-fav { top: 28px; right: 22px; width: 44px; height: 44px; } .vpz-carousel .vpz-fav svg { width: 20px; height: 20px; } .vpz-carousel .vpz-chips { margin-top: 4px; } .vpz-carousel__nav { display: none; } .vpz-section--products > .vpz-chips { margin-top: 6px; } /* Card deck mode (JS): cards lie one under another, the top one is swiped away. */ .vpz-carousel.is-deck { margin: 0 calc(var(--pad) * -1); padding: 14px 0 52px; overflow-x: hidden; overflow-y: visible; } @supports (overflow: clip) { .vpz-carousel.is-deck { overflow-x: clip; } } .vpz-carousel.is-deck ul.products { position: relative; z-index: 0; isolation: isolate; display: block; width: calc(100% - 48px); max-width: 360px; height: min(380px, 98vw); margin: 0 auto; padding: 0; overflow: visible; scroll-snap-type: none; } .vpz-carousel.is-deck ul.products li.product { position: absolute; inset: 0; height: auto; transform-origin: 50% 90%; will-change: transform; transition: transform .55s var(--ease), opacity .35s ease; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; } .vpz-carousel.is-deck .vpz-card__head { max-width: calc(100% - 56px); } .vpz-carousel.is-deck .vpz-card__title { font-size: clamp(1.5rem, 7.400vw, 1.9rem); text-wrap: balance; } .vpz-carousel.is-deck ul.products li.product::before { box-shadow: 0 10px 22px -18px rgba(15, 21, 32, .2); } .vpz-carousel.is-deck ul.products li.product.is-dragging { transition: none; cursor: grabbing; } .vpz-carousel.is-deck ul.products li.product.no-anim { transition: none !important; } .vpz-carousel.is-deck ul.products li.product:not(.is-front) { pointer-events: none; } .vpz-carousel.is-deck ul.products li.product:not(.is-front) > *:not(.vpz-card__link) { visibility: hidden; } .vpz-carousel.is-deck ul.products li.product:not(.is-front) .vpz-card__link > * { opacity: .0; } .vpz-carousel.is-deck ul.products li.product.is-front .vpz-card__link > * { transition: opacity .3s .1s; } .vpz-section--catalog { margin-top: 6px; } .woocommerce-result-count, .woocommerce-products-header { display: none; } .woocommerce-ordering { margin: 0 0 16px; } .woocommerce-ordering select { width: auto; max-width: 100%; min-height: 48px; padding: 0 44px 0 20px; border: 0; border-radius: var(--pill); background-color: var(--soft); font-size: .92rem; font-weight: 500; } .woocommerce-pagination ul, .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; } .page-numbers:not(ul) { display: grid; place-items: center; min-width: 50px; height: 50px; padding: 0 12px; border-radius: var(--pill); background: var(--soft); } .page-numbers.current { background: var(--ink); color: #fff; } .woocommerce-no-products-found { margin-top: 16px; } /* ---------- Forms & buttons ---------- */ input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="url"], input[type="date"], input[type="search"]:not(.vpz-search input), select, textarea { width: 100%; min-height: 64px; padding: 14px 22px; border: 1.500px solid transparent; border-radius: var(--r-md); background: var(--soft); transition: border-color .2s, background .2s; -webkit-appearance: none; appearance: none; } select { padding-right: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1520' stroke-width='1.600' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 20px; } textarea { min-height: 120px; resize: vertical; } input:focus, select:focus, textarea:focus { border-color: var(--ink); background-color: #fff; outline: 0; } label { font-size: .9rem; font-weight: 500; } input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--ink); vertical-align: -5px; margin: 0 6px 0 0; } .button, button[type="submit"], input[type="submit"], .wp-element-button, .wc-block-components-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 12px 28px; border: 0; border-radius: var(--pill); background: var(--ink); color: #fff; font-weight: 500; cursor: pointer; transition: transform .25s var(--spring), opacity .2s; } .button:active, button[type="submit"]:active { transform: scale(.97); } .button:disabled, .button.disabled { opacity: .45; cursor: not-allowed; } /* Big pill actions: add to cart, proceed to checkout, place order. */ .button.single_add_to_cart_button, .button.checkout-button, #place_order { position: relative; width: 100%; min-height: 82px; padding: 6px 64px 6px 104px !important; background: var(--soft) !important; color: var(--ink) !important; font-size: 1.19rem; letter-spacing: -.01em; overflow: hidden; opacity: 1 !important; white-space: nowrap; text-overflow: ellipsis; } .button.checkout-button { padding-right: 56px !important; font-size: clamp(1rem, 4.400vw, 1.19rem); } .single_add_to_cart_button::before, .checkout-button::before, #place_order::before { content: ""; position: absolute; z-index: 1; left: 6px; top: 6px; bottom: 6px; width: 92px; border-radius: var(--pill); background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.600' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / 26px no-repeat; transition: width .5s var(--ease); } .single_add_to_cart_button::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.600' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.500 9.500h17l-1.600 8.200a2 2 0 0 1-2 1.600H7.100a2 2 0 0 1-2-1.600z'/%3E%3Cpath d='M8 9.500 12 4l4 5.500'/%3E%3C/svg%3E"); } .single_add_to_cart_button::after, .checkout-button::after, #place_order::after { content: ""; position: absolute; right: 26px; top: 50%; width: 28px; height: 24px; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24' fill='none' stroke='%230f1520' stroke-width='1.600' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 6 6-6 6' opacity='.3'/%3E%3Cpath d='m10 6 6 6-6 6' opacity='.6'/%3E%3Cpath d='m17 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; animation: vpz-nudge 1.600s ease-in-out infinite; } .single_add_to_cart_button:hover::before, .checkout-button:hover::before, #place_order:hover::before { width: 106px; } .single_add_to_cart_button.is-busy::before, .checkout-button.is-busy::before, #place_order.is-busy::before, .single_add_to_cart_button.loading::before, .processing #place_order::before { width: calc(100% - 12px); } .single_add_to_cart_button.disabled { opacity: .5 !important; } /* Quantity stepper */ .quantity { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--pill); background: var(--soft); } .quantity .qty { width: 48px; min-height: 40px; padding: 0; border: 0; border-radius: 0; background: none; text-align: center; font-weight: 600; font-size: 1.05rem; -moz-appearance: textfield; appearance: textfield; } .quantity .qty::-webkit-outer-spin-button, .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .vpz-qty__btn { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 4px 14px rgba(20, 40, 80, .08); transition: transform .25s var(--spring); } .vpz-qty__btn:active { transform: scale(.86); } .vpz-qty__btn svg { width: 18px; height: 18px; } .vpz-qty__num { display: none; } .quantity:has(input[type="hidden"]) { display: none; } /* Notices & toast */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 16px 20px; border-radius: var(--r-md); background: #e7f5ff; list-style: none; font-size: .94rem; animation: vpz-rise .5s var(--ease) both; } .woocommerce-error { background: #ffe7e7; } .woocommerce-message .button, .woocommerce-info .button { order: 2; margin-left: auto; min-height: 40px; padding: 8px 18px; font-size: .88rem; } .woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus { outline: 0; } .woocommerce-notices-wrapper:empty { display: none; } .vpz-toast { position: fixed; z-index: 95; left: 50%; bottom: calc(var(--tabbar) + 8px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 22px; border-radius: var(--pill); background: var(--ink); color: #fff; font-size: .94rem; white-space: nowrap; box-shadow: 0 16px 40px rgba(10, 20, 40, .3); transform: translate(-50%, 30px) scale(.9); opacity: 0; pointer-events: none; transition: transform .5s var(--spring), opacity .3s; } .vpz-no-tabbar .vpz-toast { bottom: calc(20px + env(safe-area-inset-bottom)); } .vpz-toast.is-open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } .vpz-toast a { padding: 10px 18px; border-radius: var(--pill); background: #fff; color: var(--ink); font-weight: 600; } .vpz-toast.is-error { background: #c93a3a; } .vpz-toast:not(:has(a)) { padding: 16px 24px; } .vpz-fly { position: fixed; z-index: 96; margin: 0; pointer-events: none; object-fit: contain; will-change: transform, opacity; } /* Bottom sheets: cart, info, contacts */ .vpz-backdrop { position: fixed; inset: 0; z-index: 97; background: rgba(15, 21, 32, .45); opacity: 0; transition: opacity .35s; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .vpz-backdrop.is-open { opacity: 1; } .vpz-sheet { position: fixed; z-index: 98; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-width: 560px; max-height: 88vh; margin-inline: auto; padding: 12px var(--pad) calc(20px + env(safe-area-inset-bottom)); border-radius: 40px 40px 0 0; background: #fff; color: var(--ink); transform: translateY(105%); transition: transform .55s var(--ease); box-shadow: 0 -10px 40px rgba(10, 20, 40, .14); } .vpz-sheet[hidden] { display: flex !important; visibility: hidden; } .vpz-sheet.is-open { transform: none; visibility: visible; } .vpz-sheet::before { content: ""; flex: none; display: block; width: 56px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: #d5dbe3; } .vpz-sheet__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .vpz-sheet__head h2 { margin: 0; font-size: 1.5rem; font-weight: 500; } .vpz-sheet__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--soft); color: inherit; } .vpz-sheet__scroll, .vpz-drawer__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); } .vpz-sheet__empty { color: var(--ink-2); } .vpz-acc { border-bottom: 1px solid var(--line); } .vpz-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; font-size: 1.12rem; font-weight: 500; cursor: pointer; list-style: none; } .vpz-acc summary::-webkit-details-marker { display: none; } .vpz-acc summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 6px; border: solid currentColor; border-width: 0 1.800px 1.800px 0; transform: rotate(45deg); transition: transform .3s var(--ease); } .vpz-acc[open] summary::after { transform: rotate(-135deg); } .vpz-acc__body { padding: 0 0 18px; color: #333d4b; font-size: .98rem; } .vpz-acc__body > :last-child { margin-bottom: 0; } .vpz-pill--call { margin-top: 14px; } .vpz-contacts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .vpz-contacts a { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 8px 22px 8px 8px; border-radius: 38px; background: var(--soft); transition: transform .25s var(--spring), background .25s; } .vpz-contacts a:active { transform: scale(.97); background: #e9edf2; } .vpz-contacts__icon { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fff; } .vpz-contacts__text { flex: 1; min-width: 0; display: grid; gap: 2px; } .vpz-contacts__text strong { font-size: 1.19rem; font-weight: 600; letter-spacing: .01em; } .vpz-contacts__text small { color: var(--ink-2); font-size: .86rem; line-height: 1.3; } .vpz-contacts__go { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; } .vpz-contacts__note { display: flex; gap: 12px; margin: 16px 0 0; padding: 16px 18px; border-radius: 24px; background: #eef7ff; color: #2c3e55; font-size: .92rem; line-height: 1.45; } .vpz-contacts__note svg { flex: none; margin-top: 1px; color: var(--accent); } .vpz-contacts__more { margin-top: 16px; } /* Cart panel: dark, as the cart screen of the reference. */ .vpz-sheet--cart { background: #fff; color: var(--ink); } .vpz-drawer__empty { display: grid; justify-items: center; gap: 6px; padding: 26px 0 10px; text-align: center; color: var(--ink-2); } .vpz-drawer__empty svg { color: var(--accent); } .vpz-mini { margin: 0; padding: 0; list-style: none; } .vpz-mini { display: grid; gap: 8px; } .vpz-mini li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 26px; background: var(--soft); } .vpz-mini__img { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: #fff; overflow: hidden; } .vpz-mini__img img { display: block; width: 56px; height: 56px; object-fit: contain; mix-blend-mode: multiply; } .vpz-mini__info { display: grid; gap: 2px; min-width: 0; } .vpz-mini__info > a { font-size: 1.12rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vpz-mini__info small { font-size: .82rem; color: var(--ink-2); } .vpz-mini__qty { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .vpz-mini__qty b { min-width: 14px; text-align: center; font-weight: 500; } .vpz-mini__qty button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink); transition: transform .25s var(--spring); } .vpz-mini__qty button { background: var(--ink) !important; color: #fff !important; } .vpz-mini__qty button[data-vpz-mini="-1"] { background: #fff !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--line); } .vpz-mini__qty button:active { transform: scale(.85); } .vpz-mini__qty button:disabled { opacity: .4; } .vpz-mini__price { display: grid; place-items: center; height: 34px; padding: 0 14px; border-radius: var(--pill); background: #fff; box-shadow: 0 2px 8px rgba(20, 40, 80, .06); color: var(--ink); font-size: .9rem; font-weight: 600; white-space: nowrap; } .vpz-mini.is-busy, .vpz-drawer__body.is-busy .vpz-mini { opacity: .55; pointer-events: none; transition: opacity .2s; } .vpz-mini__totals { display: grid; gap: 6px; margin: 12px 0 14px; padding: 18px 22px; border-radius: 28px; background: linear-gradient(140deg, #eaf6ff, #f6fbff); color: var(--ink); } .vpz-mini__totals > div { display: flex; justify-content: space-between; gap: 12px; } .vpz-mini__totals .vpz-mini__total { align-items: baseline; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); } .vpz-mini__total span { font-size: 1.12rem; } .vpz-mini__total strong { font-size: 1.9rem; font-weight: 600; letter-spacing: -.01em; } .vpz-mini__totals small { color: var(--ink-2); font-size: .8rem; } .vpz-sheet--cart .vpz-pill { max-width: none; background: var(--soft); box-shadow: none; } .vpz-mini__link { display: block; margin-top: 12px; text-align: center; font-size: .92rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; } /* ---------- Single product: shared ---------- */ div.product { position: relative; } .woocommerce-product-gallery { position: relative; } .woocommerce-product-gallery__wrapper { margin: 0; } .woocommerce-product-gallery__image a { display: block; } .woocommerce-product-gallery__image img { display: block; width: 100%; object-fit: contain; mix-blend-mode: multiply; } .woocommerce-product-gallery__image:first-child img { view-transition-name: vpz-product; } .woocommerce-product-gallery__trigger { position: absolute; z-index: 3; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; text-indent: -999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1520' stroke-width='1.600' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.500'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E") center / 20px no-repeat; } .woocommerce-product-gallery__trigger img, .woocommerce-product-gallery__trigger span { display: none !important; } .flex-control-thumbs { display: flex; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; overflow-x: auto; } .flex-control-thumbs li { flex: 0 0 64px; } .flex-control-thumbs img { border-radius: 16px; background: var(--soft); cursor: pointer; opacity: .55; transition: opacity .2s; } .flex-control-thumbs img.flex-active { opacity: 1; } .onsale { position: absolute; z-index: 3; top: 0; right: 0; padding: 6px 14px; border-radius: var(--pill); background: var(--ink); color: #fff; font-size: .8rem; font-weight: 600; } .vpz-plate { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 200px; height: 84px; padding: 0 24px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, .7); background: linear-gradient(120deg, rgba(255, 255, 255, .5), rgba(124, 192, 245, .5)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .vpz-plate span { max-width: 5.500em; font-size: .9rem; line-height: 1.3; } .vpz-plate strong { font-size: 1.62rem; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; } .vpz-plate strong.is-swap { animation: vpz-rise .4s var(--ease); } .product_title { font-size: 1.88rem; font-weight: 600; line-height: 1.25; } .woocommerce-product-details__short-description { color: var(--ink-2); } .woocommerce-product-rating { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink-2); } .star-rating { position: relative; width: 5.200em; height: 1em; font-size: .95rem; line-height: 1; overflow: hidden; } .star-rating::before { content: "★★★★★"; position: absolute; inset: 0; color: #d6dde5; letter-spacing: .04em; } .star-rating span { position: absolute; inset: 0 auto 0 0; overflow: hidden; padding-top: 1em; } .star-rating span::before { content: "★★★★★"; position: absolute; top: 0; left: 0; color: #f5b301; letter-spacing: .04em; } div.product .summary .price del { opacity: .55; font-size: .8em; font-weight: 500; margin-right: 6px; } div.product .summary .price ins { text-decoration: none; } table.variations { border-collapse: collapse; } table.variations th { text-align: left; font-weight: 500; } .vpz-swatches { display: flex; flex-wrap: wrap; gap: 10px; } .vpz-swatches ~ .reset_variations, .variations td:has(.vpz-swatches) select { display: none !important; } .vpz-swatch { min-width: 64px; height: 64px; padding: 0 10px; border: 0; border-radius: var(--pill); background: var(--soft); font-weight: 500; font-size: .95rem; white-space: nowrap; transition: background .3s, color .3s, transform .3s var(--spring); } .vpz-swatch:active { transform: scale(.9); } .vpz-swatch.is-active { background: var(--ink); color: #fff; } .vpz-swatch.is-off { opacity: .35; } .woocommerce-variation-description p, .woocommerce-variation-availability p { margin: 0 0 10px; } .product_meta { display: grid; gap: 4px; color: var(--ink-2); font-size: .86rem; } .stock { font-size: .88rem; font-weight: 600; color: #1c8a4a; } .stock.out-of-stock { color: #c0392b; } .wc-tabs { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 0 16px; padding: 4px; border-radius: var(--pill); background: var(--soft); list-style: none; overflow-x: auto; scrollbar-width: none; } .wc-tabs::-webkit-scrollbar { display: none; } .wc-tabs li { flex: none; margin: 0; padding: 0; border: 0; background: none; } .wc-tabs li::before, .wc-tabs li::after { display: none; } .wc-tabs li a { display: grid; place-items: center; height: 46px; padding: 0 20px; border-radius: var(--pill); color: var(--ink-2); white-space: nowrap; font-size: .92rem; font-weight: 500; transition: background .3s, color .3s, box-shadow .3s; } .wc-tabs li.active a { background: #fff; color: var(--ink); box-shadow: 0 4px 14px -8px rgba(15, 21, 32, .35); } /* Attributes («Характеристики»): label left, value right, soft rows. */ table.woocommerce-product-attributes { display: block; width: 100%; margin: 0; border: 0; border-collapse: collapse; } table.woocommerce-product-attributes tbody { display: grid; gap: 6px; } table.woocommerce-product-attributes tr { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 18px; border-radius: 18px; background: var(--soft); } table.woocommerce-product-attributes th, table.woocommerce-product-attributes td { display: block; padding: 0; border: 0; background: none; font-size: .94rem; } table.woocommerce-product-attributes th { flex: none; max-width: 55%; color: var(--ink-2); font-weight: 400; text-align: left; } table.woocommerce-product-attributes td { min-width: 0; color: var(--ink); font-weight: 600; text-align: right; overflow-wrap: anywhere; } table.woocommerce-product-attributes td p { margin: 0; } table.woocommerce-product-attributes td a { color: inherit; text-decoration: none; } .woocommerce-Tabs-panel { color: #333d4b; } .woocommerce-Tabs-panel > h2:first-child { font-size: 1.2rem; } .shop_attributes { width: 100%; border-collapse: collapse; } .shop_attributes th, .shop_attributes td { padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 500; } .shop_attributes td { text-align: right; color: var(--ink-2); } .shop_attributes td p { margin: 0; } .related > h2, .upsells > h2, .cross-sells > h2 { font-size: 1.4rem; margin: 28px 0 14px; } #reviews .commentlist { margin: 0; padding: 0; list-style: none; } #reviews .comment_container { display: flex; gap: 12px; margin-bottom: 14px; padding: 16px; border-radius: var(--r-md); background: var(--soft); } #reviews .avatar { border-radius: 50%; } #reviews .comment-text p { margin: 4px 0 0; } .comment-form-rating .stars a { margin-right: 6px; color: var(--ink-2); } .comment-form > p { margin-bottom: 12px; } /* ---------- Single product: phones & tablets (app screen) ---------- */ @media (max-width: 999px) { .vpz-page-head { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } div.product { display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: 8px; grid-template-areas: "title title" "sw img" "qty qty" "price price" "btn btn"; } div.product > *, div.product .summary > *, div.product form.cart > *, div.product .single_variation_wrap > * { grid-column: 1 / -1; } div.product .summary, div.product form.cart, div.product .single_variation_wrap, div.product .woocommerce-variation-add-to-cart, div.product table.variations, div.product table.variations tbody, div.product table.variations tr, div.product table.variations td { display: contents; } div.product table.variations th { display: none; } .product_title { grid-area: title; max-width: 62%; margin: 6px 0 0; min-height: 2.500em; } div.product .woocommerce-product-gallery { grid-area: img; grid-column: 1 / -1; margin-top: -34px; opacity: 1 !important; } div.product:has(.vpz-swatches) .woocommerce-product-gallery { grid-column: 2; } .woocommerce-product-gallery__image img { height: min(96vw, 400px); object-position: 50% 0; } .woocommerce-product-gallery__trigger { display: none; } .flex-control-thumbs { justify-content: center; } div.product .vpz-plate { grid-area: img; grid-column: 1 / -1; z-index: 2; align-self: end; justify-self: center; width: min(74%, 290px); margin-bottom: -8px; } div.product:has(.vpz-swatches) .vpz-plate { grid-column: 2; width: 92%; } div.product:has(.flex-control-thumbs) .vpz-plate { margin-bottom: 70px; } div.product .vpz-swatches { grid-area: sw; grid-column: 1; flex-direction: column; flex-wrap: nowrap; gap: 14px; align-self: start; margin-top: 44px; z-index: 2; } .vpz-swatch { width: 64px; padding: 0 4px; font-size: .9rem; } div.product .onsale { top: 14px; } div.product:has(.vpz-fav--single) .onsale { right: 64px; } div.product .woocommerce-product-rating { display: none; } div.product form.cart .quantity { grid-area: qty; display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; height: 132px; margin: 30px 0 0; padding: 0; background: none; border-radius: 0; } div.product form.cart .quantity::before, div.product form.cart .quantity::after { content: ""; position: absolute; top: -16px; bottom: -16px; width: 62px; background: var(--soft); } div.product form.cart .quantity::before { left: calc(var(--pad) * -1); border-radius: 0 100% 100% 0 / 0 50% 50% 0; } div.product form.cart .quantity::after { right: calc(var(--pad) * -1); border-radius: 100% 0 0 100% / 50% 0 0 50%; } div.product form.cart .vpz-qty__btn { width: 52px; height: 52px; } div.product form.cart .vpz-qty__btn svg { width: 24px; height: 24px; } div.product form.cart .quantity .qty { grid-column: 2; grid-row: 1; align-self: start; width: 100%; height: 64px; font-size: 3rem; font-weight: 500; letter-spacing: -.02em; } .vpz-js div.product form.cart .quantity .qty { opacity: 0; } .vpz-js div.product form.cart .quantity .qty:focus { opacity: 1; } .vpz-js div.product form.cart .vpz-qty__num { grid-column: 2; grid-row: 1; align-self: start; display: block; height: 64px; overflow: hidden; text-align: center; font-size: 3rem; line-height: 64px; font-weight: 500; letter-spacing: -.02em; pointer-events: none; } .vpz-js div.product form.cart .quantity .qty:focus + .vpz-qty__num { visibility: hidden; } .vpz-qty__num span { display: block; } .vpz-qty__num.is-up span { animation: vpz-roll-up .35s var(--ease); } .vpz-qty__num.is-down span { animation: vpz-roll-down .35s var(--ease); } div.product .summary > .price, div.product .summary > p.price { grid-area: price; justify-self: center; z-index: 1; display: grid; place-items: center; min-width: 136px; height: 58px; margin: -62px 0 0; padding: 0 26px; border-radius: var(--pill); background: var(--ink); color: #fff; font-size: 1.44rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; } div.product .summary > .price.is-bump { animation: vpz-pop .4s var(--spring); } .vpz-js div.product .woocommerce-variation-price { display: none; } div.product:not(:has(form.cart .quantity:not(:has(input[type="hidden"])))) .summary > .price { margin-top: 26px; } div.product .single_add_to_cart_button { grid-area: btn; margin-top: 34px; } div.product .woocommerce-product-details__short-description { margin-top: 26px; } div.product .product_meta { margin-top: 8px; } .woocommerce-tabs { margin-top: 28px; } } /* ---------- Cart ---------- */ table.shop_table { width: 100%; border-collapse: collapse; } .woocommerce-cart-form thead, .woocommerce-cart-form .product-price { display: none; } .woocommerce-cart-form tr.cart_item { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; grid-template-areas: "img name total" "img qty total"; gap: 2px 16px; align-items: center; padding: 11px 0; } .woocommerce-cart-form td { display: block; padding: 0; border: 0; } .woocommerce-cart-form .product-thumbnail { grid-area: img; } .woocommerce-cart-form .product-thumbnail img { display: block; width: 80px; height: 80px; object-fit: contain; } .woocommerce-cart-form .product-name { grid-area: name; align-self: end; font-weight: 500; font-size: 1.19rem; letter-spacing: -.01em; } .woocommerce-cart-form .product-name .variation { margin: 2px 0 4px; font-size: .84rem; font-weight: 400; opacity: .85; } .woocommerce-cart-form .product-name .variation dt, .woocommerce-cart-form .product-name .variation dd, .woocommerce-cart-form .product-name .variation p { display: inline; margin: 0; } .woocommerce-cart-form .product-quantity { grid-area: qty; align-self: start; display: flex; align-items: center; gap: 12px; } .woocommerce-cart-form .product-subtotal { grid-area: total; display: grid; place-items: center; height: 34px; padding: 0 14px; border-radius: var(--pill); background: #fff; color: var(--ink); font-weight: 600; font-size: .9rem; white-space: nowrap; } .woocommerce-cart-form .product-remove { position: absolute; right: 0; top: 2px; } .woocommerce-cart-form tr.cart_item { position: relative; } .woocommerce-cart-form .product-remove a { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .14); font-size: 1.1rem; line-height: 1; } .woocommerce-cart-form .quantity { padding: 0; gap: 2px; background: none; } .woocommerce-cart-form .quantity .qty { width: 30px; min-height: 26px; color: inherit; font-size: 1.05rem; font-weight: 500; } .woocommerce-cart-form .vpz-qty__btn { width: 22px; height: 22px; box-shadow: none; } .woocommerce-cart-form .vpz-qty__btn[data-vpz-qty="-1"] { background: #c9ced6; } .woocommerce-cart-form .vpz-qty__btn svg { width: 14px; height: 14px; stroke-width: 2.200; } .woocommerce-cart-form td.actions { display: grid; gap: 10px; padding-top: 14px; } .woocommerce-cart-form .coupon { display: flex; gap: 8px; } .woocommerce-cart-form .coupon input { flex: 1; min-width: 0; min-height: 56px; } .vpz-js .woocommerce-cart-form button[name="update_cart"] { display: none; } .woocommerce-cart-form.processing, .cart_totals.processing { opacity: .6; transition: opacity .2s; } .blockUI.blockOverlay { background: transparent !important; } .cart_totals { position: relative; } .cart_totals > h2 { display: none; } .cart_totals table, .woocommerce-checkout-review-order-table, .woocommerce-table--order-details { width: 100%; margin: 0; border-collapse: collapse; } .cart_totals th, .cart_totals td, .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td, .woocommerce-table--order-details th, .woocommerce-table--order-details td { padding: 14px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 500; } .cart_totals th { font-weight: 400; font-size: .94rem; } .cart_totals td, .woocommerce-checkout-review-order-table td:last-child, .woocommerce-checkout-review-order-table tfoot td, .woocommerce-table--order-details td:last-child { text-align: right; } .cart_totals td { font-size: 1.19rem; } .cart_totals .order-total th, .cart_totals .order-total td { display: block; border: 0; text-align: left; } .cart_totals .order-total th { padding: 18px 0 0; font-size: 1.19rem; font-weight: 500; } .cart_totals .order-total td { padding: 2px 0 6px; } .order-total .amount { font-size: 2.250rem; font-weight: 600; letter-spacing: -.02em; } .woocommerce-shipping-methods, .wc_payment_methods { margin: 0; padding: 0; list-style: none; } .woocommerce-shipping-methods li { font-size: .94rem; } .woocommerce-shipping-destination, .woocommerce-shipping-calculator { margin: 4px 0 0; font-size: .8rem; color: var(--ink-2); } .shipping-calculator-form { margin-top: 10px; display: grid; gap: 8px; text-align: left; } .shipping-calculator-form p { margin: 0; } .wc-proceed-to-checkout { position: relative; padding: 0; } .vpz-collage { position: absolute; right: -6px; bottom: calc(100% - 4px); display: flex; pointer-events: none; } .vpz-collage img { width: 62px; height: 84px; object-fit: contain; margin-left: -30px; filter: drop-shadow(0 6px 10px rgba(20, 40, 80, .18)); } .vpz-collage img:nth-child(1) { transform: rotate(-16deg) translateY(8px); } .vpz-collage img:nth-child(2) { transform: rotate(2deg) scale(1.150); z-index: 1; } .vpz-collage img:nth-child(3) { transform: rotate(18deg) translateY(10px); } .cart-empty { font-size: 1.1rem; } /* Light cart (phones and desktop): items as soft rows, totals card, collage of bottles. */ .woocommerce-cart-form .shop_table { display: block; width: 100%; border: 0; } .woocommerce-cart-form tbody { display: grid; gap: 10px; } .woocommerce-cart-form tr.cart_item { gap: 2px 14px; padding: 10px 14px 10px 10px; border-radius: 28px; background: var(--soft); } .woocommerce-cart-form .product-thumbnail { align-self: center; } .woocommerce-cart-form .product-thumbnail a { display: block; width: 80px; height: 80px; padding: 6px; border-radius: 22px; background: #fff; } .woocommerce-cart-form .product-thumbnail img { width: 100%; height: 100%; mix-blend-mode: multiply; } .woocommerce-cart-form .product-name { padding-right: 30px; font-size: 1.06rem; font-weight: 600; line-height: 1.25; } .woocommerce-cart-form .product-name a { color: inherit; text-decoration: none !important; } .woocommerce-cart-form .product-subtotal { align-self: end; margin-bottom: 4px; box-shadow: 0 4px 12px -8px rgba(15, 21, 32, .3); } .woocommerce-cart-form .product-remove { right: 10px; top: 10px; } .woocommerce-cart-form .product-remove a.remove { width: 28px; height: 28px; background: #fff; color: var(--ink-2) !important; font-size: 1.15rem; transition: background .2s, color .2s; } .woocommerce-cart-form .product-remove a.remove:hover { background: #ffe5ea; color: #c0223e !important; } .woocommerce-cart-form .quantity { gap: 4px; } .woocommerce-cart-form .vpz-qty__btn { width: 30px; height: 30px; background: #fff; box-shadow: 0 3px 10px -6px rgba(15, 21, 32, .35); } .woocommerce-cart-form .vpz-qty__btn[data-vpz-qty="-1"] { background: #fff; } .woocommerce-cart-form .vpz-qty__btn svg { width: 15px; height: 15px; } .woocommerce-cart-form .quantity .qty { width: 30px; font-weight: 600; } .woocommerce-cart-form tr:not(.cart_item) { display: block; } .woocommerce-cart-form td.actions { padding-top: 4px; } .woocommerce-cart-form .coupon input { background: var(--soft); } .cart-collaterals { margin-top: 18px; } .cart_totals { color: var(--ink); } .cart_totals table { display: block; padding: 8px 24px 16px; border: 0; border-radius: 32px; background: var(--soft); } .cart_totals tbody { display: block; } .cart_totals tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid #e4e9ef; } .cart_totals tr:last-child { border-bottom: 0; } .cart_totals tr.order-total { display: block; padding-right: 110px; } .cart_totals th, .cart_totals td { border: 0; } .cart_totals th { color: var(--ink-2); } .cart_totals .order-total th { color: var(--ink); } .wc-proceed-to-checkout { margin-top: 26px; } .wc-proceed-to-checkout .checkout-button { background: var(--soft) !important; } .vpz-collage { right: 18px; bottom: calc(100% + 32px); } @media (max-width: 999px) { .woocommerce-cart .woocommerce:has(.woocommerce-cart-form) { margin-top: 6px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); } .woocommerce-cart-form tr.cart_item { grid-template-columns: 80px minmax(0, 1fr) auto; } } /* ---------- Checkout ---------- */ form.checkout h3, .woocommerce-order h2, .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { margin: 22px 0 12px; font-size: 1.38rem; font-weight: 500; } form.checkout h3:first-child { margin-top: 6px; } .form-row { margin: 0 0 12px; padding: 0; } .form-row > label { display: block; margin: 0 0 6px 4px; color: var(--ink-2); } .form-row .required { color: #e14d4d; text-decoration: none; } .woocommerce-input-wrapper { display: block; } .woocommerce-invalid input, .woocommerce-invalid select { border-color: #e14d4d; } .checkout-inline-error-message { margin: 6px 0 0 4px; font-size: .82rem; color: #c93a3a; } .woocommerce-checkout-review-order-table thead { display: none; } .woocommerce-checkout-review-order-table .product-name { font-weight: 400; } .woocommerce-checkout-review-order-table .product-quantity { font-weight: 600; } .woocommerce-checkout-review-order-table tfoot th { font-weight: 400; } .woocommerce-checkout-review-order-table .order-total th { padding-top: 26px; border: 0; font-size: 1.19rem; font-weight: 400; vertical-align: middle; } .woocommerce-checkout-review-order-table .order-total td { padding-top: 18px; border: 0; } .wc_payment_methods { display: grid; gap: 12px; margin: 18px 0; } .wc_payment_method { position: relative; padding: 0; border-radius: 38px; background: var(--soft); transition: background .3s; } .wc_payment_method > label { position: relative; display: flex; align-items: center; gap: 16px; min-height: 76px; margin: 0; padding: 8px 64px 8px 8px; font-size: 1.12rem; font-weight: 500; cursor: pointer; } .wc_payment_method > label::before { content: ""; flex: none; width: 60px; height: 60px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1520' stroke-width='1.600' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.500' width='18' height='13' rx='3'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E") center / 26px no-repeat; } .wc_payment_method.payment_method_cod > label::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1520' stroke-width='1.600' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.500' y='6' width='19' height='12' rx='3'/%3E%3Ccircle cx='12' cy='12' r='2.800'/%3E%3Cpath d='M6 9.500v5M18 9.500v5'/%3E%3C/svg%3E"); } .wc_payment_method > label img { max-height: 26px; width: auto; margin-left: auto; } .wc_payment_method > input[type="radio"] { position: absolute; z-index: 1; right: 24px; top: 25px; } input[type="radio"] { appearance: none; -webkit-appearance: none; flex: none; width: 26px; height: 26px; margin: 0 8px 0 0; border: 1.500px solid #9aa5b3; border-radius: 50%; vertical-align: -7px; cursor: pointer; transition: background .25s, border-color .25s, transform .3s var(--spring); } input[type="radio"]:checked { border-color: var(--ink); background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.500' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.500 3.500 3.500L17 9'/%3E%3C/svg%3E") center / 18px no-repeat; transform: scale(1.060); } .payment_box { padding: 0 24px 18px 84px; font-size: .86rem; color: var(--ink-2); } .payment_box p:last-child { margin: 0; } .woocommerce-terms-and-conditions-wrapper { margin-bottom: 16px; font-size: .84rem; color: var(--ink-2); } .woocommerce-privacy-policy-text a { text-decoration: underline; } .woocommerce-form-coupon-toggle, .woocommerce-form-login-toggle { margin-bottom: 12px; } .checkout_coupon, .woocommerce-form-login { margin-bottom: 18px; } .select2-container .select2-selection--single { height: 64px; border: 0; border-radius: var(--r-md); background: var(--soft); } .select2-container .select2-selection--single .select2-selection__rendered { padding: 0 22px; line-height: 64px; color: var(--ink); } .select2-container .select2-selection--single .select2-selection__arrow { height: 64px; right: 14px; } .select2-dropdown { border: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); } #ship-to-different-address { font-size: 1rem; } /* Checkout as cards: contacts & address · delivery · comment · order & payment */ form.checkout .woocommerce-billing-fields, form.checkout .vpz-delivery, form.checkout .woocommerce-additional-fields, form.checkout #order_review { margin: 0 0 14px; padding: 20px 18px 8px; border-radius: 32px; background: var(--soft); } form.checkout #order_review { padding-bottom: 18px; } form.checkout .woocommerce-billing-fields h3, form.checkout .vpz-delivery h3, form.checkout .woocommerce-additional-fields h3 { margin: 0 0 14px 4px; font-size: 1.25rem; font-weight: 600; } form.checkout .woocommerce-shipping-fields:empty, form.checkout .woocommerce-account-fields:empty { display: none; } form.checkout .woocommerce-shipping-fields { margin: 0; } form.checkout input[type="text"], form.checkout input[type="email"], form.checkout input[type="tel"], form.checkout textarea, form.checkout select, form.checkout .vpz-date-btn, form.checkout .vpz-select-btn, form.checkout .vpz-address-pill, form.checkout .vpz-choice__item span, form.checkout .wc_payment_method { background-color: #fff; } form.checkout .vpz-choice__item input:checked + span { background: var(--ink); } form.checkout .vpz-address-pill__icon { background: var(--soft); } form.checkout #order_review_heading { margin: 20px 0 12px 4px; font-size: 1.25rem; font-weight: 600; } form.checkout .woocommerce-checkout-review-order-table td, form.checkout .woocommerce-checkout-review-order-table th { border-color: #e3e7ec; } form.checkout .wc_payment_method > label::before { background-color: var(--soft); } form.checkout .woocommerce-terms-and-conditions-wrapper { margin-top: 8px; } .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { padding: 12px 18px; font-size: .9rem; } .woocommerce-checkout .woocommerce > .woocommerce-info, .woocommerce-checkout .woocommerce-form-login { border-radius: 28px; } /* Order received */ .woocommerce-order > .woocommerce-notice { font-size: 1.2rem; font-weight: 500; } .woocommerce-order-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 20px; padding: 22px; border-radius: var(--r-lg); background: var(--soft); list-style: none; font-size: .84rem; color: var(--ink-2); } .woocommerce-order-overview strong { display: block; margin-top: 2px; font-size: 1rem; color: var(--ink); font-weight: 600; } .woocommerce-table--order-details tfoot th { font-weight: 400; } .woocommerce-customer-details address { padding: 20px 22px; border-radius: var(--r-lg); background: var(--soft); } .woocommerce-customer-details address p { margin: 6px 0 0; } address { font-style: normal; } .wc-item-meta { margin: 4px 0 0; padding: 0; list-style: none; font-size: .84rem; color: var(--ink-2); } .wc-item-meta p { display: inline; } /* Delivery sheet (VPZ Core): dark card with address and time, like "Track order". */ .vpz-delivery-card { position: relative; margin: 26px 0; padding: 26px 22px; border-radius: var(--r-xl); background: var(--ink); color: #fff; } .vpz-delivery-card h2 { margin: 0 0 18px !important; font-size: 1.3rem !important; } .vpz-delivery-card ul { display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; } .vpz-delivery-card li { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: center; } .vpz-delivery-card li + li::before { content: ""; position: absolute; left: 27px; top: -24px; width: 1.500px; height: 22px; background: rgba(255, 255, 255, .5); } .vpz-delivery-card li svg { box-sizing: content-box; grid-row: span 2; padding: 16px; border-radius: 50%; background: rgba(255, 255, 255, .12); } .vpz-delivery-card li span { font-size: .9rem; opacity: .85; } .vpz-delivery-card li strong { font-size: 1.12rem; font-weight: 500; } /* Block-based cart / checkout: align with the theme tokens. */ .wc-block-components-button:not(.is-link) { min-height: 64px; border-radius: var(--pill); background: var(--ink); color: #fff; } .wc-block-components-text-input input, .wc-block-components-combobox input, .wc-blocks-components-select__select { border-radius: 18px !important; } .wc-block-cart-items__row img, .wc-block-components-order-summary-item__image img { border-radius: 16px; background: var(--soft); } .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 1.6rem; font-weight: 600; } /* ---------- My account ---------- */ .vpz-profile { display: grid; justify-items: center; gap: 12px; margin: 10px 0 24px; } .vpz-profile img { width: 150px; height: 150px; border-radius: 50%; background: #e8eefb; object-fit: cover; } .vpz-profile strong { font-size: 1.25rem; font-weight: 500; } .woocommerce-MyAccount-navigation ul { display: grid; gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; } .woocommerce-MyAccount-navigation a { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.500' r='4'/%3E%3Cpath d='M4.500 20c.4-4 3.400-6 7.500-6s7.100 2 7.500 6z'/%3E%3C/svg%3E"); display: flex; align-items: center; gap: 18px; min-height: 76px; padding: 8px 26px 8px 8px; border-radius: var(--pill); background: var(--soft); font-size: 1.19rem; font-weight: 500; letter-spacing: -.01em; transition: transform .3s var(--spring), background .3s; } .woocommerce-MyAccount-navigation a:active { transform: scale(.97); } .woocommerce-MyAccount-navigation a::before { content: ""; flex: none; width: 60px; height: 60px; border-radius: 50%; background: #fff; } .woocommerce-MyAccount-navigation li { position: relative; } .woocommerce-MyAccount-navigation li::before { content: ""; position: absolute; z-index: 1; left: 26px; top: 26px; width: 24px; height: 24px; background: var(--ink); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; pointer-events: none; } .woocommerce-MyAccount-navigation a::after { content: ""; margin-left: auto; width: 11px; height: 11px; border: solid currentColor; border-width: 1.800px 1.800px 0 0; transform: rotate(45deg); } .woocommerce-MyAccount-navigation li { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.500' r='4'/%3E%3Cpath d='M4.500 20c.4-4 3.400-6 7.500-6s7.100 2 7.500 6z'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--orders { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.500 3.500 6.800v10.400L12 21.500l8.500-4.300V6.800zm0 2.200 5.300 2.700L12 10.100 6.700 7.400zM5.500 9l5.500 2.800v7L5.500 16z'/%3E%3C/svg%3E") !important; } .woocommerce-MyAccount-navigation-link--downloads { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v9.200l3.300-3.300 1.400 1.400L12 16l-5.700-5.700 1.400-1.400 3.300 3.300zM4 18h16v2.500H4z'/%3E%3C/svg%3E") !important; } .woocommerce-MyAccount-navigation-link--edit-address { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.500c-4 0-7 3-7 6.900 0 4.800 5.300 10.300 6.300 11.300a1 1 0 0 0 1.400 0c1-1 6.300-6.500 6.300-11.300 0-3.900-3-6.900-7-6.900zm0 9.500a2.600 2.600 0 1 1 0-5.200 2.600 2.600 0 0 1 0 5.200z'/%3E%3C/svg%3E") !important; } .woocommerce-MyAccount-navigation-link--payment-methods { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 4.500h11a2 2 0 0 1 2 2V8h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a3 3 0 0 1-3-3V7.500a3 3 0 0 1 3-3zm11 2H5a1 1 0 0 0 0 2h11zm.500 6.500a1.500 1.500 0 1 0 0 3 1.500 1.500 0 0 0 0-3z'/%3E%3C/svg%3E") !important; } .woocommerce-MyAccount-navigation-link--edit-account { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a5 5 0 0 0-5 5v2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm3 7V7a3 3 0 0 0-6 0v2zm-3 4a1.800 1.800 0 1 0 0 3.600 1.800 1.800 0 0 0 0-3.600z'/%3E%3C/svg%3E") !important; } .woocommerce-MyAccount-navigation-link--customer-logout { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h8v2.500H6.500v13H13V21H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm10.700 4.300L20.400 12l-4.700 4.700-1.400-1.400 2.300-2.300H9.500v-2h7.100l-2.300-2.300z'/%3E%3C/svg%3E") !important; } .woocommerce-MyAccount-navigation-link--vpz-favorites, .woocommerce-MyAccount-navigation-link--favorites { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.500S4 15.600 4 9.700A4.600 4.600 0 0 1 12 6.600a4.600 4.600 0 0 1 8 3.100c0 5.900-8 10.800-8 10.800z'/%3E%3C/svg%3E") !important; } .woocommerce-MyAccount-navigation .is-active a { background: var(--ink); color: #fff; } .woocommerce-MyAccount-content a:not(.button) { text-decoration: underline; text-underline-offset: 3px; } .woocommerce-MyAccount-content > p:first-child { color: var(--ink-2); } .woocommerce-orders-table { width: 100%; border-collapse: collapse; } .woocommerce-orders-table thead { display: none; } .woocommerce-orders-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; margin-bottom: 12px; padding: 18px 22px; border-radius: var(--r-lg); background: var(--soft); } .woocommerce-orders-table th, .woocommerce-orders-table td { display: block; padding: 0; text-align: left; font-weight: 500; } .woocommerce-orders-table__cell-order-number { font-size: 1.12rem; } .woocommerce-orders-table__cell-order-status { justify-self: end; padding: 4px 12px !important; border-radius: var(--pill); background: #fff; font-size: .8rem; } .woocommerce-orders-table__cell-order-date { color: var(--ink-2); font-size: .86rem; } .woocommerce-orders-table__cell-order-total { justify-self: end; font-size: .9rem; } .woocommerce-orders-table__cell-order-actions { grid-column: 1 / -1; display: flex !important; gap: 8px; margin-top: 8px; } .woocommerce-orders-table__cell-order-actions .button { min-height: 44px; padding: 8px 20px; font-size: .88rem; } .woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword { max-width: 460px; } .woocommerce-form__label-for-checkbox { display: inline-flex !important; align-items: center; } .woocommerce-form-login .form-row:has(.woocommerce-form__label-for-checkbox) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .woocommerce-LostPassword a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink-2); font-size: .9rem; } .password-input { position: relative; display: block; } .show-password-input { position: absolute; right: 16px; top: 50%; width: 28px; height: 28px; margin-top: -14px; padding: 0; border: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616b7a' stroke-width='1.600' stroke-linecap='round'%3E%3Cpath d='M2.500 12s3.500-6.500 9.500-6.500 9.500 6.500 9.500 6.500-3.500 6.500-9.500 6.500S2.500 12 2.500 12z'/%3E%3Ccircle cx='12' cy='12' r='2.800'/%3E%3C/svg%3E") center / 22px no-repeat; } .u-columns { display: grid; gap: 28px; } .woocommerce-Addresses { display: grid; gap: 14px; } .woocommerce-Address { padding: 20px 22px; border-radius: var(--r-lg); background: var(--soft); } .woocommerce-Address-title h2, .woocommerce-Address-title h3 { margin: 0 0 6px !important; font-size: 1.1rem !important; } fieldset { margin: 18px 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); } @media (max-width: 999px) { .woocommerce-account.logged-in:not(.vpz-account-home) .woocommerce-MyAccount-navigation, .woocommerce-account.logged-in:not(.vpz-account-home) .vpz-profile { display: none; } .vpz-account-home .woocommerce-MyAccount-content, .vpz-account-home .woocommerce-MyAccount-navigation-link--dashboard { display: none; } } /* ---------- Content ---------- */ .vpz-page-head { margin: 4px 0 18px; } .vpz-page-head h1 { margin: 0; } .vpz-entry > * { max-width: 100%; } .vpz-entry > .woocommerce { max-width: none; } .vpz-entry a:not(.button):not(.vpz-pill):not(.vpz-card__link):not(.wp-element-button):not(.checkout-button):not(.remove) { text-decoration: underline; text-underline-offset: 3px; } .vpz-entry .woocommerce a { text-decoration: none !important; } .vpz-entry .woocommerce a.woocommerce-privacy-policy-link, .vpz-entry .woocommerce .woocommerce-MyAccount-content a:not(.button), .vpz-entry .woocommerce .woocommerce-LostPassword a { text-decoration: underline !important; } .vpz-entry__thumb { width: 100%; margin-bottom: 18px; border-radius: var(--r-md); } blockquote { margin: 1.200em 0; padding: 16px 20px; border-radius: var(--r-md); background: var(--soft); } .vpz-posts { display: grid; gap: 16px; } .vpz-post { padding: 16px; border-radius: var(--r-lg); background: var(--soft); } .vpz-post img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 12px; border-radius: 18px; } .vpz-post h2 { font-size: 1.2rem; } .vpz-post time { color: var(--ink-2); font-size: .82rem; } .vpz-post p { margin: 6px 0 0; color: var(--ink-2); font-size: .94rem; } .vpz-comments { margin-top: 32px; } .vpz-comments__list { padding: 0; list-style: none; } .vpz-comments__list .comment-body { margin-bottom: 12px; padding: 16px; border-radius: var(--r-md); background: var(--soft); } .alignwide, .alignfull { max-width: none; } .aligncenter { display: block; margin-inline: auto; } /* ---------- Footer: minimal ---------- */ .vpz-footer { margin-top: 28px; padding: 22px 0 18px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--ink-2); } .vpz-no-tabbar .vpz-footer { display: none; } .vpz-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; } .vpz-footer .vpz-brand { font-size: 1.05rem; color: var(--ink); } .vpz-footer .custom-logo { max-height: 32px; } .vpz-footer__phone { color: var(--ink); font-weight: 600; } .vpz-footer__nav ul { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; } .vpz-footer__nav a:hover { color: var(--ink); } .vpz-footer__copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 12px; font-size: .78rem; opacity: .8; } .vpz-footer__ver { font-variant-numeric: tabular-nums; letter-spacing: .02em; opacity: .75; } /* ---------- Mobile tab bar with a notch: Catalogue · Sale · [Cart] · Info · Contacts ---------- */ .vpz-tabbar { position: fixed; z-index: 50; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; height: 68px; color: #fff; filter: drop-shadow(0 12px 20px rgba(10, 20, 40, .22)); view-transition-name: vpz-tabbar; transition: transform .5s var(--ease); } /* One shape for the whole bar (no seams): a pill with a round hole around the cart button — 5 px gap, anti-aliased edge. */ .vpz-tabbar::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 34px; background: #000; -webkit-mask: radial-gradient(circle at 50% 50%, transparent 30.6px, #000 31.4px); mask: radial-gradient(circle at 50% 50%, transparent 30.6px, #000 31.4px); } .vpz-no-tabbar .vpz-tabbar { display: none; } .vpz-tabbar.is-hidden { transform: translateY(140%); } .vpz-tabbar__side { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; } .vpz-tabbar__side:first-child { padding-left: 15px; } .vpz-tabbar__side:last-child { padding-right: 15px; } .vpz-tabbar__notch { position: relative; flex: none; width: 72px; } .vpz-tabbar__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; min-width: 0; padding: 0 2px; font-size: clamp(.6rem, 2.800vw, .74rem); font-weight: 500; line-height: 1; letter-spacing: 0; white-space: nowrap; opacity: .75; transition: opacity .2s, transform .3s var(--spring); } .vpz-tabbar__item svg { flex: none; transition: transform .4s var(--spring); } .vpz-tabbar__item:active { transform: scale(.9); } .vpz-tabbar__item.is-active { opacity: 1; } .vpz-tabbar__item.is-active::after { content: ""; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .vpz-tabbar__fab { position: absolute; left: 10px; top: 8px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff; transition: transform .35s var(--spring); } .vpz-tabbar__fab:active { transform: scale(.9); } .vpz-tabbar__fab svg { width: 22px; height: 22px; } .vpz-tabbar__fab .vpz-count { top: -3px; right: -5px; background: #fff; color: var(--ink); box-shadow: none; } .vpz-cart-target.is-bump { animation: vpz-bump .6s var(--spring); } /* ---------- Motion ---------- */ .vpz-js:not(.vpz-in-all) .vpz-reveal.vpz-reveal { opacity: 0; transform: translateY(28px) scale(.97); } .vpz-js .vpz-reveal.vpz-reveal.vpz-reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); } .vpz-reveal.is-in { opacity: 1 !important; transform: none !important; } @keyframes vpz-chev { 0%, 100% { opacity: .2; } 40% { opacity: 1; } } @keyframes vpz-nudge { 0%, 100% { transform: translate(0, -50%); } 50% { transform: translate(5px, -50%); } } @keyframes vpz-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.200); } 100% { transform: scale(1); } } @keyframes vpz-bump { 0%, 100% { transform: none; } 35% { transform: translateY(-9px) scale(1.120); } 70% { transform: translateY(2px) scale(.96); } } @keyframes vpz-wiggle { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } } @keyframes vpz-rise { from { opacity: 0; transform: translateY(26px); } } @keyframes vpz-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } } @keyframes vpz-drift { to { transform: translateX(14%); } } @keyframes vpz-roll-up { from { transform: translateY(70%); opacity: 0; } } @keyframes vpz-roll-down { from { transform: translateY(-70%); opacity: 0; } } @keyframes vpz-vt-out { to { opacity: 0; transform: translateY(-12px) scale(.985); } } @keyframes vpz-vt-in { from { opacity: 0; transform: translateY(18px) scale(.985); } } @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vpz-vt-out .22s ease both; } ::view-transition-new(root) { animation: vpz-vt-in .42s cubic-bezier(.22, 1, .36, 1) both; } ::view-transition-group(vpz-product) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } ::view-transition-old(vpz-tabbar), ::view-transition-new(vpz-tabbar) { animation: none; } /* ---------- Tablet ---------- */ @media (min-width: 640px) { ul.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; grid-auto-rows: auto; margin: 0 0 24px; padding: 0; overflow: visible; } ul.products li.product { grid-row: auto; height: 300px; padding: 20px 18px; border-radius: var(--r-lg); } .vpz-carousel ul.products li.product { flex-basis: 340px; height: 400px; } .vpz-carousel.is-deck ul.products { width: 380px; max-width: none; height: 420px; } .vpz-carousel.is-deck .vpz-carousel__nav--prev { left: calc(50% - 250px); } .vpz-carousel.is-deck .vpz-carousel__nav--next { right: calc(50% - 250px); } .vpz-carousel__nav { position: absolute; z-index: 5; top: calc(50% - 32px); display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--shadow); transition: transform .25s var(--spring); } .vpz-carousel__nav:active { transform: scale(.9); } .vpz-carousel__nav--prev { left: max(12px, calc(50% - 600px)); } .vpz-carousel__nav--next { right: max(12px, calc(50% - 600px)); } .vpz-grid-meta { display: none; } .vpz-card__title { font-size: 1.25rem; } .vpz-card__img { bottom: 30px; right: -2%; width: 66%; height: 72%; } .vpz-card__foot { left: 12px; right: 12px; bottom: 12px; height: 52px; padding: 4px 4px 4px 20px; } .vpz-card__price { font-size: 1rem; } .vpz-card__foot .button { width: 64px; } .vpz-card__foot .button svg { width: 22px; height: 22px; } .vpz-fav { top: 16px; right: 16px; width: 40px; height: 40px; } .woocommerce-result-count { display: block; margin: 0 0 14px; color: var(--ink-2); font-size: .9rem; } .vpz-js .woocommerce-ordering { display: block; max-width: 280px; } .vpz-benefits { grid-template-columns: repeat(3, 1fr); } .vpz-posts { grid-template-columns: repeat(2, 1fr); } .vpz-section__head { display: flex; } .vpz-hero { display: block; margin: 12px var(--pad) 0; border-radius: var(--r-xl); } .vpz-hero__row { display: grid; grid-template-columns: 1.200fr .8fr; grid-template-areas: "text art" "cta art"; align-items: center; gap: 0 20px; padding: 44px 36px; } .vpz-hero__text { grid-area: text; } .vpz-hero__art { grid-area: art; text-align: center; } .vpz-hero__cta { grid-area: cta; margin-top: 10px; } .vpz-hero__title { font-size: clamp(2.200rem, 5vw, 4rem); line-height: 1.15; } .vpz-hero__art img, .vpz-bottle { max-height: 340px; } } /* ---------- Desktop ---------- */ @media (min-width: 1000px) { :root { --pad: 28px; } body, body.vpz-no-tabbar { padding-bottom: 0; } .vpz-tabbar, .vpz-appbar { display: none; } .vpz-main.vpz-container { padding-top: 28px; padding-bottom: 64px; } .vpz-header, .home .vpz-header { display: block; position: sticky; top: 0; z-index: 40; padding: 0; background: rgba(255, 255, 255, .84); backdrop-filter: saturate(1.400) blur(16px); -webkit-backdrop-filter: saturate(1.400) blur(16px); } .vpz-header__row { grid-template-columns: auto 1fr auto; gap: 24px; padding-block: 14px; } .vpz-header__logo { display: block; } .vpz-hello { display: none; } .vpz-header__actions { grid-area: auto; } .vpz-nav { display: block; } .vpz-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; } .vpz-nav li { position: relative; } .vpz-nav a { display: block; padding: 9px 16px; border-radius: var(--pill); white-space: nowrap; font-size: .95rem; color: var(--ink-2); transition: background .25s, color .25s; } .vpz-nav .current-menu-item > a, .vpz-nav a:hover { color: var(--ink); background: var(--soft); } .vpz-nav ul ul { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; padding: 8px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); } .vpz-nav li:hover > ul, .vpz-nav li:focus-within > ul { display: block; } .vpz-circle { width: 48px; height: 48px; } .vpz-circle svg { width: 20px; height: 20px; } .vpz-circle--cart { display: inline-grid; background: var(--ink); color: #fff; border-color: var(--ink); } .vpz-circle--cart .vpz-count { background: var(--accent); } .vpz-circle--phone { width: auto; display: inline-flex; gap: 8px; padding: 0 18px; border-radius: var(--pill); } .vpz-circle--phone span { display: inline; font-weight: 600; font-size: .95rem; white-space: nowrap; } .vpz-hero { margin: 8px auto 0; max-width: 1184px; width: calc(100% - 56px); } .vpz-hero__row { grid-template-columns: 1.150fr .85fr; padding: 64px 64px 60px; } .vpz-hero__lead { font-size: 1.1rem; margin-bottom: 1.400em; } .vpz-hero__art img, .vpz-bottle { max-height: 440px; } .vpz-pill { height: 72px; --knob: 84px; font-size: 1.05rem; } .vpz-pill__dot { height: 60px; } .vpz-section { margin-top: 56px; } .vpz-chips { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; } .vpz-chip { height: 50px; padding: 0 22px; border-radius: 18px; cursor: pointer; } .vpz-chip:hover { background: var(--ink); color: #fff; } ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } ul.products li.product { height: 350px; padding: 24px 20px; } .vpz-carousel ul.products li.product { flex-basis: 360px; height: 420px; } .vpz-carousel { display: none; } .vpz-section--products { margin-top: 24px; } .vpz-carousel ul.products li.product:hover { box-shadow: none; } ul.products li.product:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -18px color-mix(in srgb, var(--tone-2) 80%, transparent); } ul.products li.product:hover .vpz-card__img img { transform: rotate(5deg) scale(1.060) translateY(-4px); } .vpz-card__title { font-size: 1.38rem; } .vpz-page-head { margin: 0 0 24px; } .woocommerce-products-header { display: block; } /* Single product: two columns */ div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 64px; align-items: start; } div.product .woocommerce-product-gallery { padding: 44px; border-radius: var(--r-xl); background: var(--sky); opacity: 1 !important; } .woocommerce-product-gallery__image img { max-height: 520px; } div.product .vpz-plate { position: absolute; z-index: 2; left: 28px; top: 28px; grid-column: 1; grid-row: 1; } div.product .onsale { top: 28px; left: auto; right: calc(50% + 60px); } .vpz-fav--single { top: 24px; right: calc(50% + 56px); background: #fff; } div.product:has(.vpz-fav--single) .onsale { right: calc(50% + 124px); top: 36px; } div.product .summary { padding-top: 20px; } .product_title { font-size: 2.600rem; } div.product .summary > .price { margin: 10px 0 16px; font-size: 2rem; font-weight: 600; letter-spacing: -.02em; } table.variations { width: 100%; margin-bottom: 8px; } table.variations th, table.variations td { display: block; padding: 0 0 10px; } .vpz-swatch { height: 52px; min-width: 52px; padding: 0 18px; cursor: pointer; } .woocommerce-variation-price { margin-bottom: 14px; font-size: 1.4rem; font-weight: 600; } form.cart:not(.variations_form), .woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: 14px; margin: 18px 0 22px; } form.cart .quantity { padding: 6px; } form.cart .quantity .qty { width: 60px; font-size: 1.3rem; } form.cart .vpz-qty__btn { width: 60px; height: 60px; } form.cart .single_add_to_cart_button { flex: 1; min-height: 72px; font-size: 1.05rem; cursor: pointer; } form.cart .single_add_to_cart_button::before { width: 84px; } .woocommerce-tabs, .related, .upsells { grid-column: 1 / -1; } .wc-tabs { margin-inline: 0; } /* Cart */ .woocommerce-cart .woocommerce:has(.woocommerce-cart-form) { display: grid; grid-template-columns: 1.500fr 1fr; gap: 0 32px; align-items: start; } .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-cart-form tr.cart_item { grid-template-columns: 88px 1fr auto auto 28px; grid-template-areas: "img name qty total remove"; gap: 22px; padding: 12px 16px 12px 12px; } .woocommerce-cart-form .product-thumbnail a { width: 88px; height: 88px; } .woocommerce-cart-form .product-name { padding-right: 0; } .woocommerce-cart-form .product-subtotal { align-self: center; margin: 0; } .woocommerce-cart-form .product-name, .woocommerce-cart-form .product-quantity { align-self: center; } .woocommerce-cart-form .product-remove { position: static; grid-area: remove; } .woocommerce-cart-form .vpz-qty__btn { width: 30px; height: 30px; } .cart-collaterals { position: sticky; top: 100px; margin-top: 0; } .cart-collaterals .cross-sells { display: none; } .wc-proceed-to-checkout { margin-top: 20px; } .wc-proceed-to-checkout .checkout-button { min-height: 72px; font-size: 1.05rem; } .wc-proceed-to-checkout .checkout-button::before { width: 84px; } /* Checkout */ form.checkout { display: grid; grid-template-columns: 1.250fr 1fr; gap: 0 48px; align-items: start; } form.checkout > .col2-set { grid-row: 1 / span 3; } form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; } form.checkout > #order_review_heading { grid-column: 2; margin: 0; padding: 28px 30px 0; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--soft); } #order_review { grid-column: 2; padding: 8px 30px 30px; border-radius: 0 0 var(--r-xl) var(--r-xl); background: var(--soft); } #order_review .wc_payment_method { background: #fff; } #order_review .wc_payment_method > label::before { background-color: var(--soft); } #order_review #place_order { background: #fff !important; min-height: 72px; font-size: 1.05rem; cursor: pointer; } #order_review #place_order::before { width: 84px; } .form-row-first, .form-row-last { display: inline-block; width: calc(50% - 6px); vertical-align: top; } .form-row-first { margin-right: 8px; } input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], select { min-height: 58px; } .woocommerce-account.logged-in .woocommerce { display: grid; grid-template-columns: 340px 1fr; gap: 0 48px; align-items: start; } .woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-account.logged-in .vpz-profile { grid-column: 1; grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 16px; margin: 0 0 20px; } .woocommerce-account.logged-in .vpz-profile img { width: 72px; height: 72px; } .woocommerce-MyAccount-navigation { grid-column: 1; } .woocommerce-MyAccount-navigation a { min-height: 64px; font-size: 1.05rem; } .woocommerce-MyAccount-navigation a::before { width: 48px; height: 48px; } .woocommerce-MyAccount-navigation li::before { left: 20px; top: 20px; } .woocommerce-MyAccount-navigation .is-active a::before { background: rgba(255, 255, 255, .14); } .woocommerce-MyAccount-navigation .is-active::before { background: #fff; } .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1 / span 3; } .woocommerce-orders-table tr { grid-template-columns: 1fr 1fr auto auto auto; } .woocommerce-orders-table__cell-order-actions { grid-column: auto; margin: 0; } .u-columns { grid-template-columns: 1fr 1fr; } .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } .woocommerce-order { max-width: 760px; } .vpz-toast { bottom: 32px; } .vpz-sheet--cart { left: auto; right: 16px; top: 16px; bottom: 16px; width: 440px; max-height: none; margin: 0; padding-bottom: 24px; border-radius: 36px; transform: translateX(calc(100% + 32px)); } .vpz-sheet--cart .vpz-drawer__body { flex: 1; } .vpz-posts { grid-template-columns: repeat(3, 1fr); } .vpz-footer, .vpz-no-tabbar .vpz-footer { display: block; margin-top: 64px; padding: 28px 0 24px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .vpz-reveal { opacity: 1 !important; transform: none !important; } @view-transition { navigation: none; } } /* ---------- Brand emblem ---------- */ .vpz-emblem { flex: none; display: block; border-radius: 50%; background: #fff; object-fit: contain; } .vpz-brand__emblem { width: 34px; height: 34px; border-radius: 50%; } .vpz-footer .vpz-brand__emblem { width: 30px; height: 30px; } .vpz-card__logo { display: none; } .vpz-carousel .vpz-card__logo { display: block; width: 58px; height: 58px; margin: 2px 0 0; box-shadow: 0 8px 18px -12px rgba(15, 21, 32, .45); } .vpz-splash-screen__logo { width: 76px; height: 76px; margin: -28px auto 16px; box-shadow: 0 14px 30px -18px rgba(15, 21, 32, .45); } /* ---------- My account: orders list ---------- */ .vpz-status, .woocommerce-orders-table__cell-order-status { --st-bg: #eef1f5; --st: var(--ink-2); } .vpz-status--processing, .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status { --st-bg: #e2f3ff; --st: #0b6ea8; } .vpz-status--completed, .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { --st-bg: #e1f7e8; --st: #18804a; } .vpz-status--on-hold, .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status { --st-bg: #fff2d4; --st: #8a5800; } .vpz-status--pending, .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status { --st-bg: #efeaff; --st: #5a3fc0; } .vpz-status--cancelled, .vpz-status--failed, .vpz-status--refunded, .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status, .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status, .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status { --st-bg: #ffe5ea; --st: #c0223e; } .vpz-status { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--pill); background: var(--st-bg); color: var(--st); font-size: .8rem; font-weight: 600; white-space: nowrap; } .vpz-status::before, .woocommerce-orders-table__cell-order-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .woocommerce-orders-table tbody { display: grid; gap: 12px; } .woocommerce-orders-table tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num status" "date total" "actions actions"; gap: 6px 12px; margin: 0; padding: 18px 18px 16px; border: 1px solid var(--line); background: #fff; box-shadow: 0 10px 24px -22px rgba(15, 21, 32, .4); } .woocommerce-orders-table__cell-order-number { grid-area: num; font-size: 1.12rem; font-weight: 600 !important; } .woocommerce-orders-table__cell-order-number::before { content: attr(data-title) " "; font-weight: 600; } .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a, .vpz-entry .woocommerce .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a { text-decoration: none !important; } .woocommerce-orders-table__cell-order-number a::after { content: ""; position: absolute; inset: 0; } .woocommerce-orders-table tr { position: relative; } .woocommerce-orders-table__cell-order-status { grid-area: status; display: inline-flex !important; align-items: center; gap: 6px; height: 30px; padding: 0 12px !important; background: var(--st-bg); color: var(--st); font-size: .78rem; font-weight: 600 !important; white-space: nowrap; } .woocommerce-orders-table__cell-order-date { grid-area: date; align-self: center; } .woocommerce-orders-table__cell-order-total { grid-area: total; align-self: center; color: var(--ink-2); font-size: .86rem; white-space: nowrap; } .woocommerce-orders-table__cell-order-total .amount { color: var(--ink); font-size: 1rem; font-weight: 600; } .woocommerce-orders-table__cell-order-actions { grid-area: actions; position: relative; z-index: 1; flex-wrap: wrap; margin-top: 10px; padding-top: 14px !important; border-top: 1px dashed var(--line); } .woocommerce-orders-table__cell-order-actions .button { flex: 1 1 0; justify-content: center; min-width: 0; min-height: 46px; padding: 8px 14px; font-size: .88rem; white-space: nowrap; } .woocommerce-orders-table__cell-order-actions .button.view { background: var(--soft); color: var(--ink); } .woocommerce-orders-table__cell-order-actions .button.cancel { flex: 0 1 auto; background: transparent; color: #c0223e; box-shadow: inset 0 0 0 1.5px #f3c4cd; } .woocommerce-orders-table__cell-order-actions .button.order-again::before { content: ""; width: 18px; height: 18px; margin-right: 6px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11a7.5 7.5 0 0 1 13.2-4.6L20 9'/%3E%3Cpath d='M20 4.5V9h-4.5'/%3E%3Cpath d='M19.5 13a7.5 7.5 0 0 1-13.2 4.6L4 15'/%3E%3Cpath d='M4 19.5V15h4.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11a7.5 7.5 0 0 1 13.2-4.6L20 9'/%3E%3Cpath d='M20 4.5V9h-4.5'/%3E%3Cpath d='M19.5 13a7.5 7.5 0 0 1-13.2 4.6L4 15'/%3E%3Cpath d='M4 19.5V15h4.5'/%3E%3C/svg%3E") center / contain no-repeat; } .woocommerce-MyAccount-content > .woocommerce-pagination { display: flex; gap: 8px; margin-top: 16px; } .woocommerce-MyAccount-content .woocommerce-info, .woocommerce-MyAccount-content .woocommerce-message { border-radius: var(--r-lg); } @media (max-width: 359px) { .woocommerce-orders-table tr { grid-template-areas: "num status" "date date" "total total" "actions actions"; padding: 16px 14px 14px; } .woocommerce-orders-table__cell-order-total { justify-self: start !important; } .woocommerce-orders-table__cell-order-actions .button { flex-basis: calc(50% - 4px); } } /* ---------- My account: one order ---------- */ .woocommerce-view-order .woocommerce-MyAccount-content > p:has(> mark.order-number) { display: none; } .vpz-ostatus { margin: 0 0 22px; padding: 18px; border-radius: var(--r-xl); background: var(--soft); } .vpz-ostatus__top { display: flex; align-items: center; gap: 12px; } .vpz-ostatus__logo { width: 52px; height: 52px; box-shadow: 0 6px 16px -10px rgba(15, 21, 32, .4); } .vpz-ostatus__id { flex: 1; min-width: 0; display: grid; line-height: 1.25; } .vpz-ostatus__id strong { font-size: 1.22rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vpz-ostatus__id > span { color: var(--ink-2); font-size: .84rem; } .vpz-ostatus__id .vpz-status { justify-self: start; margin-top: 6px; height: 26px; font-size: .76rem; } .vpz-ostatus__steps { --step: 1; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 22px 0 6px; padding: 0; list-style: none; counter-reset: none; } .vpz-ostatus__steps::before, .vpz-ostatus__steps::after { content: ""; position: absolute; top: 11px; left: 16.66%; height: 3px; border-radius: 3px; background: #dfe5ec; width: 66.66%; } .vpz-ostatus__steps::after { background: var(--ink); width: calc((var(--step) - 1) * 33.33%); transition: width .6s var(--ease); } .vpz-ostatus__steps li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; color: var(--ink-2); font-size: .8rem; font-weight: 500; text-align: center; } .vpz-ostatus__steps i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px #dfe5ec; } .vpz-ostatus__steps .is-passed { color: var(--ink); } .vpz-ostatus__steps .is-passed i { background: var(--ink); box-shadow: none; } .vpz-ostatus__steps .is-passed i::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); } .vpz-ostatus__steps .is-current i { box-shadow: 0 0 0 5px rgba(15, 21, 32, .1); } .vpz-ostatus__note { margin: 16px 0 0; padding: 12px 14px; border-radius: 18px; background: #ffe5ea; color: #8f1a30; font-size: .88rem; } .vpz-ostatus__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed #d9dfe6; color: var(--ink-2); font-size: .92rem; } .vpz-ostatus__sum strong { color: var(--ink); font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em; } .vpz-ostatus__actions { display: flex; gap: 8px; margin-top: 16px; } .vpz-ostatus__btn { flex: 1; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 56px; font-size: 1rem; } .vpz-ostatus__btn.is-ghost { background: #fff; color: var(--ink); } .woocommerce-view-order .vpz-delivery-card { margin: 0 0 22px; } .woocommerce-order-details, .woocommerce-customer-details { margin: 0 0 22px; } .woocommerce-order-details__title, .woocommerce-customer-details .woocommerce-column__title, .woocommerce-view-order .woocommerce-MyAccount-content > h2 { margin: 0 0 12px 4px !important; font-size: 1.2rem !important; font-weight: 600; letter-spacing: -.01em; } /* Order details: items card + totals card. */ table.woocommerce-table--order-details { display: block; width: 100%; padding: 6px 16px; border: 0; border-radius: var(--r-lg); background: var(--soft); } table.woocommerce-table--order-details thead { display: none; } table.woocommerce-table--order-details tbody, table.woocommerce-table--order-details tfoot { display: block; } table.woocommerce-table--order-details tr { display: flex; align-items: center; gap: 12px; margin: 0; border-bottom: 1px solid #e4e9ef; } table.woocommerce-table--order-details th, table.woocommerce-table--order-details td { display: block; padding: 0; border: 0 !important; background: none; text-align: left; font-weight: 500; } table.woocommerce-table--order-details tr.order_item { min-height: 80px; padding: 12px 0; } table.woocommerce-table--order-details tr.order_item:has(+ tr.product-purchase-note) { border-bottom: 0; padding-bottom: 6px; } table.woocommerce-table--order-details td.product-name { flex: 1; min-width: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 4px; } .vpz-oitem__img { grid-row: 1 / span 3; align-self: center; display: block; width: 56px; height: 56px; padding: 4px; border-radius: 16px; background: #fff; } .vpz-oitem__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .vpz-oitem__name { grid-column: 2; align-self: end; min-width: 0; font-size: .98rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; } .vpz-oitem__name a, .vpz-entry .woocommerce .vpz-oitem__name a, .vpz-entry .woocommerce .woocommerce-MyAccount-content .vpz-oitem__name a { color: inherit; text-decoration: none !important; } table.woocommerce-table--order-details td.product-name .product-quantity { grid-column: 2; justify-self: start; align-self: start; padding: 1px 9px; border-radius: 8px; background: #fff; color: var(--ink-2); font-size: .8rem; font-weight: 600; } table.woocommerce-table--order-details td.product-name .wc-item-meta { grid-column: 2; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: .8rem; } table.woocommerce-table--order-details td.product-name .wc-item-meta li, table.woocommerce-table--order-details td.product-name .wc-item-meta p { display: inline; margin: 0; } table.woocommerce-table--order-details td.product-total { flex: none; margin-left: auto; font-size: 1rem; font-weight: 600; white-space: nowrap; text-align: right; } table.woocommerce-table--order-details tr.product-purchase-note { padding: 0 0 14px 68px; } table.woocommerce-table--order-details tr.product-purchase-note td { width: 100%; color: var(--ink-2); font-size: .84rem; font-weight: 400; line-height: 1.45; text-align: left !important; } table.woocommerce-table--order-details tr.product-purchase-note td p { margin: 0; } table.woocommerce-table--order-details tfoot { margin: 6px -16px -6px; padding: 6px 16px; border-radius: 0 0 var(--r-lg) var(--r-lg); background: rgba(255, 255, 255, .55); } table.woocommerce-table--order-details tfoot tr { justify-content: space-between; align-items: baseline; min-height: 48px; padding: 12px 0; } table.woocommerce-table--order-details tfoot tr:last-child { border-bottom: 0; } table.woocommerce-table--order-details tfoot th { flex: none; color: var(--ink-2); font-size: .92rem; font-weight: 400; } table.woocommerce-table--order-details tfoot td { flex: 1; min-width: 0; text-align: right !important; font-size: .95rem; font-weight: 500; overflow-wrap: anywhere; } table.woocommerce-table--order-details tfoot td small { display: block; color: var(--ink-2); font-size: .78rem; font-weight: 400; } table.woocommerce-table--order-details tfoot tr:has(.order-actions-button) { justify-content: stretch; } table.woocommerce-table--order-details tfoot tr:has(.order-actions-button) th { display: none; } table.woocommerce-table--order-details tfoot tr:has(.order-actions-button) td { display: flex; gap: 8px; } table.woocommerce-table--order-details .order-actions-button { flex: 1; min-height: 50px; padding: 8px 18px; font-size: .92rem; } table.woocommerce-table--order-details .order-actions-button.cancel { flex: 0 1 auto; background: transparent; color: #c0223e; box-shadow: inset 0 0 0 1.5px #f3c4cd; } .woocommerce-customer-details address { padding: 18px 20px; border: 0; border-radius: var(--r-lg); background: var(--soft); font-style: normal; line-height: 1.55; } .woocommerce-customer-details address p { margin: 8px 0 0; padding-left: 28px; background: no-repeat 0 50% / 18px; } .woocommerce-customer-details address .woocommerce-customer-details--phone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616b7a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4h3l1.5 4-2 1.5a11 11 0 0 0 5.5 5.5l1.5-2 4 1.5v3a1.5 1.5 0 0 1-1.6 1.5C10.7 18.6 5.4 13.3 5 5.6A1.5 1.5 0 0 1 6.5 4z'/%3E%3C/svg%3E"); } .woocommerce-customer-details address .woocommerce-customer-details--email { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616b7a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='3'/%3E%3Cpath d='m4.5 7 7.5 6 7.5-6'/%3E%3C/svg%3E"); } .woocommerce-OrderUpdates { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; } .woocommerce-OrderUpdate { padding: 14px 16px; border-radius: 20px; background: var(--soft); } .woocommerce-OrderUpdate-meta { margin: 0 0 4px; color: var(--ink-2); font-size: .8rem; } .woocommerce-OrderUpdate-description p { margin: 0; } /* ---------- Promos (blog) ---------- */ .vpz-promos__lead { margin: -4px 0 16px; color: var(--ink-2); } .vpz-promos { display: grid; gap: 16px; } .vpz-promo { min-width: 0; } .vpz-promo__link { display: block; height: 100%; border-radius: var(--r-xl); background: var(--soft); overflow: hidden; transition: transform .3s var(--spring); } .vpz-promo__link:active { transform: scale(.98); } .vpz-promo__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #cfe9ff, #eaf7ff); } .vpz-promo__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .vpz-promo__link:hover .vpz-promo__media img { transform: scale(1.04); } .vpz-promo__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent); } .vpz-promo__date { position: absolute; left: 12px; top: 12px; height: 30px; padding: 0 12px; border-radius: var(--pill); background: rgba(255, 255, 255, .92); font-size: .78rem; font-weight: 600; line-height: 30px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .vpz-promo__body { display: grid; gap: 6px; padding: 16px 18px 18px; } .vpz-promo__title { font-size: 1.2rem; font-weight: 600; line-height: 1.22; letter-spacing: -.01em; } .vpz-promo__text { color: var(--ink-2); font-size: .92rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vpz-promo__more { display: inline-flex; align-items: center; gap: 10px; justify-self: start; margin-top: 6px; font-size: .9rem; font-weight: 600; } .vpz-promo__more i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; } .vpz-promos--row { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .vpz-promos--row::-webkit-scrollbar { display: none; } .vpz-promos--row .vpz-promo { scroll-snap-align: start; } .vpz-promos--row .vpz-promo__text { display: none; } .vpz-promo-single__hero { position: relative; margin: 0 0 18px; aspect-ratio: 16 / 10; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(135deg, #cfe9ff, #eaf7ff); } .vpz-promo-single__hero img { width: 100%; height: 100%; object-fit: cover; } .vpz-promo-single__head { margin: 0 0 14px; } .vpz-promo-single__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--ink-2); font-size: .86rem; } .vpz-promo-single__logo { width: 28px; height: 28px; } .vpz-promo-single__head h1 { margin: 0; font-size: clamp(1.6rem, 7vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em; } .vpz-promo-single__content { font-size: 1.02rem; line-height: 1.6; } .vpz-promo-single__content ul, .vpz-promo-single__content ol { padding-left: 1.2em; } .vpz-promo-single__content h2 { margin: 1.2em 0 .4em; font-size: 1.25rem; } .vpz-promo-single__cta { margin: 26px 0 0; } .vpz-promo-more { margin-top: 34px; } .vpz-promo-more__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .vpz-promo-more__head h2 { margin: 0; font-size: 1.25rem; } .vpz-promo-more__head a { color: var(--ink-2); font-size: .9rem; } @media (min-width: 640px) { .vpz-promos:not(.vpz-promos--row) { grid-template-columns: repeat(2, 1fr); } .vpz-promos--row { grid-auto-columns: 46%; } } @media (min-width: 1000px) { .vpz-promos:not(.vpz-promos--row) { grid-template-columns: repeat(3, 1fr); gap: 22px; } .vpz-promos:not(.vpz-promos--row) .vpz-promo:first-child { grid-column: span 2; } .vpz-promos:not(.vpz-promos--row) .vpz-promo:first-child .vpz-promo__media { aspect-ratio: 16 / 8.6; } .vpz-promos--row { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; overflow: visible; } .vpz-promo-single__hero { aspect-ratio: 16 / 8; } .vpz-ostatus { padding: 24px 26px; } .vpz-ostatus__actions { max-width: 420px; } .woocommerce-orders-table tr { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "num date status" "total total actions"; align-items: center; } .woocommerce-orders-table__cell-order-total { justify-self: start !important; } .woocommerce-orders-table__cell-order-actions { grid-area: actions; margin: 0; padding: 0 !important; border: 0; flex-wrap: nowrap; } .woocommerce-orders-table__cell-order-actions .button { flex: none; } } /* ---------- Product screen: pastel background (phones) ---------- */ @media (max-width: 999px) { body.single-product { background: color-mix(in srgb, var(--ptone, #dbeeff) 15%, #fff); } .single-product .vpz-appbar { background: color-mix(in srgb, color-mix(in srgb, var(--ptone, #dbeeff) 15%, #fff) 86%, transparent); } .single-product .vpz-fav--single { background: #fff; } .single-product div.product form.cart .quantity::before, .single-product div.product form.cart .quantity::after { background: rgb(240 240 240); } .single-product div.product .vpz-qty__btn { background: #fff; } } /* ---------- Benefits: swipeable row on phones ---------- */ @media (max-width: 639px) { .vpz-benefits { display: flex; gap: 12px; margin-inline: calc(var(--pad) * -1); padding: 2px var(--pad) 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; } .vpz-benefits::-webkit-scrollbar { display: none; } .vpz-benefits.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } .vpz-benefit { flex: 0 0 80%; scroll-snap-align: start; } .vpz-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; } .vpz-dots i { width: 6px; height: 6px; border-radius: 3px; background: #d5dbe2; transition: width .35s var(--ease), background .35s; } .vpz-dots i.is-active { width: 20px; background: var(--ink); } } @media (min-width: 640px) { .vpz-dots { display: none; } } /* ---------- Home: last orders (cards as in the account, with re-order) ---------- */ .vpz-recent__head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 4px 12px; } .vpz-recent__head h2 { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; } .vpz-recent__head a { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: .9rem; font-weight: 500; } .vpz-recent__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .vpz-ocard { display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: 0 14px 30px -26px rgba(15, 21, 32, .45); } .vpz-ocard__main { display: grid; gap: 14px; } .vpz-ocard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .vpz-ocard__id { display: grid; min-width: 0; line-height: 1.25; } .vpz-ocard__id strong { font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; } .vpz-ocard__id small { color: var(--ink-2); font-size: .82rem; } .vpz-ocard .vpz-status { flex: none; height: 28px; font-size: .76rem; } .vpz-ocard__items { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 20px; background: var(--soft); } .vpz-ocard__thumbs { flex: none; display: flex; } .vpz-ocard__thumbs span { display: block; width: 46px; height: 46px; padding: 3px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 2px var(--soft); } .vpz-ocard__thumbs span + span { margin-left: -14px; } .vpz-ocard__thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .vpz-ocard__names { min-width: 0; color: var(--ink-2); font-size: .84rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vpz-ocard__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px; color: var(--ink-2); font-size: .88rem; } .vpz-ocard__sum b { color: var(--ink); font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; } .vpz-ocard__actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); } .vpz-ocard__btn { flex: 1; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 14px; font-size: .92rem; } .vpz-ocard__btn.is-soft { background: var(--soft); color: var(--ink); } .vpz-recent__all { display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: 12px; background: var(--soft); color: var(--ink); } @media (min-width: 1000px) { .vpz-recent__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .vpz-ocard { padding: 20px; transition: transform .35s var(--ease), box-shadow .35s; } .vpz-ocard:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(15, 21, 32, .45); } .vpz-ocard__main { flex: 1; align-content: start; } .vpz-recent__all { display: none !important; } } /* Checkout: no subtotal row in the order summary; no empty "additional fields" card. */ .woocommerce-checkout-review-order-table .cart-subtotal { display: none; } form.checkout .woocommerce-additional-fields:not(:has(.form-row, input, textarea, select)) { display: none; } /* Avatar fallback: the emblem. */ img.avatar.is-logo { object-fit: contain !important; background: #fff !important; } /* ---------- Errors and warnings: modal window ---------- */ .vpz-js .vpz-noticed { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden; clip-path: inset(50%); } .vpz-modal { position: fixed; inset: 0; z-index: 130; display: grid; align-items: end; justify-items: center; padding: 12px; } .vpz-modal__scrim { position: absolute; inset: 0; background: rgba(15, 21, 32, .42); opacity: 0; transition: opacity .3s; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .vpz-modal__card { position: relative; width: 100%; max-width: 440px; max-height: calc(100dvh - 24px); overflow: auto; padding: 30px 22px calc(20px + env(safe-area-inset-bottom)); border-radius: 32px; background: #fff; text-align: center; box-shadow: 0 30px 60px -30px rgba(15, 21, 32, .5); transform: translateY(40px) scale(.96); opacity: 0; transition: transform .45s var(--spring), opacity .3s; } .vpz-modal__card:focus { outline: none; } .vpz-modal.is-open .vpz-modal__scrim { opacity: 1; } .vpz-modal.is-open .vpz-modal__card { transform: none; opacity: 1; } .vpz-modal__x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); cursor: pointer; } .vpz-modal__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: #e2f3ff; color: #0b6ea8; } .vpz-modal--error .vpz-modal__icon { background: #ffe5ea; color: #c0223e; animation: vpz-shake .5s .25s both; } .vpz-modal__title { margin: 0 0 14px; font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; } .vpz-modal__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; text-align: left; } .vpz-modal__list li { position: relative; padding: 12px 14px 12px 34px; border-radius: 18px; background: var(--soft); font-size: .94rem; line-height: 1.4; } .vpz-modal__list li::before { content: ""; position: absolute; left: 15px; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: #0b6ea8; } .vpz-modal--error .vpz-modal__list li::before { background: #c0223e; } .vpz-modal__list a:not(.button) { color: inherit; text-decoration: none; } .vpz-modal__list a[href^="#"] { display: block; } .vpz-modal__list strong { font-weight: 600; } .vpz-modal__list .button { float: right; min-height: 34px; margin: -4px 0 0 10px; padding: 6px 14px; font-size: .82rem; } .vpz-modal__btn { display: block; width: 100%; min-height: 56px; margin-top: 20px; padding: 0 24px; border: 0; border-radius: var(--pill); background: var(--ink); color: #fff; font: inherit; font-size: 1.02rem; font-weight: 600; cursor: pointer; transition: transform .2s; } .vpz-modal__btn:active { transform: scale(.97); } .vpz-modal-open, .vpz-modal-open body { overflow: hidden; } @keyframes vpz-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } } @media (min-width: 640px) { .vpz-modal { align-items: center; padding: 24px; } .vpz-modal__card { padding: 34px 30px 28px; } } /* ---------- Bold headings (Tilda Sans Bold 700): products, forms, blocks ---------- */ h1, h2, h3, h4, .vpz-hero__title, .vpz-splash-screen__title, .vpz-card__title, .vpz-carousel .vpz-card__title, .product_title, .woocommerce-loop-product__title, .woocommerce-cart-form .product-name, .vpz-oitem__name, .vpz-mini__info > a, form.checkout h3, form.checkout #order_review_heading, .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3, .woocommerce-order h2, .woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-Address-title h2, .woocommerce-Address-title h3, .u-columns h2, .woocommerce-form-login h2, legend, .vpz-sheet__head h2, .vpz-section__head h2, .vpz-recent__head h2, .vpz-ocard__id strong, .vpz-ostatus__id strong, .vpz-promo__title, .vpz-promo-single__head h1, .vpz-promo-more__head h2, .vpz-delivery-card h2, .vpz-benefit h3, .related > h2, .upsells > h2, .cross-sells > h2, .vpz-modal__title, .vpz-notice__title, .vpz-profile strong { font-weight: 700; letter-spacing: -.025em; } legend { font-size: 1.15rem; } /* ---------- Narrow phones (≤ 420 px): big slide buttons and payment methods ---------- */ .button.single_add_to_cart_button, .button.checkout-button, #place_order { display: block; text-align: center; } @media (max-width: 420px) { .button.single_add_to_cart_button, .button.checkout-button, #place_order, #order_review #place_order { min-height: 72px; padding: 6px 46px 6px 84px !important; font-size: clamp(.95rem, 4.4vw, 1.12rem); line-height: 60px; } .single_add_to_cart_button::before, .checkout-button::before, #place_order::before, #order_review #place_order::before { width: 72px; } .single_add_to_cart_button:hover::before, .checkout-button:hover::before, #place_order:hover::before { width: 80px; } .single_add_to_cart_button::after, .checkout-button::after, #place_order::after { right: 16px; width: 22px; height: 20px; } .wc_payment_method > label { gap: 12px; min-height: 68px; padding: 8px 54px 8px 8px; font-size: 1.02rem; line-height: 1.25; } .wc_payment_method > label::before { width: 52px; height: 52px; background-size: 24px; } .wc_payment_method > input[type="radio"] { right: 18px; top: 21px; } .payment_box { padding: 0 18px 16px 72px; } } /* Gateway logo: a small badge on the icon circle instead of squeezing the title. */ .wc_payment_method > label img { position: absolute; left: 46px; top: 46px; width: 26px !important; height: 26px !important; max-height: none; margin: 0; padding: 2px; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 2px 6px rgba(15, 21, 32, .18); } .wc_payment_method > label img + img { display: none; } @media (max-width: 420px) { .wc_payment_method > label img { left: 40px; top: 40px; width: 24px !important; height: 24px !important; } } /* Narrow phones: product cards in the catalogue grid — the title flows around the heart instead of breaking words. */ @media (max-width: 420px) { ul.products li.product:not(.vpz-carousel li) .vpz-card__head { display: block; max-width: none; } ul.products li.product:not(.vpz-carousel li) .vpz-card__head::before { content: ""; float: right; width: 34px; height: 30px; } ul.products li.product:not(.vpz-carousel li) .vpz-card__title { display: inline; font-size: 1rem; overflow: visible; overflow-wrap: break-word; word-break: normal; hyphens: manual; -webkit-hyphens: manual; } ul.products li.product:not(.vpz-carousel li) .vpz-card__rating, ul.products li.product:not(.vpz-carousel li) .vpz-card__sale { display: flex; width: fit-content; margin-top: 7px; } ul.products li.product:not(.vpz-carousel li) .vpz-fav { top: 10px; right: 10px; width: 32px; height: 32px; } ul.products li.product:not(.vpz-carousel li) .vpz-fav svg { width: 18px; height: 18px; } /* Product tabs fit the width; attribute values wrap evenly. */ .wc-tabs { width: auto; } .wc-tabs li { flex: 1 1 auto; } .wc-tabs li a { height: 42px; padding: 0 12px; font-size: .86rem; } table.woocommerce-product-attributes tr { padding: 12px 14px; } table.woocommerce-product-attributes td { text-wrap: balance; } /* Cart coupon row. */ .woocommerce-cart-form .coupon .button { flex: none; padding-inline: 18px; font-size: .92rem; } } /* Phone numbers never break. */ .vpz-contacts__text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(1rem, 4.9vw, 1.19rem); font-variant-numeric: tabular-nums; } @media (max-width: 420px) { .vpz-contacts a { gap: 12px; min-height: 68px; padding: 6px 14px 6px 6px; } .vpz-contacts__icon { width: 52px; height: 52px; } .vpz-contacts__go { width: 36px; height: 36px; } } /* Very narrow phones (≤ 359 px). */ @media (max-width: 359px) { .button.single_add_to_cart_button, .button.checkout-button, #place_order, #order_review #place_order { min-height: 64px; padding: 5px 34px 5px 70px !important; font-size: .92rem; line-height: 54px; } .single_add_to_cart_button::before, .checkout-button::before, #place_order::before, #order_review #place_order::before { left: 5px; top: 5px; bottom: 5px; width: 60px; background-size: 22px; } .single_add_to_cart_button::after, .checkout-button::after, #place_order::after { right: 10px; width: 18px; height: 16px; } form.checkout .woocommerce-billing-fields, form.checkout .vpz-delivery, form.checkout .woocommerce-additional-fields, form.checkout #order_review { padding-inline: 14px; } .vpz-card__foot { padding-left: 10px; gap: 4px; } .vpz-card__foot .button { width: 38px; } .vpz-card__price { font-size: .8rem; letter-spacing: -.02em; } .vpz-card__price del { display: none; } .woocommerce-cart-form .coupon { flex-wrap: wrap; } .woocommerce-cart-form .coupon input, .woocommerce-cart-form .coupon .button { flex: 1 1 100%; } .vpz-grid-meta__btn { padding-left: 14px; font-size: .88rem; } }