/* ========================================================================== PolarLabs — woocommerce.css De-generic-ifies WooCommerce: single product, cart, checkout, account, mini-cart drawer, sticky mobile add-to-cart. Layout/branding only. ========================================================================== */ /* ========================================================================== 0. CORE LAYOUT NEUTRALISATION — read before touching any grid below -------------------------------------------------------------------------- WooCommerce core ships woocommerce-layout.css, which lays out product loops and account columns with FLOATS AND PERCENTAGE WIDTHS: .woocommerce ul.products li.product { float:left; width:30.75%; margin-right:3.8%; } .woocommerce ul.products.columns-4 li.product { width:22.05%; } .woocommerce .col2-set .col-1 { float:left; width:48%; } PolarLabs lays those same elements out with CSS Grid. A percentage width on a GRID ITEM resolves against its GRID AREA, not the container — so core's `width:30.75%` applied to a `repeat(3,1fr)` track produced a card ~10% of the container wide (30.75% OF one-third), and `.columns-4` produced ~5.5%. That single interaction is the shared cause of the narrow product strips, letter-by-letter wrapping, split prices, overflowing badges, cards shoved right, dead whitespace, the broken 1–5 product states, AND the collapsed desktop account form (48% of a half-track ≈ 24%). These are not separate bugs and must not be patched separately. Core's layout rules are neutralised ONCE, here, wherever PolarLabs owns layout. Core's *visual* styles (woocommerce-general.css) are intentionally kept. If a PolarLabs grid ever mysteriously narrows again, look here first. ========================================================================== */ /* Product loops: PolarLabs grid owns sizing; core float/width must not apply. * * SPECIFICITY IS LOAD-BEARING HERE — do not "simplify" this selector list. * woocommerce-smallscreen.css (<=768px) ships: * .woocommerce ul.products[class*="columns-"] li.product { width:48%; float:left; clear:both; } * That is FOUR class-level tokens (.woocommerce, .products, [class*=], .product) * plus two elements = (0,4,2). A reset written as * .woocommerce ul.products li.product * is only (0,3,2) and LOSES, no matter that the theme stylesheet loads later — * source order only breaks ties, and this is not a tie. The [class*="columns-"] * variants below exist purely to match core's specificity and win on order. * * Measured on the live 390px Shop before/after: card width 83.03px -> 173px * (83.03 == 48% of the 173px grid track — core's % resolved against the TRACK, * not the container). No !important needed once the specificity matches. */ .woocommerce ul.products[class*="columns-"] li.product, .woocommerce-page ul.products[class*="columns-"] li.product, .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, ul.products.pl-productgrid li.product, .pl-productgrid > li { float: none; width: auto; margin-right: 0; margin-left: 0; clear: none; min-width: 0; /* grid/flex items default to min-width:auto (=min-content) and refuse to shrink */ } /* Core's ::before/::after clearfix on the loop fights grid auto-placement. */ .woocommerce ul.products::before, .woocommerce ul.products::after, .pl-productgrid::before, .pl-productgrid::after { content: none; } /* Account two-column sets (login/register, addresses, customer details). */ .woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-1, .woocommerce-page .col2-set .col-2 { float: none; width: auto; min-width: 0; } /* Long unbroken strings (SKUs, URLs, compound names) must not blow out a track. Only the core loop title is targeted here — the PolarLabs card's own title and price are handled in main.css alongside the rest of the card. (The former .pl-productcard__title / .pl-productcard__price selectors here were dead: the renderer emits .pl-card__title / .pl-card__price and never matched them.) */ .pl-productgrid .woocommerce-loop-product__title { overflow-wrap: break-word; min-width: 0; } .pl-woo { padding-block: clamp(28px, 5vw, 56px); } /* Hide default Woo demo/store notice styling override */ .woocommerce-store-notice { background: var(--pl-navy-900); color: var(--pl-icy); } /* ---- Compact catalog heading + Shop toolbar / count / ordering ---- */ /* Compact white catalog heading (replaces the retired hero shophead panel): one H1, a short supporting line, moderate spacing, no eyebrow/badges/gradient. */ .pl-catalog-head { padding-bottom: clamp(12px, 2vw, 18px); } .pl-catalog-head__title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.15; margin: 0 0 6px; color: var(--pl-navy); } .pl-catalog-head__desc { color: var(--pl-muted); max-width: 60ch; margin: 0; } /* .pl-shop is the archive positioning context. The decorative atmosphere no longer sits here — S1.1's large .pl-shop::before field is retired (it read as a big top wash). It moved onto the compact command band (.pl-catalog-command::before, in the Catalog Command Surface block below), so the icy field is one controlled control- surface instead. A small top pad gives the band a controlled gap under the header (this custom archive template renders .pl-shop directly, without the .pl-woo pad). */ /* RC.6.8 — qualify to the content wrapper (which always carries BOTH .pl-container and .pl-shop). Previously the bare `.pl-shop` also matched (added by polarlabs_body_classes on shop/category/taxonomy), leaking a phantom top gap above the sticky header + bottom gap under the footer on Shop pages only. never has .pl-container, so this scopes the padding/stacking to the wrapper. */ .pl-container.pl-shop { position: relative; z-index: 0; padding-block: clamp(12px, 2vw, 20px) clamp(28px, 4vw, 48px); } /* Category filters: single horizontally-scrollable swipe row (never wraps). Categories are rendered dynamically from WooCommerce; JS adds the scroll affordance + centres the active pill. */ .pl-shop__filters { position: relative; margin-bottom: 24px; } .pl-chiprow { list-style: none; display: flex; flex-wrap: nowrap; gap: 8px; margin: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; /* Safe leading + trailing inline padding so the first chip is fully visible at the start position and the last chip can scroll clear of the right-edge fade; vertical padding keeps the focus ring from being clipped by overflow-y. */ padding: 4px 24px 4px 4px; scroll-padding-inline: 4px 24px; } .pl-chiprow::-webkit-scrollbar { display: none; } .pl-chiprow > li { flex: 0 0 auto; } .pl-chip { display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap; min-height: 44px; padding: 9px 18px; border-radius: var(--pl-radius-pill); background: var(--pl-surface); border: 1px solid var(--pl-line); color: var(--pl-navy); font-weight: 600; font-size: .9rem; transition: border-color var(--pl-dur) var(--pl-ease), color var(--pl-dur) var(--pl-ease), background var(--pl-dur) var(--pl-ease), transform var(--pl-dur) var(--pl-ease), box-shadow var(--pl-dur) var(--pl-ease); } .pl-chip:hover { border-color: var(--pl-blue); color: var(--pl-blue); background: var(--pl-blue-050); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(40,120,245,.12); } /* Active chip — controlled Polar-blue emphasis (S1). --pl-blue-600 keeps white text at 5.5:1 (AA); --pl-blue would be 4.1:1 and fail. Solid fill stays clearly distinct from the pale-blue inactive hover. */ .pl-chip.is-active { background: var(--pl-blue-600); border-color: var(--pl-blue-600); color: #fff; } .pl-chip.is-active:hover { background: var(--pl-blue-600); border-color: var(--pl-blue-600); color: #fff; } /* Right-edge fade affordance — shown only while more categories exist to the right. */ .pl-shop__filters::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 44px; background: linear-gradient(90deg, rgba(255,255,255,0), var(--pl-surface) 80%); pointer-events: none; opacity: 0; transition: opacity var(--pl-dur) var(--pl-ease); } .pl-shop__filters.pl-chiprow--overflow::after { opacity: 1; } .pl-shop__filters.pl-chiprow--end::after { opacity: 0; } @media (prefers-reduced-motion: reduce) { .pl-chiprow { scroll-behavior: auto; } } .pl-shop__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--pl-line); } .pl-shop__count { color: var(--pl-muted); font-size: .9rem; margin: 0; } .woocommerce-result-count { margin: 0 !important; color: var(--pl-muted); } .pl-shop__sort select, .woocommerce-ordering select { min-height: 44px; padding: 10px 40px 10px 14px; border: 1.5px solid var(--pl-field-border); border-radius: var(--pl-radius); background-color: var(--pl-surface); color: var(--pl-navy); font-size: 1rem; font-weight: 600; cursor: pointer; appearance: none; transition: border-color var(--pl-dur) var(--pl-ease), box-shadow var(--pl-dur) var(--pl-ease); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235B6B80' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .pl-shop__sort select:hover, .woocommerce-ordering select:hover { border-color: var(--pl-blue); } .pl-shop__sort select:focus, .woocommerce-ordering select:focus { border-color: var(--pl-blue); box-shadow: var(--pl-ring); outline: none; } .pl-shop__pagination { margin-top: 40px; } .pl-shop__pagination .woocommerce-pagination ul { display: flex; gap: 6px; justify-content: center; list-style: none; border: 0 !important; } .pl-shop__pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; border: 1px solid var(--pl-line) !important; border-radius: var(--pl-radius-sm); color: var(--pl-navy); font-weight: 600; transition: border-color var(--pl-dur) var(--pl-ease), color var(--pl-dur) var(--pl-ease), background var(--pl-dur) var(--pl-ease); } a.pl-shop__pagination .page-numbers:hover, .pl-shop__pagination a.page-numbers:hover { border-color: var(--pl-blue) !important; color: var(--pl-blue); background: var(--pl-blue-050); } .pl-shop__pagination .page-numbers.current { background: var(--pl-blue-600); color: #fff; border-color: var(--pl-blue-600) !important; } /* Loop add-to-cart button uses .pl-btn via filter */ .pl-productgrid .button.loading::after { content: ""; } /* ========================================================================== Shop archive — product search, controls, and product card (.pl-scard) Every rule here is namespaced to .pl-scard / .pl-shopgrid / .pl-shop__* and is emitted only in the Shop-archive context, so none of it can reach .pl-card (related products / up-sells), .pl-fcard (frozen homepage rail) or the shared .pl-productgrid base grid. The shared grid supplies the 2/3/4 columns. ========================================================================== */ /* Product search — permanently visible; full-width and first control on mobile. */ .pl-shop__search { position: relative; display: flex; align-items: stretch; gap: 8px; width: 100%; margin-bottom: 20px; } .pl-shop__search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--pl-muted); pointer-events: none; z-index: var(--pl-z-base); } .pl-shop__search-input { flex: 1 1 auto; min-width: 0; min-height: 50px; padding: 12px 16px 12px 42px; border: 1.5px solid var(--pl-field-border); border-radius: var(--pl-radius); background: var(--pl-surface); color: var(--pl-navy); font-size: 1rem; } .pl-shop__search-input::placeholder { color: var(--pl-muted-soft); } .pl-shop__search-input:focus { border-color: var(--pl-blue); box-shadow: var(--pl-ring); outline: none; } .pl-shop__search-btn { flex: 0 0 auto; min-height: 50px; } @media (min-width: 720px) { .pl-shop__search { max-width: 560px; } } /* Toolbar end — clear-filters + sort, right-aligned opposite the count. */ .pl-shop__toolbar-end { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .pl-shop__clear { display: inline-flex; align-items: center; min-height: 44px; color: var(--pl-link); font-weight: 600; font-size: .9rem; white-space: nowrap; } .pl-shop__clear:hover { text-decoration: underline; } /* Shop grid modifier — the shared .pl-productgrid supplies the 2/3/4 columns; this scope only exists so any Shop-only grid tuning cannot touch related/up-sells. */ .pl-shopgrid { align-items: stretch; } /* Shop product card — image, name, price, View product only. The authoritative PolarLabs product card (Shop archive, homepage Featured, PDP Related rail). Image-first (Lumex/EON): a seamless edge-to-edge 1:1 media area (object-fit:cover; the outer .pl-scard alone owns the border, radius and overflow clip) joined directly to the white information panel — no inner tile, padding or hairline (RC.6.2). Current product images are square, so cover crops nothing. Distinct .pl-scard namespace; the .pl-card variant is dormant (fallback), and .pl-fcard was removed in RC.6.3. */ .pl-scard { display: flex; flex-direction: column; height: 100%; min-width: 0; overflow: hidden; background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg); transition: transform var(--pl-dur) var(--pl-ease), box-shadow var(--pl-dur) var(--pl-ease), border-color var(--pl-dur) var(--pl-ease); } .pl-scard:hover { transform: translateY(-2px); box-shadow: var(--pl-shadow-sm); border-color: var(--pl-line-strong); } /* RC.6.10.1 hotfix — RESTORE the approved edge-to-edge media (reverts the commerce-pass contain-on-tile, which framed each studio-background photo inside a second icy tile: a double-background regression with a small floating vial). The product photographs are already art-directed on their own clean studio backgrounds, so the image fills the media edge-to-edge via object-fit:cover (current masters are ~square, so cover crops no vial — confirmed against the owner's approved reference). The --pl-card-tile stays as the media background but is now covered by the photo; it shows ONLY behind the missing-image placeholder. DO NOT reintroduce media padding or object-fit:contain here — on studio-background photos that re-creates the framed / shrunken-vial regression. */ .pl-scard__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 0; margin: 0; overflow: hidden; background: var(--pl-card-tile); } .pl-scard__img { display: block; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; object-fit: cover; object-position: center; transition: transform var(--pl-dur) var(--pl-ease); } .pl-scard:hover .pl-scard__img { transform: scale(1.02); } /* RC.6.2 — restrict the lift + image zoom to real pointer devices so a touch tap never leaves the card in a stuck hover state. */ @media (hover: none) { .pl-scard:hover { transform: none; box-shadow: none; } .pl-scard:hover .pl-scard__img { transform: none; } } .pl-scard__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; padding: 16px; text-align: center; color: var(--pl-icy-200); } .pl-scard__placeholder-label { font-size: .82rem; font-weight: 600; color: var(--pl-muted); } /* M3.1 tile chips — real spec/availability only (assigned strength · Woo stock), never trust theater. Neutral pills on the tile, deliberately distinct from the prohibited purity/COA/"verified" badges. The chips share ONE absolutely-positioned flow band (.pl-scard__chips) pinned across the top of the tile. flex-wrap drops the stock chip cleanly BELOW the strength chip when the card is too narrow to hold both on one row (resilient down to ~130px cards — the 320px 2-up grid): no overlap, no clipping, and no guessed width threshold, because wrapping is driven by the real chip text at the real card width. Shared: applies anywhere polarlabs_render_product_card(..., 'shop') renders. */ .pl-scard__chips { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 6px; } .pl-scard__chip { display: inline-flex; align-items: center; max-width: 100%; padding: 3px 9px; border-radius: var(--pl-radius-pill); font-size: .72rem; font-weight: 700; line-height: 1.5; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255, 255, 255, .92); border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-xs); } /* RC.6.2 — stock is now the only card chip; it sits top-left inside the media safe area (the strength-count chip and its space-between/wrap logic were removed). */ .pl-scard__chip--stock { color: var(--pl-muted); font-weight: 600; } /* RC.6.2 — the category descriptor line was removed from the card (it belongs on the PDP). */ /* M3.1 sale price — keep each amount atomic so a real sale wraps cleanly (old price above, current price below) at 320 instead of splitting mid-number; the existing size + weight already keep the struck old price subordinate to the current price. */ .pl-scard__price del, .pl-scard__price ins { white-space: nowrap; } /* M3.1 compact body — tighter gaps + padding (Amino density) without crowding. */ .pl-scard__body { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px 12px; flex: 1 1 auto; } /* M3.1 compact title — ONE line with ellipsis (truncation on the LINK, below); no reserved 2-line height, so name length can't add blank rows or misalign cards. */ .pl-scard__title { margin: 0; font-size: 1.15rem; line-height: 1.3; font-weight: 700; color: var(--pl-navy); } .pl-scard__title a { color: inherit; } .pl-scard__title a:hover { color: var(--pl-link); } /* Commerce-consolidation — product identity leads: the NAME is the largest, boldest element (via the catalog weight-800 rule below); the price is confident supporting detail, not the headline (was 1.15rem/800, which read commodity-store). */ .pl-scard__price { font-size: 1rem; font-weight: 700; color: var(--pl-navy); line-height: 1.2; } .pl-scard__price del { color: var(--pl-muted-soft); font-weight: 600; font-size: .8em; margin-right: 6px; } .pl-scard__price ins { text-decoration: none; color: var(--pl-navy); } .pl-scard__price-pending { color: var(--pl-muted); font-weight: 600; font-size: .92rem; } /* CTA: full-width, >=44px, deep PolarLabs navy with royal-blue hover/focus, pinned to the card bottom for consistent alignment. Drives the .pl-btn base via --btn-bg (markup carries .pl-btn, not .pl-btn--primary, so no blue glow). */ .pl-scard__cta { margin-top: auto; width: 100%; min-height: 44px; --btn-bg: var(--pl-navy); box-shadow: none; white-space: nowrap; } .pl-scard__cta:hover { --btn-bg: var(--pl-blue); } .pl-scard__cta:focus-visible { --btn-bg: var(--pl-blue); box-shadow: var(--pl-ring); outline: none; } /* Mobile (<=640): two cards per row. Slightly reduced Shop-only outer padding so cards use more of the width and images stay substantial (the global DR-006 gutter is unchanged everywhere else — this override is scoped to the Shop container via the .pl-container.pl-shop double-class). */ @media (max-width: 640px) { .pl-container.pl-shop { padding-inline: 16px; } .pl-shopgrid.pl-productgrid { gap: 10px; } /* Media stays edge-to-edge at <=640px too (base padding:0) — no icy frame on phone cards. */ .pl-scard__body { padding: 9px 10px 10px; gap: 4px; } .pl-scard__title { font-size: 1.05rem; } .pl-scard__price { font-size: .92rem; } /* Trim the CTA's horizontal padding on the narrow (~138px @320) track so "View product" stays on one line instead of wrapping. */ .pl-scard__cta { padding-inline: 8px; font-size: .92rem; } .pl-scard__chips { top: 8px; left: 8px; right: 8px; } .pl-scard__chip { padding: 2px 7px; font-size: .66rem; } } /* Tablet (641–1024): three cards per row for the SHOP grid specifically, so the Shop matches the approved 2 / 3 / 4 column intent (owner Shop Phase 2 § H). The shared .pl-productgrid keeps its own breakpoints for related/up-sell loops; the double-class selector (.pl-shopgrid.pl-productgrid) out-specifies the base rule without editing it or touching main.css, so nothing else changes. */ @media (min-width: 641px) and (max-width: 1024px) { .pl-shopgrid.pl-productgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ========================================================================== Shop vNext — Quality Elevation (frame-only; DR-027). Namespaced to .pl-catalog-head / .pl-shop* / .pl-chip / .pl-scard / .pl-empty--shop; preserves the frozen section order + the four-element .pl-scard contract (image · name · price · "View product"). No base .pl-productgrid / .pl-card / .pl-fcard / PDP / main.css change; the shared polarlabs-shop-card image size is untouched. ========================================================================== */ /* Catalog head onto the unified weight-800 head system + accessible-blue electric-rule eyebrow (--pl-link ~5:1 on white — NOT the sub-AA .pl-eyebrow). */ .pl-catalog-head__eyebrow { display: inline-flex; align-items: center; gap: 11px; margin: 0 0 12px; color: var(--pl-link); font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; } .pl-catalog-head__eyebrow::before { content: ""; width: 24px; height: 1.5px; background: var(--pl-blue); } .pl-catalog-head__title { font-family: var(--pl-font-heading); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; font-size: clamp(1.85rem, 1.3rem + 1.6vw, 2.55rem); overflow-wrap: break-word; } .pl-catalog-head__desc { font-size: 1.02rem; line-height: 1.55; max-width: 56ch; } /* Fluid clamp control rhythm (was fixed 12/20/24/16px). */ .pl-catalog-head { padding-bottom: clamp(16px, 2.2vw, 26px); } .pl-shop__search { margin-bottom: clamp(16px, 2vw, 24px); } .pl-shop__filters { margin-bottom: clamp(18px, 2.4vw, 28px); } .pl-shop__toolbar { margin-bottom: clamp(18px, 2.4vw, 28px); } /* Chips: colour + hairline feedback only (drop the lift + blue glow); focus ring clears the 5px --pl-ring (block padding was 4px). Active navy + 44px unchanged. */ .pl-chip:hover { transform: none; box-shadow: none; border-color: var(--pl-blue); color: var(--pl-blue); background: var(--pl-blue-050); } .pl-chiprow { padding-block: 6px; } /* Card polish: title weight 800; the 2-line clamp moves onto the title LINK so the keyboard focus ring is never clipped by an ancestor overflow; sale strike-through to an AA-safe muted token. Media = the shared colored product-card tile (--pl-card-tile) + a 1px inner hairline (M3.1 — supersedes the earlier Frost surface + strict four-element scope; the renderer now carries the full anatomy). */ .pl-scard__title { font-weight: 800; display: block; overflow: visible; -webkit-line-clamp: none; } /* M3.1 compact: single-line title, ellipsis on overflow (keyboard focus ring is not clipped — the link is inline-block-level with its own overflow, not an ancestor). */ .pl-scard__title a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-scard__media { background: var(--pl-card-tile); } .pl-scard__price del { color: var(--pl-muted); } /* Empty (no-results) state keeps the frame voice — weight-800 head, left-aligned to the catalog-head axis. The truthful search/query behaviour is unchanged. */ .pl-empty--shop { text-align: left; margin-inline: 0; max-width: 60ch; } .pl-empty--shop .pl-empty__title { font-family: var(--pl-font-heading); font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; } .pl-empty--shop .pl-empty__icon { margin-inline: 0; } /* Shop-only closing-band texture: the approved masked hairline grid, scoped by the adjacent-sibling combinator so it renders ONLY where .pl-shop precedes the shared newsletter (never on home / affiliate / COA). Newsletter markup + behaviour are untouched. (Static gradient mirrors home.css .plh-news::after — a value, not fragile logic; can be promoted to one shared token in a later pass.) */ .pl-shop + .pl-newsletter { isolation: isolate; } .pl-shop + .pl-newsletter::after { content: ""; position: absolute; inset: 0; z-index: var(--pl-z-below); pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(120% 120% at 85% 0%, #000 0%, transparent 60%); mask-image: radial-gradient(120% 120% at 85% 0%, #000 0%, transparent 60%); } /* ========================================================================== S1.2 — Catalog Command Surface. A compact, cohesive control band (structural wrappers .pl-catalog-command / __top added in archive-product.php around the UNCHANGED head, search form, chip nav and toolbar): an asymmetric intro | search zone, then the category chip rail and the count/sort utility rail, all sharing one icy control field that resolves to white at the product grid. No hero, no vh heights (content-driven), no new query / control / markup — presentation only. Namespaced to .pl-catalog-command*; the shared card renderer + .pl-shop__* controls are untouched. ========================================================================== */ .pl-catalog-command { position: relative; z-index: 0; padding-block: clamp(22px, 2.8vw, 34px) clamp(14px, 1.8vw, 20px); margin-bottom: clamp(20px, 2.6vw, 32px); } /* Full-bleed icy control field behind the band (body overflow-x:hidden clips the 100vw bleed; z-index:-1 keeps it behind the real controls, which never fade). Icy upper field -> near-white at the grid edge, one restrained royal-blue radial toward the search (upper-right) side, faint coordinate/index geometry kept off the text. Pure decoration — no data, claims, molecules, certificates or dashboards. */ .pl-catalog-command::before { content: ""; position: absolute; z-index: -1; inset: 0; left: 50%; transform: translateX(-50%); width: 100vw; pointer-events: none; background-repeat: no-repeat; opacity: calc(1 - var(--pl-shop-recede, 0) * .4); background: radial-gradient(46% 92% at 87% 22%, rgba(40, 120, 245, .16), transparent 62%), repeating-linear-gradient(0deg, rgba(40, 120, 245, .03) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(40, 120, 245, .03) 0 1px, transparent 1px 44px), linear-gradient(180deg, #dfeaff 0, #eef5ff 68%, var(--pl-surface) 100%); } /* Gentle scroll settling (opacity 1 -> .6 over the first ~240px, eased in shop- atmosphere.js). Progressive + reduced-motion-safe: no-JS and reduced motion keep the complete static field; the CONTROLS are real DOM and never fade. */ @media (prefers-reduced-motion: reduce) { .pl-catalog-command::before { opacity: 1; } } /* Crisp full-bleed hairline at the band's lower edge — a deliberate seam into the product grid rather than a fade to nothing. */ .pl-catalog-command::after { content: ""; position: absolute; z-index: -1; left: 50%; transform: translateX(-50%); bottom: 0; width: 100vw; height: 1px; background: var(--pl-line); } /* Intro | search — stacked on mobile; asymmetric two columns from 880px (intro ~.84 / search 1fr), bottom-aligned so the search group sits on the intro's baseline while the upper-right radial fills the space above it. */ .pl-catalog-command__top { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 3.5vw, 22px); align-items: end; } @media (min-width: 880px) { .pl-catalog-command__top { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); column-gap: clamp(30px, 4.5vw, 60px); } } /* Intro zone — the band owns the head rhythm; a touch more H1 presence via scale, on a tighter measure kept inside the intro column. */ .pl-catalog-command .pl-catalog-head { padding-bottom: 0; } .pl-catalog-command .pl-catalog-head__title { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.85rem); margin: 6px 0 0; } .pl-catalog-command .pl-catalog-head__desc { margin-top: 10px; max-width: 46ch; } /* Search — shed the standalone bottom margin (the band owns spacing) + fill the control column on desktop; input + button stay one control group (base .pl-shop__search rules). */ .pl-catalog-command .pl-shop__search { margin: 0; } @media (min-width: 880px) { .pl-catalog-command .pl-shop__search { max-width: none; } } /* Chip rail — full band width, under the intro/search zone. */ .pl-catalog-command .pl-shop__filters { margin: clamp(18px, 2.4vw, 26px) 0 0; } /* Utility rail — count (left) · clear (secondary) · sort (right) on a shared thin top hairline; the base toolbar's bottom border drops (the band ::after is the grid seam). */ .pl-catalog-command .pl-shop__toolbar { margin: clamp(14px, 1.9vw, 20px) 0 0; padding-block: clamp(12px, 1.6vw, 16px) 0; border-top: 1px solid var(--pl-line); border-bottom: 0; } /* Mobile (<880px): compact-not-cramped stack; desc measure relaxes to full width. */ @media (max-width: 879px) { .pl-catalog-command { padding-block: clamp(18px, 5vw, 26px) clamp(12px, 3vw, 18px); } .pl-catalog-command .pl-catalog-head__desc { max-width: 62ch; } } /* ---- Single product ---- */ /* RC.6.1 — the lower sections own the bottom gap (their own padding-bottom); zero .pl-woo's bottom padding here so it does not stack an extra ~56px before the footer. */ .single-product .pl-woo { padding-top: 8px; padding-bottom: 0; } /* Figma 21:446 — gallery 560px, 56px column gap. The gallery is PINNED to its Figma width and the buy column takes the remainder (1248 - 560 - 56 = 632). Figma's own numbers (560 + 56 + 536) total 1152 and leave 96px unaccounted inside the 1248 column — that gap is the reported "excessive dead space between gallery and summary", so the buy column absorbs it rather than reproducing the hole. The previous 1.05fr/1fr ratio matched neither. minmax(0,…) on both tracks: a bare fr floors at min-content, and a wide image or long title would push the columns out of balance again. */ .single-product div.product { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; } /* rc.6: media in normal document flow (sticky removed per owner). */ .single-product div.product .woocommerce-product-gallery { margin: 0; } /* RC.6.6 — this is the WINNING wrapper rule (0,3,2, more specific than the .pl-pdp-gallery rule below), so the continuous media radius must be set HERE. overflow:hidden clips the filled image + baked background to the same rounded rect (one continuous surface). */ .single-product div.product .woocommerce-product-gallery__wrapper { border-radius: var(--pl-radius-media); overflow: hidden; border: 1px solid var(--pl-line); } .single-product .product_title { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); margin-bottom: 12px; } .single-product .woocommerce-product-details__short-description { color: var(--pl-muted); } .single-product .price { color: var(--pl-navy); font-weight: 700; font-size: 1.6rem; margin-bottom: 8px; } .single-product .price del { color: var(--pl-muted); font-weight: 500; font-size: .8em; } .single-product .price ins { text-decoration: none; } .single-product form.cart { margin: 22px 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .single-product form.cart .quantity { display: inline-flex; } .single-product .quantity input.qty { width: 76px; height: 52px; text-align: center; border: 1.5px solid var(--pl-field-border); border-radius: var(--pl-radius); font-size: 1rem; } /* Commerce CTA contract — PDP Add-to-Cart. Native Woo button styled to the shared funnel spec: --pl-radius, weight 700, the single --pl-cta-shadow elevation, blue-600 hover lift, and (new) a restrained :active press so the primary conversion control is as tactile as every other .pl-btn. Reduced-motion neutralization is added with the other funnel buttons. */ .single-product form.cart .single_add_to_cart_button, .single-product form.cart button.button { min-height: 52px; padding: 14px 28px; border-radius: var(--pl-radius); background: var(--pl-blue); color: #fff; border: none; font-weight: 700; font-size: 1.05rem; transition: background var(--pl-dur) var(--pl-ease), transform var(--pl-dur) var(--pl-ease), box-shadow var(--pl-dur) var(--pl-ease); box-shadow: var(--pl-cta-shadow); } .single-product form.cart .single_add_to_cart_button:hover { background: var(--pl-blue-600); transform: translateY(-1px); box-shadow: var(--pl-cta-shadow-hover); } .single-product form.cart .single_add_to_cart_button:active { transform: translateY(0) scale(.98); } .single-product table.variations { margin-bottom: 16px; } .single-product table.variations td, .single-product table.variations th { padding: 8px 0; } .single-product .variations select { padding: 12px 40px 12px 14px; border: 1.5px solid var(--pl-field-border); border-radius: var(--pl-radius); min-width: 200px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235B6B80' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } /* Documentation status block */ .pl-docstatus { border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg); padding: 18px; margin: 20px 0; background: var(--pl-surface-2); } .pl-docstatus__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .pl-docstatus__label { font-weight: 700; color: var(--pl-navy); } .pl-docstatus__note { color: var(--pl-muted); font-size: .9rem; margin: 0 0 12px; } .pl-docstatus__cta { } /* Single-product: eyebrow, badges, stock, price fallback, media */ .pl-single-cat { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pl-blue); } .pl-single-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; } .single-product .price.price--pending { color: var(--pl-muted); font-weight: 600; font-size: 1.15rem; } .pl-single-stock { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; margin: 0 0 6px; } .pl-single-stock__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; } .pl-single-stock--ok { color: var(--pl-success); } .pl-single-stock--pending { color: var(--pl-pending); } .pl-single-stock--out { color: var(--pl-danger); } /* Figma 21:473 BadgeRow — category chip + documentation chip on one line. */ .pl-single-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; } /* Figma 21:479 catalog meta line. */ .pl-single-meta { margin: 0 0 4px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pl-muted); font-weight: 600; } .pl-single-media { position: static; } .pl-single-media__placeholder { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--pl-line); border-radius: var(--pl-radius-media); overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, var(--pl-surface-2) 55%, var(--pl-surface-3) 100%); } .pl-single-media__icon { color: var(--pl-blue); opacity: .5; } .pl-single-media__label { font-size: .9rem; font-weight: 600; color: var(--pl-muted); } /* ---- Cart page — PolarLabs card composition (Figma 33:936 / 33:1019) -------- The previous rules here were a CSS reconstruction of core's table.shop_table, including ::before pseudo-labels faking the hidden . The theme now owns woocommerce/cart/cart.php and cart-totals.php outright, so all of that is gone: there is no table to re-style. --------------------------------------------- */ .pl-cart__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 388px); gap: 32px; align-items: start; } .pl-cart__items { display: grid; gap: 16px; min-width: 0; } /* Cart info banner ("Shipping and discounts are calculated during checkout"): .pl-cart-notice reuses the .woocommerce-info base — constrain its inline SVG (which had no flex-shrink and could distort) and suppress any leaked core ::before icon-font glyph so the icon aligns cleanly beside the text. */ .pl-cart-notice { align-items: center; } .pl-cart-notice::before { content: none; } .pl-cart-notice svg { flex: none; width: 18px; height: 18px; } .pl-cartrow { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 16px; background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg); } /* C1.1 — a more substantial, on-system product tile: the shared --pl-card-tile icy surface + 1px inner hairline (matching the shop/PDP media), object-fit:contain preserved below. Sized to the 88px column without lengthening the row materially. */ .pl-cartrow__media { width: 84px; height: 84px; border-radius: var(--pl-radius-sm); overflow: hidden; background: var(--pl-card-tile); box-shadow: inset 0 0 0 1px var(--pl-line); } .pl-cartrow__media img { width: 100%; height: 100%; object-fit: contain; display: block; } .pl-cartrow__info { min-width: 0; display: grid; gap: 4px; } .pl-cartrow__title { margin: 0; font-size: 1rem; line-height: 1.3; overflow-wrap: break-word; } .pl-cartrow__title a { color: var(--pl-navy); } .pl-cartrow__title a:hover { color: var(--pl-blue); } .pl-cartrow__meta, .pl-cartrow__sku { margin: 0; font-size: .78rem; color: var(--pl-muted); } .pl-cartrow__meta dl, .pl-cartrow__meta dt, .pl-cartrow__meta dd { margin: 0; display: inline; font-size: inherit; } .pl-cartrow__meta dd + dt::before { content: " · "; } .pl-cartrow__doc { display: inline-flex; margin-top: 2px; } .pl-cartrow__qty .quantity { display: inline-flex; } /* 44px minimum touch target on the quantity control. */ .pl-cartrow__qty input.qty { min-height: 44px; width: 84px; text-align: center; border: 1.5px solid var(--pl-field-border); border-radius: var(--pl-radius); } .pl-cartrow__price { display: grid; justify-items: end; gap: 2px; text-align: right; } .pl-cartrow__linetotal { font-weight: 700; color: var(--pl-navy); } .pl-cartrow__unit { font-size: .76rem; color: var(--pl-muted); } /* Remove is a text action beside the price (Figma 33:977), not core's detached circular icon floated into its own column. */ .pl-cartrow__remove { font-size: .8rem; font-weight: 600; color: var(--pl-muted); text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; } .pl-cartrow__remove:hover { color: var(--pl-danger); } /* Neutralize WooCommerce core's a.remove (color:red!important; font-size:1.5em; round 1.41em box) inside the card. The old neutralizer only targeted the removed td.product-remove cell, so core leaked and pushed a huge red glyph off the right edge. Contain it to a small text link; only `color` needs !important (core's only !important on this element). */ .pl-cartrow__price a.remove.pl-cartrow__remove { width: auto; height: auto; line-height: 1.4; border-radius: 0; text-align: right; float: none; font-size: .8rem; color: var(--pl-muted) !important; } .pl-cartrow__price a.remove.pl-cartrow__remove:hover { color: var(--pl-danger) !important; background: transparent; } .pl-cart__actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 4px; } .pl-cart__coupon { display: grid; gap: 6px; flex: 1 1 280px; min-width: 0; } .pl-cart__couponlabel { font-size: .82rem; font-weight: 600; color: var(--pl-navy); } .pl-cart__couponrow { display: flex; gap: 8px; min-width: 0; } .pl-cart__couponrow input.input-text { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--pl-field-border); border-radius: var(--pl-radius); font-size: 1rem; } .pl-cart__couponrow .pl-btn { flex: none; } .pl-cart__update { flex: none; } /* C1.1 — actions hierarchy: Apply coupon (inside the coupon row, keeping the --pl-line-strong border) reads as the coupon's own action; the standalone Update cart / Continue shopping recede with the lighter --pl-line border. Existing tokens only, no new decorative system; hover still resolves to the blue border. */ .pl-cart__update, .pl-cart-actions__continue { --btn-bd: var(--pl-line); } /* C1.1 — the actions-row Continue shopping is a mobile-only fallback for the stacked layout; the header link (.pl-cart-head__continue) is its desktop home. Hide it on desktop here; the <=640 block re-shows it (removes the duplicate). */ .pl-cart-actions__continue { display: none; } /* C1.1 — align cart input focus with the checkout field language (blue border + ring), layered over the global --pl-ring. Keyboard visibility preserved. */ .pl-cartrow__qty input.qty:focus, .pl-cart__couponrow input.input-text:focus { border-color: var(--pl-blue); box-shadow: var(--pl-ring); outline: none; } /* Order Summary card — Figma 33:1019 */ /* Commerce-consolidation — cart & checkout summaries are ONE component family. The cart .pl-summary card and the checkout #order_review card now share surface, radius, padding, shadow, heading, and Total hierarchy, so the summary reads as two states of the same component from cart through place-order. */ .pl-summary { position: sticky; top: calc(var(--pl-header-h) + 20px); border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg); background: var(--pl-surface); padding: clamp(20px, 2.4vw, 26px); box-shadow: var(--pl-shadow-sm); } .pl-summary__title { margin: 0 0 16px; font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; color: var(--pl-navy); } .pl-summary__rows { display: grid; gap: 10px; } .pl-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .pl-summary__label { color: var(--pl-muted); font-size: .92rem; } .pl-summary__value { font-weight: 700; color: var(--pl-navy); text-align: right; } .pl-summary__value--muted { font-weight: 500; color: var(--pl-muted); font-size: .88rem; } .pl-summary__row--total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--pl-line); } .pl-summary__row--total .pl-summary__label { color: var(--pl-navy); font-weight: 700; font-size: 1rem; } .pl-summary__row--total .pl-summary__value { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; } .pl-summary__cta { margin-top: 16px; } .pl-summary__cta .pl-btn, .pl-summary__cta .button { width: 100%; min-height: 48px; } .pl-summary__notice { margin: 14px 0 0; font-size: .78rem; line-height: 1.5; color: var(--pl-muted); } .pl-summary__help { margin: 8px 0 0; font-size: .78rem; color: var(--pl-muted); } /* WooCommerce notices — branded, accessible, with a compact status icon. Covers the PDP add-to-cart SUCCESS message AND the cart "Coupon code applied successfully." message (both are `.woocommerce-message`). Woo's message DOM is button-FIRST (`View cart `), so `order:2` sends the action to the end and the message text reads first. Wraps cleanly on narrow viewports. */ .woocommerce-message, .woocommerce-error, .woocommerce-info, .wc-block-components-notice-banner { list-style: none; border-radius: var(--pl-radius-lg); box-shadow: var(--pl-shadow-sm); padding: 13px 16px; margin: 0 0 18px; font-weight: 600; font-size: .92rem; line-height: 1.5; border: 1px solid transparent; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } /* Compact status icon — currentColor via mask, so it inherits each notice's accent. */ .woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 20px 20px; mask-size: 20px 20px; } .woocommerce-message::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5A10.5 10.5 0 1 0 22.5 12 10.51 10.51 0 0 0 12 1.5Zm5 8.2-6 6a1 1 0 0 1-1.4 0l-3-3 1.4-1.42 2.3 2.3 5.3-5.3Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5A10.5 10.5 0 1 0 22.5 12 10.51 10.51 0 0 0 12 1.5Zm5 8.2-6 6a1 1 0 0 1-1.4 0l-3-3 1.4-1.42 2.3 2.3 5.3-5.3Z'/%3E%3C/svg%3E"); } .woocommerce-info::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5A10.5 10.5 0 1 0 22.5 12 10.51 10.51 0 0 0 12 1.5ZM13 17h-2v-6h2Zm0-8h-2V7h2Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5A10.5 10.5 0 1 0 22.5 12 10.51 10.51 0 0 0 12 1.5ZM13 17h-2v-6h2Zm0-8h-2V7h2Z'/%3E%3C/svg%3E"); } .woocommerce-error::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5A10.5 10.5 0 1 0 22.5 12 10.51 10.51 0 0 0 12 1.5ZM13 13h-2V7h2Zm0 4h-2v-2h2Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5A10.5 10.5 0 1 0 22.5 12 10.51 10.51 0 0 0 12 1.5ZM13 13h-2V7h2Zm0 4h-2v-2h2Z'/%3E%3C/svg%3E"); } .woocommerce-message { background: var(--pl-success-bg); color: var(--pl-success); border-color: var(--pl-success-border); } .woocommerce-error { background: var(--pl-danger-bg); color: var(--pl-danger); border-color: var(--pl-danger-border); } .woocommerce-info { background: var(--pl-blue-050); color: var(--pl-blue-600); border-color: var(--pl-info-border); } /* Action button sits at the END (order:2 defeats Woo's button-first DOM); success "View cart" is a filled action, the rest are quiet outlines. */ .woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button { order: 2; margin-left: auto; flex: none; min-height: 38px; display: inline-flex; align-items: center; border-radius: var(--pl-radius); background: transparent; border: 1.5px solid currentColor; color: inherit; padding: 7px 15px; font-weight: 700; font-size: .86rem; white-space: nowrap; } .woocommerce-message .button { background: var(--pl-success); border-color: var(--pl-success); color: #fff; } /* Mini-cart total label/value */ .pl-minicart__totallabel { color: var(--pl-muted); font-weight: 600; } .pl-minicart__totalvalue { color: var(--pl-navy); } /* ---- Checkout ---- */ /* form.checkout is NO LONGER the grid — woocommerce/checkout/form-checkout.php now owns .pl-checkout__grid. Gridding the form itself and pinning #order_review to grid-column:2 (the old approach) fought the real wrappers and depended on core's child order. */ .woocommerce-checkout .pl-woo form.checkout { display: block; } .pl-checkout__head { margin-bottom: clamp(16px, 3vw, 28px); } .pl-checkout__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); margin: 0 0 6px; } .pl-checkout__note { margin: 0; font-size: .82rem; color: var(--pl-muted); } /* Figma 25:767 — customer details beside the order summary. */ .pl-checkout__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(24px, 4vw, 48px); align-items: start; } .pl-checkout__main { min-width: 0; } .pl-checkout__aside { min-width: 0; } .pl-checkout__help { margin: 10px 0 0; font-size: .78rem; color: var(--pl-muted); } /* Left column spans both rows; the order review + heading stay pinned top-right. */ .woocommerce-checkout #order_review_heading { margin: 0 0 12px; font-size: 1.1rem; } .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; } .woocommerce-checkout h3 { font-size: 1.2rem; } .woocommerce form .form-row label { font-weight: 600; color: var(--pl-navy); } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row .select2-container, .woocommerce form .form-row select { width: 100%; min-height: 48px; border: 1.5px solid var(--pl-field-border); border-radius: var(--pl-radius); padding: 12px 14px; font-size: 1rem; background: var(--pl-surface); } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { border-color: var(--pl-blue); box-shadow: var(--pl-ring); outline: none; } /* iOS Safari zooms the page when a focused control renders below 16px. The `.form-row` fields above already sit at 1rem; this floor catches any Woo checkout/account control that lives OUTSIDE `.form-row` so focusing it can never trigger zoom. No `.form-row` selector is repeated here — those are handled above — so this adds no duplicate/conflicting declaration. */ .woocommerce-checkout input.input-text, .woocommerce-checkout textarea, .woocommerce-checkout select, .woocommerce-account input.input-text, .woocommerce-account textarea, .woocommerce-account select { font-size: 16px; } .woocommerce form .form-row { margin: 0 0 16px; } .woocommerce form .form-row label .required { color: var(--pl-danger); border: 0; } /* Accessible validation: highlight the affected field + label. */ .woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select, .woocommerce form .form-row.woocommerce-invalid .select2-container { border-color: var(--pl-danger); } .woocommerce form .form-row.woocommerce-invalid label { color: var(--pl-danger); } .woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--pl-success-border); } .woocommerce-checkout #order_review { position: sticky; top: calc(var(--pl-header-h) + 20px); border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg); padding: clamp(20px, 2.4vw, 26px); background: var(--pl-surface); box-shadow: var(--pl-shadow-sm); } .woocommerce-checkout table.shop_table { width: 100%; } .woocommerce-checkout #payment { background: transparent; border-radius: var(--pl-radius); } .woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; margin: 0; list-style: none; } /* Native WooCommerce Place Order button — theme primary styling. The custom checkout confirmation feature (and its .pl-place-order alias + JS disable-gate) were removed in RC.6.7; WooCommerce owns the button's enabled/disabled state natively again. */ .woocommerce #payment #place_order { width: 100%; min-height: 54px; border-radius: var(--pl-radius); background: var(--pl-blue); color: #fff; border: none; font-weight: 700; font-size: 1.05rem; margin-top: 14px; box-shadow: var(--pl-cta-shadow); transition: background var(--pl-dur) var(--pl-ease), transform var(--pl-dur) var(--pl-ease), box-shadow var(--pl-dur) var(--pl-ease); } .woocommerce #payment #place_order:active { transform: translateY(0) scale(.98); } /* (RC.6.7) The custom checkout-confirmation module (.pl-checkout-confirm*) was removed entirely — the owner retired the confirmation requirement and WooCommerce native checkout owns validation again. No orphan selectors remain. */ /* ── Phase C.1 interaction polish — restrained motion (140–220ms, standard easing, no bounce, no scroll-jacking). All gated by prefers-reduced-motion; every control and total stays fully usable/visible without animation, and no visibility depends on JS. */ /* Woo notices: single fade-and-rise entrance (never loops) + View-cart press feedback. */ .woocommerce-message, .woocommerce-error, .woocommerce-info { animation: pl-notice-in 200ms var(--pl-ease) both; } @keyframes pl-notice-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button { transition: transform 140ms var(--pl-ease), background var(--pl-dur) var(--pl-ease); } .woocommerce-message .button:active, .woocommerce-error .button:active, .woocommerce-info .button:active { transform: scale(.97); } /* Cart drawer: short row fade when the Woo fragment re-renders the item list. */ .pl-cartdrawer__scroll .pl-minicart__item { animation: pl-row-in 180ms var(--pl-ease) both; } @keyframes pl-row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* (RC.6.7) The order-total flash was driven by the removed checkout.js (confirmation asset); removed here too so no orphan rule remains. The total still updates natively via WooCommerce fragments — just without the one-shot highlight. */ @media (prefers-reduced-motion: reduce) { .woocommerce-message, .woocommerce-error, .woocommerce-info, .pl-cartdrawer__scroll .pl-minicart__item { animation: none; } .woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button { transition: none; } } /* Returning-customer login + coupon toggles rendered as cards. */ .woocommerce-form-login, .woocommerce-form-coupon { border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg); padding: 20px; margin-bottom: 20px; background: var(--pl-surface); } .woocommerce-form-login .button, .woocommerce-form-coupon .button { min-height: 48px; border-radius: var(--pl-radius); background: var(--pl-blue); color: #fff; border: none; font-weight: 600; padding: 12px 22px; } .woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle { margin-bottom: 16px; } /* Order review — premium PolarLabs order-summary card. Styles Woo's NATIVE review-order table + payment; every class/row the checkout fragments update is preserved (cart items, product-quantity, cart-subtotal, coupon + remove-coupon, shipping options, tax, order-total, payment_methods, payment_box). Presentation only — no row is added, removed, or reordered. */ .woocommerce-checkout #order_review_heading { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; color: var(--pl-navy); margin: 0 0 16px; } .woocommerce-checkout .woocommerce-checkout-review-order-table { border-collapse: collapse; } /* RC.6.10.2 — the summary reads as ONE calm card: strip WooCommerce core's .shop_table box + per-row borders (they were winning over Block A on stylesheet load order, giving a table-in-a-card look). The #order_review ID makes this authoritative regardless of load order; only TWO intentional hairlines are re-added — items→totals (above Subtotal) and above the Total. */ #order_review .woocommerce-checkout-review-order-table, #order_review .woocommerce-checkout-review-order-table tbody th, #order_review .woocommerce-checkout-review-order-table tbody td, #order_review .woocommerce-checkout-review-order-table tfoot th, #order_review .woocommerce-checkout-review-order-table tfoot td { border: 0; background: transparent; } #order_review .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th, #order_review .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td { border-top: 1px solid var(--pl-line); padding-top: 14px; } #order_review .woocommerce-checkout-review-order-table tfoot tr.order-total th, #order_review .woocommerce-checkout-review-order-table tfoot tr.order-total td { border-top: 1px solid var(--pl-line); padding-top: 15px; } /* Header row kept in the DOM for assistive tech but hidden visually (the summary card has no header row). SINGLE AUTHORITY — consolidated here from the former .pl-review thead clip. */ .woocommerce-checkout .woocommerce-checkout-review-order-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* Product line items. */ .woocommerce-checkout .woocommerce-checkout-review-order-table tbody td { padding: 8px 0; border-top: 0; text-align: left; vertical-align: top; font-size: .92rem; color: var(--pl-navy); } .woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr:first-child td { border-top: 0; } .woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name { font-weight: 600; overflow-wrap: anywhere; } .woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name .product-quantity { color: var(--pl-muted); font-weight: 600; white-space: nowrap; } .woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name dl.variation { margin: 4px 0 0; font-size: .8rem; color: var(--pl-muted); } .woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total { text-align: right; white-space: nowrap; font-weight: 700; } /* Totals foot: subtotal / coupon / shipping / tax / total. */ .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td { padding: 6px 0; border-top: 0; text-align: left; font-size: .9rem; font-weight: 600; color: var(--pl-muted); } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td { text-align: right; color: var(--pl-navy); font-variant-numeric: tabular-nums; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:first-child th, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:first-child td { border-top: 1px solid var(--pl-line); padding-top: 14px; } /* Applied-coupon row + its quiet remove link. */ .woocommerce-checkout .woocommerce-checkout-review-order-table .cart-discount th, .woocommerce-checkout .woocommerce-checkout-review-order-table .cart-discount td { color: var(--pl-success); } .woocommerce-checkout .woocommerce-remove-coupon { margin-left: 8px; font-size: .78rem; font-weight: 600; color: var(--pl-muted); text-decoration: underline; white-space: nowrap; } .woocommerce-checkout .woocommerce-remove-coupon:hover { color: var(--pl-danger); } /* Shipping-method options list inside the shipping row. */ .woocommerce-checkout .woocommerce-checkout-review-order-table .shipping ul#shipping_method, .woocommerce-checkout .woocommerce-checkout-review-order-table .shipping ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .woocommerce-checkout .woocommerce-checkout-review-order-table .shipping ul li { display: flex; align-items: center; gap: 10px; padding: 3px 0; } /* Branded shipping radios (consolidated from the former .pl-review rule) + the neutral 'Calculated at checkout' placeholder styled as a quiet secondary value — Block A's tfoot td would otherwise render it as a bold navy amount. */ .woocommerce-checkout .woocommerce-checkout-review-order-table .shipping input[type="radio"] { width: 18px; height: 18px; flex: none; accent-color: var(--pl-blue); } .woocommerce-checkout .woocommerce-checkout-review-order-table .pl-review__shipping-neutral td { color: var(--pl-muted); font-weight: 500; } /* RC.6.10.2 — shipping as a labelled section (was a cramped 'Shipment' cell wedged beside the radios): the label sits ABOVE its methods; each real method is a clean full-width selectable row (parity with payment). Real tr.shipping only — the neutral 'Calculated at checkout' row stays a normal inline label/value. */ #order_review .woocommerce-checkout-review-order-table tr.shipping th { display: block; width: 100%; text-align: left; padding: 4px 0 8px; font-size: .9rem; font-weight: 600; color: var(--pl-muted); } #order_review .woocommerce-checkout-review-order-table tr.shipping td { display: block; width: 100%; text-align: left; } #order_review .woocommerce-checkout-review-order-table .shipping ul li { padding: 10px 12px; min-height: 44px; border: 1px solid var(--pl-line); border-radius: var(--pl-radius); } #order_review .woocommerce-checkout-review-order-table .shipping ul li:has(input[type="radio"]:checked) { border-color: var(--pl-blue); background: var(--pl-blue-050); } #order_review .woocommerce-checkout-review-order-table .shipping ul li label { font-weight: 600; color: var(--pl-navy); cursor: pointer; line-height: 1.35; } /* Order total emphasis. */ .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th { font-size: 1rem; font-weight: 700; color: var(--pl-navy); padding-top: 15px; border-top: 1px solid var(--pl-line); } .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td { font-size: 1.25rem; font-weight: 800; color: var(--pl-navy); letter-spacing: -.01em; padding-top: 15px; border-top: 1px solid var(--pl-line); } .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount { font-weight: 800; } /* Payment integration. */ .woocommerce-checkout #payment { margin-top: 16px; } /* Workstream E — payment methods as clean selectable rows that belong to the summary system, WITHOUT touching WooCommerce's native controls, gateway markup, or scripts. Native radios/labels/payment_box (incl. gateway fields/iframes) are all preserved; only presentation is added. Parity with the shipping rows: 18px branded radios, a clear selected state, and a visible focus ring at the most trust-critical step. */ .woocommerce-checkout #payment ul.payment_methods li { display: block; border: 1px solid var(--pl-line); border-radius: var(--pl-radius); padding: 12px 14px; margin: 0 0 8px; transition: border-color var(--pl-dur) var(--pl-ease), background var(--pl-dur) var(--pl-ease); } .woocommerce-checkout #payment ul.payment_methods li:last-child { margin-bottom: 0; } .woocommerce-checkout #payment ul.payment_methods li > input[type="radio"] { width: 18px; height: 18px; margin-right: 8px; accent-color: var(--pl-blue); vertical-align: middle; } .woocommerce-checkout #payment ul.payment_methods li > label { font-weight: 600; color: var(--pl-navy); cursor: pointer; display: inline; } /* Reliable selected emphasis (no :has() dependency — matches the codebase's class-first preference, theme.js:688): the checked radio's own label. */ .woocommerce-checkout #payment ul.payment_methods li > input[type="radio"]:checked + label { font-weight: 700; } /* Progressive row highlight where :has() is supported; the native radio always shows the selected state regardless, so this is pure enhancement, never load-bearing. */ .woocommerce-checkout #payment ul.payment_methods li:has(> input[type="radio"]:checked) { border-color: var(--pl-blue); background: var(--pl-blue-050); } .woocommerce-checkout #payment ul.payment_methods li > input[type="radio"]:focus-visible { outline: 2px solid var(--pl-blue); outline-offset: 2px; } /* Expanded gateway content stays visually connected to its selected method — a quiet inset sub-panel, not a card-in-a-card. */ /* RC.6.10.2 — payment description is a quiet inset ATTACHED to its method, never a floating grey speech-bubble. The higher-specificity selector out-specifies core's grey `.woocommerce #payment div.payment_box` (1,2,1) that was winning; core's ::before caret is removed so the description reads as part of the selected method, not a callout bubble. */ .woocommerce-checkout #payment ul.payment_methods .payment_box { background: var(--pl-surface-2); border: 0; border-radius: var(--pl-radius-sm); padding: 10px 12px; margin: 10px 0 2px; font-size: .86rem; line-height: 1.5; color: var(--pl-muted); } .woocommerce-checkout #payment ul.payment_methods .payment_box::before { display: none; } .woocommerce-checkout #payment .woocommerce-privacy-policy-text { margin-top: 12px; font-size: .8rem; color: var(--pl-muted); } .woocommerce #payment #place_order:hover:not([disabled]):not([aria-disabled="true"]) { background: var(--pl-blue-600); transform: translateY(-1px); box-shadow: var(--pl-cta-shadow-hover); } /* Reduced-motion-safe processing state (WooCommerce blockUI overlay). */ .woocommerce .blockUI.blockOverlay { position: relative; } .woocommerce .blockUI.blockOverlay::before { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid rgba(40,120,245,.25); border-top-color: var(--pl-blue); border-radius: 50%; animation: pl-spin .8s linear infinite; } @media (prefers-reduced-motion: reduce) { .woocommerce .blockUI.blockOverlay::before { animation: none; border-top-color: var(--pl-blue); opacity: .8; } } @keyframes pl-spin { to { transform: rotate(360deg); } } /* ---- My Account ---- */ .woocommerce-account .woocommerce { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; display: grid; gap: 4px; border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg); padding: 10px; } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: var(--pl-radius-sm); color: var(--pl-navy); font-weight: 600; transition: background var(--pl-dur) var(--pl-ease), color var(--pl-dur) var(--pl-ease); } .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--pl-surface-3); color: var(--pl-blue); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--pl-blue); color: #fff; } /* Log out is a secondary action: separated + muted. */ .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--pl-line); } .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--pl-muted); font-weight: 600; } .woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: var(--pl-danger); background: var(--pl-danger-bg); } /* Mobile "Account menu" disclosure toggle — hidden on desktop. */ .pl-account-nav-toggle { display: none; } .pl-account-nav-toggle__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; } .pl-account-nav-toggle__label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pl-muted); } .pl-account-nav-toggle__current { font-size: 1rem; color: var(--pl-navy); font-weight: 700; } .pl-account-nav-toggle__chevron { transition: transform var(--pl-dur) var(--pl-ease); color: var(--pl-muted); flex: none; } .pl-account-nav-toggle[aria-expanded="true"] .pl-account-nav-toggle__chevron { transform: rotate(180deg); } .woocommerce-account .woocommerce-MyAccount-content, .woocommerce-account .woocommerce-MyAccount-navigation { min-width: 0; } /* ========================================================================== Logged-out account width — the desktop "narrow strip" defect -------------------------------------------------------------------------- NOT the product-card bug, despite looking like it. That was one percentage resolving against a grid track. This is FOUR nested constraints, measured on live v1.0.2 at 1440 by peeling them off one at a time: .pl-prose 621px (72ch READING measure — page.php wrapped the account app in it; My Account is a WP page) .woocommerce 480px (the old cap that used to live on this line) .col2-set 224px tracks .col-1 107.5px = core's .col-1{width:48%} of a 224px track Peeling them off, one layer at a time, gave: 107.5 -> 224 (section 0's col-1/col-2 reset alone) -> 294.5 (drop the 480 cap) -> 544 (unwrap prose) -> 424 per column with the composition below. IMPORTANT: section 0's reset is necessary but NOT sufficient. On its own it only lifts the form from 107.5px to 224px — still a strip. Do not re-close this defect by pointing at that reset; all four layers must go. page.php now renders .pl-page__app instead of .pl-prose on account/cart/ checkout, which removes the outermost layer. ========================================================================== */ .pl-page__app { max-width: none; } /* A real login/register composition: two columns, capped for readability rather than crushed. 880 - 32 gap / 2 = 424 per column at desktop. */ .woocommerce-account:not(.logged-in) .woocommerce { max-width: 880px; margin-inline: auto; } .woocommerce-account .col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .woocommerce form.login, .woocommerce form.register, .woocommerce form.lost_reset_password { border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg); padding: 24px; } .woocommerce form.login .button, .woocommerce form.register .button, .woocommerce form.lost_reset_password .button { min-height: 48px; border-radius: var(--pl-radius); background: var(--pl-blue); color: #fff; border: none; font-weight: 700; padding: 12px 22px; width: 100%; } .woocommerce form.login .button:hover, .woocommerce form.register .button:hover { background: var(--pl-blue-600); } .woocommerce form .woocommerce-form-login__rememberme, .woocommerce form label.woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; } /* Dashboard */ .pl-account { display: grid; gap: 18px; } .pl-account__welcome { padding-bottom: 4px; } .pl-account__hello { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem); margin: 0; } .pl-account__welcomemeta { color: var(--pl-muted); margin: 6px 0 0; font-size: .92rem; } .pl-account__card { border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg); padding: 20px; } .pl-account__cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .pl-account__cardtitle { font-size: 1.05rem; margin: 0 0 12px; } .pl-account__cardhead .pl-account__cardtitle { margin: 0; } .pl-account__orders { list-style: none; display: grid; gap: 8px; } .pl-account__order a { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--pl-radius-sm); background: var(--pl-surface-2); color: var(--pl-navy); min-height: 44px; transition: background var(--pl-dur) var(--pl-ease); } .pl-account__order a:hover { background: var(--pl-surface-3); } .pl-account__ordernum { font-weight: 700; } .pl-account__orderdate { color: var(--pl-muted); font-size: .88rem; } .pl-account__orderstatus { color: var(--pl-muted); font-size: .88rem; } .pl-account__ordertotal { font-weight: 600; } .pl-account__orderview { color: var(--pl-blue); font-weight: 600; font-size: .9rem; } .pl-account__empty { text-align: center; padding: 18px; color: var(--pl-muted); } .pl-account__empty p { margin: 0 0 12px; } /* Future service slots (Coming Soon) */ .pl-account__services { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .pl-account__service { border: 1px solid var(--pl-line); border-radius: var(--pl-radius); padding: 14px; background: var(--pl-surface-2); } .pl-account__service.is-available { background: var(--pl-surface); border-color: var(--pl-line-strong); } .pl-account__servicetop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .pl-account__servicetitle { font-weight: 700; color: var(--pl-navy); } .pl-account__soon { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pl-muted); background: var(--pl-surface-3); border-radius: var(--pl-radius-pill); padding: 3px 8px; } .pl-account__servicedesc { color: var(--pl-muted); font-size: .85rem; } /* Support CTA */ .pl-account__support { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg); padding: 20px; background: var(--pl-surface-2); } .pl-account__supporttext { color: var(--pl-muted); margin: 4px 0 0; } /* Orders list table (WooCommerce myaccount/orders) */ .woocommerce-account .woocommerce-orders-table, .woocommerce-account .woocommerce-MyAccount-content table.shop_table { width: 100%; border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; } .woocommerce-account table.shop_table th { background: var(--pl-surface-2); color: var(--pl-navy); text-align: left; padding: 12px 14px; font-weight: 700; } .woocommerce-account table.shop_table td { padding: 14px; border-top: 1px solid var(--pl-line); } .woocommerce-account .woocommerce-orders-table__cell-order-actions a.button { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--pl-radius); background: transparent; border: 1.5px solid var(--pl-field-border); color: var(--pl-navy); font-weight: 600; } .woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:hover { border-color: var(--pl-blue); color: var(--pl-blue); } /* Order details + addresses */ .woocommerce mark, .woocommerce .order-number, .woocommerce .order-status { background: var(--pl-blue-050); color: var(--pl-navy); padding: 1px 7px; border-radius: 5px; font-weight: 700; } .woocommerce-order-details, .woocommerce-customer-details { margin-top: 24px; } .woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-order-downloads__title { font-size: 1.2rem; margin: 0 0 12px; } .woocommerce-order-overview.woocommerce-thankyou-order-details { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; padding: 18px; border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg); background: var(--pl-surface-2); margin: 0 0 24px; } .woocommerce-order-overview li { font-size: .85rem; color: var(--pl-muted); } .woocommerce-order-overview li strong { display: block; color: var(--pl-navy); font-size: 1rem; margin-top: 2px; word-break: break-word; } .woocommerce-table--order-details { width: 100%; border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; } .woocommerce-table--order-details th, .woocommerce-table--order-details td { padding: 12px 14px; border-top: 1px solid var(--pl-line); text-align: left; } .woocommerce-table--order-details tfoot th { text-align: right; } .woocommerce-table--order-details .product-total, .woocommerce-table--order-details td:last-child, .woocommerce-table--order-details th:last-child { text-align: right; } .woocommerce-table--order-details .order-total .amount { font-weight: 700; color: var(--pl-navy); } .woocommerce-customer-details .col2-set, .woocommerce-Addresses.addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .woocommerce-Address { border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg); padding: 20px; } .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .woocommerce-Address-title .edit { color: var(--pl-blue); font-weight: 600; } .woocommerce-Address address { font-style: normal; color: var(--pl-ink); line-height: 1.6; } /* ---- Mini-cart drawer (C1.2 — compact commerce panel) --------------------- The panel is a flex column: header (shell) + body. The body is itself a flex column — pinned free-shipping progress (flex:none), the ONLY scroll container (.pl-cartdrawer__scroll, flex:1), and the anchored footer (flex:none). Header and footer never scroll; the footer can't obscure the last row. Everything below the header ships inside the .widget_shopping_cart_content fragment, so it all refreshes together after add / remove / quantity change. */ .pl-cartdrawer { position: fixed; inset: 0; z-index: var(--pl-z-cart-drawer); } .pl-cartdrawer[hidden] { display: none; } .pl-cartdrawer__backdrop { position: absolute; inset: 0; background: rgba(4,16,31,.5); opacity: 0; transition: opacity 240ms var(--pl-ease); } .pl-cartdrawer.is-open .pl-cartdrawer__backdrop { opacity: 1; } /* Full-width mobile (no wasteful 80% strip); ~448px right-drawer on tablet/desktop. Emil's iOS drawer curve; the global reduced-motion rule zeroes the duration so it appears instantly (translateX is functional positioning, not decorative motion). */ .pl-cartdrawer__panel { position: absolute; inset: 0 0 0 auto; height: 100%; width: min(100%, 448px); background: var(--pl-surface); box-shadow: var(--pl-shadow-lg); transform: translateX(100%); transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1); display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .pl-cartdrawer.is-open .pl-cartdrawer__panel { transform: translateX(0); } /* Header — compact, one hairline; count baseline-aligned to the title. */ .pl-cartdrawer__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 14px; border-bottom: 1px solid var(--pl-line); } .pl-cartdrawer__heading { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .pl-cartdrawer__title { margin: 0; font-size: 1.12rem; } .pl-cartdrawer__count { color: var(--pl-muted); font-size: .84rem; font-weight: 600; white-space: nowrap; } /* Body geometry */ .pl-cartdrawer__body { flex: 1; min-height: 0; display: flex; flex-direction: column; } .pl-cartdrawer__scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 18px; display: grid; gap: 12px; align-content: start; } /* Free-shipping progress — pinned; fail-closed (rendered only when a real WC Free Shipping threshold exists). One factual line + a restrained Polar-blue bar. */ .pl-cartdrawer__ship { flex: none; padding: 12px 18px; border-bottom: 1px solid var(--pl-line); display: grid; gap: 8px; } .pl-cartdrawer__ship-status { margin: 0; font-size: .84rem; font-weight: 600; color: var(--pl-navy); } .pl-cartdrawer__ship.is-qualified .pl-cartdrawer__ship-status { color: var(--pl-blue-600); } .pl-cartdrawer__ship-track { height: 6px; border-radius: 999px; background: var(--pl-blue-050); overflow: hidden; } .pl-cartdrawer__ship-bar { display: block; height: 100%; border-radius: 999px; background: var(--pl-blue); } /* Product rows — [icy tile] [name + strength + qty/price], restrained text Remove. */ .pl-minicart__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .pl-minicart__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; } .pl-minicart__thumb { flex: none; width: 76px; height: 76px; border-radius: var(--pl-radius-sm); overflow: hidden; background: var(--pl-card-tile); box-shadow: inset 0 0 0 1px var(--pl-line); display: block; } .pl-minicart__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .pl-minicart__body { min-width: 0; display: grid; gap: 6px; } .pl-minicart__row1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } /* Title: dominant, wraps, clamped to 2 lines (full name stays in the DOM/SR + the product link). break-word avoids mid-character cuts on names with spaces; min-width:0 lets it shrink in the flex row so a long title can never force horizontal overflow. */ .pl-minicart__name { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--pl-navy); font-size: .95rem; line-height: 1.3; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pl-minicart__name:hover { color: var(--pl-blue); } .pl-minicart__attr { margin: 0; font-size: .78rem; color: var(--pl-muted); line-height: 1.4; overflow-wrap: anywhere; } .pl-minicart__attr .variation, .pl-minicart__attr dl, .pl-minicart__attr dt, .pl-minicart__attr dd { margin: 0; display: inline; font-size: inherit; color: inherit; } .pl-minicart__attr dd + dt::before { content: " · "; } .pl-minicart__remove { flex: none; align-self: flex-start; font-size: .76rem; font-weight: 600; color: var(--pl-muted); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; } .pl-minicart__remove:hover, .pl-minicart__remove:focus-visible { color: var(--pl-danger); } .pl-minicart__row2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; } .pl-minicart__price { font-weight: 700; color: var(--pl-navy); font-size: .95rem; white-space: nowrap; } /* Quantity — READ-ONLY compact metadata (owner decision; edited on the full Cart page). Not an interactive control; re-renders with the fragment. */ .pl-minicart__qty { color: var(--pl-muted); font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; } /* Coupon — compact native form (POST to cart); only when wc_coupons_enabled(). */ .pl-minicart__coupon { display: grid; gap: 6px; margin-top: 2px; } .pl-minicart__couponlabel { font-size: .78rem; font-weight: 600; color: var(--pl-navy); } .pl-minicart__couponrow { display: flex; gap: 8px; min-width: 0; } .pl-minicart__couponrow input.input-text { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--pl-field-border); border-radius: var(--pl-radius); font-size: 1rem; } .pl-minicart__couponrow input.input-text:focus { border-color: var(--pl-blue); box-shadow: var(--pl-ring); outline: none; } .pl-minicart__couponbtn { flex: none; min-height: 44px; } /* Anchored footer — subtotal · Proceed to checkout (dominant) · View cart (quiet) · RUO. */ .pl-cartdrawer__foot { flex: none; padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--pl-line); box-shadow: 0 -6px 16px rgba(7,24,45,.06); background: var(--pl-surface); display: grid; gap: 10px; } .pl-minicart__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .pl-cartdrawer__foot .pl-minicart__totallabel { color: var(--pl-navy); font-weight: 700; font-size: 1rem; } .pl-cartdrawer__foot .pl-minicart__totalvalue { color: var(--pl-navy); font-weight: 800; font-size: 1.18rem; } .pl-minicart__buttons { display: grid; gap: 8px; margin: 0; } /* Commerce CTA contract — mini-cart Proceed (the canonical .pl-btn--primary already carries --pl-radius + the shared elevation + :active press); weight 700 to match the rest of the funnel. */ .pl-minicart__checkout { min-height: 50px; font-size: 1.02rem; font-weight: 700; } .pl-minicart__viewcart { justify-self: center; font-size: .85rem; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; } .pl-minicart__ruo { margin: 2px 0 0; font-size: .74rem; line-height: 1.5; color: var(--pl-muted); text-align: center; } /* Empty */ .pl-minicart__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 40px 20px; } .pl-minicart__empty .pl-empty__icon { color: var(--pl-blue); } /* ── WooCommerce core neutralizers — SCOPED to the PolarLabs cart drawer ONLY. ROOT CAUSE: the drawer's