/* Theme Name: Wovallo Theme URI: https://wovallo.art Description: Standalone block theme for the Wovallo eCommerce store. Full Site Editing, block patterns, and WooCommerce ready. Author: Wovallo Author URI: https://wovallo.art Version: 1.3.0 Requires at least: 6.7 Tested up to: 6.9 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: wovallo Tags: one-column, custom-colors, custom-menu, custom-logo, full-site-editing, block-patterns, e-commerce, woocommerce */ /* ========================================================= Block theme baseline (inherited from Twenty Twenty-Five before this theme became standalone — kept verbatim so the front end is unchanged) ========================================================= */ /* * Link styles * https://github.com/WordPress/gutenberg/issues/42319 */ a { text-decoration-thickness: 1px !important; text-underline-offset: .1em; } /* Focus styles */ :where(.wp-site-blocks *:focus) { outline-width: 2px; outline-style: solid; } /* Increase the bottom margin on submenus, so that the outline is visible. */ .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) { margin-bottom: 3px; } /* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */ .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content { outline-offset: 4px; } /* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */ .wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content { outline-offset: 0; } /* * Progressive enhancement to reduce widows and orphans * https://github.com/WordPress/gutenberg/issues/55190 */ h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p { text-wrap: pretty; } /* * Change the position of the more block on the front, by making it a block level element. * https://github.com/WordPress/gutenberg/issues/65934 */ .more-link { display: block; } /* * Prevents unnecessary scrollbars while handling long lines of preformatted text. * https://core.trac.wordpress.org/ticket/63875 */ :where(pre) { overflow-x: auto; } /* ========================================================= Global ========================================================= */ html { /* No `scroll-behavior: smooth` here: on the root scroll container it makes the browser animate every wheel/trackpad/keyboard scroll (~400ms per gesture), which feels heavy and "stuck". Anchor/button smooth scrolling is done in JS with an explicit `behavior: "smooth"` where it's actually wanted. */ /* is the page's scroll container, so clipping horizontal overflow here covers the whole page. Do NOT also set overflow-x on : `overflow-x: hidden` silently forces `overflow-y: auto`, which turned the body into a second, nested scrollport inside . The height mismatch between the two scrollports left phantom blank space below the footer. */ overflow-x: hidden; } body { background-color: #faf9f6; color: #3a4750; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Sticky footer: on short pages (e.g. legal pages) the document was shorter than the viewport, so the body background showed as a blank strip below the footer. Make the block wrapper fill at least the viewport and push the footer to the bottom. Has no effect on pages already taller than the viewport. */ .wp-site-blocks { display: flex; flex-direction: column; min-height: calc(100dvh - var(--wovallo-admin-bar-height, 0px)); } .wp-site-blocks > footer { margin-top: auto; } ::selection { background-color: #ff9d7e; color: #ffffff; } /* ========================================================= Shared utilities ========================================================= */ .content-layer { position: relative; z-index: 10; } /* Hide scrollbar while keeping scroll functionality */ .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } /* Categories page: remove default focus outlines (match blog / single-post treatment) */ body.wovallo-categories-page a:focus, body.wovallo-categories-page a:focus-visible, body.wovallo-categories-page button:focus, body.wovallo-categories-page button:focus-visible { outline: none !important; box-shadow: none !important; } /* Hide "View cart" text from product cards */ .wovallo-categories-main a:has(img[alt*="View cart"]), .wovallo-categories-main a[title*="View cart"], .wovallo-categories-main > div > div > div > div > a:last-of-type, .fade-in:has(.wovallo-price) a:last-child { display: none !important; } /* More aggressive: hide any remaining "view-cart" or similar elements */ [class*="view-cart"], [class*="view_cart"], [href*="view-cart"], .woocommerce-product-details a[href*="cart"] { display: none !important; } /* ========================================================= Header: make the sticky bar actually stick #navbar carries `sticky top-0`, but the header template part wraps it in a group that is exactly as tall as the bar itself — a sticky box can never travel outside its containing block, so the header scrolled away with the page. Sticking the template part instead gives it the whole document to travel; it is a direct child of .wp-site-blocks, which has no overflow or transform in the way. ========================================================= */ /* Sticking it also makes it a stacking context, so the z-index has to be the one #navbar used to rely on (1000) rather than the nav's own 50 — otherwise the categories filter nav (z-900) would paint over the bar. Toasts and modal overlays sit at 99995+ and still win. */ header.wp-block-template-part:has(#navbar) { position: sticky; top: var(--wovallo-admin-bar-height, 0px); z-index: 1000; } /* Categories page (mobile): let the global header scroll away and keep filters pinned. */ @media (max-width: 767px) { /* Undo the stick as well, or the nav below would still be pinned by its ancestor no matter what position it is given. */ body.wovallo-categories-page header.wp-block-template-part:has(#navbar), body.page-template-page-categories header.wp-block-template-part:has(#navbar), body.page-template-page-categories-html header.wp-block-template-part:has(#navbar) { position: static; } /* Use position:relative (not static) so the header still scrolls away in flow but keeps a stacking context above the z-900 filter nav. The header has a backdrop-filter (backdrop-blur), which creates a stacking context; with position:static that context sinks into the z-auto layer and the sticky filter nav (z-900) — plus the page content — paints over the open mobile menu, making its links unclickable. */ body.wovallo-categories-page #navbar, body.page-template-page-categories #navbar, body.page-template-page-categories-html #navbar { position: relative !important; top: auto !important; z-index: 1000 !important; } body.wovallo-categories-page .wovallo-categories-nav, body.page-template-page-categories .wovallo-categories-nav, body.page-template-page-categories-html .wovallo-categories-nav { position: sticky !important; top: var(--wovallo-admin-bar-height, 0px) !important; z-index: 900; } body.wovallo-categories-page .wovallo-mobile-cat-menu, body.page-template-page-categories .wovallo-mobile-cat-menu, body.page-template-page-categories-html .wovallo-mobile-cat-menu { max-height: 0; } body.wovallo-categories-page .wovallo-mobile-cat-menu.is-open, body.page-template-page-categories .wovallo-mobile-cat-menu.is-open, body.page-template-page-categories-html .wovallo-mobile-cat-menu.is-open { max-height: 18rem; } } /* Prevent ancestor overflow/transform from breaking sticky on the categories page */ body.wovallo-categories-page .wp-site-blocks, body.wovallo-categories-page .wp-site-blocks > *, body.wovallo-categories-page .wp-block-template-part, body.wovallo-categories-page .wp-block-group, body.wovallo-categories-page .wovallo-categories-main, body.page-template-page-categories .wp-site-blocks, body.page-template-page-categories .wp-site-blocks > *, body.page-template-page-categories .wp-block-template-part, body.page-template-page-categories .wp-block-group, body.page-template-page-categories .wovallo-categories-main, body.page-template-page-categories-html .wp-site-blocks, body.page-template-page-categories-html .wp-site-blocks > *, body.page-template-page-categories-html .wp-block-template-part, body.page-template-page-categories-html .wp-block-group, body.page-template-page-categories-html .wovallo-categories-main { overflow: visible !important; transform: none !important; contain: none !important; } /* Force sticky positioning on the category nav */ body.wovallo-categories-page .wovallo-categories-nav, body.page-template-page-categories .wovallo-categories-nav, body.page-template-page-categories-html .wovallo-categories-nav { position: sticky !important; } /* The filter bar pins to the very top, which only cleared the header back when the header scrolled away. From 768px up the header stays pinned, so park the bar underneath it — tracking the bar's measured height rather than assuming the collapsed 65px, so a page restored mid-scroll with the bar still expanded does not overlap it. Below 768px the header still scrolls away here, so top:0 stays correct. */ @media (min-width: 768px) { body.wovallo-categories-page .wovallo-categories-nav, body.page-template-page-categories .wovallo-categories-nav, body.page-template-page-categories-html .wovallo-categories-nav { top: calc( var(--wovallo-admin-bar-height, 0px) + var(--wovallo-header-height, 65px) ); } } /* Remove white stripe between header and hero on categories page */ body.wovallo-categories-page .wp-site-blocks, body.page-template-page-categories .wp-site-blocks, body.page-template-page-categories-html .wp-site-blocks { --wp--style--block-gap: 0 !important; gap: 0 !important; } body.wovallo-categories-page .wp-block-html, body.page-template-page-categories .wp-block-html, body.page-template-page-categories-html .wp-block-html { margin-top: 0 !important; } /* Header template part: match hero background so no white stripe shows */ body.wovallo-categories-page .wp-site-blocks > header:first-child, body.wovallo-categories-page .wp-site-blocks > header:first-child .wp-block-group, body.page-template-page-categories .wp-site-blocks > header:first-child, body.page-template-page-categories .wp-site-blocks > header:first-child .wp-block-group, body.page-template-page-categories-html .wp-site-blocks > header:first-child, body.page-template-page-categories-html .wp-site-blocks > header:first-child .wp-block-group { margin-bottom: 0 !important; background-color: #faf9f6 !important; } /* Pull main content up to eliminate any remaining gap */ body.wovallo-categories-page .wovallo-categories-main { margin-top: 0 !important; } /* ========================================================= Homepage: Hero load animations ========================================================= */ @keyframes slideDownHero { 0% { opacity: 0; transform: translateY(-15px); } 100% { opacity: 1; transform: translateY(0); } } .hero-elem { opacity: 0; animation: slideDownHero 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.3s; } .delay-3 { animation-delay: 0.5s; } .delay-4 { animation-delay: 0.7s; } .delay-5 { animation-delay: 1s; } @media (prefers-reduced-motion: reduce) { .wovallo-hero .hero-elem { opacity: 1; animation: none; } } /* ========================================================= Homepage: Mobile hero (Cover Masthead) Below 768px the hero stops being a centred desktop layout squeezed narrow and becomes a full-bleed cover: the photo is left uncropped and unwashed, copy only occupies the empty wall at the top and the desk at the bottom, each carried by a one-way ink gradient that dies out well before the subject's face. Desktop keeps the Tailwind layout untouched. The element qualifier on `section.wovallo-hero` is load-bearing: Tailwind is enqueued after style.css, so a bare class would lose the tie against min-h-[88vh] / items-center. ========================================================= */ @media (min-width: 768px) { .wovallo-hero-masthead, .wovallo-hero-action { display: contents; } } .wovallo-hero-h1-break, .wovallo-hero-btn-arrow { display: none; } @media (max-width: 767px) { section.wovallo-hero { /* The admin bar shifts the whole document down, so a plain 100svh would push the CTA row below the fold for logged-in editors. */ min-height: calc(100svh - var(--wovallo-admin-bar-height, 0px)); align-items: stretch; } /* Masthead at the top, action block at the bottom; the photo breathes between them. 86px = the 80px header plus 6px. No admin-bar term here: core already pushes the whole document down with html{margin-top}, and the hero's -mt-20 aligns its top edge with the header's, so adding the offset again would double-count it for logged-in editors. */ section.wovallo-hero .wovallo-hero-inner { display: flex; flex-direction: column; justify-content: space-between; max-width: none; padding: 86px 22px 24px; } /* contents so the two groups become direct flex children of the inner. */ section.wovallo-hero .wovallo-hero-copy { display: contents; max-width: none; margin: 0; text-align: left; } section.wovallo-hero .wovallo-hero-scrim { inset: 0 0 auto 0; height: 35%; background: linear-gradient( to bottom, rgba(46, 56, 63, 0.62) 0%, rgba(46, 56, 63, 0.55) 42%, rgba(46, 56, 63, 0.3) 72%, rgba(46, 56, 63, 0) 100% ); } section.wovallo-hero .wovallo-hero-glow { inset: auto 0 0 0; height: 30%; background: linear-gradient( to top, rgba(46, 56, 63, 0.66) 0%, rgba(46, 56, 63, 0.32) 44%, rgba(46, 56, 63, 0) 100% ); } section.wovallo-hero .wovallo-hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; color: #faf9f6; text-shadow: none; } section.wovallo-hero .wovallo-hero-eyebrow::before { content: ""; width: 26px; height: 1px; background: #ff9d7e; } section.wovallo-hero h1 { margin-bottom: 0; font-size: 37px; font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; } section.wovallo-hero h1 span { color: #a2c0ce; text-shadow: none; } /* Mobile trims the copy to fit the cover photo, but these three fragments carry the brand name in the page's only H1 and the ghost CTA's label. display:none would drop them from the mobile-first index and from the link's accessible name, so hide them visually and keep them in the DOM. */ .wovallo-hero-h1-lead, .wovallo-hero-sub-tail, .wovallo-hero-btn-lead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .wovallo-hero-h1-break { display: inline; } section.wovallo-hero .wovallo-hero-sub { margin: 0 0 18px; max-width: 26ch; font-size: 14px; font-weight: 300; line-height: 1.55; color: #faf9f6; text-shadow: none; } section.wovallo-hero .wovallo-hero-cta { flex-direction: row; align-items: stretch; gap: 10px; max-width: none; margin: 0; } section.wovallo-hero .wovallo-hero-btn-primary, section.wovallo-hero .wovallo-hero-btn-ghost { width: auto; padding: 13px 16px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } /* The short label always fits on one line; the long primary one must be free to wrap, or it overflows its pill on 320px screens. */ section.wovallo-hero .wovallo-hero-btn-ghost { white-space: nowrap; } section.wovallo-hero .wovallo-hero-btn-primary { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; text-align: center; text-wrap: balance; font-weight: 600; color: #3a4750; box-shadow: 0 8px 22px rgba(46, 56, 63, 0.24); } section.wovallo-hero .wovallo-hero-btn-ghost { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 13px 18px; font-weight: 500; color: #faf9f6; background: rgba(250, 249, 246, 0.12); border-color: rgba(250, 249, 246, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .wovallo-hero-btn-arrow { display: inline; font-size: 12px; letter-spacing: 0; } } /* ========================================================= Homepage: Scroll fade-in ========================================================= */ .fade-in { opacity: 1; transform: translateY(0); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); } .js-enabled .fade-in { opacity: 0; transform: translateY(24px); } .js-enabled .fade-in.visible { opacity: 1; transform: translateY(0); } /* ========================================================= Homepage: Trust card A floating white card that overlaps the hero's bottom edge. The hero clips its own overflow, so the card lives outside that section and is pulled up with a negative margin instead. One DOM order serves all three layouts — mobile stacks, tablet splits the promises into columns, desktop moves the rating into a left rail. ========================================================= */ .wovallo-home-trust { position: relative; z-index: 10; padding: 0 20px; margin-bottom: 48px; } /* The card owns the gap down to the section below it, so that section's own top padding would only double it. The pattern hands this class to whichever section renders first after the card. Handled here rather than by swapping Tailwind classes, which would need a fresh CSS build. */ /* Element qualifier is load-bearing: Tailwind is enqueued after style.css, so a bare class would lose the tie against .py-16 / .md:py-24. */ section.wovallo-section-flush { padding-top: 0; } .wovallo-home-trust-card { max-width: 1200px; margin: -48px auto 0; overflow: hidden; background: #fff; border: 1px solid rgba(162, 192, 206, 0.25); border-radius: 24px; box-shadow: 0 18px 44px rgba(58, 71, 80, 0.12); } /* On mobile the CTA row now sits flush against the photo's bottom edge, so the card drops below the hero instead of overlapping it. Tablet/desktop keep the -52px / -60px lift. */ @media (max-width: 767px) { .wovallo-home-trust-card { margin-top: 20px; } } /* --- Rating half --------------------------------------------------------- */ /* Mobile: stars over the count on the left, the score large on the right. */ .wovallo-home-trust-rating { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 16px; padding: 20px 20px 18px; border-bottom: 1px solid rgba(162, 192, 206, 0.22); } .wovallo-home-trust-rating .wovallo-stars { grid-column: 1; grid-row: 1; } .wovallo-home-trust-score { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 30px; font-weight: 600; line-height: 1; color: #3a4750; white-space: nowrap; } .wovallo-home-trust-score span { margin-left: 2px; font-size: 0.5em; font-weight: 300; color: rgba(58, 71, 80, 0.8); } .wovallo-home-trust-count { grid-column: 1; grid-row: 2; margin: 0; font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(58, 71, 80, 0.8); } .wovallo-home-trust-count strong { font-weight: 600; color: #3a4750; } /* Only the wide layouts have room for the closing clause. */ .wovallo-home-trust-count-tail, .wovallo-home-trust-sep, .wovallo-home-trust-link { display: none; } /* --- Promises ------------------------------------------------------------ */ .wovallo-home-trust-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; } .wovallo-home-trust-item + .wovallo-home-trust-item { border-top: 1px solid rgba(162, 192, 206, 0.2); } .wovallo-home-trust-icon { flex: none; width: 22px; height: 22px; fill: none; stroke: #a2c0ce; stroke-width: 1.4; } /* Labels, not document structure — a heading here would skip from the hero's h1 straight to h3, ahead of the page's first h2. */ .wovallo-home-trust-item-title { margin: 0 0 3px; font-size: 14px; font-weight: 600; line-height: 1.3; color: #3a4750; } .wovallo-home-trust-item p { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(58, 71, 80, 0.8); } /* --- Tablet -------------------------------------------------------------- */ @media (min-width: 768px) { .wovallo-home-trust { padding: 0 32px; margin-bottom: 56px; } .wovallo-home-trust-card { margin-top: -52px; border-radius: 26px; box-shadow: 0 20px 50px rgba(58, 71, 80, 0.12); } .wovallo-home-trust-rating { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 18px 24px; } .wovallo-home-trust-score { font-size: 20px; } .wovallo-home-trust-sep { display: block; width: 1px; height: 16px; background: rgba(162, 192, 206, 0.45); } .wovallo-home-trust-items { display: grid; grid-template-columns: repeat(3, 1fr); } .wovallo-home-trust-item { flex-direction: column; gap: 10px; padding: 22px 20px; } .wovallo-home-trust-item + .wovallo-home-trust-item { border-top: 0; border-left: 1px solid rgba(162, 192, 206, 0.2); } .wovallo-home-trust-icon { width: 24px; height: 24px; } .wovallo-home-trust-item-title { font-size: 15px; } } /* --- Desktop ------------------------------------------------------------- */ @media (min-width: 1024px) { .wovallo-home-trust { padding: 0 40px; margin-bottom: 72px; } .wovallo-home-trust-card { display: grid; grid-template-columns: 340px 1fr; align-items: stretch; margin-top: -60px; border-radius: 28px; box-shadow: 0 24px 60px rgba(58, 71, 80, 0.12); } /* No reviews yet: the promises take the full width on their own. */ .wovallo-home-trust-card.is-noratings { display: block; } .wovallo-home-trust-rating { flex-direction: column; gap: 10px; align-items: flex-start; justify-content: center; padding: 30px 32px; border-bottom: 0; border-right: 1px solid rgba(162, 192, 206, 0.22); } .wovallo-home-trust-score { font-size: 34px; } .wovallo-home-trust-count-tail { display: inline; } .wovallo-home-trust-sep { display: none; } .wovallo-home-trust-link { display: inline-block; font-size: 13px; font-weight: 500; color: #4e7889; text-decoration: none; transition: color 0.3s ease; } .wovallo-home-trust-link:hover { color: #ff9d7e; } /* No outline box — it reads as a stray border on a card this quiet. Keyboard users still get a clear indicator from the colour shift plus underline. */ .wovallo-home-trust-link:focus { outline: none; } .wovallo-home-trust-link:focus-visible { color: #ff9d7e; text-decoration: underline; text-underline-offset: 4px; } .wovallo-home-trust-items { align-items: center; padding: 26px 0; } .wovallo-home-trust-item { justify-content: center; padding: 0 28px; } .wovallo-home-trust-icon { width: 26px; height: 26px; } } @media (prefers-reduced-motion: reduce) { .wovallo-home-trust-card.hero-elem { opacity: 1; animation: none; } } /* ========================================================= Homepage: Ritual video Five 9:16 clips filmed at home. One DOM order serves both layouts: mobile is a snapping rail that bleeds past the section padding so the next card peeks in, desktop is a five-up grid with the even cards dropped to break the row. Nothing here uses a Tailwind utility, so the section needs no CSS rebuild. Playback state is driven by .is-playing, set from homepage.js. ========================================================= */ /* Ritual and the lifestyle grid below it share the cream background, which breaks the page's alternating rhythm — a hairline stands in for it. */ .wovallo-ritual { border-bottom: 1px solid rgba(162, 192, 206, 0.15); } .wovallo-ritual-head { margin-bottom: 40px; } .wovallo-ritual-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .wovallo-ritual-eyebrow i { flex: 0 0 auto; width: 22px; height: 1px; background: #ff9d7e; } .wovallo-ritual-head h2 em { font-style: italic; font-weight: 400; } .wovallo-ritual-head p { margin-top: 12px; max-width: 34em; } /* --- Track ---------------------------------------------------------------- */ /* Mobile: horizontal rail, bled out to the screen edges (the section pads by 16px) so a sliver of the next card stays visible. */ .wovallo-ritual-track { display: flex; gap: 14px; margin: 0 -16px; padding: 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; /* Without this the snap ignores the padding above and parks the first card hard against the screen edge, out of line with the heading. */ scroll-padding-left: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .wovallo-ritual-track::-webkit-scrollbar { display: none; } .wovallo-ritual-card { flex: 0 0 232px; margin: 0; scroll-snap-align: start; } .wovallo-ritual-frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 16px; background: #e7e3dc; cursor: pointer; } .wovallo-ritual-video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .wovallo-ritual-frame:hover .wovallo-ritual-video { transform: scale(1.04); } .wovallo-ritual-scrim { position: absolute; inset: 0; pointer-events: none; /* Darkened at both ends: the clip number sits at the top, the label at the bottom, and the footage in between is left alone. */ background: linear-gradient( 180deg, rgba(58, 71, 80, 0.4) 0%, rgba(58, 71, 80, 0) 28%, rgba(58, 71, 80, 0) 55%, rgba(58, 71, 80, 0.55) 100% ); transition: opacity 0.3s ease; } .wovallo-ritual-num { position: absolute; top: 12px; left: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 400; color: rgba(250, 249, 246, 0.75); transition: opacity 0.3s ease; } .wovallo-ritual-label { position: absolute; bottom: 12px; left: 12px; right: 54px; font-size: 13px; font-weight: 400; color: #faf9f6; transition: opacity 0.3s ease; } /* --- Controls ------------------------------------------------------------- */ .wovallo-ritual-toggle, .wovallo-ritual-mute { position: absolute; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: rgba(250, 249, 246, 0.9); color: #3a4750; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; } .wovallo-ritual-toggle { right: 12px; bottom: 12px; } .wovallo-ritual-mute { right: 12px; top: 12px; } .wovallo-ritual-toggle:hover, .wovallo-ritual-mute:hover { background: #fff; transform: scale(1.08); } .wovallo-ritual-toggle:focus-visible, .wovallo-ritual-mute:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } .wovallo-ritual-toggle .wovallo-ritual-icon-pause, .wovallo-ritual-mute .wovallo-ritual-icon-muted { display: none; } .wovallo-ritual-card.is-playing .wovallo-ritual-icon-play, .wovallo-ritual-card.is-muted .wovallo-ritual-icon-sound { display: none; } .wovallo-ritual-card.is-playing .wovallo-ritual-icon-pause, .wovallo-ritual-card.is-muted .wovallo-ritual-icon-muted { display: block; } /* Playing: the poster furniture gets out of the way of the footage. */ .wovallo-ritual-card.is-playing .wovallo-ritual-scrim, .wovallo-ritual-card.is-playing .wovallo-ritual-num, .wovallo-ritual-card.is-playing .wovallo-ritual-label { opacity: 0; } .wovallo-ritual-card figcaption { margin-top: 12px; font-size: 12px; font-weight: 300; line-height: 1.55; color: rgba(58, 71, 80, 0.6); } /* --- Footer --------------------------------------------------------------- */ .wovallo-ritual-foot { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; } .wovallo-ritual-cta { display: block; width: 100%; padding: 15px 30px; border-radius: 999px; background: #3a4750; color: #faf9f6; font-size: 14px; font-weight: 500; text-align: center; text-decoration: none; transition: background-color 0.3s ease; } .wovallo-ritual-cta:hover { background: #ff9d7e; } .wovallo-ritual-cta:focus { outline: none; } .wovallo-ritual-cta:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } .wovallo-ritual-note { font-size: 12px; color: rgba(58, 71, 80, 0.55); text-align: center; } @media (min-width: 768px) { .wovallo-ritual-head { margin-bottom: 48px; } .wovallo-ritual-eyebrow i { width: 28px; } .wovallo-ritual-track { display: grid; /* Card count comes from the pattern — a clip whose file is missing is skipped, and the grid should not hold an empty column for it. */ grid-template-columns: repeat(var(--wovallo-ritual-cols-md, 3), 1fr); gap: 20px; margin: 0; padding: 0; overflow: visible; } .wovallo-ritual-card { flex: initial; } .wovallo-ritual-card figcaption { font-size: 13px; } .wovallo-ritual-foot { flex-direction: row; align-items: center; justify-content: flex-start; gap: 28px; margin-top: 40px; } .wovallo-ritual-cta { width: auto; } .wovallo-ritual-note { text-align: left; } } @media (min-width: 1024px) { .wovallo-ritual-head { margin-bottom: 56px; } .wovallo-ritual-track { grid-template-columns: repeat(var(--wovallo-ritual-cols-lg, 5), 1fr); gap: 24px; align-items: start; /* Room for the dropped cards, which otherwise punch through the section. */ padding-bottom: 48px; } .wovallo-ritual-card:nth-child(2n) { transform: translateY(48px); } } @media (prefers-reduced-motion: reduce) { .wovallo-ritual-frame:hover .wovallo-ritual-video, .wovallo-ritual-toggle:hover, .wovallo-ritual-mute:hover { transform: none; } .wovallo-ritual-video, .wovallo-ritual-scrim, .wovallo-ritual-num, .wovallo-ritual-label { transition: none; } } /* ========================================================= Focus ========================================================= */ /* Remove default focus outline from header elements when clicked */ #navbar a:focus, #navbar button:focus, #navbar .btn-press:focus { outline: none !important; } @media (max-width: 767px) { #navbar { z-index: 1000 !important; } /* Hangs off the bar's bottom edge, which is 5rem at rest and shrinks to 4rem once the page scrolls — so it tracks the measured height instead. */ #navbar #mobileMenu { position: fixed !important; top: calc( var(--wovallo-admin-bar-height, 0px) + var(--wovallo-header-height, 5rem) ) !important; right: 0 !important; left: 0 !important; z-index: 1001 !important; width: 100vw !important; height: calc( 100dvh - var(--wovallo-admin-bar-height, 0px) - var(--wovallo-header-height, 5rem) ) !important; background: #faf9f6 !important; } } /* Homepage mobile: the header gets out of the cover photo's way while the hero is at the top of the viewport, then returns to the cream bar once the page scrolls or a panel opens. Reads the classes header.js already toggles, so no JS change is needed. */ @media (max-width: 767px) { body.wovallo-home-page #navbar { background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } body.wovallo-home-page #navbar a, body.wovallo-home-page #navbar button { color: #faf9f6; } body.wovallo-home-page #navbar .wovallo-header-logo { filter: brightness(1.18); } /* Both panels keep their own cream background, so their contents are never over the cover photo. Pinning them dark here also covers the close transition, where the .opacity-100 hook below is dropped while the panel is still fading out. */ body.wovallo-home-page #navbar :is(#mobileMenu, #wovalloHeaderSearchPanel) :is(a, button) { color: #3a4750; } body.wovallo-home-page #navbar.shadow-sm, body.wovallo-home-page #navbar:has(#mobileMenu.opacity-100), body.wovallo-home-page #navbar:has(#wovalloHeaderSearchPanel.opacity-100) { background-color: rgba(250, 249, 246, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: rgba(162, 192, 206, 0.2); } body.wovallo-home-page :is( #navbar.shadow-sm, #navbar:has(#mobileMenu.opacity-100), #navbar:has(#wovalloHeaderSearchPanel.opacity-100) ) :is(a, button) { color: #3a4750; } body.wovallo-home-page :is( #navbar.shadow-sm, #navbar:has(#mobileMenu.opacity-100), #navbar:has(#wovalloHeaderSearchPanel.opacity-100) ) .wovallo-header-logo { filter: none; } } /* Footer: Replace default focus outline with smooth brand-aligned transitions */ footer a:focus, footer a:focus-visible, footer button:focus, footer button:focus-visible { outline: none; } /* Footer Accordion — mobile only (max 639px) */ @media (max-width: 639px) { .footer-accordion-content { overflow: hidden; max-height: 0; transition: max-height 0.35s ease-in-out; } .footer-accordion-item.is-open .footer-accordion-content { max-height: 320px; } } /* Desktop: always show accordion content */ @media (min-width: 640px) { .footer-accordion-content { overflow: visible; max-height: none; } .footer-accordion-chevron { display: none; } .footer-accordion-toggle { cursor: default; pointer-events: none; } } /* ========================================================= Posts index (home.html) + shared post grid (wovallo/posts-loop on index / archive / search) ========================================================= */ body.blog .wovallo-posts-featured-query .wp-block-post-template, .wovallo-posts-grid-query .wp-block-post-template { list-style: none; margin: 0; padding: 0; } /* Remove default template gap between header and first section on posts page */ body.blog .wp-site-blocks { --wp--style--block-gap: 0 !important; gap: 0 !important; } body.blog .wp-site-blocks > header:first-child, body.blog .wp-site-blocks > header:first-child .wp-block-group { margin-bottom: 0 !important; height: fit-content; } body.blog .wovallo-posts-page-main { margin-top: 0 !important; } body.blog .wovallo-featured-media img, .wovallo-post-card-media img, body.single-post .wovallo-related-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } body.blog .wovallo-featured-card:hover .wovallo-featured-media img, .wovallo-post-card:hover .wovallo-post-card-media img, body.single-post .wovallo-related-card:hover .wovallo-related-card-media img { transform: scale(1.04); } /* Dynamic Image Placeholder Fallback */ .wovallo-featured-media:has(.wp-block-post-featured-image img) .wovallo-post-placeholder, .wovallo-post-card-media:has(.wp-block-post-featured-image img) .wovallo-post-placeholder, .wovallo-related-card-media:has(.wp-block-post-featured-image img) .wovallo-post-placeholder { display: none !important; } /* Ensure the featured image covers the container */ .wovallo-featured-media .wp-block-post-featured-image, .wovallo-post-card-media .wp-block-post-featured-image, .wovallo-related-card-media .wp-block-post-featured-image { position: absolute; inset: 0; z-index: 2; margin: 0; width: 100%; height: 100%; } .wovallo-featured-media .wp-block-post-featured-image a, .wovallo-post-card-media .wp-block-post-featured-image a, .wovallo-related-card-media .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; } body.blog .wovallo-featured-card .wp-block-post-featured-image { margin-bottom: 0; } .wovallo-post-card .wp-block-post-featured-image { margin-bottom: 1.25rem; } .wovallo-post-card .wp-block-post-excerpt { margin-top: 0; margin-bottom: 0; } .wovallo-post-card:hover .wovallo-post-card-media .wovallo-post-placeholder > div:last-child { transform: rotate(90deg) scale(1.06); } .wovallo-posts-grid-query .wp-block-post-template { display: grid !important; grid-template-columns: 1fr !important; gap: 2rem !important; row-gap: 3rem !important; } @media (min-width: 640px) { .wovallo-posts-grid-query .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 1024px) { .wovallo-posts-grid-query .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } body.blog .wovallo-featured-author-avatar { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.9) 0 24%, transparent 25%), linear-gradient(145deg, rgba(250, 249, 246, 0.95), rgba(162, 192, 206, 0.34)); border: 1px solid rgba(162, 192, 206, 0.45); box-shadow: inset 0 -0.3rem 0.75rem rgba(162, 192, 206, 0.2), 0 0.65rem 1.4rem rgba(58, 71, 80, 0.08); color: #3a4750; isolation: isolate; } body.blog .wovallo-featured-author-avatar__halo { position: absolute; inset: -0.28rem; border-radius: inherit; border: 1px solid rgba(255, 157, 126, 0.48); opacity: 0.85; transform: rotate(-10deg); transition: border-color 0.25s ease, transform 0.25s ease; } body.blog .wovallo-featured-author-avatar__mark { position: relative; z-index: 1; font-size: 0.72rem; font-weight: 650; letter-spacing: 0; text-transform: lowercase; } body.blog .wovallo-featured-author-avatar__img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } body.blog .wovallo-featured-card:hover .wovallo-featured-author-avatar__halo { border-color: rgba(255, 157, 126, 0.72); transform: rotate(8deg) scale(1.03); } body.blog .wovallo-featured-meta > .wp-block-group:first-child { min-width: 0; } body.blog .wovallo-featured-readmore { display: inline-flex; align-items: center; justify-content: center; margin: 0 !important; min-height: 2.75rem; padding: 0 0.35rem 0 1rem; gap: 0.65rem; border-radius: 9999px; border: 1px solid rgba(255, 157, 126, 0.28); background: rgba(255, 157, 126, 0.1); color: #3a4750; font-size: 0.82rem; font-weight: 600; line-height: 1; text-decoration: none; transition: color 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; } body.blog .wovallo-featured-readmore span:not(.screen-reader-text) { display: inline-flex; align-items: center; justify-content: center; width: 2.05rem; height: 2.05rem; border-radius: 9999px; background: #ff9d7e; color: #ffffff; font-size: 0.9rem; transition: background-color 0.22s ease, transform 0.22s ease; } body.blog .wovallo-featured-readmore:hover, body.blog .wovallo-featured-readmore:focus-visible { border-color: rgba(255, 157, 126, 0.66); background: #fff5f0; color: #3a4750; box-shadow: 0 0.75rem 1.6rem rgba(255, 157, 126, 0.16); transform: translateY(-1px); } body.blog .wovallo-featured-readmore:hover span:not(.screen-reader-text), body.blog .wovallo-featured-readmore:focus-visible span:not(.screen-reader-text) { background: #3a4750; transform: translateX(2px); } body.blog .wovallo-featured-readmore:focus-visible { outline: 2px solid rgba(255, 157, 126, 0.72); outline-offset: 3px; } @media (max-width: 639px) { body.blog .wovallo-featured-meta { align-items: flex-start !important; gap: 1rem; } body.blog .wovallo-featured-author-avatar { width: 2.5rem; height: 2.5rem; } body.blog .wovallo-featured-readmore { min-height: 2.5rem; padding-left: 0.9rem; font-size: 0.78rem; } body.blog .wovallo-featured-readmore span:not(.screen-reader-text) { width: 1.9rem; height: 1.9rem; } } /* Hide duplicate first post card on the first page only. */ body.blog:not(.paged) .wovallo-posts-grid-query .wp-block-post-template > :first-child { display: none; } /* Featured section appears on page 1 only. */ body.blog.paged .wovallo-posts-featured { display: none; } .wovallo-posts-pagination { gap: 0.5rem; } .wovallo-posts-pagination a, .wovallo-posts-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.85rem; border-radius: 9999px; border: 1px solid rgba(162, 192, 206, 0.35); background: #ffffff; color: #3a4750; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .wovallo-posts-pagination a:hover, .wovallo-posts-pagination .page-numbers:hover { border-color: #a2c0ce; color: #ffffff; background: #a2c0ce; } .wovallo-posts-pagination .page-numbers.current { border-color: #ff9d7e; background: #ff9d7e; color: #ffffff; } /* Remove default click/focus outline artifacts on posts page controls/links */ body.blog a:focus, body.blog a:focus-visible, body.blog button:focus, body.blog button:focus-visible, body.blog input:focus, body.blog input:focus-visible { outline: none !important; box-shadow: none !important; } /* ========================================================= Single post template (single.html) ========================================================= */ body.single-post .wp-site-blocks { --wp--style--block-gap: 0 !important; gap: 0 !important; } body.single-post .wp-site-blocks > header:first-child, body.single-post .wp-site-blocks > header:first-child .wp-block-group { margin-bottom: 0 !important; height: fit-content; } body.single-post .wovallo-single-main { margin-top: 0 !important; } body.single-post .wovallo-reading-progress { height: 4px; } /* The header is pinned (z-1000), so the progress bar has to ride above it or it would be covered the moment the page scrolls. The body qualifier is load-bearing: Tailwind is enqueued after style.css, so a bare class would lose the tie against the element's own z-[100]. */ body .wovallo-reading-progress { z-index: 1001; } body.single-post .wovallo-reading-progress-bar { min-width: 0; } body.single-post .wovallo-single-featured-wrap { margin-bottom: 1rem !important; } @media (min-width: 768px) { body.single-post .wovallo-single-featured-wrap { margin-bottom: 1.25rem !important; } } /* Featured image vs placeholder */ body.single-post .wovallo-single-featured-frame:not(:has(.wp-block-post-featured-image img)) .wp-block-post-featured-image { display: none !important; } body.single-post .wovallo-single-featured-frame:has(.wp-block-post-featured-image img) .wovallo-single-featured-placeholder { display: none !important; } body.single-post .wovallo-single-featured-frame:has(.wp-block-post-featured-image img) { min-height: 0; } body.single-post .wovallo-single-featured-frame:has(.wp-block-post-featured-image img) .wp-block-post-featured-image { position: absolute; inset: 0; z-index: 2; margin: 0; width: 100%; height: 100%; } body.single-post .wovallo-single-featured-frame:has(.wp-block-post-featured-image img) .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; } body.single-post .wovallo-single-featured-frame:has(.wp-block-post-featured-image img) .wp-block-post-featured-image figure { margin: 0; height: 100%; width: 100%; } /* Ensure no block gap margins shift the absolute children inside the frame */ body.single-post .wovallo-single-featured-frame > * { margin: 0 !important; } body.single-post .wovallo-single-featured-frame.is-layout-flow > * { margin-top: 0 !important; margin-bottom: 0 !important; } body.single-post .wovallo-single-featured-placeholder { margin: 0 !important; } /* Editorial kicker (replaces category pill when posts have no category) */ body.single-post .wovallo-single-kicker { justify-content: center; } /* Related card date line (replaces category) */ body.single-post .wovallo-related-meta, body.single-post .wovallo-related-meta time { color: #ff9d7e !important; } /* Article hero title only (example/post.html h1); related cards use Tailwind text-xl */ body.single-post .wovallo-single-hero .wp-block-post-title { text-align: center !important; font-size: 1.875rem !important; font-weight: 600 !important; color: #3a4750 !important; margin-bottom: 1.5rem !important; letter-spacing: -0.025em !important; line-height: 1.25 !important; } @media (min-width: 640px) { body.single-post .wovallo-single-hero .wp-block-post-title { font-size: 2.25rem !important; } } @media (min-width: 768px) { body.single-post .wovallo-single-hero .wp-block-post-title { font-size: 3rem !important; } } @media (min-width: 1024px) { body.single-post .wovallo-single-hero .wp-block-post-title { font-size: 3.75rem !important; } } body.single-post .wovallo-single-article .wp-block-post-content { font-size: inherit; line-height: 1.66; } /* Hide the first featured image block inside post content if it exists */ body.single-post .wovallo-single-article .wp-block-post-content > .wp-block-post-featured-image { display: none !important; } body.single-post .wovallo-single-article .wp-block-post-content > * { max-width: 48rem !important; /* 768px */ margin-left: auto !important; margin-right: auto !important; } body.single-post .wovallo-single-article .wp-block-post-content > :first-child { margin-block-start: 0 !important; margin-top: 0 !important; } body.single-post .wovallo-single-article .wp-block-post-content > .alignwide { max-width: 64rem !important; } body.single-post .wovallo-single-article .wp-block-post-content > .alignfull { max-width: 100% !important; } body.single-post .wovallo-single-article .wp-block-post-content > p { margin-block-start: 0 !important; margin-block-end: 0.65em !important; margin-top: 0 !important; margin-bottom: 0.65em !important; color: rgba(58, 71, 80, 0.8); } body.single-post .wovallo-single-article .wp-block-post-content strong, body.single-post .wovallo-single-article .wp-block-post-content b { color: rgba(58, 71, 80, 0.94); font-weight: 650; } body.single-post .wovallo-single-article .wp-block-post-content > p + p { margin-block-start: 0 !important; margin-top: 0 !important; } body.single-post .wovallo-single-article .wp-block-post-content > p:first-of-type { font-size: 1.125rem; line-height: 1.62; color: rgba(58, 71, 80, 0.95); font-weight: 300; margin-block-end: 0.85rem !important; margin-bottom: 0.85rem !important; } body.single-post .wovallo-single-article .wp-block-post-content > p:first-of-type strong, body.single-post .wovallo-single-article .wp-block-post-content > p:first-of-type b { color: #3a4750; font-weight: 650; } @media (min-width: 768px) { body.single-post .wovallo-single-article .wp-block-post-content { line-height: 1.6; } body.single-post .wovallo-single-article .wp-block-post-content > p:first-of-type { font-size: 1.5rem; line-height: 1.55; margin-block-end: 1rem !important; margin-bottom: 1rem !important; } } body.single-post .wovallo-single-article .wp-block-post-content h1 { margin-top: 2.5em !important; margin-bottom: 1em !important; font-weight: 700 !important; color: #3a4750 !important; font-size: 2.25rem !important; line-height: 1.2 !important; } body.single-post .wovallo-single-article .wp-block-post-content h2 { margin-top: 2em !important; margin-bottom: 0.75em !important; font-weight: 600 !important; color: #3a4750 !important; font-size: 1.75rem !important; line-height: 1.25 !important; } body.single-post .wovallo-single-article .wp-block-post-content h3 { margin-top: 1.5em !important; margin-bottom: 0.6em !important; font-weight: 500 !important; color: #3a4750 !important; font-size: 1.25rem !important; line-height: 1.3 !important; } body.single-post .wovallo-single-article .wp-block-post-content h4 { margin-top: 1.5em !important; margin-bottom: 0.6em !important; font-weight: 500 !important; color: #3a4750 !important; font-size: 1.125rem !important; line-height: 1.35 !important; } body.single-post .wovallo-single-article .wp-block-post-content h5 { margin-top: 1.5em !important; margin-bottom: 0.6em !important; font-weight: 500 !important; color: #3a4750 !important; font-size: 1rem !important; line-height: 1.4 !important; } body.single-post .wovallo-single-article .wp-block-post-content h6 { margin-top: 1.5em !important; margin-bottom: 0.75em !important; font-weight: 500 !important; color: #3a4750 !important; font-size: 0.875rem !important; text-transform: uppercase; letter-spacing: 0.05em; } body.single-post .wovallo-single-article .wp-block-post-content ul { margin-block-start: 0 !important; margin-block-end: 0.75em !important; margin-top: 0 !important; margin-bottom: 0.75em !important; list-style-type: disc; padding-left: 1.5em; } body.single-post .wovallo-single-article .wp-block-post-content li { margin-block-end: 0.2em; margin-bottom: 0.2em; } body.single-post .wovallo-single-article .wp-block-post-content blockquote { border-left: 4px solid #a2c0ce; padding-left: 1rem; font-style: italic; color: rgba(58, 71, 80, 0.8); margin: 1.5em 0; background: rgba(162, 192, 206, 0.05); padding: 1.25rem 1rem; border-radius: 0 1rem 1rem 0; } @media (min-width: 768px) { body.single-post .wovallo-single-article .wp-block-post-content blockquote { padding-left: 1.5rem; padding: 1.5rem; margin: 2em 0; } } /* Tag pills */ body.single-post .wovallo-single-tags a { display: inline-block; padding: 0.375rem 1rem; border-radius: 9999px; background: rgba(162, 192, 206, 0.1); color: #a2c0ce; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease; } body.single-post .wovallo-single-tags a:hover { background: #a2c0ce; color: #ffffff; } /* Related posts: top-align grid + list items (override wp-container / flex centering) */ .wovallo-related-posts-query .wp-block-post-template, .wovallo-related-posts-query ul.wp-block-post-template { list-style: none; margin: 0; padding: 0; align-items: start !important; align-content: start !important; justify-items: stretch !important; } .wovallo-related-posts-query .wp-block-post-template.is-flex-container { align-items: flex-start !important; align-content: flex-start !important; } /* Grid cells stretch to row height; pin card content to the top of each cell */ .wovallo-related-posts-query .wp-block-post-template > li.wp-block-post { align-self: start !important; width: 100%; min-width: 0; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; } @media (min-width: 640px) { .wovallo-related-posts-query .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 1024px) { .wovallo-related-posts-query .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 1023px) { .wovallo-related-posts-query .wp-block-post-template > *:nth-child(3) { display: none; } } body.single-post .wp-block-post-author-name { display: inline; } body.single-post .wp-block-post-date { display: inline; } /* Related stories titles: match example/post.html h4 (text-xl font-medium leading-snug) */ body.single-post .wovallo-related-card .wp-block-post-title { font-size: 1.25rem !important; font-weight: 500 !important; line-height: 1.375 !important; letter-spacing: normal !important; margin: 0 !important; color: #3a4750 !important; } body.single-post .wovallo-related-card .wp-block-post-title a { color: inherit !important; text-decoration: none; transition: color 0.3s ease, opacity 0.2s ease; } body.single-post .wovallo-related-card .wp-block-post-title a:hover, body.single-post .wovallo-related-card .group:hover .wp-block-post-title a { color: #ff9d7e !important; } /* Focus: single post (match posts page — custom focus via Tailwind on template) */ body.single-post a:focus, body.single-post a:focus-visible, body.single-post button:focus, body.single-post button:focus-visible { outline: none !important; box-shadow: none !important; } @media (prefers-reduced-motion: reduce) { body.single-post .fade-in { opacity: 1 !important; transform: none !important; } } /* ========================================================= Mini Cart Drawer (Mobile) ========================================================= */ #wovallo-mini-cart-drawer { pointer-events: none !important; /* Tailwind's z-50 on the element is below the pinned header's stacking context (z-1000), which would leave the site bar bright and clickable on top of this drawer's scrim in the 768-1023px band where it still shows. */ z-index: 1100; } #wovallo-mini-cart-drawer.pointer-events-auto { pointer-events: auto !important; } /* Cart drawer scrolling */ #wovallo-mini-cart-drawer .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; } #wovallo-mini-cart-drawer .woocommerce-mini-cart-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #e5ecf1; } #wovallo-mini-cart-drawer .woocommerce-mini-cart-item:last-child { border-bottom: none; } #wovallo-mini-cart-drawer .woocommerce-mini-cart-item-image { flex-shrink: 0; } #wovallo-mini-cart-drawer .woocommerce-mini-cart-item-image img { width: 60px; height: 60px; object-fit: cover; border-radius: 0.5rem; } /* Reduce motion preference */ @media (prefers-reduced-motion: reduce) { #wovallo-mini-cart-drawer { transition: none !important; } } /* ========================================================= Single Product Page (single-product.html) ========================================================= */ /* Remove default block gap between header and product content */ body.single-product .wp-site-blocks { --wp--style--block-gap: 0 !important; gap: 0 !important; row-gap: 0 !important; } body.single-product .wp-site-blocks > * { margin-block-start: 0 !important; margin-block-end: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } body.single-product .wp-site-blocks > header, body.single-product .wp-site-blocks > header .wp-block-group, body.single-product .wp-site-blocks > header .wp-block-group.alignfull { margin: 0 !important; padding-bottom: 0 !important; height: fit-content; } body.single-product .wovallo-product-main { background: linear-gradient(180deg, #faf9f6 0%, #ffffff 48%, #faf9f6 100%); margin-top: 0 !important; padding-top: 0 !important; } body.single-product .wovallo-product-shell { position: relative; z-index: 1; } body.single-product .wovallo-product-grid { align-items: start; } body.single-product .wovallo-product-info-col { min-width: 0; padding: 0.25rem 0 0; } @media (min-width: 1024px) { body.single-product .wovallo-product-info-col { position: sticky; top: 6rem; } } body.single-product .wovallo-product-purchase { position: relative; margin: 0.25rem 0 1.35rem; padding: clamp(1.35rem, 2.4vw, 1.85rem); border: 1px solid rgba(58, 71, 80, 0.07); border-radius: 1.6rem; background: radial-gradient(120% 100% at 0% 0%, rgba(162, 192, 206, 0.08) 0%, rgba(162, 192, 206, 0) 55%), radial-gradient(120% 120% at 100% 0%, rgba(255, 157, 126, 0.07) 0%, rgba(255, 157, 126, 0) 50%), linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(250, 249, 246, 0.94) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 22px 50px -30px rgba(58, 71, 80, 0.4), 0 6px 18px -12px rgba(58, 71, 80, 0.16); overflow: visible; backdrop-filter: blur(8px); } @media (max-width: 639px) { body.single-product .wovallo-product-purchase { padding: 1.15rem; border-radius: 1.25rem; } } /* Hide default WooCommerce notices — we use custom toast */ body.single-product .wc-block-store-notices, body.single-product .woocommerce-notices-wrapper, body.single-product .wp-block-woocommerce-store-notices, body.single-product .woocommerce-message, body.single-product .woocommerce-info, body.wovallo-categories-page .wc-block-store-notices, body.wovallo-categories-page .woocommerce-notices-wrapper, body.wovallo-categories-page .wp-block-woocommerce-store-notices, body.wovallo-categories-page .woocommerce-message, body.wovallo-categories-page .woocommerce-info { display: none !important; } /* ----- Custom Cart Toast ----- */ .wovallo-toast { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 100000; display: flex; align-items: center; gap: 0.85rem; overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.3); border-radius: 0.9rem; padding: 0.85rem 1rem; background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(250, 249, 246, 0.94)), #ffffff; box-shadow: 0 18px 44px rgba(58, 71, 80, 0.14), 0 4px 14px rgba(58, 71, 80, 0.08); transform: translateX(calc(100% + 2rem)); opacity: 0; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease; width: min(22rem, calc(100vw - 2rem)); max-width: 100%; pointer-events: none; } .wovallo-toast.is-visible { transform: translateX(0); opacity: 1; pointer-events: auto; } .wovallo-toast.is-leaving { transform: translateX(calc(100% + 2rem)); opacity: 0; transition: transform 0.35s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.25s ease; } .wovallo-toast-check { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(162, 192, 206, 0.42); background: rgba(162, 192, 206, 0.22); color: #3a4750; display: flex; align-items: center; justify-content: center; } .wovallo-toast-check svg { width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } .wovallo-toast-check svg path { stroke-dasharray: 20; stroke-dashoffset: 20; } .wovallo-toast.is-visible .wovallo-toast-check svg path { animation: wovallo-check-draw 0.4s 0.25s ease forwards; } @keyframes wovallo-check-draw { to { stroke-dashoffset: 0; } } .wovallo-toast-body { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; } .wovallo-toast-text { font-size: 0.92rem; font-weight: 800; color: #3a4750; line-height: 1.35; overflow-wrap: anywhere; } .wovallo-toast-link { font-size: 0.8125rem; color: #ff9d7e; text-decoration: none; font-weight: 800; transition: color 0.2s ease, box-shadow 0.2s ease; } .wovallo-toast-link:hover { color: #e88869; } .wovallo-toast-link:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } /* Progress bar at bottom of toast */ .wovallo-toast-progress { position: absolute; bottom: 0.48rem; left: 1rem; right: 1rem; height: 3px; border-radius: 9999px; background: rgba(162, 192, 206, 0.24); overflow: hidden; } .wovallo-toast-progress-bar { display: block; height: 100%; background: linear-gradient(90deg, #a2c0ce, #ff9d7e); border-radius: inherit; width: 100%; transform-origin: left; transform: scaleX(1); will-change: transform; } .wovallo-toast-progress-bar.is-counting { animation: wovallo-toast-progress var(--wovallo-toast-duration, 3000ms) linear forwards; } @keyframes wovallo-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (max-width: 480px) { .wovallo-toast { top: calc(var(--wovallo-admin-bar-height, 0px) + env(safe-area-inset-top, 0px) + 0.85rem); bottom: auto; right: 1rem; left: 1rem; width: auto; max-width: none; transform: translateY(calc(-100% - 2rem)); } .wovallo-toast.is-visible { transform: translateY(0); } .wovallo-toast.is-leaving { transform: translateY(calc(-100% - 2rem)); } } @media (prefers-reduced-motion: reduce) { .wovallo-toast, .wovallo-toast.is-leaving, .wovallo-toast-link { transition: none !important; } .wovallo-toast.is-visible .wovallo-toast-check svg path { animation: none !important; stroke-dashoffset: 0; } } /* ----- Journal Newsletter ----- */ .wovallo-newsletter-form { display: grid; grid-template-columns: minmax(10rem, 0.72fr) minmax(14rem, 1fr) auto; gap: 0.75rem; width: min(100%, 42rem); margin-inline: auto; align-items: center; } .wovallo-newsletter-input { width: 100%; min-width: 0; border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 9999px; padding: 1rem 1.45rem; background: rgba(255, 255, 255, 0.12); color: #ffffff; font-size: 0.96rem; line-height: 1.2; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .wovallo-newsletter-input::placeholder { color: rgba(255, 255, 255, 0.68); } .wovallo-newsletter-input-name { grid-column: 1; grid-row: 1; } .wovallo-newsletter-input-email { grid-column: 2; grid-row: 1; } .wovallo-newsletter-input:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.16); } .wovallo-newsletter-input:focus, .wovallo-newsletter-input:focus-visible { border-color: #ffffff; background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18); outline: none; } .wovallo-newsletter-input.has-error, .wovallo-newsletter-input:user-invalid { border-color: rgba(255, 157, 126, 0.95); box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.18); } .wovallo-newsletter-error { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 0.55rem; max-width: min(100%, 24rem); margin-top: -0.15rem; border: 1px solid rgba(255, 157, 126, 0.34); border-radius: 9999px; padding: 0.58rem 0.85rem 0.58rem 0.68rem; background: rgba(250, 249, 246, 0.96); box-shadow: 0 14px 32px rgba(58, 71, 80, 0.12); color: #3a4750; font-size: 0.86rem; font-weight: 700; line-height: 1.25; text-align: left; animation: wovallo-newsletter-error-in 0.18s ease both; } .wovallo-newsletter-error[hidden] { display: none; } .wovallo-newsletter-error::before { content: "!"; flex: 0 0 auto; display: inline-flex; width: 1.45rem; height: 1.45rem; align-items: center; justify-content: center; border-radius: 50%; background: #ff9d7e; color: #ffffff; font-size: 0.95rem; font-weight: 900; line-height: 1; } @keyframes wovallo-newsletter-error-in { from { opacity: 0; transform: translateY(-0.35rem); } to { opacity: 1; transform: translateY(0); } } .wovallo-newsletter-submit { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; border: 0; border-radius: 9999px; padding: 0.95rem 2rem; background: #ff9d7e; color: #ffffff; font-weight: 700; font-size: 1rem; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease; } .wovallo-newsletter-submit:hover { background: #e88869; box-shadow: 0 8px 20px rgba(255, 157, 126, 0.3); } .wovallo-newsletter-submit:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; } .wovallo-newsletter-submit:disabled, .wovallo-newsletter-input:disabled { cursor: wait; opacity: 0.72; } .wovallo-toast[data-variant="error"] .wovallo-toast-check { border-color: rgba(255, 157, 126, 0.45); background: rgba(255, 157, 126, 0.18); color: #ff7f60; } .wovallo-toast[data-variant="error"] .wovallo-toast-progress-bar { background: linear-gradient(90deg, #ff9d7e, #3a4750); } @media (max-width: 720px) { .wovallo-newsletter-form { grid-template-columns: 1fr; width: min(100%, 27rem); } .wovallo-newsletter-error { grid-column: 1; grid-row: auto; width: 100%; max-width: none; } .wovallo-newsletter-input-name, .wovallo-newsletter-input-email, .wovallo-newsletter-submit { grid-column: 1; grid-row: auto; } .wovallo-newsletter-submit { width: 100%; } } /* Hide Sale badge & default zoom icon */ body.single-product .onsale, body.single-product .woocommerce-product-gallery__trigger, body.single-product .wovallo-product-gallery .woocommerce-product-gallery__trigger { display: none !important; } /* Custom preview / fullscreen icon */ .wovallo-gallery-preview-btn { position: absolute; top: 1rem; right: 1rem; z-index: 10; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(6px); border: 1px solid rgba(162, 192, 206, 0.2); border-radius: 0.75rem; cursor: pointer; transition: background 0.2s ease, box-shadow 0.2s ease; color: #3a4750; } @media (hover: hover) and (pointer: fine) { .wovallo-gallery-preview-btn:hover { background: #ffffff; box-shadow: 0 2px 12px rgba(162, 192, 206, 0.25); } } .wovallo-gallery-preview-btn svg { width: 1.25rem; height: 1.25rem; } /* Click-to-toggle magnify on main product image Custom branded magnifying-glass cursors (desktop only). Hotspot is centered on the lens (14,14) of a 36×36 SVG. */ body.single-product .wovallo-magnify-ready, body.single-product .wovallo-magnify-ready figure, body.single-product .wovallo-magnify-ready .woocommerce-product-gallery__image, body.single-product .wovallo-magnify-ready img { cursor: url("data:image/svg+xml;utf8,") 14 14, zoom-in; } body.single-product .wovallo-magnify-ready.is-magnifying, body.single-product .wovallo-magnify-ready.is-magnifying figure, body.single-product .wovallo-magnify-ready.is-magnifying .woocommerce-product-gallery__image, body.single-product .wovallo-magnify-ready.is-magnifying img { cursor: url("data:image/svg+xml;utf8,") 14 14, zoom-out; } /* Kill any leftover zoomjs overlay if WooCommerce still manages to enqueue it */ body.single-product .woocommerce-product-gallery img.zoomImg { display: none !important; pointer-events: none !important; } body.single-product .woocommerce-product-gallery .zoomContainer { display: none !important; pointer-events: none !important; } /* Keep the top-right preview button on its own pointer cursor */ body.single-product .wovallo-magnify-ready .wovallo-gallery-preview-btn, body.single-product .wovallo-magnify-ready .wovallo-gallery-preview-btn * { cursor: pointer; } /* Respect reduced motion: skip the zoom transition */ @media (prefers-reduced-motion: reduce) { body.single-product .wovallo-magnify-ready img { transition: none !important; } } /* Review image thumbnails: fixed height, width follows native aspect ratio */ .wovallo-review-image { display: inline-block; height: 72px; line-height: 0; } @media (min-width: 768px) { .wovallo-review-image { height: 80px; } } .wovallo-review-image img { height: 100%; width: auto; display: block; object-fit: cover; } .wovallo-review-image:hover { transform: scale(1.04); } .wovallo-review-image, .wovallo-review-image img { cursor: url("data:image/svg+xml;utf8,") 10 10, zoom-in; } /* Fullscreen lightbox overlay */ .wovallo-lightbox-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .wovallo-lightbox-overlay.is-active { opacity: 1; visibility: visible; } .wovallo-lightbox-overlay img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 1rem; } .wovallo-lightbox-overlay, .wovallo-lightbox-overlay *, .wovallo-lightbox-overlay .wovallo-lightbox-content, .wovallo-lightbox-overlay .wovallo-lightbox-content img { cursor: default !important; } .wovallo-lightbox-overlay .wovallo-lightbox-close, .wovallo-lightbox-overlay .wovallo-lightbox-nav { cursor: pointer !important; } /* While lightbox is active, neutralize the branded cursor on thumbs under the overlay */ body:has(.wovallo-lightbox-overlay.is-active) .wovallo-review-image, body:has(.wovallo-lightbox-overlay.is-active) .wovallo-review-image img { cursor: default !important; } .wovallo-lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.15); border: none; border-radius: 50%; color: #fff; font-size: 1.5rem; cursor: pointer; transition: background 0.2s ease; } @media (hover: hover) and (pointer: fine) { .wovallo-lightbox-close:hover { background: rgba(255, 255, 255, 0.3); } } .wovallo-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.15); border: none; border-radius: 50%; color: #fff; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; z-index: 1; } .wovallo-lightbox-nav svg { width: 1.5rem; height: 1.5rem; } /* Hover only on devices with a real pointer — on touch screens an unguarded :hover makes the first tap apply hover instead of firing the click, forcing a double-tap to navigate. */ @media (hover: hover) and (pointer: fine) { .wovallo-lightbox-nav:hover { background: rgba(255, 255, 255, 0.3); } } .wovallo-lightbox-nav:disabled { opacity: 0.3; cursor: default; background: rgba(255, 255, 255, 0.15); } .wovallo-lightbox-prev { left: 1.5rem; } .wovallo-lightbox-next { right: 1.5rem; } /* Desktop: nav buttons float left/right of image */ .wovallo-lightbox-content { display: contents; } .wovallo-lightbox-nav-row { display: contents; } @media (max-width: 600px) { /* Overlay stacks image + nav row vertically */ .wovallo-lightbox-overlay.is-active { flex-direction: column; /* Bottom padding keeps the picture clear of the pinned nav row. */ padding: 4rem 1rem 6.5rem; } .wovallo-lightbox-content { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } .wovallo-lightbox-overlay img { /* Sized by its own aspect ratio in both orientations, so the rounded corners hug the picture with no letterbox bands to swallow taps. The nav row is pinned to the overlay instead of stacked under the image, so it can't jump when the full-size image loads — that shift used to eat the first tap. */ width: auto; height: auto; max-width: 100%; max-height: 72vh; object-fit: contain; } .wovallo-lightbox-nav-row { position: absolute; left: 0; right: 0; bottom: 2rem; display: flex; flex-direction: row; gap: 0.75rem; justify-content: center; } .wovallo-lightbox-nav { position: static; transform: none; width: 2.75rem; height: 2.75rem; } } /* Focus styles — match rest of theme: no visible focus outline on click */ body.single-product a:focus, body.single-product a:focus-visible, body.single-product button:focus, body.single-product button:focus-visible { outline: none !important; box-shadow: none !important; } /* ----- Breadcrumbs ----- */ body.single-product .wovallo-product-breadcrumbs { font-size: 0.875rem; color: rgba(58, 71, 80, 0.78); } body.single-product .wovallo-product-breadcrumbs a { color: rgba(58, 71, 80, 0.78); text-decoration: none; transition: color 0.2s ease; } body.single-product .wovallo-product-breadcrumbs a:hover { color: #ff9d7e; } body.single-product .wovallo-product-breadcrumbs .woocommerce-breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: rgba(58, 71, 80, 0.78); margin: 0; padding: 0; } /* ----- Product Gallery ----- */ body.single-product .wovallo-product-gallery-col { position: relative; } /* Gallery wrapper — no card, clean and open */ body.single-product .wovallo-product-gallery .woocommerce-product-gallery, body.single-product .wovallo-product-gallery .wp-block-woocommerce-product-image-gallery { position: relative; background: transparent; border: none; box-shadow: none; overflow: visible; } /* Main image — soft rounding, subtle shadow */ body.single-product .wovallo-product-gallery .woocommerce-product-gallery__image, body.single-product .wovallo-product-gallery .flex-viewport { border-radius: 1.1rem; overflow: hidden; background: #ffffff; box-shadow: 0 18px 50px rgba(58, 71, 80, 0.08); } body.single-product .wovallo-product-gallery .flex-viewport { width: 100%; aspect-ratio: 4 / 5; height: auto !important; max-height: min(44rem, calc(100vh - 8rem)); background: #ffffff; border: 1px solid rgba(162, 192, 206, 0.18); } body.single-product .wovallo-product-gallery .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child:last-child { width: 100%; aspect-ratio: 4 / 5; background: #ffffff; border: 1px solid rgba(162, 192, 206, 0.18); } body.single-product .wovallo-product-gallery .flex-viewport .woocommerce-product-gallery__image { height: 100%; box-shadow: none; } body.single-product .wovallo-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper, body.single-product .wovallo-product-gallery .flex-viewport .woocommerce-product-gallery__image > a { height: 100%; } body.single-product .wovallo-product-gallery img { border-radius: 1.1rem; object-fit: cover; object-position: center; width: 100% !important; height: 100% !important; display: block; } body.single-product .wovallo-product-gallery .woocommerce-product-gallery__image > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #ffffff; } /* Thumbnail strip — classic + block gallery */ body.single-product .wovallo-product-gallery .flex-control-thumbs, body.single-product .wovallo-product-gallery .woocommerce-product-gallery ol, body.single-product .wc-block-woocommerce-product-gallery-thumbnails, body.single-product .wp-block-woocommerce-product-gallery-thumbnails, body.single-product [class*="product-gallery-thumbnails"] { display: flex !important; gap: 0.625rem !important; margin-top: 1rem !important; padding: 0.25rem 0 !important; list-style: none; overflow-x: auto !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; } /* Snap thumbnails into place on touch swipes only — on desktop the snap would fight the arrows' native smooth scrolling. */ @media (hover: none), (pointer: coarse) { body.single-product .wovallo-product-gallery .flex-control-thumbs, body.single-product [class*="product-gallery-thumbnails"] { scroll-snap-type: x proximity; } } body.single-product .wovallo-product-gallery .flex-control-thumbs::-webkit-scrollbar, body.single-product [class*="product-gallery-thumbnails"]::-webkit-scrollbar { display: none; } /* Thumbnail items — larger, rounded, clean */ body.single-product .wovallo-product-gallery .flex-control-thumbs li, body.single-product .wovallo-product-gallery .woocommerce-product-gallery ol li, body.single-product [class*="product-gallery-thumbnails"] > div, body.single-product [class*="product-gallery-thumbnails"] > button { flex: 0 0 5.5rem !important; width: 5.5rem !important; height: 5.5rem !important; border-radius: 0.875rem !important; overflow: hidden; border: 2px solid transparent; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; cursor: pointer; background: #fff; scroll-snap-align: start; box-shadow: 0 1px 6px rgba(162, 192, 206, 0.1); } /* Active thumbnail — always reflects the currently shown slide */ body.single-product .wovallo-product-gallery .flex-control-thumbs li.flex-active-slide, body.single-product [class*="product-gallery-thumbnails"] > div.is-active, body.single-product [class*="product-gallery-thumbnails"] > button.is-active, body.single-product [class*="product-gallery-thumbnails"] [aria-current="true"] { border-color: #a2c0ce; box-shadow: 0 3px 12px rgba(162, 192, 206, 0.22); transform: translateY(-1px); } /* Hover lift — only on devices with a real pointer, so tapping a thumbnail on mobile doesn't leave a stuck blue border */ @media (hover: hover) and (pointer: fine) { body.single-product .wovallo-product-gallery .flex-control-thumbs li:hover, body.single-product .wovallo-product-gallery .woocommerce-product-gallery ol li:hover, body.single-product [class*="product-gallery-thumbnails"] > div:hover, body.single-product [class*="product-gallery-thumbnails"] > button:hover { border-color: #a2c0ce; box-shadow: 0 3px 12px rgba(162, 192, 206, 0.22); transform: translateY(-1px); } } body.single-product .wovallo-product-gallery .flex-control-thumbs img, body.single-product [class*="product-gallery-thumbnails"] img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0.625rem; display: block; } /* WooCommerce block gallery image rounding */ body.single-product .wc-block-woocommerce-product-image-gallery img, body.single-product .wp-block-woocommerce-product-image-gallery img { border-radius: 1.1rem; } /* Mobile: swipe support */ @media (max-width: 767px) { body.single-product .wovallo-product-gallery .flex-viewport, body.single-product .wovallo-product-gallery .woocommerce-product-gallery__wrapper { touch-action: pan-y pinch-zoom; -webkit-overflow-scrolling: touch; cursor: grab; } /* Slightly smaller thumbs on mobile for better fit */ body.single-product .wovallo-product-gallery .flex-control-thumbs li, body.single-product .wovallo-product-gallery .woocommerce-product-gallery ol li { flex: 0 0 4.5rem !important; width: 4.5rem !important; height: 4.5rem !important; } } /* ----- Thumbnail strip: desktop scroll navigation ----- The strip hides its scrollbar, so when it overflows we hint at the hidden thumbnails with soft edge fades, and reveal small frosted arrow buttons when the pointer hovers the strip. */ body.single-product .wovallo-thumb-strip-wrap { position: relative; margin-top: 1rem; } /* The strip's own top margin moves to the wrapper so the arrows and fades center on the thumbnails, not on margin space. */ body.single-product .wovallo-thumb-strip-wrap .flex-control-thumbs, body.single-product .wovallo-thumb-strip-wrap [class*="product-gallery-thumbnails"] { margin-top: 0 !important; } /* Soft edge fades — shown per side while more content hides there */ body.single-product .wovallo-thumb-strip-wrap::before, body.single-product .wovallo-thumb-strip-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2.5rem; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } body.single-product .wovallo-thumb-strip-wrap::before { left: 0; background: linear-gradient(to right, #faf9f6 12%, rgba(250, 249, 246, 0)); } body.single-product .wovallo-thumb-strip-wrap::after { right: 0; background: linear-gradient(to left, #faf9f6 12%, rgba(250, 249, 246, 0)); } body.single-product .wovallo-thumb-strip-wrap.can-scroll-left::before, body.single-product .wovallo-thumb-strip-wrap.can-scroll-right::after { opacity: 1; } /* Arrow buttons — frosted, borderless, hidden until the strip is hovered */ body.single-product .wovallo-thumb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: none; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #3a4750; box-shadow: 0 2px 8px rgba(58, 71, 80, 0.14); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.single-product .wovallo-thumb-nav--prev { left: 0.375rem; } body.single-product .wovallo-thumb-nav--next { right: 0.375rem; } /* Arrows exist only on real pointers, and surface on hover of the strip */ @media (hover: hover) and (pointer: fine) { body.single-product .wovallo-thumb-strip-wrap.has-overflow .wovallo-thumb-nav { display: flex; } body.single-product .wovallo-thumb-strip-wrap.has-overflow:hover .wovallo-thumb-nav:not(.is-hidden), body.single-product .wovallo-thumb-strip-wrap.has-overflow:focus-within .wovallo-thumb-nav:not(.is-hidden) { opacity: 1; pointer-events: auto; } body.single-product .wovallo-thumb-nav:hover { background: #ffffff; color: #ff9d7e; box-shadow: 0 4px 14px rgba(58, 71, 80, 0.2); transform: translateY(-50%) scale(1.08); } body.single-product .wovallo-thumb-nav:active { transform: translateY(-50%) scale(0.96); } } /* ----- Product Title ----- */ body.single-product .wovallo-product-title { font-size: 1.875rem !important; font-weight: 600 !important; color: #3a4750 !important; line-height: 1.2 !important; margin-bottom: 1rem !important; letter-spacing: -0.025em !important; } @media (min-width: 640px) { body.single-product .wovallo-product-title { font-size: 2.25rem !important; } } @media (min-width: 768px) { body.single-product .wovallo-product-title { font-size: 3rem !important; } } /* ----- Product Rating ----- */ body.single-product .wovallo-product-rating { margin-bottom: 0.75rem !important; } body.single-product .wovallo-product-rating .wc-block-components-product-rating__stars, body.single-product .wovallo-product-rating .star-rating { color: #ff9d7e !important; font-size: 1.25rem; } body.single-product .wovallo-product-rating a { color: rgba(58, 71, 80, 0.78); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 157, 126, 0.3); transition: color 0.2s ease; font-size: 0.875rem; } body.single-product .wovallo-product-rating a:hover { color: #ff9d7e; } /* ----- Product Price ----- */ body.single-product .wovallo-product-price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem; margin-bottom: 1.5rem; } body.single-product .wovallo-product-price-row .wovallo-product-price { margin: 0 !important; } body.single-product .wovallo-product-price { margin-bottom: 1.5rem !important; } body.single-product .wovallo-product-price .price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; margin: 0; color: #3a4750; line-height: 1.08; } /* Sale savings badge */ body.single-product .wovallo-sale-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: 9999px; background-color: rgba(255, 157, 126, 0.15); color: #ff9d7e; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; white-space: nowrap; transition: background-color 200ms ease, transform 200ms ease; } /* JS hides the badge on a variation that is not itself discounted — the display above would otherwise win over [hidden]'s UA rule. */ body.single-product .wovallo-sale-badge[hidden] { display: none; } @media (min-width: 640px) { body.single-product .wovallo-sale-badge { font-size: 0.8125rem; padding: 0.5625rem 1.125rem; } } body.single-product .wovallo-product-price .woocommerce-Price-amount, body.single-product .wovallo-product-price .wc-block-components-product-price__value { font-size: 1.875rem !important; font-weight: 600 !important; color: #3a4750; } @media (min-width: 640px) { body.single-product .wovallo-product-price .woocommerce-Price-amount, body.single-product .wovallo-product-price .wc-block-components-product-price__value { font-size: 2.25rem !important; } } body.single-product .wovallo-product-price del { text-decoration: none; } body.single-product .wovallo-product-price del .woocommerce-Price-amount, body.single-product .wovallo-product-price del .wc-block-components-product-price__value { font-size: 1.25rem !important; font-weight: 400 !important; color: rgba(58, 71, 80, 0.4) !important; text-decoration: line-through; } @media (min-width: 640px) { body.single-product .wovallo-product-price del .woocommerce-Price-amount, body.single-product .wovallo-product-price del .wc-block-components-product-price__value { font-size: 1.5rem !important; } } body.single-product .wovallo-product-price ins { text-decoration: none; background: transparent; } body.single-product .wovallo-product-price ins .woocommerce-Price-amount, body.single-product .wovallo-product-price ins .wc-block-components-product-price__value { color: #ff9d7e !important; font-weight: 700 !important; } /* ----- Short Description ----- */ body.single-product .wovallo-product-excerpt > p { margin: 0 0 0.9rem; } body.single-product .wovallo-product-excerpt > p:last-child { margin-bottom: 0; } /* ----- Stock Status Badge ----- */ body.single-product .wovallo-stock-badge { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.5rem 1rem 0.5rem 0.85rem; margin-bottom: 1.75rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; background: rgba(162, 192, 206, 0.12); color: #3a4750; border: 1px solid rgba(162, 192, 206, 0.3); transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } body.single-product .wovallo-stock-badge .wovallo-stock-dot { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 0.75rem; height: 0.75rem; flex-shrink: 0; } body.single-product .wovallo-stock-badge .wovallo-stock-dot-core { position: relative; z-index: 1; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; } body.single-product .wovallo-stock-badge .wovallo-stock-dot::before, body.single-product .wovallo-stock-badge .wovallo-stock-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; opacity: 0.55; transform: scale(1); } /* In stock — calm brand-blue pulse */ body.single-product .wovallo-stock-in-stock { background: rgba(162, 192, 206, 0.15); border-color: rgba(162, 192, 206, 0.45); color: #3a4750; } body.single-product .wovallo-stock-in-stock .wovallo-stock-dot { color: #6fa78f; /* calm green-blue, harmonises with brand-blue */ } body.single-product .wovallo-stock-in-stock .wovallo-stock-dot::before { animation: wovalloStockPulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; } body.single-product .wovallo-stock-in-stock .wovallo-stock-dot::after { animation: wovalloStockPulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; animation-delay: 1.2s; } /* Low stock — urgent brand-orange pulse */ body.single-product .wovallo-stock-low-stock { background: rgba(255, 157, 126, 0.12); border-color: rgba(255, 157, 126, 0.5); color: #c25a3a; } body.single-product .wovallo-stock-low-stock .wovallo-stock-dot { color: #ff9d7e; } body.single-product .wovallo-stock-low-stock .wovallo-stock-dot::before { animation: wovalloStockPulse 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; } body.single-product .wovallo-stock-low-stock .wovallo-stock-dot::after { animation: wovalloStockPulse 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; animation-delay: 0.7s; } body.single-product .wovallo-stock-low-stock .wovallo-stock-dot-core { animation: wovalloStockGlow 1.4s ease-in-out infinite; } /* Backorder — soft orange, slow pulse */ body.single-product .wovallo-stock-backorder { background: rgba(255, 157, 126, 0.08); border-color: rgba(255, 157, 126, 0.35); color: #3a4750; } body.single-product .wovallo-stock-backorder .wovallo-stock-dot { color: #ff9d7e; } body.single-product .wovallo-stock-backorder .wovallo-stock-dot::before { animation: wovalloStockPulse 3s ease-out infinite; } /* Out of stock — muted, no pulse */ body.single-product .wovallo-stock-out-of-stock { background: rgba(58, 71, 80, 0.06); border-color: rgba(58, 71, 80, 0.18); color: rgba(58, 71, 80, 0.55); } body.single-product .wovallo-stock-out-of-stock .wovallo-stock-dot { color: rgba(58, 71, 80, 0.4); } body.single-product .wovallo-stock-out-of-stock .wovallo-stock-dot::before, body.single-product .wovallo-stock-out-of-stock .wovallo-stock-dot::after { display: none; } @keyframes wovalloStockPulse { 0% { transform: scale(1); opacity: 0.55; } 80% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } @keyframes wovalloStockGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 157, 126, 0.6); } 50% { box-shadow: 0 0 0 4px rgba(255, 157, 126, 0); } } @media (prefers-reduced-motion: reduce) { body.single-product .wovallo-stock-badge .wovallo-stock-dot::before, body.single-product .wovallo-stock-badge .wovallo-stock-dot::after, body.single-product .wovallo-stock-badge .wovallo-stock-dot-core { animation: none !important; } } /* ----- Product Purchase Panel ----- */ body.single-product .wovallo-product-add-to-cart { margin-bottom: 0 !important; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-form, body.single-product .wovallo-product-add-to-cart form.cart { display: grid; gap: 0.95rem; margin: 0; min-width: 0; } body.single-product .wovallo-product-add-to-cart form.cart::before, body.single-product .wovallo-product-add-to-cart form.cart::after { content: none; } body.single-product .wovallo-product-add-to-cart .variations_form, body.single-product .wovallo-product-add-to-cart .wovallo-purchase-form { width: 100%; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-options, body.single-product .wovallo-product-add-to-cart .variations { display: grid; gap: 0.95rem; width: 100%; margin: 0; border: 0; border-collapse: collapse; } body.single-product .wovallo-product-add-to-cart .variations tbody, body.single-product .wovallo-product-add-to-cart .wovallo-purchase-option { display: grid; gap: 0.55rem; } body.single-product .wovallo-product-add-to-cart .variations tr, body.single-product .wovallo-product-add-to-cart .variations th, body.single-product .wovallo-product-add-to-cart .variations td { display: block; width: 100%; padding: 0; border: 0; text-align: left; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-option-label, body.single-product .wovallo-product-add-to-cart .variations td.label label { display: block; margin: 0; color: rgba(58, 71, 80, 0.5); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.25; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-option-control, body.single-product .wovallo-product-add-to-cart .variations td.value { display: grid; gap: 0.52rem; position: relative; z-index: 5; } body.single-product .wovallo-product-add-to-cart .wovallo-native-variation-select { display: none !important; width: 1px !important; max-width: 1px !important; height: 1px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; clip-path: inset(50%) !important; overflow: hidden !important; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-option-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 0.75rem; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-option-dot { width: 0.1875rem; height: 0.1875rem; border-radius: 999px; background: rgba(162, 192, 206, 0.8); transform: translateY(-0.1875rem); } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-option-selected { color: rgba(58, 71, 80, 0.62); font-size: 0.875rem; line-height: 1.2; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-option-selected:empty, body.single-product .wovallo-product-add-to-cart .wovallo-purchase-option-head:has(.wovallo-purchase-option-selected:empty) .wovallo-purchase-option-dot { display: none; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-swatch { display: inline-grid; place-items: center; padding: 0.6875rem 1.125rem; border: 1px solid rgba(58, 71, 80, 0.16); border-radius: 9999px; background: transparent; color: #3a4750; font: inherit; font-size: 0.875rem; font-weight: 450; line-height: 1.2; cursor: pointer; transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, font-weight 0.25s ease; } /* A hidden bold twin stacked in the same grid cell reserves the selected-state width, so switching to font-weight 600 never nudges the row. */ body.single-product .wovallo-product-add-to-cart .wovallo-purchase-swatch-label, body.single-product .wovallo-product-add-to-cart .wovallo-purchase-swatch::after { grid-area: 1 / 1; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-swatch::after { content: attr(data-label) / ""; font-weight: 600; visibility: hidden; pointer-events: none; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-swatch:hover { border-color: rgba(58, 71, 80, 0.45); } /* !important beats the blanket "button:focus { box-shadow: none !important }" reset above — a radiogroup is keyboard-driven, so it needs a real focus ring. */ body.single-product .wovallo-product-add-to-cart .wovallo-purchase-swatch:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(162, 192, 206, 0.35) !important; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-swatch.is-selected { border-color: #3a4750; background: rgba(162, 192, 206, 0.12); font-weight: 600; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-swatch.is-unavailable, body.single-product .wovallo-product-add-to-cart .wovallo-purchase-swatch.is-unavailable:hover { border-color: rgba(58, 71, 80, 0.1); background: transparent; color: rgba(58, 71, 80, 0.35); font-weight: 450; text-decoration: line-through; cursor: not-allowed; } /* Struck through because it clashes with another attribute, not because it is sold out — clicking it clears the clash, so keep it inviting. */ body.single-product .wovallo-product-add-to-cart .wovallo-purchase-swatch.is-conflict { cursor: pointer; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-swatch.is-conflict:hover { border-color: rgba(58, 71, 80, 0.3); color: rgba(58, 71, 80, 0.55); } @media (max-width: 767px) { body.single-product .wovallo-product-add-to-cart .wovallo-purchase-swatch { min-height: 2.75rem; } } body.single-product .wovallo-product-add-to-cart .single_variation_wrap { display: grid; gap: 0.8rem; width: 100%; min-width: 0; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-summary { margin-top: 0.1rem; } body.single-product .wovallo-product-add-to-cart .woocommerce-variation { display: flex; flex-wrap: wrap; align-items: center; gap: 0.52rem 0.7rem; min-height: 0; } body.single-product .wovallo-product-add-to-cart .woocommerce-variation:empty { display: none; } /* The variation summary frequently renders empty placeholder rows: this product has no per-variation description, and its price / stock already appear above the form. Hide the empty rows and collapse the wrapper so the quantity stepper sits directly below the option selectors with no dead gap. */ body.single-product .wovallo-product-add-to-cart .woocommerce-variation-description:empty, body.single-product .wovallo-product-add-to-cart .woocommerce-variation-price:empty, body.single-product .wovallo-product-add-to-cart .woocommerce-variation-availability:empty { display: none; } body.single-product .wovallo-product-add-to-cart .woocommerce-variation:not(:has(> *:not(:empty))) { display: none; } /* The price block under the title carries the variation price once JS lifts it there (wovallo-price-hoisted). The class is set from JS on purpose: if the script never runs, this row stays as the only place the exact price appears. */ body.single-product .wovallo-product-add-to-cart .wovallo-price-hoisted .woocommerce-variation-price { display: none; } body.single-product .wovallo-product-add-to-cart .woocommerce-variation-price { color: #3a4750; font-size: 1.15rem; font-weight: 650; min-width: fit-content; } body.single-product .wovallo-product-add-to-cart .woocommerce-variation-price .price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; margin: 0; } body.single-product .wovallo-product-add-to-cart .woocommerce-variation-price del { color: rgba(58, 71, 80, 0.42); font-size: 0.92rem; font-weight: 500; opacity: 1; } body.single-product .wovallo-product-add-to-cart .woocommerce-variation-price ins { color: #ff9d7e; font-weight: 700; background: transparent; text-decoration: none; } body.single-product .wovallo-product-add-to-cart .woocommerce-variation-availability .stock { display: inline-flex; align-items: center; width: fit-content; margin: 0; border-radius: 999px; padding: 0.42rem 0.72rem; background: rgba(162, 192, 206, 0.14); color: #3a4750; font-size: 0.86rem; font-weight: 600; } body.single-product .wovallo-product-add-to-cart .woocommerce-variation-availability .out-of-stock { background: rgba(255, 157, 126, 0.14); color: #9a4e38; } body.single-product .wovallo-product-add-to-cart .woocommerce-variation-description { flex-basis: 100%; color: rgba(58, 71, 80, 0.78); font-size: 0.94rem; line-height: 1.55; margin: 0; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-actions, body.single-product .wovallo-product-add-to-cart .woocommerce-variation-add-to-cart { display: grid; gap: 0.72rem; grid-template-columns: minmax(8.75rem, 0.38fr) minmax(0, 1fr); align-items: stretch; min-width: 0; width: 100%; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-quantity, body.single-product .wovallo-product-add-to-cart .woocommerce-variation-add-to-cart .quantity { grid-column: 1; min-width: 0; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-actions .wovallo-product-btn-wrap, body.single-product .wovallo-product-add-to-cart .woocommerce-variation-add-to-cart .wovallo-product-btn-wrap { grid-column: 2; } /* Quantity stepper — standalone row with −/+ buttons */ body.single-product .wovallo-product-add-to-cart .quantity { display: inline-flex; align-items: center; justify-content: space-between; align-self: stretch; border: 1.5px solid rgba(58, 71, 80, 0.14); border-radius: 9999px; padding: 0.15rem; background: rgba(255, 255, 255, 0.7); width: 100%; height: 3.4rem; gap: 0; max-width: 100%; } body.single-product .wovallo-product-add-to-cart .quantity input[type="number"] { flex: 1 1 auto; width: 3rem; min-width: 2.4rem; text-align: center; background: transparent; color: #3a4750; font-weight: 600; font-size: 1.05rem; border: none; -moz-appearance: textfield; height: 100%; padding: 0; } body.single-product .wovallo-product-add-to-cart .quantity input[type="number"]::-webkit-outer-spin-button, body.single-product .wovallo-product-add-to-cart .quantity input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Stepper −/+ buttons */ body.single-product .wovallo-qty-btn { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: none; background: rgba(162, 192, 206, 0.12); color: #3a4750; font-size: 1.25rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease; flex-shrink: 0; line-height: 1; padding: 0; user-select: none; } body.single-product .wovallo-qty-btn:hover:not(:disabled) { background: rgba(162, 192, 206, 0.3); color: #3a4750; } body.single-product .wovallo-product-add-to-cart .quantity:focus-within { border-color: rgba(162, 192, 206, 0.7); box-shadow: 0 0 0 4px rgba(162, 192, 206, 0.15); } body.single-product .wovallo-qty-btn:active:not(:disabled) { transform: scale(0.9); } body.single-product .wovallo-qty-btn:disabled { opacity: 0.3; cursor: not-allowed; } /* Add to Cart button */ body.single-product .wovallo-product-add-to-cart .single_add_to_cart_button, body.single-product .wovallo-product-add-to-cart button[type="submit"], body.single-product .wovallo-add-to-cart-btn { display: inline-flex !important; align-items: center; justify-content: center; flex: 1 1 0; width: 100%; min-width: 0; max-width: 100%; background-color: rgba(255, 255, 255, 0.7) !important; color: #3a4750 !important; padding: 0.9rem 1.1rem !important; border-radius: 9999px !important; font-weight: 650 !important; font-size: clamp(0.92rem, 1.7vw, 1rem) !important; border: 1.5px solid rgba(58, 71, 80, 0.18) !important; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, color 0.3s ease !important; text-align: center; min-height: 3.4rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.single-product .wovallo-product-add-to-cart .single_add_to_cart_button:hover:not(:disabled):not(.disabled), body.single-product .wovallo-product-add-to-cart button[type="submit"]:hover:not(:disabled):not(.disabled), body.single-product .wovallo-add-to-cart-btn:hover:not(:disabled):not(.disabled) { background-color: #ffffff !important; border-color: rgba(162, 192, 206, 0.95) !important; box-shadow: 0 10px 24px -12px rgba(58, 71, 80, 0.3) !important; transform: translateY(-2px); } body.single-product .wovallo-product-add-to-cart .single_add_to_cart_button.disabled, body.single-product .wovallo-product-add-to-cart .single_add_to_cart_button:disabled, body.single-product .wovallo-product-add-to-cart button[type="submit"]:disabled, body.single-product .wovallo-add-to-cart-btn:disabled { opacity: 0.52; cursor: not-allowed; box-shadow: none !important; transform: none !important; } body.single-product .wovallo-product-add-to-cart .single_add_to_cart_button:active, body.single-product .wovallo-product-add-to-cart button[type="submit"]:active, body.single-product .wovallo-add-to-cart-btn:active { transform: scale(0.96); } /* Buy Now button — warm primary CTA */ body.single-product .wovallo-buy-now-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; width: 100%; min-width: 0; max-width: 100%; background-image: linear-gradient(135deg, #ffac90 0%, #ff9d7e 55%, #f98a67 100%); color: #ffffff; padding: 0.9rem 1.1rem; border-radius: 9999px; font-weight: 700; font-size: clamp(0.92rem, 1.7vw, 1rem); border: none; cursor: pointer; transition: box-shadow 0.3s ease, transform 0.3s ease, filter 0.3s ease; text-align: center; min-height: 3.4rem; line-height: 1.2; box-shadow: 0 12px 26px -12px rgba(255, 157, 126, 0.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.single-product .wovallo-buy-now-btn:hover:not(:disabled) { filter: brightness(0.98); box-shadow: 0 16px 30px -12px rgba(255, 157, 126, 0.95); transform: translateY(-2px); } body.single-product .wovallo-buy-now-btn:active { transform: scale(0.96); } body.single-product .wovallo-buy-now-btn:disabled { opacity: 0.52; cursor: not-allowed; box-shadow: none; transform: none; } /* Button wrapper */ body.single-product .wovallo-product-btn-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.72rem; width: 100%; min-width: 0; } body.single-product .wovallo-product-wallets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; width: 100%; min-width: 0; margin: 1rem 0 0; padding-top: 1.1rem; border-top: 1px solid rgba(58, 71, 80, 0.1); } body.single-product .wovallo-product-wallets::before { content: "Or check out faster"; grid-column: 1 / -1; margin: -0.25rem 0 0.2rem; text-align: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(58, 71, 80, 0.4); } body.single-product .wovallo-product-wallets[hidden] { display: none !important; } /* Hold the whole express row transparent until every provider (Stripe Express *and* PayPal) has finished rendering, then fade them in together — so the two buttons can't pop in at different times. Cell heights are reserved below, so the row keeps its space while pending and there's no layout shift. */ body.single-product .wovallo-product-wallets { transition: opacity 0.35s ease; } body.single-product .wovallo-product-wallets.wovallo-wallets-pending { opacity: 0; } body.single-product .wovallo-product-wallets.wovallo-wallets-ready { opacity: 1; } body.single-product .wovallo-product-add-to-cart #wc-stripe-payment-request-button-separator, body.single-product .wovallo-product-add-to-cart #wcpay-payment-request-button-separator, body.single-product .wovallo-product-add-to-cart [id*="payment-request-button-separator"], body.single-product .wovallo-product-add-to-cart .wc-stripe-payment-request-button-separator, body.single-product .wovallo-product-add-to-cart .wcpay-payment-request-button-separator, body.single-product .wovallo-product-add-to-cart [class*="payment-request-button-separator"], body.single-product .wovallo-product-add-to-cart .wc-block-components-express-payment__event-buttons-separator { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } body.single-product .wovallo-product-add-to-cart #wc-stripe-payment-request-wrapper, body.single-product .wovallo-product-add-to-cart .wc-stripe-payment-request-wrapper, body.single-product .wovallo-product-add-to-cart .wcpay-payment-request-wrapper, body.single-product .wovallo-product-add-to-cart #wc-stripe-express-checkout-element, body.single-product .wovallo-product-add-to-cart .wc-stripe-express-checkout-element, body.single-product .wovallo-product-add-to-cart .wcpay-express-checkout-wrapper, body.single-product .wovallo-product-add-to-cart .wc-block-components-express-payment, body.single-product .wovallo-product-add-to-cart .wc-block-components-express-payment__event-buttons { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0; margin: 0 !important; padding: 0 !important; } body.single-product .wovallo-product-add-to-cart #wc-stripe-payment-request-wrapper:empty, body.single-product .wovallo-product-add-to-cart .wc-stripe-payment-request-wrapper:empty, body.single-product .wovallo-product-add-to-cart .wcpay-payment-request-wrapper:empty, body.single-product .wovallo-product-add-to-cart #wc-stripe-express-checkout-element:empty, body.single-product .wovallo-product-add-to-cart .wc-stripe-express-checkout-element:empty, body.single-product .wovallo-product-add-to-cart .wcpay-express-checkout-wrapper:empty, body.single-product .wovallo-product-add-to-cart .wc-block-components-express-payment:empty, body.single-product .wovallo-product-add-to-cart .wc-block-components-express-payment__event-buttons:empty { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; overflow: hidden !important; } body.single-product .wovallo-product-add-to-cart wc-order-attribution-inputs, body.single-product .wovallo-product-add-to-cart .ppcp-messages { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } body.single-product .wovallo-product-add-to-cart #paypal-standard-container, body.single-product .wovallo-product-add-to-cart .ppc-button-wrapper, body.single-product .wovallo-product-add-to-cart .ppcp-button-wrapper, body.single-product .wovallo-product-add-to-cart .wc-ppcp-product-payments__container, body.single-product .wovallo-product-add-to-cart .woocommerce_paypal_payments_product_button { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } body.single-product .wovallo-product-wallets #paypal-standard-container, body.single-product .wovallo-product-wallets .ppc-button-wrapper, body.single-product .wovallo-product-wallets .ppcp-button-wrapper, body.single-product .wovallo-product-wallets .wc-ppcp-product-payments__container, body.single-product .wovallo-product-wallets .woocommerce_paypal_payments_product_button { grid-column: 1 / -1; } body.single-product .wovallo-product-add-to-cart .ppc-button-wrapper:has(#ppc-button-ppcp-gateway:empty), body.single-product .wovallo-product-add-to-cart #paypal-standard-container:empty, body.single-product .wovallo-product-add-to-cart .ppcp-button-wrapper:empty, body.single-product .wovallo-product-add-to-cart .wc-ppcp-product-payments__container:empty, body.single-product .wovallo-product-add-to-cart .woocommerce_paypal_payments_product_button:empty { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; overflow: hidden !important; } body.single-product .wovallo-product-add-to-cart #wc-stripe-express-checkout-element > div, body.single-product .wovallo-product-add-to-cart .wc-stripe-express-checkout-element > div, body.single-product .wovallo-product-add-to-cart #ppc-button-ppcp-gateway > div, body.single-product .wovallo-product-add-to-cart #ppc-button-ppcp-gateway iframe, body.single-product .wovallo-product-add-to-cart .ppc-button-wrapper iframe, body.single-product .wovallo-product-add-to-cart .ppcp-button-wrapper iframe { display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; height: 3rem !important; min-height: 3rem !important; } /* Stripe sizes the wallet-button iframe to calc(100% + 8px) with -4px side margins on purpose: the button graphic inside the (cross-origin) iframe has a built-in ~4px horizontal inset, and the negative-margin bleed pulls it back so the button fills its container edge-to-edge — matching the full-width PayPal button below it. Forcing width:100%/margin:0 collapsed that bleed, so the Apple Pay / Google Pay buttons rendered visibly inset on both sides ("hidden a bit" / not aligned with PayPal). Keep the bleed; only pin the height. */ body.single-product .wovallo-product-add-to-cart #wc-stripe-express-checkout-element iframe, body.single-product .wovallo-product-add-to-cart .wc-stripe-express-checkout-element iframe { display: block !important; box-sizing: border-box !important; width: calc(100% + 8px) !important; max-width: none !important; min-width: calc(100% + 8px) !important; /* Full -4px bleed on every side (not just horizontal). Stripe lays its button out for an iframe that is 8px larger than the cell with a -4px margin; giving only horizontal bleed left the button's built-in top inset showing as a thin white strip above the button. The 48px cell (overflow:hidden, centered) clips the extra 8px back off, so the button fills the cell with no gap. */ margin: -4px !important; padding: 0 !important; height: calc(3rem + 8px) !important; min-height: calc(3rem + 8px) !important; border-radius: 0.55rem !important; } /* Clamp the Stripe express container itself to the shared 48px height. Stripe can set an inline min-height on the wallet cells to fit Google Pay's saved-card carousel, and per the CSS spec min-height beats max-height — so clamping only the cells (below) is not enough, the cell stays ~60px. The parent element is not inline-styled with a height, so clamping it here (max-height + clip) caps the whole row at 48px no matter how tall the cells try to be, and centering keeps the button graphic visible. */ body.single-product .wovallo-product-add-to-cart #wc-stripe-express-checkout-element, body.single-product .wovallo-product-add-to-cart .wc-stripe-express-checkout-element { height: 3rem !important; max-height: 3rem !important; overflow: hidden !important; align-items: center !important; justify-content: center !important; } /* Pin every Stripe wallet cell to the shared 48px button height. Stripe sets the button iframe height *inline* (taller than our request when Google Pay shows its saved-card carousel), and inline styles beat our external rule above — so the button rendered taller than the PayPal button. Clamp each wallet cell to 3rem, center its contents and clip the overflow: the button graphic is vertically centered, so the visible button settles at exactly 48px and matches PayPal. */ body.single-product .wovallo-product-add-to-cart #wc-stripe-express-checkout-element > .StripeElement, body.single-product .wovallo-product-add-to-cart .wc-stripe-express-checkout-element > .StripeElement { height: 3rem !important; min-height: 3rem !important; max-height: 3rem !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.single-product .wovallo-product-add-to-cart #wc-stripe-express-checkout-element .__PrivateStripeElement, body.single-product .wovallo-product-add-to-cart .wc-stripe-express-checkout-element .__PrivateStripeElement { margin: 0 !important; width: 100% !important; display: block !important; } /* Same clamp for the PayPal button. PayPal's SDK sizes its button height itself (responsive to the container width, applied inline), so the external height pin can be overridden and PayPal renders taller than the 48px Stripe buttons next to it. Clamp the wrapper to 3rem, center its contents and clip the overflow so the visible PayPal button is exactly 48px and matches Apple Pay / Google Pay. */ body.single-product .wovallo-product-add-to-cart .wovallo-product-wallets .ppc-button-wrapper, body.single-product .wovallo-product-add-to-cart .wovallo-product-wallets #ppc-button-ppcp-gateway, body.single-product .wovallo-product-add-to-cart .wovallo-product-wallets .paypal-buttons, body.single-product .wovallo-product-add-to-cart .wovallo-product-wallets #paypal-standard-container, body.single-product .wovallo-product-add-to-cart .wovallo-product-wallets .ppcp-button-wrapper { height: 3rem !important; min-height: 3rem !important; max-height: 3rem !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } body.single-product .wovallo-product-add-to-cart .wovallo-product-wallets .paypal-buttons > iframe, body.single-product .wovallo-product-add-to-cart .wovallo-product-wallets .ppc-button-wrapper iframe { flex: 0 0 auto !important; } /* Mobile: render the express wallets as compact, centered buttons. At full container width Google Pay shows its busy saved-card carousel (G Pay | card card +), which lives inside Stripe's cross-origin iframe and can't be styled away from the theme. Capping the wallets to a compact width denies Google Pay the room for the carousel, so it falls back to the clean "G Pay" button and all express buttons (Apple Pay / Google Pay / PayPal) look consistent. Desktop keeps its full-width 2-up layout. */ @media (max-width: 767px) { body.single-product .wovallo-product-wallets { max-width: 15rem; margin-left: auto !important; margin-right: auto !important; } } /* Trust panel — three promises on a plain white card under the buy buttons. No tinted fill, no column rules, icons in brand blue: the card is meant to read as a quiet footnote to the purchase block, not compete with it. Wording still mirrors the homepage trust card and the returns page (30 days, unused & boxed). */ .wovallo-product-trust { margin: 0.25rem 0 1.5rem; border: 1px solid rgba(162, 192, 206, 0.15); border-radius: 20px; background: #ffffff; } .wovallo-product-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 20px; } .wovallo-product-trust-item { text-align: center; text-wrap: balance; } .wovallo-product-trust-icon { display: inline-flex; color: #a2c0ce; } .wovallo-product-trust-icon svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; } .wovallo-product-trust-title { margin: 6px 0 2px; font-size: 13px; font-weight: 600; line-height: 1.35; color: #3a4750; } /* Quiet, but not below WCAG AA: on the white card, 0.55 alpha lands around 3.1:1 — these lines carry the shipping and returns qualifiers, so they hold at 0.8 (~5.6:1) instead. */ .wovallo-product-trust-note { margin: 0; font-size: 12px; font-weight: 400; line-height: 1.45; color: rgba(58, 71, 80, 0.8); } /* Narrow right column (~352px at the 1024px breakpoint): close the gap so "No minimum spend" stays on two lines. */ @media (min-width: 768px) and (max-width: 1200px) { .wovallo-product-trust-grid { gap: 8px; padding: 20px 12px; } } @media (max-width: 767px) { .wovallo-product-trust { border-radius: 16px; } .wovallo-product-trust-grid { gap: 8px; padding: 16px 8px; } .wovallo-product-trust-icon svg { width: 20px; height: 20px; } .wovallo-product-trust-title { font-size: 12px; line-height: 1.3; } .wovallo-product-trust-note { font-size: 12px; line-height: 1.4; } } @media (min-width: 640px) { body.single-product .wovallo-product-add-to-cart form.cart .quantity { flex-shrink: 0; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-actions .wovallo-product-btn-wrap, body.single-product .wovallo-product-add-to-cart form.cart .wovallo-product-btn-wrap { width: 100%; } } @media (max-width: 767px) { body.single-product .wovallo-product-add-to-cart .wovallo-purchase-actions, body.single-product .wovallo-product-add-to-cart .woocommerce-variation-add-to-cart, body.single-product .wovallo-product-wallets { grid-template-columns: 1fr !important; align-items: stretch; } body.single-product .wovallo-product-add-to-cart .wovallo-purchase-actions .wovallo-purchase-quantity, body.single-product .wovallo-product-add-to-cart .wovallo-purchase-actions .wovallo-product-btn-wrap, body.single-product .wovallo-product-add-to-cart .woocommerce-variation-add-to-cart .quantity, body.single-product .wovallo-product-add-to-cart .woocommerce-variation-add-to-cart .wovallo-product-btn-wrap { grid-column: 1 / -1 !important; } /* Compact, left-aligned stepper on mobile — a full-width pill reads as oversized and spreads the −/＋ controls awkwardly far apart. */ body.single-product .wovallo-product-add-to-cart .wovallo-purchase-actions .wovallo-purchase-quantity, body.single-product .wovallo-product-add-to-cart .woocommerce-variation-add-to-cart .quantity, body.single-product .wovallo-product-add-to-cart .quantity { width: fit-content; max-width: 100%; justify-self: start; height: 3rem; justify-content: flex-start; gap: 0.2rem; padding: 0.2rem; } body.single-product .wovallo-product-add-to-cart .quantity input[type="number"] { flex: 0 0 auto; width: 2.4rem; min-width: 2.4rem; font-size: 1rem; } body.single-product .wovallo-qty-btn { width: 2.4rem; height: 2.4rem; font-size: 1.2rem; } body.single-product .wovallo-product-add-to-cart .single_add_to_cart_button, body.single-product .wovallo-product-add-to-cart button[type="submit"], body.single-product .wovallo-add-to-cart-btn, body.single-product .wovallo-buy-now-btn { min-width: 0; padding-inline: 0.9rem !important; } } @media (max-width: 479px) { body.single-product .wovallo-product-btn-wrap { grid-template-columns: 1fr !important; } } /* ----- Accordions ----- */ body.single-product .wovallo-accordion-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-in-out; overflow: hidden; } body.single-product .wovallo-accordion-content.is-open { grid-template-rows: 1fr; } body.single-product .wovallo-accordion-inner { min-height: 0; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } body.single-product .wovallo-accordion-content.is-open .wovallo-accordion-inner { opacity: 1; visibility: visible; transition: opacity 0.4s ease 0.1s, visibility 0.4s ease 0.1s; } body.single-product .wovallo-accordion-item.is-open .wovallo-accordion-icon { transform: rotate(180deg); } body.single-product .wovallo-accordion-toggle:focus, body.single-product .wovallo-accordion-toggle:focus-visible, body.single-product .wovallo-accordion-toggle:active { background: transparent !important; outline: none !important; box-shadow: none !important; } body.single-product .wovallo-product-detail-list { display: grid; gap: 0.7rem; margin: 0; padding: 0 0 0 0.18rem; list-style: none; color: rgba(58, 71, 80, 0.78); font-size: 0.94rem; line-height: 1.55; } body.single-product .wovallo-product-detail-list li { display: grid; grid-template-columns: 0.5rem minmax(0, 1fr); column-gap: 0.58rem; align-items: start; } body.single-product .wovallo-product-detail-list li::before { content: ""; width: 0.36rem; height: 0.36rem; margin-top: 0.58em; border-radius: 999px; background: #ff9d7e; box-shadow: 0 0 0 0.14rem rgba(255, 157, 126, 0.14); } body.single-product .wovallo-product-detail-copy { min-width: 0; } body.single-product .wovallo-product-detail-term { color: #3a4750; font-weight: 600; } /* Mobile: tie active (orange) state to is-open only — prevents sticky hover/focus from making a collapsed item look active after a tap. */ @media (max-width: 639px) { body.single-product .wovallo-accordion-toggle, body.single-product .wovallo-accordion-toggle:hover, body.single-product .wovallo-accordion-toggle:focus, body.single-product .wovallo-accordion-toggle:active { color: #3a4750; } body.single-product .wovallo-accordion-item.is-open .wovallo-accordion-toggle { color: #ff9d7e; } } /* ----- Product Tabs (WooCommerce product-details block) ----- */ body.single-product .wovallo-product-tabs { margin: 0 !important; } body.single-product .wovallo-product-tabs .wc-tabs-wrapper, body.single-product .wovallo-product-tabs .woocommerce-tabs { margin: 0; } body.single-product .wovallo-product-tabs .wc-tabs, body.single-product .wovallo-product-tabs .wc-block-components-tab-panel__tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid rgba(162, 192, 206, 0.2); padding: 0; margin: 0 0 2rem 0; list-style: none; } body.single-product .wovallo-product-tabs .wc-tabs li a, body.single-product .wovallo-product-tabs .wc-block-components-tab-panel__tab { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: 9999px 9999px 0 0; border: 1px solid transparent; border-bottom: none; background: transparent; color: rgba(58, 71, 80, 0.78); font-weight: 500; font-size: 0.875rem; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; cursor: pointer; } body.single-product .wovallo-product-tabs .wc-tabs li.active a, body.single-product .wovallo-product-tabs .wc-block-components-tab-panel__tab--active { color: #3a4750; background: rgba(162, 192, 206, 0.08); border-color: rgba(162, 192, 206, 0.2); } body.single-product .wovallo-product-tabs .wc-tabs li a:hover, body.single-product .wovallo-product-tabs .wc-block-components-tab-panel__tab:hover { color: #ff9d7e; } body.single-product .wovallo-product-tabs .woocommerce-Tabs-panel, body.single-product .wovallo-product-tabs .wc-block-components-tab-panel__content { font-size: 0.9375rem; line-height: 1.75; color: rgba(58, 71, 80, 0.75); } /* Reviews in tabs */ body.single-product .wovallo-product-tabs #reviews h2, body.single-product .wovallo-product-tabs .woocommerce-Reviews-title { font-size: 1.5rem; font-weight: 600; color: #3a4750; margin-bottom: 1.5rem; } body.single-product .wovallo-product-tabs .comment-text .star-rating { color: #ff9d7e; } body.single-product .wovallo-product-tabs .comment-reply-title { font-size: 1.25rem; font-weight: 600; color: #3a4750; } body.single-product .wovallo-product-tabs .comment-form input, body.single-product .wovallo-product-tabs .comment-form textarea { border: 2px solid rgba(162, 192, 206, 0.2); border-radius: 0.75rem; padding: 0.75rem 1rem; background: #ffffff; color: #3a4750; transition: border-color 0.2s ease; } body.single-product .wovallo-product-tabs .comment-form input:focus, body.single-product .wovallo-product-tabs .comment-form textarea:focus { border-color: #a2c0ce; outline: none; } body.single-product .wovallo-product-tabs .comment-form .submit { background-color: #a2c0ce !important; color: #ffffff !important; padding: 0.75rem 2rem !important; border-radius: 9999px !important; font-weight: 500 !important; border: none !important; cursor: pointer; transition: background-color 0.3s ease, box-shadow 0.3s ease; } body.single-product .wovallo-product-tabs .comment-form .submit:hover { background-color: #8daebd !important; box-shadow: 0 8px 20px rgba(162, 192, 206, 0.3) !important; } /* ----- Related Products ----- */ body.single-product .wovallo-related-products .products, body.single-product .wovallo-related-products .wp-block-post-template { display: grid !important; grid-template-columns: 1fr !important; gap: 1.5rem !important; list-style: none; padding: 0; margin: 0; } @media (min-width: 640px) { body.single-product .wovallo-related-products .products, body.single-product .wovallo-related-products .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 768px) { body.single-product .wovallo-related-products .products, body.single-product .wovallo-related-products .wp-block-post-template { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } body.single-product .wovallo-related-products .product, body.single-product .wovallo-related-product-card { text-align: left; } body.single-product .wovallo-related-products .product a img, body.single-product .wovallo-related-product-image img { border-radius: 1rem; aspect-ratio: 4/5; object-fit: cover; width: 100%; border: 1px solid rgba(162, 192, 206, 0.1); transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease; } body.single-product .wovallo-related-products .product:hover a img, body.single-product .wovallo-related-product-card:hover .wovallo-related-product-image img { border-color: rgba(162, 192, 206, 0.3); box-shadow: 0 4px 20px rgba(162, 192, 206, 0.12); } body.single-product .wovallo-related-products .product .woocommerce-loop-product__title, body.single-product .wovallo-related-product-title { font-size: 1.125rem !important; font-weight: 500 !important; color: #3a4750 !important; margin: 0.75rem 0 0.25rem 0 !important; transition: color 0.3s ease; } /* Title turns orange only on real pointer devices — guards against sticky :hover on touch, where a tap would otherwise leave the title orange. */ @media (hover: hover) and (pointer: fine) { body.single-product .wovallo-related-products .product:hover .woocommerce-loop-product__title, body.single-product .wovallo-related-product-card:hover .wovallo-related-product-title a { color: #ff9d7e !important; } } body.single-product .wovallo-related-product-title a { color: inherit !important; text-decoration: none; } /* Hide sale badge on related product images */ body.single-product .wovallo-related-product-image .wc-block-components-product-sale-badge, body.single-product .wovallo-related-products .product .onsale, body.single-product .wovallo-related-products .wc-block-components-product-sale-badge { display: none !important; } /* Related product price — brand styled */ body.single-product .wovallo-related-products .product .price, body.single-product .wovallo-related-product-price { font-size: 0.95rem !important; font-weight: 500 !important; color: #3a4750 !important; display: flex !important; align-items: baseline; gap: 0.5rem; margin-top: 0.25rem !important; letter-spacing: 0.01em; } body.single-product .wovallo-related-products .product .price del, body.single-product .wovallo-related-product-price del { color: rgba(58, 71, 80, 0.45) !important; font-weight: 400 !important; font-size: 0.85rem !important; text-decoration: line-through; opacity: 1 !important; order: 2; } body.single-product .wovallo-related-products .product .price ins, body.single-product .wovallo-related-product-price ins { color: #ff9d7e !important; font-weight: 600 !important; background: transparent !important; text-decoration: none !important; order: 1; transition: color 0.3s ease; } body.single-product .wovallo-related-products .product .price del .amount, body.single-product .wovallo-related-product-price del .amount, body.single-product .wovallo-related-products .product .price ins .amount, body.single-product .wovallo-related-product-price ins .amount { color: inherit !important; font-weight: inherit !important; } /* Sale price shifts to brand-text only on real pointer devices — guards against sticky :hover on touch that would leave the price dark grey. */ @media (hover: hover) and (pointer: fine) { body.single-product .wovallo-related-product-card:hover .wovallo-related-product-price ins { color: #3a4750 !important; } } /* Hide the default block-level "Add to Cart" button on related product cards */ body.single-product .wovallo-related-products .product .button, body.single-product .wovallo-related-products .product .add_to_cart_button { display: none !important; } /* ----- Cart icon overlay on related product image ----- */ body.single-product .wovallo-related-product-media { position: relative; } body.single-product .wovallo-related-product-cart { position: absolute; bottom: 0.75rem; right: 0.75rem; z-index: 5; margin: 0 !important; } body.single-product .wovallo-related-products .wovallo-related-product-cart .wp-block-button__link, body.single-product .wovallo-related-products .wovallo-related-product-cart a, body.single-product .wovallo-related-products .wovallo-related-product-cart button { display: flex !important; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; min-width: 0; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 9999px !important; background-color: #ff9d7e !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9'%20cy='21'%20r='1'/%3E%3Ccircle%20cx='20'%20cy='21'%20r='1'/%3E%3Cpath%20d='M1%201h4l2.68%2013.39a2%202%200%200%200%202%201.61h9.72a2%202%200%200%200%202-1.61L23%206H6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat; background-position: center; background-size: 1.2rem; color: transparent !important; font-size: 0 !important; line-height: 0 !important; text-indent: -9999px; white-space: nowrap; overflow: hidden; cursor: pointer; box-shadow: 0 4px 14px rgba(255, 157, 126, 0.4); transition: box-shadow 0.3s ease, background-color 0.3s ease; } body.single-product .wovallo-related-products .wovallo-related-product-cart .wp-block-button__link:hover, body.single-product .wovallo-related-products .wovallo-related-product-cart a:hover, body.single-product .wovallo-related-products .wovallo-related-product-cart button:hover { background-color: #f88a66 !important; box-shadow: 0 6px 18px rgba(255, 157, 126, 0.5); } /* No transform on focus/active — the icon must stay anchored bottom-right */ body.single-product .wovallo-related-products .wovallo-related-product-cart .wp-block-button__link:active, body.single-product .wovallo-related-products .wovallo-related-product-cart a:active, body.single-product .wovallo-related-products .wovallo-related-product-cart button:active, body.single-product .wovallo-related-products .wovallo-related-product-cart .wp-block-button__link:focus, body.single-product .wovallo-related-products .wovallo-related-product-cart button:focus { transform: none !important; outline: none !important; } /* Keep the icon button hidden state consistent during AJAX (loading/added) */ body.single-product .wovallo-related-product-cart .wp-block-button__link.loading { opacity: 0.7; } /* Hide the "View cart" link WooCommerce appends after an AJAX add-to-cart so it doesn't render as a duplicate icon */ body.single-product .wovallo-related-products .wovallo-related-product-cart .added_to_cart, body.single-product .wovallo-related-products .wovallo-related-product-cart a.wc-forward { display: none !important; } /* ----- Variation swatches / selects ----- */ body.single-product .wovallo-product-add-to-cart .variations select { width: 100%; min-height: 3.2rem; border: 2px solid rgba(162, 192, 206, 0.2); border-radius: 0.9rem; padding: 0.72rem 2.6rem 0.72rem 0.95rem; background: #ffffff; color: #3a4750; font-size: 0.96rem; font-weight: 550; line-height: 1.3; transition: border-color 0.2s ease, box-shadow 0.2s ease; cursor: pointer; appearance: auto; } body.single-product .wovallo-product-add-to-cart .variations select:focus { border-color: #a2c0ce; outline: none; box-shadow: 0 0 0 4px rgba(162, 192, 206, 0.18); } body.single-product .wovallo-product-add-to-cart .variations td.label label { display: block; margin: 0; font-weight: 700; color: #3a4750; font-size: clamp(1rem, 1.5vw, 1.08rem); line-height: 1.25; } body.single-product .wovallo-product-add-to-cart .variations select option { color: #3a4750; } body.single-product .wovallo-product-add-to-cart .woocommerce-variation-add-to-cart-disabled { opacity: 1; } body.single-product .wovallo-product-add-to-cart .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button { opacity: 0.52; } /* ----- Responsive fade-in on product page ----- */ /* Ensure shared footer logo is visible on WooCommerce templates */ body.single-product footer img[alt="wovallo"], body.wovallo-products-page footer img[alt="wovallo"], body.wovallo-cart-page footer img[alt="wovallo"], body.wovallo-account-page footer img[alt="wovallo"], body.wovallo-checkout-page footer img[alt="wovallo"] { display: block !important; height: 3.5rem; width: auto; } @media (prefers-reduced-motion: reduce) { body.single-product .fade-in { opacity: 1 !important; transform: none !important; } } /* ========================================================================== Single Product — Pearlight bespoke Details sections Markup: patterns/product-pearlight-details.php, swapped in for one product only by wovallo_replace_product_details_section(). These sections bleed the full viewport width, so they paint their own opaque backgrounds over the gradient .wovallo-product-main carries. Every rule is class-scoped: assets/tailwind.css loads after this file and its preflight would win any bare-element selector. ========================================================================== */ body.single-product .wovallo-pearlight-section { width: 100%; padding: clamp(64px, 7vw, 104px) 0; } /* Mirrors the Tailwind column every other block on this page uses — max-w-7xl px-4 sm:px-6 lg:px-8, i.e. a border-box 1280px with 16/24/32px of gutter — so these sections line up with the gallery, reviews and related grid above and below instead of running 8-32px wider on desktop. */ body.single-product .wovallo-pearlight-inner { box-sizing: border-box; max-width: 1280px; margin-inline: auto; padding-inline: 16px; } @media (min-width: 640px) { body.single-product .wovallo-pearlight-inner { padding-inline: 24px; } } @media (min-width: 1024px) { body.single-product .wovallo-pearlight-inner { padding-inline: 32px; } } body.single-product .wovallo-pearlight-observation, body.single-product .wovallo-pearlight-crafted { background: #ffffff; border-top: 1px solid rgba(162, 192, 206, 0.2); } body.single-product .wovallo-pearlight-object, body.single-product .wovallo-pearlight-ritual { background: #faf9f6; } /* Takes over the spacing the generic Details group used to provide (mt-20 pt-16). */ body.single-product .wovallo-pearlight-observation { margin-top: clamp(72px, 8vw, 112px); } /* ----- Shared headings ----- */ body.single-product .wovallo-pearlight-head { max-width: 760px; margin: 0 0 clamp(40px, 5vw, 64px); } body.single-product .wovallo-pearlight-head-center { max-width: 720px; margin-inline: auto; text-align: center; } body.single-product .wovallo-pearlight-eyebrow { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #ff9d7e; } body.single-product .wovallo-pearlight-title { margin: 0; font-size: clamp(30px, 4.4vw, 52px); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; color: #3a4750; text-wrap: pretty; } body.single-product .wovallo-pearlight-title-soft { color: #a2c0ce; } /* ----- Shared media boxes ----- aspect-ratio (not the intrinsic attributes) is what sizes these, so the art-directed crops stay predictable at every breakpoint. */ body.single-product .wovallo-pearlight-media { margin: 0; overflow: hidden; border-radius: 20px; background: #f3f1ec; aspect-ratio: 4 / 3; } body.single-product .wovallo-pearlight-media img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ----- S1 A Quiet Observation ----- */ body.single-product .wovallo-pearlight-observation-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 72px); align-items: center; } body.single-product .wovallo-pearlight-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* Fills the two rows it spans rather than imposing its own 3:4 box — otherwise it comes up short of the stacked pair beside it and leaves a hole in the mosaic. The source is 3:4, so object-fit only trims the edges. */ body.single-product .wovallo-pearlight-mosaic-tall { grid-row: span 2; aspect-ratio: auto; } body.single-product .wovallo-pearlight-mosaic-wide { grid-column: span 2; aspect-ratio: 16 / 9; } body.single-product .wovallo-pearlight-observation-copy { max-width: 520px; } body.single-product .wovallo-pearlight-lead { margin: 0 0 28px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: #3a4750; } body.single-product .wovallo-pearlight-noise { display: flex; flex-direction: column; gap: 6px; margin: 0 0 32px; padding: 0 0 0 20px; list-style: none; border-left: 2px solid rgba(162, 192, 206, 0.4); font-size: 18px; color: rgba(58, 71, 80, 0.65); } body.single-product .wovallo-pearlight-turn { margin: 0 0 24px; font-size: clamp(19px, 2vw, 22px); font-weight: 500; line-height: 1.5; color: #3a4750; } body.single-product .wovallo-pearlight-moments { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 17px; line-height: 1.6; color: rgba(58, 71, 80, 0.75); } /* ----- S2 The Object ----- */ body.single-product .wovallo-pearlight-object-hero { display: block; margin-bottom: clamp(40px, 4vw, 56px); overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.15); border-radius: 28px; background: #ffffff; aspect-ratio: 21 / 9; } body.single-product .wovallo-pearlight-object-hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; } body.single-product .wovallo-pearlight-object-copy { max-width: 720px; margin: 0 auto clamp(48px, 5vw, 72px); text-align: center; } body.single-product .wovallo-pearlight-object-copy p { margin: 0 0 20px; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.8; color: rgba(58, 71, 80, 0.8); } /* Selector carries the parent and the p so it outweighs the paragraph rule directly above — which is one specificity point higher than the class alone and would otherwise flatten the refrain back to body-copy size. */ body.single-product .wovallo-pearlight-object-copy p.wovallo-pearlight-object-refrain { margin: 0; font-size: clamp(19px, 2vw, 22px); font-weight: 500; line-height: 1.7; color: #3a4750; } body.single-product .wovallo-pearlight-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } body.single-product .wovallo-pearlight-feature { padding: 32px; border: 1px solid rgba(162, 192, 206, 0.15); border-radius: 24px; background: #ffffff; box-shadow: 0 4px 20px rgba(162, 192, 206, 0.08); text-align: center; transition: box-shadow 0.3s ease, transform 0.3s ease; } body.single-product .wovallo-pearlight-feature:hover { box-shadow: 0 10px 32px rgba(162, 192, 206, 0.16); transform: translateY(-3px); } body.single-product .wovallo-pearlight-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; background: rgba(162, 192, 206, 0.16); color: #4e7889; } body.single-product .wovallo-pearlight-feature-icon svg { display: block; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; } body.single-product .wovallo-pearlight-feature h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; color: #3a4750; } body.single-product .wovallo-pearlight-feature p { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(58, 71, 80, 0.7); } /* ----- S3 Crafted With Intention ----- */ body.single-product .wovallo-pearlight-craft-rows { display: flex; flex-direction: column; gap: clamp(48px, 5vw, 88px); } body.single-product .wovallo-pearlight-craft-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.5vw, 64px); align-items: center; } /* Flip every second row with `order` rather than `direction: rtl`, which would also reorder punctuation inside the copy. */ body.single-product .wovallo-pearlight-craft-row:nth-child(even) .wovallo-pearlight-craft-media { order: 2; } body.single-product .wovallo-pearlight-craft-media { border-radius: 24px; } body.single-product .wovallo-pearlight-craft-num { display: block; margin-bottom: 14px; font-size: clamp(40px, 5vw, 64px); font-weight: 600; line-height: 1; color: rgba(162, 192, 206, 0.5); } body.single-product .wovallo-pearlight-craft-copy h3 { margin: 0 0 16px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: #3a4750; } body.single-product .wovallo-pearlight-craft-copy p { max-width: 46ch; margin: 0 0 10px; font-size: 17px; line-height: 1.8; color: rgba(58, 71, 80, 0.78); } body.single-product .wovallo-pearlight-craft-copy p:last-child { margin-bottom: 0; } /* ----- S4 How It Works ----- */ body.single-product .wovallo-pearlight-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); align-items: start; } body.single-product .wovallo-pearlight-step-media { margin-bottom: 20px; border-radius: 24px; aspect-ratio: 1 / 1; } body.single-product .wovallo-pearlight-step-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #ff9d7e; } body.single-product .wovallo-pearlight-step-copy p { margin: 0; font-size: 19px; font-weight: 500; color: #3a4750; } /* Connector between steps: only meaningful once the row becomes a column. display:none also removes it from the grid, so the three columns stay even. */ body.single-product .wovallo-pearlight-step-link { display: none; } body.single-product .wovallo-pearlight-step-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; } body.single-product .wovallo-pearlight-outro { max-width: 560px; margin: clamp(48px, 5vw, 72px) auto 0; text-align: center; } body.single-product .wovallo-pearlight-outro-quiet { margin: 0 0 18px; font-size: 17px; line-height: 1.9; color: rgba(58, 71, 80, 0.7); } body.single-product .wovallo-pearlight-outro-close { margin: 0; font-size: clamp(19px, 2vw, 22px); font-weight: 500; line-height: 1.6; color: #3a4750; } /* Two-column layouts collapse before the type scale does: at ~900px each column is already too narrow for a 46ch paragraph beside a 4:3 photo. */ @media (max-width: 900px) { body.single-product .wovallo-pearlight-observation-body, body.single-product .wovallo-pearlight-craft-row { grid-template-columns: 1fr; } /* Single column — the flip would push the photo below its own copy. */ body.single-product .wovallo-pearlight-craft-row:nth-child(even) .wovallo-pearlight-craft-media { order: 0; } body.single-product .wovallo-pearlight-observation-copy { max-width: none; } /* Tablet only — the three cards are still side by side here, so trade card padding for text width before they turn into rows at 767px. */ body.single-product .wovallo-pearlight-feature { padding: 24px 16px; } } @media (max-width: 767px) { body.single-product .wovallo-pearlight-section { padding: 44px 0; } body.single-product .wovallo-pearlight-observation { margin-top: 40px; } body.single-product .wovallo-pearlight-head { margin-bottom: 28px; } body.single-product .wovallo-pearlight-eyebrow { margin-bottom: 12px; font-size: 11px; } body.single-product .wovallo-pearlight-title { font-size: 29px; line-height: 1.15; } body.single-product .wovallo-pearlight-media { border-radius: 14px; } body.single-product .wovallo-pearlight-mosaic { gap: 10px; } body.single-product .wovallo-pearlight-lead { margin-bottom: 22px; font-size: 22px; } body.single-product .wovallo-pearlight-noise { margin-bottom: 28px; padding-left: 16px; font-size: 16px; } body.single-product .wovallo-pearlight-turn { margin-bottom: 18px; font-size: 19px; } body.single-product .wovallo-pearlight-moments { gap: 8px; font-size: 16px; } /* The mobile crop is 4:3 — without this the attributes would hold the wide desktop ratio and letterbox the phone art direction. */ body.single-product .wovallo-pearlight-object-hero { margin-bottom: 26px; border-radius: 20px; aspect-ratio: 4 / 3; } body.single-product .wovallo-pearlight-object-copy { margin-bottom: 30px; text-align: left; } body.single-product .wovallo-pearlight-object-copy p { margin-bottom: 16px; font-size: 16px; } body.single-product .wovallo-pearlight-object-copy p.wovallo-pearlight-object-refrain { font-size: 19px; line-height: 1.65; } /* Cards become icon-left rows: three stacked centred cards read as filler, the row form keeps them scannable. */ body.single-product .wovallo-pearlight-features { grid-template-columns: 1fr; gap: 12px; } body.single-product .wovallo-pearlight-feature { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 18px; box-shadow: none; text-align: left; } body.single-product .wovallo-pearlight-feature-icon { flex: 0 0 44px; width: 44px; height: 44px; margin-bottom: 0; } body.single-product .wovallo-pearlight-feature-icon svg { width: 22px; height: 22px; } body.single-product .wovallo-pearlight-feature h3 { margin: 2px 0 6px; font-size: 17px; } body.single-product .wovallo-pearlight-feature p { font-size: 14px; } body.single-product .wovallo-pearlight-craft-rows { gap: 36px; } body.single-product .wovallo-pearlight-craft-row { gap: 18px; } body.single-product .wovallo-pearlight-craft-media { border-radius: 18px; } body.single-product .wovallo-pearlight-craft-num { margin-bottom: 10px; font-size: 34px; } body.single-product .wovallo-pearlight-craft-copy h3 { margin-bottom: 10px; font-size: 21px; } body.single-product .wovallo-pearlight-craft-copy p { margin-bottom: 8px; font-size: 16px; } /* Steps become a vertical flow with the chevrons acting as the connectors. */ body.single-product .wovallo-pearlight-steps { display: flex; flex-direction: column; gap: 14px; /* Overrides the grid's align-items:start, which would otherwise shrink each row — and the centred connector — to its content width. */ align-items: stretch; } body.single-product .wovallo-pearlight-step { display: flex; gap: 14px; align-items: center; } body.single-product .wovallo-pearlight-step-media { flex: 0 0 116px; margin-bottom: 0; border-radius: 16px; } body.single-product .wovallo-pearlight-step-label { margin-bottom: 6px; font-size: 11px; } body.single-product .wovallo-pearlight-step-copy p { font-size: 18px; } body.single-product .wovallo-pearlight-step-link { display: flex; justify-content: center; color: rgba(162, 192, 206, 0.8); } body.single-product .wovallo-pearlight-outro { margin-top: 34px; } body.single-product .wovallo-pearlight-outro-quiet { margin-bottom: 14px; font-size: 16px; } body.single-product .wovallo-pearlight-outro-close { font-size: 19px; } } /* ========================================================================== Single Product — Nimbus Halo bespoke Details sections Markup: patterns/product-nimbus-details.php, swapped in for one product only by wovallo_replace_product_details_section(). Same contract as the Pearlight block above: full-bleed sections that paint their own opaque backgrounds over the gradient .wovallo-product-main carries, and every rule class-scoped because assets/tailwind.css loads after this file and its preflight would win any bare-element selector. Desktop-first, with one max-width:767px block per section carrying the mobile board's layout. The two boards share this one set of markup — every difference between them is expressed here. ========================================================================== */ body.single-product .wovallo-nimbus-section { --nh-ink: #3a4750; --nh-ink-soft: rgba(58, 71, 80, 0.82); --nh-ink-muted: rgba(58, 71, 80, 0.7); --nh-ink-faint: rgba(58, 71, 80, 0.6); --nh-accent: #ff9d7e; --nh-blue: #a2c0ce; --nh-line: rgba(162, 192, 206, 0.2); --nh-line-strong: rgba(162, 192, 206, 0.4); --nh-placeholder: #f3f1ec; width: 100%; padding: clamp(44px, 6vw, 96px) 0; /* The ritual outro's 520px glow is absolutely positioned and would otherwise push a horizontal scrollbar onto the whole page. */ overflow-x: clip; } /* Mirrors the Tailwind column the rest of the page uses — max-w-7xl px-4 sm:px-6 lg:px-8 — so these sections line up with the gallery, reviews and related grid above and below. */ /* The gutter is a custom property so the full-bleed rules below can cancel whatever the column is actually using at the current width — hard-coding -16px there left an 8px strip of background between 640px and 767px. */ body.single-product .wovallo-nimbus-inner { box-sizing: border-box; max-width: 1280px; margin-inline: auto; --wovallo-nimbus-gutter: 16px; padding-inline: var(--wovallo-nimbus-gutter); } @media (min-width: 640px) { body.single-product .wovallo-nimbus-inner { --wovallo-nimbus-gutter: 24px; } } @media (min-width: 1024px) { body.single-product .wovallo-nimbus-inner { --wovallo-nimbus-gutter: 32px; } } body.single-product .wovallo-nimbus-feeling, body.single-product .wovallo-nimbus-why, body.single-product .wovallo-nimbus-ritual { background: #ffffff; border-top: 1px solid var(--nh-line); } body.single-product .wovallo-nimbus-difference, body.single-product .wovallo-nimbus-places { background: #faf9f6; } /* Takes over the spacing the generic Details group used to provide. */ body.single-product .wovallo-nimbus-feeling { margin-top: clamp(40px, 6vw, 104px); } /* ----- Shared headings ----- */ body.single-product .wovallo-nimbus-head { max-width: 760px; margin: 0 0 clamp(28px, 4vw, 56px); } body.single-product .wovallo-nimbus-head-center { max-width: 760px; margin-inline: auto; text-align: center; } body.single-product .wovallo-nimbus-eyebrow { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nh-accent); } body.single-product .wovallo-nimbus-title { margin: 0; font-size: clamp(29px, 3.4vw, 44px); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; color: var(--nh-ink); text-wrap: pretty; } body.single-product .wovallo-nimbus-title-soft { color: var(--nh-blue); } body.single-product .wovallo-nimbus-feeling .wovallo-nimbus-title { font-size: clamp(29px, 3.6vw, 48px); } body.single-product .wovallo-nimbus-why .wovallo-nimbus-title { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.14; } /* ----- Shared media boxes ----- The intrinsic width/height on each keeps CLS at zero before decode; aspect-ratio here is what actually drives the box, since several photos are cropped to a different shape on phones than on desktop. */ body.single-product .wovallo-nimbus-media { position: relative; margin: 0; overflow: hidden; border-radius: 20px; background: var(--nh-placeholder); } body.single-product .wovallo-nimbus-media img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== S1 — The Feeling ========================================================================== */ body.single-product .wovallo-nimbus-feeling-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; } body.single-product .wovallo-nimbus-feeling-media { aspect-ratio: 4 / 5; } body.single-product .wovallo-nimbus-feeling-copy { max-width: 520px; } body.single-product .wovallo-nimbus-lead { margin: 0 0 32px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; line-height: 1.3; color: var(--nh-ink); } body.single-product .wovallo-nimbus-feeling-list { display: grid; gap: 18px; margin: 0; padding: 0 0 0 22px; list-style: none; border-left: 2px solid var(--nh-line-strong); } body.single-product .wovallo-nimbus-feeling-list li { margin: 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--nh-ink-soft); } /* ========================================================================== S2 — The Difference (before / after) ========================================================================== */ body.single-product .wovallo-nimbus-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } body.single-product .wovallo-nimbus-ba-card { box-sizing: border-box; padding: 24px; border-radius: 28px; } body.single-product .wovallo-nimbus-ba-before { border: 1px solid rgba(58, 71, 80, 0.08); background: rgba(255, 255, 255, 0.5); } body.single-product .wovallo-nimbus-ba-after { border: 1px solid rgba(255, 157, 126, 0.28); background: #ffffff; box-shadow: 0 18px 44px -28px rgba(255, 157, 126, 0.55); } body.single-product .wovallo-nimbus-ba-media { aspect-ratio: 4 / 3; } body.single-product .wovallo-nimbus-ba-badge { position: absolute; top: 16px; left: 16px; padding: 7px 14px; border-radius: 9999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; pointer-events: none; } body.single-product .wovallo-nimbus-ba-before .wovallo-nimbus-ba-badge { background: rgba(58, 71, 80, 0.72); } body.single-product .wovallo-nimbus-ba-after .wovallo-nimbus-ba-badge { background: var(--nh-accent); } body.single-product .wovallo-nimbus-ba-list { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; } body.single-product .wovallo-nimbus-ba-list li { margin: 0; font-size: 19px; line-height: 1.5; } body.single-product .wovallo-nimbus-ba-before .wovallo-nimbus-ba-list li { color: var(--nh-ink-faint); } body.single-product .wovallo-nimbus-ba-after .wovallo-nimbus-ba-list li { font-weight: 500; color: var(--nh-ink); } /* ========================================================================== S3 — Why Nimbus Halo ========================================================================== */ body.single-product .wovallo-nimbus-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } body.single-product .wovallo-nimbus-why-card { overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.15); border-radius: 24px; background: #ffffff; box-shadow: 0 4px 20px rgba(162, 192, 206, 0.08); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); } @media (hover: hover) { body.single-product .wovallo-nimbus-why-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(162, 192, 206, 0.16); } } body.single-product .wovallo-nimbus-why-media { aspect-ratio: 4 / 3; border-radius: 0; } body.single-product .wovallo-nimbus-why-body { padding: 26px 24px 28px; } body.single-product .wovallo-nimbus-why-body h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--nh-ink); } body.single-product .wovallo-nimbus-why-body p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--nh-ink-muted); } /* The design board only drew four-up and one-up. Four 1fr columns inside a 768-1023px container leave ~180px each, so halve it in between. */ @media (min-width: 768px) and (max-width: 1023px) { body.single-product .wovallo-nimbus-why-grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== S4 — Where It Lives ========================================================================== */ body.single-product .wovallo-nimbus-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } body.single-product .wovallo-nimbus-place-media { aspect-ratio: 4 / 5; } body.single-product .wovallo-nimbus-place h3 { margin: 22px 0 6px; font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--nh-ink); } body.single-product .wovallo-nimbus-place p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--nh-ink-muted); } body.single-product .wovallo-nimbus-dots { display: none; } body.single-product .wovallo-nimbus-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(58, 71, 80, 0.2); transition: background 0.3s ease; } body.single-product .wovallo-nimbus-dots span.is-active { background: var(--nh-accent); } /* ========================================================================== S5 — The Ritual ========================================================================== */ body.single-product .wovallo-nimbus-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; } body.single-product .wovallo-nimbus-step-media { aspect-ratio: 1 / 1; } body.single-product .wovallo-nimbus-step-label { display: block; margin: 20px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nh-accent); } body.single-product .wovallo-nimbus-step-copy p { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.5; color: var(--nh-ink); } body.single-product .wovallo-nimbus-outro { position: relative; max-width: 680px; margin: 88px auto 0; text-align: center; } body.single-product .wovallo-nimbus-glow { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient( circle, rgba(255, 157, 126, 0.16) 0%, rgba(255, 157, 126, 0.05) 45%, rgba(255, 157, 126, 0) 70% ); } body.single-product .wovallo-nimbus-outro-quiet { position: relative; margin: 0 0 22px; font-size: 19px; line-height: 1.85; color: rgba(58, 71, 80, 0.8); } body.single-product .wovallo-nimbus-outro-close { position: relative; margin: 0; font-size: 24px; font-weight: 500; line-height: 1.6; color: var(--nh-ink); } /* ========================================================================== Phones — the mobile board ========================================================================== */ @media (max-width: 767px) { body.single-product .wovallo-nimbus-head { margin-bottom: 28px; } body.single-product .wovallo-nimbus-eyebrow { margin-bottom: 11px; font-size: 11px; font-weight: 600; } body.single-product .wovallo-nimbus-title { line-height: 1.15; } body.single-product .wovallo-nimbus-media { border-radius: 14px; } /* ----- S1 ----- */ body.single-product .wovallo-nimbus-feeling-body { grid-template-columns: 1fr; gap: 24px; } /* Bleeds to both screen edges by cancelling the inner column's gutter. */ body.single-product .wovallo-nimbus-feeling-media { margin-inline: calc(var(--wovallo-nimbus-gutter) * -1); border-radius: 0; } body.single-product .wovallo-nimbus-lead { margin-bottom: 22px; } body.single-product .wovallo-nimbus-feeling-list { gap: 14px; padding-left: 16px; } /* ----- S2 ----- The card shells drop out so the four children land in one 2x2 grid: photos across row 1, lists across row 2. That is exactly the mobile board, and display:contents is what gets there without a second DOM — the borders, backgrounds and shadows the cards carry on desktop all stop applying, which is what the board wants. */ body.single-product .wovallo-nimbus-ba { grid-template-columns: 1fr 1fr; gap: 10px; } body.single-product .wovallo-nimbus-ba-card { display: contents; } body.single-product .wovallo-nimbus-ba-media { grid-row: 1; aspect-ratio: 3 / 4; } body.single-product .wovallo-nimbus-ba-list { grid-row: 2; gap: 9px; margin-top: 6px; } body.single-product .wovallo-nimbus-ba-before > * { grid-column: 1; } body.single-product .wovallo-nimbus-ba-after > * { grid-column: 2; } /* The after card loses its shell here, so the warm lift moves to the photo. */ body.single-product .wovallo-nimbus-ba-after .wovallo-nimbus-ba-media { box-shadow: 0 14px 30px -22px rgba(255, 157, 126, 0.8); } body.single-product .wovallo-nimbus-ba-badge { top: 10px; left: 10px; padding: 5px 10px; font-size: 10px; letter-spacing: 0.12em; } body.single-product .wovallo-nimbus-ba-list li { font-size: 15px; line-height: 1.45; } /* ----- S3 ----- */ body.single-product .wovallo-nimbus-why-grid { grid-template-columns: 1fr; gap: 14px; } body.single-product .wovallo-nimbus-why-card { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; border-radius: 18px; } body.single-product .wovallo-nimbus-why-media { width: 124px; height: 124px; aspect-ratio: 1 / 1; border-radius: 12px; } body.single-product .wovallo-nimbus-why-body { padding: 0; } body.single-product .wovallo-nimbus-why-body h3 { margin-bottom: 6px; font-size: 17px; } body.single-product .wovallo-nimbus-why-body p { font-size: 14px; line-height: 1.6; } /* ----- S4 ----- */ body.single-product .wovallo-nimbus-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; /* Runs the rail to both screen edges without leaving the inner column. scroll-padding pulls the snapport in to match, so mandatory snapping rests the first card against the gutter instead of jumping it a gutter's width left the moment the section paints. */ margin-inline: calc(var(--wovallo-nimbus-gutter) * -1); padding-inline: var(--wovallo-nimbus-gutter); scroll-padding-inline: var(--wovallo-nimbus-gutter); padding-bottom: 4px; } body.single-product .wovallo-nimbus-rail::-webkit-scrollbar { display: none; } /* The rail is focusable here (see product.js), so it needs to say so. */ body.single-product .wovallo-nimbus-rail:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 2px; } body.single-product .wovallo-nimbus-place { flex: 0 0 78%; scroll-snap-align: start; } body.single-product .wovallo-nimbus-place-media { border-radius: 16px; } body.single-product .wovallo-nimbus-place h3 { margin: 16px 0 4px; font-size: 19px; } body.single-product .wovallo-nimbus-place p { font-size: 15px; line-height: 1.55; } body.single-product .wovallo-nimbus-dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; } /* ----- S5 ----- */ body.single-product .wovallo-nimbus-steps { grid-template-columns: 1fr; gap: 18px; } body.single-product .wovallo-nimbus-step { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; align-items: center; } body.single-product .wovallo-nimbus-step-media { width: 124px; height: 124px; } body.single-product .wovallo-nimbus-step-label { margin: 0 0 5px; font-size: 11px; } body.single-product .wovallo-nimbus-step-copy p { font-size: 17px; } body.single-product .wovallo-nimbus-outro { margin-top: 44px; } body.single-product .wovallo-nimbus-glow { width: 300px; height: 300px; } body.single-product .wovallo-nimbus-outro-quiet { margin-bottom: 18px; font-size: 16px; line-height: 1.8; } body.single-product .wovallo-nimbus-outro-close { font-size: 20px; line-height: 1.5; } } /* ========================================================================== Single Product — Halo Candle bespoke Details sections Markup: patterns/product-halo-details.php, swapped in for one product only by wovallo_replace_product_details_section(). Same contract as the Pearlight and Nimbus blocks above: full-bleed sections that paint their own opaque backgrounds over the gradient .wovallo-product-main carries, and every rule class-scoped because assets/tailwind.css loads after this file and its preflight would win any bare-element selector. Desktop-first. The design's two mobile boards live in the max-width:900px and max-width:767px blocks at the end of each section's rules — 900px is where the two-column and three-up layouts give way, 767px is the phone board. No !important anywhere: a class-scoped desktop-first sheet has no specificity fight to win. ========================================================================== */ body.single-product .wovallo-halo-section { --hc-ink: #3a4750; --hc-ink-soft: rgba(58, 71, 80, 0.82); --hc-ink-body: rgba(58, 71, 80, 0.78); --hc-ink-muted: rgba(58, 71, 80, 0.7); --hc-ink-faint: rgba(58, 71, 80, 0.65); --hc-accent: #ff9d7e; --hc-blue: #a2c0ce; --hc-blue-ink: #4e7889; --hc-line: rgba(162, 192, 206, 0.2); --hc-line-soft: rgba(162, 192, 206, 0.15); --hc-line-strong: rgba(162, 192, 206, 0.4); --hc-wash: rgba(162, 192, 206, 0.16); --hc-numeral: rgba(162, 192, 206, 0.55); --hc-placeholder: #f3f1ec; --hc-card-shadow: 0 4px 20px rgba(162, 192, 206, 0.08); --hc-card-shadow-hover: 0 10px 32px rgba(162, 192, 206, 0.16); width: 100%; padding: clamp(44px, 6vw, 96px) 0; /* The FAQ outro's 520px glow is absolutely positioned and would otherwise push a horizontal scrollbar onto the whole page. */ overflow-x: clip; } /* Mirrors the Tailwind column the rest of the page uses — max-w-7xl px-4 sm:px-6 lg:px-8 — so these sections line up with the gallery, reviews and related grid above and below. The gutter is a custom property so the mobile rails below can cancel whatever the column is actually using at the current width. */ body.single-product .wovallo-halo-inner { box-sizing: border-box; max-width: 1280px; margin-inline: auto; --wovallo-halo-gutter: 16px; padding-inline: var(--wovallo-halo-gutter); } @media (min-width: 640px) { body.single-product .wovallo-halo-inner { --wovallo-halo-gutter: 24px; } } @media (min-width: 1024px) { body.single-product .wovallo-halo-inner { --wovallo-halo-gutter: 32px; } } body.single-product .wovallo-halo-story, body.single-product .wovallo-halo-scents, body.single-product .wovallo-halo-specs, body.single-product .wovallo-halo-faq { background: #ffffff; border-top: 1px solid var(--hc-line); } body.single-product .wovallo-halo-ritual, body.single-product .wovallo-halo-space, body.single-product .wovallo-halo-care { background: #faf9f6; } /* Takes over the spacing the generic Details group used to provide. */ body.single-product .wovallo-halo-story { margin-top: clamp(40px, 6vw, 104px); } /* ----- Shared headings ----- */ body.single-product .wovallo-halo-head { max-width: 760px; margin: 0 0 clamp(32px, 4vw, 56px); } body.single-product .wovallo-halo-head-center { max-width: 720px; margin-inline: auto; text-align: center; } body.single-product .wovallo-halo-eyebrow { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hc-accent); } body.single-product .wovallo-halo-title { margin: 0; font-size: clamp(30px, 4.4vw, 52px); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; color: var(--hc-ink); text-wrap: pretty; } body.single-product .wovallo-halo-title-soft { color: var(--hc-blue); } /* ----- Shared media ----- */ body.single-product .wovallo-halo-media { margin: 0; overflow: hidden; background: var(--hc-placeholder); } body.single-product .wovallo-halo-media img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ----- S1 More Than A Candle ----- */ body.single-product .wovallo-halo-story-body { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; } body.single-product .wovallo-halo-story-media { border-radius: 20px; aspect-ratio: 4 / 5; } body.single-product .wovallo-halo-story-copy { max-width: 520px; } body.single-product .wovallo-halo-story-lead { margin: 0 0 28px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--hc-ink); } body.single-product .wovallo-halo-story-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 32px; padding: 0 0 0 20px; list-style: none; border-left: 2px solid var(--hc-line-strong); font-size: 18px; color: var(--hc-ink-faint); } body.single-product .wovallo-halo-story-text { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.8; color: var(--hc-ink-body); } body.single-product .wovallo-halo-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 72px; } body.single-product .wovallo-halo-feature { padding: 32px; border: 1px solid var(--hc-line-soft); border-radius: 24px; background: #ffffff; box-shadow: var(--hc-card-shadow); text-align: center; transition: box-shadow 0.3s ease, transform 0.3s ease; } body.single-product .wovallo-halo-feature:hover { box-shadow: var(--hc-card-shadow-hover); transform: translateY(-3px); } body.single-product .wovallo-halo-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; background: var(--hc-wash); color: var(--hc-blue-ink); } body.single-product .wovallo-halo-feature-icon svg { display: block; width: 26px; height: 26px; } body.single-product .wovallo-halo-feature h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; color: var(--hc-ink); } body.single-product .wovallo-halo-feature p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--hc-ink-muted); } /* ----- S2 The Ritual Behind The Flame ----- */ body.single-product .wovallo-halo-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; } body.single-product .wovallo-halo-step-media { margin-bottom: 20px; border-radius: 24px; aspect-ratio: 1 / 1; } body.single-product .wovallo-halo-step-num { display: block; margin-bottom: 10px; font-size: clamp(34px, 3.4vw, 44px); font-weight: 600; line-height: 1; color: var(--hc-numeral); } body.single-product .wovallo-halo-step h3 { margin: 0 0 10px; font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--hc-ink); } body.single-product .wovallo-halo-step p { margin: 0; max-width: 36ch; font-size: 17px; line-height: 1.8; color: var(--hc-ink-body); } /* ----- S3 Discover Your Scent ----- */ body.single-product .wovallo-halo-scent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } body.single-product .wovallo-halo-scent { overflow: hidden; border: 1px solid var(--hc-line-soft); border-radius: 24px; background: #ffffff; box-shadow: var(--hc-card-shadow); transition: box-shadow 0.3s ease, transform 0.3s ease; } body.single-product .wovallo-halo-scent:hover { box-shadow: var(--hc-card-shadow-hover); transform: translateY(-3px); } body.single-product .wovallo-halo-scent-media { aspect-ratio: 4 / 5; } body.single-product .wovallo-halo-scent-body { padding: 28px; } body.single-product .wovallo-halo-scent-name { margin: 0 0 6px; font-size: 22px; font-weight: 600; color: var(--hc-ink); } body.single-product .wovallo-halo-scent-tag { margin: 0 0 18px; font-size: 16px; font-weight: 500; color: var(--hc-blue); } body.single-product .wovallo-halo-scent-notes { margin: 0 0 20px; font-size: 15px; line-height: 1.7; color: var(--hc-ink-muted); } body.single-product .wovallo-halo-scent-mood { padding-top: 18px; border-top: 1px solid var(--hc-line); } body.single-product .wovallo-halo-scent-mood-label { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hc-accent); } body.single-product .wovallo-halo-chips { display: flex; flex-wrap: wrap; gap: 8px; } body.single-product .wovallo-halo-chip { padding: 6px 14px; border-radius: 9999px; background: var(--hc-wash); font-size: 14px; color: var(--hc-ink); } /* ----- S4 Designed To Belong Anywhere ----- */ body.single-product .wovallo-halo-space .wovallo-halo-head { margin-bottom: clamp(32px, 3.6vw, 48px); } body.single-product .wovallo-halo-wide { margin-bottom: 56px; overflow: hidden; border: 1px solid var(--hc-line-soft); border-radius: 28px; background: var(--hc-placeholder); aspect-ratio: 21 / 9; } body.single-product .wovallo-halo-wide img { display: block; width: 100%; height: 100%; object-fit: cover; } body.single-product .wovallo-halo-lede { max-width: 720px; margin: 0 auto 64px; text-align: center; } body.single-product .wovallo-halo-lede-quiet { margin: 0 0 20px; font-size: 19px; line-height: 1.8; color: var(--hc-ink-soft); } body.single-product .wovallo-halo-lede-close { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.7; color: var(--hc-ink); } body.single-product .wovallo-halo-places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } body.single-product .wovallo-halo-place-media { margin-bottom: 18px; border-radius: 20px; aspect-ratio: 4 / 3; } body.single-product .wovallo-halo-place h3 { margin: 0 0 6px; font-size: 21px; font-weight: 600; color: var(--hc-ink); } body.single-product .wovallo-halo-place p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--hc-ink-muted); } /* ----- S5 Details Behind The Glow ----- */ body.single-product .wovallo-halo-spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } body.single-product .wovallo-halo-spec { padding: 32px; border: 1px solid var(--hc-line-soft); border-radius: 24px; background: #ffffff; box-shadow: var(--hc-card-shadow); } body.single-product .wovallo-halo-spec-num { display: block; margin-bottom: 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hc-accent); } body.single-product .wovallo-halo-spec h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; color: var(--hc-ink); } body.single-product .wovallo-halo-spec p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--hc-ink-muted); } /* ----- S6 Candle Care ----- */ body.single-product .wovallo-halo-care-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } body.single-product .wovallo-halo-care-item { padding-top: 22px; border-top: 2px solid var(--hc-line-strong); } body.single-product .wovallo-halo-care-num { display: block; margin-bottom: 12px; font-size: 34px; font-weight: 600; line-height: 1; color: var(--hc-numeral); } body.single-product .wovallo-halo-care-item h3 { margin: 0 0 10px; font-size: 20px; font-weight: 600; color: var(--hc-ink); } body.single-product .wovallo-halo-care-item p { margin: 0; font-size: 16px; line-height: 1.75; color: rgba(58, 71, 80, 0.75); } body.single-product .wovallo-halo-safety { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 560px; margin: 56px auto 0; padding: 18px 24px; border: 1px solid rgba(255, 157, 126, 0.35); border-radius: 20px; background: rgba(255, 157, 126, 0.08); } body.single-product .wovallo-halo-safety-icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--hc-accent); } body.single-product .wovallo-halo-safety p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--hc-ink-soft); } /* ----- S7 Questions, answered ----- The open/close transition and the chevron rotation come from the shared .wovallo-accordion-* rules further up this file; only the visuals are here. */ body.single-product .wovallo-halo-faq .wovallo-halo-head { margin-bottom: clamp(32px, 3.6vw, 48px); } body.single-product .wovallo-halo-faq-list { max-width: 820px; margin-inline: auto; border-top: 1px solid var(--hc-line); } body.single-product .wovallo-halo-faq-item { border-bottom: 1px solid var(--hc-line); } body.single-product .wovallo-halo-faq-toggle { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%; padding: 24px 0; border: none; background: transparent; font-family: inherit; font-size: 19px; font-weight: 500; text-align: left; color: var(--hc-ink); cursor: pointer; transition: color 0.2s ease; } /* Pointer devices only: on touch the hover state sticks after a tap, so a collapsed question would stay accent-coloured and read as open. */ @media (hover: hover) and (pointer: fine) { body.single-product .wovallo-halo-faq-toggle:hover { color: var(--hc-accent); } } /* The single-product board strips focus rings off every button, and the shared .wovallo-accordion-toggle rule does it again with !important — which would leave four full-width controls with no keyboard affordance. Put one back for keyboard users only, matching the Nimbus rail's ring. */ body.single-product .wovallo-halo-faq-toggle:focus-visible { outline: 2px solid #ff9d7e !important; outline-offset: 2px; } body.single-product .wovallo-halo-faq-icon { flex-shrink: 0; width: 20px; height: 20px; transition: transform 0.3s ease; } body.single-product .wovallo-halo-faq-body { padding-bottom: 24px; } body.single-product .wovallo-halo-faq-body p { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.8; color: rgba(58, 71, 80, 0.75); } body.single-product .wovallo-halo-outro { position: relative; max-width: 680px; margin: 88px auto 0; text-align: center; } body.single-product .wovallo-halo-glow { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient( circle, rgba(255, 157, 126, 0.16) 0%, rgba(255, 157, 126, 0.05) 45%, rgba(255, 157, 126, 0) 70% ); } body.single-product .wovallo-halo-outro-quiet { position: relative; margin: 0 0 22px; font-size: 19px; line-height: 1.85; color: var(--hc-ink-soft); } body.single-product .wovallo-halo-outro-close { position: relative; margin: 0; font-size: 24px; font-weight: 500; line-height: 1.6; color: var(--hc-ink); } /* ----- Tablet board: the two-column and three-up layouts give way ----- */ @media (max-width: 900px) { body.single-product .wovallo-halo-story-body { grid-template-columns: 1fr; gap: 36px; } body.single-product .wovallo-halo-features { grid-template-columns: 1fr 1fr; margin-top: 48px; } body.single-product .wovallo-halo-steps, body.single-product .wovallo-halo-places, body.single-product .wovallo-halo-spec-grid, body.single-product .wovallo-halo-care-grid { grid-template-columns: 1fr 1fr; } /* Scent cards read as "pick one" — a peeking horizontal rail beats a tall stack. It runs to both screen edges without leaving the inner column, and scroll-padding pulls the snapport in to match so mandatory snapping rests the first card against the gutter. */ body.single-product .wovallo-halo-scent-grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: calc(var(--wovallo-halo-gutter) * -1); padding-inline: var(--wovallo-halo-gutter); scroll-padding-inline: var(--wovallo-halo-gutter); /* overflow-x: auto computes overflow-y to auto, so a card's -3px hover lift and its shadow would be clipped against the top of the scroll box. Pad the box out and pull the padding back with a matching negative margin, so the rail still sits where the grid did. */ padding-block: 12px; margin-block: -12px; } body.single-product .wovallo-halo-scent-grid::-webkit-scrollbar { display: none; } body.single-product .wovallo-halo-scent { flex: 0 0 72%; scroll-snap-align: start; } body.single-product .wovallo-halo-wide { margin-bottom: 40px; aspect-ratio: 16 / 10; } body.single-product .wovallo-halo-lede { margin-bottom: 48px; } } /* ----- Phone board ----- */ @media (max-width: 767px) { body.single-product .wovallo-halo-head { margin-bottom: 32px; } body.single-product .wovallo-halo-space .wovallo-halo-head, body.single-product .wovallo-halo-faq .wovallo-halo-head { margin-bottom: 32px; } body.single-product .wovallo-halo-story-media { aspect-ratio: 3 / 4; } /* Short cards: a rail, so five screens of story don't become nine. */ body.single-product .wovallo-halo-features { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: calc(var(--wovallo-halo-gutter) * -1); padding-inline: var(--wovallo-halo-gutter); scroll-padding-inline: var(--wovallo-halo-gutter); /* Same clipping fix as the scent rail: 12px of breathing room inside the scroll box for the hover lift, cancelled out so the 36px top gap holds. */ padding-block: 12px; margin-block: 24px -12px; } body.single-product .wovallo-halo-features::-webkit-scrollbar { display: none; } body.single-product .wovallo-halo-feature { flex: 0 0 76%; padding: 26px; scroll-snap-align: start; } body.single-product .wovallo-halo-scent { flex: 0 0 82%; } body.single-product .wovallo-halo-scent-body { padding: 22px; } body.single-product .wovallo-halo-steps, body.single-product .wovallo-halo-places, body.single-product .wovallo-halo-spec-grid, body.single-product .wovallo-halo-care-grid { grid-template-columns: 1fr; gap: 20px; } body.single-product .wovallo-halo-step-num { margin-bottom: 4px; font-size: 30px; } body.single-product .wovallo-halo-wide { border-radius: 20px; aspect-ratio: 4 / 3; } body.single-product .wovallo-halo-lede { margin-bottom: 40px; } body.single-product .wovallo-halo-lede-quiet { font-size: 17px; line-height: 1.7; } body.single-product .wovallo-halo-lede-close { font-size: 19px; line-height: 1.55; } body.single-product .wovallo-halo-spec { padding: 26px; } body.single-product .wovallo-halo-safety { margin-top: 40px; } body.single-product .wovallo-halo-faq-toggle { gap: 16px; font-size: 17px; } body.single-product .wovallo-halo-faq-body p { font-size: 16px; } body.single-product .wovallo-halo-outro { margin-top: 56px; } body.single-product .wovallo-halo-glow { width: 300px; height: 300px; } body.single-product .wovallo-halo-outro-quiet { margin-bottom: 18px; font-size: 17px; } body.single-product .wovallo-halo-outro-close { font-size: 20px; line-height: 1.5; } } /* ========================================================================== Single Product — Mira Curve Tote bespoke Details sections Markup: patterns/product-mira-details.php, swapped in for one product only by wovallo_replace_product_details_section(). Same contract as the Pearlight, Nimbus and Halo blocks above: full-bleed sections that paint their own opaque backgrounds over the gradient .wovallo-product-main carries, and every rule class-scoped because assets/tailwind.css loads after this file and its preflight would win any bare-element selector. One deviation from the three blocks above: this sheet is mobile-first (min-width boards at 640 / 768 / 1024) because the design it came from was authored that way. Rewriting it desktop-first would buy nothing visually, so read the boards in the other direction here. No !important anywhere. ========================================================================== */ body.single-product .wovallo-mira-section { --mira-ink: #3a4750; --mira-ink-soft: rgba(58, 71, 80, 0.8); --mira-ink-body: rgba(58, 71, 80, 0.75); --mira-ink-muted: rgba(58, 71, 80, 0.7); --mira-ink-faint: rgba(58, 71, 80, 0.65); --mira-ink-dim: rgba(58, 71, 80, 0.55); --mira-ink-label: rgba(58, 71, 80, 0.5); --mira-accent: #ff9d7e; --mira-blue: #a2c0ce; --mira-bg: #faf9f6; --mira-line: rgba(162, 192, 206, 0.22); --mira-line-soft: rgba(162, 192, 206, 0.16); --mira-line-faint: rgba(162, 192, 206, 0.2); --mira-wash: rgba(162, 192, 206, 0.14); --mira-blue-wash: rgba(162, 192, 206, 0.16); --mira-accent-wash: rgba(255, 157, 126, 0.1); --mira-placeholder: #f1eee8; --mira-card-shadow: 0 4px 20px rgba(162, 192, 206, 0.05); /* Vertical rhythm is padding, not margin: the sections have to tile without a gap or the .wovallo-product-main gradient stripes through between them. */ background: var(--mira-bg); padding: 2.75rem 1rem; } @media (min-width: 768px) { body.single-product .wovallo-mira-section { padding: 3.5rem 1.5rem; } } /* The one deliberate gap: the rule that separates the whole Details block from the buy column above it. Pinned to the first section by name rather than :first-of-type, which would be measured against every other
in the full-width
. */ body.single-product .wovallo-mira-curve { margin-top: 5rem; padding-top: 4rem; border-top: 1px solid var(--mira-line-faint); } body.single-product .wovallo-mira-scale { padding-bottom: 5rem; } body.single-product .wovallo-mira-inner { max-width: 80rem; margin: 0 auto; } /* --- shared type ------------------------------------------------------- */ body.single-product .wovallo-mira-head { max-width: 41rem; margin-bottom: 2.5rem; } body.single-product .wovallo-mira-eyebrow { display: flex; align-items: center; gap: 0.75rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mira-accent); margin-bottom: 0.875rem; } body.single-product .wovallo-mira-index { letter-spacing: 0.22em; } body.single-product .wovallo-mira-rule { display: block; width: 1.75rem; height: 1px; background: linear-gradient(to right, rgba(255, 157, 126, 0.5), transparent); } body.single-product .wovallo-mira-title { margin: 0 0 0.875rem; font-size: clamp(1.75rem, 4.2vw, 2.5rem); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: var(--mira-ink); } body.single-product .wovallo-mira-title-sm { font-size: clamp(1.625rem, 3.6vw, 2.25rem); line-height: 1.18; } body.single-product .wovallo-mira-title-soft { color: var(--mira-ink-faint); } body.single-product .wovallo-mira-lead { margin: 0; font-size: 1.0625rem; line-height: 1.75; font-weight: 300; color: var(--mira-ink-body); text-wrap: pretty; } body.single-product .wovallo-mira-note { margin: 0; font-size: 0.9375rem; line-height: 1.7; font-weight: 300; color: var(--mira-ink-muted); text-wrap: pretty; } /* --- shared media ----------------------------------------------------- */ body.single-product .wovallo-mira-media { margin: 0; overflow: hidden; border-radius: 1.75rem; background: var(--mira-placeholder); border: 1px solid var(--mira-line); } body.single-product .wovallo-mira-media img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; } /* --- shared card / split ---------------------------------------------- */ body.single-product .wovallo-mira-card { background: #ffffff; border: 1px solid var(--mira-line-soft); border-radius: 2rem; padding: 1.5rem; box-shadow: var(--mira-card-shadow); } @media (min-width: 768px) { body.single-product .wovallo-mira-card { border-radius: 2.5rem; padding: 3.5rem; } } body.single-product .wovallo-mira-split { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; } @media (min-width: 1024px) { body.single-product .wovallo-mira-split { grid-template-columns: 0.9fr 1.1fr; gap: 3rem; } } /* --- shared pills ----------------------------------------------------- */ body.single-product .wovallo-mira-traits, body.single-product .wovallo-mira-features { display: flex; flex-wrap: wrap; gap: 0.625rem; } body.single-product .wovallo-mira-traits { margin-top: 2rem; } body.single-product .wovallo-mira-trait { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5625rem 1rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: var(--mira-ink); } body.single-product .wovallo-mira-trait::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; } body.single-product .wovallo-mira-trait-orange { background: var(--mira-accent-wash); } body.single-product .wovallo-mira-trait-orange::before { background: var(--mira-accent); } body.single-product .wovallo-mira-trait-blue { background: var(--mira-blue-wash); } body.single-product .wovallo-mira-trait-blue::before { background: var(--mira-blue); } /* --- 01 the curve ----------------------------------------------------- */ body.single-product .wovallo-mira-curve-media { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 768px) { body.single-product .wovallo-mira-curve-media { grid-template-columns: 1.15fr 0.85fr; } } body.single-product .wovallo-mira-curve-front { aspect-ratio: 4 / 3; } body.single-product .wovallo-mira-curve-model { aspect-ratio: 4 / 5; } @media (min-width: 768px) { body.single-product .wovallo-mira-curve-front, body.single-product .wovallo-mira-curve-model { border-radius: 2rem; } } /* --- 02 texture ------------------------------------------------------- */ body.single-product .wovallo-mira-texture-grid, body.single-product .wovallo-mira-carry-grid, body.single-product .wovallo-mira-days-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 640px) { body.single-product .wovallo-mira-texture-grid, body.single-product .wovallo-mira-carry-grid, body.single-product .wovallo-mira-days-grid { grid-template-columns: repeat(3, 1fr); } } body.single-product .wovallo-mira-texture-media { aspect-ratio: 1; margin-bottom: 1rem; } body.single-product .wovallo-mira-texture-body h3, body.single-product .wovallo-mira-carry-body h3, body.single-product .wovallo-mira-day-body h3 { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; color: var(--mira-ink); } body.single-product .wovallo-mira-texture-body p, body.single-product .wovallo-mira-carry-body p, body.single-product .wovallo-mira-day-body p { margin: 0; font-size: 0.875rem; line-height: 1.6; font-weight: 300; color: var(--mira-ink-muted); } /* --- 03 details ------------------------------------------------------- */ body.single-product .wovallo-mira-details-hero { aspect-ratio: 4 / 5; } body.single-product .wovallo-mira-details-copy { display: flex; flex-direction: column; gap: 1.375rem; } body.single-product .wovallo-mira-details-copy .wovallo-mira-eyebrow, body.single-product .wovallo-mira-details-copy .wovallo-mira-title, body.single-product .wovallo-mira-fits-copy .wovallo-mira-eyebrow, body.single-product .wovallo-mira-fits-copy .wovallo-mira-title, body.single-product .wovallo-mira-pocket-copy .wovallo-mira-eyebrow, body.single-product .wovallo-mira-pocket-copy .wovallo-mira-title, body.single-product .wovallo-mira-scale-copy .wovallo-mira-eyebrow, body.single-product .wovallo-mira-scale-copy .wovallo-mira-title { margin-bottom: 0; } body.single-product .wovallo-mira-points { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem 1.25rem; margin: 0; padding: 0; list-style: none; } body.single-product .wovallo-mira-points li { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; color: var(--mira-ink-soft); } body.single-product .wovallo-mira-points li::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--mira-accent); flex: 0 0 auto; } body.single-product .wovallo-mira-details-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; } body.single-product .wovallo-mira-details-thumb { aspect-ratio: 1; border-radius: 1.25rem; } /* --- 04 what fits ----------------------------------------------------- */ body.single-product .wovallo-mira-fits-media { aspect-ratio: 1; } body.single-product .wovallo-mira-fits-copy, body.single-product .wovallo-mira-pocket-copy, body.single-product .wovallo-mira-scale-copy { display: flex; flex-direction: column; gap: 1.5rem; } body.single-product .wovallo-mira-essentials { display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 0; padding: 0; list-style: none; } body.single-product .wovallo-mira-essentials li { padding: 0.5625rem 1rem; border-radius: 999px; background: var(--mira-wash); font-size: 0.875rem; font-weight: 500; color: var(--mira-ink); } body.single-product .wovallo-mira-dims { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.625rem; margin: 0; } body.single-product .wovallo-mira-dims strong { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; color: var(--mira-ink); } body.single-product .wovallo-mira-dims span { font-size: 0.875rem; color: var(--mira-ink-dim); } /* --- 05 interior pocket ----------------------------------------------- */ @media (min-width: 1024px) { body.single-product .wovallo-mira-split-reverse { grid-template-columns: 1fr 1fr; } } /* Photo first on a phone, copy first once the split has two columns. */ body.single-product .wovallo-mira-pocket-media { aspect-ratio: 5 / 4; order: -1; } @media (min-width: 1024px) { body.single-product .wovallo-mira-pocket-media { order: 0; } } /* --- 06 / 07 carry + days --------------------------------------------- */ body.single-product .wovallo-mira-carry-media { aspect-ratio: 3 / 4; margin-bottom: 0.875rem; } body.single-product .wovallo-mira-day-media { aspect-ratio: 4 / 5; margin-bottom: 0.875rem; } body.single-product .wovallo-mira-carry-body { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } body.single-product .wovallo-mira-carry-body h3 { font-size: 0.9375rem; margin: 0; } body.single-product .wovallo-mira-carry-body p { font-size: 0.8125rem; color: var(--mira-ink-faint); } body.single-product .wovallo-mira-day-body h3 { font-size: 0.9375rem; margin-bottom: 0.1875rem; } body.single-product .wovallo-mira-day-body p { font-size: 0.8125rem; color: var(--mira-ink-faint); } /* --- 08 scale --------------------------------------------------------- */ body.single-product .wovallo-mira-scale-media { aspect-ratio: 3 / 4; } body.single-product .wovallo-mira-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: var(--mira-line); border: 1px solid var(--mira-line); border-radius: 1.25rem; overflow: hidden; } body.single-product .wovallo-mira-spec { background: #ffffff; padding: 1.125rem 1.25rem; } body.single-product .wovallo-mira-spec dt { margin: 0 0 0.375rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mira-ink-label); } body.single-product .wovallo-mira-spec dd { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--mira-ink); } body.single-product .wovallo-mira-spec dd span { font-size: 0.875rem; font-weight: 400; color: var(--mira-ink-dim); } /* ========================================================================== Single Product — Customer Reviews Section ========================================================================== */ .wovallo-reviews-section { scroll-margin-top: 6rem; } .wovallo-reviews-section .wovallo-reviews-summary { /* Soft ground shadow so the card feels planted on the warm background */ box-shadow: 0 1px 2px rgba(58, 71, 80, 0.04), 0 12px 32px -20px rgba(58, 71, 80, 0.18); } .wovallo-reviews-section .wovallo-review-card { transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease; } .wovallo-reviews-section .wovallo-review-card:hover { box-shadow: 0 2px 4px rgba(58, 71, 80, 0.04), 0 20px 40px -24px rgba(58, 71, 80, 0.22); transform: translateY(-2px); border-color: rgba(162, 192, 206, 0.28); } /* Review stars — slightly tighter kerning on the card header stars */ .wovallo-reviews-section .wovallo-stars { letter-spacing: -0.5px; } .wovallo-reviews-section .wovallo-review-body p { margin: 0 0 0.75em; } .wovallo-reviews-section .wovallo-review-body p:last-child { margin-bottom: 0; } /* Video attached to a review — a still with a play affordance. The file is only requested once the lightbox opens, so a list of these costs nothing. */ .wovallo-review-video-thumb { position: relative; display: block; width: 100%; max-width: 22rem; aspect-ratio: 16 / 9; border-radius: 0.875rem; overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.25); background: rgba(58, 71, 80, 0.06); transition: border-color 0.3s ease, transform 0.3s ease; } .wovallo-review-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .wovallo-review-video-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(58, 71, 80, 0) 40%, rgba(58, 71, 80, 0.55) 100% ); } @media (hover: hover) and (pointer: fine) { .wovallo-review-video-thumb:hover { border-color: rgba(255, 157, 126, 0.5); transform: translateY(-2px); } .wovallo-review-video-thumb:hover .wovallo-review-video-play { background: #ff9d7e; color: #fff; } } .wovallo-review-video-thumb:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 2px; } .wovallo-review-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #3a4750; box-shadow: 0 8px 22px -10px rgba(58, 71, 80, 0.6); transition: background 0.25s ease, color 0.25s ease; } .wovallo-review-video-play svg { width: 1.375rem; height: 1.375rem; margin-left: 2px; } .wovallo-review-video-cta { position: absolute; left: 0.875rem; bottom: 0.75rem; z-index: 1; color: #fff; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; } /* Lightbox video shares the overlay with the photo preview */ .wovallo-lightbox-video { max-width: 90vw; max-height: 90vh; border-radius: 1rem; background: #000; outline: none; } .wovallo-lightbox-video[hidden], .wovallo-lightbox-overlay img[hidden] { display: none; } @media (max-width: 600px) { .wovallo-lightbox-video { width: 100%; max-height: 72vh; } } /* A review still in the moderation queue, shown only to its own author */ .wovallo-reviews-pending { margin-bottom: 1rem; } .wovallo-review-card.is-pending { border-color: rgba(255, 157, 126, 0.4); background: linear-gradient(180deg, rgba(255, 157, 126, 0.05), #fff 4.5rem); } .wovallo-review-pending { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.75rem 0 0; padding: 0.3rem 0.7rem; border-radius: 9999px; background: rgba(255, 157, 126, 0.12); color: #c9663f; font-size: 0.75rem; font-weight: 600; line-height: 1.3; } .wovallo-review-pending svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; } /* "Show more reviews" — a quieter, outlined sibling of the Write a Review CTA so it reads as navigation rather than a second primary action. */ .wovallo-reviews-more-wrap { display: flex; justify-content: center; margin-top: 1.5rem; } .wovallo-reviews-more-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.75rem 1.75rem; border: 1px solid rgba(162, 192, 206, 0.55); border-radius: 9999px; background: #fff; color: #3a4750; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, color 0.3s ease; box-shadow: 0 8px 20px -14px rgba(58, 71, 80, 0.4); } @media (hover: hover) and (pointer: fine) { .wovallo-reviews-more-btn:hover { border-color: rgba(255, 157, 126, 0.7); color: #f98a67; transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(58, 71, 80, 0.45); } } .wovallo-reviews-more-btn:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 2px; } .wovallo-reviews-more-btn.is-loading { pointer-events: none; opacity: 0.6; } /* Batch announcements for screen readers only — the visible count already lives in the button label. */ .wovallo-reviews-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Appended cards land focus without drawing a stray outline for mouse users */ .wovallo-review-card:focus { outline: none; } .wovallo-review-card:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } /* Star rating input (form) */ .wovallo-rating-input .wovallo-rating-star { width: 2.25rem; height: 2.25rem; padding: 0; border: 0; background: transparent; color: rgba(58, 71, 80, 0.18); cursor: pointer; transition: color 0.18s ease, transform 0.15s ease; } .wovallo-rating-input .wovallo-rating-star svg { width: 100%; height: 100%; display: block; } .wovallo-rating-input .wovallo-rating-star:hover { transform: scale(1.08); } .wovallo-rating-input .wovallo-rating-star.is-active, .wovallo-rating-input .wovallo-rating-star.is-hover { color: #ff9d7e; } .wovallo-rating-input .wovallo-rating-star:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 2px; border-radius: 6px; } /* Upload zone */ .wovallo-upload-label:focus-within { outline: 2px solid #ff9d7e; outline-offset: 2px; } /* Optimizing/compressing images before they appear as thumbnails */ .wovallo-upload.is-processing { position: relative; opacity: 0.65; pointer-events: none; transition: opacity 0.2s ease; } .wovallo-upload.is-processing::after { content: "Optimizing images…"; display: inline-block; margin-top: 0.5rem; font-size: 0.8125rem; color: #3a4750; opacity: 0.8; } .wovallo-upload-thumb { width: 4.5rem; height: 4.5rem; border-radius: 0.75rem; overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.25); background: #faf9f6; } .wovallo-upload-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Long description rendered via post-content: space block children */ .wovallo-product-description > * + * { margin-top: 1.25rem; } .wovallo-product-description h2, .wovallo-product-description h3, .wovallo-product-description h4 { color: #3a4750; font-weight: 600; } /* "Write a Review" button — matches the warm primary CTA language (Buy Now) */ .wovallo-write-review-btn { margin-top: 1.75rem; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.25rem; padding: 0.85rem 1.4rem; background-image: linear-gradient(135deg, #ffac90 0%, #ff9d7e 55%, #f98a67 100%); color: #fff; border: none; border-radius: 9999px; font-weight: 650; font-size: 0.9375rem; line-height: 1.2; letter-spacing: 0.01em; cursor: pointer; transition: box-shadow 0.3s ease, transform 0.3s ease, filter 0.3s ease; text-align: center; text-decoration: none; box-shadow: 0 12px 26px -12px rgba(255, 157, 126, 0.85); white-space: nowrap; } .wovallo-write-review-btn:hover { filter: brightness(0.98); box-shadow: 0 16px 30px -12px rgba(255, 157, 126, 0.95); transform: translateY(-2px); } .wovallo-write-review-btn:active { transform: scale(0.96); } .wovallo-write-review-btn:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 2px; } .wovallo-write-review-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; } .wovallo-write-review-btn__icon { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; flex-shrink: 0; } .wovallo-write-review-btn__label { display: inline-block; white-space: nowrap; } /* Review card header — author meta row */ .wovallo-review-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } body.single-product .wovallo-review-card header > .flex { display: flex; align-items: flex-start; gap: 14px; min-width: 0; } .wovallo-review-card .wovallo-review-avatar { width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: linear-gradient(to bottom right, rgba(255, 157, 126, 0.3), rgba(255, 157, 126, 0.1)); display: flex; align-items: center; justify-content: center; color: #ff9d7e; font-weight: 600; font-size: 0.875rem; flex-shrink: 0; } /* Verified buyer badge + date row */ body.single-product .wovallo-review-card .wovallo-review-author-block { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding-top: 1px; } body.single-product .wovallo-review-card .wovallo-review-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; color: rgba(58, 71, 80, 0.78); margin-top: 0; flex-wrap: wrap; } .wovallo-verified-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3rem 0.625rem; border-radius: 9999px; background: rgba(162, 192, 206, 0.12); color: #6c8794; font-weight: 600; white-space: nowrap; } .wovallo-verified-badge svg { width: 0.8125rem; height: 0.8125rem; color: #a2c0ce; flex-shrink: 0; } .wovallo-verified-badge span { display: inline-block; line-height: 1; } .wovallo-review-meta-separator { color: rgba(58, 71, 80, 0.28); font-size: 0.75rem; line-height: 1; } body.single-product .wovallo-review-card .wovallo-review-date { display: inline-flex; align-items: center; white-space: nowrap; } body.single-product .wovallo-review-card .wovallo-review-author { font-weight: 600; color: #3a4750; font-size: 15px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wovallo-review-card .wovallo-review-stars { flex-shrink: 0; padding-top: 0.125rem; } /* Form inputs: smooth focus transitions (accessibility-safe) */ .wovallo-review-input { transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } /* Hide WooCommerce's default reply title (heading is now inside the form) */ .wovallo-review-form-shell .comment-reply-title { display: none; } .wovallo-review-form-shell .must-log-in, .wovallo-review-form-shell .comment-notes, .wovallo-review-form-shell .logged-in-as { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; color: rgba(58, 71, 80, 0.78); } /* Hide empty WP-default paragraphs so they don't reserve a grid row */ .wovallo-review-form-shell .comment-notes:empty, .wovallo-review-form-shell .logged-in-as:empty, .wovallo-review-form-shell .must-log-in:empty { display: none; } /* Hide WordPress-default cookies consent and any unexpected grid items that would otherwise sit at order:0 (above the rating). */ .wovallo-review-form-shell .comment-form-cookies-consent { display: none !important; } .wovallo-review-form-shell .comment-form .wovallo-upload-preview:empty { display: none; } /* Hide WooCommerce's default p.stars (we use custom star buttons) */ .wovallo-review-form-shell .comment-form-rating p.stars { display: none !important; } /* Form header above the card */ .wovallo-review-form-shell .wovallo-form-header { margin: 0 0 0.75rem; padding: 0; } .wovallo-form-heading { font-size: 1.5rem; font-weight: 600; color: #3a4750; line-height: 1.3; margin: 0 0 0.25rem; } .wovallo-form-subheading { font-size: 0.875rem; color: rgba(58, 71, 80, 0.55); margin: 0; } /* Form grid layout */ .wovallo-review-form-shell .comment-form { display: grid; gap: 1.375rem; box-shadow: 0 4px 24px rgba(58, 71, 80, 0.06); } .wovallo-review-form-shell #review_form_wrapper, .wovallo-review-form-shell #review_form, .wovallo-review-form-shell #respond { margin: 0; padding: 0; border: 0; } /* Form card styles */ .wovallo-woo-review-form { padding: 1rem 1.25rem 1.5rem; } @media (min-width: 768px) { .wovallo-woo-review-form { padding-left: 2rem; padding-right: 2rem; padding-top: 1.25rem; padding-bottom: 2rem; } } /* Visual field ordering: Rating → Title → Review → Upload → Name → Email → Submit */ .wovallo-review-form-shell .comment-form .logged-in-as, .wovallo-review-form-shell .comment-form .wovallo-review-identity { order: 1; } .wovallo-review-form-shell .comment-form .comment-form-rating { order: 2; } .wovallo-review-form-shell .comment-form .comment-form-review-title { order: 3; } .wovallo-review-form-shell .comment-form .comment-form-comment { order: 4; } .wovallo-review-form-shell .comment-form .comment-form-images { order: 5; } .wovallo-review-form-shell .comment-form .form-submit { order: 6; } .wovallo-review-form-shell .comment-form .comment-form-author, .wovallo-review-form-shell .comment-form .comment-form-email, .wovallo-review-form-shell .comment-form .comment-form-url { display: none !important; } .wovallo-review-form-shell .comment-form p, .wovallo-review-form-shell .comment-form div.comment-form-rating { display: block; width: 100%; margin: 0; } .wovallo-review-form-shell .comment-form-rating { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; } .wovallo-review-form-shell .comment-form .logged-in-as, .wovallo-review-form-shell .comment-form .wovallo-review-identity { display: inline-flex; align-items: center; gap: 0.4rem; width: fit-content; max-width: 100%; padding: 0.625rem 0.875rem; border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 9999px; background: rgba(162, 192, 206, 0.08); color: rgba(58, 71, 80, 0.72); font-size: 0.8125rem; line-height: 1.35; margin: 0; flex-wrap: wrap; } .wovallo-review-form-shell .comment-form .logged-in-as a { color: #3a4750; font-weight: 600; } .wovallo-review-form-shell .comment-form .wovallo-review-identity strong, .wovallo-review-form-shell .comment-form .logged-in-as strong { color: #3a4750; font-weight: 600; } .wovallo-review-form-shell .comment-form .wovallo-review-identity span, .wovallo-review-form-shell .comment-form .logged-in-as span { color: rgba(58, 71, 80, 0.78); } .wovallo-review-form-shell .comment-form label { display: block; margin-bottom: 0.5rem; color: #3a4750; font-size: 0.875rem; font-weight: 500; } .wovallo-review-form-shell .comment-form-rating label { margin-bottom: 0; } .wovallo-review-form-shell .comment-form input, .wovallo-review-form-shell .comment-form textarea, .wovallo-review-form-shell .comment-form select { display: block; box-sizing: border-box; width: 100%; padding: 0.875rem 1rem; border: 1px solid rgba(162, 192, 206, 0.25); border-radius: 0.9rem; background: #faf9f6; color: #3a4750; font-size: 0.9375rem; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .wovallo-review-form-shell .comment-form input[type="hidden"] { display: none !important; padding: 0 !important; border: 0 !important; } .wovallo-review-form-shell .comment-form input::placeholder, .wovallo-review-form-shell .comment-form textarea::placeholder { color: rgba(58, 71, 80, 0.38); } .wovallo-review-form-shell .comment-form textarea { min-height: 8rem; resize: vertical; } .wovallo-review-form-shell .comment-form input[type="text"], .wovallo-review-form-shell .comment-form input[type="email"], .wovallo-review-form-shell .comment-form textarea { -webkit-appearance: none; appearance: none; } .wovallo-review-form-shell .comment-form .comment-form-rating select#rating { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%); white-space: nowrap !important; border: 0 !important; } .wovallo-review-form-shell .comment-form .form-submit { margin: 0; } .wovallo-review-form-shell .comment-form input:hover, .wovallo-review-form-shell .comment-form textarea:hover { border-color: rgba(162, 192, 206, 0.5); background: #fff; } .wovallo-review-form-shell .comment-form input:focus, .wovallo-review-form-shell .comment-form textarea:focus, .wovallo-review-form-shell .comment-form select:focus { outline: 2px solid transparent; border-color: #ff9d7e; box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.15); background: #fff; } .wovallo-review-form-shell .comment-form .required { color: #ff9d7e; } /* Star rating label text (e.g. "Perfect") */ .wovallo-rating-label-text { display: inline-block; margin-left: 0.625rem; font-size: 0.8125rem; font-weight: 600; color: #ff9d7e; min-width: 4.5rem; vertical-align: middle; transition: opacity 0.2s ease; opacity: 0; } .wovallo-rating-label-text.is-visible { opacity: 1; } /* Submit button */ .wovallo-review-form-shell button.wovallo-submit-btn, .wovallo-review-form-shell .comment-form .wovallo-submit-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 3.5rem; padding: 0.95rem 1.5rem; border: none !important; border-radius: 9999px; background: #3a4750 !important; color: #fff !important; font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 2px 8px rgba(58, 71, 80, 0.1); text-align: center; text-decoration: none; transition: background-color 0.3s ease, box-shadow 0.25s ease, transform 0.15s ease; } .wovallo-review-form-shell button.wovallo-submit-btn:hover, .wovallo-review-form-shell .comment-form .wovallo-submit-btn:hover { background: #ff9d7e !important; box-shadow: 0 4px 16px rgba(255, 157, 126, 0.25); transform: translateY(-1px); } .wovallo-review-form-shell button.wovallo-submit-btn:active, .wovallo-review-form-shell .comment-form .wovallo-submit-btn:active { transform: translateY(0); } .wovallo-review-form-shell button.wovallo-submit-btn:focus-visible, .wovallo-review-form-shell .comment-form .wovallo-submit-btn:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 2px; } /* Upload zone inside WooCommerce form */ .wovallo-review-form-shell .comment-form-images { margin: 0; } .wovallo-review-form-shell .comment-form-images .wovallo-upload-label { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; text-align: center; } /* Disclaimer text below the form */ .wovallo-form-disclaimer { font-size: 0.75rem; color: rgba(58, 71, 80, 0.5); text-align: center; margin-top: 1rem; } /* Upload preview remove button */ .wovallo-upload-thumb { position: relative; } .wovallo-upload-thumb .wovallo-upload-remove { position: absolute; top: -0.375rem; right: -0.375rem; width: 1.375rem; height: 1.375rem; border-radius: 9999px; border: 2px solid #fff; background: #3a4750; color: #fff; font-size: 0.6875rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: scale(0.7); transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .wovallo-upload-thumb:hover .wovallo-upload-remove { opacity: 1; transform: scale(1); } .wovallo-upload-thumb .wovallo-upload-remove:hover { background: #ff9d7e; } .wovallo-upload-thumb .wovallo-upload-remove:focus-visible { opacity: 1; transform: scale(1); outline: 2px solid #ff9d7e; outline-offset: 2px; } #reviews { scroll-margin-top: 5rem; } /* Review form: hidden by default, smooth slide-down reveal */ .wovallo-review-form-wrap { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease 0.05s; scroll-margin-top: 5rem; } .wovallo-review-form-wrap.is-open { opacity: 1; } /* Blocked review modal */ .wovallo-modal-open { overflow: hidden; } .wovallo-review-modal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 1rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } .wovallo-review-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .wovallo-review-modal__backdrop { position: absolute; inset: 0; background: rgba(58, 71, 80, 0.45); backdrop-filter: blur(2px); } .wovallo-review-modal__dialog { position: relative; width: min(100%, 30rem); background: #faf9f6; border: 1px solid rgba(162, 192, 206, 0.3); border-radius: 1.25rem; box-shadow: 0 20px 50px rgba(58, 71, 80, 0.2); padding: 1.5rem 1.25rem 1.25rem; transform: translateY(14px) scale(0.98); transition: transform 0.25s ease; } .wovallo-review-modal.is-open .wovallo-review-modal__dialog { transform: translateY(0) scale(1); } .wovallo-review-modal__close { position: absolute; top: 0.625rem; right: 0.625rem; width: 2rem; height: 2rem; border: 1px solid rgba(162, 192, 206, 0.35); border-radius: 9999px; background: #fff; color: #3a4750; font-size: 1.25rem; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .wovallo-review-modal__close:hover { background: rgba(255, 157, 126, 0.1); border-color: #ff9d7e; color: #3a4750; } .wovallo-review-modal__close:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 2px; } .wovallo-review-modal__title { margin: 0 2rem 0.5rem 0; font-size: 1.25rem; line-height: 1.3; color: #3a4750; } .wovallo-review-modal__message { margin: 0; color: rgba(58, 71, 80, 0.78); font-size: 0.9375rem; line-height: 1.6; } .wovallo-review-modal__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.25rem; } .wovallo-review-modal__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.625rem 1rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .wovallo-review-modal__btn--secondary { border: 1px solid rgba(162, 192, 206, 0.5); background: #fff; color: #3a4750; cursor: pointer; } .wovallo-review-modal__btn--secondary:hover { border-color: #a2c0ce; background: #fff; } .wovallo-review-modal__btn--primary { border: 1px solid #3a4750; background: #3a4750; color: #fff; } .wovallo-review-modal__btn--primary:hover { border-color: #ff9d7e; background: #ff9d7e; color: #3a4750; } .wovallo-review-modal__btn:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .wovallo-reviews-section .wovallo-review-card:hover { transform: none; } .wovallo-breakdown-bar { transition: none !important; } .wovallo-review-form-wrap { transition: none; } .wovallo-review-modal, .wovallo-review-modal__dialog { transition: none; } .wovallo-write-review-btn:hover, .wovallo-write-review-btn:active { transform: none; } } @media (max-width: 640px) { .wovallo-write-review-btn { min-height: 3rem; padding: 0.8rem 1.2rem; font-size: 0.9rem; } .wovallo-review-meta { gap: 0.35rem; font-size: 0.75rem; } } /* ========================================================= Product category archive template (taxonomy-product_cat.html) ========================================================= */ body.wovallo-product-category-page .wovallo-product-category-shell { color: #3a4750; } body.wovallo-product-category-page .wovallo-product-category-breadcrumb { margin-bottom: 2rem; } body.wovallo-product-category-page .wovallo-product-category-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; color: rgba(58, 71, 80, 0.78); font-size: 0.875rem; } body.wovallo-product-category-page .wovallo-product-category-breadcrumb li { display: inline-flex; align-items: center; min-width: 0; } body.wovallo-product-category-page .wovallo-product-category-breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: rgba(58, 71, 80, 0.35); } body.wovallo-product-category-page .wovallo-product-category-breadcrumb a, body.wovallo-product-category-page .wovallo-product-category-breadcrumb span { color: inherit; text-decoration: none; } body.wovallo-product-category-page .wovallo-product-category-breadcrumb a { border-radius: 0.35rem; text-underline-offset: 0.22em; transition: color 0.2s ease, background-color 0.2s ease, text-decoration-color 0.2s ease; } body.wovallo-product-category-page .wovallo-product-category-breadcrumb a:hover, body.wovallo-product-category-page .wovallo-product-category-breadcrumb a:focus-visible { color: #ff9d7e; text-decoration: underline; text-decoration-color: currentColor; } body.wovallo-product-category-page .wovallo-product-category-breadcrumb a:focus-visible { outline: none; background: rgba(255, 157, 126, 0.12); } body.wovallo-product-category-page .wovallo-product-category-breadcrumb a:focus:not(:focus-visible) { outline: none; background: transparent; } body.wovallo-product-category-page .wovallo-product-category-breadcrumb span { color: #3a4750; font-weight: 700; } body.wovallo-product-category-page .wovallo-product-category-hero { position: relative; overflow: hidden; min-height: clamp(18rem, 32vw, 28rem); display: grid; place-items: center; margin-bottom: 2rem; padding: clamp(3rem, 8vw, 6rem) 1.5rem; border: 1px solid rgba(162, 192, 206, 0.14); border-radius: 1.5rem; background: #ffffff; text-align: center; box-shadow: 0 8px 30px rgba(162, 192, 206, 0.08); } body.wovallo-product-category-page .wovallo-product-category-aura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } body.wovallo-product-category-page .wovallo-product-category-aura span { position: absolute; display: block; border-radius: 9999px; filter: blur(80px); mix-blend-mode: multiply; opacity: 0.72; } body.wovallo-product-category-page .wovallo-product-category-aura span:first-child { top: -45%; left: -10%; width: min(38rem, 60vw); height: min(38rem, 60vw); background: rgba(162, 192, 206, 0.16); animation: blob 15s infinite alternate; } body.wovallo-product-category-page .wovallo-product-category-aura span:last-child { right: -10%; bottom: -45%; width: min(30rem, 52vw); height: min(30rem, 52vw); background: rgba(255, 157, 126, 0.14); animation: blob-reverse 20s infinite alternate; } body.wovallo-product-category-page .wovallo-product-category-hero-content { position: relative; z-index: 1; max-width: 44rem; } body.wovallo-product-category-page .wovallo-product-category-hero h1 { margin: 0 0 1rem; color: #3a4750; font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 700; line-height: 1.04; } body.wovallo-product-category-page .wovallo-product-category-hero p { margin: 0; color: rgba(58, 71, 80, 0.7); font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 300; line-height: 1.7; } body.wovallo-product-category-page .wovallo-product-category-toolbar { position: relative; z-index: 20; display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; } body.wovallo-product-category-page .wovallo-product-category-toolbar > p { margin: 0; color: rgba(58, 71, 80, 0.78); font-size: 0.9375rem; } body.wovallo-product-category-page .wovallo-product-category-toolbar .wovallo-products-sort-wrap { width: min(18rem, 100%); } body.wovallo-product-category-page .wovallo-products-sort-menu summary:hover { border-color: #a2c0ce; background: rgba(255, 255, 255, 0.88); } @media (max-width: 640px) { body.wovallo-product-category-page .wovallo-product-category-shell { padding-top: 2rem; } body.wovallo-product-category-page .wovallo-product-category-breadcrumb { margin-bottom: 1.25rem; } body.wovallo-product-category-page .wovallo-product-category-hero { min-height: 16rem; margin-bottom: 1.25rem; padding: 2.75rem 1rem; border-radius: 1rem; } body.wovallo-product-category-page .wovallo-product-category-toolbar { display: grid; grid-template-columns: 1fr; align-items: stretch; margin-bottom: 1.4rem; } body.wovallo-product-category-page .wovallo-product-category-toolbar .wovallo-products-sort-wrap { width: 100%; } } @media (prefers-reduced-motion: reduce) { body.wovallo-product-category-page .wovallo-product-category-aura span { animation: none !important; } } /* ========================================================= Products catalog template (archive-product.html) ========================================================= */ body.wovallo-products-page .wp-site-blocks { --wp--style--block-gap: 0 !important; gap: 0 !important; } body.wovallo-products-page .wp-site-blocks > header:first-child, body.wovallo-products-page .wp-site-blocks > header:first-child .wp-block-group { margin-bottom: 0 !important; background-color: #faf9f6 !important; } body.wovallo-products-page .wp-block-html { margin-top: 0 !important; } body.wovallo-products-page .wovallo-products-main { margin-top: 0 !important; background: #faf9f6; } body.wovallo-products-page .wovallo-products-hero { padding-top: clamp(3.75rem, 5vw, 4.5rem) !important; padding-bottom: clamp(2.75rem, 4vw, 3.25rem) !important; } body.wovallo-products-page .wovallo-products-controls { position: static; display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(13rem, 18rem) auto; column-gap: 1rem; row-gap: 0.875rem; align-items: end; padding: 1.05rem; margin-bottom: 1.15rem; border: 1px solid rgba(162, 192, 206, 0.2); border-radius: 1.25rem; background: rgba(250, 249, 246, 0.92); backdrop-filter: blur(14px); box-shadow: 0 12px 40px rgba(58, 71, 80, 0.06); } body.wovallo-products-page .wovallo-products-search label, body.wovallo-products-page .wovallo-products-control-label { display: block; margin-bottom: 0.45rem; color: rgba(58, 71, 80, 0.78); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } body.wovallo-products-page .wovallo-products-search-field { position: relative; } body.wovallo-products-page .wovallo-products-search-field svg { position: absolute; left: 1rem; top: 50%; width: 1.1rem; height: 1.1rem; color: rgba(58, 71, 80, 0.45); transform: translateY(-50%); pointer-events: none; transition: color 0.2s ease; } body.wovallo-products-page .wovallo-products-search-field input { width: 100%; min-height: 3rem; border: 1px solid rgba(162, 192, 206, 0.35); border-radius: 9999px; background: #ffffff; color: #3a4750; font-size: 0.9375rem; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } body.wovallo-products-page .wovallo-products-search-field input { padding: 0.75rem 1rem 0.75rem 2.85rem; } body.wovallo-products-page .wovallo-products-sort-wrap { position: relative; } body.wovallo-products-page .wovallo-products-sort-menu { position: relative; } body.wovallo-products-page .wovallo-products-sort-menu summary { display: flex; min-height: 3rem; width: 100%; align-items: center; justify-content: space-between; gap: 0.9rem; padding: 0.75rem 0.9rem 0.75rem 1rem; border: 1px solid rgba(162, 192, 206, 0.35); border-radius: 9999px; background: #ffffff; color: #3a4750; cursor: pointer; font-size: 0.9375rem; line-height: 1.2; list-style: none; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; } body.wovallo-products-page .wovallo-products-sort-menu summary::-webkit-details-marker { display: none; } body.wovallo-products-page .wovallo-products-sort-menu summary svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: rgba(58, 71, 80, 0.7); transition: color 0.2s ease, transform 0.2s ease; } body.wovallo-products-page .wovallo-products-sort-menu[open] summary { border-color: #ff9d7e; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14); } body.wovallo-products-page .wovallo-products-sort-menu[open] summary svg { color: #ff9d7e; transform: rotate(180deg); } body.wovallo-products-page .wovallo-products-sort-list { position: absolute; right: 0; top: calc(100% + 0.55rem); z-index: 45; display: grid; gap: 0.25rem; width: min(18rem, calc(100vw - 2rem)); padding: 0.45rem; border: 1px solid rgba(162, 192, 206, 0.3); border-radius: 1rem; background: #ffffff; box-shadow: 0 18px 44px rgba(58, 71, 80, 0.12); } body.wovallo-products-page .wovallo-products-sort-list a { display: flex; align-items: center; min-height: 2.65rem; padding: 0.7rem 0.85rem; border-radius: 0.75rem; color: #3a4750; font-size: 0.9375rem; font-weight: 700; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } body.wovallo-products-page .wovallo-products-sort-list a:hover, body.wovallo-products-page .wovallo-products-sort-list a:focus-visible { background: rgba(162, 192, 206, 0.14); } body.wovallo-products-page .wovallo-products-sort-list a:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #ff9d7e; } body.wovallo-products-page .wovallo-products-sort-list a.is-active { background: #a2c0ce; color: #ffffff; box-shadow: 0 8px 18px rgba(162, 192, 206, 0.24); } body.wovallo-products-page .wovallo-products-sort-list a.is-active:focus-visible { box-shadow: inset 0 0 0 2px #ffffff, 0 8px 18px rgba(162, 192, 206, 0.24); } body.wovallo-products-page .wovallo-products-search-field:focus-within svg { color: #ff9d7e; } body.wovallo-products-page .wovallo-products-search-field input:focus-visible, body.wovallo-products-page .wovallo-products-sort-menu summary:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 2px; border-color: #ff9d7e; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14); } body.wovallo-products-page .wovallo-products-reset { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.75rem 1.25rem; border-radius: 9999px; font-size: 0.9375rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.wovallo-products-page .wovallo-products-reset { border: 1px solid rgba(162, 192, 206, 0.35); background: #ffffff; color: #3a4750; } body.wovallo-products-page .wovallo-products-reset:hover { border-color: #ff9d7e; color: #ff9d7e; } body.wovallo-products-page .wovallo-products-reset:focus-visible, body.wovallo-products-page .wovallo-products-category-pills a:focus-visible, .wovallo-product-card a:focus-visible, .wovallo-product-card button:focus-visible, body.wovallo-products-page .wovallo-products-pagination a:focus-visible, body.wovallo-products-page .wovallo-products-empty a:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } body.wovallo-products-page .wovallo-products-category-pills { display: flex; gap: 0.625rem; margin: 1.25rem 0 1.5rem; padding: 0.25rem 0.1rem 0.6rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body.wovallo-products-page .wovallo-products-category-pills::-webkit-scrollbar { display: none; } body.wovallo-products-page .wovallo-products-category-pills a { flex: 0 0 auto; padding: 0.65rem 1.1rem; border: 1px solid rgba(162, 192, 206, 0.25); border-radius: 9999px; background: rgba(255, 255, 255, 0.7); color: #3a4750; font-size: 0.875rem; font-weight: 700; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } body.wovallo-products-page .wovallo-products-category-pills a:hover { border-color: #a2c0ce; background: rgba(162, 192, 206, 0.12); } body.wovallo-products-page .wovallo-products-category-pills a.is-active { border-color: #a2c0ce; background: #a2c0ce; color: #3a4750; box-shadow: 0 8px 20px rgba(162, 192, 206, 0.2); } body.wovallo-products-page .wovallo-products-results-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; color: rgba(58, 71, 80, 0.78); font-size: 0.9375rem; } body.wovallo-products-page .wovallo-products-results-meta p { margin: 0; } body.wovallo-products-page .wovallo-products-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 2rem; } .wovallo-product-card { display: flex; min-width: 0; flex-direction: column; } .wovallo-product-card-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.12); border-radius: 1rem; background: #ffffff; box-shadow: 0 4px 20px rgba(162, 192, 206, 0.05); text-decoration: none; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .wovallo-product-card:hover .wovallo-product-card-media { border-color: rgba(162, 192, 206, 0.34); box-shadow: 0 12px 32px rgba(162, 192, 206, 0.14); transform: translateY(-2px); } .wovallo-product-card-img, .wovallo-product-card-media img { /* Fill the aspect-ratio box via absolute insets rather than height:100%. height:100% only resolves against a parent with a definite height; during the cart-fragment reflow after add-to-cart that height briefly goes indefinite, collapsing the image to its intrinsic size and leaving a blank strip at the bottom until a hover forces a recalc. inset:0 is immune. */ position: absolute; inset: 0; display: block; /* Replaced elements ignore top/bottom for sizing, so they need an explicit height:100% (resolved against the media box's definite aspect-ratio height) rather than auto, which would collapse to the image's intrinsic height. */ width: 100%; height: 100%; object-fit: cover; transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } .wovallo-product-card:hover .wovallo-product-card-img, .wovallo-product-card:hover .wovallo-product-card-media img { transform: scale(1.04); } .wovallo-product-card-placeholder { position: absolute; inset: 0; display: grid; width: 100%; height: 100%; place-items: center; background: linear-gradient(135deg, rgba(162, 192, 206, 0.12), rgba(255, 157, 126, 0.08)); } .wovallo-product-card-placeholder span { width: 3.5rem; height: 3.5rem; border: 2px solid rgba(162, 192, 206, 0.32); border-radius: 9999px; background: rgba(255, 157, 126, 0.2); } .wovallo-product-card-body { display: flex; flex: 1; flex-direction: column; padding-top: 1rem; } .wovallo-product-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 1.4rem; margin-bottom: 0.5rem; } .wovallo-product-stock { display: inline-flex; align-items: center; gap: 0.4rem; color: rgba(58, 71, 80, 0.78); font-size: 0.75rem; font-weight: 700; } .wovallo-product-stock::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: #6fa78f; } .wovallo-product-stock-outofstock::before { background: rgba(58, 71, 80, 0.35); } .wovallo-product-stock-onbackorder::before { background: #ff9d7e; } .wovallo-product-rating { display: inline-flex; align-items: center; gap: 0.35rem; color: rgba(58, 71, 80, 0.78); font-size: 0.75rem; font-weight: 700; } .wovallo-product-rating .wovallo-stars svg { color: #ff9d7e; } .wovallo-product-card-title { margin: 0 0 0.45rem; color: #3a4750; font-size: 1.1rem; font-weight: 700; line-height: 1.28; } .wovallo-product-card-title a { color: inherit; text-decoration: none; transition: color 0.2s ease; } .wovallo-product-card:hover .wovallo-product-card-title a { color: #a2c0ce; } .wovallo-product-card-description { margin: 0 0 1rem; color: rgba(58, 71, 80, 0.78); font-size: 0.9rem; line-height: 1.6; } .wovallo-product-card-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-top: auto; padding-top: 0.25rem; } .wovallo-product-card-price { min-width: 0; color: #3a4750; font-size: 1rem; font-weight: 800; } .wovallo-product-card-price del { color: rgba(58, 71, 80, 0.78); font-weight: 500; } .wovallo-product-card-price ins { color: #c24e24; text-decoration: none; } .wovallo-product-card-cart, .wovallo-product-card-options { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 5.6rem; width: 5.6rem; min-height: 2.65rem; padding: 0.55rem 0.9rem; border: 1px solid #a2c0ce; border-radius: 9999px; background: #a2c0ce; color: #3a4750; cursor: pointer; font-size: 0.875rem; font-weight: 800; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } .wovallo-product-card-footer .added_to_cart, .wovallo-product-card-footer .wc-forward { display: none !important; } .wovallo-product-card-cart svg { width: 1rem; height: 1rem; } .wovallo-product-card-cart:hover, .wovallo-product-card-options:hover { border-color: #ff9d7e; background: #ff9d7e; box-shadow: 0 8px 22px rgba(255, 157, 126, 0.24); } .wovallo-product-card-cart:disabled { cursor: wait; opacity: 0.82; } .wovallo-product-card-cart[data-state="success"] { border-color: #6fa78f; background: #6fa78f; } .wovallo-product-card-cart[data-state="error"] { border-color: #ff9d7e; background: #ff9d7e; } body.wovallo-products-page .wovallo-products-pagination { margin-top: 3rem; } body.wovallo-products-page .wovallo-products-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } body.wovallo-products-page .wovallo-products-pagination a, body.wovallo-products-page .wovallo-products-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.65rem; min-height: 2.65rem; padding: 0.6rem 0.95rem; border: 1px solid rgba(162, 192, 206, 0.35); border-radius: 9999px; background: #ffffff; color: #3a4750; font-weight: 800; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } body.wovallo-products-page .wovallo-products-pagination a:hover, body.wovallo-products-page .wovallo-products-pagination .current { border-color: #ff9d7e; background: #ff9d7e; color: #ffffff; } body.wovallo-products-page .wovallo-products-empty { max-width: 34rem; margin: 2rem auto 0; padding: 3rem 1.5rem; text-align: center; } body.wovallo-products-page .wovallo-products-empty-mark { width: 4rem; height: 4rem; margin: 0 auto 1.2rem; border: 2px solid rgba(162, 192, 206, 0.32); border-radius: 9999px; background: radial-gradient(circle at 60% 40%, rgba(255, 157, 126, 0.3), rgba(162, 192, 206, 0.12)); } body.wovallo-products-page .wovallo-products-empty h2 { margin: 0 0 0.65rem; color: #3a4750; font-size: 1.75rem; font-weight: 800; } body.wovallo-products-page .wovallo-products-empty p { margin: 0 auto 1.4rem; color: rgba(58, 71, 80, 0.78); line-height: 1.65; } body.wovallo-products-page .wovallo-products-empty a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.85rem; padding: 0.65rem 1.1rem; border-radius: 9999px; background: #3a4750; color: #ffffff; font-weight: 800; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } body.wovallo-products-page .wovallo-products-empty a:hover { background: #ff9d7e; } @media (min-width: 640px) { body.wovallo-products-page .wovallo-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { body.wovallo-products-page .wovallo-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { body.wovallo-products-page .wovallo-products-controls { grid-template-columns: 1fr 1fr; } body.wovallo-products-page .wovallo-products-search { grid-column: 1 / -1; } body.wovallo-products-page .wovallo-products-reset { width: 100%; } body.wovallo-products-page .wovallo-products-sort-list { left: 0; right: auto; } } @media (max-width: 640px) { body.wovallo-products-page .wovallo-products-controls { grid-template-columns: 1fr; gap: 0.75rem; padding: 0.875rem; border-radius: 1rem; } body.wovallo-products-page .wovallo-products-hero { padding-top: 4rem !important; padding-bottom: 2.5rem !important; } body.wovallo-products-page .wovallo-products-category-pills { margin-top: 1rem; } body.wovallo-products-page .wovallo-products-sort-list { width: 100%; } .wovallo-product-card-media { aspect-ratio: 1 / 1; } .wovallo-product-card-cart, .wovallo-product-card-options { min-width: 4.75rem; width: 4.75rem; } } @media (prefers-reduced-motion: reduce) { .wovallo-product-card-media, .wovallo-product-card-img, .wovallo-product-card-media img, body.wovallo-products-page .wovallo-products-reset, body.wovallo-products-page .wovallo-products-sort-menu summary, body.wovallo-products-page .wovallo-products-sort-menu summary svg, body.wovallo-products-page .wovallo-products-sort-list a, body.wovallo-products-page .wovallo-products-category-pills a, .wovallo-product-card-cart, .wovallo-product-card-options { transition: none !important; } .wovallo-product-card:hover .wovallo-product-card-media { transform: none; } } /* 404 page */ body.wovallo-404-page { background: #faf9f6; color: #3a4750; } body.wovallo-404-page .wp-site-blocks { --wp--style--block-gap: 0 !important; gap: 0 !important; background: #faf9f6; } body.wovallo-404-page .wp-site-blocks > header:first-child, body.wovallo-404-page .wp-site-blocks > header:first-child .wp-block-group { margin-bottom: 0 !important; background: #faf9f6 !important; } body.wovallo-404-page .wovallo-404-main { min-height: 72dvh; padding: 7rem 1rem 5rem; background: linear-gradient(135deg, rgba(162, 192, 206, 0.16), transparent 34%), linear-gradient(315deg, rgba(255, 157, 126, 0.12), transparent 30%), #faf9f6; } body.wovallo-404-page .fade-in { opacity: 1 !important; transform: none !important; } body.wovallo-404-page .wovallo-404-shell, body.wovallo-404-page .wovallo-404-recommendations { width: min(100%, 76rem); margin: 0 auto; } body.wovallo-404-page .wovallo-404-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; } body.wovallo-404-page .wovallo-404-copy, body.wovallo-404-page .wovallo-404-panel { min-width: 0; } body.wovallo-404-page .wovallo-404-kicker, body.wovallo-404-page .wovallo-404-products-header p { margin: 0 0 0.85rem; color: #ff9d7e; font-size: 0.78rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } body.wovallo-404-page .wovallo-404-code { margin: 0 0 0.25rem; color: rgba(162, 192, 206, 0.55); font-size: clamp(4.25rem, 16vw, 9rem); font-weight: 900; line-height: 0.9; } body.wovallo-404-page .wovallo-404-copy h1 { max-width: 12ch; margin: 0 0 1rem; color: #3a4750; font-size: clamp(2.35rem, 7vw, 5.25rem); font-weight: 800; line-height: 0.98; } body.wovallo-404-page .wovallo-404-lede { max-width: 38rem; margin: 0; color: rgba(58, 71, 80, 0.72); font-size: clamp(1rem, 2.4vw, 1.25rem); font-weight: 400; line-height: 1.7; } body.wovallo-404-page .wovallo-404-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.75rem; } body.wovallo-404-page .wovallo-404-button, body.wovallo-404-page .wovallo-404-search button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0.75rem 1.15rem; border: 1px solid transparent; border-radius: 9999px; cursor: pointer; font-size: 0.92rem; font-weight: 800; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.wovallo-404-page .wovallo-404-button-primary, body.wovallo-404-page .wovallo-404-search button { border-color: #3a4750; background: #3a4750; color: #ffffff; } body.wovallo-404-page .wovallo-404-button-secondary { border-color: rgba(162, 192, 206, 0.65); background: #ffffff; color: #3a4750; } body.wovallo-404-page .wovallo-404-button:hover, body.wovallo-404-page .wovallo-404-search button:hover { border-color: #ff9d7e; background: #ff9d7e; color: #ffffff; box-shadow: 0 10px 24px rgba(255, 157, 126, 0.24); transform: translateY(-1px); } body.wovallo-404-page .wovallo-404-panel { padding: 1rem; border: 1px solid rgba(162, 192, 206, 0.28); border-radius: 1rem; background: rgba(255, 255, 255, 0.78); box-shadow: 0 18px 54px rgba(58, 71, 80, 0.08); } body.wovallo-404-page .wovallo-404-search label { display: block; margin: 0 0 0.55rem; color: rgba(58, 71, 80, 0.72); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; } body.wovallo-404-page .wovallo-404-search-field { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem; align-items: center; padding: 0.55rem; border: 1px solid rgba(162, 192, 206, 0.4); border-radius: 0.85rem; background: #ffffff; transition: border-color 0.2s ease, box-shadow 0.2s ease; } body.wovallo-404-page .wovallo-404-search-field:focus-within { border-color: #ff9d7e; box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.18); } body.wovallo-404-page .wovallo-404-search-field svg { width: 1.15rem; height: 1.15rem; color: #a2c0ce; } body.wovallo-404-page .wovallo-404-search input { width: 100%; min-width: 0; min-height: 2.5rem; border: 0; background: transparent; color: #3a4750; font: inherit; outline: none; } body.wovallo-404-page .wovallo-404-search button { grid-column: 1 / -1; width: 100%; } body.wovallo-404-page .wovallo-404-links { display: grid; gap: 0.55rem; margin-top: 1rem; } body.wovallo-404-page .wovallo-404-links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.1rem; padding: 0.75rem 0.85rem; border: 1px solid rgba(162, 192, 206, 0.28); border-radius: 0.75rem; background: rgba(250, 249, 246, 0.82); color: #3a4750; font-weight: 800; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } body.wovallo-404-page .wovallo-404-links svg { width: 1rem; height: 1rem; flex: 0 0 auto; transition: transform 0.2s ease; } body.wovallo-404-page .wovallo-404-links a:hover { border-color: #a2c0ce; background: rgba(162, 192, 206, 0.16); color: #3a4750; transform: translateY(-1px); } body.wovallo-404-page .wovallo-404-links a:hover svg { transform: translateX(3px); } body.wovallo-404-page .wovallo-404-recommendations { margin-top: 4rem; } body.wovallo-404-page .wovallo-404-products-header { margin-bottom: 1.2rem; } body.wovallo-404-page .wovallo-404-products-header h2 { margin: 0; color: #3a4750; font-size: clamp(1.65rem, 4vw, 2.4rem); font-weight: 800; line-height: 1.1; } body.wovallo-404-page .wovallo-404-products-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } body.wovallo-404-page .wovallo-404-product-card { overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 1rem; background: #ffffff; box-shadow: 0 14px 38px rgba(58, 71, 80, 0.07); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.wovallo-404-page .wovallo-404-product-card:hover { border-color: rgba(255, 157, 126, 0.5); box-shadow: 0 18px 42px rgba(58, 71, 80, 0.11); transform: translateY(-2px); } body.wovallo-404-page .wovallo-404-product-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(162, 192, 206, 0.12); } body.wovallo-404-page .wovallo-404-product-img, body.wovallo-404-page .wovallo-404-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.24s ease; } body.wovallo-404-page .wovallo-404-product-card:hover .wovallo-404-product-img, body.wovallo-404-page .wovallo-404-product-card:hover .wovallo-404-product-media img { transform: scale(1.04); } body.wovallo-404-page .wovallo-404-product-placeholder { display: grid; width: 100%; height: 100%; place-items: center; } body.wovallo-404-page .wovallo-404-product-placeholder span { width: 3rem; height: 3rem; border: 2px solid rgba(162, 192, 206, 0.34); border-radius: 9999px; } body.wovallo-404-page .wovallo-404-product-body { padding: 1rem; } body.wovallo-404-page .wovallo-404-product-body h3 { margin: 0 0 0.5rem; color: #3a4750; font-size: 1rem; font-weight: 800; line-height: 1.35; } body.wovallo-404-page .wovallo-404-product-body h3 a { color: inherit; text-decoration: none; transition: color 0.2s ease; } body.wovallo-404-page .wovallo-404-product-card:hover h3 a { color: #a2c0ce; } body.wovallo-404-page .wovallo-404-product-price { color: #3a4750; font-size: 0.95rem; font-weight: 800; } body.wovallo-404-page .wovallo-404-product-price del { color: rgba(58, 71, 80, 0.4); font-weight: 500; } body.wovallo-404-page .wovallo-404-product-price ins { color: #ff9d7e; text-decoration: none; } body.wovallo-404-page .wovallo-404-button:focus-visible, body.wovallo-404-page .wovallo-404-search button:focus-visible, body.wovallo-404-page .wovallo-404-links a:focus-visible, body.wovallo-404-page .wovallo-404-product-media:focus-visible, body.wovallo-404-page .wovallo-404-product-body h3 a:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } @media (min-width: 640px) { body.wovallo-404-page .wovallo-404-search-field { grid-template-columns: auto minmax(0, 1fr) auto; } body.wovallo-404-page .wovallo-404-search button { grid-column: auto; width: auto; } body.wovallo-404-page .wovallo-404-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 960px) { body.wovallo-404-page .wovallo-404-main { padding-top: 8.5rem; } body.wovallo-404-page .wovallo-404-shell { grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr); gap: 3rem; } body.wovallo-404-page .wovallo-404-panel { padding: 1.25rem; } } @media (max-width: 520px) { body.wovallo-404-page .wovallo-404-main { padding-top: 6rem; } body.wovallo-404-page .wovallo-404-actions { display: grid; } body.wovallo-404-page .wovallo-404-button { width: 100%; } } @media (prefers-reduced-motion: reduce) { body.wovallo-404-page .wovallo-404-button, body.wovallo-404-page .wovallo-404-search button, body.wovallo-404-page .wovallo-404-search-field, body.wovallo-404-page .wovallo-404-links a, body.wovallo-404-page .wovallo-404-links svg, body.wovallo-404-page .wovallo-404-product-card, body.wovallo-404-page .wovallo-404-product-img, body.wovallo-404-page .wovallo-404-product-media img, body.wovallo-404-page .wovallo-404-product-body h3 a { transition: none !important; } body.wovallo-404-page .wovallo-404-button:hover, body.wovallo-404-page .wovallo-404-search button:hover, body.wovallo-404-page .wovallo-404-links a:hover, body.wovallo-404-page .wovallo-404-links a:hover svg, body.wovallo-404-page .wovallo-404-product-card:hover, body.wovallo-404-page .wovallo-404-product-card:hover .wovallo-404-product-img, body.wovallo-404-page .wovallo-404-product-card:hover .wovallo-404-product-media img { transform: none; } } /* ========================================================= Cart Page ========================================================= */ body.wovallo-cart-page { background: #faf9f6; color: #3a4750; } body.wovallo-cart-page .wovallo-cart-main { min-height: 100vh; padding: 7.5rem 1rem 6rem; overflow-x: hidden; } body.wovallo-cart-page .wovallo-cart-shell { width: min(100%, 76rem); margin: 0 auto; } body.wovallo-cart-page .wovallo-cart-hero { position: relative; isolation: isolate; margin-bottom: 2.5rem; } body.wovallo-cart-page .wovallo-cart-hero::before, body.wovallo-cart-page .wovallo-cart-hero::after { position: absolute; z-index: -1; border-radius: 9999px; content: ""; filter: blur(72px); pointer-events: none; } body.wovallo-cart-page .wovallo-cart-hero::before { top: -5rem; left: -4rem; width: min(28rem, 62vw); height: min(28rem, 62vw); background: rgba(162, 192, 206, 0.18); } body.wovallo-cart-page .wovallo-cart-hero::after { right: -5rem; bottom: -7rem; width: min(24rem, 58vw); height: min(24rem, 58vw); background: rgba(255, 157, 126, 0.12); } body.wovallo-cart-page .wovallo-cart-hero .wovallo-cart-shell { display: grid; gap: 1.25rem; align-items: end; } body.wovallo-cart-page .wovallo-cart-kicker, body.wovallo-cart-page .wovallo-cart-summary-kicker, body.wovallo-cart-page .wovallo-cart-section-heading p { margin: 0 0 0.65rem; color: #ff9d7e; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } body.wovallo-cart-page .wovallo-cart-hero h1 { margin: 0 0 1rem; color: #3a4750; font-size: clamp(2.5rem, 7vw, 5.25rem); font-weight: 800; line-height: 0.98; } body.wovallo-cart-page .wovallo-cart-lede { max-width: 44rem; margin: 0; color: rgba(58, 71, 80, 0.72); font-size: clamp(1rem, 2.2vw, 1.24rem); line-height: 1.7; } body.wovallo-cart-page .wovallo-cart-hero-note { display: flex; flex-wrap: wrap; gap: 0.65rem; } body.wovallo-cart-page .wovallo-cart-hero-note span { display: inline-flex; min-height: 2.35rem; align-items: center; border: 1px solid rgba(162, 192, 206, 0.38); border-radius: 9999px; padding: 0.45rem 0.85rem; background: rgba(255, 255, 255, 0.72); color: rgba(58, 71, 80, 0.72); font-size: 0.82rem; font-weight: 700; } body.wovallo-cart-page .woocommerce-notices-wrapper, body.wovallo-cart-page .wc-block-store-notices, body.wovallo-cart-page .woocommerce-error, body.wovallo-cart-page .woocommerce-message, body.wovallo-cart-page .woocommerce-info, body.wovallo-cart-page .wc-block-components-notice-banner { max-width: 76rem !important; margin: 0 auto !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #3a4750 !important; box-shadow: none !important; } body.wovallo-cart-page .woocommerce-notices-wrapper, body.wovallo-cart-page .wc-block-store-notices { display: block !important; align-items: flex-start; margin-bottom: 2.25rem !important; } body.wovallo-cart-page .woocommerce-message, body.wovallo-cart-page .woocommerce-info, body.wovallo-cart-page .woocommerce-error, body.wovallo-cart-page .wc-block-components-notice-banner { display: flex !important; width: 100% !important; max-width: 100% !important; gap: 0.72rem; align-items: center !important; min-height: 2.9rem !important; margin: 0 !important; border: 1px solid rgba(162, 192, 206, 0.28) !important; border-radius: 0.75rem !important; padding: 0.72rem 0.9rem !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(250, 249, 246, 0.8)), #ffffff !important; box-shadow: 0 10px 24px rgba(58, 71, 80, 0.05) !important; color: #3a4750 !important; font-size: 0.9rem !important; font-weight: 700 !important; line-height: 1.45 !important; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.wovallo-cart-page .woocommerce-message::before, body.wovallo-cart-page .woocommerce-info::before, body.wovallo-cart-page .woocommerce-error::before { position: static !important; top: auto !important; left: auto !important; display: inline-grid !important; width: 1.55rem !important; height: 1.55rem !important; flex: 0 0 auto; place-items: center !important; border: 1px solid rgba(162, 192, 206, 0.45) !important; border-radius: 9999px !important; background: rgba(162, 192, 206, 0.18) !important; color: #3a4750 !important; font-family: inherit !important; font-size: 0.78rem !important; font-weight: 900 !important; line-height: 1 !important; content: ""; } body.wovallo-cart-page .woocommerce-message::before { border-color: rgba(162, 192, 206, 0.56) !important; background: rgba(162, 192, 206, 0.22) !important; content: "\2713" !important; } body.wovallo-cart-page .woocommerce-info::before { content: "i" !important; } body.wovallo-cart-page .woocommerce-error::before { border-color: rgba(255, 157, 126, 0.52) !important; background: rgba(255, 157, 126, 0.16) !important; content: "!" !important; } body.wovallo-cart-page .woocommerce-info { border-color: rgba(255, 157, 126, 0.32) !important; } body.wovallo-cart-page .woocommerce-error { border-color: rgba(255, 157, 126, 0.38) !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 157, 126, 0.08)), #ffffff !important; } body.wovallo-cart-page .wc-block-components-notice-banner.is-success { border-color: rgba(162, 192, 206, 0.28) !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(250, 249, 246, 0.8)), #ffffff !important; } body.wovallo-cart-page .wc-block-components-notice-banner.is-info, body.wovallo-cart-page .wc-block-components-notice-banner.is-warning, body.wovallo-cart-page .wc-block-components-notice-banner.is-error { border-color: rgba(255, 157, 126, 0.38) !important; } body.wovallo-cart-page .wc-block-components-notice-banner > svg { width: 1.55rem !important; height: 1.55rem !important; min-width: 1.55rem !important; min-height: 1.55rem !important; align-self: center !important; border: 1px solid rgba(162, 192, 206, 0.56) !important; border-radius: 9999px !important; padding: 0.18rem !important; background-color: rgba(162, 192, 206, 0.22) !important; fill: #3a4750 !important; } body.wovallo-cart-page .wc-block-components-notice-banner.is-error > svg, body.wovallo-cart-page .wc-block-components-notice-banner.is-warning > svg, body.wovallo-cart-page .wc-block-components-notice-banner.is-info > svg { border-color: rgba(255, 157, 126, 0.52) !important; background-color: rgba(255, 157, 126, 0.16) !important; } body.wovallo-cart-page .wc-block-components-notice-banner > .wc-block-components-notice-banner__content { align-self: center !important; flex-basis: auto !important; padding-right: 0 !important; color: #3a4750 !important; } body.wovallo-cart-page .wc-block-components-notice-banner > .wc-block-components-button { color: #3a4750 !important; opacity: 0.58; transition: color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease; } body.wovallo-cart-page .wc-block-components-notice-banner > .wc-block-components-button:hover { color: #ff9d7e !important; opacity: 1; } body.wovallo-cart-page .woocommerce-message .button, body.wovallo-cart-page .woocommerce-info .button, body.wovallo-cart-page .woocommerce-error .button, body.wovallo-cart-page .woocommerce-message a, body.wovallo-cart-page .woocommerce-info a, body.wovallo-cart-page .woocommerce-error a, body.wovallo-cart-page .wc-block-components-notice-banner a, body.wovallo-cart-page .wc-block-components-notice-banner .wc-forward { float: none; min-height: auto; margin: 0 0 0 auto; border: 0; border-radius: 0.35rem; padding: 0 !important; background: transparent; box-shadow: none; color: #3a4750 !important; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(255, 157, 126, 0.52); text-decoration-thickness: 2px; text-underline-offset: 0.22em; transition: color 0.2s ease, text-decoration-color 0.2s ease, box-shadow 0.2s ease; } body.wovallo-cart-page .woocommerce-message .button:hover, body.wovallo-cart-page .woocommerce-info .button:hover, body.wovallo-cart-page .woocommerce-error .button:hover, body.wovallo-cart-page .woocommerce-message a:hover, body.wovallo-cart-page .woocommerce-info a:hover, body.wovallo-cart-page .woocommerce-error a:hover, body.wovallo-cart-page .wc-block-components-notice-banner a:hover, body.wovallo-cart-page .wc-block-components-notice-banner .wc-forward:hover { color: #ff9d7e !important; text-decoration-color: #ff9d7e; } body.wovallo-cart-page .wovallo-cart-layout { display: grid; gap: 1.4rem; } body.wovallo-cart-page .wovallo-cart-items, body.wovallo-cart-page .wovallo-cart-summary, body.wovallo-cart-page .wovallo-cart-empty { border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 1rem; background: rgba(255, 255, 255, 0.82); box-shadow: 0 18px 52px rgba(58, 71, 80, 0.07); } body.wovallo-cart-page .wovallo-cart-items { padding: 0.75rem; } body.wovallo-cart-page .wovallo-cart-items-header { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-content: space-between; padding: 0.55rem 0.55rem 1rem; } body.wovallo-cart-page .wovallo-cart-items-header h2, body.wovallo-cart-page .wovallo-cart-summary h2, body.wovallo-cart-page .wovallo-cart-empty h2, body.wovallo-cart-page .wovallo-cart-section-heading h2 { margin: 0; color: #3a4750; font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 800; line-height: 1.12; } body.wovallo-cart-page .wovallo-cart-items-header a { border-radius: 0.35rem; color: #3a4750; font-size: 0.9rem; font-weight: 800; text-decoration: none; text-underline-offset: 0.26em; transition: color 0.2s ease, text-decoration-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } body.wovallo-cart-page .wovallo-cart-items-header a:hover { color: #ff9d7e; text-decoration: underline; text-decoration-color: rgba(255, 157, 126, 0.58); transform: translateY(-1px); } body.wovallo-cart-page .wovallo-cart-items-header a:focus { outline: none; } body.wovallo-cart-page .wovallo-cart-items-header a:focus-visible { color: #3a4750; outline: none; box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.18); text-decoration: underline; text-decoration-color: rgba(255, 157, 126, 0.72); } body.wovallo-cart-page .wovallo-cart-item { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0.55rem; border-top: 1px solid rgba(162, 192, 206, 0.18); transition: opacity 0.2s ease, transform 0.2s ease; } body.wovallo-cart-page .wovallo-cart-item.is-removing { opacity: 0.58; transform: scale(0.99); } body.wovallo-cart-page .wovallo-cart-item-media { display: block; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.85rem; background: rgba(162, 192, 206, 0.12); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.wovallo-cart-page .wovallo-cart-item-media:hover { border-color: rgba(255, 157, 126, 0.5); box-shadow: 0 12px 28px rgba(58, 71, 80, 0.1); transform: translateY(-1px); } body.wovallo-cart-page .wovallo-cart-item-img, body.wovallo-cart-page .wovallo-cart-item-media img { width: 100%; height: 100%; object-fit: cover; } body.wovallo-cart-page .wovallo-cart-item-body { display: grid; gap: 1rem; min-width: 0; } body.wovallo-cart-page .wovallo-cart-item h3 { margin: 0 0 0.4rem; color: #3a4750; font-size: 1.05rem; font-weight: 800; line-height: 1.35; } body.wovallo-cart-page .wovallo-cart-item h3 a { color: inherit; text-decoration: none; transition: color 0.2s ease; } body.wovallo-cart-page .wovallo-cart-item h3 a:hover { color: #a2c0ce; } body.wovallo-cart-page .wovallo-cart-item-meta { margin-bottom: 0.65rem; color: rgba(58, 71, 80, 0.78); font-size: 0.88rem; line-height: 1.5; } body.wovallo-cart-page .wovallo-cart-item-meta dl, body.wovallo-cart-page .wovallo-cart-item-meta p { margin: 0; } body.wovallo-cart-page .wovallo-cart-item-meta dt, body.wovallo-cart-page .wovallo-cart-item-meta dd { display: inline; margin: 0; } body.wovallo-cart-page .wovallo-cart-item-price, body.wovallo-cart-page .wovallo-cart-product-price { color: #3a4750; font-weight: 800; } body.wovallo-cart-page .wovallo-cart-item-price del, body.wovallo-cart-page .wovallo-cart-product-price del { color: rgba(58, 71, 80, 0.4); font-weight: 500; } body.wovallo-cart-page .wovallo-cart-item-price ins, body.wovallo-cart-page .wovallo-cart-product-price ins { color: #ff9d7e; text-decoration: none; } body.wovallo-cart-page .wovallo-cart-item-controls { display: grid; gap: 0.85rem; align-content: start; } body.wovallo-cart-page .wovallo-cart-quantity { display: inline-grid; grid-template-columns: 2.55rem 3.1rem 2.55rem; width: max-content; min-height: 2.7rem; overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.34); border-radius: 9999px; background: #ffffff; transition: border-color 0.2s ease, box-shadow 0.2s ease; } body.wovallo-cart-page .wovallo-cart-quantity:focus-within { border-color: rgba(255, 157, 126, 0.72); box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.14); } body.wovallo-cart-page .wovallo-cart-qty-button, body.wovallo-cart-page .wovallo-cart-qty-input { min-width: 2.55rem; min-height: 2.55rem; border: 0; background: transparent; color: #3a4750; font: inherit; font-weight: 800; } body.wovallo-cart-page .wovallo-cart-qty-button { cursor: pointer; outline: none; transition: color 0.2s ease, background-color 0.2s ease; } body.wovallo-cart-page .wovallo-cart-qty-button:focus, body.wovallo-cart-page .wovallo-cart-qty-button:focus-visible { outline: none; box-shadow: none; } body.wovallo-cart-page .wovallo-cart-qty-button:hover { background: rgba(162, 192, 206, 0.18); color: #ff9d7e; } body.wovallo-cart-page .wovallo-cart-qty-input { width: 3.1rem; padding: 0; text-align: center; appearance: textfield; outline: none; box-shadow: none; } body.wovallo-cart-page .wovallo-cart-qty-input:focus, body.wovallo-cart-page .wovallo-cart-qty-input:focus-visible { outline: none; box-shadow: none; } body.wovallo-cart-page .wovallo-cart-qty-input::-webkit-outer-spin-button, body.wovallo-cart-page .wovallo-cart-qty-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } body.wovallo-cart-page .wovallo-cart-item-subtotal { display: flex; gap: 0.45rem; align-items: baseline; color: rgba(58, 71, 80, 0.78); font-size: 0.86rem; } body.wovallo-cart-page .wovallo-cart-item-subtotal strong { color: #3a4750; font-size: 1rem; } body.wovallo-cart-page .wovallo-cart-remove { width: max-content; color: rgba(58, 71, 80, 0.78); font-size: 0.86rem; font-weight: 800; text-decoration: none; transition: color 0.2s ease, transform 0.2s ease; } body.wovallo-cart-page .wovallo-cart-remove:hover { color: #ff9d7e; transform: translateY(-1px); } body.wovallo-cart-page .wovallo-cart-actions { display: grid; gap: 1rem; align-items: end; padding: 1rem 0.55rem 0.55rem; border-top: 1px solid rgba(162, 192, 206, 0.18); } body.wovallo-cart-page .wovallo-cart-coupon label { display: block; margin: 0 0 0.42rem; color: rgba(58, 71, 80, 0.78); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; } body.wovallo-cart-page .wovallo-cart-coupon-row { display: grid; gap: 0.55rem; align-items: end; } body.wovallo-cart-page .wovallo-cart-coupon input { min-height: 2.55rem; width: 100%; border: 1px solid rgba(162, 192, 206, 0.36); border-radius: 9999px; background: #ffffff; color: #3a4750; font: inherit; padding: 0.58rem 0.9rem; outline: none; font-size: 0.9rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } body.wovallo-cart-page .wovallo-cart-coupon input:focus { border-color: #ff9d7e; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.1); } body.wovallo-cart-page .wovallo-cart-button { display: inline-flex; min-height: 2.9rem; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 9999px; cursor: pointer; padding: 0.75rem 1.15rem; font-size: 0.92rem; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease; } body.wovallo-cart-page .wovallo-cart-actions .wovallo-cart-button { min-height: 2.55rem; padding: 0.58rem 1rem; font-size: 0.86rem; } body.wovallo-cart-page .wovallo-cart-button-primary { border-color: #3a4750; background: #3a4750; color: #ffffff; } body.wovallo-cart-page .wovallo-cart-button-secondary { border-color: rgba(162, 192, 206, 0.58); background: #ffffff; color: #3a4750; } body.wovallo-cart-page .wovallo-cart-button:hover:not(:disabled) { border-color: #ff9d7e; background: #ff9d7e; color: #3a4750; box-shadow: 0 10px 24px rgba(255, 157, 126, 0.24); transform: translateY(-1px); } body.wovallo-cart-page .wovallo-cart-button:disabled { cursor: not-allowed; border-color: rgba(162, 192, 206, 0.5); background: rgba(162, 192, 206, 0.2); color: rgba(58, 71, 80, 0.72); opacity: 1; transform: none; } body.wovallo-cart-page .wovallo-cart-button:disabled:hover { border-color: rgba(162, 192, 206, 0.5); background: rgba(162, 192, 206, 0.2); color: rgba(58, 71, 80, 0.72); box-shadow: none; transform: none; } body.wovallo-cart-page .wovallo-cart-update.is-needed { border-color: #a2c0ce; background: rgba(162, 192, 206, 0.16); color: #3a4750; } body.wovallo-cart-page .wovallo-cart-update.is-needed:hover:not(:disabled) { border-color: #a2c0ce; background: #a2c0ce; color: #3a4750; box-shadow: 0 10px 24px rgba(162, 192, 206, 0.28); } body.wovallo-cart-page .wovallo-cart-summary { padding: 1rem; } body.wovallo-cart-page .wovallo-cart-summary-lines { display: grid; gap: 0.8rem; margin: 1.25rem 0; } body.wovallo-cart-page .wovallo-cart-summary-lines > div, body.wovallo-cart-page .wovallo-cart-summary-total { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; color: rgba(58, 71, 80, 0.78); } body.wovallo-cart-page .wovallo-cart-summary-lines strong, body.wovallo-cart-page .wovallo-cart-summary-total strong { color: #3a4750; text-align: right; white-space: nowrap; } body.wovallo-cart-page .woocommerce-Price-amount, body.wovallo-cart-page .woocommerce-Price-amount bdi { display: inline-flex; align-items: baseline; white-space: nowrap; } body.wovallo-cart-page .wovallo-cart-discount strong, body.wovallo-cart-page .wovallo-cart-discount a { color: #ff9d7e; } body.wovallo-cart-page .wovallo-cart-summary-total { margin-top: 1rem; border-top: 1px solid rgba(162, 192, 206, 0.24); padding-top: 1rem; font-size: 1.15rem; font-weight: 800; } body.wovallo-cart-page .wovallo-cart-summary .wovallo-cart-checkout { width: 100%; margin-top: 1rem; } body.wovallo-cart-page .wovallo-cart-summary-note { margin: 0.9rem 0 0; color: rgba(58, 71, 80, 0.78); font-size: 0.84rem; line-height: 1.55; text-align: center; } body.wovallo-cart-page .wovallo-cart-mobile-checkout { position: fixed; right: 1rem; bottom: 1rem; left: 1rem; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; border: 1px solid rgba(162, 192, 206, 0.28); border-radius: 1rem; padding: 0.75rem; background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 48px rgba(58, 71, 80, 0.18); backdrop-filter: blur(16px); } body.wovallo-cart-page .wovallo-cart-mobile-checkout span { display: block; color: rgba(58, 71, 80, 0.78); font-size: 0.76rem; font-weight: 800; text-transform: uppercase; } body.wovallo-cart-page .wovallo-cart-mobile-checkout strong { display: block; color: #3a4750; font-size: 1rem; font-weight: 800; white-space: nowrap; } body.wovallo-cart-page .wovallo-cart-empty { padding: 2rem 1rem; text-align: center; } body.wovallo-cart-page .wovallo-cart-empty-mark { display: inline-grid; width: 4rem; height: 4rem; margin-bottom: 1.15rem; place-items: center; border-radius: 9999px; background: rgba(255, 157, 126, 0.12); color: #ff9d7e; } body.wovallo-cart-page .wovallo-cart-empty-mark svg { width: 1.8rem; height: 1.8rem; } body.wovallo-cart-page .wovallo-cart-empty p { max-width: 32rem; margin: 0.7rem auto 1.35rem; color: rgba(58, 71, 80, 0.78); line-height: 1.65; } body.wovallo-cart-page .wovallo-cart-empty-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } body.wovallo-cart-page .wovallo-cart-recommendations { margin-top: 3rem; } body.wovallo-cart-page .wovallo-cart-section-heading { margin-bottom: 1.2rem; } body.wovallo-cart-page .wovallo-cart-products-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } body.wovallo-cart-page .wovallo-cart-product-card { overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 1rem; background: #ffffff; box-shadow: 0 14px 38px rgba(58, 71, 80, 0.07); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.wovallo-cart-page .wovallo-cart-product-card:hover { border-color: rgba(255, 157, 126, 0.5); box-shadow: 0 18px 42px rgba(58, 71, 80, 0.11); transform: translateY(-2px); } body.wovallo-cart-page .wovallo-cart-product-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(162, 192, 206, 0.12); } body.wovallo-cart-page .wovallo-cart-product-img, body.wovallo-cart-page .wovallo-cart-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.24s ease; } body.wovallo-cart-page .wovallo-cart-product-card:hover .wovallo-cart-product-img, body.wovallo-cart-page .wovallo-cart-product-card:hover .wovallo-cart-product-media img { transform: scale(1.04); } body.wovallo-cart-page .wovallo-cart-product-placeholder { display: grid; width: 100%; height: 100%; place-items: center; } body.wovallo-cart-page .wovallo-cart-product-placeholder span { width: 3rem; height: 3rem; border: 2px solid rgba(162, 192, 206, 0.34); border-radius: 9999px; } body.wovallo-cart-page .wovallo-cart-product-body { padding: 1rem; } body.wovallo-cart-page .wovallo-cart-product-body h3 { margin: 0 0 0.5rem; color: #3a4750; font-size: 1rem; font-weight: 800; line-height: 1.35; } body.wovallo-cart-page .wovallo-cart-product-body h3 a { color: inherit; text-decoration: none; transition: color 0.2s ease; } body.wovallo-cart-page .wovallo-cart-product-card:hover h3 a { color: #a2c0ce; } body.wovallo-cart-page .wovallo-cart-button:focus-visible, body.wovallo-cart-page .wovallo-cart-item-media:focus-visible, body.wovallo-cart-page .wovallo-cart-item h3 a:focus-visible, body.wovallo-cart-page .wovallo-cart-remove:focus-visible, body.wovallo-cart-page .wovallo-cart-product-media:focus-visible, body.wovallo-cart-page .wovallo-cart-product-body h3 a:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } body.wovallo-cart-page .woocommerce-message a:focus-visible, body.wovallo-cart-page .woocommerce-info a:focus-visible, body.wovallo-cart-page .woocommerce-error a:focus-visible, body.wovallo-cart-page .wc-block-components-notice-banner a:focus-visible, body.wovallo-cart-page .wc-block-components-notice-banner .wc-forward:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.18); } body.wovallo-cart-page .wc-block-components-notice-banner > .wc-block-components-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.18) !important; } @media (min-width: 640px) { body.wovallo-cart-page .wovallo-cart-coupon-row { grid-template-columns: minmax(0, 1fr) auto; } body.wovallo-cart-page .wovallo-cart-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 760px) { body.wovallo-cart-page .wovallo-cart-item { grid-template-columns: 8rem minmax(0, 1fr); padding: 1.15rem 0.75rem; } body.wovallo-cart-page .wovallo-cart-item-body { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } body.wovallo-cart-page .wovallo-cart-item-controls { justify-items: end; text-align: right; } body.wovallo-cart-page .wovallo-cart-actions { grid-template-columns: minmax(0, 1fr) auto; } } @media (min-width: 1024px) { body.wovallo-cart-page .wovallo-cart-main { padding-top: 8.5rem; } body.wovallo-cart-page .wovallo-cart-hero .wovallo-cart-shell { grid-template-columns: minmax(0, 1fr) auto; } body.wovallo-cart-page .wovallo-cart-layout { grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem); align-items: start; } body.wovallo-cart-page .wovallo-cart-summary { position: sticky; top: calc(var(--wovallo-admin-bar-height, 0px) + 6.5rem); } body.wovallo-cart-page .wovallo-cart-mobile-checkout { display: none; } } @media (max-width: 1023px) { body.wovallo-cart-page .wovallo-cart-main { padding-bottom: 8rem; } } @media (max-width: 520px) { body.wovallo-cart-page .wovallo-cart-main { padding-top: 6rem; } body.wovallo-cart-page .wovallo-cart-item { grid-template-columns: 5.75rem minmax(0, 1fr); gap: 0.8rem; } body.wovallo-cart-page .wovallo-cart-empty-actions, body.wovallo-cart-page .wovallo-cart-actions { display: grid; } body.wovallo-cart-page .wovallo-cart-empty-actions .wovallo-cart-button, body.wovallo-cart-page .wovallo-cart-actions .wovallo-cart-button, body.wovallo-cart-page .wovallo-cart-update { width: 100%; } body.wovallo-cart-page .wovallo-cart-mobile-checkout { grid-template-columns: 1fr; } body.wovallo-cart-page .wovallo-cart-mobile-checkout .wovallo-cart-button { width: 100%; } } @media (prefers-reduced-motion: reduce) { body.wovallo-cart-page .wovallo-cart-items-header a, body.wovallo-cart-page .wovallo-cart-item, body.wovallo-cart-page .wovallo-cart-item-media, body.wovallo-cart-page .wovallo-cart-item h3 a, body.wovallo-cart-page .wovallo-cart-qty-button, body.wovallo-cart-page .wovallo-cart-remove, body.wovallo-cart-page .wovallo-cart-coupon input, body.wovallo-cart-page .wovallo-cart-button, body.wovallo-cart-page .wovallo-cart-product-card, body.wovallo-cart-page .wovallo-cart-product-img, body.wovallo-cart-page .wovallo-cart-product-media img, body.wovallo-cart-page .wovallo-cart-product-body h3 a, body.wovallo-cart-page .woocommerce-message, body.wovallo-cart-page .woocommerce-info, body.wovallo-cart-page .woocommerce-error, body.wovallo-cart-page .wc-block-components-notice-banner, body.wovallo-cart-page .wc-block-components-notice-banner > .wc-block-components-button { transition: none !important; } body.wovallo-cart-page .wovallo-cart-items-header a:hover, body.wovallo-cart-page .wovallo-cart-item.is-removing, body.wovallo-cart-page .wovallo-cart-item-media:hover, body.wovallo-cart-page .wovallo-cart-remove:hover, body.wovallo-cart-page .wovallo-cart-button:hover, body.wovallo-cart-page .wovallo-cart-product-card:hover, body.wovallo-cart-page .wovallo-cart-product-card:hover .wovallo-cart-product-img, body.wovallo-cart-page .wovallo-cart-product-card:hover .wovallo-cart-product-media img { transform: none; } } /* ========================================================================== My Account Page ========================================================================== */ body.wovallo-account-page .wp-site-blocks { --wp--style--block-gap: 0 !important; gap: 0 !important; } body.wovallo-account-page .wp-site-blocks > header:first-child, body.wovallo-account-page .wp-site-blocks > header:first-child .wp-block-group { margin-bottom: 0 !important; background-color: #faf9f6 !important; } body.wovallo-account-page .wovallo-account-main { min-height: 0; padding-top: 1.5rem; background: #faf9f6; color: #3a4750; } body.wovallo-account-page .wovallo-account-shell { width: min(100% - 2rem, 1180px); margin: 0 auto; } body.wovallo-account-page .wovallo-account-hero { padding: 1rem 0 0.75rem; } body.wovallo-account-page .wovallo-account-hero .wovallo-account-shell { display: grid; gap: 0.9rem; align-items: center; } body.wovallo-account-page .wovallo-account-kicker { margin: 0 0 0.35rem; color: rgba(58, 71, 80, 0.78); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.wovallo-account-page .wovallo-account-hero h1 { max-width: 44rem; margin: 0; color: #3a4750; font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1; } body.wovallo-account-page .wovallo-account-lede { max-width: 43rem; margin: 0.55rem 0 0; color: rgba(58, 71, 80, 0.78); font-size: 1rem; line-height: 1.55; } body.wovallo-account-page .wovallo-account-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } body.wovallo-account-page .wovallo-account-content { padding: 0.75rem 0 2rem; } body.wovallo-account-page .wovallo-account-button, body.wovallo-account-page .woocommerce .button, body.wovallo-account-page .woocommerce button.button, body.wovallo-account-page .woocommerce input.button { display: inline-flex; min-height: 2.9rem; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 9999px; cursor: pointer; padding: 0.75rem 1.15rem; font: inherit; font-size: 0.92rem; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease; } body.wovallo-account-page .wovallo-account-button-primary, body.wovallo-account-page .woocommerce .button, body.wovallo-account-page .woocommerce button.button, body.wovallo-account-page .woocommerce input.button { border-color: #3a4750; background: #3a4750; color: #ffffff; } body.wovallo-account-page .wovallo-account-button-secondary { border-color: rgba(162, 192, 206, 0.58); background: #ffffff; color: #3a4750; } body.wovallo-account-page .wovallo-account-button-danger { border-color: rgba(255, 157, 126, 0.5); background: rgba(255, 157, 126, 0.12); color: #3a4750; } body.wovallo-account-page .wovallo-account-button-danger:hover { border-color: #ff9d7e; background: #ff9d7e; color: #3a4750; } body.wovallo-account-page .wovallo-account-button:hover, body.wovallo-account-page .woocommerce .button:hover:not(:disabled), body.wovallo-account-page .woocommerce button.button:hover:not(:disabled), body.wovallo-account-page .woocommerce input.button:hover:not(:disabled) { border-color: #ff9d7e; background: #ff9d7e; color: #3a4750; box-shadow: 0 10px 24px rgba(255, 157, 126, 0.22); transform: translateY(-1px); } body.wovallo-account-page .woocommerce .button:disabled, body.wovallo-account-page .woocommerce button.button:disabled, body.wovallo-account-page .woocommerce input.button:disabled { cursor: not-allowed; border-color: rgba(162, 192, 206, 0.42) !important; background: rgba(162, 192, 206, 0.18) !important; color: rgba(58, 71, 80, 0.55) !important; box-shadow: none !important; opacity: 1; transform: none !important; } body.wovallo-account-page .wovallo-account-auth-panel, body.wovallo-account-page .wovallo-account-panel, body.wovallo-account-page .wovallo-account-sidebar, body.wovallo-account-page .wovallo-account-card { border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 0.5rem; background: rgba(255, 255, 255, 0.86); box-shadow: 0 16px 42px rgba(58, 71, 80, 0.07); } body.wovallo-account-page .wovallo-account-auth-panel { width: min(100%, 40rem); margin: 0 auto; padding: 1.1rem; } body.wovallo-account-page .wovallo-account-auth-panel .woocommerce { max-width: 100%; margin: 0 auto; } body.wovallo-account-page .wovallo-account-auth-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; margin: 0 0 1.15rem; border: 1px solid rgba(162, 192, 206, 0.26); border-radius: 9999px; background: rgba(162, 192, 206, 0.12); padding: 0.3rem; } body.wovallo-account-page .wovallo-account-auth-tabs button { min-height: 2.6rem; border: 1px solid transparent; border-radius: 9999px; background: transparent; color: rgba(58, 71, 80, 0.7); cursor: pointer; font: inherit; font-size: 0.92rem; font-weight: 800; line-height: 1.2; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } body.wovallo-account-page .wovallo-account-auth-tabs button:hover { color: #3a4750; } body.wovallo-account-page .wovallo-account-auth-tabs button.is-active { border-color: rgba(255, 255, 255, 0.82); background: #ffffff; color: #3a4750; box-shadow: 0 8px 20px rgba(58, 71, 80, 0.08); } body.wovallo-account-page .wovallo-account-auth-tabs button:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } body.wovallo-account-page .wovallo-account-auth-panel .u-columns { display: block; } body.wovallo-account-page .wovallo-account-auth-panel .u-column1, body.wovallo-account-page .wovallo-account-auth-panel .u-column2 { width: 100% !important; float: none !important; min-width: 0; border: 0; border-radius: 0; padding: 0; background: transparent; } body.wovallo-account-page .wovallo-account-auth-panel .u-column2 { display: none; } body.wovallo-account-page .wovallo-account-auth-enhanced .u-column2:not([hidden]) { display: block; } body.wovallo-account-page .wovallo-account-auth-panel [hidden] { display: none !important; } body.wovallo-account-page .woocommerce h2, body.wovallo-account-page .woocommerce h3, body.wovallo-account-page .wovallo-account-card h2, body.wovallo-account-page .wovallo-account-card h3, body.wovallo-account-page .wovallo-account-endpoint-heading h2 { margin: 0; color: #3a4750; font-weight: 800; line-height: 1.15; } body.wovallo-account-page .woocommerce h2, body.wovallo-account-page .wovallo-account-endpoint-heading h2 { font-size: clamp(1.45rem, 3vw, 2rem); } body.wovallo-account-page .woocommerce form.login, body.wovallo-account-page .woocommerce form.register, body.wovallo-account-page .woocommerce form.lost_reset_password, body.wovallo-account-page .woocommerce form.edit-account, body.wovallo-account-page .woocommerce form.woocommerce-EditAccountForm, body.wovallo-account-page .woocommerce-address-fields, body.wovallo-account-page .woocommerce-EditAccountForm { margin: 1rem 0 0; border: 0; border-radius: 0; padding: 0; } body.wovallo-account-page .wovallo-account-auth-panel .woocommerce form.login, body.wovallo-account-page .wovallo-account-auth-panel .woocommerce form.register { display: grid; gap: 0.35rem; } body.wovallo-account-page .wovallo-account-auth-panel .woocommerce-privacy-policy-text p { margin: 0.35rem 0 0.85rem; color: rgba(58, 71, 80, 0.72); font-size: 0.98rem; line-height: 1.6; } body.wovallo-account-page .wovallo-account-auth-panel .woocommerce-form-login__rememberme { display: inline-flex; min-height: 2.25rem; align-items: center; gap: 0.45rem; margin: -0.15rem 0 0.35rem; } body.wovallo-account-page .wovallo-account-auth-panel .woocommerce-form-login__rememberme input { width: 1rem; height: 1rem; accent-color: #ff9d7e; } body.wovallo-account-page .wovallo-account-auth-panel .woocommerce-LostPassword { margin: 1rem 0 0; text-align: center; } body.wovallo-account-page .woocommerce form .form-row { position: relative; display: grid; gap: 0.4rem; margin: 0 0 0.9rem; padding: 0; } body.wovallo-account-page .woocommerce label { color: rgba(58, 71, 80, 0.72); font-size: 0.82rem; font-weight: 800; line-height: 1.35; } body.wovallo-account-page .woocommerce .required { color: #ff9d7e; } body.wovallo-account-page .woocommerce input.input-text, body.wovallo-account-page .woocommerce input[type="email"], body.wovallo-account-page .woocommerce input[type="password"], body.wovallo-account-page .woocommerce input[type="text"], body.wovallo-account-page .woocommerce input[type="tel"], body.wovallo-account-page .woocommerce select, body.wovallo-account-page .woocommerce textarea { width: 100%; min-height: 3rem; border: 1px solid rgba(162, 192, 206, 0.36); border-radius: 0.75rem; background: #ffffff; color: #3a4750; font: inherit; font-size: 1rem; line-height: 1.45; padding: 0.72rem 0.9rem; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } body.wovallo-account-page .woocommerce textarea { min-height: 8rem; resize: vertical; } body.wovallo-account-page .woocommerce .password-input { position: relative; display: block; width: 100%; } body.wovallo-account-page .wovallo-account-password-field, body.wovallo-account-page .wovallo-account-password-input-wrap { position: relative; } body.wovallo-account-page .wovallo-account-password-input-wrap { display: block; width: 100%; } body.wovallo-account-page .woocommerce input:focus-visible, body.wovallo-account-page .woocommerce select:focus-visible, body.wovallo-account-page .woocommerce textarea:focus-visible { border-color: #ff9d7e; outline: none; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14), 0 8px 18px rgba(162, 192, 206, 0.14); } body.wovallo-account-page .woocommerce input:focus, body.wovallo-account-page .woocommerce select:focus, body.wovallo-account-page .woocommerce textarea:focus { border-color: #ff9d7e; outline: none; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14), 0 8px 18px rgba(162, 192, 206, 0.14); } body.wovallo-account-page .woocommerce .password-input input[type="password"], body.wovallo-account-page .woocommerce .password-input input[type="text"], body.wovallo-account-page .wovallo-account-password-input-wrap input[type="password"], body.wovallo-account-page .wovallo-account-password-input-wrap input[type="text"], body.wovallo-account-page .wovallo-account-password-field input[type="password"], body.wovallo-account-page .wovallo-account-password-field input[type="text"] { padding-right: 6.1rem; } body.wovallo-account-page .woocommerce .show-password-input, body.wovallo-account-page .wovallo-account-password-toggle { position: absolute; top: 50%; right: 0.55rem; bottom: auto; z-index: 3; display: inline-flex; width: auto; min-width: 4.3rem; min-height: 2rem; align-items: center; justify-content: center; border: 1px solid rgba(162, 192, 206, 0.34); border-radius: 9999px; background: #ffffff; color: #3a4750; cursor: pointer; font-family: inherit; font-size: 0.78rem; font-weight: 800; line-height: 1; padding: 0 0.72rem; transform: translateY(-50%); text-indent: 0; overflow: visible; opacity: 1; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } body.wovallo-account-page .woocommerce .show-password-input::after, body.wovallo-account-page .woocommerce .show-password-input::before { display: none !important; } body.wovallo-account-page .woocommerce .show-password-input.display-password::after { display: none !important; } body.wovallo-account-page .woocommerce .show-password-input[aria-label*="Hide"] { border-color: rgba(255, 157, 126, 0.5); background: rgba(255, 157, 126, 0.12); } body.wovallo-account-page .woocommerce .show-password-input:hover, body.wovallo-account-page .wovallo-account-password-toggle:hover { border-color: #a2c0ce; background: rgba(162, 192, 206, 0.14); } body.wovallo-account-page .wovallo-account-layout { display: grid; gap: 1rem; } body.wovallo-account-page .wovallo-account-sidebar { overflow: hidden; } body.wovallo-account-page .wovallo-account-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; padding: 0.65rem; scrollbar-width: none; } body.wovallo-account-page .wovallo-account-nav::-webkit-scrollbar { display: none; } body.wovallo-account-page .wovallo-account-nav a { display: inline-flex; min-width: 0; min-height: 2.85rem; align-items: center; justify-content: center; border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 9999px; background: #ffffff; color: #3a4750; font-size: 0.9rem; font-weight: 800; padding: 0.68rem 0.95rem; text-decoration: none; white-space: normal; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.wovallo-account-page .wovallo-account-nav a:hover { border-color: rgba(255, 157, 126, 0.52); color: #ff9d7e; transform: translateY(-1px); } body.wovallo-account-page .wovallo-account-nav a.is-active { border-color: #a2c0ce; background: #a2c0ce; color: #ffffff; } body.wovallo-account-page .wovallo-account-nav-label-short { display: none; } body.wovallo-account-page .wovallo-account-actions { display: grid; gap: 0.75rem; border-top: 1px solid rgba(162, 192, 206, 0.18); padding: 0.8rem 0.75rem 0.75rem; } body.wovallo-account-page .wovallo-account-actions-user { display: grid; min-width: 0; gap: 0.12rem; } body.wovallo-account-page .wovallo-account-actions-user span { color: rgba(58, 71, 80, 0.78); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.wovallo-account-page .wovallo-account-actions-user strong { overflow: hidden; color: #3a4750; font-size: 0.98rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } body.wovallo-account-page .wovallo-account-logout-link { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; border: 1px solid rgba(255, 157, 126, 0.46); border-radius: 9999px; background: rgba(255, 157, 126, 0.1); color: #3a4750; font-size: 0.9rem; font-weight: 800; line-height: 1.2; padding: 0.7rem 1rem; text-align: center; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.wovallo-account-page .wovallo-account-logout-link:hover { border-color: #ff9d7e; background: rgba(255, 157, 126, 0.18); box-shadow: 0 10px 22px rgba(255, 157, 126, 0.16); transform: translateY(-1px); } body.wovallo-account-page .wovallo-account-panel { min-width: 0; padding: 1rem; } body.wovallo-account-page .wovallo-account-dashboard-grid { display: grid; gap: 1rem; } body.wovallo-account-page .wovallo-account-card { display: grid; gap: 0.85rem; align-content: start; min-width: 0; padding: 1rem; } body.wovallo-account-page .wovallo-account-card-feature { background: linear-gradient(135deg, rgba(162, 192, 206, 0.15), rgba(255, 255, 255, 0.92)), #ffffff; } body.wovallo-account-page .wovallo-account-card-heading { display: flex; gap: 0.75rem; align-items: start; justify-content: space-between; } body.wovallo-account-page .wovallo-account-card-heading a, body.wovallo-account-page .woocommerce-MyAccount-content a, body.wovallo-account-page .woocommerce-LostPassword a { border-radius: 0.35rem; color: #3a4750; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(255, 157, 126, 0.5); text-decoration-thickness: 2px; text-underline-offset: 0.22em; transition: color 0.2s ease, text-decoration-color 0.2s ease, box-shadow 0.2s ease; } body.wovallo-account-page .wovallo-account-card-heading a:hover, body.wovallo-account-page .woocommerce-MyAccount-content a:hover, body.wovallo-account-page .woocommerce-LostPassword a:hover { color: #ff9d7e; text-decoration-color: #ff9d7e; } body.wovallo-account-page .wovallo-account-card p, body.wovallo-account-page .wovallo-account-card address { margin: 0; color: rgba(58, 71, 80, 0.78); font-style: normal; line-height: 1.65; } body.wovallo-account-page .wovallo-account-order-number { color: #3a4750 !important; font-size: 1.15rem; font-weight: 800; text-decoration: none; } body.wovallo-account-page .wovallo-account-order-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: space-between; } body.wovallo-account-page .wovallo-account-order-meta span { border-radius: 9999px; background: rgba(162, 192, 206, 0.18); color: #3a4750; font-size: 0.8rem; font-weight: 800; padding: 0.35rem 0.65rem; } body.wovallo-account-page .wovallo-account-order-meta strong { color: #3a4750; font-size: 1.1rem; } body.wovallo-account-page .wovallo-account-native-content { margin-top: 1.25rem; } body.wovallo-account-page .wovallo-account-native-content--edit-account { margin-top: 1rem; } body.wovallo-account-page .wovallo-account-details-form { display: grid; gap: 1rem; margin-top: 0 !important; } body.wovallo-account-page .wovallo-account-details-form input.input-text, body.wovallo-account-page .wovallo-account-details-form input[type="email"], body.wovallo-account-page .wovallo-account-details-form input[type="password"], body.wovallo-account-page .wovallo-account-details-form input[type="text"], body.wovallo-account-page .wovallo-account-details-form input[type="tel"], body.wovallo-account-page .wovallo-account-details-form select, body.wovallo-account-page .wovallo-account-details-form textarea { width: 100%; min-height: 3rem; border: 1px solid rgba(162, 192, 206, 0.36) !important; border-radius: 0.75rem !important; background: #ffffff; color: #3a4750; font: inherit; font-size: 1rem; line-height: 1.45; padding: 0.72rem 0.9rem; outline: 0 !important; box-shadow: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } body.wovallo-account-page .wovallo-account-details-form input.input-text:focus, body.wovallo-account-page .wovallo-account-details-form input.input-text:focus-visible, body.wovallo-account-page .wovallo-account-details-form input[type="email"]:focus, body.wovallo-account-page .wovallo-account-details-form input[type="email"]:focus-visible, body.wovallo-account-page .wovallo-account-details-form input[type="password"]:focus, body.wovallo-account-page .wovallo-account-details-form input[type="password"]:focus-visible, body.wovallo-account-page .wovallo-account-details-form input[type="text"]:focus, body.wovallo-account-page .wovallo-account-details-form input[type="text"]:focus-visible, body.wovallo-account-page .wovallo-account-details-form input[type="tel"]:focus, body.wovallo-account-page .wovallo-account-details-form input[type="tel"]:focus-visible, body.wovallo-account-page .wovallo-account-details-form select:focus, body.wovallo-account-page .wovallo-account-details-form select:focus-visible, body.wovallo-account-page .wovallo-account-details-form textarea:focus, body.wovallo-account-page .wovallo-account-details-form textarea:focus-visible { border-color: #ff9d7e !important; outline: 0 !important; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14), 0 8px 18px rgba(162, 192, 206, 0.14) !important; } body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid input.input-text, body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid input[type="email"], body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid input[type="password"], body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid input[type="text"], body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid input[type="tel"], body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid select, body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid textarea { border-color: rgba(255, 157, 126, 0.72) !important; background: rgba(255, 157, 126, 0.035); box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.08) !important; } body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid input.input-text:focus, body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid input.input-text:focus-visible, body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid input[type="email"]:focus, body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid input[type="email"]:focus-visible, body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid input[type="password"]:focus, body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid input[type="password"]:focus-visible, body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid input[type="text"]:focus, body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid input[type="text"]:focus-visible, body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid input[type="tel"]:focus, body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid input[type="tel"]:focus-visible, body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid select:focus, body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid select:focus-visible, body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid textarea:focus, body.wovallo-account-page .wovallo-account-details-form .wovallo-account-field-invalid textarea:focus-visible { border-color: #ff9d7e !important; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14), 0 8px 18px rgba(162, 192, 206, 0.14) !important; } body.wovallo-account-page .wovallo-account-details-form .password-input input[type="password"], body.wovallo-account-page .wovallo-account-details-form .password-input input[type="text"], body.wovallo-account-page .wovallo-account-details-form .wovallo-account-password-input-wrap input[type="password"], body.wovallo-account-page .wovallo-account-details-form .wovallo-account-password-input-wrap input[type="text"], body.wovallo-account-page .wovallo-account-details-form .wovallo-account-password-field input[type="password"], body.wovallo-account-page .wovallo-account-details-form .wovallo-account-password-field input[type="text"] { padding-right: 6.1rem; } body.wovallo-account-page .wovallo-account-details-card { display: grid; gap: 1rem; border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: #ffffff; padding: 1rem; } body.wovallo-account-page .wovallo-account-details-card--profile { background: linear-gradient(135deg, rgba(162, 192, 206, 0.14), rgba(255, 255, 255, 0.96) 42%), #ffffff; } body.wovallo-account-page .wovallo-account-details-card-heading { display: flex; gap: 1rem; align-items: start; justify-content: space-between; border-bottom: 1px solid rgba(162, 192, 206, 0.18); padding-bottom: 0.85rem; } body.wovallo-account-page .wovallo-account-details-card-heading h3, body.wovallo-account-page .wovallo-account-details-card legend { margin: 0; color: #3a4750; font-size: clamp(1.2rem, 2.3vw, 1.5rem); font-weight: 800; line-height: 1.15; } body.wovallo-account-page .wovallo-account-details-grid { display: grid; gap: 0.9rem; } body.wovallo-account-page .wovallo-account-details-form .form-row { float: none !important; width: 100% !important; margin-bottom: 0; } body.wovallo-account-page .wovallo-account-details-form .clear { display: none; } body.wovallo-account-page .wovallo-account-details-form fieldset { display: grid; gap: 0.75rem; min-width: 0; margin: 0; border: 0; padding: 0; } body.wovallo-account-page .wovallo-account-field-note, body.wovallo-account-page .woocommerce form.edit-account span em { display: block; margin-top: 0.15rem; color: rgba(58, 71, 80, 0.78); font-size: 0.9rem; font-style: normal; line-height: 1.5; } body.wovallo-account-page .wovallo-account-field-error { display: flex; gap: 0.42rem; align-items: flex-start; width: 100%; margin-top: 0.45rem; border: 0; border-left: 3px solid rgba(255, 157, 126, 0.82); border-radius: 0; background: transparent; color: #3a4750; font-size: 0.88rem; font-weight: 650; line-height: 1.45; padding: 0.02rem 0 0.02rem 0.55rem; } body.wovallo-account-page .wovallo-account-field-error:focus, body.wovallo-account-page .wovallo-account-field-error:focus-visible { outline: none; } body.wovallo-account-page .wovallo-account-field-error::before { display: inline-grid; flex: 0 0 auto; place-items: center; width: 1rem; height: 1rem; margin-top: 0.16rem; border-radius: 9999px; background: rgba(255, 157, 126, 0.2); color: #3a4750; content: "!"; font-size: 0.68rem; font-weight: 900; line-height: 1; } body.wovallo-account-page .wovallo-account-password-note { max-width: 38rem; margin: -0.2rem 0 0.1rem; } body.wovallo-account-page .wovallo-account-details-actions { display: flex; gap: 0.75rem; align-items: center; justify-content: flex-end; border: 1px solid rgba(162, 192, 206, 0.2); border-radius: 0.5rem; background: rgba(255, 255, 255, 0.88); padding: 0.85rem; } body.wovallo-account-page .wovallo-account-details-actions button[name="save_account_details"] { min-width: 11rem; min-height: 3.15rem; border-color: #a2c0ce !important; border-radius: 9999px; background: #a2c0ce !important; color: #3a4750 !important; font-size: 0.95rem; font-weight: 800; letter-spacing: 0; padding: 0.85rem 1.6rem !important; box-shadow: 0 10px 24px rgba(162, 192, 206, 0.24); } body.wovallo-account-page .wovallo-account-details-actions button[name="save_account_details"]:hover { border-color: #ff9d7e !important; background: #ff9d7e !important; color: #3a4750 !important; box-shadow: 0 12px 26px rgba(255, 157, 126, 0.24); transform: translateY(-1px); } body.wovallo-account-page .wovallo-account-details-actions button[name="save_account_details"]:disabled, body.wovallo-account-page .wovallo-account-details-actions button[name="save_account_details"]:disabled:hover { border-color: rgba(162, 192, 206, 0.42) !important; background: rgba(162, 192, 206, 0.18) !important; color: rgba(58, 71, 80, 0.55) !important; box-shadow: none !important; transform: none !important; } body.wovallo-account-page .wovallo-account-details-actions button[name="save_account_details"]:active { box-shadow: 0 6px 16px rgba(255, 157, 126, 0.18); transform: translateY(0); } body.wovallo-account-page .wovallo-account-details-actions button[name="save_account_details"]:focus, body.wovallo-account-page .wovallo-account-details-actions button[name="save_account_details"]:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.18), 0 10px 24px rgba(162, 192, 206, 0.24); } body.wovallo-account-page .wovallo-account-section-heading { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; } body.wovallo-account-page .wovallo-account-section-heading h2 { margin: 0; color: #3a4750; font-size: clamp(1.45rem, 3vw, 2.15rem); font-weight: 800; line-height: 1.1; } body.wovallo-account-page .wovallo-account-section-kicker { margin: 0 0 0.35rem; color: rgba(58, 71, 80, 0.78); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.wovallo-account-page .wovallo-account-order-groups { display: grid; gap: 1rem; } body.wovallo-account-page .wovallo-account-order-group { border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: rgba(255, 255, 255, 0.72); overflow: hidden; } body.wovallo-account-page .wovallo-account-order-group-heading { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(162, 192, 206, 0.18); background: rgba(162, 192, 206, 0.12); padding: 0.85rem 1rem; } body.wovallo-account-page .wovallo-account-order-group-heading h3 { margin: 0; color: #3a4750; font-size: 1rem; font-weight: 800; } body.wovallo-account-page .wovallo-account-order-group-heading span { display: inline-flex; min-width: 2rem; min-height: 2rem; align-items: center; justify-content: center; border-radius: 9999px; background: #ffffff; color: #3a4750; font-size: 0.82rem; font-weight: 800; } body.wovallo-account-page .wovallo-account-order-list { display: grid; gap: 0.75rem; padding: 0.85rem; } body.wovallo-account-page .wovallo-account-order-card { display: grid; gap: 0.85rem; border: 1px solid rgba(162, 192, 206, 0.18); border-radius: 0.5rem; background: #ffffff; padding: 1rem; } body.wovallo-account-page .wovallo-account-order-card-main, body.wovallo-account-page .wovallo-account-order-summary { display: flex; gap: 0.85rem; align-items: center; justify-content: space-between; } body.wovallo-account-page .wovallo-account-order-card-main p, body.wovallo-account-page .wovallo-account-order-summary span { margin: 0; color: rgba(58, 71, 80, 0.78); font-size: 0.92rem; line-height: 1.45; } body.wovallo-account-page .wovallo-account-status-pill { display: inline-flex; min-height: 2rem; align-items: center; justify-content: center; border: 1px solid rgba(162, 192, 206, 0.34); border-radius: 9999px; background: rgba(162, 192, 206, 0.16); color: #3a4750; font-size: 0.78rem; font-weight: 800; padding: 0.35rem 0.7rem; white-space: nowrap; } body.wovallo-account-page .wovallo-account-order-summary { border-top: 1px solid rgba(162, 192, 206, 0.16); padding-top: 0.8rem; } body.wovallo-account-page .wovallo-account-order-summary strong { color: #3a4750; font-size: 1.05rem; } body.wovallo-account-page .wovallo-account-order-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } body.wovallo-account-page .wovallo-account-order-action { display: inline-flex; box-sizing: border-box; min-width: 7.25rem; min-height: 2.75rem; align-items: center; justify-content: center; border: 1px solid rgba(162, 192, 206, 0.42); border-radius: 9999px; background: #ffffff; color: #3a4750; font-size: 0.9rem; font-weight: 800; line-height: 1; padding: 0 1.25rem; text-decoration: none; touch-action: manipulation; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.wovallo-account-page .wovallo-account-order-action.pay { border-color: rgba(58, 71, 80, 0.96); background: #3a4750; color: #ffffff; box-shadow: 0 0.45rem 1rem rgba(58, 71, 80, 0.14); } body.wovallo-account-page .wovallo-account-order-action.view { border-color: rgba(162, 192, 206, 0.62); background: rgba(162, 192, 206, 0.08); color: #3a4750; } body.wovallo-account-page .wovallo-account-order-action.pay:hover { border-color: #ff9d7e; background: #ff9d7e; color: #3a4750; box-shadow: 0 0.55rem 1.2rem rgba(255, 157, 126, 0.2); transform: translateY(-1px); } body.wovallo-account-page .wovallo-account-order-action.view:hover { border-color: rgba(255, 157, 126, 0.68); background: rgba(255, 157, 126, 0.12); color: #3a4750; box-shadow: 0 0.45rem 1rem rgba(58, 71, 80, 0.08); transform: translateY(-1px); } body.wovallo-account-page .wovallo-account-empty-state { display: grid; justify-items: start; gap: 0.8rem; border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: linear-gradient(135deg, rgba(162, 192, 206, 0.13), rgba(255, 255, 255, 0.88)), #ffffff; padding: 1.2rem; } body.wovallo-account-page .wovallo-account-empty-state h3, body.wovallo-account-page .wovallo-account-empty-state p { margin: 0; } body.wovallo-account-page .wovallo-account-empty-state h3 { color: #3a4750; font-size: 1.2rem; font-weight: 800; } body.wovallo-account-page .wovallo-account-empty-state p { color: rgba(58, 71, 80, 0.78); line-height: 1.6; } body.wovallo-account-page .wovallo-account-dashboard-grid + .wovallo-account-native-content { border-top: 1px solid rgba(162, 192, 206, 0.18); padding-top: 1.1rem; } body.wovallo-account-page .woocommerce-MyAccount-navigation { display: none; } body.wovallo-account-page .woocommerce-MyAccount-content { width: 100%; float: none; color: rgba(58, 71, 80, 0.72); line-height: 1.65; } body.wovallo-account-page .woocommerce-MyAccount-content p:first-child { margin-top: 0; } body.wovallo-account-page .woocommerce table.shop_table, body.wovallo-account-page .woocommerce table.account-orders-table { overflow: hidden; width: 100%; border: 1px solid rgba(162, 192, 206, 0.22); border-collapse: separate; border-radius: 0.5rem; border-spacing: 0; background: #ffffff; } body.wovallo-account-page .woocommerce table.shop_table th, body.wovallo-account-page .woocommerce table.shop_table td { border: 0; border-bottom: 1px solid rgba(162, 192, 206, 0.16); padding: 0.9rem; color: #3a4750; text-align: left; } body.wovallo-account-page .woocommerce table.shop_table th { background: rgba(162, 192, 206, 0.12); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; } body.wovallo-account-page .woocommerce table.shop_table tr:last-child td { border-bottom: 0; } body.wovallo-account-page .woocommerce-Address { border: 1px solid rgba(162, 192, 206, 0.2); border-radius: 0.5rem; padding: 1rem; background: #ffffff; } body.wovallo-account-page .woocommerce-Address-title { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; } body.wovallo-account-page .woocommerce-Address-title h3 { float: none; } body.wovallo-account-page .woocommerce-Address-title a { float: none; } body.wovallo-account-page .wovallo-account-native-content--view-order { display: grid; gap: 1rem; margin-top: 1rem; } body.wovallo-account-page .wovallo-account-native-content--view-order > p:first-child { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: rgba(162, 192, 206, 0.08); color: rgba(58, 71, 80, 0.74); font-size: 0.98rem; line-height: 1.6; padding: 0.95rem 1rem; } body.wovallo-account-page .wovallo-account-native-content--view-order mark { display: inline-flex; min-height: 2rem; align-items: center; border: 1px solid rgba(162, 192, 206, 0.38); border-radius: 9999px; background: #ffffff; color: #3a4750; font-weight: 800; padding: 0.25rem 0.7rem; } body.wovallo-account-page .wovallo-account-native-content--view-order mark.order-status { border-color: rgba(255, 157, 126, 0.45); background: rgba(255, 157, 126, 0.12); } body.wovallo-account-page .wovallo-account-native-content--view-order .woocommerce-order-details, body.wovallo-account-page .wovallo-account-native-content--view-order .woocommerce-customer-details, body.wovallo-account-page .wovallo-account-native-content--view-order .woocommerce-OrderUpdates { margin: 0; } body.wovallo-account-page .wovallo-account-native-content--view-order .woocommerce-order-details, body.wovallo-account-page .wovallo-account-native-content--view-order .woocommerce-customer-details { border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: #ffffff; padding: 1rem; } body.wovallo-account-page .wovallo-account-native-content--view-order .woocommerce-order-details__title, body.wovallo-account-page .wovallo-account-native-content--view-order .woocommerce-column__title, body.wovallo-account-page .wovallo-account-native-content--view-order > h2 { margin: 0 0 0.9rem; color: #3a4750; font-size: clamp(1.2rem, 2.4vw, 1.55rem); font-weight: 800; line-height: 1.2; } body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details { margin: 0; border-color: rgba(162, 192, 206, 0.24); box-shadow: none; table-layout: fixed; } body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details .product-name, body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details tfoot th { width: 70%; } body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details .product-total, body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details tfoot td { width: 30%; } body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details th, body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details td { padding: 1rem; vertical-align: middle; } body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details thead th { background: rgba(162, 192, 206, 0.14); color: #3a4750; font-size: 0.78rem; letter-spacing: 0.08em; } body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details .product-total, body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details td.product-total, body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details tfoot td { text-align: right; } body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details .product-name a { color: #3a4750; font-weight: 800; text-decoration-color: rgba(255, 157, 126, 0.45); } body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details tfoot th { background: #ffffff; box-sizing: border-box; font-size: 0.92rem; letter-spacing: 0; padding-right: calc(40% + 1rem); text-align: right; text-transform: none; } body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details tfoot tr:last-child th, body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details tfoot tr:last-child td { border-bottom: 0; font-size: 1.05rem; font-weight: 800; } body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details tfoot:first-of-type th, body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details tfoot:first-of-type td { font-size: 0.92rem; } body.wovallo-account-page .wovallo-account-native-content--view-order .order-actions-button.button, body.wovallo-account-page .wovallo-account-native-content--view-order .woocommerce-button.button { box-sizing: border-box; min-width: 8.75rem; min-height: 3.1rem; padding: 0 1.55rem; border-radius: 9999px; font-size: 0.95rem; font-weight: 800; line-height: 1; touch-action: manipulation; } body.wovallo-account-page .wovallo-account-native-content--view-order .order-actions-button.pay { display: inline-flex !important; min-width: 8.75rem !important; min-height: 3.1rem !important; align-items: center; justify-content: center; border-color: rgba(255, 157, 126, 0.72) !important; background: #ff9d7e !important; color: #3a4750 !important; box-shadow: 0 0.65rem 1.4rem rgba(255, 157, 126, 0.24); } body.wovallo-account-page .wovallo-account-native-content--view-order .order-actions-button.pay:hover { border-color: #a2c0ce !important; background: #a2c0ce !important; color: #3a4750 !important; box-shadow: 0 0.75rem 1.6rem rgba(162, 192, 206, 0.28); transform: translateY(-1px); } body.wovallo-account-page .wovallo-account-native-content--view-order .woocommerce-customer-details address { margin: 0; border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: rgba(250, 249, 246, 0.64); color: rgba(58, 71, 80, 0.72); font-size: 0.98rem; font-style: normal; line-height: 1.7; padding: 1rem; } body.wovallo-account-page .wovallo-account-native-content--view-order .woocommerce-columns--addresses { display: grid; gap: 1rem; } body.wovallo-account-page .wovallo-account-native-content--view-order .woocommerce-column { width: auto; float: none; } body.wovallo-account-page .wovallo-account-native-content--view-order .woocommerce-OrderUpdates { display: grid; gap: 0.75rem; padding: 0; list-style: none; } body.wovallo-account-page .wovallo-account-native-content--view-order .woocommerce-OrderUpdate { border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: #ffffff; padding: 1rem; } body.wovallo-account-page .wovallo-account-native-content--view-order .wovallo-order-details-card { display: grid; gap: 1rem; border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: #ffffff; padding: 1rem; } body.wovallo-account-page .wovallo-order-details-header { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; } body.wovallo-account-page .wovallo-order-details-header .woocommerce-order-details__title { margin-bottom: 0; } body.wovallo-account-page .wovallo-order-details-kicker { margin: 0 0 0.35rem; color: rgba(58, 71, 80, 0.78); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } body.wovallo-account-page .wovallo-order-details-count { display: inline-flex; min-height: 2rem; align-items: center; justify-content: center; border: 1px solid rgba(162, 192, 206, 0.38); border-radius: 9999px; background: rgba(162, 192, 206, 0.12); color: #3a4750; font-size: 0.78rem; font-weight: 800; padding: 0.35rem 0.7rem; white-space: nowrap; } body.wovallo-account-page .wovallo-order-details-layout { display: grid; gap: 1rem; } body.wovallo-account-page .wovallo-order-products { display: grid; gap: 0.75rem; min-width: 0; } body.wovallo-account-page .wovallo-order-product-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: start; border: 1px solid rgba(162, 192, 206, 0.18); border-radius: 0.5rem; background: rgba(250, 249, 246, 0.5); padding: 1rem; } body.wovallo-account-page .wovallo-order-product-main { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 0.85rem; align-items: center; min-width: 0; } body.wovallo-account-page .wovallo-order-product-image { display: flex; width: 4.75rem; height: 4.75rem; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: linear-gradient(135deg, rgba(162, 192, 206, 0.14), rgba(255, 157, 126, 0.08)), #faf9f6; box-shadow: 0 0.5rem 1.2rem rgba(58, 71, 80, 0.06); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.wovallo-account-page a.wovallo-order-product-image:hover { border-color: rgba(255, 157, 126, 0.58); box-shadow: 0 0.65rem 1.35rem rgba(255, 157, 126, 0.16); transform: translateY(-1px); } body.wovallo-account-page a.wovallo-order-product-image:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } body.wovallo-account-page .wovallo-order-product-image-img { display: block; width: 100%; height: 100%; object-fit: cover; } body.wovallo-account-page .wovallo-order-product-copy { display: grid; gap: 0.4rem; min-width: 0; } body.wovallo-account-page .wovallo-order-product-name { margin: 0; color: #3a4750; font-size: clamp(1.05rem, 2vw, 1.28rem); font-weight: 800; line-height: 1.25; } body.wovallo-account-page .wovallo-order-product-name a { display: inline; border-radius: 0.28rem; color: inherit; outline: none; text-decoration-color: rgba(255, 157, 126, 0.48); text-decoration-thickness: 2px; text-underline-offset: 0.2em; transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, text-decoration-color 0.2s ease; } body.wovallo-account-page .wovallo-order-product-name a:hover { color: #ff9d7e; text-decoration-color: #ff9d7e; } body.wovallo-account-page .wovallo-order-product-name a:focus-visible { background: rgba(255, 157, 126, 0.12); color: #3a4750; box-shadow: 0 0 0 0.22rem rgba(255, 157, 126, 0.14); text-decoration-color: #ff9d7e; } body.wovallo-account-page .wovallo-order-product-quantity { display: inline-flex; width: fit-content; min-height: 1.85rem; align-items: center; border: 1px solid rgba(162, 192, 206, 0.28); border-radius: 9999px; background: #ffffff; color: rgba(58, 71, 80, 0.7); font-size: 0.82rem; font-weight: 800; line-height: 1; padding: 0.35rem 0.65rem; } body.wovallo-account-page .wovallo-order-product-row .wc-item-meta { display: grid; gap: 0.2rem; margin: 0.2rem 0 0; padding: 0; color: rgba(58, 71, 80, 0.78); font-size: 0.9rem; list-style: none; } body.wovallo-account-page .wovallo-order-product-row .wc-item-meta li { display: flex; flex-wrap: wrap; gap: 0.35rem; } body.wovallo-account-page .wovallo-order-product-row .wc-item-meta p { margin: 0; } body.wovallo-account-page .wovallo-order-product-total { color: #3a4750; font-size: clamp(1.05rem, 2vw, 1.28rem); font-variant-numeric: tabular-nums; line-height: 1.25; text-align: right; white-space: nowrap; } body.wovallo-account-page .wovallo-order-purchase-note { border: 1px solid rgba(255, 157, 126, 0.28); border-radius: 0.5rem; background: rgba(255, 157, 126, 0.08); color: rgba(58, 71, 80, 0.72); padding: 0.85rem 1rem; } body.wovallo-account-page .wovallo-order-purchase-note p { margin: 0; } body.wovallo-account-page .wovallo-order-summary { display: grid; gap: 1rem; min-width: 0; align-content: start; border: 1px solid rgba(162, 192, 206, 0.2); border-radius: 0.5rem; background: linear-gradient(135deg, rgba(162, 192, 206, 0.12), rgba(255, 255, 255, 0.94)), #ffffff; padding: 1rem; } body.wovallo-account-page .wovallo-order-summary-totals { display: grid; gap: 0.65rem; } body.wovallo-account-page .wovallo-order-summary-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; color: rgba(58, 71, 80, 0.78); font-size: 0.95rem; } body.wovallo-account-page .wovallo-order-summary-row span { font-weight: 800; } body.wovallo-account-page .wovallo-order-summary-row strong { color: #3a4750; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } body.wovallo-account-page .wovallo-order-summary-row--order_total { border-top: 1px solid rgba(162, 192, 206, 0.22); margin-top: 0.2rem; padding-top: 0.85rem; } body.wovallo-account-page .wovallo-order-summary-row--order_total span, body.wovallo-account-page .wovallo-order-summary-row--order_total strong { color: #3a4750; font-size: 1.1rem; font-weight: 800; } body.wovallo-account-page .wovallo-order-summary-note { display: grid; gap: 0.4rem; border-top: 1px solid rgba(162, 192, 206, 0.18); padding-top: 0.85rem; } body.wovallo-account-page .wovallo-order-summary-note span { color: #3a4750; font-size: 0.9rem; font-weight: 800; } body.wovallo-account-page .wovallo-order-summary-note p { margin: 0; color: rgba(58, 71, 80, 0.78); line-height: 1.55; } body.wovallo-account-page .wovallo-order-actions { display: grid; gap: 0.75rem; border-top: 1px solid rgba(162, 192, 206, 0.18); padding-top: 0.95rem; } body.wovallo-account-page .wovallo-order-actions p { margin: 0; color: #3a4750; font-size: 0.9rem; font-weight: 800; } body.wovallo-account-page .wovallo-order-actions .order-actions-button.button { width: 100%; min-width: 0 !important; } body.wovallo-account-page .wovallo-order-actions .order-actions-button.pay { border-color: rgba(255, 157, 126, 0.78) !important; background: #ff9d7e !important; color: #3a4750 !important; } body.wovallo-account-page .wovallo-account-address-workspace { display: grid; gap: 1rem; } body.wovallo-account-page .wovallo-account-address-heading { margin-bottom: 0; } body.wovallo-account-page .wovallo-account-shipping-card { display: grid; gap: 1rem; border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 0.5rem; background: linear-gradient(135deg, rgba(250, 249, 246, 0.94), rgba(255, 255, 255, 0.98)), #ffffff; box-shadow: 0 16px 38px rgba(58, 71, 80, 0.08); padding: 1.1rem; } body.wovallo-account-page .wovallo-account-shipping-card.is-empty { border-style: dashed; background: linear-gradient(135deg, rgba(162, 192, 206, 0.13), rgba(255, 255, 255, 0.94)), #ffffff; } body.wovallo-account-page .wovallo-account-shipping-card-main { display: flex; gap: 1rem; align-items: start; justify-content: space-between; } body.wovallo-account-page .wovallo-account-shipping-card h3 { margin: 0.45rem 0 0; color: #3a4750; font-size: clamp(1.2rem, 2.5vw, 1.55rem); font-weight: 800; line-height: 1.15; } body.wovallo-account-page .wovallo-account-shipping-card p, body.wovallo-account-page .wovallo-account-shipping-card address { margin: 0; color: rgba(58, 71, 80, 0.78); font-style: normal; line-height: 1.65; } body.wovallo-account-page .wovallo-account-shipping-card address { border-top: 1px solid rgba(162, 192, 206, 0.18); color: #3a4750; padding-top: 0.95rem; } body.wovallo-account-page .wovallo-account-address-badge, body.wovallo-account-page .wovallo-account-address-status { display: inline-flex; min-height: 2rem; align-items: center; justify-content: center; border-radius: 9999px; font-size: 0.76rem; font-weight: 800; line-height: 1; padding: 0.4rem 0.7rem; white-space: nowrap; } body.wovallo-account-page .wovallo-account-address-badge { border: 1px solid rgba(162, 192, 206, 0.35); background: rgba(162, 192, 206, 0.14); color: #3a4750; } body.wovallo-account-page .wovallo-account-address-status { border: 1px solid rgba(255, 157, 126, 0.38); background: rgba(255, 157, 126, 0.12); color: #3a4750; } body.wovallo-account-page .wovallo-account-address-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; } body.wovallo-account-page .wovallo-account-delete-address-form { display: inline-flex; margin: 0; } body.wovallo-account-page .wovallo-account-delete-address-form button[disabled] { cursor: wait; opacity: 0.72; transform: none; } .wovallo-account-modal-open { overflow: hidden; } .wovallo-account-confirm { position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; padding: calc(var(--wovallo-admin-bar-height, 0px) + 1rem) 1rem 1rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, visibility 0.22s ease; } .wovallo-account-confirm.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .wovallo-account-confirm__backdrop { position: absolute; inset: 0; background: rgba(58, 71, 80, 0.5); backdrop-filter: blur(4px); } .wovallo-account-confirm__dialog { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; width: min(100%, 29rem); border: 1px solid rgba(162, 192, 206, 0.38); border-radius: 0.75rem; background: linear-gradient(145deg, rgba(250, 249, 246, 0.98), rgba(255, 255, 255, 0.98)), #faf9f6; box-shadow: 0 24px 70px rgba(58, 71, 80, 0.24); color: #3a4750; padding: 1.15rem; transform: translateY(0.6rem) scale(0.985); transition: transform 0.22s ease; } .wovallo-account-confirm.is-open .wovallo-account-confirm__dialog { transform: translateY(0) scale(1); } .wovallo-account-confirm__mark { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border: 1px solid rgba(255, 157, 126, 0.42); border-radius: 50%; background: rgba(255, 157, 126, 0.14); } .wovallo-account-confirm__mark span { display: block; width: 1rem; height: 1rem; border-radius: 50%; background: #ff9d7e; box-shadow: 0 0 0 0.35rem rgba(255, 157, 126, 0.18), 0 8px 18px rgba(255, 157, 126, 0.26); } .wovallo-account-confirm__content { min-width: 0; } .wovallo-account-confirm__eyebrow, .wovallo-account-confirm__dialog h2, .wovallo-account-confirm__dialog p { margin: 0; } .wovallo-account-confirm__eyebrow { color: rgba(58, 71, 80, 0.78); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } .wovallo-account-confirm__dialog h2 { margin-top: 0.3rem; color: #3a4750; font-size: 1.35rem; font-weight: 850; letter-spacing: 0; line-height: 1.18; } .wovallo-account-confirm__dialog p:not(.wovallo-account-confirm__eyebrow) { margin-top: 0.55rem; color: rgba(58, 71, 80, 0.72); font-size: 0.95rem; line-height: 1.6; } .wovallo-account-confirm__actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 0.65rem; justify-content: flex-end; margin-top: 0.25rem; } .wovallo-account-confirm__button { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; border-radius: 9999px; cursor: pointer; font: inherit; font-size: 0.92rem; font-weight: 800; letter-spacing: 0; padding: 0.75rem 1rem; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease; } .wovallo-account-confirm__button--secondary { border: 1px solid rgba(162, 192, 206, 0.46); background: #ffffff; color: #3a4750; } .wovallo-account-confirm__button--secondary:hover { border-color: #a2c0ce; background: rgba(162, 192, 206, 0.12); transform: translateY(-1px); } .wovallo-account-confirm__button--danger { border: 1px solid #ff9d7e; background: #ff9d7e; color: #3a4750; box-shadow: 0 12px 26px rgba(255, 157, 126, 0.24); } .wovallo-account-confirm__button--danger:hover { border-color: #3a4750; background: #3a4750; color: #ffffff; transform: translateY(-1px); } .wovallo-account-confirm__button:active { transform: translateY(0); } .wovallo-account-confirm__button:focus-visible, .wovallo-account-confirm__dialog:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } body.wovallo-account-page .wovallo-account-address-edit .wovallo-account-shipping-form { margin-top: 0; border: 1px solid rgba(162, 192, 206, 0.26); border-radius: 0.85rem; background: linear-gradient(180deg, rgba(250, 249, 246, 0.72), rgba(255, 255, 255, 0.98)), #ffffff; box-shadow: 0 18px 44px rgba(58, 71, 80, 0.08); padding: 1.15rem; } body.wovallo-account-page .wovallo-account-address-edit .wovallo-account-shipping-form form { display: grid; gap: 1rem; margin: 0; } body.wovallo-account-page .wovallo-account-address-edit .wovallo-account-shipping-form form > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body.wovallo-account-page .wovallo-account-address-edit .woocommerce-address-fields { margin-top: 0; } body.wovallo-account-page .wovallo-account-address-edit .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } body.wovallo-account-page .wovallo-account-address-edit .form-row { float: none; clear: none; width: auto; min-width: 0; margin: 0; } body.wovallo-account-page .wovallo-account-address-edit .form-row-wide, body.wovallo-account-page .wovallo-account-address-edit .form-row.address-field, body.wovallo-account-page .wovallo-account-address-edit #shipping_address_1_field, body.wovallo-account-page .wovallo-account-address-edit #shipping_address_2_field { grid-column: 1 / -1; } body.wovallo-account-page .wovallo-account-address-edit .clear { display: none; } body.wovallo-account-page .wovallo-account-address-edit label { color: #3a4750; font-size: 0.86rem; letter-spacing: 0; transition: color 0.18s ease; } body.wovallo-account-page .wovallo-account-address-edit .form-row:focus-within label { color: #ff9d7e; } body.wovallo-account-page .wovallo-account-address-edit .woocommerce-input-wrapper { display: block; width: 100%; } body.wovallo-account-page .wovallo-account-address-edit input.input-text, body.wovallo-account-page .wovallo-account-address-edit input[type="text"], body.wovallo-account-page .wovallo-account-address-edit input[type="tel"], body.wovallo-account-page .wovallo-account-address-edit input[type="email"], body.wovallo-account-page .wovallo-account-address-edit select, body.wovallo-account-page .wovallo-account-address-edit textarea { margin: 0; box-sizing: border-box; border-color: rgba(162, 192, 206, 0.34); border-radius: 0.875rem; background: rgba(255, 255, 255, 0.96); box-shadow: inset 0 1px 0 rgba(250, 249, 246, 0.9); } body.wovallo-account-page .wovallo-account-address-edit input.input-text:hover, body.wovallo-account-page .wovallo-account-address-edit input[type="text"]:hover, body.wovallo-account-page .wovallo-account-address-edit input[type="tel"]:hover, body.wovallo-account-page .wovallo-account-address-edit input[type="email"]:hover, body.wovallo-account-page .wovallo-account-address-edit select:hover, body.wovallo-account-page .wovallo-account-address-edit textarea:hover { border-color: rgba(162, 192, 206, 0.66); background: #ffffff; } body.wovallo-account-page .wovallo-account-address-edit input.input-text:focus, body.wovallo-account-page .wovallo-account-address-edit input[type="text"]:focus, body.wovallo-account-page .wovallo-account-address-edit input[type="tel"]:focus, body.wovallo-account-page .wovallo-account-address-edit input[type="email"]:focus, body.wovallo-account-page .wovallo-account-address-edit select:focus, body.wovallo-account-page .wovallo-account-address-edit textarea:focus, body.wovallo-account-page .wovallo-account-address-edit input.input-text:focus-visible, body.wovallo-account-page .wovallo-account-address-edit input[type="text"]:focus-visible, body.wovallo-account-page .wovallo-account-address-edit input[type="tel"]:focus-visible, body.wovallo-account-page .wovallo-account-address-edit input[type="email"]:focus-visible, body.wovallo-account-page .wovallo-account-address-edit select:focus-visible, body.wovallo-account-page .wovallo-account-address-edit textarea:focus-visible { border-color: #ff9d7e; background: #ffffff; outline: none; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14), 0 8px 22px rgba(58, 71, 80, 0.06); } body.wovallo-account-page .wovallo-account-address-edit input:-webkit-autofill, body.wovallo-account-page .wovallo-account-address-edit input:-webkit-autofill:hover, body.wovallo-account-page .wovallo-account-address-edit input:-webkit-autofill:focus { border-color: rgba(162, 192, 206, 0.5); -webkit-text-fill-color: #3a4750; box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 4px rgba(255, 157, 126, 0.12); transition: background-color 9999s ease-out 0s; } body.wovallo-account-page .wovallo-account-address-edit .select2-container { width: 100% !important; } body.wovallo-account-page .wovallo-account-address-edit .select2-container--default .select2-selection--single { display: flex; min-height: 3rem; align-items: center; border: 1px solid rgba(162, 192, 206, 0.36); border-radius: 0.875rem; background: rgba(255, 255, 255, 0.95); box-shadow: inset 0 1px 0 rgba(250, 249, 246, 0.9); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } body.wovallo-account-page .wovallo-account-address-edit .select2-container--default .select2-selection--single:hover { border-color: rgba(162, 192, 206, 0.66); background: #ffffff; } body.wovallo-account-page .wovallo-account-address-edit .select2-container--default.select2-container--focus .select2-selection--single, body.wovallo-account-page .wovallo-account-address-edit .select2-container--default.select2-container--open .select2-selection--single { border-color: #ff9d7e; background: #ffffff; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14), 0 8px 22px rgba(58, 71, 80, 0.06); } body.wovallo-account-page .wovallo-account-address-edit .select2-container--default .select2-selection--single .select2-selection__rendered { width: 100%; color: #3a4750; line-height: 1.45; padding: 0.72rem 2.4rem 0.72rem 0.9rem; } body.wovallo-account-page .wovallo-account-address-edit .select2-container--default .select2-selection--single .select2-selection__placeholder { color: rgba(58, 71, 80, 0.48); } body.wovallo-account-page .wovallo-account-address-edit .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; right: 0.7rem; width: 1.2rem; height: 1.2rem; transform: translateY(-50%); } body.wovallo-account-page .select2-container--open .select2-dropdown { overflow: hidden; border: 1px solid rgba(255, 157, 126, 0.36); border-radius: 0.875rem; background: #ffffff; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.1), 0 18px 38px rgba(58, 71, 80, 0.14); } body.wovallo-account-page .select2-container--open .select2-dropdown--below { margin-top: 0; border-top-left-radius: 0.875rem !important; border-top-right-radius: 0.875rem !important; transform: translateY(0.65rem); } body.wovallo-account-page .select2-container--open .select2-dropdown--above { margin-top: 0; border-bottom-left-radius: 0.875rem !important; border-bottom-right-radius: 0.875rem !important; transform: translateY(-0.65rem); } body.wovallo-account-page .select2-search--dropdown { border-bottom: 1px solid rgba(162, 192, 206, 0.16); background: #ffffff; padding: 0.85rem 0.85rem 0.7rem; } body.wovallo-account-page .select2-container--default .select2-search--dropdown .select2-search__field { width: 100% !important; height: 2.35rem; min-height: 0; box-sizing: border-box; border: 1px solid rgba(162, 192, 206, 0.34); border-radius: 0.65rem; background: #faf9f6; color: #3a4750; font: inherit; line-height: 1.2; outline: none; padding: 0.45rem 0.7rem; } body.wovallo-account-page .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: #ff9d7e; background: #ffffff; box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.12); } body.wovallo-account-page .select2-results__option { color: #3a4750; font-size: 0.94rem; line-height: 1.35; padding: 0.62rem 0.85rem; } body.wovallo-account-page .select2-container--default .select2-results__option--highlighted[aria-selected], body.wovallo-account-page .select2-container--default .select2-results__option--highlighted[data-selected] { background: rgba(162, 192, 206, 0.18); color: #3a4750; } body.wovallo-account-page .select2-container--default .select2-results__option[aria-selected="true"], body.wovallo-account-page .select2-container--default .select2-results__option[data-selected="true"] { background: rgba(255, 157, 126, 0.16); color: #3a4750; } body.wovallo-account-page .wovallo-account-address-edit .woocommerce-address-fields > p { display: flex; justify-content: flex-end; margin: 1.15rem 0 0; border-top: 1px solid rgba(162, 192, 206, 0.2); padding-top: 1rem; } body.wovallo-account-page .wovallo-account-address-edit .woocommerce-address-fields button.button { min-width: 12rem; min-height: 3.15rem; border-radius: 9999px; border-color: #a2c0ce !important; background: #a2c0ce !important; color: #3a4750 !important; box-shadow: 0 10px 24px rgba(162, 192, 206, 0.24); } body.wovallo-account-page .wovallo-account-address-edit .woocommerce-address-fields button.button:hover { border-color: #ff9d7e !important; background: #ff9d7e !important; color: #3a4750 !important; box-shadow: 0 12px 26px rgba(255, 157, 126, 0.24); transform: translateY(-1px); } body.wovallo-account-page .wovallo-account-address-edit .woocommerce-address-fields button.button:disabled, body.wovallo-account-page .wovallo-account-address-edit .woocommerce-address-fields button.button:disabled:hover { border-color: rgba(162, 192, 206, 0.42) !important; background: rgba(162, 192, 206, 0.18) !important; color: rgba(58, 71, 80, 0.55) !important; box-shadow: none !important; transform: none !important; } body.wovallo-account-page .wovallo-account-address-edit .woocommerce-address-fields button.button:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(255, 157, 126, 0.18); } body.wovallo-account-page .wovallo-account-address-edit .woocommerce-address-fields button.button:focus, body.wovallo-account-page .wovallo-account-address-edit .woocommerce-address-fields button.button:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.18), 0 10px 24px rgba(162, 192, 206, 0.24); } body.wovallo-account-page .woocommerce-message, body.wovallo-account-page .woocommerce-info, body.wovallo-account-page .woocommerce-error { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0 0 1rem; border: 1px solid rgba(162, 192, 206, 0.26); border-left: 4px solid #a2c0ce; border-radius: 0.5rem; background: #ffffff; color: #3a4750; line-height: 1.5; padding: 0.9rem 1rem; list-style: none; } body.wovallo-account-page .woocommerce-error { border-left-color: #ff9d7e; } body.wovallo-account-page .woocommerce-message::before, body.wovallo-account-page .woocommerce-info::before, body.wovallo-account-page .woocommerce-error::before { display: none; } body.wovallo-account-page .woocommerce-password-strength, body.wovallo-account-page .woocommerce-password-hint { border-radius: 0.5rem; margin-top: 0.45rem; padding: 0.65rem 0.75rem; color: #3a4750; font-size: 0.88rem; } body.wovallo-account-page .wovallo-account-button:focus-visible, body.wovallo-account-page .wovallo-account-nav a:focus-visible, body.wovallo-account-page .wovallo-account-card-heading a:focus-visible, body.wovallo-account-page .wovallo-account-order-number:focus-visible, body.wovallo-account-page .wovallo-account-order-action:focus-visible, body.wovallo-account-page .wovallo-account-logout-link:focus-visible, body.wovallo-account-page .woocommerce-MyAccount-content a:focus-visible, body.wovallo-account-page .woocommerce-LostPassword a:focus-visible, body.wovallo-account-page .woocommerce .button:focus-visible, body.wovallo-account-page .woocommerce button.button:focus-visible, body.wovallo-account-page .woocommerce input.button:focus-visible, body.wovallo-account-page .wovallo-account-password-toggle:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } @media (min-width: 768px) { body.wovallo-account-page .wovallo-account-auth-panel { padding: 1.3rem; } body.wovallo-account-page .wovallo-account-auth-panel .u-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.wovallo-account-page .wovallo-account-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.wovallo-account-page .wovallo-account-details-card { padding: 1.15rem; } body.wovallo-account-page .wovallo-account-details-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { body.wovallo-account-page .wovallo-account-main { padding-top: 2rem; } body.wovallo-account-page .wovallo-account-hero .wovallo-account-shell { grid-template-columns: minmax(0, 1fr) auto; } body.wovallo-account-page .wovallo-account-layout { grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); align-items: start; } body.wovallo-account-page .wovallo-account-sidebar { position: sticky; top: calc(var(--wovallo-admin-bar-height, 0px) + 5.75rem); } body.wovallo-account-page .wovallo-account-nav { display: grid; grid-template-columns: 1fr; overflow: visible; } body.wovallo-account-page .wovallo-account-nav a { justify-content: flex-start; border-radius: 0.5rem; } body.wovallo-account-page .wovallo-account-actions { padding: 0.9rem; } body.wovallo-account-page .wovallo-account-logout-link { justify-content: flex-start; border-radius: 0.5rem; } body.wovallo-account-page .wovallo-account-panel { padding: 1.25rem; } body.wovallo-account-page .wovallo-account-native-content--edit-account { max-width: 58rem; } body.wovallo-account-page .wovallo-account-details-card { padding: 1.25rem; } body.wovallo-account-page .wovallo-account-dashboard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.wovallo-account-page .wovallo-account-card-feature { grid-column: span 2; } body.wovallo-account-page .wovallo-order-details-layout { grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem); align-items: start; } } @media (max-width: 640px) { body.wovallo-account-page .wovallo-account-main { padding-top: 0.75rem; } body.wovallo-account-page .wovallo-account-shell { width: min(100% - 1.2rem, 1180px); } body.wovallo-account-page .wovallo-account-hero { padding-top: 0.6rem; } body.wovallo-account-page .wovallo-account-hero .wovallo-account-shell { gap: 0.7rem; } body.wovallo-account-page .wovallo-account-kicker { margin-bottom: 0.3rem; font-size: 0.72rem; } body.wovallo-account-page .wovallo-account-hero h1 { font-size: 1.9rem; line-height: 1.05; } body.wovallo-account-page .wovallo-account-lede { margin-top: 0.45rem; font-size: 0.96rem; line-height: 1.48; } body.wovallo-account-page .wovallo-account-hero-actions { display: grid; grid-template-columns: 1fr; gap: 0.65rem; } body.wovallo-account-page .wovallo-account-content { padding-top: 0.55rem; } body.wovallo-account-page .wovallo-account-sidebar, body.wovallo-account-page .wovallo-account-panel { border-radius: 0.75rem; } body.wovallo-account-page .wovallo-account-nav { gap: 0.42rem; overflow: visible; padding: 0.55rem; } body.wovallo-account-page .wovallo-account-nav a { min-height: 3rem; border-radius: 0.7rem; font-size: 0.82rem; line-height: 1.15; padding: 0.56rem 0.34rem; } body.wovallo-account-page .wovallo-account-nav-label { display: none; } body.wovallo-account-page .wovallo-account-nav-label-short { display: inline; } body.wovallo-account-page .wovallo-account-actions { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; padding: 0.72rem 0.65rem 0.65rem; } body.wovallo-account-page .wovallo-account-actions-user span { font-size: 0.68rem; } body.wovallo-account-page .wovallo-account-actions-user strong { font-size: 0.9rem; } body.wovallo-account-page .wovallo-account-logout-link { min-height: 2.55rem; padding: 0.62rem 0.8rem; white-space: nowrap; } body.wovallo-account-page .wovallo-account-hero-actions, body.wovallo-account-page .wovallo-account-button, body.wovallo-account-page .woocommerce .button, body.wovallo-account-page .woocommerce button.button, body.wovallo-account-page .woocommerce input.button { width: 100%; } body.wovallo-account-page .woocommerce table.shop_table, body.wovallo-account-page .woocommerce table.shop_table thead, body.wovallo-account-page .woocommerce table.shop_table tbody, body.wovallo-account-page .woocommerce table.shop_table tr, body.wovallo-account-page .woocommerce table.shop_table th, body.wovallo-account-page .woocommerce table.shop_table td { display: block; } body.wovallo-account-page .woocommerce table.shop_table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body.wovallo-account-page .woocommerce table.shop_table tr { border-bottom: 1px solid rgba(162, 192, 206, 0.2); padding: 0.8rem; } body.wovallo-account-page .woocommerce table.shop_table td { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; border-bottom: 0; padding: 0.45rem 0; text-align: right; } body.wovallo-account-page .woocommerce table.shop_table td::before { content: attr(data-title); color: rgba(58, 71, 80, 0.78); font-size: 0.78rem; font-weight: 800; text-align: left; text-transform: uppercase; } body.wovallo-account-page .wovallo-account-section-heading, body.wovallo-account-page .wovallo-account-order-card-main, body.wovallo-account-page .wovallo-account-order-summary, body.wovallo-account-page .wovallo-account-shipping-card-main { align-items: stretch; flex-direction: column; } body.wovallo-account-page .wovallo-account-section-heading .wovallo-account-button, body.wovallo-account-page .wovallo-account-order-actions, body.wovallo-account-page .wovallo-account-order-action, body.wovallo-account-page .wovallo-account-address-actions, body.wovallo-account-page .wovallo-account-delete-address-form { width: 100%; } body.wovallo-account-page .wovallo-account-address-status { width: fit-content; } body.wovallo-account-page .wovallo-account-address-edit .wovallo-account-shipping-form { padding: 0.85rem; } body.wovallo-account-page .wovallo-account-address-edit .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; gap: 0.85rem; } body.wovallo-account-page .wovallo-account-address-edit .form-row { grid-column: 1 / -1; } body.wovallo-account-page .wovallo-account-address-edit .woocommerce-address-fields > p { display: block; margin-top: 1rem; } body.wovallo-account-page .wovallo-account-address-edit .woocommerce-address-fields button.button { width: 100%; } body.wovallo-account-page .wovallo-account-details-card { padding: 0.9rem; } body.wovallo-account-page .wovallo-account-details-card-heading { padding-bottom: 0.75rem; } body.wovallo-account-page .wovallo-account-details-actions { align-items: stretch; flex-direction: column; padding: 0.75rem; } body.wovallo-account-page .wovallo-account-details-actions button[name="save_account_details"] { width: 100%; } body.wovallo-account-page .wovallo-account-native-content--view-order > p:first-child { align-items: flex-start; flex-direction: column; } body.wovallo-account-page .wovallo-account-native-content--view-order .woocommerce-order-details, body.wovallo-account-page .wovallo-account-native-content--view-order .woocommerce-customer-details { padding: 0.85rem; } body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details th, body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details td { padding: 0.65rem 0; } body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details tfoot td::before { content: none; } body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details .product-total, body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details td.product-total, body.wovallo-account-page .wovallo-account-native-content--view-order table.shop_table.order_details tfoot td { text-align: left; } body.wovallo-account-page .wovallo-account-native-content--view-order .order-actions-button.button, body.wovallo-account-page .wovallo-account-native-content--view-order .woocommerce-button.button { width: 100%; } body.wovallo-account-page .wovallo-order-details-card { padding: 0.85rem; } body.wovallo-account-page .wovallo-order-details-header, body.wovallo-account-page .wovallo-order-product-row { grid-template-columns: 1fr; } body.wovallo-account-page .wovallo-order-details-header { align-items: stretch; flex-direction: column; } body.wovallo-account-page .wovallo-order-details-count { width: fit-content; } body.wovallo-account-page .wovallo-order-product-row { gap: 0.75rem; padding: 0.85rem; } body.wovallo-account-page .wovallo-order-product-main { grid-template-columns: 4rem minmax(0, 1fr); gap: 0.75rem; } body.wovallo-account-page .wovallo-order-product-image { width: 4rem; height: 4rem; } body.wovallo-account-page .wovallo-order-product-total { text-align: left; } body.wovallo-account-page .wovallo-order-summary { padding: 0.85rem; } .wovallo-account-confirm { align-items: end; padding: calc(var(--wovallo-admin-bar-height, 0px) + 0.75rem) 0.75rem 0.75rem; } .wovallo-account-confirm__dialog { grid-template-columns: 1fr; gap: 0.8rem; padding: 1rem; } .wovallo-account-confirm__mark { width: 2.4rem; height: 2.4rem; } .wovallo-account-confirm__dialog h2 { font-size: 1.2rem; } .wovallo-account-confirm__actions, .wovallo-account-confirm__button { width: 100%; } } @media (prefers-reduced-motion: reduce) { body.wovallo-account-page .wovallo-account-button, body.wovallo-account-page .wovallo-account-nav a, body.wovallo-account-page .wovallo-account-logout-link, body.wovallo-account-page .wovallo-account-card-heading a, body.wovallo-account-page .wovallo-account-order-action, body.wovallo-account-page .woocommerce-MyAccount-content a, body.wovallo-account-page .woocommerce-LostPassword a, body.wovallo-account-page .woocommerce input, body.wovallo-account-page .woocommerce select, body.wovallo-account-page .woocommerce textarea, body.wovallo-account-page .woocommerce .button, body.wovallo-account-page .woocommerce button.button, body.wovallo-account-page .woocommerce input.button, body.wovallo-account-page .wovallo-account-password-toggle, .wovallo-account-confirm, .wovallo-account-confirm__dialog, .wovallo-account-confirm__button { transition: none !important; } body.wovallo-account-page .wovallo-account-button:hover, body.wovallo-account-page .wovallo-account-nav a:hover, body.wovallo-account-page .wovallo-account-order-action:hover, body.wovallo-account-page .woocommerce .button:hover, body.wovallo-account-page .woocommerce button.button:hover, body.wovallo-account-page .woocommerce input.button:hover, .wovallo-account-confirm__button:hover { transform: none; } } /* ========================================================= Checkout Page ========================================================= */ body.wovallo-checkout-page { background: #faf9f6; color: #3a4750; } body.wovallo-checkout-page .wovallo-checkout-main { min-height: 100vh; padding: clamp(2.25rem, 4vw, 3.5rem) 1rem 5.5rem; overflow-x: hidden; } body.wovallo-checkout-page .wovallo-checkout-shell { width: min(100%, 90rem); margin: 0 auto; } body.wovallo-checkout-page .wovallo-checkout-hero { position: relative; isolation: isolate; margin-bottom: 1.45rem; } body.wovallo-checkout-page .wovallo-checkout-hero::before, body.wovallo-checkout-page .wovallo-checkout-hero::after { position: absolute; z-index: -1; border-radius: 9999px; content: ""; filter: blur(72px); pointer-events: none; } body.wovallo-checkout-page .wovallo-checkout-hero::before { top: -5rem; left: -4rem; width: min(28rem, 62vw); height: min(28rem, 62vw); background: rgba(162, 192, 206, 0.18); } body.wovallo-checkout-page .wovallo-checkout-hero::after { right: -5rem; bottom: -7rem; width: min(24rem, 58vw); height: min(24rem, 58vw); background: rgba(255, 157, 126, 0.12); } body.wovallo-checkout-page .wovallo-checkout-hero .wovallo-checkout-shell { display: grid; gap: 1rem; align-items: end; } body.wovallo-checkout-page .wovallo-checkout-kicker, body.wovallo-checkout-page .wovallo-checkout-summary-kicker { margin: 0 0 0.65rem; color: #ff9d7e; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } body.wovallo-checkout-page .wovallo-checkout-hero h1 { margin: 0 0 1rem; color: #3a4750; font-size: clamp(2.5rem, 7vw, 5.25rem); font-weight: 800; line-height: 0.98; } body.wovallo-checkout-page .wovallo-checkout-lede { max-width: 44rem; margin: 0; color: rgba(58, 71, 80, 0.72); font-size: clamp(1rem, 2.2vw, 1.24rem); line-height: 1.7; } body.wovallo-checkout-page .wovallo-checkout-hero-note { display: flex; flex-wrap: wrap; gap: 0.65rem; } body.wovallo-checkout-page .wovallo-checkout-hero-note span, body.wovallo-checkout-page .wovallo-checkout-topbar a, body.wovallo-checkout-page .wovallo-checkout-topbar strong, body.wovallo-checkout-page .wovallo-checkout-topbar em { display: inline-flex; min-height: 2.35rem; align-items: center; border: 1px solid rgba(162, 192, 206, 0.38); border-radius: 9999px; padding: 0.45rem 0.85rem; background: rgba(255, 255, 255, 0.72); color: rgba(58, 71, 80, 0.72); font-size: 0.82rem; font-weight: 800; line-height: 1.25; text-decoration: none; } body.wovallo-checkout-page .wovallo-checkout-topbar { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; margin-bottom: 0.9rem; } body.wovallo-checkout-page .wovallo-checkout-topbar span { width: 1.9rem; height: 1px; background: rgba(162, 192, 206, 0.48); } body.wovallo-checkout-page .wovallo-checkout-topbar strong { border-color: #a2c0ce; background: #a2c0ce; color: #ffffff; } body.wovallo-checkout-page .wovallo-checkout-topbar em { font-style: normal; opacity: 0.72; } body.wovallo-checkout-page .wovallo-checkout-topbar a:hover, body.wovallo-checkout-page .wovallo-checkout-topbar a:focus-visible { border-color: rgba(255, 157, 126, 0.58); color: #ff9d7e; outline: none; } body.wovallo-checkout-page .wovallo-checkout-native, body.wovallo-checkout-page .wovallo-checkout-empty { border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 1.15rem; background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(250, 249, 246, 0.76)), #ffffff; box-shadow: 0 18px 48px rgba(58, 71, 80, 0.07); } body.wovallo-checkout-page .wovallo-checkout-native { padding: clamp(1rem, 2vw, 1.35rem); } body.wovallo-checkout-page .wovallo-checkout-empty { display: grid; justify-items: center; padding: clamp(2rem, 7vw, 4.5rem); text-align: center; } body.wovallo-checkout-page .wovallo-checkout-empty-mark { display: grid; width: 4.5rem; height: 4.5rem; place-items: center; border-radius: 9999px; background: rgba(162, 192, 206, 0.18); color: #3a4750; } body.wovallo-checkout-page .wovallo-checkout-empty-mark svg { width: 2.2rem; height: 2.2rem; } body.wovallo-checkout-page .wovallo-checkout-empty h2 { margin: 1rem 0 0.55rem; color: #3a4750; font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.08; } body.wovallo-checkout-page .wovallo-checkout-empty p { max-width: 34rem; margin: 0; color: rgba(58, 71, 80, 0.78); font-size: 1rem; line-height: 1.7; } body.wovallo-checkout-page .wovallo-checkout-empty-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; } body.wovallo-checkout-page .wovallo-checkout-button, body.wovallo-checkout-page .woocommerce .button, body.wovallo-checkout-page .woocommerce button.button, body.wovallo-checkout-page .woocommerce input.button, body.wovallo-checkout-page #place_order { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; border: 0; border-radius: 9999px; cursor: pointer; font-family: inherit; font-size: 0.94rem; font-weight: 800; line-height: 1.2; padding: 0.82rem 1.2rem; text-align: center; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease; } body.wovallo-checkout-page .wovallo-checkout-button-primary, body.wovallo-checkout-page .woocommerce .button, body.wovallo-checkout-page .woocommerce button.button, body.wovallo-checkout-page .woocommerce input.button, body.wovallo-checkout-page #place_order { background: #3a4750; color: #ffffff; box-shadow: 0 14px 30px rgba(58, 71, 80, 0.14); } body.wovallo-checkout-page .wovallo-checkout-button-secondary, body.wovallo-checkout-page .woocommerce .checkout_coupon .button, body.wovallo-checkout-page .woocommerce-form-login .button { border: 1px solid rgba(162, 192, 206, 0.36); background: #ffffff; color: #3a4750; box-shadow: none; } body.wovallo-checkout-page .wovallo-checkout-button:hover, body.wovallo-checkout-page .woocommerce .button:hover:not(:disabled), body.wovallo-checkout-page .woocommerce button.button:hover:not(:disabled), body.wovallo-checkout-page .woocommerce input.button:hover:not(:disabled), body.wovallo-checkout-page #place_order:hover:not(:disabled) { background: #ff9d7e; color: #ffffff; transform: translateY(-1px); } body.wovallo-checkout-page .woocommerce button.button:disabled, body.wovallo-checkout-page .woocommerce input.button:disabled, body.wovallo-checkout-page #place_order:disabled { cursor: not-allowed; opacity: 0.48; transform: none; } body.wovallo-checkout-page .woocommerce form.checkout { display: grid; width: 100%; max-width: none; grid-template-columns: minmax(0, 1.18fr) minmax(24rem, 0.82fr); gap: clamp(1rem, 2vw, 1.35rem); align-items: start; margin: 0; } body.wovallo-checkout-page .wovallo-checkout-native .woocommerce { width: 100%; max-width: none; } body.wovallo-checkout-page .woocommerce form.checkout::before, body.wovallo-checkout-page .woocommerce form.checkout::after { display: none; } body.wovallo-checkout-page .woocommerce form.checkout > .wovallo-checkout-fields { display: grid; min-width: 0; gap: 1rem; align-self: start; } body.wovallo-checkout-page .woocommerce .col2-set { display: grid; width: 100%; gap: 1rem; } body.wovallo-checkout-page .woocommerce .col2-set::before, body.wovallo-checkout-page .woocommerce .col2-set::after { display: none; } body.wovallo-checkout-page .wovallo-checkout-express-card { --wovallo-express-button-height: 3rem; display: grid; gap: 0.72rem; min-width: 0; margin: 0; border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 1rem; padding: 0.9rem; background: rgba(255, 255, 255, 0.86); box-shadow: 0 10px 28px rgba(58, 71, 80, 0.045); } body.wovallo-checkout-page .wovallo-checkout-express-card.wovallo-checkout-express-card--empty { display: none; } body.wovallo-checkout-page .wovallo-checkout-express-card h2 { margin: 0; color: rgba(58, 71, 80, 0.72); font-size: 0.98rem; font-weight: 750; letter-spacing: 0; line-height: 1.25; text-align: center; } body.wovallo-checkout-page .wovallo-checkout-express { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.48rem; align-items: stretch; min-width: 0; margin: 0; padding: 0; } body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--empty { display: none; } body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-1 { grid-template-columns: minmax(0, 1fr); } body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-4, body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-5, body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--pending { grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: var(--wovallo-express-button-height); } body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--pending::before { content: none; } body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--pending > * { opacity: 0; pointer-events: none; } body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--pending iframe, body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--pending button, body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--pending [role="button"], body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--pending a, body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--pending [id^="wc-stripe-express-checkout-element-"], body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--pending [id^="express-payment-method"] { opacity: 0 !important; pointer-events: none; } body.wovallo-checkout-page .wovallo-checkout-express::before { content: none; } body.wovallo-checkout-page .wovallo-checkout-express .woocommerce-pay-buttons, body.wovallo-checkout-page .wovallo-checkout-express .wc-block-components-express-payment, body.wovallo-checkout-page .wovallo-checkout-express .wc-block-components-express-payment__event-buttons, body.wovallo-checkout-page .wovallo-checkout-express .wc-stripe-payment-request-wrapper, body.wovallo-checkout-page .wovallo-checkout-express .wcpay-payment-request-wrapper, body.wovallo-checkout-page .wovallo-checkout-express .wc-stripe-express-checkout-element, body.wovallo-checkout-page .wovallo-checkout-express .wcpay-express-checkout-wrapper, body.wovallo-checkout-page .wovallo-checkout-express #wc-stripe-payment-request-wrapper, body.wovallo-checkout-page .wovallo-checkout-express #wcpay-payment-request-wrapper, body.wovallo-checkout-page .wovallo-checkout-express #wcpay-express-checkout-element, body.wovallo-checkout-page .wovallo-checkout-express #wcpay-woopay-button, body.wovallo-checkout-page .wovallo-checkout-express .ppc-button-wrapper, body.wovallo-checkout-page .wovallo-checkout-express #ppc-button-ppcp-gateway, body.wovallo-checkout-page .wovallo-checkout-express [id^="wc-stripe-express-checkout-element-"], body.wovallo-checkout-page .wovallo-checkout-express [id^="express-payment-method"] { display: grid !important; width: 100% !important; min-width: 0; min-height: 0; gap: 0.5rem; margin: 0 !important; padding: 0 !important; overflow: visible !important; } body.wovallo-checkout-page .wovallo-checkout-express .wovallo-checkout-express-node--empty { display: none !important; overflow: hidden !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } body.wovallo-checkout-page .wovallo-checkout-express .wovallo-checkout-express-node--collapsed { display: none !important; } body.wovallo-checkout-page .wovallo-checkout-express #wc-stripe-express-checkout-element, body.wovallo-checkout-page .wovallo-checkout-express .wc-stripe-express-checkout-element { display: contents !important; } body.wovallo-checkout-page .wovallo-checkout-express .woocommerce-pay-buttons:has(iframe), body.wovallo-checkout-page .wovallo-checkout-express .woocommerce-pay-buttons:has(button), body.wovallo-checkout-page .wovallo-checkout-express .woocommerce-pay-buttons:has([role="button"]), body.wovallo-checkout-page .wovallo-checkout-express .wc-block-components-express-payment:has(iframe), body.wovallo-checkout-page .wovallo-checkout-express .wc-block-components-express-payment:has(button), body.wovallo-checkout-page .wovallo-checkout-express .wc-block-components-express-payment:has([role="button"]), body.wovallo-checkout-page .wovallo-checkout-express .wc-block-components-express-payment__event-buttons:has(iframe), body.wovallo-checkout-page .wovallo-checkout-express .wc-block-components-express-payment__event-buttons:has(button), body.wovallo-checkout-page .wovallo-checkout-express .wc-block-components-express-payment__event-buttons:has([role="button"]), body.wovallo-checkout-page .wovallo-checkout-express .wc-stripe-payment-request-wrapper:has(iframe), body.wovallo-checkout-page .wovallo-checkout-express .wc-stripe-payment-request-wrapper:has(button), body.wovallo-checkout-page .wovallo-checkout-express .wc-stripe-payment-request-wrapper:has([role="button"]), body.wovallo-checkout-page .wovallo-checkout-express .wc-stripe-express-checkout-element:has(iframe), body.wovallo-checkout-page .wovallo-checkout-express .wc-stripe-express-checkout-element:has(button), body.wovallo-checkout-page .wovallo-checkout-express .wc-stripe-express-checkout-element:has([role="button"]), body.wovallo-checkout-page .wovallo-checkout-express .wcpay-payment-request-wrapper:has(iframe), body.wovallo-checkout-page .wovallo-checkout-express .wcpay-payment-request-wrapper:has(button), body.wovallo-checkout-page .wovallo-checkout-express .wcpay-payment-request-wrapper:has([role="button"]), body.wovallo-checkout-page .wovallo-checkout-express .wcpay-express-checkout-wrapper:has(iframe), body.wovallo-checkout-page .wovallo-checkout-express .wcpay-express-checkout-wrapper:has(button), body.wovallo-checkout-page .wovallo-checkout-express .wcpay-express-checkout-wrapper:has([role="button"]), body.wovallo-checkout-page .wovallo-checkout-express #wc-stripe-payment-request-wrapper:has(iframe), body.wovallo-checkout-page .wovallo-checkout-express #wc-stripe-payment-request-wrapper:has(button), body.wovallo-checkout-page .wovallo-checkout-express #wc-stripe-payment-request-wrapper:has([role="button"]), body.wovallo-checkout-page .wovallo-checkout-express #wcpay-payment-request-wrapper:has(iframe), body.wovallo-checkout-page .wovallo-checkout-express #wcpay-payment-request-wrapper:has(button), body.wovallo-checkout-page .wovallo-checkout-express #wcpay-payment-request-wrapper:has([role="button"]), body.wovallo-checkout-page .wovallo-checkout-express #wcpay-express-checkout-element:has(iframe), body.wovallo-checkout-page .wovallo-checkout-express #wcpay-express-checkout-element:has(button), body.wovallo-checkout-page .wovallo-checkout-express #wcpay-express-checkout-element:has([role="button"]) { display: contents !important; } body.wovallo-checkout-page .wovallo-checkout-express #wc-stripe-express-checkout-button-separator, body.wovallo-checkout-page .wovallo-checkout-express .wc-stripe-express-checkout-button-separator, body.wovallo-checkout-page .wovallo-checkout-express .wc-stripe-payment-request-button-separator { display: none !important; } body.wovallo-checkout-page .wovallo-checkout-express wc-order-attribution-inputs, body.wovallo-checkout-page .wovallo-checkout-express #wc-stripe-express-checkout__order-attribution-inputs { display: none !important; } body.wovallo-checkout-page .wovallo-checkout-express #ppc-button-ppcp-applepay, body.wovallo-checkout-page .wovallo-checkout-express #ppc-button-ppcp-googlepay { display: none !important; } body.wovallo-checkout-page .wovallo-checkout-express #wc-stripe-express-checkout-element { width: 100% !important; min-width: 0; min-height: 0; margin: 0 !important; padding: 0 !important; } body.wovallo-checkout-page .wovallo-checkout-express #wc-stripe-express-checkout-element > div, body.wovallo-checkout-page .wovallo-checkout-express .wc-stripe-express-checkout-element > div { flex: 1 1 0 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } body.wovallo-checkout-page .wovallo-checkout-express .ppc-button-wrapper:not(.wovallo-checkout-express-node--empty), body.wovallo-checkout-page .wovallo-checkout-express #ppc-button-ppcp-gateway:not(:empty) { box-sizing: border-box !important; grid-column: span 1 !important; height: var(--wovallo-express-button-height) !important; min-width: 0 !important; min-height: var(--wovallo-express-button-height) !important; max-width: 100% !important; } body.wovallo-checkout-page .wovallo-checkout-express #wcpay-woopay-button, body.wovallo-checkout-page .wovallo-checkout-express .woopay-express-button, body.wovallo-checkout-page .wovallo-checkout-express .ppc-button-wrapper, body.wovallo-checkout-page .wovallo-checkout-express #ppc-button-ppcp-gateway, body.wovallo-checkout-page .wovallo-checkout-express [id^="wc-stripe-express-checkout-element-"], body.wovallo-checkout-page .wovallo-checkout-express [id^="express-payment-method"] { height: var(--wovallo-express-button-height) !important; width: 100% !important; min-width: 0 !important; min-height: var(--wovallo-express-button-height) !important; max-width: 100% !important; align-self: stretch; grid-column: auto !important; overflow: visible !important; } body.wovallo-checkout-page .wovallo-checkout-express #ppc-button-ppcp-gateway > div, body.wovallo-checkout-page .wovallo-checkout-express #ppc-button-ppcp-gateway iframe { display: block !important; height: var(--wovallo-express-button-height) !important; min-height: var(--wovallo-express-button-height) !important; } body.wovallo-checkout-page .wovallo-checkout-express iframe { display: block !important; } body.wovallo-checkout-page .wovallo-checkout-express iframe, body.wovallo-checkout-page .wovallo-checkout-express button, body.wovallo-checkout-page .wovallo-checkout-express [role="button"], body.wovallo-checkout-page .wovallo-checkout-express a { box-sizing: border-box; height: var(--wovallo-express-button-height) !important; width: 100% !important; max-width: 100%; min-height: var(--wovallo-express-button-height) !important; border-radius: 0.44rem !important; } body.wovallo-checkout-page .wovallo-checkout-express #wc-stripe-express-checkout-element iframe { height: calc(var(--wovallo-express-button-height) + 0.5rem) !important; min-height: calc(var(--wovallo-express-button-height) + 0.5rem) !important; } body.wovallo-checkout-page .wovallo-checkout-express #ppc-button-ppcp-gateway > div, body.wovallo-checkout-page .wovallo-checkout-express #ppc-button-ppcp-gateway iframe { height: calc(var(--wovallo-express-button-height) + 0.5rem) !important; min-height: calc(var(--wovallo-express-button-height) + 0.5rem) !important; } body.wovallo-checkout-page .wovallo-checkout-express #ppc-button-ppcp-gateway > div { margin: -0.25rem 0 !important; } body.wovallo-checkout-page .wovallo-checkout-express button, body.wovallo-checkout-page .wovallo-checkout-express .woopay-express-button, body.wovallo-checkout-page .wovallo-checkout-express .ppcp-button-apm { border-radius: 0.44rem !important; } body.wovallo-checkout-page .wovallo-checkout-express #wcpay-express-checkout-button-separator { margin: 0.1rem 0 !important; color: rgba(58, 71, 80, 0.46); font-size: 0.72rem; font-weight: 800; line-height: 1.2; } body.wovallo-checkout-page .wovallo-checkout-express-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.42rem; justify-self: center; min-height: 2.35rem; border: 0; border-radius: 9999px; padding: 0.28rem 0.75rem; background: transparent; color: #3a4750; font: inherit; font-size: 0.95rem; font-weight: 750; letter-spacing: 0; line-height: 1.2; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; } body.wovallo-checkout-page .wovallo-checkout-express-toggle[hidden] { display: none !important; } body.wovallo-checkout-page .wovallo-checkout-express-toggle:hover, body.wovallo-checkout-page .wovallo-checkout-express-toggle:focus-visible { background: rgba(162, 192, 206, 0.12); color: #ff9d7e; } body.wovallo-checkout-page .wovallo-checkout-express-toggle:focus-visible { outline: 2px solid rgba(255, 157, 126, 0.4); outline-offset: 2px; } body.wovallo-checkout-page .wovallo-checkout-express-toggle-icon { width: 0.48rem; height: 0.48rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.12rem) rotate(45deg); transition: transform 0.2s ease; } body.wovallo-checkout-page .wovallo-checkout-express-toggle[aria-expanded="true"] .wovallo-checkout-express-toggle-icon { transform: translateY(0.12rem) rotate(225deg); } body.wovallo-checkout-page .wovallo-checkout-divider { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.75rem; align-items: center; margin: -0.1rem 0 0.05rem; color: rgba(58, 71, 80, 0.54); font-size: 0.95rem; font-weight: 500; line-height: 1; } body.wovallo-checkout-page .wovallo-checkout-divider.wovallo-checkout-divider--hidden { display: none; } body.wovallo-checkout-page .wovallo-checkout-divider::before, body.wovallo-checkout-page .wovallo-checkout-divider::after { height: 1px; background: rgba(162, 192, 206, 0.3); content: ""; } body.wovallo-checkout-page .wovallo-checkout-divider span { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; } body.wovallo-checkout-page .wovallo-checkout-order-panel { min-width: 0; align-self: start; } body.wovallo-checkout-page .woocommerce .col2-set .col-1, body.wovallo-checkout-page .woocommerce .col2-set .col-2 { float: none; width: auto; } body.wovallo-checkout-page .woocommerce-billing-fields, body.wovallo-checkout-page .woocommerce-shipping-fields, body.wovallo-checkout-page .woocommerce-additional-fields, body.wovallo-checkout-page .woocommerce-form-login, body.wovallo-checkout-page .checkout_coupon, body.wovallo-checkout-page #order_review { border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 1rem; background: rgba(255, 255, 255, 0.72); box-shadow: 0 10px 28px rgba(58, 71, 80, 0.045); } body.wovallo-checkout-page .woocommerce-billing-fields, body.wovallo-checkout-page .woocommerce-shipping-fields, body.wovallo-checkout-page .woocommerce-additional-fields { padding: clamp(1rem, 2vw, 1.25rem); } body.wovallo-checkout-page #wovallo-checkout-shipping-address { /* Land below the sticky header, not behind it. */ scroll-margin-top: calc( var(--wovallo-admin-bar-height, 0px) + var(--wovallo-header-height, 65px) + 1rem ); } body.wovallo-checkout-page .wovallo-checkout-billing-head { display: grid; gap: 0.7rem; margin-bottom: 1rem; } body.wovallo-checkout-page .wovallo-checkout-billing-head h3 { margin-bottom: 0 !important; } body.wovallo-checkout-page .wovallo-billing-same-label { width: fit-content; min-height: 0 !important; border: 1px solid rgba(162, 192, 206, 0.28); border-radius: 9999px; padding: 0.55rem 0.75rem; background: rgba(250, 249, 246, 0.72); font-size: 0.86rem !important; font-weight: 800 !important; } body.wovallo-checkout-page .woocommerce form.checkout.wovallo-billing-same-as-shipping .wovallo-billing-address-field { display: none !important; } body.wovallo-checkout-page .woocommerce form.checkout.wovallo-has-shipping-phone.wovallo-billing-same-as-shipping #billing_phone_field { display: none !important; } body.wovallo-checkout-page .woocommerce-additional-fields { margin-top: 0.35rem; padding-top: 0.75rem; } body.wovallo-checkout-page .woocommerce-shipping-fields:not(:has(*)) { display: none !important; overflow: hidden; height: 0; min-height: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; } body.wovallo-checkout-page .woocommerce-form-login, body.wovallo-checkout-page .checkout_coupon { display: grid; gap: 0.85rem; margin: 0 0 1rem !important; padding: 1rem !important; } body.wovallo-checkout-page .checkout_coupon { grid-template-columns: minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; margin-bottom: 0.85rem !important; padding: 0.75rem !important; } body.wovallo-checkout-page .woocommerce-form-coupon-toggle { margin: 0 0 0.85rem; } body.wovallo-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info { display: flex !important; width: 100% !important; max-width: none !important; align-items: center !important; gap: 0.7rem; margin: 0 !important; border: 1px solid rgba(162, 192, 206, 0.28) !important; border-top-color: rgba(162, 192, 206, 0.28) !important; border-radius: 0.85rem !important; padding: 0.55rem 0.6rem 0.55rem 0.75rem !important; background: rgba(255, 255, 255, 0.82) !important; box-shadow: 0 8px 22px rgba(58, 71, 80, 0.045) !important; color: #3a4750 !important; font-size: 0.92rem !important; font-weight: 800 !important; line-height: 1.3 !important; } body.wovallo-checkout-page .woocommerce-form-coupon-toggle .wc-block-components-notice-banner { display: flex !important; width: 100% !important; max-width: none !important; gap: 0.7rem !important; align-items: center !important; justify-content: flex-start; margin: 0 !important; border: 1px solid rgba(162, 192, 206, 0.28) !important; border-radius: 0.85rem !important; padding: 0.55rem 0.6rem 0.55rem 0.75rem !important; background: rgba(255, 255, 255, 0.82) !important; box-shadow: 0 8px 22px rgba(58, 71, 80, 0.045) !important; color: #3a4750 !important; font-size: 0.92rem !important; font-weight: 800 !important; line-height: 1.3 !important; } body.wovallo-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info::before { width: 1.9rem !important; height: 1.9rem !important; border-color: rgba(255, 157, 126, 0.42) !important; background: rgba(255, 157, 126, 0.13) !important; color: #3a4750 !important; } body.wovallo-checkout-page .woocommerce-form-coupon-toggle .wc-block-components-notice-banner > svg { width: 1.9rem !important; height: 1.9rem !important; min-width: 1.9rem !important; min-height: 1.9rem !important; align-self: center !important; border: 1px solid rgba(255, 157, 126, 0.42) !important; border-radius: 9999px !important; padding: 0.18rem !important; background: rgba(255, 157, 126, 0.13) !important; fill: #3a4750 !important; } body.wovallo-checkout-page .woocommerce-form-coupon-toggle .wc-block-components-notice-banner__content { display: flex !important; width: 100%; min-width: 0; align-self: center !important; flex-basis: auto !important; gap: 0.7rem; align-items: center; color: #3a4750 !important; } body.wovallo-checkout-page .woocommerce-form-coupon-toggle .wovallo-checkout-coupon-title { min-width: 0; flex: 1 1 auto; } body.wovallo-checkout-page .woocommerce-form-coupon-toggle .showcoupon { display: inline-flex; min-height: 2.35rem; flex: 0 0 auto; align-items: center; justify-content: center; margin-left: auto; border-radius: 9999px; padding: 0.58rem 0.95rem !important; background: #3a4750; color: #ffffff !important; font-size: 0.86rem; line-height: 1.15; text-decoration: none; white-space: nowrap; touch-action: manipulation; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } body.wovallo-checkout-page .woocommerce-form-coupon-toggle .showcoupon:hover, body.wovallo-checkout-page .woocommerce-form-coupon-toggle .showcoupon:focus-visible { background: #ff9d7e; color: #ffffff !important; outline: none; box-shadow: 0 8px 18px rgba(255, 157, 126, 0.2); } body.wovallo-checkout-page .woocommerce-form-login p, body.wovallo-checkout-page .checkout_coupon p { margin: 0; color: rgba(58, 71, 80, 0.78); font-size: 0.94rem; line-height: 1.6; } body.wovallo-checkout-page .checkout_coupon .form-row { float: none; width: 100%; } body.wovallo-checkout-page .checkout_coupon > p:not(.form-row) { grid-column: 1 / -1; } body.wovallo-checkout-page .checkout_coupon .form-row-first, body.wovallo-checkout-page .checkout_coupon .form-row-last { margin: 0; } body.wovallo-checkout-page .checkout_coupon .form-row-first { grid-column: 1; } body.wovallo-checkout-page .checkout_coupon .form-row-last { grid-column: 2; } body.wovallo-checkout-page .woocommerce .checkout_coupon .button { min-width: 11.5rem; min-height: 3rem; padding-right: 1.4rem; padding-left: 1.4rem; white-space: nowrap; } body.wovallo-checkout-page .woocommerce h3, body.wovallo-checkout-page .woocommerce-billing-fields h3, body.wovallo-checkout-page .woocommerce-shipping-fields h3, body.wovallo-checkout-page .woocommerce-additional-fields h3, body.wovallo-checkout-page #order_review_heading { margin: 0 0 1rem; color: #3a4750; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 800; line-height: 1.18; } body.wovallo-checkout-page #order_review_heading { margin: 0 0 -0.15rem; border: 1px solid rgba(162, 192, 206, 0.22); border-bottom: 0; border-radius: 1rem 1rem 0 0; padding: 1.15rem 1.15rem 0.35rem; background: rgba(255, 255, 255, 0.88); box-shadow: 0 10px 28px rgba(58, 71, 80, 0.045); } body.wovallo-checkout-page #order_review { padding: 0.25rem 1.15rem 1.15rem; border-top: 0; border-radius: 0 0 1rem 1rem; background: rgba(255, 255, 255, 0.88); } body.wovallo-checkout-page .woocommerce form .form-row { position: relative; display: grid; gap: 0.3rem; margin: 0 0 0.8rem; padding: 0; } body.wovallo-checkout-page .woocommerce .checkout_coupon .form-row { gap: 0; margin: 0 !important; padding: 0 !important; } body.wovallo-checkout-page .woocommerce .checkout_coupon .clear { display: none; } body.wovallo-checkout-page .woocommerce .woocommerce-account-fields { display: grid; gap: 0.22rem; margin-top: 0.35rem; } body.wovallo-checkout-page .woocommerce .woocommerce-account-fields > p { margin: 0; } body.wovallo-checkout-page .woocommerce form .woocommerce-account-fields > .form-row { gap: 0; margin: 0 !important; } body.wovallo-checkout-page .woocommerce form .woocommerce-account-fields > .form-row.create-account { margin-top: 0.15rem !important; } body.wovallo-checkout-page .woocommerce .woocommerce-account-fields > div.create-account { display: none !important; overflow: hidden; height: 0; min-height: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.wovallo-checkout-page .woocommerce form .woocommerce-account-fields > .form-row.create-account { display: grid !important; } body.wovallo-checkout-page .woocommerce .woocommerce-account-fields:not(:has(#createaccount)) > div.create-account { display: grid !important; gap: 0.42rem; overflow: visible; height: auto; min-height: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.wovallo-checkout-page .woocommerce form.checkout:has(#createaccount):not(:has(#createaccount:checked)) #account_password_field, body.wovallo-checkout-page .woocommerce .woocommerce-account-fields > .form-row.create-account:has(#createaccount:not(:checked)) + div.create-account { display: none !important; overflow: hidden; height: 0; min-height: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.wovallo-checkout-page .woocommerce .woocommerce-account-fields:has(#createaccount:checked) > div.create-account { display: grid !important; gap: 0.42rem; overflow: visible; height: auto; min-height: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.wovallo-checkout-page .woocommerce .woocommerce-account-fields > div.create-account .form-row { gap: 0.45rem; margin: 0 0 0.1rem; } body.wovallo-checkout-page .woocommerce .woocommerce-account-fields > div.create-account .form-row label { min-height: 0; } body.wovallo-checkout-page .woocommerce form .form-row-first, body.wovallo-checkout-page .woocommerce form .form-row-last { float: none; width: auto; } body.wovallo-checkout-page .woocommerce-billing-fields__field-wrapper, body.wovallo-checkout-page .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 0.85rem; } body.wovallo-checkout-page .woocommerce form .form-row-wide, body.wovallo-checkout-page .woocommerce #billing_company_field, body.wovallo-checkout-page .woocommerce #billing_country_field, body.wovallo-checkout-page .woocommerce #billing_address_1_field, body.wovallo-checkout-page .woocommerce #billing_address_2_field, body.wovallo-checkout-page .woocommerce #billing_city_field, body.wovallo-checkout-page .woocommerce #shipping_company_field, body.wovallo-checkout-page .woocommerce #shipping_country_field, body.wovallo-checkout-page .woocommerce #shipping_address_1_field, body.wovallo-checkout-page .woocommerce #shipping_address_2_field, body.wovallo-checkout-page .woocommerce #shipping_city_field { grid-column: 1 / -1; } body.wovallo-checkout-page .woocommerce #billing_first_name_field, body.wovallo-checkout-page .woocommerce #billing_last_name_field, body.wovallo-checkout-page .woocommerce #billing_company_field, body.wovallo-checkout-page .woocommerce #billing_country_field, body.wovallo-checkout-page .woocommerce #billing_phone_field, body.wovallo-checkout-page .woocommerce #billing_email_field, body.wovallo-checkout-page .woocommerce #shipping_first_name_field, body.wovallo-checkout-page .woocommerce #shipping_last_name_field, body.wovallo-checkout-page .woocommerce #shipping_company_field, body.wovallo-checkout-page .woocommerce #shipping_country_field, body.wovallo-checkout-page .woocommerce #shipping_phone_field { grid-column: span 6; } body.wovallo-checkout-page .woocommerce #billing_address_1_field, body.wovallo-checkout-page .woocommerce #shipping_address_1_field, body.wovallo-checkout-page .woocommerce #billing_address_2_field, body.wovallo-checkout-page .woocommerce #shipping_address_2_field { grid-column: 1 / -1; } body.wovallo-checkout-page .woocommerce #billing_city_field, body.wovallo-checkout-page .woocommerce #billing_state_field, body.wovallo-checkout-page .woocommerce #billing_postcode_field, body.wovallo-checkout-page .woocommerce #shipping_city_field, body.wovallo-checkout-page .woocommerce #shipping_state_field, body.wovallo-checkout-page .woocommerce #shipping_postcode_field { grid-column: span 4; } body.wovallo-checkout-page .woocommerce label { color: rgba(58, 71, 80, 0.72); font-size: 0.82rem; font-weight: 800; line-height: 1.28; } body.wovallo-checkout-page .woocommerce-billing-fields__field-wrapper > .form-row > label, body.wovallo-checkout-page .woocommerce-shipping-fields__field-wrapper > .form-row > label, body.wovallo-checkout-page .woocommerce-additional-fields__field-wrapper > .form-row > label { min-height: 0; margin: 0; } body.wovallo-checkout-page .woocommerce .required { color: #ff9d7e; text-decoration: none; } body.wovallo-checkout-page .woocommerce-input-wrapper, body.wovallo-checkout-page .woocommerce .select2-container { display: block; width: 100% !important; } body.wovallo-checkout-page .woocommerce input.input-text, body.wovallo-checkout-page .woocommerce input[type="email"], body.wovallo-checkout-page .woocommerce input[type="password"], body.wovallo-checkout-page .woocommerce input[type="text"], body.wovallo-checkout-page .woocommerce input[type="tel"], body.wovallo-checkout-page .woocommerce select, body.wovallo-checkout-page .woocommerce textarea, body.wovallo-checkout-page .select2-container--default .select2-selection--single { width: 100%; min-height: 3rem; border: 1px solid rgba(162, 192, 206, 0.36); border-radius: 0.75rem; background: #ffffff; color: #3a4750; font: inherit; font-size: 1rem; line-height: 1.45; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } body.wovallo-checkout-page .woocommerce input.input-text, body.wovallo-checkout-page .woocommerce input[type="email"], body.wovallo-checkout-page .woocommerce input[type="password"], body.wovallo-checkout-page .woocommerce input[type="text"], body.wovallo-checkout-page .woocommerce input[type="tel"], body.wovallo-checkout-page .woocommerce select, body.wovallo-checkout-page .woocommerce textarea { padding: 0.72rem 0.9rem; } body.wovallo-checkout-page .wovallo-phone-input-shell { display: grid; grid-template-columns: minmax(7.6rem, 9rem) minmax(0, 1fr); gap: 0.45rem; align-items: stretch; width: 100%; } body.wovallo-checkout-page .woocommerce select.wovallo-phone-country-code { min-width: 0; padding-right: 0.65rem; padding-left: 0.7rem; color: rgba(58, 71, 80, 0.82); font-size: 0.94rem; font-weight: 800; } body.wovallo-checkout-page .woocommerce .wovallo-phone-number-input { min-width: 0; } body.wovallo-checkout-page .woocommerce textarea { min-height: 7.5rem; resize: vertical; } body.wovallo-checkout-page .select2-container--default .select2-selection--single { display: flex; align-items: center; padding: 0 2.4rem 0 0.9rem; } body.wovallo-checkout-page .select2-container--default .select2-selection--single .select2-selection__rendered { color: #3a4750; line-height: 1.45; padding: 0; } body.wovallo-checkout-page .select2-container--default .select2-selection--single .select2-selection__placeholder { color: rgba(58, 71, 80, 0.44); } body.wovallo-checkout-page .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; right: 0.75rem; transform: translateY(-50%); } body.wovallo-checkout-page .woocommerce input:focus, body.wovallo-checkout-page .woocommerce select:focus, body.wovallo-checkout-page .woocommerce textarea:focus, body.wovallo-checkout-page .woocommerce input:focus-visible, body.wovallo-checkout-page .woocommerce select:focus-visible, body.wovallo-checkout-page .woocommerce textarea:focus-visible, body.wovallo-checkout-page .select2-container--default.select2-container--focus .select2-selection--single, body.wovallo-checkout-page .select2-container--default.select2-container--open .select2-selection--single { border-color: #ff9d7e; outline: none; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14), 0 8px 18px rgba(162, 192, 206, 0.14); } body.wovallo-checkout-page .woocommerce .form-row.woocommerce-invalid input.input-text, body.wovallo-checkout-page .woocommerce .form-row.woocommerce-invalid select, body.wovallo-checkout-page .woocommerce .form-row.woocommerce-invalid textarea, body.wovallo-checkout-page .woocommerce .form-row.woocommerce-invalid .select2-selection { border-color: rgba(255, 157, 126, 0.72); background: rgba(255, 157, 126, 0.06); } body.wovallo-checkout-page .woocommerce .form-row.woocommerce-validated input.input-text, body.wovallo-checkout-page .woocommerce .form-row.woocommerce-validated select, body.wovallo-checkout-page .woocommerce .form-row.woocommerce-validated textarea, body.wovallo-checkout-page .woocommerce .form-row.woocommerce-validated .select2-selection { border-color: rgba(162, 192, 206, 0.58); } body.wovallo-checkout-page .select2-container--open .select2-dropdown { overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.36); border-radius: 0.85rem; background: #ffffff; box-shadow: 0 18px 40px rgba(58, 71, 80, 0.12); } body.wovallo-checkout-page .select2-search--dropdown { padding: 0.7rem; } body.wovallo-checkout-page .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid rgba(162, 192, 206, 0.36); border-radius: 0.65rem; padding: 0.65rem 0.75rem; } body.wovallo-checkout-page .select2-results__option { padding: 0.72rem 0.85rem; } body.wovallo-checkout-page .select2-container--default .select2-results__option--highlighted[aria-selected], body.wovallo-checkout-page .select2-container--default .select2-results__option--highlighted[data-selected] { background: #a2c0ce; color: #ffffff; } body.wovallo-checkout-page .select2-container--default .select2-results__option[aria-selected="true"], body.wovallo-checkout-page .select2-container--default .select2-results__option[data-selected="true"] { background: rgba(255, 157, 126, 0.14); color: #3a4750; } body.wovallo-checkout-page .woocommerce .woocommerce-form__label-for-checkbox, body.wovallo-checkout-page .woocommerce .form-row .woocommerce-form__label, body.wovallo-checkout-page .woocommerce .woocommerce-shipping-fields label.woocommerce-form__label, body.wovallo-checkout-page .woocommerce .create-account label.woocommerce-form__label { display: inline-flex; gap: 0.55rem; align-items: flex-start; min-height: 2.75rem; color: #3a4750; } body.wovallo-checkout-page .woocommerce input[type="checkbox"], body.wovallo-checkout-page .woocommerce input[type="radio"] { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; accent-color: #ff9d7e; margin-top: 0.12rem; } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table { width: 100%; margin: 0 0 1rem; border: 0; border-collapse: collapse; color: #3a4750; } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table th, body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table td { border: 0; border-bottom: 1px solid rgba(162, 192, 206, 0.18); padding: 0.82rem 0; color: #3a4750; font-size: 0.9rem; line-height: 1.45; vertical-align: top; } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table thead th { color: rgba(58, 71, 80, 0.78); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table .product-total, body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table tfoot td { text-align: right; } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table .cart_item .product-name { font-weight: 800; } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table .wovallo-checkout-item { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: 0.75rem; align-items: center; min-width: 0; } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table .wovallo-checkout-item-media { overflow: hidden; width: 4.4rem; aspect-ratio: 1; border: 1px solid rgba(162, 192, 206, 0.2); border-radius: 0.75rem; background: rgba(250, 249, 246, 0.9); } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table .wovallo-checkout-item-image { display: block; width: 100%; height: 100%; object-fit: cover; } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table .wovallo-checkout-item-copy { min-width: 0; } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table .wovallo-checkout-item-title { display: inline; overflow-wrap: anywhere; } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table .wovallo-checkout-item-copy dl.variation { display: grid; gap: 0.18rem 0.35rem; margin: 0.35rem 0 0; color: rgba(58, 71, 80, 0.78); font-size: 0.78rem; font-weight: 700; } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table .wovallo-checkout-item-copy dl.variation dt, body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table .wovallo-checkout-item-copy dl.variation dd { margin: 0; } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table .wovallo-checkout-item-copy dl.variation p { margin: 0; } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table .product-quantity { color: rgba(58, 71, 80, 0.56); font-weight: 700; } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table tfoot th, body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table tfoot td { font-weight: 800; } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table .order-total th, body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table .order-total td, body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table .order-total strong { border-bottom: 0; color: #3a4750; font-size: 1.12rem; font-weight: 900; } body.wovallo-checkout-page .woocommerce .woocommerce-Price-amount, body.wovallo-checkout-page .woocommerce .woocommerce-Price-amount bdi { color: #3a4750; font-weight: 900; font-variant-numeric: tabular-nums; } body.wovallo-checkout-page .woocommerce .woocommerce-shipping-methods, body.wovallo-checkout-page .woocommerce #shipping_method { display: grid; gap: 0.55rem; justify-items: end; margin: 0; padding: 0; list-style: none; text-align: right; } body.wovallo-checkout-page .woocommerce .woocommerce-shipping-methods li, body.wovallo-checkout-page .woocommerce #shipping_method li { display: flex; gap: 0.55rem; justify-content: flex-end; align-items: flex-start; margin: 0; color: #3a4750; text-align: right; } body.wovallo-checkout-page .woocommerce .woocommerce-shipping-methods label, body.wovallo-checkout-page .woocommerce #shipping_method label { text-align: right; } body.wovallo-checkout-page .woocommerce-checkout-payment { border: 1px solid rgba(162, 192, 206, 0.22) !important; border-radius: 1rem !important; background: rgba(250, 249, 246, 0.78) !important; } body.wovallo-checkout-page .woocommerce-checkout-payment ul.payment_methods { border: 0 !important; padding: 0.8rem 0.8rem 0 !important; } body.wovallo-checkout-page .woocommerce-checkout-payment ul.payment_methods li { position: relative; overflow: visible; border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 0.95rem; background: #ffffff; padding: 0.82rem 0.9rem 0.9rem; transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; } body.wovallo-checkout-page .woocommerce-checkout-payment ul.payment_methods li:has(input.input-radio:checked) { border-color: rgba(255, 157, 126, 0.56); background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 157, 126, 0.06)), #ffffff; box-shadow: 0 14px 34px rgba(58, 71, 80, 0.08); } body.wovallo-checkout-page .woocommerce-checkout-payment ul.payment_methods li + li { margin-top: 0.65rem; } body.wovallo-checkout-page .woocommerce-checkout-payment ul.payment_methods li.payment_method_ppcp-gateway { display: none !important; } body.wovallo-checkout-page .woocommerce-checkout-payment ul.payment_methods input.input-radio { appearance: none; width: 1.25rem; height: 1.25rem; margin: 0.12rem 0.85rem 0 0; border: 1.5px solid rgba(58, 71, 80, 0.42); border-radius: 9999px; background: #ffffff; box-shadow: inset 0 0 0 0.32rem #ffffff; vertical-align: top; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } body.wovallo-checkout-page .woocommerce-checkout-payment ul.payment_methods input.input-radio:checked { border-color: #ff9d7e; background: #ff9d7e; box-shadow: inset 0 0 0 0.28rem #ffffff, 0 0 0 0.22rem rgba(255, 157, 126, 0.18); } body.wovallo-checkout-page .woocommerce-checkout-payment ul.payment_methods input.input-radio:focus-visible { outline: 2px solid rgba(255, 157, 126, 0.44); outline-offset: 3px; } body.wovallo-checkout-page .woocommerce-checkout-payment ul.payment_methods label { display: inline-flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; color: #3a4750; font-size: 1rem; font-weight: 800; line-height: 1.35; } body.wovallo-checkout-page .woocommerce-checkout-payment ul.payment_methods label::after { display: inline-flex; align-items: center; min-height: 1.35rem; border-radius: 9999px; padding: 0.12rem 0.55rem; background: rgba(162, 192, 206, 0.14); color: rgba(58, 71, 80, 0.78); font-size: 0.72rem; font-weight: 800; line-height: 1; } body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_stripe > label::after { content: "Visa / Mastercard / AmEx"; } body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_ppcp-gateway > label::after { content: "PayPal wallet"; } body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_stripe > label::before, body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_woocommerce_payments > label::before, body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_ppcp-gateway > label::before { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 1.45rem; border: 1px solid rgba(162, 192, 206, 0.28); border-radius: 0.42rem; background: #faf9f6; color: #3a4750; font-size: 0.68rem; font-weight: 900; letter-spacing: 0; } body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_stripe > label::before { content: "CARD"; } body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_woocommerce_payments > label::before { content: "CARD"; } body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_ppcp-gateway > label::before { content: "PP"; color: #174ea6; background: #fff8df; } body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_stripe > label::before, body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_stripe > label::after, body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_woocommerce_payments > label::before, body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_woocommerce_payments > label::after { display: none; content: none; } body.wovallo-checkout-page .woocommerce-checkout-payment ul.payment_methods label img, body.wovallo-checkout-page .woocommerce-checkout-payment ul.payment_methods label svg { display: inline-block; width: auto; max-width: 11rem; max-height: 1.45rem; margin: 0 0 0 0.2rem; object-fit: contain; vertical-align: middle; } body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_stripe > label, body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_woocommerce_payments > label { gap: 0.42rem; font-size: 0.96rem; line-height: 1.3; } body.wovallo-checkout-page .woocommerce-checkout-payment div.payment_box { margin: 0.72rem 0 0 !important; border-radius: 0.75rem !important; background: rgba(162, 192, 206, 0.11) !important; color: rgba(58, 71, 80, 0.72) !important; font-size: 0.9rem; line-height: 1.55; } body.wovallo-checkout-page .woocommerce-checkout-payment div.payment_box::before { border-bottom-color: rgba(162, 192, 206, 0.11) !important; } body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_stripe div.payment_box::before, body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_woocommerce_payments div.payment_box::before { display: none !important; content: none !important; } body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_stripe div.payment_box, body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_woocommerce_payments div.payment_box { overflow: visible; padding: 0.58rem 0 0 !important; background: transparent !important; box-shadow: none; } body.wovallo-checkout-page .woocommerce-checkout-payment #stripe-payment-data, body.wovallo-checkout-page .woocommerce-checkout-payment .wcpay-upe-form { display: grid; width: 100%; min-width: 0; gap: 0.48rem; } body.wovallo-checkout-page .woocommerce-checkout-payment #stripe-payment-data > p, body.wovallo-checkout-page .woocommerce-checkout-payment .wcpay-upe-form > p { display: none !important; } body.wovallo-checkout-page .woocommerce-checkout-payment #wc-stripe-payment-token-new + label, body.wovallo-checkout-page .woocommerce-checkout-payment #wc-stripe-new-payment-method + label, body.wovallo-checkout-page .woocommerce-checkout-payment #wc-woocommerce_payments-new-payment-method + label { display: inline-flex; align-items: center; min-height: 0; margin: 0 0 0.55rem 0.35rem; color: rgba(58, 71, 80, 0.78); font-size: 0.84rem; font-weight: 700; } /* "Save payment info" row: escape the .form-row grid so the checkbox stays inline to the LEFT of its label instead of stretching full-width above it */ body.wovallo-checkout-page .woocommerce-checkout-payment .woocommerce-SavedPaymentMethods-saveNew, body.wovallo-checkout-page .woocommerce-checkout-payment .form-row:has(#wc-stripe-new-payment-method), body.wovallo-checkout-page .woocommerce-checkout-payment .form-row:has(#wc-woocommerce_payments-new-payment-method) { display: flex !important; flex-flow: row nowrap; gap: 0.55rem; align-items: center; width: 100%; margin: 0.85rem 0 0 !important; padding: 0; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left; } body.wovallo-checkout-page .woocommerce-checkout-payment #wc-stripe-new-payment-method, body.wovallo-checkout-page .woocommerce-checkout-payment #wc-woocommerce_payments-new-payment-method { width: 1.15rem !important; height: 1.15rem !important; flex: 0 0 auto; margin: 0 !important; accent-color: #ff9d7e; outline: 0 !important; box-shadow: none !important; } body.wovallo-checkout-page .woocommerce-checkout-payment #wc-stripe-new-payment-method + label, body.wovallo-checkout-page .woocommerce-checkout-payment #wc-woocommerce_payments-new-payment-method + label { margin: 0 !important; font-size: 0.9rem; line-height: 1.4; cursor: pointer; } body.wovallo-checkout-page .woocommerce-checkout-payment #wc-stripe-upe-form, body.wovallo-checkout-page .woocommerce-checkout-payment .wc-upe-form, body.wovallo-checkout-page .woocommerce-checkout-payment .wc-payment-form { display: block; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; border: 0; padding: 0; overflow: visible; } body.wovallo-checkout-page .woocommerce-checkout-payment .wc-stripe-upe-element, body.wovallo-checkout-page .woocommerce-checkout-payment #wcpay-upe-element, body.wovallo-checkout-page .woocommerce-checkout-payment .wcpay-upe-element, body.wovallo-checkout-page .woocommerce-checkout-payment #stripe-card-element, body.wovallo-checkout-page .woocommerce-checkout-payment #stripe-exp-element, body.wovallo-checkout-page .woocommerce-checkout-payment #stripe-cvc-element, body.wovallo-checkout-page .woocommerce-checkout-payment #stripe-iban-element, body.wovallo-checkout-page .woocommerce-checkout-payment .wc-stripe-elements-field, body.wovallo-checkout-page .woocommerce-checkout-payment .StripeElement { display: block !important; box-sizing: border-box; width: 100%; max-width: 100%; min-height: 3.25rem; min-width: 0; border-radius: 0.68rem; background: #ffffff; } body.wovallo-checkout-page .woocommerce-checkout-payment .wc-stripe-upe-element, body.wovallo-checkout-page .woocommerce-checkout-payment #wcpay-upe-element, body.wovallo-checkout-page .woocommerce-checkout-payment .wcpay-upe-element { min-height: clamp(15.5rem, 30vw, 19rem); margin: 0.05rem 0 0.18rem; overflow: visible !important; border: 1px solid rgba(162, 192, 206, 0.2); padding: 0.72rem 0.85rem 0.82rem; box-shadow: 0 8px 20px rgba(58, 71, 80, 0.045); transition: height 0.22s ease, min-height 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease; } body.wovallo-checkout-page .woocommerce-checkout-payment .wc-stripe-upe-element:focus-within, body.wovallo-checkout-page .woocommerce-checkout-payment #wcpay-upe-element:focus-within, body.wovallo-checkout-page .woocommerce-checkout-payment .wcpay-upe-element:focus-within { border-color: rgba(255, 157, 126, 0.44); background: #ffffff; box-shadow: 0 14px 30px rgba(58, 71, 80, 0.08); } body.wovallo-checkout-page .woocommerce-checkout-payment .wc-stripe-upe-element::before, body.wovallo-checkout-page .woocommerce-checkout-payment #wcpay-upe-element::before, body.wovallo-checkout-page .woocommerce-checkout-payment .wcpay-upe-element::before { display: none !important; content: none !important; } body.wovallo-checkout-page .woocommerce-checkout-payment .wc-stripe-upe-element iframe, body.wovallo-checkout-page .woocommerce-checkout-payment #wcpay-upe-element iframe, body.wovallo-checkout-page .woocommerce-checkout-payment .wcpay-upe-element iframe, body.wovallo-checkout-page .woocommerce-checkout-payment .wc-stripe-elements-field iframe, body.wovallo-checkout-page .woocommerce-checkout-payment .StripeElement iframe { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; min-height: 3rem; /* Stripe injects inline margin:-4px which shifts the card form ~4px left, biasing the whitespace to the right. Zero it so the form sits centered. */ margin: 0 !important; } /* Same reason: the Stripe element wrapper carries an inline negative margin. */ body.wovallo-checkout-page .woocommerce-checkout-payment .wc-stripe-upe-element .__PrivateStripeElement, body.wovallo-checkout-page .woocommerce-checkout-payment #wcpay-upe-element .__PrivateStripeElement, body.wovallo-checkout-page .woocommerce-checkout-payment .wcpay-upe-element .__PrivateStripeElement { margin: 0 !important; } body.wovallo-checkout-page .woocommerce-checkout-payment .wc-stripe-upe-element iframe, body.wovallo-checkout-page .woocommerce-checkout-payment #wcpay-upe-element iframe, body.wovallo-checkout-page .woocommerce-checkout-payment .wcpay-upe-element iframe { min-height: clamp(14rem, 27vw, 17.5rem); } body.wovallo-checkout-page .woocommerce-checkout-payment #wc-stripe-upe-errors, body.wovallo-checkout-page .woocommerce-checkout-payment #wcpay-upe-errors { margin-top: 0.25rem; color: #9d341f; font-size: 0.84rem; font-weight: 700; line-height: 1.45; } body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_stripe div.payment_box p, body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_woocommerce_payments div.payment_box p { margin: 0 0 0.7rem !important; color: rgba(58, 71, 80, 0.78); font-size: 0.92rem; font-weight: 500; line-height: 1.48; } body.wovallo-checkout-page .woocommerce-checkout-payment .woocommerce-SavedPaymentMethods, body.wovallo-checkout-page .woocommerce-checkout-payment .wc-saved-payment-methods { margin: 0 0 0.75rem !important; padding: 0 !important; list-style: none !important; } body.wovallo-checkout-page .woocommerce-checkout-payment .woocommerce-SavedPaymentMethods li { border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none; } body.wovallo-checkout-page .woocommerce-checkout-payment .woocommerce-SavedPaymentMethods label { font-size: 0.85rem; font-weight: 700; color: rgba(58, 71, 80, 0.78); } body.wovallo-checkout-page .woocommerce-checkout-payment .woocommerce-SavedPaymentMethods label::before, body.wovallo-checkout-page .woocommerce-checkout-payment .woocommerce-SavedPaymentMethods label::after { content: none; } body.wovallo-checkout-page .woocommerce-checkout-payment .woocommerce-info, body.wovallo-checkout-page .woocommerce-checkout-payment .woocommerce-notice--info { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem !important; align-items: start !important; width: 100% !important; max-width: none !important; margin: 0 !important; border: 1px solid rgba(255, 157, 126, 0.28) !important; border-top-color: rgba(255, 157, 126, 0.28) !important; border-radius: 0.9rem !important; padding: 0.9rem 0.95rem !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(162, 192, 206, 0.12)), #ffffff !important; box-shadow: none !important; color: rgba(58, 71, 80, 0.78) !important; font-size: 0.92rem !important; font-weight: 700 !important; line-height: 1.55 !important; text-align: left !important; } body.wovallo-checkout-page .woocommerce-checkout-payment .wc-block-components-notice-banner { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem !important; align-items: start !important; margin: 0 !important; border: 1px solid rgba(255, 157, 126, 0.28) !important; border-radius: 0.9rem !important; padding: 0.9rem 0.95rem !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(162, 192, 206, 0.12)), #ffffff !important; color: rgba(58, 71, 80, 0.78) !important; box-shadow: none !important; font-size: 0.92rem !important; font-weight: 700 !important; line-height: 1.55 !important; text-align: left !important; } body.wovallo-checkout-page .woocommerce-checkout-payment .woocommerce-info::before, body.wovallo-checkout-page .woocommerce-checkout-payment .woocommerce-notice--info::before { border-color: rgba(255, 157, 126, 0.42) !important; background: rgba(255, 157, 126, 0.14) !important; color: #3a4750 !important; } body.wovallo-checkout-page .woocommerce-checkout-payment .wc-block-components-notice-banner > svg { width: 1.55rem !important; height: 1.55rem !important; min-width: 1.55rem !important; min-height: 1.55rem !important; align-self: start !important; margin-top: 0.05rem !important; border: 1px solid rgba(255, 157, 126, 0.42) !important; border-radius: 9999px !important; padding: 0.18rem !important; background: rgba(255, 157, 126, 0.14) !important; fill: #3a4750 !important; } body.wovallo-checkout-page .woocommerce-checkout-payment .wc-block-components-notice-banner__content { align-self: start !important; flex-basis: auto !important; color: rgba(58, 71, 80, 0.78) !important; } body.wovallo-checkout-page .woocommerce-checkout-payment .place-order { display: grid; gap: 0.75rem; margin: 0; padding: 0.85rem !important; } body.wovallo-checkout-page #place_order { width: 100%; min-height: 3.35rem; font-size: 1rem; } body.wovallo-checkout-page .woocommerce-privacy-policy-text, body.wovallo-checkout-page .woocommerce-terms-and-conditions-wrapper { color: rgba(58, 71, 80, 0.78); font-size: 0.86rem; line-height: 1.6; } body.wovallo-checkout-page .woocommerce-privacy-policy-text p, body.wovallo-checkout-page .woocommerce-terms-and-conditions-wrapper p { margin: 0; } body.wovallo-checkout-page .woocommerce a { color: #3a4750; font-weight: 800; text-decoration-color: rgba(255, 157, 126, 0.52); text-decoration-thickness: 2px; text-underline-offset: 0.22em; } body.wovallo-checkout-page .woocommerce a:hover { color: #ff9d7e; } body.wovallo-checkout-page .woocommerce a:focus, body.wovallo-checkout-page .woocommerce a:focus-visible { color: #ff9d7e; outline: none !important; box-shadow: none !important; text-decoration-color: #ff9d7e; } body.wovallo-checkout-page .woocommerce-notices-wrapper, body.wovallo-checkout-page .woocommerce-NoticeGroup, body.wovallo-checkout-page .woocommerce-error, body.wovallo-checkout-page .woocommerce-message, body.wovallo-checkout-page .woocommerce-info { max-width: 76rem !important; margin: 0 auto 1rem !important; } body.wovallo-checkout-page .woocommerce form.checkout > .woocommerce-NoticeGroup, body.wovallo-checkout-page .woocommerce form.checkout > .woocommerce-NoticeGroup-checkout { width: min(100%, 48rem); max-width: 100% !important; grid-column: 1 / -1; margin: 0.25rem 0 1.15rem !important; } body.wovallo-checkout-page .woocommerce-error, body.wovallo-checkout-page .woocommerce-message, body.wovallo-checkout-page .woocommerce-info { display: flex !important; gap: 0.72rem; align-items: flex-start !important; min-height: 2.9rem !important; border: 1px solid rgba(162, 192, 206, 0.28) !important; border-radius: 0.75rem !important; padding: 0.72rem 0.9rem !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(250, 249, 246, 0.82)), #ffffff !important; box-shadow: 0 10px 24px rgba(58, 71, 80, 0.05) !important; color: #3a4750 !important; font-size: 0.9rem !important; font-weight: 700 !important; line-height: 1.45 !important; } body.wovallo-checkout-page .woocommerce-error { display: grid !important; grid-template-columns: 2.35rem minmax(0, 1fr); gap: 0.25rem 0.85rem !important; align-items: start !important; width: 100% !important; max-width: 100% !important; border-color: rgba(255, 157, 126, 0.38) !important; border-left: 0.28rem solid rgba(255, 157, 126, 0.82) !important; border-radius: 0.95rem !important; padding: 1.05rem 1.15rem !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 157, 126, 0.1)), #ffffff !important; box-shadow: 0 16px 38px rgba(58, 71, 80, 0.08) !important; color: #3a4750 !important; font-size: 1rem !important; font-weight: 800 !important; line-height: 1.42 !important; list-style: none !important; } body.wovallo-checkout-page .woocommerce-error::before, body.wovallo-checkout-page .woocommerce-message::before, body.wovallo-checkout-page .woocommerce-info::before { position: static !important; top: auto !important; left: auto !important; display: inline-grid !important; width: 1.55rem !important; height: 1.55rem !important; flex: 0 0 auto; place-items: center !important; border: 1px solid rgba(162, 192, 206, 0.45) !important; border-radius: 9999px !important; background: rgba(162, 192, 206, 0.18) !important; color: #3a4750 !important; font-family: inherit !important; font-size: 0.78rem !important; font-weight: 900 !important; line-height: 1 !important; content: "i" !important; } body.wovallo-checkout-page .woocommerce-message::before { content: "\2713" !important; } body.wovallo-checkout-page .woocommerce-error::before { width: 2.15rem !important; height: 2.15rem !important; grid-row: 1 / span 40; border-color: rgba(255, 157, 126, 0.52) !important; background: rgba(255, 157, 126, 0.16) !important; font-size: 0.94rem !important; content: "!" !important; } body.wovallo-checkout-page .woocommerce-error li { position: relative; grid-column: 2; margin: 0.12rem 0 0 !important; padding-left: 1rem !important; color: rgba(58, 71, 80, 0.86) !important; font-size: 0.96rem !important; font-weight: 700 !important; line-height: 1.5 !important; list-style: none !important; } body.wovallo-checkout-page .woocommerce-error li::before { position: absolute; top: 0.72em; left: 0; width: 0.34rem; height: 0.34rem; border-radius: 9999px; background: #ff9d7e; content: ""; transform: translateY(-50%); } body.wovallo-checkout-page .woocommerce-error.wovallo-checkout-notice-removing, body.wovallo-checkout-page .woocommerce-error li.wovallo-checkout-notice-removing, body.wovallo-checkout-page .wc-block-components-notice-banner.is-error.wovallo-checkout-notice-removing, body.wovallo-checkout-page .wc-block-components-notice-banner.is-error li.wovallo-checkout-notice-removing { opacity: 0; transform: translateY(-0.25rem); transition: opacity 0.16s ease, transform 0.16s ease; } body.wovallo-checkout-page .woocommerce-error a { color: #3a4750 !important; text-decoration-color: rgba(255, 157, 126, 0.58); } body.wovallo-checkout-page .woocommerce-error a:hover, body.wovallo-checkout-page .woocommerce-error a:focus-visible { color: #ff9d7e !important; outline: none; text-decoration-color: #ff9d7e; } body.wovallo-checkout-page .woocommerce-error a:focus-visible { border-radius: 0.25rem; box-shadow: none !important; } body.wovallo-checkout-page .wc-block-components-notice-banner.is-error { gap: 0.85rem !important; border-color: rgba(255, 157, 126, 0.38) !important; border-left: 0.28rem solid rgba(255, 157, 126, 0.82) !important; border-radius: 0.95rem !important; padding: 1.05rem 1.15rem !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 157, 126, 0.1)), #ffffff !important; box-shadow: 0 16px 38px rgba(58, 71, 80, 0.08) !important; color: #3a4750 !important; } body.wovallo-checkout-page .wc-block-components-notice-banner.is-error > svg { border-color: rgba(255, 157, 126, 0.52) !important; background: rgba(255, 157, 126, 0.16) !important; fill: #3a4750 !important; } body.wovallo-checkout-page .wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__content { color: rgba(58, 71, 80, 0.86) !important; font-size: 0.96rem !important; font-weight: 700 !important; line-height: 1.5 !important; } body.wovallo-checkout-page .wovallo-checkout-mobile-total { display: none; } body.wovallo-checkout-page .wovallo-checkout-mobile-total span { color: rgba(58, 71, 80, 0.78); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.wovallo-checkout-page .wovallo-checkout-mobile-total strong { color: #3a4750; font-size: 1rem; font-weight: 900; } body.wovallo-order-received-page .wovallo-checkout-native { padding: clamp(1rem, 2vw, 1.5rem); } body.wovallo-order-received-page .wovallo-thankyou { display: grid; gap: 1rem; } body.wovallo-order-received-page .wovallo-thankyou-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 0.5rem; background: linear-gradient(135deg, rgba(162, 192, 206, 0.14), rgba(255, 255, 255, 0.96) 44%), #ffffff; box-shadow: 0 14px 34px rgba(58, 71, 80, 0.07); padding: clamp(1rem, 2.5vw, 1.5rem); } body.wovallo-order-received-page .wovallo-thankyou-panel--failed, body.wovallo-order-received-page .wovallo-thankyou-panel--empty { background: linear-gradient(135deg, rgba(255, 157, 126, 0.13), rgba(255, 255, 255, 0.96) 46%), #ffffff; } body.wovallo-order-received-page .wovallo-thankyou-status-mark { display: grid; width: 3.8rem; height: 3.8rem; place-items: center; border: 1px solid rgba(162, 192, 206, 0.34); border-radius: 9999px; background: rgba(250, 249, 246, 0.86); color: #3a4750; } body.wovallo-order-received-page .wovallo-thankyou-panel--failed .wovallo-thankyou-status-mark, body.wovallo-order-received-page .wovallo-thankyou-panel--empty .wovallo-thankyou-status-mark { border-color: rgba(255, 157, 126, 0.48); background: rgba(255, 157, 126, 0.13); } body.wovallo-order-received-page .wovallo-thankyou-status-mark svg { width: 2rem; height: 2rem; } body.wovallo-order-received-page .wovallo-thankyou-copy { min-width: 0; } body.wovallo-order-received-page .wovallo-thankyou-kicker { margin: 0 0 0.35rem; color: #ff9d7e; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; } body.wovallo-order-received-page .wovallo-thankyou-copy h2 { margin: 0; color: #3a4750; font-size: clamp(1.55rem, 3vw, 2.35rem); font-weight: 800; line-height: 1.08; } body.wovallo-order-received-page .wovallo-thankyou-copy p { max-width: 44rem; margin: 0.55rem 0 0; color: rgba(58, 71, 80, 0.7); line-height: 1.65; } body.wovallo-order-received-page .wovallo-thankyou-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: flex-end; } body.wovallo-order-received-page .woocommerce-verify-email { display: grid; gap: 1rem; margin: 0; } body.wovallo-order-received-page .woocommerce-verify-email p { max-width: none; margin: 0; } body.wovallo-order-received-page .woocommerce-verify-email .form-row { display: grid; align-content: start; gap: 0.22rem; width: 100%; margin: 0; padding: 0; } body.wovallo-order-received-page .woocommerce-verify-email .form-row:not(:last-child) { margin-bottom: 0.65rem; } body.wovallo-order-received-page .woocommerce-verify-email .form-row:last-child { display: flex; justify-content: flex-end; margin-top: 0.25rem; } body.wovallo-order-received-page .woocommerce-verify-email label { display: block; margin: 0 !important; color: rgba(58, 71, 80, 0.74); font-size: 0.82rem; font-weight: 800; line-height: 1.2; } body.wovallo-order-received-page .woocommerce-verify-email .form-row br, body.wovallo-checkout-page .wovallo-checkout-native .woocommerce-verify-email .form-row br { display: none !important; } body.wovallo-order-received-page .woocommerce-verify-email .input-text { display: block; width: 100%; min-height: 3.65rem; box-sizing: border-box; margin: 0 !important; } body.wovallo-order-received-page .woocommerce-verify-email label + .input-text, body.wovallo-checkout-page .wovallo-checkout-native .woocommerce-verify-email label + .input-text { margin-top: 0.18rem !important; } body.wovallo-order-received-page .woocommerce-verify-email .form-row:has(label + .input-text), body.wovallo-checkout-page .wovallo-checkout-native .woocommerce-verify-email .form-row:has(label + .input-text) { gap: 0 !important; margin-bottom: 0.65rem !important; } body.wovallo-order-received-page .woocommerce-verify-email .woocommerce-button.button { display: inline-grid !important; width: min(100%, 13.5rem); height: 3.55rem; min-height: 0; box-sizing: border-box; place-items: center; border: 1px solid rgba(58, 71, 80, 0.86) !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 42%), #3a4750 !important; box-shadow: 0 14px 28px rgba(58, 71, 80, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.16); color: #ffffff !important; letter-spacing: 0; padding: 0 1.45rem !important; line-height: 1 !important; vertical-align: middle; } body.wovallo-order-received-page .woocommerce-verify-email .wovallo-verify-email-button-label { display: block; line-height: 1; transform: translateY(-0.08rem); } body.wovallo-order-received-page .woocommerce-verify-email .woocommerce-button.button:hover, body.wovallo-order-received-page .woocommerce-verify-email .woocommerce-button.button:focus-visible { border-color: rgba(255, 157, 126, 0.72) !important; background: linear-gradient(135deg, rgba(255, 157, 126, 0.96), rgba(162, 192, 206, 0.92)), #ff9d7e !important; box-shadow: 0 18px 34px rgba(255, 157, 126, 0.28); color: #3a4750 !important; transform: translateY(-1px); } body.wovallo-order-received-page .woocommerce-verify-email .woocommerce-button.button:focus-visible { outline: 0; box-shadow: 0 18px 34px rgba(255, 157, 126, 0.28), 0 0 0 0.22rem rgba(255, 157, 126, 0.18); } body.wovallo-order-received-page .wovallo-thankyou-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.75rem, 1fr)); gap: 0.75rem; margin: 0 !important; padding: 0 !important; list-style: none; } body.wovallo-order-received-page .wovallo-thankyou-overview::before, body.wovallo-order-received-page .wovallo-thankyou-overview::after { content: none; } body.wovallo-order-received-page .wovallo-thankyou-overview li { display: grid; gap: 0.35rem; min-width: 0; margin: 0 !important; border: 1px solid rgba(162, 192, 206, 0.22) !important; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.78); padding: 0.95rem !important; color: #3a4750; text-transform: none; } body.wovallo-order-received-page .wovallo-thankyou-overview li span { color: rgba(58, 71, 80, 0.78); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } body.wovallo-order-received-page .wovallo-thankyou-overview li strong { min-width: 0; color: #3a4750; font-size: 1rem; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; } body.wovallo-order-received-page .wovallo-thankyou-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } body.wovallo-order-received-page .wovallo-thankyou-next-card { display: grid; gap: 0.5rem; align-content: start; border: 1px solid rgba(162, 192, 206, 0.2); border-radius: 0.5rem; background: #ffffff; padding: 1rem; } body.wovallo-order-received-page .wovallo-thankyou-next-card span { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border-radius: 9999px; background: rgba(162, 192, 206, 0.18); color: #3a4750; font-size: 0.82rem; font-weight: 900; } body.wovallo-order-received-page .wovallo-thankyou-next-card h3 { margin: 0; color: #3a4750; font-size: 1rem; font-weight: 800; line-height: 1.2; } body.wovallo-order-received-page .wovallo-thankyou-next-card p { margin: 0; color: rgba(58, 71, 80, 0.78); font-size: 0.94rem; line-height: 1.55; } body.wovallo-order-received-page .woocommerce-thankyou-order-received { margin: 0; color: rgba(58, 71, 80, 0.7); line-height: 1.6; } body.wovallo-order-received-page .woocommerce-order-details, body.wovallo-order-received-page .woocommerce-customer-details { margin: 0; } body.wovallo-order-received-page .wovallo-order-customer-details { display: grid; gap: 1.05rem; border: 1px solid rgba(162, 192, 206, 0.2); border-radius: 0.5rem; background: linear-gradient(135deg, rgba(162, 192, 206, 0.1), rgba(255, 255, 255, 0.96) 38%), #ffffff; box-shadow: 0 1rem 2.8rem rgba(58, 71, 80, 0.06); padding: clamp(1rem, 2vw, 1.25rem); } body.wovallo-order-received-page .wovallo-order-customer-details-header { display: grid; gap: 0.3rem; } body.wovallo-order-received-page .wovallo-order-customer-details-header h2, body.wovallo-order-received-page .wovallo-order-address-card .woocommerce-column__title { margin: 0; color: #3a4750; font-size: clamp(1.18rem, 2vw, 1.42rem); font-weight: 800; line-height: 1.15; } body.wovallo-order-received-page .wovallo-order-address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; } body.wovallo-order-received-page .wovallo-order-address-grid.woocommerce-columns--1 { grid-template-columns: minmax(0, 1fr); } body.wovallo-order-received-page .wovallo-order-address-card { display: grid; float: none !important; grid-template-rows: auto 1fr; gap: 0.95rem; min-width: 0; min-height: 12.5rem; width: auto !important; border: 1px solid rgba(162, 192, 206, 0.2); border-radius: 0.5rem; background: rgba(255, 255, 255, 0.86); padding: 1.1rem; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.wovallo-order-received-page .wovallo-order-address-card:hover { border-color: rgba(255, 157, 126, 0.42); box-shadow: 0 1rem 2rem rgba(58, 71, 80, 0.07); transform: translateY(-1px); } body.wovallo-order-received-page .wovallo-order-address-card-header { display: flex; gap: 0.65rem; align-items: center; min-height: 2.25rem; } body.wovallo-order-received-page .wovallo-order-address-card-header span { display: inline-grid; width: 2.1rem; height: 2.1rem; flex: 0 0 auto; place-items: center; border: 1px solid rgba(162, 192, 206, 0.3); border-radius: 9999px; background: rgba(162, 192, 206, 0.14); color: #3a4750; font-size: 0.78rem; font-weight: 900; } body.wovallo-order-received-page .wovallo-order-address-card address { display: block; min-height: 0 !important; margin: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; color: rgba(58, 71, 80, 0.7); font-style: normal; line-height: 1.7; overflow-wrap: anywhere; padding: 0 !important; } body.wovallo-order-received-page .wovallo-order-address-card address p { margin: 0.35rem 0 0; } body.wovallo-order-received-page .woocommerce-customer-details--phone, body.wovallo-order-received-page .woocommerce-customer-details--email { color: #3a4750; font-weight: 700; } body.wovallo-order-received-page .wovallo-order-details-card { display: grid; gap: 1rem; overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.2); border-radius: 0.5rem; background: linear-gradient(135deg, rgba(250, 249, 246, 0.92), rgba(255, 255, 255, 0.98) 36%), #ffffff; box-shadow: 0 1.1rem 3rem rgba(58, 71, 80, 0.065); padding: clamp(1rem, 2vw, 1.25rem); } body.wovallo-order-received-page .wovallo-order-details-header { display: flex; gap: 1rem; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(162, 192, 206, 0.18); padding-bottom: 0.85rem; } body.wovallo-order-received-page .wovallo-order-details-header .woocommerce-order-details__title { margin-bottom: 0; } body.wovallo-order-received-page .wovallo-order-details-kicker { margin: 0 0 0.35rem; color: rgba(58, 71, 80, 0.78); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } body.wovallo-order-received-page .wovallo-order-details-count { display: inline-grid; box-sizing: border-box; min-width: 4.2rem; height: 2rem; place-items: center; border: 1px solid rgba(162, 192, 206, 0.42); border-radius: 9999px; background: rgba(162, 192, 206, 0.16); color: #3a4750; font-size: 0.78rem; font-weight: 900; line-height: 1; padding: 0.35rem 0.7rem; text-align: center; white-space: nowrap; } body.wovallo-order-received-page .wovallo-order-details-header > p { display: flex; align-items: center; margin: 0; } body.wovallo-order-received-page .wovallo-order-details-count > br, body.wovallo-order-received-page .wovallo-order-product-row > br, body.wovallo-order-received-page .wovallo-order-product-main > br, body.wovallo-order-received-page .wovallo-order-product-copy > br, body.wovallo-order-received-page .wovallo-order-product-quantity > br, body.wovallo-order-received-page .wovallo-order-summary-highlight > br, body.wovallo-order-received-page .wovallo-order-summary-row > br { display: none; } body.wovallo-order-received-page .wovallo-order-details-layout { display: grid; gap: 1rem; } body.wovallo-order-received-page .wovallo-order-products { display: grid; gap: 0.85rem; min-width: 0; } body.wovallo-order-received-page .wovallo-order-product-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1rem, 2vw, 1.5rem); align-items: center; min-height: 7.75rem; overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.2); border-radius: 0.5rem; background: linear-gradient(135deg, rgba(162, 192, 206, 0.12), rgba(255, 255, 255, 0.92) 34%), #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58); padding: clamp(0.95rem, 2vw, 1.1rem); } body.wovallo-order-received-page .wovallo-order-product-row::before { position: absolute; inset: 0 auto 0 0; width: 0.22rem; background: #ff9d7e; content: ""; } body.wovallo-order-received-page .wovallo-order-product-main { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.95rem; align-items: center; min-width: 0; } body.wovallo-order-received-page .wovallo-order-product-image { display: flex; width: 5rem; height: 5rem; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(162, 192, 206, 0.22); border-radius: 0.5rem; background: linear-gradient(135deg, rgba(162, 192, 206, 0.14), rgba(255, 157, 126, 0.08)), #faf9f6; box-shadow: 0 0.5rem 1.2rem rgba(58, 71, 80, 0.06); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.wovallo-order-received-page a.wovallo-order-product-image:hover { border-color: rgba(255, 157, 126, 0.58); box-shadow: 0 0.65rem 1.35rem rgba(255, 157, 126, 0.16); transform: translateY(-1px); } body.wovallo-order-received-page a.wovallo-order-product-image:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } body.wovallo-order-received-page .wovallo-order-product-image-img { display: block; width: 100%; height: 100%; object-fit: cover; } body.wovallo-order-received-page .wovallo-order-product-copy { display: grid; gap: 0.55rem; align-content: center; min-width: 0; } body.wovallo-order-received-page .wovallo-order-product-name { margin: 0; color: #3a4750; font-size: clamp(1.12rem, 2vw, 1.42rem); font-weight: 800; line-height: 1.18; } body.wovallo-order-received-page .wovallo-order-product-name a { display: inline; border-radius: 0.28rem; color: inherit; outline: none; text-decoration-color: rgba(255, 157, 126, 0.48); text-decoration-thickness: 2px; text-underline-offset: 0.2em; transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, text-decoration-color 0.2s ease; } body.wovallo-order-received-page .wovallo-order-product-name a:hover { color: #ff9d7e; text-decoration-color: #ff9d7e; } body.wovallo-order-received-page .wovallo-order-product-name a:focus-visible { background: rgba(255, 157, 126, 0.12); color: #3a4750; box-shadow: 0 0 0 0.22rem rgba(255, 157, 126, 0.14); text-decoration-color: #ff9d7e; } body.wovallo-order-received-page .wovallo-order-product-quantity { display: inline-grid; box-sizing: border-box; width: fit-content; min-width: 3.4rem; height: 1.72rem; place-items: center; border: 1px solid rgba(162, 192, 206, 0.28); border-radius: 9999px; background: #ffffff; color: rgba(58, 71, 80, 0.7); font-size: 0.78rem; font-weight: 800; line-height: 1; padding: 0.32rem 0.58rem; text-align: center; white-space: nowrap; } body.wovallo-order-received-page .wovallo-order-product-row .wc-item-meta { display: grid; gap: 0.2rem; margin: 0.2rem 0 0; padding: 0; color: rgba(58, 71, 80, 0.78); font-size: 0.9rem; list-style: none; } body.wovallo-order-received-page .wovallo-order-product-row .wc-item-meta li { display: flex; flex-wrap: wrap; gap: 0.35rem; } body.wovallo-order-received-page .wovallo-order-product-row .wc-item-meta p { margin: 0; } body.wovallo-order-received-page .wovallo-order-product-total { color: #3a4750; font-size: clamp(1.08rem, 2vw, 1.35rem); font-variant-numeric: tabular-nums; font-weight: 900; line-height: 1.25; text-align: right; white-space: nowrap; } body.wovallo-order-received-page .wovallo-order-purchase-note { border: 1px solid rgba(255, 157, 126, 0.28); border-radius: 0.5rem; background: rgba(255, 157, 126, 0.08); color: rgba(58, 71, 80, 0.72); padding: 0.85rem 1rem; } body.wovallo-order-received-page .wovallo-order-purchase-note p { margin: 0; } body.wovallo-order-received-page .wovallo-order-summary { display: grid; gap: 0.78rem; min-width: 0; align-content: start; border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 0.5rem; background: linear-gradient(145deg, rgba(162, 192, 206, 0.16), rgba(255, 255, 255, 0.98) 45%), #ffffff; box-shadow: 0 1rem 2rem rgba(58, 71, 80, 0.06); padding: 0.95rem; } body.wovallo-order-received-page .wovallo-order-summary-highlight { display: flex; gap: 1rem; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(162, 192, 206, 0.2); min-height: 2.85rem; padding-bottom: 0.78rem; } body.wovallo-order-received-page .wovallo-order-summary-highlight > span { color: rgba(58, 71, 80, 0.78); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } body.wovallo-order-received-page .wovallo-order-summary-highlight strong { display: inline-flex; align-items: center; color: #3a4750; font-size: clamp(1.05rem, 2vw, 1.22rem); font-variant-numeric: tabular-nums; font-weight: 900; line-height: 1; text-align: right; white-space: nowrap; } body.wovallo-order-received-page .wovallo-order-summary-totals { display: grid; gap: 0; } body.wovallo-order-received-page .wovallo-order-summary-row { display: flex; gap: 0.9rem; align-items: center; justify-content: space-between; min-height: 2.55rem; border-bottom: 1px solid rgba(162, 192, 206, 0.14); color: rgba(58, 71, 80, 0.78); font-size: 0.95rem; } body.wovallo-order-received-page .wovallo-order-summary-row > span { display: block; flex: 1 1 auto; font-weight: 800; line-height: 1.25; min-width: 0; white-space: nowrap; } body.wovallo-order-received-page .wovallo-order-summary-row > strong { display: inline-flex; flex: 0 0 auto; align-items: center; color: #3a4750; font-variant-numeric: tabular-nums; justify-self: end; line-height: 1.25; text-align: right; white-space: nowrap; } body.wovallo-order-received-page .wovallo-order-summary .woocommerce-Price-amount, body.wovallo-order-received-page .wovallo-order-summary .woocommerce-Price-amount bdi { display: inline-flex; align-items: baseline; white-space: nowrap; } body.wovallo-order-received-page .wovallo-order-summary .woocommerce-Price-currencySymbol { display: inline; margin-right: 0.12em; } body.wovallo-order-received-page .wovallo-order-summary-row:last-child { border-bottom: 0; } body.wovallo-order-received-page .wovallo-order-summary-row--order_total { border-top: 1px solid rgba(162, 192, 206, 0.22); margin-top: 0.2rem; padding-top: 0.85rem; } body.wovallo-order-received-page .wovallo-order-summary-row--order_total > span, body.wovallo-order-received-page .wovallo-order-summary-row--order_total > strong { color: #3a4750; font-size: 1.1rem; font-weight: 800; } body.wovallo-order-received-page .wovallo-order-summary-note { display: grid; gap: 0.4rem; border-top: 1px solid rgba(162, 192, 206, 0.18); padding-top: 0.85rem; } body.wovallo-order-received-page .wovallo-order-summary-note span { color: #3a4750; font-size: 0.9rem; font-weight: 800; } body.wovallo-order-received-page .wovallo-order-summary-note p { margin: 0; color: rgba(58, 71, 80, 0.78); line-height: 1.55; } body.wovallo-order-received-page .wovallo-order-actions { display: grid; gap: 0.75rem; border-top: 1px solid rgba(162, 192, 206, 0.18); padding-top: 0.95rem; } body.wovallo-order-received-page .wovallo-order-actions p { margin: 0; color: #3a4750; font-size: 0.9rem; font-weight: 800; } body.wovallo-order-received-page .wovallo-order-actions .order-actions-button.button { width: 100%; min-width: 0 !important; } body.wovallo-order-received-page .wovallo-order-actions .order-actions-button.pay { border-color: rgba(255, 157, 126, 0.78) !important; background: #ff9d7e !important; color: #3a4750 !important; } @media (min-width: 860px) { body.wovallo-checkout-page .wovallo-checkout-hero .wovallo-checkout-shell { grid-template-columns: minmax(0, 1fr) auto; } body.wovallo-order-received-page .wovallo-order-details-layout { grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem); align-items: start; } body.wovallo-checkout-page .woocommerce form.checkout > .wovallo-checkout-fields { grid-row: 1; grid-column: 1; } body.wovallo-checkout-page .wovallo-checkout-order-panel { position: sticky; top: calc(var(--wovallo-admin-bar-height, 0px) + 5.25rem); grid-row: 1; grid-column: 2; } } @media (max-width: 980px) { body.wovallo-order-received-page .wovallo-thankyou-panel { grid-template-columns: auto minmax(0, 1fr); } body.wovallo-order-received-page .wovallo-thankyou-actions { grid-column: 1 / -1; justify-content: flex-start; } body.wovallo-checkout-page .woocommerce form.checkout { grid-template-columns: 1fr; } body.wovallo-checkout-page .woocommerce form.checkout > .wovallo-checkout-fields, body.wovallo-checkout-page .wovallo-checkout-order-panel { position: static; top: auto; grid-row: auto; grid-column: auto; } body.wovallo-checkout-page #order_review_heading { margin: 0; border-bottom: 0; } body.wovallo-checkout-page #order_review { border-top: 0; margin-top: 0; } body.wovallo-checkout-page .wovallo-checkout-order-panel { order: 2; } body.wovallo-checkout-page .woocommerce form.checkout > .wovallo-checkout-fields { order: 1; } } @media (max-width: 720px) { body.wovallo-order-received-page .wovallo-checkout-native { padding: 0.75rem; } body.wovallo-order-received-page .wovallo-thankyou { gap: 0.75rem; } body.wovallo-order-received-page .wovallo-thankyou-panel { grid-template-columns: 1fr; align-items: start; gap: 0.7rem; padding: 0.9rem; } body.wovallo-order-received-page .wovallo-thankyou-status-mark { width: 2.7rem; height: 2.7rem; } body.wovallo-order-received-page .wovallo-thankyou-status-mark svg { width: 1.55rem; height: 1.55rem; } body.wovallo-order-received-page .wovallo-thankyou-kicker { margin-bottom: 0.25rem; font-size: 0.68rem; } body.wovallo-order-received-page .wovallo-thankyou-copy h2 { font-size: 1.35rem; line-height: 1.12; } body.wovallo-order-received-page .wovallo-thankyou-copy p { margin-top: 0.4rem; font-size: 0.92rem; line-height: 1.5; } body.wovallo-order-received-page .wovallo-thankyou-actions, body.wovallo-order-received-page .wovallo-thankyou-actions .wovallo-checkout-button { width: 100%; } body.wovallo-order-received-page .woocommerce-verify-email .form-row:last-child { justify-content: stretch; } body.wovallo-order-received-page .woocommerce-verify-email .woocommerce-button.button { width: 100%; } body.wovallo-order-received-page .wovallo-thankyou-next { grid-template-columns: 1fr; gap: 0.6rem; } body.wovallo-order-received-page .wovallo-thankyou-next-card { position: relative; display: block; min-height: 4.4rem; padding: 0.85rem 0.85rem 0.85rem 3.55rem; } body.wovallo-order-received-page .wovallo-thankyou-next-card span { position: absolute; top: 0.85rem; left: 0.85rem; width: 2rem; height: 2rem; } body.wovallo-order-received-page .wovallo-thankyou-next-card > br, body.wovallo-order-received-page .wovallo-thankyou-next-card > p:empty { display: none; } body.wovallo-order-received-page .wovallo-thankyou-next-card h3 { margin: 0 0 0.25rem; font-size: 0.98rem; } body.wovallo-order-received-page .wovallo-thankyou-next-card p { margin: 0; font-size: 0.88rem; line-height: 1.45; } body.wovallo-order-received-page .wovallo-thankyou-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; } body.wovallo-order-received-page .wovallo-thankyou-overview li { gap: 0.25rem; padding: 0.7rem !important; } body.wovallo-order-received-page .wovallo-thankyou-overview li span { font-size: 0.66rem; letter-spacing: 0.07em; } body.wovallo-order-received-page .wovallo-thankyou-overview li strong { font-size: 0.96rem; line-height: 1.25; } body.wovallo-order-received-page .wovallo-thankyou-overview .email, body.wovallo-order-received-page .wovallo-thankyou-overview .method { grid-column: 1 / -1; } body.wovallo-order-received-page .wovallo-order-details-card, body.wovallo-order-received-page .wovallo-order-customer-details { padding: 0.85rem; } body.wovallo-order-received-page .wovallo-order-address-grid { grid-template-columns: 1fr; } body.wovallo-order-received-page .wovallo-order-address-card { padding: 0.9rem; } body.wovallo-order-received-page .wovallo-order-details-header, body.wovallo-order-received-page .wovallo-order-product-row { grid-template-columns: 1fr; } body.wovallo-order-received-page .wovallo-order-details-header { align-items: stretch; flex-direction: column; } body.wovallo-order-received-page .wovallo-order-details-count { width: fit-content; } body.wovallo-order-received-page .wovallo-order-product-row { gap: 0.75rem; min-height: 0; padding: 0.85rem; } body.wovallo-order-received-page .wovallo-order-product-main { grid-template-columns: 4rem minmax(0, 1fr); gap: 0.75rem; } body.wovallo-order-received-page .wovallo-order-product-image { width: 4rem; height: 4rem; } body.wovallo-order-received-page .wovallo-order-product-total { text-align: left; } body.wovallo-order-received-page .wovallo-order-summary { padding: 0.85rem; } body.wovallo-checkout-page .woocommerce-checkout-payment .wc-stripe-upe-element::before, body.wovallo-checkout-page .woocommerce-checkout-payment #wcpay-upe-element::before, body.wovallo-checkout-page .woocommerce-checkout-payment .wcpay-upe-element::before { display: none !important; content: none !important; } body.wovallo-checkout-page .woocommerce-checkout-payment div.payment_box { border-radius: 0.85rem !important; } body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_stripe div.payment_box, body.wovallo-checkout-page .woocommerce-checkout-payment .payment_method_woocommerce_payments div.payment_box { padding: 0.55rem 0 0 !important; } body.wovallo-checkout-page .wovallo-checkout-main { padding: 1.4rem 0.75rem 7.35rem; } body.wovallo-checkout-page .wovallo-checkout-shell { width: calc(100vw - 1.5rem); } body.wovallo-checkout-page .wovallo-checkout-shell, body.wovallo-checkout-page .wovallo-checkout-content, body.wovallo-checkout-page .wovallo-checkout-native, body.wovallo-checkout-page .woocommerce, body.wovallo-checkout-page .woocommerce form.checkout, body.wovallo-checkout-page .wc-block-components-notice-banner { max-width: 100%; min-width: 0; box-sizing: border-box; } body.wovallo-checkout-page .wovallo-checkout-hero { margin-bottom: 1.15rem; } body.wovallo-checkout-page .wovallo-checkout-kicker, body.wovallo-checkout-page .wovallo-checkout-summary-kicker { margin-bottom: 0.45rem; } body.wovallo-checkout-page .wovallo-checkout-hero h1 { margin-bottom: 0.7rem; } body.wovallo-checkout-page .wovallo-checkout-lede { max-width: 100%; font-size: 1rem; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; } body.wovallo-checkout-page .wovallo-checkout-hero-note, body.wovallo-checkout-page .wovallo-checkout-topbar { gap: 0.45rem; } body.wovallo-checkout-page .wovallo-checkout-topbar span { width: 1rem; } body.wovallo-checkout-page .wovallo-checkout-native { width: 100%; border-radius: 0.95rem; padding: 0.65rem; } body.wovallo-checkout-page .woocommerce-form-coupon-toggle { margin-bottom: 0.75rem; } body.wovallo-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info, body.wovallo-checkout-page .woocommerce-form-coupon-toggle .wc-block-components-notice-banner { display: flex !important; min-height: 3.1rem !important; gap: 0.55rem !important; align-items: center !important; border-radius: 0.8rem !important; padding: 0.52rem 0.52rem 0.52rem 0.65rem !important; font-size: 0.9rem !important; line-height: 1.25 !important; } body.wovallo-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info::before, body.wovallo-checkout-page .woocommerce-form-coupon-toggle .wc-block-components-notice-banner > svg { width: 1.75rem !important; height: 1.75rem !important; min-width: 1.75rem !important; min-height: 1.75rem !important; align-self: center !important; } body.wovallo-checkout-page .woocommerce-form-coupon-toggle .wc-block-components-notice-banner__content { display: flex !important; width: 100%; min-width: 0; flex-direction: row; gap: 0.55rem; align-items: center; } body.wovallo-checkout-page .woocommerce-form-coupon-toggle .showcoupon, body.wovallo-checkout-page .woocommerce-form-coupon-toggle .wc-block-components-notice-banner__content .showcoupon { display: inline-flex !important; width: auto; max-width: 100%; min-height: 2.35rem; flex: 0 0 auto; justify-content: center; margin: 0 0 0 auto; padding: 0.58rem 0.78rem !important; background: #3a4750; color: #ffffff !important; font-size: 0.84rem; line-height: 1.15; text-align: center; white-space: nowrap; } body.wovallo-checkout-page .woocommerce-form-coupon-toggle .showcoupon:hover, body.wovallo-checkout-page .woocommerce-form-coupon-toggle .showcoupon:focus-visible { background: #ff9d7e; } body.wovallo-checkout-page .woocommerce form.checkout > .woocommerce-NoticeGroup, body.wovallo-checkout-page .woocommerce form.checkout > .woocommerce-NoticeGroup-checkout { width: 100%; margin-bottom: 1rem !important; } body.wovallo-checkout-page .woocommerce-error, body.wovallo-checkout-page .wc-block-components-notice-banner, body.wovallo-checkout-page .wc-block-components-notice-banner.is-error { border-radius: 0.85rem !important; padding: 0.9rem !important; } body.wovallo-checkout-page .wc-block-components-notice-banner { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.35rem 0.7rem !important; align-items: start !important; } body.wovallo-checkout-page .woocommerce-notices-wrapper, body.wovallo-checkout-page .woocommerce-NoticeGroup, body.wovallo-checkout-page .woocommerce-error, body.wovallo-checkout-page .woocommerce-message, body.wovallo-checkout-page .woocommerce-info { max-width: 100% !important; } body.wovallo-checkout-page .wc-block-components-notice-banner > svg { width: 1.75rem !important; height: 1.75rem !important; min-width: 1.75rem !important; min-height: 1.75rem !important; } body.wovallo-checkout-page .wc-block-components-notice-banner__content { display: flex; width: 100%; min-width: 0; flex-direction: column; gap: 0.45rem; align-items: flex-start; white-space: normal !important; overflow-wrap: anywhere; } body.wovallo-checkout-page .wc-block-components-notice-banner__content .button { display: flex !important; width: 100%; max-width: 100%; min-height: 2.55rem; align-items: center; justify-content: center; margin: 0; padding: 0.62rem 0.85rem; white-space: normal; overflow-wrap: anywhere; } body.wovallo-checkout-page .woocommerce-error { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.2rem 0.7rem !important; font-size: 0.96rem !important; } body.wovallo-checkout-page .woocommerce-error::before { width: 1.8rem !important; height: 1.8rem !important; } body.wovallo-checkout-page .checkout_coupon { grid-template-columns: 1fr; gap: 0.65rem; border-radius: 0.9rem; padding: 0.85rem !important; background: rgba(255, 255, 255, 0.86); box-shadow: 0 8px 22px rgba(58, 71, 80, 0.04); } body.wovallo-checkout-page .checkout_coupon .form-row-first, body.wovallo-checkout-page .checkout_coupon .form-row-last { grid-column: 1; } body.wovallo-checkout-page .wovallo-checkout-express-card { width: min(100%, 31rem); margin-right: auto; margin-left: auto; gap: 0.62rem; padding: 0.72rem; } body.wovallo-checkout-page .wovallo-checkout-express, body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-1, body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-2, body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-3, body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-4, body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-5, body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.44rem; row-gap: 0.44rem; justify-content: center; width: 100%; padding: 0; } body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-1 { grid-template-columns: minmax(0, min(100%, 17.5rem)); } body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--pending { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: calc((var(--wovallo-express-button-height) * 2) + 0.44rem); } body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-3 .wovallo-checkout-express-node--slot-3 { grid-column: 1 / -1 !important; justify-self: center; width: min(100%, 17.5rem) !important; } body.wovallo-checkout-page .wovallo-checkout-express [id^="wc-stripe-express-checkout-element-"] { box-sizing: border-box !important; overflow: visible !important; padding-left: 0 !important; transform: none; } body.wovallo-checkout-page .wovallo-checkout-express [id^="wc-stripe-express-checkout-element-"] iframe { width: 100% !important; max-width: 100% !important; } body.wovallo-checkout-page .wovallo-checkout-express #wcpay-woopay-button, body.wovallo-checkout-page .wovallo-checkout-express .woopay-express-button, body.wovallo-checkout-page .wovallo-checkout-express .ppc-button-wrapper:not(.wovallo-checkout-express-node--empty), body.wovallo-checkout-page .wovallo-checkout-express #ppc-button-ppcp-gateway:not(:empty) { grid-column: auto !important; } body.wovallo-checkout-page .wovallo-checkout-express .ppc-button-wrapper:not(.wovallo-checkout-express-node--empty), body.wovallo-checkout-page .wovallo-checkout-express #ppc-button-ppcp-gateway:not(:empty) { justify-self: center; overflow: visible !important; width: 100% !important; max-width: 100% !important; } body.wovallo-checkout-page .woocommerce .checkout_coupon .input-text, body.wovallo-checkout-page .woocommerce .checkout_coupon .button { min-height: 3.05rem; } body.wovallo-checkout-page .woocommerce-billing-fields, body.wovallo-checkout-page .woocommerce-shipping-fields, body.wovallo-checkout-page .woocommerce-additional-fields, body.wovallo-checkout-page #order_review, body.wovallo-checkout-page #order_review_heading { padding-right: 0.9rem; padding-left: 0.9rem; } body.wovallo-checkout-page .woocommerce-billing-fields__field-wrapper, body.wovallo-checkout-page .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; } body.wovallo-checkout-page .woocommerce-billing-fields__field-wrapper > .form-row, body.wovallo-checkout-page .woocommerce-shipping-fields__field-wrapper > .form-row { grid-column: 1 / -1 !important; } body.wovallo-checkout-page .wovallo-phone-input-shell { grid-template-columns: minmax(6.9rem, 7.8rem) minmax(0, 1fr); gap: 0.4rem; } body.wovallo-checkout-page .woocommerce select.wovallo-phone-country-code { padding-right: 0.55rem; padding-left: 0.6rem; font-size: 0.86rem; } body.wovallo-checkout-page .wovallo-billing-same-label { width: 100%; box-sizing: border-box; border-radius: 0.75rem; } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table th, body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table td { padding: 0.72rem 0; font-size: 0.86rem; } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table .wovallo-checkout-item { grid-template-columns: 3.6rem minmax(0, 1fr); gap: 0.62rem; } body.wovallo-checkout-page .woocommerce .woocommerce-checkout-review-order-table .wovallo-checkout-item-media { width: 3.6rem; border-radius: 0.65rem; } body.wovallo-checkout-page .wovallo-checkout-empty-actions, body.wovallo-checkout-page .wovallo-checkout-button, body.wovallo-checkout-page .woocommerce .button, body.wovallo-checkout-page .woocommerce button.button, body.wovallo-checkout-page .woocommerce input.button { width: 100%; } body.wovallo-checkout-page .wovallo-checkout-mobile-total { position: fixed; right: 0.75rem; bottom: max(0.75rem, env(safe-area-inset-bottom)); left: 0.75rem; z-index: 40; display: grid; max-width: calc(100vw - 1.5rem); box-sizing: border-box; grid-template-columns: minmax(0, 1fr) minmax(7.75rem, auto); gap: 0.55rem; align-items: center; border: 1px solid rgba(162, 192, 206, 0.28); border-radius: 1rem; padding: 0.7rem 0.75rem; background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 42px rgba(58, 71, 80, 0.16); backdrop-filter: blur(14px); } body.wovallo-checkout-page .wovallo-checkout-mobile-total .wovallo-checkout-button { width: auto; max-width: 100%; min-width: 0; min-height: 2.65rem; padding: 0.65rem 0.75rem; font-size: 0.88rem; white-space: normal; } } @media (prefers-reduced-motion: reduce) { body.wovallo-checkout-page .wovallo-checkout-button, body.wovallo-checkout-page .wovallo-checkout-topbar a, body.wovallo-checkout-page .woocommerce a, body.wovallo-checkout-page .woocommerce input, body.wovallo-checkout-page .woocommerce select, body.wovallo-checkout-page .woocommerce textarea, body.wovallo-checkout-page .woocommerce .button, body.wovallo-checkout-page .woocommerce button.button, body.wovallo-checkout-page .woocommerce input.button, body.wovallo-checkout-page #place_order, body.wovallo-checkout-page .select2-container--default .select2-selection--single { transition: none !important; } body.wovallo-checkout-page .wovallo-checkout-button:hover, body.wovallo-checkout-page .woocommerce .button:hover, body.wovallo-checkout-page .woocommerce button.button:hover, body.wovallo-checkout-page .woocommerce input.button:hover, body.wovallo-checkout-page #place_order:hover { transform: none; } } @media (max-width: 640px) { body.wovallo-checkout-page .woocommerce-checkout-payment .wc-stripe-upe-element, body.wovallo-checkout-page .woocommerce-checkout-payment #wcpay-upe-element, body.wovallo-checkout-page .woocommerce-checkout-payment .wcpay-upe-element { width: 100%; max-width: 100%; min-height: 18.5rem; margin-right: auto; margin-left: auto; padding-right: 0.75rem; padding-left: 0.75rem; } body.wovallo-checkout-page .woocommerce-checkout-payment .wc-stripe-upe-element iframe, body.wovallo-checkout-page .woocommerce-checkout-payment #wcpay-upe-element iframe, body.wovallo-checkout-page .woocommerce-checkout-payment .wcpay-upe-element iframe { min-height: 17rem; } } @media (max-width: 480px) { body.wovallo-checkout-page .wovallo-checkout-express-card { padding: 0.72rem; } body.wovallo-checkout-page .wovallo-checkout-express, body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-1, body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-2, body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-3, body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-4, body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-5, body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.45rem; row-gap: 0.45rem; padding: 0; } body.wovallo-checkout-page .wovallo-checkout-express.wovallo-checkout-express--count-1 { grid-template-columns: minmax(0, min(100%, 17rem)); } } /* ========================================================================== Variable product quick-add modal (assets/js/variant-modal.js) Brand-styled variation picker launched from product cards across the catalog, collections, and "You May Also Like". ========================================================================== */ body.wovallo-variant-open { overflow: hidden; } .wovallo-variant-modal { position: fixed; inset: 0; z-index: 99995; display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; visibility: hidden; transition: opacity 0.26s ease, visibility 0.26s ease; } .wovallo-variant-modal.is-visible { opacity: 1; visibility: visible; } .wovallo-variant-modal[hidden] { display: none; } .wovallo-variant-backdrop { position: absolute; inset: 0; background: rgba(58, 71, 80, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .wovallo-variant-dialog { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 27rem; max-height: calc(100vh - 3rem); padding: 1.5rem; background: #faf9f6; border: 1px solid rgba(162, 192, 206, 0.25); border-radius: 1.6rem; box-shadow: 0 30px 80px rgba(58, 71, 80, 0.28); overflow: hidden; opacity: 0; transform: translateY(16px) scale(0.98); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; outline: none; } .wovallo-variant-modal.is-visible .wovallo-variant-dialog { opacity: 1; transform: none; } .wovallo-variant-close { position: absolute; top: 0.9rem; right: 0.9rem; display: flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border: none; border-radius: 9999px; background: rgba(162, 192, 206, 0.16); color: #3a4750; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .wovallo-variant-close:hover { background: #ff9d7e; color: #ffffff; } .wovallo-variant-close svg { width: 1.1rem; height: 1.1rem; } .wovallo-variant-header { display: flex; gap: 1rem; align-items: center; padding-right: 2.2rem; } .wovallo-variant-thumb { flex: 0 0 auto; width: 4.5rem; height: 4.5rem; border-radius: 1rem; background: #ffffff center / cover no-repeat; border: 1px solid rgba(162, 192, 206, 0.25); } .wovallo-variant-heading { min-width: 0; } .wovallo-variant-name { margin: 0 0 0.25rem; font-size: 1.15rem; font-weight: 600; line-height: 1.25; color: #3a4750; } .wovallo-variant-price { font-size: 1rem; color: #3a4750; } .wovallo-variant-price del { margin-right: 0.35rem; color: rgba(58, 71, 80, 0.4); font-weight: 500; } .wovallo-variant-price ins { color: #ff9d7e; text-decoration: none; font-weight: 700; } .wovallo-variant-body { margin-top: 1.25rem; overflow-y: auto; } .wovallo-variant-option + .wovallo-variant-option { margin-top: 1.1rem; } .wovallo-variant-option-label { display: block; margin-bottom: 0.55rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(58, 71, 80, 0.78); } .wovallo-variant-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; } .wovallo-variant-pill { padding: 0.5rem 0.95rem; border: 1px solid rgba(162, 192, 206, 0.55); border-radius: 9999px; background: #ffffff; color: #3a4750; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; } .wovallo-variant-pill:hover { border-color: #ff9d7e; color: #ff9d7e; } .wovallo-variant-pill.is-selected { background: #a2c0ce; border-color: #a2c0ce; color: #ffffff; } .wovallo-variant-pill.is-selected:hover { background: #ff9d7e; border-color: #ff9d7e; color: #ffffff; } .wovallo-variant-pill.is-unavailable { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; } .wovallo-variant-pill.is-unavailable:hover { border-color: rgba(162, 192, 206, 0.55); color: #3a4750; } .wovallo-variant-footer { margin-top: 1.5rem; } .wovallo-variant-note { margin: 0 0 0.6rem; font-size: 0.8rem; color: #ff9d7e; } .wovallo-variant-note:empty { display: none; } .wovallo-variant-modal .added_to_cart, .wovallo-variant-modal .wc-forward { display: none !important; } .wovallo-variant-add { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 3rem; border: 1px solid #a2c0ce; border-radius: 9999px; background: #a2c0ce; color: #ffffff; font-size: 0.95rem; font-weight: 800; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; } .wovallo-variant-add svg { width: 1.15rem; height: 1.15rem; } .wovallo-variant-add:hover:not(:disabled) { background: #ff9d7e; border-color: #ff9d7e; box-shadow: 0 10px 24px rgba(255, 157, 126, 0.28); } .wovallo-variant-add:disabled { opacity: 0.55; cursor: not-allowed; } .wovallo-variant-add[data-state="success"] { background: #6fa78f; border-color: #6fa78f; opacity: 1; } .wovallo-variant-loading { display: flex; gap: 0.4rem; justify-content: center; padding: 2.5rem 0; } .wovallo-variant-loading span { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #a2c0ce; animation: wovallo-variant-bounce 1s infinite ease-in-out; } .wovallo-variant-loading span:nth-child(2) { animation-delay: 0.15s; } .wovallo-variant-loading span:nth-child(3) { animation-delay: 0.3s; } @keyframes wovallo-variant-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } .wovallo-variant-message { padding: 2rem 0; text-align: center; font-size: 0.9rem; color: rgba(58, 71, 80, 0.7); } @media (max-width: 560px) { .wovallo-variant-modal { padding: 0; align-items: flex-end; } .wovallo-variant-dialog { max-width: none; max-height: 88vh; border-radius: 1.5rem 1.5rem 0 0; transform: translateY(100%); } .wovallo-variant-modal.is-visible .wovallo-variant-dialog { transform: none; } } @media (prefers-reduced-motion: reduce) { .wovallo-variant-modal, .wovallo-variant-dialog { transition: opacity 0.15s ease; } .wovallo-variant-dialog { transform: none; } .wovallo-variant-loading span { animation: none; } } /* ========================================================================== Collections grid product card image — strip-proof by construction. ROOT CAUSE (reproduced deterministically + confirmed against the live DOM): the media box carries ~16px of scrollable overflow (scrollHeight 16px taller than clientHeight). With `overflow:hidden` that makes it a SCROLL CONTAINER. When the variant modal closes, closeModal() restores focus to the add-to-cart button that lives at the bottom of this box; the browser scrolls the box to bring the focused button into view, pushing the image up ~15px and exposing a ~17px white strip at the bottom (matches the measured GAP=17, topOverflow=15). A hover/scroll later reset it — hence "hover fixes it". It only ever happened on variable products because only they open the modal (→ focus restore), and never reproduced headless because headless doesn't auto-scroll on focus. Fix: `overflow: clip` clips identically (respects border-radius, clips the hover zoom) but creates NO scroll container, so the box can never be scrolled by focus, anchors, or anything. Verified: forcing scrollTop on a `clip` box stays 0 and the image fills (gap 1px); on a `hidden` box it scrolls 16px and the strip appears. The image still owns its box via its own aspect-ratio in normal flow (no percentage-height dependency). ========================================================================== */ body.wovallo-categories-page .wovallo-cat-card-media { position: relative; display: block; overflow: hidden; /* fallback for browsers without overflow:clip */ overflow: clip; /* not scrollable — focus restore can't push the image up */ } body.wovallo-categories-page .wovallo-cat-card-img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; /* matches the former Tailwind `aspect-square` */ object-fit: cover; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } @media (min-width: 640px) { body.wovallo-categories-page .wovallo-cat-card-img { aspect-ratio: 4 / 5; /* matches the former `sm:aspect-[4/5]` */ } } /* No-image fallback: with no in-flow image, give the box its own aspect-ratio and center the placeholder mark (formerly the container's flex utilities). */ body.wovallo-categories-page .wovallo-cat-card-media:not(:has(.wovallo-cat-card-img)) { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; } @media (min-width: 640px) { body.wovallo-categories-page .wovallo-cat-card-media:not(:has(.wovallo-cat-card-img)) { aspect-ratio: 4 / 5; } } /* Hover zoom, formerly Tailwind's group-hover:scale-105, now compiled. A transform never affects layout, so the box height stays put. */ body.wovallo-categories-page .group:hover .wovallo-cat-card-img { transform: scale(1.05); } /* ========================================================= Order tracking page ========================================================= */ body.wovallo-order-tracking-page .wovallo-order-tracking-main { min-height: 0; padding-top: 1.5rem; background: #faf9f6; color: #3a4750; } body.wovallo-order-tracking-page .wovallo-order-tracking-shell { width: min(100% - 2rem, 1100px); margin: 0 auto; } body.wovallo-order-tracking-page .wovallo-order-tracking-hero { padding: 1rem 0 0.75rem; } body.wovallo-order-tracking-page .wovallo-order-tracking-kicker { margin: 0 0 0.35rem; color: rgba(58, 71, 80, 0.78); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.wovallo-order-tracking-page .wovallo-order-tracking-hero h1 { max-width: 44rem; margin: 0; color: #3a4750; font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1.04; } body.wovallo-order-tracking-page .wovallo-order-tracking-lede { max-width: 43rem; margin: 0.55rem 0 0; color: rgba(58, 71, 80, 0.78); font-size: 1rem; line-height: 1.55; } body.wovallo-order-tracking-page .wovallo-order-tracking-content { padding: 0.75rem 0 3rem; } body.wovallo-order-tracking-page .wovallo-order-tracking-layout { display: grid; gap: 1.25rem; align-items: start; } @media (min-width: 880px) { body.wovallo-order-tracking-page .wovallo-order-tracking-layout { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1.5rem; } } /* Cards ------------------------------------------------- */ body.wovallo-order-tracking-page .wovallo-order-tracking-form-card, body.wovallo-order-tracking-page .wovallo-order-tracking-result-card, body.wovallo-order-tracking-page .wovallo-order-tracking-empty { border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 0.85rem; background: rgba(255, 255, 255, 0.9); box-shadow: 0 16px 42px rgba(58, 71, 80, 0.07); } body.wovallo-order-tracking-page .wovallo-order-tracking-form-card { padding: 1.35rem; position: sticky; /* Clears the sticky header, which pins below the admin bar. */ top: calc( var(--wovallo-admin-bar-height, 0px) + var(--wovallo-header-height, 65px) + 1.25rem ); } @media (max-width: 879px) { body.wovallo-order-tracking-page .wovallo-order-tracking-form-card { position: static; } } /* Form -------------------------------------------------- */ body.wovallo-order-tracking-page .wovallo-order-tracking-form { display: grid; gap: 0.9rem; } body.wovallo-order-tracking-page .wovallo-order-tracking-field { display: grid; gap: 0.4rem; } body.wovallo-order-tracking-page .wovallo-order-tracking-field label { font-size: 0.85rem; font-weight: 700; color: #3a4750; } body.wovallo-order-tracking-page .wovallo-order-tracking-field input { width: 100%; min-height: 3rem; border: 1px solid rgba(162, 192, 206, 0.36); border-radius: 0.75rem; background: #ffffff; color: #3a4750; font: inherit; font-size: 1rem; line-height: 1.45; padding: 0.72rem 0.9rem; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } body.wovallo-order-tracking-page .wovallo-order-tracking-field input::placeholder { color: rgba(58, 71, 80, 0.4); } body.wovallo-order-tracking-page .wovallo-order-tracking-field input:focus, body.wovallo-order-tracking-page .wovallo-order-tracking-field input:focus-visible { border-color: #ff9d7e; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14), 0 8px 18px rgba(162, 192, 206, 0.14); } body.wovallo-order-tracking-page .wovallo-order-tracking-field-error { margin: 0; border-left: 3px solid rgba(255, 157, 126, 0.82); padding-left: 0.55rem; color: #3a4750; font-size: 0.85rem; line-height: 1.4; } body.wovallo-order-tracking-page .wovallo-order-tracking-button { position: relative; display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid #ff9d7e; border-radius: 9999px; background: #ff9d7e; color: #3a4750; cursor: pointer; padding: 0.75rem 1.4rem; font: inherit; font-size: 0.95rem; font-weight: 800; line-height: 1.2; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } body.wovallo-order-tracking-page .wovallo-order-tracking-button:hover:not(:disabled) { box-shadow: 0 10px 24px rgba(255, 157, 126, 0.28); transform: translateY(-1px); } body.wovallo-order-tracking-page .wovallo-order-tracking-button:disabled { cursor: progress; opacity: 0.75; } body.wovallo-order-tracking-page .wovallo-order-tracking-button .wovallo-order-tracking-spinner { display: none; width: 1.05rem; height: 1.05rem; border: 2px solid rgba(58, 71, 80, 0.35); border-top-color: #3a4750; border-radius: 50%; animation: wovallo-order-tracking-spin 0.7s linear infinite; } body.wovallo-order-tracking-page .wovallo-order-tracking-button.is-loading .wovallo-order-tracking-spinner { display: inline-block; } @keyframes wovallo-order-tracking-spin { to { transform: rotate(360deg); } } body.wovallo-order-tracking-page .wovallo-order-tracking-form-note { margin: 0; color: rgba(58, 71, 80, 0.55); font-size: 0.8rem; line-height: 1.45; text-align: center; } /* Quick-track shortcuts --------------------------------- */ body.wovallo-order-tracking-page .wovallo-order-tracking-quick { margin-top: 1.35rem; padding-top: 1.2rem; border-top: 1px solid rgba(162, 192, 206, 0.24); } body.wovallo-order-tracking-page .wovallo-order-tracking-quick-title { margin: 0 0 0.7rem; color: rgba(58, 71, 80, 0.78); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; } body.wovallo-order-tracking-page .wovallo-order-tracking-quick-list { display: grid; gap: 0.5rem; } body.wovallo-order-tracking-page .wovallo-order-tracking-quick-card { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; border: 1px solid rgba(162, 192, 206, 0.3); border-radius: 0.7rem; background: #ffffff; cursor: pointer; padding: 0.7rem 0.85rem; font: inherit; text-align: left; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.wovallo-order-tracking-page .wovallo-order-tracking-quick-card:hover { border-color: #a2c0ce; box-shadow: 0 8px 20px rgba(58, 71, 80, 0.08); transform: translateY(-1px); } body.wovallo-order-tracking-page .wovallo-order-tracking-quick-number { font-weight: 800; font-size: 0.95rem; color: #3a4750; } body.wovallo-order-tracking-page .wovallo-order-tracking-quick-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; color: rgba(58, 71, 80, 0.78); font-size: 0.82rem; } body.wovallo-order-tracking-page .wovallo-order-tracking-quick-status { font-weight: 700; color: #3a4750; } /* Empty state ------------------------------------------- */ body.wovallo-order-tracking-page .wovallo-order-tracking-empty { display: grid; justify-items: center; gap: 0.6rem; padding: 2.75rem 1.75rem; text-align: center; } body.wovallo-order-tracking-page .wovallo-order-tracking-empty-mark { display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 9999px; background: rgba(162, 192, 206, 0.18); color: #a2c0ce; } body.wovallo-order-tracking-page .wovallo-order-tracking-empty-mark svg { width: 1.7rem; height: 1.7rem; } body.wovallo-order-tracking-page .wovallo-order-tracking-empty h2 { margin: 0; font-size: 1.25rem; font-weight: 800; color: #3a4750; } body.wovallo-order-tracking-page .wovallo-order-tracking-empty p { margin: 0; max-width: 28rem; color: rgba(58, 71, 80, 0.78); font-size: 0.95rem; line-height: 1.55; } body.wovallo-order-tracking-page .wovallo-order-tracking-empty-link { margin-top: 0.3rem; color: #3a4750; font-weight: 800; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 157, 126, 0.6); } body.wovallo-order-tracking-page .wovallo-order-tracking-empty-link:hover { color: #ff9d7e; } /* Result card ------------------------------------------- */ body.wovallo-order-tracking-page .wovallo-order-tracking-result-card { padding: 1.5rem; } body.wovallo-order-tracking-page .wovallo-order-tracking-result-head { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; justify-content: space-between; padding-bottom: 1.3rem; border-bottom: 1px solid rgba(162, 192, 206, 0.22); } body.wovallo-order-tracking-page .wovallo-order-tracking-result-kicker { margin: 0 0 0.25rem; color: rgba(58, 71, 80, 0.78); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } body.wovallo-order-tracking-page .wovallo-order-tracking-result-head h2 { margin: 0; font-size: 1.45rem; font-weight: 800; color: #3a4750; } body.wovallo-order-tracking-page .wovallo-order-tracking-result-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.35rem 0 0; color: rgba(58, 71, 80, 0.78); font-size: 0.88rem; } body.wovallo-order-tracking-page .wovallo-order-tracking-status-pill { display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.35rem 0.8rem; background: rgba(162, 192, 206, 0.2); color: #3a4750; font-size: 0.78rem; font-weight: 800; white-space: nowrap; } body.wovallo-order-tracking-page .wovallo-order-tracking-status-pill.is-processing, body.wovallo-order-tracking-page .wovallo-order-tracking-status-pill.is-on-hold { background: rgba(255, 157, 126, 0.2); } body.wovallo-order-tracking-page .wovallo-order-tracking-status-pill.is-completed { background: rgba(162, 192, 206, 0.32); } body.wovallo-order-tracking-page .wovallo-order-tracking-status-pill.is-cancelled, body.wovallo-order-tracking-page .wovallo-order-tracking-status-pill.is-failed, body.wovallo-order-tracking-page .wovallo-order-tracking-status-pill.is-refunded { background: rgba(58, 71, 80, 0.1); color: #3a4750; } /* Timeline ---------------------------------------------- */ body.wovallo-order-tracking-page .wovallo-order-tracking-timeline { list-style: none; display: grid; gap: 0; margin: 1.5rem 0; padding: 0; } body.wovallo-order-tracking-page .wovallo-order-tracking-step { position: relative; display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.85rem; padding-bottom: 1.4rem; } body.wovallo-order-tracking-page .wovallo-order-tracking-step:last-child { padding-bottom: 0; } /* Connecting line between dots */ body.wovallo-order-tracking-page .wovallo-order-tracking-step::before { content: ""; position: absolute; left: 0.7rem; top: 1.4rem; bottom: -0.1rem; width: 2px; background: rgba(162, 192, 206, 0.4); } body.wovallo-order-tracking-page .wovallo-order-tracking-step:last-child::before { display: none; } body.wovallo-order-tracking-page .wovallo-order-tracking-step.is-complete::before { background: #3a4750; } body.wovallo-order-tracking-page .wovallo-order-tracking-step-dot { position: relative; z-index: 1; width: 1.45rem; height: 1.45rem; border-radius: 9999px; border: 2px solid rgba(162, 192, 206, 0.6); background: #ffffff; transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } body.wovallo-order-tracking-page .wovallo-order-tracking-step.is-complete .wovallo-order-tracking-step-dot { border-color: #3a4750; background: #3a4750; } body.wovallo-order-tracking-page .wovallo-order-tracking-step.is-complete .wovallo-order-tracking-step-dot::after { content: ""; position: absolute; left: 50%; top: 46%; width: 0.32rem; height: 0.6rem; border: solid #ffffff; border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); } body.wovallo-order-tracking-page .wovallo-order-tracking-step.is-current .wovallo-order-tracking-step-dot { border-color: #ff9d7e; background: #ff9d7e; box-shadow: 0 0 0 5px rgba(255, 157, 126, 0.18); } body.wovallo-order-tracking-page .wovallo-order-tracking-step-body { display: grid; gap: 0.15rem; padding-top: 0.05rem; } body.wovallo-order-tracking-page .wovallo-order-tracking-step-label { font-weight: 800; font-size: 1rem; color: rgba(58, 71, 80, 0.5); } body.wovallo-order-tracking-page .wovallo-order-tracking-step.is-complete .wovallo-order-tracking-step-label, body.wovallo-order-tracking-page .wovallo-order-tracking-step.is-current .wovallo-order-tracking-step-label { color: #3a4750; } body.wovallo-order-tracking-page .wovallo-order-tracking-step-hint { font-size: 0.85rem; line-height: 1.45; color: rgba(58, 71, 80, 0.55); } body.wovallo-order-tracking-page .wovallo-order-tracking-step.is-upcoming .wovallo-order-tracking-step-hint { color: rgba(58, 71, 80, 0.4); } /* Special (cancelled / refunded / failed) --------------- */ body.wovallo-order-tracking-page .wovallo-order-tracking-special { display: grid; gap: 0.4rem; margin: 1.5rem 0; padding: 1.1rem 1.2rem; border-radius: 0.75rem; border: 1px solid rgba(255, 157, 126, 0.4); background: rgba(255, 157, 126, 0.08); } body.wovallo-order-tracking-page .wovallo-order-tracking-special-label { font-weight: 800; font-size: 1.05rem; color: #3a4750; } body.wovallo-order-tracking-page .wovallo-order-tracking-special p { margin: 0; color: rgba(58, 71, 80, 0.7); font-size: 0.9rem; line-height: 1.5; } /* Shipment ---------------------------------------------- */ body.wovallo-order-tracking-page .wovallo-order-tracking-shipment { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: baseline; margin-bottom: 1.4rem; padding: 0.85rem 1rem; border-radius: 0.7rem; background: rgba(162, 192, 206, 0.12); } body.wovallo-order-tracking-page .wovallo-order-tracking-shipment-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(58, 71, 80, 0.78); } body.wovallo-order-tracking-page .wovallo-order-tracking-shipment-value { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.92rem; color: #3a4750; } body.wovallo-order-tracking-page .wovallo-order-tracking-shipment-value a { color: #3a4750; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 157, 126, 0.6); } body.wovallo-order-tracking-page .wovallo-order-tracking-shipment-value a:hover { color: #ff9d7e; } /* Items ------------------------------------------------- */ body.wovallo-order-tracking-page .wovallo-order-tracking-items { list-style: none; display: grid; gap: 0.65rem; margin: 0 0 1.4rem; padding: 0; } body.wovallo-order-tracking-page .wovallo-order-tracking-item { display: flex; align-items: center; gap: 0.8rem; } body.wovallo-order-tracking-page .wovallo-order-tracking-item-media { flex: 0 0 auto; } body.wovallo-order-tracking-page .wovallo-order-tracking-item-media img, body.wovallo-order-tracking-page .wovallo-order-tracking-item-thumb { display: block; width: 3rem; height: 3rem; border-radius: 0.6rem; object-fit: cover; border: 1px solid rgba(162, 192, 206, 0.28); } body.wovallo-order-tracking-page .wovallo-order-tracking-item-info { display: grid; gap: 0.1rem; flex: 1 1 auto; min-width: 0; } body.wovallo-order-tracking-page .wovallo-order-tracking-item-name { font-weight: 700; font-size: 0.92rem; color: #3a4750; } body.wovallo-order-tracking-page .wovallo-order-tracking-item-qty { font-size: 0.82rem; color: rgba(58, 71, 80, 0.78); } body.wovallo-order-tracking-page .wovallo-order-tracking-item-total { flex: 0 0 auto; font-weight: 800; font-size: 0.92rem; color: #3a4750; } /* Footer ------------------------------------------------ */ body.wovallo-order-tracking-page .wovallo-order-tracking-result-foot { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; padding-top: 1.3rem; border-top: 1px solid rgba(162, 192, 206, 0.22); } body.wovallo-order-tracking-page .wovallo-order-tracking-total { display: flex; gap: 0.55rem; align-items: baseline; } body.wovallo-order-tracking-page .wovallo-order-tracking-total span { color: rgba(58, 71, 80, 0.78); font-size: 0.85rem; font-weight: 700; } body.wovallo-order-tracking-page .wovallo-order-tracking-total strong { font-size: 1.15rem; font-weight: 800; color: #3a4750; } body.wovallo-order-tracking-page .wovallo-order-tracking-view-link { color: #3a4750; font-weight: 800; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 157, 126, 0.6); } body.wovallo-order-tracking-page .wovallo-order-tracking-view-link:hover { color: #ff9d7e; } @media (max-width: 560px) { body.wovallo-order-tracking-page .wovallo-order-tracking-form-card, body.wovallo-order-tracking-page .wovallo-order-tracking-result-card { padding: 1.15rem; } body.wovallo-order-tracking-page .wovallo-order-tracking-result-head h2 { font-size: 1.25rem; } } /* ========================================================= FAQ page / Help center ========================================================= */ body.wovallo-faq-page .wovallo-faq-main { --faq-text: #3a4750; --faq-orange: #ff9d7e; --faq-blue: #a2c0ce; --faq-bg: #faf9f6; min-height: 0; padding-bottom: 4.5rem; background: var(--faq-bg); color: var(--faq-text); } body.wovallo-faq-page .wovallo-faq-shell { width: min(100% - 2.5rem, 1080px); margin: 0 auto; } /* Hero ----------------------------------------------------- */ body.wovallo-faq-page .wovallo-faq-hero { position: relative; overflow: hidden; padding: 3rem 0 2.75rem; text-align: center; background: radial-gradient(120% 140% at 50% -20%, rgba(255, 157, 126, 0.16) 0%, rgba(255, 157, 126, 0) 55%), radial-gradient(90% 120% at 85% 0%, rgba(162, 192, 206, 0.18) 0%, rgba(162, 192, 206, 0) 50%); } body.wovallo-faq-page .wovallo-faq-hero-copy { position: relative; max-width: 38rem; margin: 0 auto; } body.wovallo-faq-page .wovallo-faq-kicker { display: inline-block; margin: 0 0 0.85rem; padding: 0.34rem 0.85rem; border-radius: 999px; background: rgba(255, 157, 126, 0.14); color: var(--faq-orange); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } body.wovallo-faq-page .wovallo-faq-hero h1 { margin: 0; color: var(--faq-text); font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; } body.wovallo-faq-page .wovallo-faq-lede { max-width: 34rem; margin: 0.85rem auto 0; color: rgba(58, 71, 80, 0.78); font-size: 1.02rem; line-height: 1.55; } /* Search --------------------------------------------------- */ body.wovallo-faq-page .wovallo-faq-search { position: relative; max-width: 27rem; margin: 1.85rem auto 0; } body.wovallo-faq-page .wovallo-faq-search-icon { position: absolute; top: 50%; left: 1.1rem; transform: translateY(-50%); color: rgba(58, 71, 80, 0.45); pointer-events: none; } body.wovallo-faq-page .wovallo-faq-search-input { width: 100%; margin: 0; padding: 0.95rem 1.2rem 0.95rem 3rem; border: 1px solid rgba(162, 192, 206, 0.5); border-radius: 999px; background: #fff; color: var(--faq-text); font-size: 1rem; line-height: 1.2; box-shadow: 0 8px 24px -16px rgba(58, 71, 80, 0.35); transition: border-color 0.2s ease, box-shadow 0.2s ease; -webkit-appearance: none; appearance: none; } body.wovallo-faq-page .wovallo-faq-search-input::placeholder { color: rgba(58, 71, 80, 0.42); } body.wovallo-faq-page .wovallo-faq-search-input:focus { outline: none; border-color: var(--faq-orange); box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.22); } /* Layout (nav + sections) ---------------------------------- */ body.wovallo-faq-page .wovallo-faq-content { padding-top: 2.5rem; } body.wovallo-faq-page .wovallo-faq-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2.75rem; align-items: start; } /* Sticky category nav -------------------------------------- */ body.wovallo-faq-page .wovallo-faq-nav { position: sticky; top: calc(var(--wovallo-admin-bar-height, 0px) + 6rem); } body.wovallo-faq-page .wovallo-faq-nav-label { margin: 0 0 0.85rem; padding-left: 0.9rem; color: rgba(58, 71, 80, 0.5); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.wovallo-faq-page .wovallo-faq-nav-list { display: flex; flex-direction: column; gap: 0.2rem; } body.wovallo-faq-page .wovallo-faq-nav-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.9rem; border-radius: 0.7rem; color: rgba(58, 71, 80, 0.74); font-size: 0.94rem; font-weight: 600; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } body.wovallo-faq-page .wovallo-faq-nav-icon { display: inline-flex; color: var(--faq-blue); transition: color 0.2s ease; } body.wovallo-faq-page .wovallo-faq-nav-link:hover { background: rgba(162, 192, 206, 0.16); color: var(--faq-text); } body.wovallo-faq-page .wovallo-faq-nav-link.is-active { background: rgba(255, 157, 126, 0.14); color: var(--faq-orange); } body.wovallo-faq-page .wovallo-faq-nav-link.is-active .wovallo-faq-nav-icon { color: var(--faq-orange); } /* Suppress the default outline on mouse click; show a branded ring only for keyboard focus so the clicked chip doesn't keep a stray black border. */ body.wovallo-faq-page .wovallo-faq-nav-link:focus { outline: none; } body.wovallo-faq-page .wovallo-faq-nav-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--faq-bg), 0 0 0 4px rgba(162, 192, 206, 0.65); } /* Sections ------------------------------------------------- */ body.wovallo-faq-page .wovallo-faq-sections { display: grid; gap: 2.5rem; } body.wovallo-faq-page .wovallo-faq-section { scroll-margin-top: calc(var(--wovallo-admin-bar-height, 0px) + 6rem); } body.wovallo-faq-page .wovallo-faq-section[hidden] { display: none; } body.wovallo-faq-page .wovallo-faq-section-head { display: flex; align-items: center; gap: 0.65rem; margin: 0 0 1rem; } body.wovallo-faq-page .wovallo-faq-section-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 0.65rem; background: rgba(255, 157, 126, 0.14); color: var(--faq-orange); } body.wovallo-faq-page .wovallo-faq-section-title { margin: 0; color: var(--faq-text); font-size: 1.18rem; font-weight: 800; letter-spacing: -0.01em; } body.wovallo-faq-page .wovallo-faq-list { display: grid; gap: 0.75rem; } /* Cards ---------------------------------------------------- */ body.wovallo-faq-page .wovallo-faq-card { border: 1px solid rgba(162, 192, 206, 0.28); border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(58, 71, 80, 0.03); transition: border-color 0.25s ease, box-shadow 0.25s ease; } body.wovallo-faq-page .wovallo-faq-card[hidden] { display: none; } @media (hover: hover) { body.wovallo-faq-page .wovallo-faq-card:hover { border-color: rgba(162, 192, 206, 0.55); box-shadow: 0 14px 30px -22px rgba(58, 71, 80, 0.45); } } body.wovallo-faq-page .wovallo-faq-card.is-open { border-color: rgba(255, 157, 126, 0.55); box-shadow: 0 16px 34px -24px rgba(255, 157, 126, 0.6); } body.wovallo-faq-page .wovallo-accordion-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin: 0; padding: 1.25rem 1.4rem; border: none; background: transparent; color: var(--faq-text); text-align: left; cursor: pointer; } body.wovallo-faq-page .wovallo-faq-q { font-size: 1.02rem; font-weight: 600; line-height: 1.4; transition: color 0.2s ease; } body.wovallo-faq-page .wovallo-faq-card.is-open .wovallo-faq-q { color: var(--faq-orange); } @media (hover: hover) { body.wovallo-faq-page .wovallo-faq-card:hover .wovallo-faq-q { color: var(--faq-orange); } } body.wovallo-faq-page .wovallo-accordion-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: 999px; background: rgba(162, 192, 206, 0.18); color: var(--faq-text); transition: transform 0.3s ease, background 0.25s ease, color 0.25s ease; } body.wovallo-faq-page .wovallo-faq-card.is-open .wovallo-accordion-icon { transform: rotate(135deg); background: var(--faq-orange); color: #fff; } body.wovallo-faq-page .wovallo-accordion-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-in-out; overflow: hidden; } body.wovallo-faq-page .wovallo-accordion-content.is-open { grid-template-rows: 1fr; } body.wovallo-faq-page .wovallo-accordion-inner { min-height: 0; padding: 0 1.4rem; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } body.wovallo-faq-page .wovallo-accordion-content.is-open .wovallo-accordion-inner { opacity: 1; visibility: visible; transition: opacity 0.4s ease 0.1s, visibility 0.4s ease 0.1s; } body.wovallo-faq-page .wovallo-faq-answer { margin: 0; padding-bottom: 1.3rem; max-width: 62ch; color: rgba(58, 71, 80, 0.74); font-size: 0.97rem; line-height: 1.65; } body.wovallo-faq-page .wovallo-accordion-toggle:focus, body.wovallo-faq-page .wovallo-accordion-toggle:active { outline: none; } body.wovallo-faq-page .wovallo-accordion-toggle:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(255, 157, 126, 0.55); border-radius: 1rem; } /* Empty state (search) ------------------------------------- */ body.wovallo-faq-page .wovallo-faq-empty { margin: 0; padding: 2.5rem 1rem; text-align: center; color: rgba(58, 71, 80, 0.78); font-size: 1rem; } /* Contact CTA ---------------------------------------------- */ body.wovallo-faq-page .wovallo-faq-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 1rem; padding: 1.9rem 2.1rem; border-radius: 1.25rem; background: linear-gradient(135deg, rgba(162, 192, 206, 0.2), rgba(255, 157, 126, 0.14)); border: 1px solid rgba(162, 192, 206, 0.3); } body.wovallo-faq-page .wovallo-faq-contact-text h2 { margin: 0; color: var(--faq-text); font-size: 1.22rem; font-weight: 800; } body.wovallo-faq-page .wovallo-faq-contact-text p { margin: 0.3rem 0 0; color: rgba(58, 71, 80, 0.78); font-size: 0.96rem; line-height: 1.5; } body.wovallo-faq-page .wovallo-faq-contact-btn { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; padding: 0.8rem 1.5rem; border-radius: 999px; background: var(--faq-text); color: #fff; font-size: 0.96rem; font-weight: 600; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } body.wovallo-faq-page .wovallo-faq-contact-btn svg { transition: transform 0.2s ease; } body.wovallo-faq-page .wovallo-faq-contact-btn:hover { background: var(--faq-orange); box-shadow: 0 12px 26px -16px rgba(255, 157, 126, 0.9); } body.wovallo-faq-page .wovallo-faq-contact-btn:hover svg { transform: translateX(3px); } /* Tablet --------------------------------------------------- */ @media (max-width: 880px) { body.wovallo-faq-page .wovallo-faq-layout { grid-template-columns: 1fr; gap: 1.5rem; } body.wovallo-faq-page .wovallo-faq-nav { position: static; top: auto; } body.wovallo-faq-page .wovallo-faq-nav-label { display: none; } body.wovallo-faq-page .wovallo-faq-nav-list { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } body.wovallo-faq-page .wovallo-faq-nav-link { padding: 0.5rem 0.9rem; border: 1px solid rgba(162, 192, 206, 0.35); background: #fff; font-size: 0.88rem; } } /* Mobile --------------------------------------------------- */ @media (max-width: 560px) { body.wovallo-faq-page .wovallo-faq-hero { padding: 2.25rem 0 2rem; } body.wovallo-faq-page .wovallo-faq-content { padding-top: 1.75rem; } body.wovallo-faq-page .wovallo-faq-sections { gap: 2rem; } body.wovallo-faq-page .wovallo-accordion-toggle { padding: 1.1rem 1.15rem; } body.wovallo-faq-page .wovallo-faq-q { font-size: 0.98rem; } body.wovallo-faq-page .wovallo-accordion-inner { padding: 0 1.15rem; } body.wovallo-faq-page .wovallo-faq-answer { font-size: 0.93rem; } body.wovallo-faq-page .wovallo-faq-contact { padding: 1.5rem 1.4rem; } body.wovallo-faq-page .wovallo-faq-contact-btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { body.wovallo-faq-page .wovallo-accordion-icon, body.wovallo-faq-page .wovallo-accordion-content, body.wovallo-faq-page .wovallo-faq-card { transition: none; } } /* ========================================================================= Shipping Policy page ========================================================================= */ body.wovallo-shipping-page .wovallo-shipping-main { --sp-text: #3a4750; --sp-orange: #ff9d7e; --sp-blue: #a2c0ce; --sp-bg: #faf9f6; min-height: 0; padding-bottom: 4.5rem; background: var(--sp-bg); color: var(--sp-text); } body.wovallo-shipping-page .wovallo-shipping-shell { width: min(100% - 2.5rem, 1080px); margin: 0 auto; } /* Hero ----------------------------------------------------- */ body.wovallo-shipping-page .wovallo-shipping-hero { position: relative; overflow: hidden; padding: 3rem 0 2.5rem; text-align: center; background: radial-gradient(120% 140% at 50% -20%, rgba(255, 157, 126, 0.16) 0%, rgba(255, 157, 126, 0) 55%), radial-gradient(90% 120% at 85% 0%, rgba(162, 192, 206, 0.18) 0%, rgba(162, 192, 206, 0) 50%); } body.wovallo-shipping-page .wovallo-shipping-hero-copy { position: relative; max-width: 38rem; margin: 0 auto; } body.wovallo-shipping-page .wovallo-shipping-kicker { display: inline-block; margin: 0 0 0.85rem; padding: 0.34rem 0.85rem; border-radius: 999px; background: rgba(255, 157, 126, 0.14); color: var(--sp-orange); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } body.wovallo-shipping-page .wovallo-shipping-hero h1 { margin: 0; color: var(--sp-text); font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; } body.wovallo-shipping-page .wovallo-shipping-lede { max-width: 34rem; margin: 0.85rem auto 0; color: rgba(58, 71, 80, 0.78); font-size: 1.02rem; line-height: 1.55; } /* Delivery timeline ---------------------------------------- */ body.wovallo-shipping-page .wovallo-shipping-timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 44rem; margin: 2.5rem auto 0; padding: 0; list-style: none; counter-reset: none; } /* Connecting line running behind the three nodes. */ body.wovallo-shipping-page .wovallo-shipping-timeline::before { content: ""; position: absolute; top: 1.6rem; left: 16.66%; right: 16.66%; height: 2px; background: linear-gradient(90deg, rgba(162, 192, 206, 0.5), rgba(255, 157, 126, 0.55)); } body.wovallo-shipping-page .wovallo-shipping-stage { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } body.wovallo-shipping-page .wovallo-shipping-stage-node { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 999px; background: #fff; border: 1px solid rgba(162, 192, 206, 0.45); color: var(--sp-orange); box-shadow: 0 10px 24px -18px rgba(58, 71, 80, 0.5); } body.wovallo-shipping-page .wovallo-shipping-stage-step { margin-top: 0.7rem; color: rgba(58, 71, 80, 0.5); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.wovallo-shipping-page .wovallo-shipping-stage-label { margin-top: 0.15rem; color: var(--sp-text); font-size: 1.02rem; font-weight: 800; } body.wovallo-shipping-page .wovallo-shipping-stage-duration { margin-top: 0.2rem; color: var(--sp-orange); font-size: 0.86rem; font-weight: 700; } body.wovallo-shipping-page .wovallo-shipping-stage-note { margin-top: 0.25rem; max-width: 12rem; color: rgba(58, 71, 80, 0.78); font-size: 0.82rem; line-height: 1.4; } /* Layout (nav + sections) ---------------------------------- */ body.wovallo-shipping-page .wovallo-shipping-content { padding-top: 2.75rem; } body.wovallo-shipping-page .wovallo-shipping-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2.75rem; align-items: start; } /* Sticky section nav --------------------------------------- */ body.wovallo-shipping-page .wovallo-shipping-nav { position: sticky; top: calc(var(--wovallo-admin-bar-height, 0px) + 6rem); } body.wovallo-shipping-page .wovallo-shipping-nav-label { margin: 0 0 0.85rem; padding-left: 0.9rem; color: rgba(58, 71, 80, 0.5); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.wovallo-shipping-page .wovallo-shipping-nav-list { display: flex; flex-direction: column; gap: 0.2rem; } body.wovallo-shipping-page .wovallo-shipping-nav-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.9rem; border-radius: 0.7rem; color: rgba(58, 71, 80, 0.74); font-size: 0.94rem; font-weight: 600; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } body.wovallo-shipping-page .wovallo-shipping-nav-icon { display: inline-flex; color: var(--sp-blue); transition: color 0.2s ease; } @media (hover: hover) { body.wovallo-shipping-page .wovallo-shipping-nav-link:hover { background: rgba(162, 192, 206, 0.16); color: var(--sp-text); } } body.wovallo-shipping-page .wovallo-shipping-nav-link.is-active { background: rgba(255, 157, 126, 0.14); color: var(--sp-orange); } body.wovallo-shipping-page .wovallo-shipping-nav-link.is-active .wovallo-shipping-nav-icon { color: var(--sp-orange); } body.wovallo-shipping-page .wovallo-shipping-nav-link:focus { outline: none; } body.wovallo-shipping-page .wovallo-shipping-nav-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--sp-bg), 0 0 0 4px rgba(162, 192, 206, 0.65); } /* Content cards -------------------------------------------- */ body.wovallo-shipping-page .wovallo-shipping-sections { display: grid; gap: 1.1rem; } body.wovallo-shipping-page .wovallo-shipping-card { scroll-margin-top: calc(var(--wovallo-admin-bar-height, 0px) + 6rem); padding: 1.6rem 1.7rem; border: 1px solid rgba(162, 192, 206, 0.28); border-radius: 1.15rem; background: #fff; box-shadow: 0 1px 2px rgba(58, 71, 80, 0.03); transition: border-color 0.25s ease, box-shadow 0.25s ease; } @media (hover: hover) { body.wovallo-shipping-page .wovallo-shipping-card:hover { border-color: rgba(162, 192, 206, 0.55); box-shadow: 0 14px 30px -22px rgba(58, 71, 80, 0.45); } } body.wovallo-shipping-page .wovallo-shipping-card-head { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.9rem; } body.wovallo-shipping-page .wovallo-shipping-card-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: 0.65rem; background: rgba(162, 192, 206, 0.18); color: var(--sp-blue); } body.wovallo-shipping-page .wovallo-shipping-card-title { margin: 0; color: var(--sp-text); font-size: 1.16rem; font-weight: 800; letter-spacing: -0.01em; } body.wovallo-shipping-page .wovallo-shipping-card-body p { margin: 0 0 0.7rem; max-width: 62ch; color: rgba(58, 71, 80, 0.74); font-size: 0.98rem; line-height: 1.65; } body.wovallo-shipping-page .wovallo-shipping-card-body p:last-child { margin-bottom: 0; } /* Delay causes list ---------------------------------------- */ body.wovallo-shipping-page .wovallo-shipping-causes { margin: 0.35rem 0 0.9rem; padding: 0; list-style: none; display: grid; gap: 0.55rem; } body.wovallo-shipping-page .wovallo-shipping-causes li { display: flex; align-items: center; gap: 0.65rem; color: var(--sp-text); font-size: 0.97rem; font-weight: 500; } body.wovallo-shipping-page .wovallo-shipping-cause-dot { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: rgba(255, 157, 126, 0.16); color: var(--sp-orange); } /* Address accuracy — highlighted note ---------------------- */ body.wovallo-shipping-page .wovallo-shipping-card--note { border-color: rgba(255, 157, 126, 0.4); background: linear-gradient(135deg, rgba(255, 157, 126, 0.08), rgba(255, 157, 126, 0.03)); border-left: 3px solid var(--sp-orange); } body.wovallo-shipping-page .wovallo-shipping-card--note .wovallo-shipping-card-icon { background: rgba(255, 157, 126, 0.16); color: var(--sp-orange); } /* Contact CTA ---------------------------------------------- */ body.wovallo-shipping-page .wovallo-shipping-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 0.9rem; padding: 1.9rem 2.1rem; border-radius: 1.25rem; background: linear-gradient(135deg, rgba(162, 192, 206, 0.2), rgba(255, 157, 126, 0.14)); border: 1px solid rgba(162, 192, 206, 0.3); } body.wovallo-shipping-page .wovallo-shipping-contact-text h2 { margin: 0; color: var(--sp-text); font-size: 1.22rem; font-weight: 800; } body.wovallo-shipping-page .wovallo-shipping-contact-text p { margin: 0.3rem 0 0; color: rgba(58, 71, 80, 0.78); font-size: 0.96rem; line-height: 1.5; } body.wovallo-shipping-page .wovallo-shipping-contact-btn { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; padding: 0.8rem 1.5rem; border-radius: 999px; background: var(--sp-text); color: #fff; font-size: 0.96rem; font-weight: 600; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } body.wovallo-shipping-page .wovallo-shipping-contact-btn svg { transition: transform 0.2s ease; } @media (hover: hover) { body.wovallo-shipping-page .wovallo-shipping-contact-btn:hover { background: var(--sp-orange); box-shadow: 0 12px 26px -16px rgba(255, 157, 126, 0.9); } body.wovallo-shipping-page .wovallo-shipping-contact-btn:hover svg { transform: translateX(3px); } } /* Tablet --------------------------------------------------- */ @media (max-width: 880px) { body.wovallo-shipping-page .wovallo-shipping-layout { grid-template-columns: 1fr; gap: 1.5rem; } body.wovallo-shipping-page .wovallo-shipping-nav { position: static; top: auto; } body.wovallo-shipping-page .wovallo-shipping-nav-label { display: none; } body.wovallo-shipping-page .wovallo-shipping-nav-list { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } body.wovallo-shipping-page .wovallo-shipping-nav-link { padding: 0.5rem 0.9rem; border: 1px solid rgba(162, 192, 206, 0.35); background: #fff; font-size: 0.88rem; } } /* Mobile — stack the timeline vertically ------------------- */ @media (max-width: 620px) { body.wovallo-shipping-page .wovallo-shipping-timeline { grid-template-columns: 1fr; gap: 0; max-width: 20rem; } body.wovallo-shipping-page .wovallo-shipping-timeline::before { top: 1.6rem; bottom: 1.6rem; left: 1.6rem; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, rgba(162, 192, 206, 0.5), rgba(255, 157, 126, 0.55)); } body.wovallo-shipping-page .wovallo-shipping-stage { display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 0.95rem; align-items: start; text-align: left; padding-bottom: 1.6rem; } body.wovallo-shipping-page .wovallo-shipping-stage:last-child { padding-bottom: 0; } body.wovallo-shipping-page .wovallo-shipping-stage-node { grid-column: 1; grid-row: 1 / span 4; align-self: start; } body.wovallo-shipping-page .wovallo-shipping-stage-step, body.wovallo-shipping-page .wovallo-shipping-stage-label, body.wovallo-shipping-page .wovallo-shipping-stage-duration, body.wovallo-shipping-page .wovallo-shipping-stage-note { grid-column: 2; margin-top: 0; max-width: none; } body.wovallo-shipping-page .wovallo-shipping-stage-step { margin-top: 0.35rem; } } @media (max-width: 560px) { body.wovallo-shipping-page .wovallo-shipping-hero { padding: 2.25rem 0 2rem; } body.wovallo-shipping-page .wovallo-shipping-content { padding-top: 1.75rem; } body.wovallo-shipping-page .wovallo-shipping-card { padding: 1.35rem 1.3rem; } body.wovallo-shipping-page .wovallo-shipping-contact { padding: 1.5rem 1.4rem; } body.wovallo-shipping-page .wovallo-shipping-contact-btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { body.wovallo-shipping-page .wovallo-shipping-card, body.wovallo-shipping-page .wovallo-shipping-contact-btn { transition: none; } } /* ========================================================================= Return & Refund Policy page ========================================================================= */ body.wovallo-returns-page .wovallo-returns-main { --rp-text: #3a4750; --rp-orange: #ff9d7e; --rp-blue: #a2c0ce; --rp-bg: #faf9f6; min-height: 0; padding-bottom: 4.5rem; background: var(--rp-bg); color: var(--rp-text); } body.wovallo-returns-page .wovallo-returns-shell { width: min(100% - 2.5rem, 1080px); margin: 0 auto; } /* Hero ----------------------------------------------------- */ body.wovallo-returns-page .wovallo-returns-hero { position: relative; overflow: hidden; padding: 3rem 0 2.5rem; text-align: center; background: radial-gradient(120% 140% at 50% -20%, rgba(255, 157, 126, 0.16) 0%, rgba(255, 157, 126, 0) 55%), radial-gradient(90% 120% at 85% 0%, rgba(162, 192, 206, 0.18) 0%, rgba(162, 192, 206, 0) 50%); } body.wovallo-returns-page .wovallo-returns-hero-copy { position: relative; max-width: 38rem; margin: 0 auto; } body.wovallo-returns-page .wovallo-returns-kicker { display: inline-block; margin: 0 0 0.85rem; padding: 0.34rem 0.85rem; border-radius: 999px; background: rgba(255, 157, 126, 0.14); color: var(--rp-orange); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } body.wovallo-returns-page .wovallo-returns-hero h1 { margin: 0; color: var(--rp-text); font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; } body.wovallo-returns-page .wovallo-returns-lede { max-width: 34rem; margin: 0.85rem auto 0; color: rgba(58, 71, 80, 0.78); font-size: 1.02rem; line-height: 1.55; } /* Return journey timeline ---------------------------------- */ body.wovallo-returns-page .wovallo-returns-timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 44rem; margin: 2.5rem auto 0; padding: 0; list-style: none; counter-reset: none; } /* Connecting line running behind the three nodes. */ body.wovallo-returns-page .wovallo-returns-timeline::before { content: ""; position: absolute; top: 1.6rem; left: 16.66%; right: 16.66%; height: 2px; background: linear-gradient(90deg, rgba(162, 192, 206, 0.5), rgba(255, 157, 126, 0.55)); } body.wovallo-returns-page .wovallo-returns-stage { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } body.wovallo-returns-page .wovallo-returns-stage-node { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 999px; background: #fff; border: 1px solid rgba(162, 192, 206, 0.45); color: var(--rp-orange); box-shadow: 0 10px 24px -18px rgba(58, 71, 80, 0.5); } body.wovallo-returns-page .wovallo-returns-stage-step { margin-top: 0.7rem; color: rgba(58, 71, 80, 0.5); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.wovallo-returns-page .wovallo-returns-stage-label { margin-top: 0.15rem; color: var(--rp-text); font-size: 1.02rem; font-weight: 800; } body.wovallo-returns-page .wovallo-returns-stage-duration { margin-top: 0.2rem; color: var(--rp-orange); font-size: 0.86rem; font-weight: 700; } body.wovallo-returns-page .wovallo-returns-stage-note { margin-top: 0.25rem; max-width: 12rem; color: rgba(58, 71, 80, 0.78); font-size: 0.82rem; line-height: 1.4; } /* Layout (nav + sections) ---------------------------------- */ body.wovallo-returns-page .wovallo-returns-content { padding-top: 2.75rem; } body.wovallo-returns-page .wovallo-returns-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2.75rem; align-items: start; } /* Sticky section nav --------------------------------------- */ body.wovallo-returns-page .wovallo-returns-nav { position: sticky; top: calc(var(--wovallo-admin-bar-height, 0px) + 6rem); } body.wovallo-returns-page .wovallo-returns-nav-label { margin: 0 0 0.85rem; padding-left: 0.9rem; color: rgba(58, 71, 80, 0.5); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.wovallo-returns-page .wovallo-returns-nav-list { display: flex; flex-direction: column; gap: 0.2rem; } body.wovallo-returns-page .wovallo-returns-nav-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.9rem; border-radius: 0.7rem; color: rgba(58, 71, 80, 0.74); font-size: 0.94rem; font-weight: 600; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } body.wovallo-returns-page .wovallo-returns-nav-icon { display: inline-flex; color: var(--rp-blue); transition: color 0.2s ease; } @media (hover: hover) { body.wovallo-returns-page .wovallo-returns-nav-link:hover { background: rgba(162, 192, 206, 0.16); color: var(--rp-text); } } body.wovallo-returns-page .wovallo-returns-nav-link.is-active { background: rgba(255, 157, 126, 0.14); color: var(--rp-orange); } body.wovallo-returns-page .wovallo-returns-nav-link.is-active .wovallo-returns-nav-icon { color: var(--rp-orange); } body.wovallo-returns-page .wovallo-returns-nav-link:focus { outline: none; } body.wovallo-returns-page .wovallo-returns-nav-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--rp-bg), 0 0 0 4px rgba(162, 192, 206, 0.65); } /* Content cards -------------------------------------------- */ body.wovallo-returns-page .wovallo-returns-sections { display: grid; gap: 1.1rem; } body.wovallo-returns-page .wovallo-returns-card { scroll-margin-top: calc(var(--wovallo-admin-bar-height, 0px) + 6rem); padding: 1.6rem 1.7rem; border: 1px solid rgba(162, 192, 206, 0.28); border-radius: 1.15rem; background: #fff; box-shadow: 0 1px 2px rgba(58, 71, 80, 0.03); transition: border-color 0.25s ease, box-shadow 0.25s ease; } @media (hover: hover) { body.wovallo-returns-page .wovallo-returns-card:hover { border-color: rgba(162, 192, 206, 0.55); box-shadow: 0 14px 30px -22px rgba(58, 71, 80, 0.45); } } body.wovallo-returns-page .wovallo-returns-card-head { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.9rem; } body.wovallo-returns-page .wovallo-returns-card-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: 0.65rem; background: rgba(162, 192, 206, 0.18); color: var(--rp-blue); } body.wovallo-returns-page .wovallo-returns-card-title { margin: 0; color: var(--rp-text); font-size: 1.16rem; font-weight: 800; letter-spacing: -0.01em; } body.wovallo-returns-page .wovallo-returns-card-body p { margin: 0 0 0.7rem; max-width: 62ch; color: rgba(58, 71, 80, 0.74); font-size: 0.98rem; line-height: 1.65; } body.wovallo-returns-page .wovallo-returns-card-body p:last-child { margin-bottom: 0; } /* Check-list ----------------------------------------------- */ body.wovallo-returns-page .wovallo-returns-checks { margin: 0.35rem 0 0.9rem; padding: 0; list-style: none; display: grid; gap: 0.55rem; } body.wovallo-returns-page .wovallo-returns-checks li { display: flex; align-items: flex-start; gap: 0.65rem; color: var(--rp-text); font-size: 0.97rem; font-weight: 500; line-height: 1.5; } body.wovallo-returns-page .wovallo-returns-check-dot { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; margin-top: 0.05rem; border-radius: 999px; background: rgba(255, 157, 126, 0.16); color: var(--rp-orange); } /* Damaged / incorrect — highlighted note ------------------- */ body.wovallo-returns-page .wovallo-returns-card--note { border-color: rgba(255, 157, 126, 0.4); background: linear-gradient(135deg, rgba(255, 157, 126, 0.08), rgba(255, 157, 126, 0.03)); border-left: 3px solid var(--rp-orange); } body.wovallo-returns-page .wovallo-returns-card--note .wovallo-returns-card-icon { background: rgba(255, 157, 126, 0.16); color: var(--rp-orange); } /* Contact CTA ---------------------------------------------- */ body.wovallo-returns-page .wovallo-returns-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 0.9rem; padding: 1.9rem 2.1rem; border-radius: 1.25rem; background: linear-gradient(135deg, rgba(162, 192, 206, 0.2), rgba(255, 157, 126, 0.14)); border: 1px solid rgba(162, 192, 206, 0.3); } body.wovallo-returns-page .wovallo-returns-contact-text h2 { margin: 0; color: var(--rp-text); font-size: 1.22rem; font-weight: 800; } body.wovallo-returns-page .wovallo-returns-contact-text p { margin: 0.3rem 0 0; color: rgba(58, 71, 80, 0.78); font-size: 0.96rem; line-height: 1.5; } body.wovallo-returns-page .wovallo-returns-contact-btn { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; padding: 0.8rem 1.5rem; border-radius: 999px; background: var(--rp-text); color: #fff; font-size: 0.96rem; font-weight: 600; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } body.wovallo-returns-page .wovallo-returns-contact-btn svg { transition: transform 0.2s ease; } @media (hover: hover) { body.wovallo-returns-page .wovallo-returns-contact-btn:hover { background: var(--rp-orange); box-shadow: 0 12px 26px -16px rgba(255, 157, 126, 0.9); } body.wovallo-returns-page .wovallo-returns-contact-btn:hover svg { transform: translateX(3px); } } /* Tablet --------------------------------------------------- */ @media (max-width: 880px) { body.wovallo-returns-page .wovallo-returns-layout { grid-template-columns: 1fr; gap: 1.5rem; } body.wovallo-returns-page .wovallo-returns-nav { position: static; top: auto; } body.wovallo-returns-page .wovallo-returns-nav-label { display: none; } body.wovallo-returns-page .wovallo-returns-nav-list { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } body.wovallo-returns-page .wovallo-returns-nav-link { padding: 0.5rem 0.9rem; border: 1px solid rgba(162, 192, 206, 0.35); background: #fff; font-size: 0.88rem; } } /* Mobile — stack the timeline vertically ------------------- */ @media (max-width: 620px) { body.wovallo-returns-page .wovallo-returns-timeline { grid-template-columns: 1fr; gap: 0; max-width: 20rem; } body.wovallo-returns-page .wovallo-returns-timeline::before { top: 1.6rem; bottom: 1.6rem; left: 1.6rem; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, rgba(162, 192, 206, 0.5), rgba(255, 157, 126, 0.55)); } body.wovallo-returns-page .wovallo-returns-stage { display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 0.95rem; align-items: start; text-align: left; padding-bottom: 1.6rem; } body.wovallo-returns-page .wovallo-returns-stage:last-child { padding-bottom: 0; } body.wovallo-returns-page .wovallo-returns-stage-node { grid-column: 1; grid-row: 1 / span 4; align-self: start; } body.wovallo-returns-page .wovallo-returns-stage-step, body.wovallo-returns-page .wovallo-returns-stage-label, body.wovallo-returns-page .wovallo-returns-stage-duration, body.wovallo-returns-page .wovallo-returns-stage-note { grid-column: 2; margin-top: 0; max-width: none; } body.wovallo-returns-page .wovallo-returns-stage-step { margin-top: 0.35rem; } } @media (max-width: 560px) { body.wovallo-returns-page .wovallo-returns-hero { padding: 2.25rem 0 2rem; } body.wovallo-returns-page .wovallo-returns-content { padding-top: 1.75rem; } body.wovallo-returns-page .wovallo-returns-card { padding: 1.35rem 1.3rem; } body.wovallo-returns-page .wovallo-returns-contact { padding: 1.5rem 1.4rem; } body.wovallo-returns-page .wovallo-returns-contact-btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { body.wovallo-returns-page .wovallo-returns-card, body.wovallo-returns-page .wovallo-returns-contact-btn { transition: none; } } /* ========================================================================== Contact page ========================================================================== */ body.wovallo-contact-page .wovallo-contact-main { --cp-text: #3a4750; --cp-orange: #ff9d7e; --cp-blue: #a2c0ce; --cp-bg: #faf9f6; min-height: 0; padding-bottom: 4.5rem; background: var(--cp-bg); color: var(--cp-text); } body.wovallo-contact-page .wovallo-contact-shell { width: min(100% - 2.5rem, 1080px); margin: 0 auto; } /* Hero ----------------------------------------------------- */ body.wovallo-contact-page .wovallo-contact-hero { position: relative; overflow: hidden; padding: 3.25rem 0 2.5rem; text-align: center; background: radial-gradient(120% 140% at 50% -20%, rgba(255, 157, 126, 0.16) 0%, rgba(255, 157, 126, 0) 55%), radial-gradient(90% 120% at 85% 0%, rgba(162, 192, 206, 0.18) 0%, rgba(162, 192, 206, 0) 50%); } body.wovallo-contact-page .wovallo-contact-hero-copy { position: relative; max-width: 40rem; margin: 0 auto; } body.wovallo-contact-page .wovallo-contact-kicker { display: inline-block; margin: 0 0 0.85rem; padding: 0.34rem 0.85rem; border-radius: 999px; background: rgba(255, 157, 126, 0.14); color: var(--cp-orange); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } body.wovallo-contact-page .wovallo-contact-hero h1 { margin: 0; color: var(--cp-text); font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; } body.wovallo-contact-page .wovallo-contact-lede { max-width: 36rem; margin: 0.85rem auto 0; color: rgba(58, 71, 80, 0.78); font-size: 1.02rem; line-height: 1.55; } /* Body layout ---------------------------------------------- */ body.wovallo-contact-page .wovallo-contact-body { padding-top: 2.5rem; } /* Email channel cards -------------------------------------- */ body.wovallo-contact-page .wovallo-contact-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem; } body.wovallo-contact-page .wovallo-contact-card { display: flex; flex-direction: column; padding: 1.7rem 1.7rem 1.5rem; border: 1px solid rgba(162, 192, 206, 0.28); border-radius: 1.15rem; background: #fff; box-shadow: 0 1px 2px rgba(58, 71, 80, 0.03); transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } @media (hover: hover) { body.wovallo-contact-page .wovallo-contact-card:hover { border-color: rgba(162, 192, 206, 0.55); box-shadow: 0 16px 34px -24px rgba(58, 71, 80, 0.5); transform: translateY(-2px); } } body.wovallo-contact-page .wovallo-contact-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; background: rgba(162, 192, 206, 0.18); color: var(--cp-blue); } body.wovallo-contact-page .wovallo-contact-card-label { margin: 1rem 0 0; color: var(--cp-text); font-size: 1.16rem; font-weight: 800; letter-spacing: -0.01em; } body.wovallo-contact-page .wovallo-contact-card-desc { margin: 0.4rem 0 0; color: rgba(58, 71, 80, 0.7); font-size: 0.95rem; line-height: 1.55; } body.wovallo-contact-page .wovallo-contact-address-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 1.35rem; } body.wovallo-contact-page .wovallo-contact-address { font-size: 1.02rem; font-weight: 700; color: var(--cp-text); word-break: break-all; } body.wovallo-contact-page .wovallo-contact-copy { display: inline-flex; align-items: center; gap: 0.45rem; flex-shrink: 0; padding: 0.6rem 1.1rem; border: 0; border-radius: 999px; background: var(--cp-orange); color: var(--cp-text); font-size: 0.9rem; font-weight: 800; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } @media (hover: hover) { body.wovallo-contact-page .wovallo-contact-copy:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -16px rgba(255, 157, 126, 0.9); } } body.wovallo-contact-page .wovallo-contact-copy:focus-visible { outline: 2px solid var(--cp-orange); outline-offset: 2px; } body.wovallo-contact-page .wovallo-contact-copy:focus:not(:focus-visible) { outline: none; } body.wovallo-contact-page .wovallo-contact-copy-check { display: none; } /* Copied confirmation state. */ body.wovallo-contact-page .wovallo-contact-copy.is-copied { background: rgba(162, 192, 206, 0.28); } body.wovallo-contact-page .wovallo-contact-copy.is-copied .wovallo-contact-copy-icon { display: none; } body.wovallo-contact-page .wovallo-contact-copy.is-copied .wovallo-contact-copy-check { display: inline-block; } /* Social channels ------------------------------------------ */ body.wovallo-contact-page .wovallo-contact-social { margin-top: 1.35rem; padding: 1.9rem 2rem; border: 1px solid rgba(162, 192, 206, 0.28); border-radius: 1.25rem; background: linear-gradient(135deg, rgba(162, 192, 206, 0.16), rgba(255, 157, 126, 0.1)); } body.wovallo-contact-page .wovallo-contact-social-head h2 { margin: 0; color: var(--cp-text); font-size: 1.22rem; font-weight: 800; } body.wovallo-contact-page .wovallo-contact-social-head p { margin: 0.3rem 0 0; color: rgba(58, 71, 80, 0.78); font-size: 0.96rem; line-height: 1.5; } body.wovallo-contact-page .wovallo-contact-social-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin-top: 1.35rem; } /* A lone card would otherwise sit in a half-width column with dead space beside it. */ body.wovallo-contact-page .wovallo-contact-social-links:has(> :only-child) { grid-template-columns: minmax(0, 1fr); max-width: 24rem; } body.wovallo-contact-page .wovallo-contact-social-card { display: flex; align-items: center; gap: 0.9rem; padding: 0.95rem 1.1rem; border: 1px solid rgba(162, 192, 206, 0.3); border-radius: 0.95rem; background: rgba(255, 255, 255, 0.9); color: var(--cp-text); text-decoration: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } @media (hover: hover) { body.wovallo-contact-page .wovallo-contact-social-card:hover { border-color: rgba(162, 192, 206, 0.6); box-shadow: 0 14px 30px -22px rgba(58, 71, 80, 0.5); transform: translateY(-2px); } body.wovallo-contact-page .wovallo-contact-social-card:hover .wovallo-contact-social-arrow { transform: translate(2px, -2px); color: var(--cp-orange); } } body.wovallo-contact-page .wovallo-contact-social-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: 0.75rem; background: rgba(255, 157, 126, 0.16); color: var(--cp-orange); } body.wovallo-contact-page .wovallo-contact-social-meta { display: flex; flex-direction: column; min-width: 0; } body.wovallo-contact-page .wovallo-contact-social-label { font-size: 1rem; font-weight: 800; } body.wovallo-contact-page .wovallo-contact-social-handle { font-size: 0.86rem; color: rgba(58, 71, 80, 0.78); } body.wovallo-contact-page .wovallo-contact-social-arrow { margin-left: auto; flex-shrink: 0; color: rgba(58, 71, 80, 0.4); transition: transform 0.2s ease, color 0.2s ease; } body.wovallo-contact-page .wovallo-contact-social-card:focus-visible { outline: 2px solid var(--cp-orange); outline-offset: 2px; } body.wovallo-contact-page .wovallo-contact-social-card:focus:not(:focus-visible) { outline: none; } /* FAQ pointer ---------------------------------------------- */ body.wovallo-contact-page .wovallo-contact-faq { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 1.35rem; padding: 1.9rem 2.1rem; border-radius: 1.25rem; border: 1px solid rgba(162, 192, 206, 0.3); background: #fff; } body.wovallo-contact-page .wovallo-contact-faq-text h2 { margin: 0; color: var(--cp-text); font-size: 1.22rem; font-weight: 800; } body.wovallo-contact-page .wovallo-contact-faq-text p { margin: 0.3rem 0 0; color: rgba(58, 71, 80, 0.78); font-size: 0.96rem; line-height: 1.5; } body.wovallo-contact-page .wovallo-contact-faq-btn { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; padding: 0.8rem 1.5rem; border-radius: 999px; background: var(--cp-text); color: #fff; font-size: 0.96rem; font-weight: 600; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } body.wovallo-contact-page .wovallo-contact-faq-btn svg { transition: transform 0.2s ease; } body.wovallo-contact-page .wovallo-contact-faq-btn:focus-visible { outline: 2px solid var(--cp-orange); outline-offset: 2px; } body.wovallo-contact-page .wovallo-contact-faq-btn:focus:not(:focus-visible) { outline: none; } @media (hover: hover) { body.wovallo-contact-page .wovallo-contact-faq-btn:hover { background: var(--cp-orange); color: var(--cp-text); box-shadow: 0 12px 26px -16px rgba(255, 157, 126, 0.9); } body.wovallo-contact-page .wovallo-contact-faq-btn:hover svg { transform: translateX(3px); } } /* Tablet --------------------------------------------------- */ @media (max-width: 720px) { body.wovallo-contact-page .wovallo-contact-channels, body.wovallo-contact-page .wovallo-contact-social-links { grid-template-columns: 1fr; } } /* Mobile --------------------------------------------------- */ @media (max-width: 560px) { body.wovallo-contact-page .wovallo-contact-hero { padding: 2.25rem 0 2rem; } body.wovallo-contact-page .wovallo-contact-body { padding-top: 1.75rem; } body.wovallo-contact-page .wovallo-contact-card { padding: 1.4rem 1.35rem 1.3rem; } body.wovallo-contact-page .wovallo-contact-social { padding: 1.5rem 1.4rem; } body.wovallo-contact-page .wovallo-contact-faq { padding: 1.5rem 1.4rem; } body.wovallo-contact-page .wovallo-contact-faq-btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { body.wovallo-contact-page .wovallo-contact-card, body.wovallo-contact-page .wovallo-contact-social-card, body.wovallo-contact-page .wovallo-contact-copy, body.wovallo-contact-page .wovallo-contact-faq-btn { transition: none; } } /* ========================================================================== Terms of Service page ========================================================================== */ body.wovallo-terms-page .wovallo-terms-main { --tp-text: #3a4750; --tp-orange: #ff9d7e; --tp-blue: #a2c0ce; --tp-bg: #faf9f6; min-height: 0; padding-bottom: 4.5rem; background: var(--tp-bg); color: var(--tp-text); } body.wovallo-terms-page .wovallo-terms-shell { width: min(100% - 2.5rem, 1080px); margin: 0 auto; } /* Hero ----------------------------------------------------- */ body.wovallo-terms-page .wovallo-terms-hero { position: relative; overflow: hidden; padding: 3rem 0 2.5rem; text-align: center; background: radial-gradient(120% 140% at 50% -20%, rgba(255, 157, 126, 0.16) 0%, rgba(255, 157, 126, 0) 55%), radial-gradient(90% 120% at 85% 0%, rgba(162, 192, 206, 0.18) 0%, rgba(162, 192, 206, 0) 50%); } body.wovallo-terms-page .wovallo-terms-hero-copy { position: relative; max-width: 40rem; margin: 0 auto; } body.wovallo-terms-page .wovallo-terms-kicker { display: inline-block; margin: 0 0 0.85rem; padding: 0.34rem 0.85rem; border-radius: 999px; background: rgba(255, 157, 126, 0.14); color: var(--tp-orange); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } body.wovallo-terms-page .wovallo-terms-hero h1 { margin: 0; color: var(--tp-text); font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; } body.wovallo-terms-page .wovallo-terms-lede { max-width: 38rem; margin: 0.85rem auto 0; color: rgba(58, 71, 80, 0.78); font-size: 1.02rem; line-height: 1.55; } /* Layout (nav + sections) ---------------------------------- */ body.wovallo-terms-page .wovallo-terms-content { padding-top: 2.75rem; } body.wovallo-terms-page .wovallo-terms-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2.75rem; align-items: start; } /* Sticky section nav --------------------------------------- */ body.wovallo-terms-page .wovallo-terms-nav { position: sticky; top: calc(var(--wovallo-admin-bar-height, 0px) + 6rem); } body.wovallo-terms-page .wovallo-terms-nav-label { margin: 0 0 0.85rem; padding-left: 0.9rem; color: rgba(58, 71, 80, 0.5); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.wovallo-terms-page .wovallo-terms-nav-list { display: flex; flex-direction: column; gap: 0.2rem; } body.wovallo-terms-page .wovallo-terms-nav-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.9rem; border-radius: 0.7rem; color: rgba(58, 71, 80, 0.74); font-size: 0.94rem; font-weight: 600; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } body.wovallo-terms-page .wovallo-terms-nav-icon { display: inline-flex; color: var(--tp-blue); transition: color 0.2s ease; } @media (hover: hover) { body.wovallo-terms-page .wovallo-terms-nav-link:hover { background: rgba(162, 192, 206, 0.16); color: var(--tp-text); } } body.wovallo-terms-page .wovallo-terms-nav-link.is-active { background: rgba(255, 157, 126, 0.14); color: var(--tp-orange); } body.wovallo-terms-page .wovallo-terms-nav-link.is-active .wovallo-terms-nav-icon { color: var(--tp-orange); } body.wovallo-terms-page .wovallo-terms-nav-link:focus { outline: none; } body.wovallo-terms-page .wovallo-terms-nav-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tp-bg), 0 0 0 4px rgba(162, 192, 206, 0.65); } /* Content cards -------------------------------------------- */ body.wovallo-terms-page .wovallo-terms-sections { display: grid; gap: 1.1rem; } body.wovallo-terms-page .wovallo-terms-card { scroll-margin-top: calc(var(--wovallo-admin-bar-height, 0px) + 6rem); padding: 1.6rem 1.7rem; border: 1px solid rgba(162, 192, 206, 0.28); border-radius: 1.15rem; background: #fff; box-shadow: 0 1px 2px rgba(58, 71, 80, 0.03); transition: border-color 0.25s ease, box-shadow 0.25s ease; } @media (hover: hover) { body.wovallo-terms-page .wovallo-terms-card:hover { border-color: rgba(162, 192, 206, 0.55); box-shadow: 0 14px 30px -22px rgba(58, 71, 80, 0.45); } } body.wovallo-terms-page .wovallo-terms-card-head { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.9rem; } body.wovallo-terms-page .wovallo-terms-card-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: 0.65rem; background: rgba(162, 192, 206, 0.18); color: var(--tp-blue); } body.wovallo-terms-page .wovallo-terms-card-title { margin: 0; color: var(--tp-text); font-size: 1.16rem; font-weight: 800; letter-spacing: -0.01em; } body.wovallo-terms-page .wovallo-terms-card-body p { margin: 0 0 0.7rem; max-width: 64ch; color: rgba(58, 71, 80, 0.74); font-size: 0.98rem; line-height: 1.65; } body.wovallo-terms-page .wovallo-terms-card-body p:last-child { margin-bottom: 0; } /* Inline links inside body copy ---------------------------- */ body.wovallo-terms-page .wovallo-terms-card-body a { color: var(--tp-orange); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 157, 126, 0.5); transition: color 0.2s ease, border-color 0.2s ease; } @media (hover: hover) { body.wovallo-terms-page .wovallo-terms-card-body a:hover { color: var(--tp-text); border-color: var(--tp-text); } } body.wovallo-terms-page .wovallo-terms-card-body a:focus-visible { outline: none; border-radius: 3px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(162, 192, 206, 0.65); } /* Check-list ----------------------------------------------- */ body.wovallo-terms-page .wovallo-terms-checks { margin: 0.35rem 0 0.9rem; padding: 0; list-style: none; display: grid; gap: 0.55rem; } body.wovallo-terms-page .wovallo-terms-checks li { display: flex; align-items: flex-start; gap: 0.65rem; color: var(--tp-text); font-size: 0.97rem; font-weight: 500; line-height: 1.5; } body.wovallo-terms-page .wovallo-terms-check-dot { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; margin-top: 0.05rem; border-radius: 999px; background: rgba(255, 157, 126, 0.16); color: var(--tp-orange); } /* Highlighted note callout --------------------------------- */ body.wovallo-terms-page .wovallo-terms-card--note { border-color: rgba(255, 157, 126, 0.4); background: linear-gradient(135deg, rgba(255, 157, 126, 0.08), rgba(255, 157, 126, 0.03)); border-left: 3px solid var(--tp-orange); } body.wovallo-terms-page .wovallo-terms-card--note .wovallo-terms-card-icon { background: rgba(255, 157, 126, 0.16); color: var(--tp-orange); } /* Contact CTA ---------------------------------------------- */ body.wovallo-terms-page .wovallo-terms-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 0.9rem; padding: 1.9rem 2.1rem; border-radius: 1.25rem; background: linear-gradient(135deg, rgba(162, 192, 206, 0.2), rgba(255, 157, 126, 0.14)); border: 1px solid rgba(162, 192, 206, 0.3); } body.wovallo-terms-page .wovallo-terms-contact-text h2 { margin: 0; color: var(--tp-text); font-size: 1.22rem; font-weight: 800; } body.wovallo-terms-page .wovallo-terms-contact-text p { margin: 0.3rem 0 0; color: rgba(58, 71, 80, 0.78); font-size: 0.96rem; line-height: 1.5; } body.wovallo-terms-page .wovallo-terms-contact-btn { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; padding: 0.8rem 1.5rem; border-radius: 999px; background: var(--tp-text); color: #fff; font-size: 0.96rem; font-weight: 600; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } body.wovallo-terms-page .wovallo-terms-contact-btn svg { transition: transform 0.2s ease; } @media (hover: hover) { body.wovallo-terms-page .wovallo-terms-contact-btn:hover { background: var(--tp-orange); box-shadow: 0 12px 26px -16px rgba(255, 157, 126, 0.9); } body.wovallo-terms-page .wovallo-terms-contact-btn:hover svg { transform: translateX(3px); } } /* Tablet --------------------------------------------------- */ @media (max-width: 880px) { body.wovallo-terms-page .wovallo-terms-layout { grid-template-columns: 1fr; gap: 1.5rem; } body.wovallo-terms-page .wovallo-terms-nav { position: static; top: auto; } body.wovallo-terms-page .wovallo-terms-nav-label { display: none; } body.wovallo-terms-page .wovallo-terms-nav-list { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } body.wovallo-terms-page .wovallo-terms-nav-link { padding: 0.5rem 0.9rem; border: 1px solid rgba(162, 192, 206, 0.35); background: #fff; font-size: 0.88rem; } } /* Mobile --------------------------------------------------- */ @media (max-width: 560px) { body.wovallo-terms-page .wovallo-terms-hero { padding: 2.25rem 0 2rem; } body.wovallo-terms-page .wovallo-terms-content { padding-top: 1.75rem; } body.wovallo-terms-page .wovallo-terms-card { padding: 1.35rem 1.3rem; } body.wovallo-terms-page .wovallo-terms-contact { padding: 1.5rem 1.4rem; } body.wovallo-terms-page .wovallo-terms-contact-btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { body.wovallo-terms-page .wovallo-terms-card, body.wovallo-terms-page .wovallo-terms-contact-btn { transition: none; } } /* ========================================================= Reviews page — customer photo-review wall ========================================================= */ body.wovallo-reviews-page .wovallo-reviews-page-main { min-height: 0; padding-bottom: 4.5rem; background: #faf9f6; color: #3a4750; } body.wovallo-reviews-page .wovallo-reviews-page-shell { width: min(100% - 2.5rem, 1180px); margin: 0 auto; } /* Hero ----------------------------------------------------- */ body.wovallo-reviews-page .wovallo-reviews-hero { position: relative; overflow: hidden; padding: 3.5rem 0 2.75rem; margin-bottom: 2.5rem; background: radial-gradient(120% 140% at 50% -20%, rgba(255, 157, 126, 0.16) 0%, rgba(255, 157, 126, 0) 55%), radial-gradient(90% 120% at 85% 0%, rgba(162, 192, 206, 0.18) 0%, rgba(162, 192, 206, 0) 50%); } body.wovallo-reviews-page .wovallo-reviews-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 0; width: 100%; /* Wide enough for the longest label to stay on one line. */ max-width: 34rem; margin: 2.25rem auto 0; } body.wovallo-reviews-page .wovallo-reviews-stat { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.35rem; padding: 0.25rem 0.75rem; min-width: 0; } body.wovallo-reviews-page .wovallo-reviews-stat + .wovallo-reviews-stat { border-left: 1px solid rgba(162, 192, 206, 0.3); } body.wovallo-reviews-page .wovallo-reviews-stat-num { font-size: 2rem; font-weight: 600; line-height: 1; color: #3a4750; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } body.wovallo-reviews-page .wovallo-reviews-stat-label { font-size: 0.75rem; color: rgba(58, 71, 80, 0.55); text-transform: uppercase; letter-spacing: 0.08em; text-align: center; text-wrap: balance; } /* Masonry wall --------------------------------------------- */ body.wovallo-reviews-page .wovallo-reviews-wall { column-count: 1; column-gap: 1.25rem; } @media (min-width: 640px) { body.wovallo-reviews-page .wovallo-reviews-wall { column-count: 2; } } @media (min-width: 1024px) { body.wovallo-reviews-page .wovallo-reviews-wall { column-count: 3; } } body.wovallo-reviews-page .wovallo-reviews-wall .wovallo-review-card { break-inside: avoid; margin-bottom: 1.25rem; transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease; } body.wovallo-reviews-page .wovallo-reviews-wall .wovallo-review-card:hover { box-shadow: 0 2px 4px rgba(58, 71, 80, 0.04), 0 20px 40px -24px rgba(58, 71, 80, 0.22); transform: translateY(-2px); border-color: rgba(162, 192, 206, 0.28); } body.wovallo-reviews-page .wovallo-review-body p { margin: 0 0 0.75em; } body.wovallo-reviews-page .wovallo-review-body p:last-child { margin-bottom: 0; } body.wovallo-reviews-page .wovallo-stars { letter-spacing: -0.5px; } /* Card header / author block (re-scoped from the single-product variant) */ body.wovallo-reviews-page .wovallo-review-card header > .flex { display: flex; align-items: flex-start; gap: 14px; min-width: 0; } body.wovallo-reviews-page .wovallo-review-card .wovallo-review-author-block { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding-top: 1px; } body.wovallo-reviews-page .wovallo-review-card .wovallo-review-author { font-weight: 600; color: #3a4750; font-size: 15px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.wovallo-reviews-page .wovallo-review-card .wovallo-review-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; color: rgba(58, 71, 80, 0.78); flex-wrap: wrap; } body.wovallo-reviews-page .wovallo-review-card .wovallo-review-date { display: inline-flex; align-items: center; white-space: nowrap; } /* Product-context chip */ body.wovallo-reviews-page .wovallo-review-product { display: inline-flex; align-items: center; gap: 0.375rem; margin: 0.25rem 0 0.85rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(162, 192, 206, 0.12); color: #5f7a87; font-size: 0.75rem; font-weight: 600; line-height: 1; max-width: 100%; transition: background-color 0.2s ease, color 0.2s ease; } body.wovallo-reviews-page .wovallo-review-product:hover { background: rgba(255, 157, 126, 0.16); color: #e88869; } body.wovallo-reviews-page .wovallo-review-product svg { width: 0.8125rem; height: 0.8125rem; flex-shrink: 0; } body.wovallo-reviews-page .wovallo-review-product span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Closing module: where the rest of the reviews live ------- */ body.wovallo-reviews-page .wovallo-reviews-more { margin-top: 4.5rem; padding: 2.75rem 2rem 3rem; border-radius: 1.75rem; background: #fff; border: 1px solid rgba(162, 192, 206, 0.18); box-shadow: 0 4px 24px -14px rgba(58, 71, 80, 0.12); } body.wovallo-reviews-page .wovallo-reviews-more-head { text-align: center; max-width: 34rem; margin: 0 auto 2.25rem; } body.wovallo-reviews-page .wovallo-reviews-more-title { font-size: 1.625rem; font-weight: 600; line-height: 1.25; color: #3a4750; margin: 0; } body.wovallo-reviews-page .wovallo-reviews-more-lede { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.65; color: rgba(58, 71, 80, 0.6); } body.wovallo-reviews-page .wovallo-reviews-more-list { display: grid; /* Capped max so a lone reviewed product doesn't stretch the full width. */ grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 22rem)); justify-content: center; gap: 0.75rem; list-style: none; margin: 0; padding: 0; } /* Grid items default to min-width:auto, so the nowrap product name would otherwise widen the track and push the card out of its panel. */ body.wovallo-reviews-page .wovallo-reviews-more-item { min-width: 0; } body.wovallo-reviews-page .wovallo-reviews-more-link { display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 1rem 0.75rem 0.75rem; border-radius: 1rem; border: 1px solid rgba(162, 192, 206, 0.2); background: #faf9f6; text-decoration: none; transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; } body.wovallo-reviews-page .wovallo-reviews-more-link:hover, body.wovallo-reviews-page .wovallo-reviews-more-link:focus-visible { background: #fff; border-color: rgba(255, 157, 126, 0.45); transform: translateY(-2px); } body.wovallo-reviews-page .wovallo-reviews-more-thumb { flex: 0 0 3.25rem; width: 3.25rem; height: 3.25rem; border-radius: 0.75rem; overflow: hidden; background: rgba(162, 192, 206, 0.14); } body.wovallo-reviews-page .wovallo-reviews-more-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } body.wovallo-reviews-page .wovallo-reviews-more-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1 1 auto; } body.wovallo-reviews-page .wovallo-reviews-more-name { font-size: 0.9375rem; font-weight: 500; color: #3a4750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.wovallo-reviews-page .wovallo-reviews-more-meta { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } body.wovallo-reviews-page .wovallo-reviews-more-count { font-size: 0.8125rem; color: rgba(58, 71, 80, 0.55); white-space: nowrap; } body.wovallo-reviews-page .wovallo-reviews-more-arrow { color: rgba(58, 71, 80, 0.35); transition: color 0.3s ease, transform 0.3s ease; } body.wovallo-reviews-page .wovallo-reviews-more-link:hover .wovallo-reviews-more-arrow, body.wovallo-reviews-page .wovallo-reviews-more-link:focus-visible .wovallo-reviews-more-arrow { color: #ff9d7e; transform: translateX(3px); } body.wovallo-reviews-page .wovallo-reviews-more-cta { /* flex + fit-content so `margin: auto` centres it without a wrapper. */ display: flex; width: fit-content; align-items: center; gap: 0.5rem; margin: 2.25rem auto 0; padding: 0.75rem 1.75rem; border-radius: 999px; background: #3a4750; color: #fff; font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: background-color 0.3s ease, transform 0.3s ease; } body.wovallo-reviews-page .wovallo-reviews-more-cta:hover, body.wovallo-reviews-page .wovallo-reviews-more-cta:focus-visible { background: #ff9d7e; } body.wovallo-reviews-page .wovallo-reviews-more-cta span { transition: transform 0.3s ease; } body.wovallo-reviews-page .wovallo-reviews-more-cta:hover span { transform: translateX(3px); } @media (max-width: 640px) { body.wovallo-reviews-page .wovallo-reviews-more { margin-top: 3rem; padding: 2rem 1.125rem 2.25rem; border-radius: 1.25rem; } body.wovallo-reviews-page .wovallo-reviews-more-title { font-size: 1.375rem; } body.wovallo-reviews-page .wovallo-reviews-more-list { grid-template-columns: minmax(0, 1fr); } body.wovallo-reviews-page .wovallo-reviews-more-link { gap: 0.75rem; padding: 0.625rem 0.75rem 0.625rem 0.625rem; } body.wovallo-reviews-page .wovallo-reviews-more-thumb { flex-basis: 2.875rem; width: 2.875rem; height: 2.875rem; } body.wovallo-reviews-page .wovallo-reviews-more-name { /* Two-line clamp beats an ellipsis when the card is only ~20rem wide. */ white-space: normal; text-overflow: clip; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } body.wovallo-reviews-page .wovallo-reviews-more-meta { flex-wrap: wrap; gap: 0.125rem 0.4rem; } body.wovallo-reviews-page .wovallo-reviews-stat { padding: 0.25rem 0.4rem; } body.wovallo-reviews-page .wovallo-reviews-stat-num { font-size: 1.5rem; } body.wovallo-reviews-page .wovallo-reviews-stat-label { font-size: 0.6875rem; letter-spacing: 0.04em; } } @media (max-width: 360px) { body.wovallo-reviews-page .wovallo-reviews-stat-num { font-size: 1.35rem; } body.wovallo-reviews-page .wovallo-reviews-stat-label { font-size: 0.625rem; letter-spacing: 0.02em; } } @media (prefers-reduced-motion: reduce) { body.wovallo-reviews-page .wovallo-reviews-wall .wovallo-review-card, body.wovallo-reviews-page .wovallo-review-product { transition: none; } } /* ========================================================================= * Affiliate dashboard * * Every selector is scoped to body.wovallo-affiliates-page so nothing here can * leak onto another template. Colours are written as literal hex rather than * theme.json tokens because the palette is not exposed as CSS custom * properties anywhere else in this stylesheet. * ====================================================================== */ body.wovallo-affiliates-page .wovallo-aff-main { padding: 0 0 3.5rem; background: #faf9f6; } body.wovallo-affiliates-page .wovallo-aff-shell { width: min(100% - 2rem, 1100px); margin: 0 auto; } /* Hero ------------------------------------------------------------------ */ body.wovallo-affiliates-page .wovallo-aff-hero { padding: 1.5rem 0 1.25rem; } body.wovallo-affiliates-page .wovallo-aff-kicker { margin: 0 0 0.35rem; color: rgba(58, 71, 80, 0.78); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.wovallo-affiliates-page .wovallo-aff-hero h1, body.wovallo-affiliates-page .wovallo-aff-gate h1 { max-width: 44rem; margin: 0; color: #3a4750; font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; } body.wovallo-affiliates-page .wovallo-aff-lede { max-width: 44rem; margin: 0.55rem 0 0; color: rgba(58, 71, 80, 0.78); font-size: 1rem; line-height: 1.55; } /* Signed-out and not-yet-an-affiliate states ---------------------------- */ body.wovallo-affiliates-page .wovallo-aff-gate { padding: 2.5rem 0 1.5rem; } body.wovallo-affiliates-page .wovallo-aff-gate-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } body.wovallo-affiliates-page .wovallo-aff-register-panel { margin-top: 1.5rem; border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 1rem; background: #ffffff; padding: 1.5rem; box-shadow: 0 16px 42px rgba(58, 71, 80, 0.06); } body.wovallo-affiliates-page .wovallo-aff-register-panel input[type="text"], body.wovallo-affiliates-page .wovallo-aff-register-panel input[type="email"], body.wovallo-affiliates-page .wovallo-aff-register-panel input[type="password"], body.wovallo-affiliates-page .wovallo-aff-register-panel select, body.wovallo-affiliates-page .wovallo-aff-register-panel textarea { width: 100%; max-width: 100%; } /* Coupon switcher ------------------------------------------------------- */ body.wovallo-affiliates-page .wovallo-aff-switcher { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.1rem; min-width: 0; } body.wovallo-affiliates-page .wovallo-aff-switcher-label { flex: none; color: rgba(58, 71, 80, 0.78); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.wovallo-affiliates-page .wovallo-aff-switcher-list { display: flex; gap: 0.4rem; min-width: 0; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-bottom: 0.2rem; } body.wovallo-affiliates-page .wovallo-aff-switcher-item { flex: none; max-width: 14rem; border: 1px solid rgba(162, 192, 206, 0.36); border-radius: 9999px; background: #ffffff; color: rgba(58, 71, 80, 0.8); padding: 0.35rem 0.85rem; font-size: 0.82rem; font-weight: 700; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } body.wovallo-affiliates-page .wovallo-aff-switcher-item:hover { border-color: #ff9d7e; color: #3a4750; } body.wovallo-affiliates-page .wovallo-aff-switcher-item.is-active { border-color: #3a4750; background: #3a4750; color: #ffffff; } /* Tab strip ------------------------------------------------------------- * * Flex with horizontal overflow rather than a grid: a fixed column count is * what makes tabs wrap into a full-height stack on a narrow phone. * ---------------------------------------------------------------------- */ body.wovallo-affiliates-page .wovallo-aff-tabs { display: flex; gap: 0.3rem; margin: 1.5rem 0 1.25rem; border: 1px solid rgba(162, 192, 206, 0.26); border-radius: 9999px; background: rgba(162, 192, 206, 0.12); padding: 0.3rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body.wovallo-affiliates-page .wovallo-aff-tabs::-webkit-scrollbar { display: none; } /* Fade the edge the remaining tabs sit behind, so a strip that scrolls does not look like a strip with tabs missing. Only applied once script has measured an actual overflow. */ body.wovallo-affiliates-page .wovallo-aff-tabs.is-scrollable { mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%); } body.wovallo-affiliates-page .wovallo-aff-tabs.is-scrollable.is-at-start { mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent 100%); } body.wovallo-affiliates-page .wovallo-aff-tabs.is-scrollable.is-at-end { mask-image: linear-gradient(to right, transparent 0, #000 1.5rem); } body.wovallo-affiliates-page .wovallo-aff-tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; border: 1px solid transparent; border-radius: 9999px; background: transparent; color: rgba(58, 71, 80, 0.82); padding: 0 0.95rem; font-size: 0.88rem; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } body.wovallo-affiliates-page .wovallo-aff-tab:hover { color: #3a4750; } body.wovallo-affiliates-page .wovallo-aff-tab.is-active { border-color: rgba(255, 255, 255, 0.82); background: #ffffff; color: #3a4750; box-shadow: 0 8px 20px rgba(58, 71, 80, 0.08); } body.wovallo-affiliates-page .wovallo-aff-tab:focus-visible, body.wovallo-affiliates-page .wovallo-aff-chip:focus-visible, body.wovallo-affiliates-page .wovallo-aff-switcher-item:focus-visible, body.wovallo-affiliates-page .wovallo-aff-button:focus-visible, body.wovallo-affiliates-page .wovallo-aff-page-link:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } /* Panel and cards ------------------------------------------------------- */ body.wovallo-affiliates-page .wovallo-aff-panel { position: relative; min-height: 12rem; transition: opacity 0.2s ease; } body.wovallo-affiliates-page .wovallo-aff-panel.is-loading { opacity: 0.45; pointer-events: none; } body.wovallo-affiliates-page .wovallo-aff-stack { display: grid; gap: 1rem; } body.wovallo-affiliates-page .wovallo-aff-card { border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 1rem; background: #ffffff; padding: 1.35rem; box-shadow: 0 16px 42px rgba(58, 71, 80, 0.06); } body.wovallo-affiliates-page .wovallo-aff-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; } body.wovallo-affiliates-page .wovallo-aff-card-head h2 { margin: 0; color: #3a4750; font-size: 1.05rem; font-weight: 700; line-height: 1.3; } body.wovallo-affiliates-page .wovallo-aff-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; } body.wovallo-affiliates-page .wovallo-aff-card-note { color: rgba(58, 71, 80, 0.78); font-size: 0.78rem; font-variant-numeric: tabular-nums; } body.wovallo-affiliates-page .wovallo-aff-card .wovallo-aff-lede { margin: -0.5rem 0 1rem; font-size: 0.92rem; } /* Headline figures ------------------------------------------------------ */ body.wovallo-affiliates-page .wovallo-aff-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); align-items: stretch; gap: 0; } body.wovallo-affiliates-page .wovallo-aff-kpi { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.25rem 0.9rem; min-width: 0; } body.wovallo-affiliates-page .wovallo-aff-kpi:first-child { padding-left: 0; } body.wovallo-affiliates-page .wovallo-aff-kpi + .wovallo-aff-kpi { border-left: 1px solid rgba(162, 192, 206, 0.3); } body.wovallo-affiliates-page .wovallo-aff-kpi-value { color: #3a4750; font-size: clamp(1.4rem, 4.5vw, 2rem); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; overflow-wrap: anywhere; } body.wovallo-affiliates-page .wovallo-aff-kpi-value .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; } body.wovallo-affiliates-page .wovallo-aff-kpi-label { color: rgba(58, 71, 80, 0.78); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.35; } body.wovallo-affiliates-page .wovallo-aff-kpi-hint { color: rgba(58, 71, 80, 0.78); font-size: 0.75rem; } /* Yearly chart ---------------------------------------------------------- */ body.wovallo-affiliates-page .wovallo-aff-chart-wrap { width: 100%; overflow-x: auto; } body.wovallo-affiliates-page .wovallo-aff-chart { display: block; width: 100%; min-width: 20rem; height: 13.75rem; } body.wovallo-affiliates-page .wovallo-aff-chart-axis { stroke: rgba(162, 192, 206, 0.5); stroke-width: 1; } body.wovallo-affiliates-page .wovallo-aff-chart-bar { fill: #ff9d7e; } body.wovallo-affiliates-page .wovallo-aff-chart-bar.is-zero { fill: rgba(162, 192, 206, 0.45); } body.wovallo-affiliates-page .wovallo-aff-chart-label { fill: rgba(58, 71, 80, 0.78); font-size: 12px; font-weight: 700; } /* Filters --------------------------------------------------------------- */ body.wovallo-affiliates-page .wovallo-aff-filters { display: grid; gap: 0.9rem; margin-bottom: 1.25rem; } body.wovallo-affiliates-page .wovallo-aff-filter-label { display: block; margin-bottom: 0.4rem; color: rgba(58, 71, 80, 0.78); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.wovallo-affiliates-page .wovallo-aff-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } body.wovallo-affiliates-page .wovallo-aff-chip { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.25rem; border: 1px solid rgba(162, 192, 206, 0.36); border-radius: 9999px; background: #ffffff; color: rgba(58, 71, 80, 0.8); padding: 0.3rem 0.8rem; font-size: 0.82rem; font-weight: 700; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } body.wovallo-affiliates-page .wovallo-aff-chip:hover { border-color: #ff9d7e; color: #3a4750; } body.wovallo-affiliates-page .wovallo-aff-chip.is-active { border-color: #3a4750; background: #3a4750; color: #ffffff; } body.wovallo-affiliates-page .wovallo-aff-chip-count { color: inherit; font-size: 0.74rem; font-variant-numeric: tabular-nums; } body.wovallo-affiliates-page .wovallo-aff-custom-range { margin-top: 0.75rem; } body.wovallo-affiliates-page .wovallo-aff-custom-range > summary { display: inline-flex; align-items: center; min-height: 2.25rem; color: #4e7889; cursor: pointer; font-size: 0.82rem; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; } body.wovallo-affiliates-page .wovallo-aff-custom-range > summary:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } body.wovallo-affiliates-page .wovallo-aff-custom-range-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin-top: 0.75rem; } body.wovallo-affiliates-page .wovallo-aff-custom-range-form .wovallo-aff-field { flex: 1 1 9rem; min-width: 0; } /* Referred order cards -------------------------------------------------- */ body.wovallo-affiliates-page .wovallo-aff-order-list { display: grid; gap: 0.75rem; } body.wovallo-affiliates-page .wovallo-aff-order-card { border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 1rem; background: #ffffff; padding: 1.1rem 1.25rem; box-shadow: 0 10px 28px rgba(58, 71, 80, 0.05); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.wovallo-affiliates-page .wovallo-aff-order-card:hover { border-color: rgba(255, 157, 126, 0.5); box-shadow: 0 14px 34px rgba(58, 71, 80, 0.08); transform: translateY(-1px); } body.wovallo-affiliates-page .wovallo-aff-order-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.6rem; } body.wovallo-affiliates-page .wovallo-aff-order-number { margin: 0; color: #3a4750; font-size: 0.98rem; font-weight: 700; font-variant-numeric: tabular-nums; } body.wovallo-affiliates-page .wovallo-aff-order-date { margin: 0.15rem 0 0; color: rgba(58, 71, 80, 0.78); font-size: 0.8rem; } body.wovallo-affiliates-page .wovallo-aff-status-pill { flex: none; border: 1px solid rgba(162, 192, 206, 0.4); border-radius: 9999px; background: rgba(162, 192, 206, 0.16); color: #3a4750; padding: 0.2rem 0.7rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; } body.wovallo-affiliates-page .wovallo-aff-status-completed { border-color: rgba(78, 120, 137, 0.4); background: rgba(78, 120, 137, 0.12); color: #3f6373; } body.wovallo-affiliates-page .wovallo-aff-status-processing { border-color: rgba(255, 157, 126, 0.5); background: rgba(255, 157, 126, 0.16); color: #a5451f; } body.wovallo-affiliates-page .wovallo-aff-status-cancelled, body.wovallo-affiliates-page .wovallo-aff-status-refunded, body.wovallo-affiliates-page .wovallo-aff-status-failed { border-color: rgba(58, 71, 80, 0.22); background: rgba(58, 71, 80, 0.07); color: rgba(58, 71, 80, 0.82); } body.wovallo-affiliates-page .wovallo-aff-order-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.75rem; margin: 0.9rem 0 0; padding-top: 0.85rem; border-top: 1px solid rgba(162, 192, 206, 0.24); } body.wovallo-affiliates-page .wovallo-aff-order-figures dt { color: rgba(58, 71, 80, 0.78); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; } body.wovallo-affiliates-page .wovallo-aff-order-figures dd { margin: 0.2rem 0 0; color: #3a4750; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* Pagination ------------------------------------------------------------ */ body.wovallo-affiliates-page .wovallo-aff-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; } body.wovallo-affiliates-page .wovallo-aff-page-link { display: inline-flex; align-items: center; min-height: 2.6rem; border: 1px solid rgba(162, 192, 206, 0.36); border-radius: 9999px; background: #ffffff; color: #3a4750; padding: 0 1.1rem; font-size: 0.86rem; font-weight: 800; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } body.wovallo-affiliates-page .wovallo-aff-page-link:hover { border-color: #ff9d7e; color: #b7522f; } body.wovallo-affiliates-page .wovallo-aff-page-status { color: rgba(58, 71, 80, 0.78); font-size: 0.84rem; font-variant-numeric: tabular-nums; } /* Form controls --------------------------------------------------------- * * width:100% on every control is what stops a long option label pushing a * select past the edge of its card on a narrow screen. * ---------------------------------------------------------------------- */ body.wovallo-affiliates-page .wovallo-aff-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.9rem; } body.wovallo-affiliates-page .wovallo-aff-field { display: block; min-width: 0; margin-bottom: 0.9rem; } body.wovallo-affiliates-page .wovallo-aff-field-grid .wovallo-aff-field { margin-bottom: 0; } body.wovallo-affiliates-page .wovallo-aff-field label, body.wovallo-affiliates-page .wovallo-aff-copy-field > label { display: block; margin-bottom: 0.35rem; color: rgba(58, 71, 80, 0.78); font-size: 0.82rem; font-weight: 800; } body.wovallo-affiliates-page .wovallo-aff-field input, body.wovallo-affiliates-page .wovallo-aff-copy-row input, body.wovallo-affiliates-page .wovallo-aff-panel select, body.wovallo-affiliates-page .wovallo-aff-panel textarea { width: 100%; max-width: 100%; min-height: 3rem; border: 1px solid rgba(162, 192, 206, 0.36); border-radius: 0.75rem; background: #ffffff; color: #3a4750; font: inherit; font-size: 1rem; line-height: 1.45; padding: 0.72rem 0.9rem; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } body.wovallo-affiliates-page .wovallo-aff-field input:focus, body.wovallo-affiliates-page .wovallo-aff-field input:focus-visible, body.wovallo-affiliates-page .wovallo-aff-copy-row input:focus, body.wovallo-affiliates-page .wovallo-aff-copy-row input:focus-visible, body.wovallo-affiliates-page .wovallo-aff-panel select:focus, body.wovallo-affiliates-page .wovallo-aff-panel textarea:focus { border-color: #ff9d7e; box-shadow: 0 0 0 4px rgba(255, 157, 126, 0.14), 0 8px 18px rgba(162, 192, 206, 0.14); } body.wovallo-affiliates-page .wovallo-aff-field input:disabled, body.wovallo-affiliates-page .wovallo-aff-check input:disabled + label { background: rgba(162, 192, 206, 0.1); color: rgba(58, 71, 80, 0.65); cursor: not-allowed; } body.wovallo-affiliates-page .wovallo-aff-check { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 0.75rem; } body.wovallo-affiliates-page .wovallo-aff-check input[type="checkbox"] { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: #ff9d7e; cursor: pointer; } body.wovallo-affiliates-page .wovallo-aff-check label { color: #3a4750; cursor: pointer; font-size: 0.92rem; line-height: 1.45; } body.wovallo-affiliates-page .wovallo-aff-check-hint { display: block; color: rgba(58, 71, 80, 0.78); font-size: 0.8rem; } body.wovallo-affiliates-page .wovallo-aff-copy-field { margin-bottom: 0.9rem; } body.wovallo-affiliates-page .wovallo-aff-copy-row { display: flex; align-items: stretch; gap: 0.5rem; min-width: 0; } body.wovallo-affiliates-page .wovallo-aff-copy-row input { flex: 1 1 auto; min-width: 0; background: rgba(162, 192, 206, 0.08); font-size: 0.9rem; } body.wovallo-affiliates-page .wovallo-aff-copy-row .wovallo-aff-copy { flex: none; } /* The settings form is a single item of .wovallo-aff-stack, so the stack's gap lands around the form rather than between the sections inside it. Repeat the same rhythm here so its cards and the save button sit apart like every other card on the dashboard. */ body.wovallo-affiliates-page .wovallo-aff-settings-form { display: grid; gap: 1rem; } body.wovallo-affiliates-page .wovallo-aff-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; } /* Buttons --------------------------------------------------------------- */ body.wovallo-affiliates-page .wovallo-aff-button { display: inline-flex; min-height: 2.9rem; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 9999px; cursor: pointer; padding: 0.75rem 1.3rem; font: inherit; font-size: 0.9rem; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease; } body.wovallo-affiliates-page .wovallo-aff-button-primary { border-color: #3a4750; background: #3a4750; color: #ffffff; } body.wovallo-affiliates-page .wovallo-aff-button-primary:hover:not(:disabled) { border-color: #ff9d7e; background: #ff9d7e; color: #3a4750; transform: translateY(-1px); } body.wovallo-affiliates-page .wovallo-aff-button-secondary { border-color: rgba(58, 71, 80, 0.22); background: #ffffff; color: #3a4750; } body.wovallo-affiliates-page .wovallo-aff-button-secondary:hover:not(:disabled) { border-color: #ff9d7e; color: #b7522f; transform: translateY(-1px); } body.wovallo-affiliates-page .wovallo-aff-button-ghost { min-height: 2.35rem; border-color: rgba(162, 192, 206, 0.4); background: transparent; color: rgba(58, 71, 80, 0.82); padding: 0.4rem 0.9rem; font-size: 0.8rem; } body.wovallo-affiliates-page .wovallo-aff-button-ghost:hover:not(:disabled) { border-color: #ff9d7e; color: #3a4750; } body.wovallo-affiliates-page .wovallo-aff-button:disabled, body.wovallo-affiliates-page .wovallo-aff-button.is-busy { cursor: not-allowed; opacity: 0.55; transform: none; } /* Empty states, notices and hints --------------------------------------- */ body.wovallo-affiliates-page .wovallo-aff-empty { border: 1px dashed rgba(162, 192, 206, 0.5); border-radius: 1rem; background: rgba(255, 255, 255, 0.6); padding: 2rem 1.5rem; text-align: center; } body.wovallo-affiliates-page .wovallo-aff-empty h3 { margin: 0 0 0.4rem; color: #3a4750; font-size: 1.02rem; font-weight: 700; } body.wovallo-affiliates-page .wovallo-aff-empty p { max-width: 32rem; margin: 0 auto; color: rgba(58, 71, 80, 0.78); font-size: 0.92rem; line-height: 1.55; } body.wovallo-affiliates-page .wovallo-aff-empty-action { margin-top: 1.1rem; } body.wovallo-affiliates-page .wovallo-aff-notice { margin: 0; border: 1px solid rgba(255, 157, 126, 0.45); border-radius: 0.85rem; background: rgba(255, 157, 126, 0.1); color: #3a4750; padding: 0.85rem 1.1rem; font-size: 0.9rem; line-height: 1.5; } body.wovallo-affiliates-page .wovallo-aff-link-button { border: 0; background: none; color: #4e7889; cursor: pointer; padding: 0; font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 0.2em; } body.wovallo-affiliates-page .wovallo-aff-link-button:hover { color: #a5451f; } body.wovallo-affiliates-page .wovallo-aff-link-button:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } body.wovallo-affiliates-page .wovallo-aff-chart-card .wovallo-aff-notice { margin-bottom: 1rem; } body.wovallo-affiliates-page .wovallo-aff-hint { margin: 0.6rem 0 0; color: rgba(58, 71, 80, 0.78); font-size: 0.82rem; line-height: 1.5; } body.wovallo-affiliates-page .wovallo-aff-panel a:not([class]) { color: #4e7889; text-decoration: underline; text-underline-offset: 0.2em; } /* Narrow viewports ------------------------------------------------------ */ @media (max-width: 640px) { body.wovallo-affiliates-page .wovallo-aff-card { padding: 1.1rem; } body.wovallo-affiliates-page .wovallo-aff-kpis { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); } body.wovallo-affiliates-page .wovallo-aff-kpi { padding: 0.25rem 0.6rem; } body.wovallo-affiliates-page .wovallo-aff-order-card { padding: 1rem; } body.wovallo-affiliates-page .wovallo-aff-copy-row { flex-wrap: wrap; } body.wovallo-affiliates-page .wovallo-aff-copy-row .wovallo-aff-copy { width: 100%; } body.wovallo-affiliates-page .wovallo-aff-form-actions .wovallo-aff-button { width: 100%; } } @media (max-width: 420px) { body.wovallo-affiliates-page .wovallo-aff-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 0; } body.wovallo-affiliates-page .wovallo-aff-kpi:nth-child(odd) { padding-left: 0; } body.wovallo-affiliates-page .wovallo-aff-kpi:nth-child(odd) + .wovallo-aff-kpi { border-left: 1px solid rgba(162, 192, 206, 0.3); } body.wovallo-affiliates-page .wovallo-aff-kpi:nth-child(odd) { border-left: 0; } } @media (prefers-reduced-motion: reduce) { body.wovallo-affiliates-page .wovallo-aff-order-card:hover, body.wovallo-affiliates-page .wovallo-aff-button:hover:not(:disabled) { transform: none; } } /* ========================================================================= * Affiliate sign-up * * Two scopes here, on purpose: * * body.wovallo-aff-register-page — the page shell, and nothing else may use * it, same discipline as the dashboard block above. * * .wovallo-aff-form — the skin over the plugin's own form * markup. Deliberately not tied to a page, because the same form is * embedded on the dashboard's "not an affiliate yet" state, and two * copies of these rules would drift apart within a release. * * The plugin's markup is old-school: fields wrapped in

, widths written as * inline styles, columns done with floats. Overriding an inline style is what * !important is for; it is not used here for anything else. * ====================================================================== */ body.wovallo-aff-register-page .wovallo-aff-reg-main { padding: 0 0 4rem; background: #faf9f6; } body.wovallo-aff-register-page .wovallo-aff-reg-shell { width: min(100% - 2rem, 640px); margin: 0 auto; } /* Head ------------------------------------------------------------------ */ body.wovallo-aff-register-page .wovallo-aff-reg-head { padding: 3rem 0 2rem; text-align: center; } body.wovallo-aff-register-page .wovallo-aff-reg-kicker { margin: 0 0 0.5rem; color: #ff9d7e; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.wovallo-aff-register-page .wovallo-aff-reg-head h1 { margin: 0; color: #3a4750; font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; } body.wovallo-aff-register-page .wovallo-aff-reg-lede { max-width: 34rem; margin: 0.8rem auto 0; color: rgba(58, 71, 80, 0.78); font-size: 1rem; line-height: 1.6; } /* Card ------------------------------------------------------------------ */ body.wovallo-aff-register-page .wovallo-aff-reg-card { border: 1px solid rgba(162, 192, 206, 0.24); border-radius: 1rem; background: #ffffff; padding: 2.25rem 2rem; box-shadow: 0 16px 42px rgba(58, 71, 80, 0.06); } body.wovallo-aff-register-page .wovallo-aff-reg-card-title { margin: 0 0 1.5rem; border-bottom: 1px solid rgba(58, 71, 80, 0.14); padding-bottom: 1rem; color: #3a4750; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; } body.wovallo-aff-register-page .wovallo-aff-reg-card-note { margin: -0.75rem 0 1.5rem; color: rgba(58, 71, 80, 0.78); font-size: 0.95rem; line-height: 1.6; } body.wovallo-aff-register-page .wovallo-aff-reg-status p { margin: 0; color: rgba(58, 71, 80, 0.82); font-size: 1rem; line-height: 1.65; } body.wovallo-aff-register-page .wovallo-aff-reg-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; } /* Buttons --------------------------------------------------------------- */ body.wovallo-aff-register-page .wovallo-aff-reg-button { display: inline-flex; min-height: 2.9rem; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 9999px; cursor: pointer; padding: 0.75rem 1.6rem; font: inherit; font-size: 0.9rem; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } body.wovallo-aff-register-page .wovallo-aff-reg-button-primary { border-color: #3a4750; background: #3a4750; color: #faf9f6; } body.wovallo-aff-register-page .wovallo-aff-reg-button-primary:hover { border-color: #ff9d7e; background: #ff9d7e; color: #3a4750; transform: translateY(-1px); } body.wovallo-aff-register-page .wovallo-aff-reg-button-secondary { border-color: rgba(58, 71, 80, 0.22); background: #ffffff; color: #3a4750; } body.wovallo-aff-register-page .wovallo-aff-reg-button-secondary:hover { border-color: #ff9d7e; color: #b7522f; transform: translateY(-1px); } /* Footnote -------------------------------------------------------------- */ body.wovallo-aff-register-page .wovallo-aff-reg-footnote { margin: 1.5rem 0 0; color: rgba(58, 71, 80, 0.7); font-size: 0.92rem; text-align: center; } body.wovallo-aff-register-page .wovallo-aff-reg-footnote a { color: #3a4750; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; transition: color 0.25s ease; } body.wovallo-aff-register-page .wovallo-aff-reg-footnote a:hover { color: #b7522f; } /* ------------------------------------------------------------------------- * Shared form skin — this page and the dashboard's sign-up state * ---------------------------------------------------------------------- */ /* The plugin prints its own heading above the form and keeps printing it in states where the form is gone, which is how it ends up announcing "Register New Affiliate Account" over "you are already registered". The heading is the theme's to write, per state. */ .wovallo-aff-form .wcusage-register-form-title { display: none; } /* Spinner for a script that is never loaded on a shortcode page. */ .wovallo-aff-form .register-spinner { display: none !important; } .wovallo-aff-form .wcu-form-section { margin: 0; border: 0; background: none; padding: 0; box-shadow: none; } .wovallo-aff-form form { margin: 0; } .wovallo-aff-form label { display: block; margin: 0 0 0.45rem; color: #3a4750; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; } .wovallo-aff-form p { margin: 0 0 1.15rem; } .wovallo-aff-form input[type="text"], .wovallo-aff-form input[type="email"], .wovallo-aff-form input[type="password"], .wovallo-aff-form input[type="url"], .wovallo-aff-form input[type="tel"], .wovallo-aff-form input[type="number"], .wovallo-aff-form select, .wovallo-aff-form textarea { /* The plugin writes max-width:300px straight onto the element. */ width: 100% !important; max-width: 100% !important; box-sizing: border-box; border: 1px solid rgba(58, 71, 80, 0.14); border-radius: 10px; background: #faf9f6; padding: 0.8rem 0.95rem; color: #3a4750; font-family: inherit; font-size: 1rem; line-height: 1.4; transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; } .wovallo-aff-form input:focus, .wovallo-aff-form select:focus, .wovallo-aff-form textarea:focus { outline: none; border-color: #a2c0ce; background: #ffffff; box-shadow: 0 0 0 3px rgba(162, 192, 206, 0.35); } .wovallo-aff-form input::placeholder { color: rgba(58, 71, 80, 0.42); } .wovallo-aff-form input:disabled { background: rgba(58, 71, 80, 0.05); color: rgba(58, 71, 80, 0.6); cursor: not-allowed; } /* The public discount code reads as a code. Display only — WooCommerce lowercases it on save, and matching is case-insensitive either way. */ .wovallo-aff-form input[type="text"][id$="-coupon"] { text-transform: uppercase; letter-spacing: 0.04em; } /* Columns. The plugin pairs fields with floats and separates them with empty clearing divs; grid gets the same two-up arrangement without the debris, and without the stranded half-width fields on a narrow screen. Everything spans the full width by default and only the two fields the plugin actually marks as a pair opt into a column — safer than the reverse, because a field switched on later in the plugin settings then arrives full-width instead of orphaned in a column. */ .wovallo-aff-form form { display: grid; gap: 0 1rem; grid-template-columns: 1fr; } .wovallo-aff-form form > * { min-width: 0; grid-column: 1 / -1; } .wovallo-aff-form form > div[style*="clear"] { display: none; } @media (min-width: 720px) { .wovallo-aff-form form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wovallo-aff-form .wcu-register-field-col-1 { grid-column: 1; } .wovallo-aff-form .wcu-register-field-col-2 { grid-column: 2; } } /* Submit ---------------------------------------------------------------- */ .wovallo-aff-form .wcu-register-form-button { margin: 0.5rem 0 0; } .wovallo-aff-form input[type="submit"], .wovallo-aff-form button[type="submit"] { width: auto !important; min-height: 3rem; border: 1px solid #3a4750 !important; border-radius: 9999px !important; background: #3a4750 !important; color: #faf9f6 !important; cursor: pointer; padding: 0.8rem 2rem !important; font-family: inherit; font-size: 1rem !important; font-weight: 700; line-height: 1.2 !important; text-shadow: none !important; transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, transform 0.25s ease; } .wovallo-aff-form input[type="submit"]:hover:not(:disabled), .wovallo-aff-form button[type="submit"]:hover:not(:disabled) { border-color: #ff9d7e !important; background: #ff9d7e !important; color: #3a4750 !important; transform: translateY(-1px); } .wovallo-aff-form input[type="submit"]:disabled, .wovallo-aff-form input[type="submit"].is-busy { cursor: progress; opacity: 0.6; transform: none; } /* Hints and errors ------------------------------------------------------ */ .wovallo-aff-form .wovallo-aff-form-hint { display: block; margin-top: 0.45rem; color: rgba(58, 71, 80, 0.66); font-size: 0.84rem; line-height: 1.5; } .wovallo-aff-form .wovallo-aff-form-invalid input, .wovallo-aff-form .wovallo-aff-form-invalid select { border-color: rgba(255, 157, 126, 0.85); background: rgba(255, 157, 126, 0.06); } .wovallo-aff-form .wovallo-aff-form-error { display: flex; width: 100%; align-items: flex-start; gap: 0.42rem; margin-top: 0.45rem; border-left: 3px solid rgba(255, 157, 126, 0.82); padding: 0.02rem 0 0.02rem 0.55rem; color: #3a4750; font-size: 0.88rem; font-weight: 650; line-height: 1.45; } .wovallo-aff-form .wovallo-aff-form-error::before { display: inline-grid; width: 1rem; height: 1rem; flex: 0 0 auto; place-items: center; margin-top: 0.16rem; border-radius: 9999px; background: rgba(255, 157, 126, 0.2); color: #3a4750; content: "!"; font-size: 0.68rem; font-weight: 900; line-height: 1; } /* The server's own response block. Whatever the script could not hand to a field stays here, and everything it says arrives with inline red styling. */ .wovallo-aff-form .wcu-registration-response { margin: 0 0 1.5rem; border: 1px solid rgba(162, 192, 206, 0.4); border-radius: 0.75rem; background: rgba(162, 192, 206, 0.1); padding: 1.1rem 1.25rem; } .wovallo-aff-form .wcu-registration-response p { margin: 0 0 0.6rem; color: #3a4750 !important; font-size: 0.95rem; font-weight: 600 !important; line-height: 1.6; } .wovallo-aff-form .wcu-registration-response p:last-child { margin-bottom: 0; } /* Narrow screens -------------------------------------------------------- */ @media (max-width: 480px) { body.wovallo-aff-register-page .wovallo-aff-reg-head { padding: 2rem 0 1.5rem; } body.wovallo-aff-register-page .wovallo-aff-reg-card { border-radius: 0.85rem; padding: 1.5rem 1.25rem; } body.wovallo-aff-register-page .wovallo-aff-reg-card-title { font-size: 1.2rem; } body.wovallo-aff-register-page .wovallo-aff-reg-actions { flex-direction: column; } body.wovallo-aff-register-page .wovallo-aff-reg-button { width: 100%; } .wovallo-aff-form input[type="submit"], .wovallo-aff-form button[type="submit"] { width: 100% !important; } } @media (prefers-reduced-motion: reduce) { body.wovallo-aff-register-page .wovallo-aff-reg-button:hover, .wovallo-aff-form input[type="submit"]:hover:not(:disabled) { transform: none; } } /* ========================================================= Fallback templates: search form search.html renders core/search, which ships an unstyled black pill button. Bring it in line with the FAQ search field and the brand buttons. ========================================================= */ .wovallo-search-form .wp-block-search__inside-wrapper { gap: 0.6rem; border: 0; padding: 0; } .wovallo-search-form .wp-block-search__input { flex: 1 1 auto; min-width: 0; padding: 0.95rem 1.4rem; border: 1px solid rgba(162, 192, 206, 0.5); border-radius: 999px; background: #fff; color: var(--brand-text, #3a4750); font-size: 1rem; line-height: 1.2; box-shadow: 0 8px 24px -16px rgba(58, 71, 80, 0.35); transition: border-color 0.2s ease, box-shadow 0.2s ease; -webkit-appearance: none; appearance: none; } .wovallo-search-form .wp-block-search__input::placeholder { color: rgba(58, 71, 80, 0.42); } .wovallo-search-form .wp-block-search__input:focus { outline: none; border-color: #ff9d7e; box-shadow: 0 0 0 3px rgba(255, 157, 126, 0.22); } .wovallo-search-form .wp-block-search__button { margin: 0; padding: 0.95rem 2rem; border: 0; border-radius: 999px; background: #3a4750; color: #faf9f6; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: background-color 0.25s ease, transform 0.2s ease; } .wovallo-search-form .wp-block-search__button:hover { background: #ff9d7e; } .wovallo-search-form .wp-block-search__button:active { transform: scale(0.97); } .wovallo-search-form .wp-block-search__button:focus-visible { outline: 2px solid #ff9d7e; outline-offset: 3px; } @media (max-width: 480px) { .wovallo-search-form .wp-block-search__inside-wrapper { flex-wrap: wrap; } .wovallo-search-form .wp-block-search__button { width: 100%; } }